/* /src/App/Routes.razor.rz.scp.css */
/* Splash styles moved to /Styles/app.css to avoid Blazor scoped-CSS isolation
   constraints (the splash uses position: fixed and must reliably cover viewport). */
/* /src/Features/Account/Pages/Account/BookingLookup.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   BOOKING LOOKUP — hệ "PHIẾU VÉ GIẤY" (redesign 06/08 chiều)
   Nền giấy ấm ivory + mực nâu đậm + cam thương hiệu (#ea580c) làm màu
   con dấu. Không gradient, không bóng mềm: phân tách bằng VẠCH KẺ
   (ruled lines) và bóng cứng lệch góc kiểu bản in.

   Điểm nhấn: form tra cứu = TẤM VÉ (viền mực 1.5px, đường đục lỗ ngăn
   thân vé với cuống vé, con dấu hoa mai đóng nghiêng góc phải).
   Nhịp các khối cố ý khác nhau: hero 2 cột → kết quả full-width →
   4 bước sổ cái (vạch kẻ đầu cột) → FAQ kẻ dòng + đầu mục dính trái.
   ═══════════════════════════════════════════════════════════════════ */
.bl-root[b-od723omjrm] {
    --paper: #f6f3ec;
    --paper-2: #efeadf;
    --card: #fffdf8;
    --ink: #221f1a;
    --ink-2: #4f4a40;
    --ink-3: #857c6c;
    --line: #e5dfd2;
    --line-2: #cfc7b4;
    --accent: #ea580c;
    --accent-deep: #c2410c;
    --accent-soft: #fbeee1;
    --accent-line: #f0ceac;
    background: var(--paper);
    color: var(--ink-2);
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.bl-root h1[b-od723omjrm], .bl-root h2[b-od723omjrm] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}
.bl-root h2[b-od723omjrm] { font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.15; margin: 0; }
.bl-root .hl[b-od723omjrm] { color: var(--accent); }
/* Fallback 'Be Vietnam Pro' trước monospace — Consolas thiếu glyph Việt */
.bl-root .mono[b-od723omjrm] { font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace; }

.bl-container[b-od723omjrm] { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.bl-section[b-od723omjrm] { padding: 4rem 0 0; }
.bl-section--last[b-od723omjrm] { padding-bottom: 4.5rem; }

/* Chỉ hiện trên bản in — quy tắc bật nằm ở <style> in trong .razor */
.bl-printonly[b-od723omjrm] { display: none; }

/* ═════════════════ HERO ═════════════════ */
.bl-hero[b-od723omjrm] {
    background: var(--paper);
    border-bottom: 1px solid var(--line-2);
    padding: 108px 0 3.4rem;
}

.bl-hero-grid[b-od723omjrm] {
    display: grid; grid-template-columns: 1fr;
    gap: 2.6rem; align-items: center;
}
@media (min-width: 1024px) { .bl-hero-grid[b-od723omjrm] { grid-template-columns: 1.05fr .95fr; gap: 4.5rem; } }

/* Eyebrow: vạch cam ngắn + chữ mono — mở đầu kiểu tiêu đề chứng từ */
.hero-eyebrow[b-od723omjrm] {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 1rem;
    font-size: .65rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-deep);
}
.hero-eyebrow[b-od723omjrm]::before { content: ''; width: 26px; height: 2px; flex: none; background: var(--accent); }
.bl-hero-title[b-od723omjrm] { font-size: clamp(1.9rem, 4vw, 2.85rem); line-height: 1.1; margin: 0 0 1rem; }
.bl-hero-desc[b-od723omjrm] { font-size: .92rem; color: var(--ink-2); line-height: 1.7; margin: 0 0 1.2rem; max-width: 30rem; }
.bl-trust[b-od723omjrm] { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.bl-trust-item[b-od723omjrm] { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-3); }
.bl-trust-item svg[b-od723omjrm] { width: 14px; height: 14px; color: var(--accent); }

/* Danh mục dịch vụ tra cứu được — tag vuông vắn kiểu ô kê khai */
.bl-svc[b-od723omjrm] { margin-top: 1.7rem; padding-top: 1.2rem; border-top: 1px dashed var(--line-2); }
.bl-svc-lbl[b-od723omjrm] {
    display: block; margin-bottom: .6rem;
    font-size: .6rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-3);
}
/* Lưới cố định thay vì flex-wrap: 6 tag xuống dòng tự do cho ra 5+1 lệch hẳn
   (và đổi kiểu vỡ dòng theo từng ngôn ngữ). 2×3 / 3×2 luôn cân. */
.bl-svc-row[b-od723omjrm] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
@media (min-width: 480px) { .bl-svc-row[b-od723omjrm] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-svc-chip[b-od723omjrm] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .73rem; font-weight: 600;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 7px;
    padding: .38rem .7rem .38rem .6rem;
}
.bl-svc-chip svg[b-od723omjrm] { width: 14px; height: 14px; flex: none; color: var(--accent); }

/* ===== Form = TẤM VÉ ===== */
.bl-tkt[b-od723omjrm] {
    position: relative;
    background: var(--card);
    border: 1.5px solid var(--ink);
    border-radius: 14px;
    /* bóng cứng lệch góc kiểu bản in — không dùng blur mềm */
    box-shadow: 7px 9px 0 -2px rgba(34, 31, 26, .08);
}
/* Con dấu hoa mai đóng nghiêng góc phải trên — chi tiết trang trí duy nhất */
.bl-tkt-stamp[b-od723omjrm] {
    position: absolute; top: -26px; right: -18px;
    width: 88px; height: 88px;
    transform: rotate(12deg);
    opacity: .92;
    pointer-events: none;
}
.bl-tkt-stamp svg[b-od723omjrm] { width: 100%; height: 100%; }

.bl-tkt-hd[b-od723omjrm] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: .7rem 1.5rem;
    border-bottom: 1.5px solid var(--ink);
    background: var(--ink);
    border-radius: 12px 12px 0 0;
}
.bl-tkt-hd .mono[b-od723omjrm] {
    font-size: .6rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--paper);
}
.bl-tkt-plane[b-od723omjrm] { width: 13px; height: 13px; flex: none; color: var(--accent); transform: rotate(90deg); }
/* chừa chỗ cho con dấu đè lên góc phải */
.bl-tkt-hd[b-od723omjrm] { padding-right: 4.6rem; }

.bl-tkt-body[b-od723omjrm] { padding: 1.3rem 1.5rem .4rem; }
.bl-form-title[b-od723omjrm] { font-size: 1.08rem !important; margin: 0 0 1.05rem !important; }

.bl-alert[b-od723omjrm] {
    display: flex; align-items: flex-start; gap: 9px;
    border-radius: 8px;
    padding: .7rem .85rem;
    font-size: .8rem;
    margin-bottom: 1rem;
}
.bl-alert svg[b-od723omjrm] { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.bl-alert.is-good[b-od723omjrm] { background: #f0f8ee; border: 1px solid #bcdcb4; color: #2f6b28; }
.bl-alert.is-bad[b-od723omjrm] { background: #fdf1ef; border: 1px solid #f2c4bc; color: #ab2c1c; }

.bl-form-grp[b-od723omjrm] { margin-bottom: .95rem; }
.bl-label[b-od723omjrm] {
    display: block;
    font-size: .68rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: .35rem;
}
.bl-req[b-od723omjrm] { color: var(--accent); }
.bl-input[b-od723omjrm] {
    width: 100%;
    background: var(--card);
    border: 1.3px solid var(--line-2);
    border-radius: 8px;
    padding: .72rem .9rem;
    font-size: .875rem;
    color: var(--ink);
    transition: border-color .2s, box-shadow .2s;
}
.bl-input.mono[b-od723omjrm] { letter-spacing: .04em; }
.bl-input[b-od723omjrm]::placeholder { color: #aba396; letter-spacing: normal; }
.bl-input:focus[b-od723omjrm] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, .14); }

/* Đường đục lỗ ngăn thân vé với cuống vé: nét đứt + 2 "lỗ xé" hai bên,
   lỗ tô màu nền giấy và đè lên viền vé (cha phải overflow hiện). */
.bl-tkt-perf[b-od723omjrm] {
    position: relative;
    margin: .5rem 0 0;
    border-top: 2px dashed var(--line-2);
}
.bl-tkt-perf[b-od723omjrm]::before, .bl-tkt-perf[b-od723omjrm]::after {
    content: '';
    position: absolute; top: -10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
}
.bl-tkt-perf[b-od723omjrm]::before { left: -10.5px; clip-path: inset(0 0 0 50%); }
.bl-tkt-perf[b-od723omjrm]::after { right: -10.5px; clip-path: inset(0 50% 0 0); }

.bl-tkt-stub[b-od723omjrm] { padding: 1.15rem 1.5rem 1.3rem; }

.bl-btn[b-od723omjrm] {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent); color: #fff;
    border-radius: 8px;
    padding: .8rem 1rem;
    font-size: .875rem; font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 3px 4px 0 -1px rgba(194, 65, 12, .45);
    transition: transform .16s ease, box-shadow .16s ease, background .15s;
}
.bl-btn svg[b-od723omjrm] { width: 16px; height: 16px; }
.bl-btn:hover:not(:disabled)[b-od723omjrm] { background: var(--accent-deep); transform: translate(-1px, -1px); box-shadow: 4px 5px 0 -1px rgba(194, 65, 12, .5); }
.bl-btn:active:not(:disabled)[b-od723omjrm] { transform: translate(0, 0); box-shadow: 1px 2px 0 -1px rgba(194, 65, 12, .5); }
.bl-btn:disabled[b-od723omjrm] { opacity: .65; cursor: not-allowed; }
.bl-btn:focus-visible[b-od723omjrm] { outline: 2px solid var(--ink); outline-offset: 2px; }
.bl-spin[b-od723omjrm] {
    width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bl-rot-b-od723omjrm .7s linear infinite;
}
@keyframes bl-rot-b-od723omjrm { to { transform: rotate(360deg); } }
.bl-form-note[b-od723omjrm] { margin: .75rem 0 0; font-size: .68rem; color: var(--ink-3); line-height: 1.5; text-align: center; }

/* ═════════════════ KẾT QUẢ TRA CỨU ═════════════════ */
/* Chừa chỗ cho thanh header dính khi JS cuộn tới #bl-result */
.bl-result[b-od723omjrm] { scroll-margin-top: 96px; }

.bl-res-bar[b-od723omjrm] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem;
    margin-bottom: 1rem;
}
.bl-res-kicker[b-od723omjrm] {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: .65rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent-deep);
}
.bl-res-kicker[b-od723omjrm]::before {
    content: '';
    width: 12px; height: 12px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3E%3Cg fill='%23f97316' stroke='%23c2410c' stroke-width='1.3'%3E%3Ccircle cx='0' cy='-8.2' r='6.4'/%3E%3Ccircle cx='7.8' cy='-2.5' r='6.4'/%3E%3Ccircle cx='4.8' cy='6.6' r='6.4'/%3E%3Ccircle cx='-4.8' cy='6.6' r='6.4'/%3E%3Ccircle cx='-7.8' cy='-2.5' r='6.4'/%3E%3C/g%3E%3Ccircle r='3' fill='%23fff7ed'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bl-res-acts[b-od723omjrm] { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-gbtn[b-od723omjrm] {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--card);
    border: 1.3px solid var(--ink);
    border-radius: 8px;
    padding: .45rem .8rem;
    font-size: .76rem; font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: background .18s, color .18s;
}
.bl-gbtn svg[b-od723omjrm] { width: 15px; height: 15px; color: var(--ink-3); transition: color .18s; }
.bl-gbtn:hover[b-od723omjrm] { background: var(--ink); color: var(--paper); }
.bl-gbtn:hover svg[b-od723omjrm] { color: var(--accent); }
.bl-gbtn:focus-visible[b-od723omjrm] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Đầu bản in — thay cho header/footer bị ẩn khi in */
.bl-print-head[b-od723omjrm] {
    margin-bottom: 10mm;
    padding-bottom: 3mm;
    border-bottom: 1.5px solid #221f1a;
}
.bl-print-head .brand[b-od723omjrm] { display: block; font-size: 13pt; font-weight: 800; color: #221f1a; }
.bl-print-head .src[b-od723omjrm] { display: block; font-size: 8pt; color: #857c6c; margin-top: 1mm; }

.bl-stack[b-od723omjrm] { display: flex; flex-direction: column; gap: 1rem; }
.bl-grid[b-od723omjrm] { display: grid; gap: 1rem; }
.bl-grid-2-1[b-od723omjrm] { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .bl-grid-2-1[b-od723omjrm] { grid-template-columns: 2fr 1fr; align-items: start; } }

.bl-card[b-od723omjrm] {
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 10px;
    overflow: hidden;
}
/* Đầu thẻ kiểu tiêu đề chứng từ: mono hoa, kẻ chân — không nền gradient */
.bl-card-hd[b-od723omjrm] {
    padding: .8rem 1.2rem;
    border-bottom: 1px solid var(--line);
}
.bl-card-hd h3[b-od723omjrm] {
    margin: 0;
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', monospace;
    font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink);
}
.bl-card-pad[b-od723omjrm] { padding: 1.1rem 1.2rem; }

/* Header kết quả — tấm vé chính: viền mực đậm + bóng cứng */
.bl-result-card[b-od723omjrm] { border: 1.5px solid var(--ink); box-shadow: 6px 8px 0 -2px rgba(34, 31, 26, .08); }
.bl-result-hd[b-od723omjrm] {
    display: flex; flex-wrap: wrap; gap: 1rem;
    align-items: center; justify-content: space-between;
    padding: 1.15rem 1.3rem;
}
.bl-result-id[b-od723omjrm] { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.bl-result-ico[b-od723omjrm] {
    flex: none;
    width: 42px; height: 42px; border-radius: 9px;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.bl-result-ico svg[b-od723omjrm] { width: 21px; height: 21px; color: var(--paper); }
.bl-result-eyebrow[b-od723omjrm] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', monospace;
    font-size: .6rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 3px;
}
.bl-result-code[b-od723omjrm] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', monospace;
    font-size: 1.35rem; font-weight: 600; line-height: 1.15;
    color: var(--ink);
    letter-spacing: .02em;
}
.bl-result-meta[b-od723omjrm] { font-size: .72rem; color: var(--ink-3); margin-top: 3px; }
.bl-result-right[b-od723omjrm] { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.bl-result-tot[b-od723omjrm] { text-align: right; }
.bl-result-tot-lbl[b-od723omjrm] { font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.bl-result-tot-val[b-od723omjrm] { font-size: 1.15rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Lưới dữ liệu label/value */
.bl-dgrid[b-od723omjrm] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
@media (min-width: 640px) { .bl-dgrid.cols-3[b-od723omjrm] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bl-dgrid .col-2[b-od723omjrm] { grid-column: span 2; }
.bl-dl[b-od723omjrm] {
    font-size: .62rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 2px;
}
.bl-dv[b-od723omjrm] { font-size: .84rem; font-weight: 500; color: var(--ink); line-height: 1.4; }
.bl-dv.mono[b-od723omjrm] { font-size: .8rem; letter-spacing: .02em; }
.bl-break[b-od723omjrm] { word-break: break-all; }
.bl-mono[b-od723omjrm] { font-family: 'IBM Plex Mono', 'Be Vietnam Pro', monospace; font-size: .8rem; }

/* Chặng bay: FROM ✈ TO trên tuyến nét đứt — nền giấy nhạt, không gradient */
.bl-seg[b-od723omjrm] {
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin-bottom: .7rem;
    background: var(--paper);
}
.bl-seg:last-child[b-od723omjrm] { margin-bottom: 0; }
.bl-seg-hd[b-od723omjrm] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .72rem; color: var(--ink-3);
    margin-bottom: .6rem;
}
.bl-seg-hd .name[b-od723omjrm] { font-weight: 700; color: var(--ink); }
.bl-seg-route[b-od723omjrm] { display: flex; align-items: center; gap: 12px; }
.bl-seg-pt[b-od723omjrm] { min-width: 0; }
.bl-seg-pt .iata[b-od723omjrm] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', monospace;
    font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.1;
}
.bl-seg-pt .city[b-od723omjrm] { font-size: .68rem; color: var(--ink-3); }
.bl-seg-pt .time[b-od723omjrm] { font-size: .72rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.bl-seg-pt:last-child[b-od723omjrm] { text-align: right; }
.bl-seg-line[b-od723omjrm] {
    flex: 1; position: relative;
    display: flex; align-items: flex-end; justify-content: center;
    min-height: 34px;
}
.bl-seg-line[b-od723omjrm]::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 12px;
    border-top: 2px dashed var(--accent-line);
}
.bl-seg-line[b-od723omjrm]::after {
    content: '';
    position: absolute; top: 4px; left: 50%;
    width: 16px; height: 16px;
    margin-left: -8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea580c'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    transform: rotate(90deg);
    filter: drop-shadow(0 0 3px var(--paper));
}
.bl-seg-line span[b-od723omjrm] { position: relative; z-index: 1; font-size: .62rem; color: var(--ink-3); }
.bl-seg-foot[b-od723omjrm] { margin-top: .55rem; font-size: .7rem; color: var(--ink-3); }

/* Chặng hãng đã huỷ — giờ bay giữ nguyên nên phải gạch ngang, chỉ đổi màu nền là quá nhẹ. */
.bl-seg--cancelled[b-od723omjrm] {
    border-color: #e2a49a;
    border-style: dashed;
    background: #fbf0ed;
}
.bl-seg--cancelled .bl-seg-pt .iata[b-od723omjrm],
.bl-seg--cancelled .bl-seg-pt .time[b-od723omjrm] {
    text-decoration: line-through;
    color: var(--ink-3);
}
.bl-seg-cancel[b-od723omjrm] {
    flex-shrink: 0;
    font-size: .62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: #ab2c1c;
    background: #fbe3de;
    border: 1px solid #f0c2b8;
    border-radius: 999px;
    padding: 1px 8px;
}

/* Khối con (eSIM / visa / fast-track) */
.bl-sub[b-od723omjrm] {
    border: 1px solid var(--line-2);
    border-radius: 8px;
    padding: .85rem 1rem;
    margin-bottom: .7rem;
}
.bl-sub:last-child[b-od723omjrm] { margin-bottom: 0; }
.bl-sub-hd[b-od723omjrm] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    margin-bottom: .6rem;
}
.bl-sub-hd .name[b-od723omjrm] { font-size: .84rem; font-weight: 700; color: var(--ink); }
.bl-sub-sub[b-od723omjrm] { font-size: .7rem; color: var(--ink-3); margin-top: 2px; }
.bl-sub-hd .stt[b-od723omjrm] {
    flex: none;
    font-size: .62rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: .18rem .55rem;
}
.bl-img-qr[b-od723omjrm] { margin-top: .6rem; width: 108px; height: 108px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; background: #fff; }

.bl-pax[b-od723omjrm] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
    padding: .6rem 0;
    border-bottom: 1px dashed var(--line-2);
}
.bl-pax:last-child[b-od723omjrm] { border-bottom: none; padding-bottom: 0; }
.bl-pax:first-child[b-od723omjrm] { padding-top: 0; }
.bl-pax .name[b-od723omjrm] { font-size: .84rem; font-weight: 600; color: var(--ink); }
.bl-pax .meta[b-od723omjrm] { font-size: .72rem; color: var(--ink-3); }

/* Tóm tắt thanh toán */
.bl-sum[b-od723omjrm] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: .28rem 0; }
.bl-sum .lbl[b-od723omjrm] { font-size: .78rem; color: var(--ink-3); }
.bl-sum .val[b-od723omjrm] { font-size: .82rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bl-sum.is-discount .val[b-od723omjrm] { color: #2f6b28; }
.bl-sum-divide[b-od723omjrm] { margin-top: .5rem; padding-top: .55rem; border-top: 2px dashed var(--line-2); }
.bl-sum.is-total .lbl[b-od723omjrm] { font-size: .82rem; font-weight: 700; color: var(--ink); }
.bl-sum.is-total .val[b-od723omjrm] { font-size: 1.05rem; font-weight: 800; color: var(--accent); }

/* ═════════════════ ĐẦU MỤC SECTION ═════════════════ */
/* Căn TRÁI + số thứ tự mono trong ô mực — thứ tự các mục có nghĩa. */
.bl-head[b-od723omjrm] { margin-bottom: 2rem; max-width: 40rem; }
.bl-kicker[b-od723omjrm] {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 .6rem;
    font-size: .65rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent-deep);
}
.bl-kicker .leg[b-od723omjrm] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 20px;
    border-radius: 5px;
    background: var(--ink); color: var(--paper);
    font-size: .62rem; font-weight: 600; letter-spacing: .06em;
}
.bl-head-sub[b-od723omjrm] { margin: .55rem 0 0; font-size: .875rem; color: var(--ink-3); line-height: 1.65; }

/* ═════════════════ 4 BƯỚC — SỔ CÁI ═════════════════ */
/* Mỗi bước là một CỘT SỔ: vạch mực đậm trên đầu, số mono lớn + icon,
   không thẻ nổi/không bóng — khác hẳn nhịp thẻ của FAQ và kết quả. */
.bl-steps[b-od723omjrm] {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1.4rem;
}
@media (min-width: 768px) { .bl-steps[b-od723omjrm] { grid-template-columns: repeat(4, 1fr); } }
.bl-step[b-od723omjrm] { border-top: 2px solid var(--ink); padding-top: .9rem; }
.bl-step-top[b-od723omjrm] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: .7rem;
}
.bl-step-n[b-od723omjrm] {
    font-size: 1.5rem; font-weight: 600;
    color: var(--accent);
    line-height: 1;
    letter-spacing: .02em;
}
.bl-step-top svg[b-od723omjrm] { width: 22px; height: 22px; color: var(--ink-3); transition: color .25s; }
.bl-step:hover .bl-step-top svg[b-od723omjrm] { color: var(--accent); }
.bl-step-title[b-od723omjrm] { font-size: .86rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.bl-step-desc[b-od723omjrm] { font-size: .76rem; color: var(--ink-3); line-height: 1.6; }

/* ═════════════════ FAQ — danh sách kẻ dòng, đầu mục dính bên trái ═════════════════ */
.bl-faq-wrap[b-od723omjrm] { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 1024px) {
    .bl-faq-wrap[b-od723omjrm] { grid-template-columns: 20rem 1fr; gap: 3rem; align-items: start; }
    .bl-head--side[b-od723omjrm] { position: sticky; top: 96px; margin-bottom: 0; }
}
/* Không thẻ bo tròn: danh sách kẻ dòng trên nền giấy, mở ra tô nền chứng từ */
.bl-faq[b-od723omjrm] { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.bl-faq-item[b-od723omjrm] {
    border-bottom: 1px solid var(--line-2);
    transition: background .25s;
}
.bl-faq-item.is-open[b-od723omjrm] { background: var(--card); }
.bl-faq-q[b-od723omjrm] {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: .95rem .6rem;
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.bl-faq-q:focus-visible[b-od723omjrm] { outline: 2px solid var(--accent); outline-offset: -2px; }
.bl-faq-left[b-od723omjrm] { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.bl-faq-num[b-od723omjrm] {
    flex: none;
    font-size: .78rem; font-weight: 600;
    color: var(--ink-3);
    transition: color .25s;
}
.bl-faq-item.is-open .bl-faq-num[b-od723omjrm] { color: var(--accent); }
.bl-faq-text[b-od723omjrm] { font-size: .86rem; font-weight: 600; color: var(--ink); }
/* icon dấu cộng — xoay 45° thành dấu × khi mở */
.bl-faq-chev[b-od723omjrm] { flex: none; width: 16px; height: 16px; color: var(--ink-3); transition: transform .25s, color .25s; }
.bl-faq-item.is-open .bl-faq-chev[b-od723omjrm] { transform: rotate(45deg); color: var(--accent); }
.bl-faq-a[b-od723omjrm] {
    padding: 0 .6rem 1rem 2.7rem;
    font-size: .8rem; color: var(--ink-2); line-height: 1.7;
}

/* ═════════════════ REVEAL ═════════════════ */
/* KHÔNG reveal .bl-faq-item — class dynamic của nó bị Blazor ghi đè khi toggle,
   xoá mất .is-revealed → item biến mất (bug đã gặp thực tế). Reveal cả cụm
   .bl-faq thay vì từng item. */
.bl-reveal-ready .bl-head[b-od723omjrm],
.bl-reveal-ready .bl-step[b-od723omjrm],
.bl-reveal-ready .bl-faq[b-od723omjrm] {
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.bl-reveal-ready .bl-head:not(.is-revealed)[b-od723omjrm],
.bl-reveal-ready .bl-step:not(.is-revealed)[b-od723omjrm],
.bl-reveal-ready .bl-faq:not(.is-revealed)[b-od723omjrm] {
    opacity: 0;
    transform: translateY(22px);
}
@media (prefers-reduced-motion: reduce) {
    .bl-reveal-ready .bl-head[b-od723omjrm],
    .bl-reveal-ready .bl-step[b-od723omjrm],
    .bl-reveal-ready .bl-faq[b-od723omjrm] {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ═════════════════ MOBILE ═════════════════ */
@media (max-width: 640px) {
    .bl-container[b-od723omjrm] { padding: 0 1rem; }
    .bl-section[b-od723omjrm] { padding-top: 2.5rem; }
    .bl-section--last[b-od723omjrm] { padding-bottom: 2.8rem; }
    .bl-hero[b-od723omjrm] { padding: 92px 0 2.4rem; }
    .bl-tkt-stamp[b-od723omjrm] { width: 66px; height: 66px; top: -20px; right: -8px; }
    .bl-tkt-hd[b-od723omjrm] { padding: .6rem 1.15rem; padding-right: 3.6rem; }
    .bl-tkt-body[b-od723omjrm] { padding: 1.1rem 1.15rem .3rem; }
    .bl-tkt-stub[b-od723omjrm] { padding: 1rem 1.15rem 1.15rem; }
    .bl-result[b-od723omjrm] { scroll-margin-top: 76px; }
    .bl-result-code[b-od723omjrm] { font-size: 1.1rem; }
    .bl-result-ico[b-od723omjrm] { width: 36px; height: 36px; border-radius: 8px; }
    .bl-result-ico svg[b-od723omjrm] { width: 18px; height: 18px; }
    .bl-seg-pt .iata[b-od723omjrm] { font-size: 1rem; }
    .bl-faq-a[b-od723omjrm] { padding-left: .6rem; }
}

/* ═════════════════ BẢN IN ═════════════════ */
/* Ẩn chrome của layout nằm ở <style> trong .razor (ngoài scope này). Ở đây chỉ
   chỉnh riêng khối kết quả: bỏ bóng/nền giấy, một cột, không cắt ngang thẻ. */
@media print {
    .bl-root[b-od723omjrm] { background: #fff; color: #000; }
    .bl-section[b-od723omjrm] { padding: 0; }
    .bl-container[b-od723omjrm] { max-width: none; padding: 0; }
    .bl-result[b-od723omjrm] { scroll-margin-top: 0; }
    .bl-grid-2-1[b-od723omjrm] { grid-template-columns: 1fr; }
    .bl-stack[b-od723omjrm] { gap: 6mm; }
    .bl-card[b-od723omjrm], .bl-result-card[b-od723omjrm] {
        background: #fff !important;
        border: 1px solid #94a3b8 !important;
        border-radius: 4px;
        box-shadow: none !important;
        break-inside: avoid;
    }
    .bl-card-hd[b-od723omjrm] { border-bottom: 1px solid #cbd5e1; }
    .bl-result-ico[b-od723omjrm] { background: #221f1a !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .bl-seg[b-od723omjrm], .bl-sub[b-od723omjrm] { background: none !important; break-inside: avoid; }
    .bl-img-qr[b-od723omjrm] { width: 90px; height: 90px; }
}
/* /src/Features/Account/Pages/Account/LoyaltyCards.razor.rz.scp.css */
/* LoyaltyCards — Manager Dashboard v4 theme */
.deflc-root[b-66uuqhiale] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 56px);
    padding: 20px 28px;
}

.deflc-hero[b-66uuqhiale] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    margin-bottom: 20px;
}

.deflc-hero h1[b-66uuqhiale] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.deflc-hero h1 em[b-66uuqhiale] {
    font-style: normal;
    color: var(--d-ink-3);
    font-weight: 500;
}

.deflc-hero-meta[b-66uuqhiale] {
    margin-top: 6px;
    font-size: 14px;
    color: var(--d-ink-3);
}

.deflc-hero-actions[b-66uuqhiale] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.deflc-btn[b-66uuqhiale] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

.deflc-btn:hover[b-66uuqhiale] {
    background: var(--d-surface-2);
    color: var(--d-ink);
    text-decoration: none;
}

.deflc-btn-accent[b-66uuqhiale] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18), 0 4px 12px -2px rgba(234, 88, 12, .22);
}

.deflc-btn-accent:hover[b-66uuqhiale] {
    background: var(--d-accent-grad-hover);
    color: #fff;
}

.deflc-btn:disabled[b-66uuqhiale] {
    opacity: .5;
    cursor: not-allowed;
}

.deflc-msg[b-66uuqhiale] {
    border-radius: var(--d-r);
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid;
    margin-bottom: 16px;
}

.deflc-msg.good[b-66uuqhiale] {
    background: var(--d-good-soft);
    border-color: #bbf7d0;
    color: #166534;
}

.deflc-msg.bad[b-66uuqhiale] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.deflc-loading[b-66uuqhiale] {
    text-align: center;
    padding: 40px 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

.deflc-empty[b-66uuqhiale] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 16px;
    text-align: center;
    color: var(--d-ink-3);
}

.deflc-empty-ico[b-66uuqhiale] {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    display: grid;
    place-items: center;
    color: var(--d-accent);
}

.deflc-empty b[b-66uuqhiale] {
    display: block;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
}

.deflc-empty small[b-66uuqhiale] {
    display: block;
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin-top: 4px;
}

.deflc-grid[b-66uuqhiale] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .deflc-grid[b-66uuqhiale] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .deflc-grid[b-66uuqhiale] {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.deflc-card[b-66uuqhiale] {
    position: relative;
    border-radius: 14px;
    padding: 20px;
    color: #fff;
    background: var(--d-accent-grad);
    box-shadow: 0 4px 16px -2px rgba(234, 88, 12, .25);
    overflow: hidden;
    isolation: isolate;
}

.deflc-card[b-66uuqhiale]::before,
.deflc-card[b-66uuqhiale]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.deflc-card[b-66uuqhiale]::before {
    right: -32px;
    top: -32px;
    width: 128px;
    height: 128px;
    background: rgba(255, 255, 255, .10);
}

.deflc-card[b-66uuqhiale]::after {
    right: -56px;
    bottom: -56px;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, .06);
}

.deflc-card > *[b-66uuqhiale] {
    position: relative;
    z-index: 1;
}

.deflc-card-top[b-66uuqhiale] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.deflc-card-prog-type[b-66uuqhiale] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, .82);
}

.deflc-card-prog-name[b-66uuqhiale] {
    font-size: 17px;
    font-weight: 700;
    margin-top: 2px;
    line-height: 1.2;
}

.deflc-card-badge[b-66uuqhiale] {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 600;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

.deflc-card-badge.inactive[b-66uuqhiale] {
    background: rgba(0, 0, 0, .25);
    border-color: rgba(0, 0, 0, .15);
}

.deflc-card-num[b-66uuqhiale] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 17px;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    font-feature-settings: 'tnum';
}

.deflc-card-foot[b-66uuqhiale] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 11px;
    gap: 12px;
}

.deflc-card-foot .lbl[b-66uuqhiale] {
    color: rgba(255, 255, 255, .72);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.deflc-card-foot .val[b-66uuqhiale] {
    font-size: 14px;
    font-weight: 600;
    margin-top: 1px;
}

.deflc-card-actions[b-66uuqhiale] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    flex-wrap: wrap;
}

.deflc-card-btn[b-66uuqhiale] {
    font-size: 11px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 0;
    border-radius: 7px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
}

.deflc-card-btn:hover[b-66uuqhiale] {
    background: rgba(255, 255, 255, .28);
}

.deflc-card-icon-btn[b-66uuqhiale] {
    padding: 6px;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
    display: inline-flex;
}

.deflc-card-icon-btn:hover[b-66uuqhiale] {
    background: rgba(255, 255, 255, .28);
}

.deflc-card-icon-btn.danger:hover[b-66uuqhiale] {
    background: rgba(220, 38, 38, .8);
}

.deflc-card-actions .spacer[b-66uuqhiale] {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

/* ── Modal ── */
.deflc-modal-bd[b-66uuqhiale] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.deflc-modal[b-66uuqhiale] {
    background: var(--d-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--d-line);
}

.deflc-modal-hd[b-66uuqhiale] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.deflc-modal-hd h3[b-66uuqhiale] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.deflc-modal-close[b-66uuqhiale] {
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
}

.deflc-modal-close:hover[b-66uuqhiale] {
    color: var(--d-ink);
    background: var(--d-surface-2);
}

.deflc-modal-bd-body[b-66uuqhiale] {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.deflc-modal-ft[b-66uuqhiale] {
    padding: 14px 18px;
    border-top: 1px solid var(--d-line);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.deflc-form-grid-2[b-66uuqhiale] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.deflc-field label[b-66uuqhiale] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.deflc-field label .req[b-66uuqhiale] {
    color: var(--d-danger);
    margin-left: 2px;
}

.deflc-input[b-66uuqhiale],
.deflc-select[b-66uuqhiale] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

.deflc-input:focus[b-66uuqhiale],
.deflc-select:focus[b-66uuqhiale] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}

.deflc-input.mono[b-66uuqhiale] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.05em;
}

.deflc-input.upper[b-66uuqhiale] {
    text-transform: uppercase;
}

.deflc-checkbox-row[b-66uuqhiale] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--d-ink-2);
    cursor: pointer;
}

.deflc-checkbox-row input[type="checkbox"][b-66uuqhiale] {
    width: 16px;
    height: 16px;
    accent-color: var(--d-accent);
    cursor: pointer;
}

.deflc-form-error[b-66uuqhiale] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--d-r);
    padding: 10px 12px;
    font-size: 14px;
}
/* /src/Features/Account/Pages/Account/MyBookingDetail.razor.rz.scp.css */
/* MyBookingDetail — Manager Dashboard v4 theme */
.defmbd-root[b-h9i609f8m7] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 56px);
    padding: 20px 28px 24px;
}

.defmbd-hero[b-h9i609f8m7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    flex-wrap: wrap;
}

.defmbd-back[b-h9i609f8m7] {
    width: 38px;
    height: 38px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s;
}

.defmbd-back:hover[b-h9i609f8m7] {
    background: var(--d-surface-2);
    color: var(--d-ink);
}

.defmbd-hero-text h1[b-h9i609f8m7] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
}

.defmbd-hero-text h1 em[b-h9i609f8m7] {
    font-style: normal;
    color: var(--d-ink-3);
    font-weight: 500;
}

.defmbd-hero-text .sub[b-h9i609f8m7] {
    margin-top: 4px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.defmbd-loading[b-h9i609f8m7] {
    text-align: center;
    padding: 60px 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

.defmbd-notfound[b-h9i609f8m7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 20px;
    text-align: center;
    max-width: 420px;
    margin: 40px auto;
}

.defmbd-notfound-ico[b-h9i609f8m7] {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    display: grid;
    place-items: center;
    color: var(--d-danger);
}

.defmbd-notfound b[b-h9i609f8m7] {
    display: block;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.defmbd-notfound small[b-h9i609f8m7] {
    display: block;
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin-bottom: 16px;
}

.defmbd-grid[b-h9i609f8m7] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .defmbd-grid[b-h9i609f8m7] {
        grid-template-columns: 8fr 4fr;
    }
}

.defmbd-main[b-h9i609f8m7],
.defmbd-side[b-h9i609f8m7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.defmbd-card[b-h9i609f8m7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.defmbd-card-hd[b-h9i609f8m7] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line);
}

.defmbd-card-hd h3[b-h9i609f8m7] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.defmbd-card-bd[b-h9i609f8m7] {
    padding: 16px;
}

/* Header card content */
.defmbd-headcard-top[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.defmbd-headcard-left[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.defmbd-bcode[b-h9i609f8m7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.defmbd-svc-pill[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
}

.defmbd-headcard-meta[b-h9i609f8m7] {
    font-size: 12px;
    color: var(--d-ink-3);
}

.defmbd-actions[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--d-line-2);
}

.defmbd-btn[b-h9i609f8m7] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

.defmbd-btn:hover[b-h9i609f8m7] {
    background: var(--d-surface-2);
    color: var(--d-ink);
    text-decoration: none;
}

.defmbd-btn-accent[b-h9i609f8m7] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18);
}

.defmbd-btn-accent:hover[b-h9i609f8m7] {
    background: var(--d-accent-grad-hover);
    color: #fff;
}

.defmbd-btn-good[b-h9i609f8m7] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}

.defmbd-btn-good:hover[b-h9i609f8m7] {
    background: #15803d;
    color: #fff;
}

.defmbd-btn-danger[b-h9i609f8m7] {
    color: var(--d-danger);
    border-color: #fecaca;
}

.defmbd-btn-danger:hover[b-h9i609f8m7] {
    background: #fef2f2;
    color: var(--d-danger);
}

.defmbd-btn:disabled[b-h9i609f8m7] {
    opacity: .5;
    cursor: not-allowed;
}

.defmbd-pill-warn[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    background: var(--d-warn-soft);
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
}

/* Service detail blocks */
.defmbd-info-grid[b-h9i609f8m7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
}

@media (min-width: 640px) {
    .defmbd-info-grid.cols-3[b-h9i609f8m7] {
        grid-template-columns: repeat(3, 1fr);
    }

    .defmbd-info-grid.cols-4[b-h9i609f8m7] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.defmbd-info-cell .lbl[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.defmbd-info-cell .val[b-h9i609f8m7] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: 4px;
}

.defmbd-info-cell .val.mono[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: 0.04em;
}

.defmbd-info-cell .val.accent[b-h9i609f8m7] {
    color: var(--d-accent);
}

.defmbd-info-cell .val.muted[b-h9i609f8m7] {
    color: var(--d-ink-3);
    font-weight: 500;
}

.defmbd-tile-block[b-h9i609f8m7] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.defmbd-tile-block.accent[b-h9i609f8m7] {
    background: var(--d-accent-grad-soft);
    border-color: #fed7aa;
}

.defmbd-tile-block.good[b-h9i609f8m7] {
    background: var(--d-good-soft);
    border-color: #bbf7d0;
}

.defmbd-tile-eyebrow[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-good);
    margin-bottom: 10px;
}

/* PNR bar */
.defmbd-pnr-bar[b-h9i609f8m7] {
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    border-radius: var(--d-r);
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.defmbd-pnr-bar .lbl[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-accent);
}

.defmbd-pnr-bar .val[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    color: var(--d-ink);
    font-size: 16px;
    letter-spacing: 0.08em;
}

.defmbd-pnr-bar .sep[b-h9i609f8m7] {
    width: 1px;
    height: 24px;
    background: #fed7aa;
}

.defmbd-pnr-bar .meta[b-h9i609f8m7] {
    font-size: 12px;
    color: var(--d-ink-2);
}

.defmbd-pnr-bar .ok[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--d-good);
    font-size: 11.5px;
    font-weight: 500;
}

/* Contact strip */
.defmbd-contact[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--d-ink-2);
    font-size: 14px;
    padding: 4px 2px 0;
}

.defmbd-contact span[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.defmbd-contact svg[b-h9i609f8m7] {
    color: var(--d-ink-4);
    flex-shrink: 0;
}

/* Segment card (flight) */
.defmbd-section-eyebrow[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0 10px;
}

.defmbd-seg[b-h9i609f8m7] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    margin-bottom: 12px;
}

.defmbd-seg-hd[b-h9i609f8m7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line-2);
}

.defmbd-seg-hd-left[b-h9i609f8m7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.defmbd-seg-no[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.defmbd-seg-flight[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: 0.04em;
}

.defmbd-seg-airline[b-h9i609f8m7] {
    font-size: 12px;
    color: var(--d-ink-3);
}

.defmbd-seg-pill[b-h9i609f8m7] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.defmbd-seg-pill.warn[b-h9i609f8m7] {
    background: var(--d-warn-soft);
    border-color: #fde68a;
    color: #92400e;
}

.defmbd-seg-bd[b-h9i609f8m7] {
    padding: 14px 16px;
}

.defmbd-seg-route[b-h9i609f8m7] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.defmbd-seg-time[b-h9i609f8m7] {
    text-align: center;
    min-width: 80px;
}

.defmbd-seg-time .hm[b-h9i609f8m7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.defmbd-seg-time .ap[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-accent);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.defmbd-seg-time .city[b-h9i609f8m7] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-top: 2px;
}

.defmbd-seg-time .date[b-h9i609f8m7] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.defmbd-seg-mid[b-h9i609f8m7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.defmbd-seg-mid .dur[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d-ink-3);
}

.defmbd-seg-mid .line[b-h9i609f8m7] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--d-ink-4);
}

.defmbd-seg-mid .line .dot[b-h9i609f8m7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid var(--d-ink-4);
}

.defmbd-seg-mid .line .dash[b-h9i609f8m7] {
    flex: 1;
    border-top: 1px dashed var(--d-line);
}

.defmbd-seg-mid .stops[b-h9i609f8m7] {
    font-size: 10.5px;
    color: var(--d-ink-4);
}

.defmbd-seg-bag[b-h9i609f8m7] {
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.defmbd-seg-bag strong[b-h9i609f8m7] {
    color: var(--d-ink);
    font-weight: 600;
}

/* Tickets */
.defmbd-tickets[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.defmbd-ticket-pill[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--d-good-soft);
    border: 1px solid #bbf7d0;
    color: #166534;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 500;
}

/* Tour pax box */
.defmbd-pax-grid[b-h9i609f8m7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.defmbd-pax-cell[b-h9i609f8m7] {
    text-align: center;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 10px;
}

.defmbd-pax-cell .lbl[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.defmbd-pax-cell .val[b-h9i609f8m7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: 4px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.defmbd-pax-cell .price[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 4px;
}

/* eSIM cards */
.defmbd-esim[b-h9i609f8m7] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.defmbd-esim-top[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.defmbd-esim-name[b-h9i609f8m7] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
}

.defmbd-esim-meta[b-h9i609f8m7] {
    display: flex;
    gap: 12px;
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.defmbd-esim-meta .mono[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.defmbd-pill[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.defmbd-pill.pending[b-h9i609f8m7] {
    background: var(--d-warn-soft);
    color: #92400e;
}

.defmbd-pill.paid[b-h9i609f8m7] {
    background: #dbeafe;
    color: #1e40af;
}

.defmbd-pill.active[b-h9i609f8m7] {
    background: var(--d-good-soft);
    color: #166534;
}

.defmbd-pill.expired[b-h9i609f8m7] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}

.defmbd-pill.cancelled[b-h9i609f8m7],
.defmbd-pill.failed[b-h9i609f8m7] {
    background: #fef2f2;
    color: #991b1b;
}

.defmbd-esim-grid5[b-h9i609f8m7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 640px) {
    .defmbd-esim-grid5[b-h9i609f8m7] {
        grid-template-columns: repeat(5, 1fr);
    }
}

.defmbd-esim-stat[b-h9i609f8m7] {
    text-align: center;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 8px 6px;
}

.defmbd-esim-stat.accent[b-h9i609f8m7] {
    background: var(--d-accent-grad-soft);
    border-color: #fed7aa;
}

.defmbd-esim-stat .lbl[b-h9i609f8m7] {
    font-size: 10px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.defmbd-esim-stat .val[b-h9i609f8m7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

.defmbd-esim-stat .val.accent[b-h9i609f8m7] {
    color: var(--d-accent);
}

.defmbd-esim-mono[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    padding: 6px 8px;
    word-break: break-all;
}

.defmbd-esim-foot[b-h9i609f8m7] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.defmbd-esim-foot a[b-h9i609f8m7] {
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
}

.defmbd-esim-foot a:hover[b-h9i609f8m7] {
    text-decoration: underline;
}

/* Notes block */
.defmbd-notes-h[b-h9i609f8m7] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.defmbd-notes-list[b-h9i609f8m7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.defmbd-notes-list .row[b-h9i609f8m7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: var(--d-ink-2);
}

.defmbd-notes-list .row .dot[b-h9i609f8m7] {
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--d-accent);
    flex-shrink: 0;
}

.defmbd-cancel-reason[b-h9i609f8m7] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--d-r);
    padding: 10px 12px;
    font-size: 14px;
    margin-top: 12px;
}

.defmbd-cancel-reason b[b-h9i609f8m7] {
    color: #7f1d1d;
}

/* Tables */
.defmbd-tbl-wrap[b-h9i609f8m7] {
    overflow-x: auto;
}

.defmbd-tbl[b-h9i609f8m7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.defmbd-tbl thead th[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
}

.defmbd-tbl tbody td[b-h9i609f8m7] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}

.defmbd-tbl tbody tr:last-child td[b-h9i609f8m7] {
    border-bottom: 0;
}

.defmbd-tbl tbody tr:hover[b-h9i609f8m7] {
    background: var(--d-surface-2);
}

.defmbd-tbl td.mono[b-h9i609f8m7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink);
}

.defmbd-tbl td.strong[b-h9i609f8m7] {
    color: var(--d-ink);
    font-weight: 500;
}

.defmbd-tbl td.muted[b-h9i609f8m7] {
    color: var(--d-ink-4);
}

/* Side cards */
.defmbd-status-bd[b-h9i609f8m7] {
    text-align: center;
    padding: 16px;
}

.defmbd-status-eyebrow[b-h9i609f8m7] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.defmbd-fin-row[b-h9i609f8m7] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--d-ink-2);
    padding: 6px 0;
}

.defmbd-fin-row .v[b-h9i609f8m7] {
    color: var(--d-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.defmbd-fin-row .v.good[b-h9i609f8m7] {
    color: var(--d-good);
}

.defmbd-fin-total[b-h9i609f8m7] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--d-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.defmbd-fin-total .lbl[b-h9i609f8m7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.defmbd-fin-total .v[b-h9i609f8m7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-accent);
    font-variant-numeric: tabular-nums;
}

.defmbd-fin-pay[b-h9i609f8m7] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Support card */
.defmbd-support[b-h9i609f8m7] {
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.defmbd-support h3[b-h9i609f8m7] {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

.defmbd-support h3 svg[b-h9i609f8m7] {
    color: var(--d-accent);
}

.defmbd-support p[b-h9i609f8m7] {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--d-ink-2);
}

.defmbd-support a[b-h9i609f8m7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-accent);
    text-decoration: none;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.defmbd-support a:hover[b-h9i609f8m7] {
    color: #c2410c;
}

/* Cancel modal */
.defmbd-modal-bd[b-h9i609f8m7] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.defmbd-modal[b-h9i609f8m7] {
    background: var(--d-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    border: 1px solid var(--d-line);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.defmbd-modal h3[b-h9i609f8m7] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.015em;
}

.defmbd-modal p[b-h9i609f8m7] {
    margin: 0;
    font-size: 14px;
    color: var(--d-ink-3);
}

.defmbd-modal label[b-h9i609f8m7] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.defmbd-textarea[b-h9i609f8m7] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    resize: vertical;
    font-family: inherit;
}

.defmbd-textarea:focus[b-h9i609f8m7] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}

.defmbd-modal-ft[b-h9i609f8m7] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.defmbd-modal-ft .danger[b-h9i609f8m7] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}

.defmbd-modal-ft .danger:hover[b-h9i609f8m7] {
    background: #b91c1c;
    color: #fff;
}
/* /src/Features/Account/Pages/Account/MyBookings.razor.rz.scp.css */
/* MyBookings — Manager Dashboard v4 theme */
.defmb-root[b-b1e2zoedp3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
}

.defmb-hero[b-b1e2zoedp3] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 28px 14px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.defmb-hero h1[b-b1e2zoedp3] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.defmb-hero h1 em[b-b1e2zoedp3] {
    font-style: normal;
    color: var(--d-ink-3);
    font-weight: 500;
}

.defmb-hero-meta[b-b1e2zoedp3] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.defmb-btn[b-b1e2zoedp3] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

.defmb-btn:hover[b-b1e2zoedp3] {
    background: var(--d-surface-2);
    color: var(--d-ink);
    text-decoration: none;
}

.defmb-btn-accent[b-b1e2zoedp3] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18), 0 4px 12px -2px rgba(234, 88, 12, .22);
}

.defmb-btn-accent:hover[b-b1e2zoedp3] {
    background: var(--d-accent-grad-hover);
    color: #fff;
}

.defmb-body[b-b1e2zoedp3] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 28px 24px;
}

/* KPI strip */
.defmb-kpis[b-b1e2zoedp3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    margin-bottom: 16px;
}

@media (min-width: 1024px) {
    .defmb-kpis[b-b1e2zoedp3] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.defmb-kpi[b-b1e2zoedp3] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    border-bottom: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .defmb-kpi[b-b1e2zoedp3] {
        border-bottom: 0;
    }

    .defmb-kpi:last-child[b-b1e2zoedp3] {
        border-right: 0;
    }
}

.defmb-kpi-lbl[b-b1e2zoedp3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.defmb-kpi-dot[b-b1e2zoedp3] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

.defmb-kpi-dot.accent[b-b1e2zoedp3] {
    background: var(--d-accent-grad);
}

.defmb-kpi-dot.warn[b-b1e2zoedp3] {
    background: var(--d-warn);
}

.defmb-kpi-dot.good[b-b1e2zoedp3] {
    background: var(--d-good);
}

.defmb-kpi-val[b-b1e2zoedp3] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.defmb-kpi-val .unit[b-b1e2zoedp3] {
    font-size: 11px;
    color: var(--d-ink-3);
    font-weight: 500;
    margin-left: 4px;
    letter-spacing: 0;
}

/* Toolbar (search + tabs) */
.defmb-toolbar[b-b1e2zoedp3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .defmb-toolbar[b-b1e2zoedp3] {
        flex-direction: row;
        align-items: center;
    }
}

.defmb-search[b-b1e2zoedp3] {
    position: relative;
    flex: 1;
}

.defmb-search svg.ico[b-b1e2zoedp3] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.defmb-search input[b-b1e2zoedp3] {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 36px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

.defmb-search input:focus[b-b1e2zoedp3] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}

.defmb-search input[b-b1e2zoedp3]::placeholder {
    color: var(--d-ink-4);
}

.defmb-search-clear[b-b1e2zoedp3] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--d-ink-4);
    padding: 4px;
    display: inline-flex;
}

.defmb-search-clear:hover[b-b1e2zoedp3] {
    color: var(--d-ink-2);
}

.defmb-tabs[b-b1e2zoedp3] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-shrink: 0;
}

.defmb-tab[b-b1e2zoedp3] {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s, border-color .12s;
}

.defmb-tab:hover[b-b1e2zoedp3] {
    background: var(--d-surface-2);
    color: var(--d-ink);
}

.defmb-tab.active[b-b1e2zoedp3] {
    background: var(--d-accent-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18);
}

.defmb-tab-count[b-b1e2zoedp3] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}

.defmb-tab.active .defmb-tab-count[b-b1e2zoedp3] {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* Booking card */
.defmb-list[b-b1e2zoedp3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.defmb-card[b-b1e2zoedp3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    overflow: hidden;
}

.defmb-card:hover[b-b1e2zoedp3] {
    background: var(--d-surface-2);
    border-color: var(--d-ink-4);
}

.defmb-card-main[b-b1e2zoedp3] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 640px) {
    .defmb-card-main[b-b1e2zoedp3] {
        flex-direction: row;
        align-items: center;
    }
}

.defmb-svc-ico[b-b1e2zoedp3] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.defmb-card-info[b-b1e2zoedp3] {
    flex: 1;
    min-width: 0;
}

.defmb-card-top[b-b1e2zoedp3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.defmb-code[b-b1e2zoedp3] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.defmb-meta[b-b1e2zoedp3] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.defmb-meta span[b-b1e2zoedp3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.defmb-meta .pill-warn[b-b1e2zoedp3] {
    color: var(--d-warn);
    font-weight: 600;
}

.defmb-card-amt[b-b1e2zoedp3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .defmb-card-amt[b-b1e2zoedp3] {
        text-align: right;
    }
}

.defmb-amt-num[b-b1e2zoedp3] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

.defmb-amt-cur[b-b1e2zoedp3] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-top: 1px;
}

.defmb-chev[b-b1e2zoedp3] {
    color: var(--d-ink-4);
    transition: color .12s, transform .12s;
}

.defmb-card:hover .defmb-chev[b-b1e2zoedp3] {
    color: var(--d-accent);
    transform: translateX(2px);
}

.defmb-card-pay[b-b1e2zoedp3] {
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.defmb-card-pay span[b-b1e2zoedp3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.defmb-card-pay .ok[b-b1e2zoedp3] {
    color: var(--d-good);
    font-weight: 500;
}

/* Empty / no-match */
.defmb-empty[b-b1e2zoedp3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 20px;
    text-align: center;
    color: var(--d-ink-3);
}

.defmb-empty-ico[b-b1e2zoedp3] {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    display: grid;
    place-items: center;
    color: var(--d-accent);
}

.defmb-empty b[b-b1e2zoedp3] {
    display: block;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.defmb-empty small[b-b1e2zoedp3] {
    display: block;
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin-bottom: 14px;
}

.defmb-clear-link[b-b1e2zoedp3] {
    color: var(--d-accent);
    font-size: 12.5px;
    font-weight: 500;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.defmb-clear-link:hover[b-b1e2zoedp3] {
    text-decoration: underline;
}

/* Pagination wrap */
.defmb-pag[b-b1e2zoedp3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 6px 12px;
    margin-top: 14px;
}
/* /src/Features/Account/Pages/Account/Profile.razor.rz.scp.css */
/* Profile — Manager Dashboard v4 theme */
.defprof-root[b-4k0v7wbutm] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 56px);
    padding: 20px 28px;
}

.defprof-hero[b-4k0v7wbutm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

.defprof-hero h1[b-4k0v7wbutm] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
}

.defprof-hero h1 em[b-4k0v7wbutm] {
    font-style: normal;
    color: var(--d-ink-3);
    font-weight: 500;
    margin: 0 6px;
}

.defprof-hero-meta[b-4k0v7wbutm] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.defprof-stack[b-4k0v7wbutm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
}

.defprof-card[b-4k0v7wbutm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.defprof-card-hd[b-4k0v7wbutm] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line);
}

.defprof-card-hd h3[b-4k0v7wbutm] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.defprof-card-bd[b-4k0v7wbutm] {
    padding: 16px;
}

.defprof-loyalty-link[b-4k0v7wbutm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    text-decoration: none;
    color: var(--d-ink);
    transition: background .12s, border-color .12s;
}

.defprof-loyalty-link:hover[b-4k0v7wbutm] {
    background: var(--d-surface-2);
    border-color: var(--d-ink-4);
    color: var(--d-ink);
    text-decoration: none;
}

.defprof-loyalty-ico[b-4k0v7wbutm] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18);
    flex-shrink: 0;
}

.defprof-loyalty-info[b-4k0v7wbutm] {
    flex: 1;
    min-width: 0;
}

.defprof-loyalty-info .t[b-4k0v7wbutm] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.defprof-loyalty-info .s[b-4k0v7wbutm] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.defprof-loyalty-link svg.chev[b-4k0v7wbutm] {
    color: var(--d-ink-4);
    transition: color .12s, transform .12s;
}

.defprof-loyalty-link:hover svg.chev[b-4k0v7wbutm] {
    color: var(--d-accent);
    transform: translateX(2px);
}

.defprof-msg[b-4k0v7wbutm] {
    border-radius: var(--d-r);
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid;
}

.defprof-msg.good[b-4k0v7wbutm] {
    background: var(--d-good-soft);
    border-color: #bbf7d0;
    color: #166534;
}

.defprof-msg.bad[b-4k0v7wbutm] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.defprof-grid-2[b-4k0v7wbutm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .defprof-grid-2[b-4k0v7wbutm] {
        grid-template-columns: 1fr 1fr;
    }
}

.defprof-field label[b-4k0v7wbutm] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.defprof-input[b-4k0v7wbutm] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
    outline: none;
}

.defprof-input:focus[b-4k0v7wbutm] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}

.defprof-input:disabled[b-4k0v7wbutm] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    cursor: not-allowed;
}

.defprof-actions[b-4k0v7wbutm] {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--d-line);
    flex-wrap: wrap;
}

.defprof-btn[b-4k0v7wbutm] {
    height: 38px;
    padding: 0 16px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

.defprof-btn:hover[b-4k0v7wbutm] {
    background: var(--d-surface-2);
    text-decoration: none;
    color: var(--d-ink);
}

.defprof-btn-accent[b-4k0v7wbutm] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18), 0 4px 12px -2px rgba(234, 88, 12, .22);
}

.defprof-btn-accent:hover[b-4k0v7wbutm] {
    background: var(--d-accent-grad-hover);
    color: #fff;
}

.defprof-btn:disabled[b-4k0v7wbutm] {
    opacity: .5;
    cursor: not-allowed;
}

.defprof-quick[b-4k0v7wbutm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .defprof-quick[b-4k0v7wbutm] {
        grid-template-columns: 1fr 1fr;
    }
}

.defprof-quick-card[b-4k0v7wbutm] {
    display: block;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--d-ink);
    transition: background .12s, border-color .12s;
}

.defprof-quick-card:hover[b-4k0v7wbutm] {
    background: var(--d-surface-2);
    border-color: var(--d-ink-4);
    text-decoration: none;
    color: var(--d-ink);
}

.defprof-quick-card .t[b-4k0v7wbutm] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    transition: color .12s;
}

.defprof-quick-card:hover .t[b-4k0v7wbutm] {
    color: var(--d-accent);
}

.defprof-quick-card .s[b-4k0v7wbutm] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 4px;
}

/* ── Thiết bị đang đăng nhập ─────────────────────────────────────────────
   Danh sách thường chỉ 1 dòng (chính sách 1 thiết bị/lúc), nên dựng dạng
   list-row đơn giản chứ không cần bảng. */
.defprof-sessions-hint[b-4k0v7wbutm] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 0 0 12px;
    line-height: 1.5;
}

.defprof-sessions-empty[b-4k0v7wbutm] {
    font-size: 13px;
    color: var(--d-ink-3);
    padding: 14px 0;
}

.defprof-sessions[b-4k0v7wbutm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.defprof-session[b-4k0v7wbutm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: 10px;
    background: var(--d-surface);
}

.defprof-session.is-current[b-4k0v7wbutm] {
    border-color: var(--d-accent);
    background: var(--d-surface-2);
}

.defprof-session-main[b-4k0v7wbutm] {
    flex: 1;
    min-width: 0;
}

.defprof-session .t[b-4k0v7wbutm] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
}

.defprof-session .s[b-4k0v7wbutm] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 4px;
    word-break: break-word;
}

.defprof-session-tag[b-4k0v7wbutm] {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--d-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
/* /src/Features/Account/Pages/Account/VisaApplicationView.razor.rz.scp.css */
/* Visa Application View — Manager Dashboard v4 theme */
.vappview-root[b-12cyrbpa81] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
}

    .vappview-root h1[b-12cyrbpa81], .vappview-root h2[b-12cyrbpa81], .vappview-root h3[b-12cyrbpa81] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        letter-spacing: -0.025em;
        color: var(--d-ink);
    }

.vappview-card[b-12cyrbpa81] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.vappview-card-hd[b-12cyrbpa81] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line);
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vappview-code[b-12cyrbpa81] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
}

.vappview-pill[b-12cyrbpa81] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

    .vappview-pill.good[b-12cyrbpa81] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 20%, transparent);
    }

    .vappview-pill.warn[b-12cyrbpa81] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: color-mix(in srgb, var(--d-warn) 20%, transparent);
    }

    .vappview-pill.danger[b-12cyrbpa81] {
        background: color-mix(in srgb, var(--d-danger) 12%, white);
        color: var(--d-danger);
        border-color: color-mix(in srgb, var(--d-danger) 25%, transparent);
    }

    .vappview-pill.info[b-12cyrbpa81] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 20%, transparent);
    }

    .vappview-pill.muted[b-12cyrbpa81] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

.vappview-cta[b-12cyrbpa81] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
    text-decoration: none;
    cursor: pointer;
}

    .vappview-cta:hover[b-12cyrbpa81] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        text-decoration: none;
    }

.vappview-back[b-12cyrbpa81] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    border: 1px solid var(--d-line);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

    .vappview-back:hover[b-12cyrbpa81] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

.vappview-danger[b-12cyrbpa81] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

    .vappview-danger:hover[b-12cyrbpa81] {
        background: color-mix(in srgb, var(--d-danger) 8%, white);
    }

.vappview-banner[b-12cyrbpa81] {
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    padding: 12px 14px;
    color: var(--d-ink-2);
    font-size: 14px;
}

    .vappview-banner.warn[b-12cyrbpa81] {
        background: var(--d-warn-soft);
        border-color: color-mix(in srgb, var(--d-warn) 25%, transparent);
        color: color-mix(in srgb, var(--d-warn) 80%, black);
    }

    .vappview-banner.good[b-12cyrbpa81] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 25%, transparent);
        color: color-mix(in srgb, var(--d-good) 80%, black);
    }

    .vappview-banner.danger[b-12cyrbpa81] {
        background: color-mix(in srgb, var(--d-danger) 8%, white);
        border-color: color-mix(in srgb, var(--d-danger) 25%, transparent);
        color: color-mix(in srgb, var(--d-danger) 80%, black);
    }

    .vappview-banner.info[b-12cyrbpa81] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 25%, transparent);
        color: color-mix(in srgb, var(--d-accent) 80%, black);
    }

.vappview-num[b-12cyrbpa81] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.vappview-eyebrow[b-12cyrbpa81] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* /src/Features/Account/Pages/Account/VisaMyApplications.razor.rz.scp.css */
/* My Visa Applications — Manager Dashboard v4 theme */
.vmy-root[b-pmpx1xqh77] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
}

    .vmy-root h1[b-pmpx1xqh77], .vmy-root h2[b-pmpx1xqh77], .vmy-root h3[b-pmpx1xqh77] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        letter-spacing: -0.025em;
        color: var(--d-ink);
    }

.vmy-card[b-pmpx1xqh77] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
}

    .vmy-card:hover[b-pmpx1xqh77] {
        border-color: var(--d-ink-4);
        box-shadow: 0 6px 18px -10px rgba(28,25,23,0.10);
    }

.vmy-tab[b-pmpx1xqh77] {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s, border-color .12s;
}

    .vmy-tab:hover[b-pmpx1xqh77] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .vmy-tab.active[b-pmpx1xqh77] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(234,88,12,0.20);
    }

.vmy-tab-count[b-pmpx1xqh77] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    opacity: .8;
}

.vmy-cta[b-pmpx1xqh77] {
    height: 38px;
    padding: 0 16px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
    text-decoration: none;
}

    .vmy-cta:hover[b-pmpx1xqh77] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        text-decoration: none;
    }

.vmy-pill[b-pmpx1xqh77] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

    .vmy-pill.good[b-pmpx1xqh77] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 20%, transparent);
    }

    .vmy-pill.warn[b-pmpx1xqh77] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: color-mix(in srgb, var(--d-warn) 20%, transparent);
    }

    .vmy-pill.info[b-pmpx1xqh77] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 20%, transparent);
    }

    .vmy-pill.danger[b-pmpx1xqh77] {
        background: color-mix(in srgb, var(--d-danger) 12%, white);
        color: var(--d-danger);
        border-color: color-mix(in srgb, var(--d-danger) 25%, transparent);
    }

    .vmy-pill.muted[b-pmpx1xqh77] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

.vmy-code[b-pmpx1xqh77] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.vmy-num[b-pmpx1xqh77] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    color: var(--d-ink);
}

.vmy-empty[b-pmpx1xqh77] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 48px 24px;
    text-align: center;
    color: var(--d-ink-3);
}

    .vmy-empty .ic[b-pmpx1xqh77] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--d-surface-2);
        color: var(--d-ink-4);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        border: 1px solid var(--d-line);
    }
/* /src/Features/Account/Pages/Ca/Account.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Account (CA) — chuẩn nm-list, ưu tiên primitive Nm*:
   NmCard (hero + panel tab + doc card) · NmTag/NmBadge (hero) ·
   NmFormGrid · NmInputGroup (nút mắt) · NmDescriptionList (summary).
   CSS ở đây chỉ còn layout trang + các pattern chưa có primitive
   (đo độ mạnh mật khẩu, avatar overlay, link thẻ thành viên).
   ═══════════════════════════════════════════════════════════════ */

.nm-list-page[b-b77dhilr74] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-b77dhilr74] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-b77dhilr74] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-b77dhilr74] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }

.acc-loading[b-b77dhilr74] { display: flex; flex-direction: column; gap: 12px; }

/* ─────────── Hero (nằm trong NmCard) ─────────── */
.acc-hero[b-b77dhilr74] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.acc-hero-avatar[b-b77dhilr74] {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--nm-brand-50);
    flex-shrink: 0;
}

.acc-avatar-overlay[b-b77dhilr74] {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--nm-surface);
    transition: background .15s ease, transform .15s ease;
}
.acc-avatar-overlay:hover[b-b77dhilr74] { background: var(--nm-brand-600); transform: scale(1.06); }
.acc-avatar-overlay:focus-visible[b-b77dhilr74] { outline: 2px solid var(--nm-brand-500); outline-offset: 2px; }

.acc-hero-id[b-b77dhilr74] { flex: 1; min-width: 0; }
.acc-hero-name[b-b77dhilr74] {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--nm-ink);
    line-height: 1.15;
}
.acc-hero-email[b-b77dhilr74] {
    margin: 3px 0 0;
    font-size: 13.5px;
    color: var(--nm-muted);
    word-break: break-word;
}
.acc-hero-meta[b-b77dhilr74] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.acc-hero-badges[b-b77dhilr74] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* avatar upload */
.acc-avatar-upload[b-b77dhilr74] { max-width: 320px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.acc-uploading[b-b77dhilr74] { margin: 0; font-size: 12px; color: var(--nm-brand-700); }

/* ─────────── Shell: tabs + summary ─────────── */
.acc-shell[b-b77dhilr74] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.acc-shell-main[b-b77dhilr74] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acc-shell-side[b-b77dhilr74] {
    position: sticky;
    top: 84px; /* clear the app's sticky header (~76px) */
    align-self: start; /* don't stretch to grid row height, so sticky engages */
    margin-top: 54px; /* align summary top with tab panel (below the tab bar) */
}

/* ─────────── NmCard panel per tab ─────────── */
[b-b77dhilr74] .acc-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.acc-card-ico[b-b77dhilr74] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.acc-card-title[b-b77dhilr74] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.acc-card-sub[b-b77dhilr74] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }
.acc-card-count[b-b77dhilr74] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

.acc-card-body[b-b77dhilr74] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Quốc tịch chiếm cả hàng trong NmFormGrid */
.acc-card-body[b-b77dhilr74]  .acc-col-full { grid-column: 1 / -1; }

.acc-fstack[b-b77dhilr74] { display: flex; flex-direction: column; gap: 12px; }

.acc-validation[b-b77dhilr74] { margin: 3px 0 0; font-size: 11.5px; color: var(--nm-bad); }

.acc-panel-actions[b-b77dhilr74] {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
    border-top: 1px solid var(--nm-border);
}

/* ─────────── Document cards (NmCard lồng, Elevated=false) ─────────── */
.acc-docs[b-b77dhilr74] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.acc-doccard-type[b-b77dhilr74] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--nm-ink);
}
[b-b77dhilr74] .acc-doccard .nm-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--nm-surface-2);
}
.acc-doccard-body[b-b77dhilr74] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

/* ─────────── Password (security tab) ─────────── */
/* Form đổi mật khẩu | thẻ "Yêu cầu mật khẩu": form không kéo dài hết bề ngang
   (ô mật khẩu dài vô nghĩa), phần trống bên phải dành cho checklist. */
.acc-sec[b-b77dhilr74] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
    max-width: 620px;
}
/* Hai cột chỉ khi khu tab thật sự đủ rộng:
   900–1024px = cột summary của trang đã xếp xuống dưới nên khu tab chiếm hết bề ngang;
   ≥1320px    = summary vẫn nằm bên phải mà vẫn còn chỗ. Khoảng 1025–1319px giữ một cột. */
@media (min-width: 900px) and (max-width: 1024px), (min-width: 1320px) {
    .acc-sec[b-b77dhilr74] {
        grid-template-columns: minmax(320px, 1fr) 300px;
        max-width: 940px;
    }
}
/* Nút mắt là Suffix của NmInputGroup — addon tự lo khung, chỉ còn reset nút */
.acc-pwd-eye[b-b77dhilr74] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    color: var(--nm-muted);
    cursor: pointer;
}
.acc-pwd-eye:hover[b-b77dhilr74] { color: var(--nm-ink-2); }
.acc-pwd-eye:focus-visible[b-b77dhilr74] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; border-radius: 6px; }

.acc-pwd-strength[b-b77dhilr74] { display: flex; align-items: center; gap: 10px; }
.acc-pwd-bars[b-b77dhilr74] { display: flex; gap: 4px; flex: 1; }

.acc-pwd-bar[b-b77dhilr74] {
    height: 5px;
    flex: 1;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border);
    transition: background .2s ease;
}
.acc-pwd-bar.on.s1[b-b77dhilr74], .acc-pwd-bar.on.s2[b-b77dhilr74] { background: var(--nm-bad); }
.acc-pwd-bar.on.s3[b-b77dhilr74] { background: var(--nm-warn); }
.acc-pwd-bar.on.s4[b-b77dhilr74], .acc-pwd-bar.on.s5[b-b77dhilr74] { background: var(--nm-ok); }

/* min-width giữ chỗ sẵn cho nhãn độ mạnh → thanh đo không nhảy khi bắt đầu gõ */
.acc-pwd-strlbl[b-b77dhilr74] { font-size: 12px; font-weight: 600; flex-shrink: 0; min-width: 58px; text-align: right; }
.acc-pwd-strlbl.s1[b-b77dhilr74], .acc-pwd-strlbl.s2[b-b77dhilr74] { color: var(--nm-bad); }
.acc-pwd-strlbl.s3[b-b77dhilr74] { color: var(--nm-warn); }
.acc-pwd-strlbl.s4[b-b77dhilr74], .acc-pwd-strlbl.s5[b-b77dhilr74] { color: var(--nm-ok); }

.acc-pwd-rules[b-b77dhilr74] {
    list-style: none;
    margin: 0;
    padding: 10px 12px;
    background: var(--nm-surface-2);
    border-radius: 10px;
    display: grid;
    gap: 6px 14px;
}
.acc-pwd-rules li[b-b77dhilr74] {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    color: var(--nm-muted);
}
.acc-pwd-rules li[b-b77dhilr74]::before {
    content: "○";
    position: absolute;
    left: 0;
    color: var(--nm-border-strong);
}
.acc-pwd-rules li.ok[b-b77dhilr74] { color: var(--nm-ink-2); }
.acc-pwd-rules li.ok[b-b77dhilr74]::before { content: "✓"; color: var(--nm-ok); font-weight: 700; }

.acc-pwd-tip[b-b77dhilr74] {
    display: flex;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nm-muted);
}
.acc-pwd-tip > i[b-b77dhilr74] { color: var(--nm-brand-600); flex-shrink: 0; margin-top: 1px; }

/* ─────────── Mật khẩu thanh toán: dòng trạng thái ─────────── */
.acc-pin-state[b-b77dhilr74] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.acc-pin-since[b-b77dhilr74] { font-size: 12px; color: var(--nm-muted); }

/* ─────────── Activity: DataGrid (nm-grid) + pagination ─────────── */
.acc-pager-wrap[b-b77dhilr74] { margin-top: 16px; }

/* ─────────── Summary panel ─────────── */
.acc-summary[b-b77dhilr74] {
    background: linear-gradient(180deg, var(--nm-brand-50) 0%, var(--nm-surface) 64px);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
    padding: 18px;
}

.acc-summary-title[b-b77dhilr74] {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}

/* NmDescriptionList Inline: giá trị dồn phải cho hợp side panel */
.acc-summary[b-b77dhilr74]  .nm-dl__desc {
    text-align: right;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acc-summary[b-b77dhilr74]  .nm-dl__item:last-child { border-bottom: none; }

.acc-summary-link[b-b77dhilr74] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid var(--nm-border);
    border-radius: 12px;
    background: var(--nm-surface);
    text-decoration: none;
    color: var(--nm-ink);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.acc-summary-link:hover[b-b77dhilr74] { border-color: var(--nm-brand-300); background: var(--nm-brand-50); }
.acc-summary-link > i:first-child[b-b77dhilr74] { color: var(--nm-brand-600); font-size: 15px; }
.acc-summary-link span[b-b77dhilr74] { flex: 1; }
.acc-summary-link-arrow[b-b77dhilr74] { color: var(--nm-muted); font-size: 14px; }

/* ─────────── Shared ─────────── */
.acc-code[b-b77dhilr74] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

/* ─────────── Responsive ─────────── */
@media (max-width: 1024px) {
    .acc-shell[b-b77dhilr74] { grid-template-columns: 1fr; }
    .acc-shell-side[b-b77dhilr74] { position: static; order: 2; margin-top: 0 !important; }
}

@media (max-width: 768px) {
    .acc-hero[b-b77dhilr74] { flex-direction: column; text-align: center; }
    .acc-hero-id[b-b77dhilr74] { text-align: center; }
    .acc-hero-meta[b-b77dhilr74] { justify-content: center; }
    .acc-hero-badges[b-b77dhilr74] { flex-direction: row; align-items: center; justify-content: center; }
    .acc-docs[b-b77dhilr74] { grid-template-columns: 1fr; }
    .acc-pwd-rules[b-b77dhilr74] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .nm-list-page[b-b77dhilr74] { padding: 16px 14px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-b77dhilr74] { transition: none !important; animation-duration: .001ms !important; }
}
/* /src/Features/Account/Pages/Ca/CaChangePassword.razor.rz.scp.css */
/* CaChangePassword — Manager Dashboard v4 theme (ftc-style pattern) */
.cacpwd-root[b-7tcumw6zx7] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 28px;
    min-height: calc(100vh - 64px);
    outline: none;
}

/* ── ftc-style header ── */
.cacpwd-header[b-7tcumw6zx7] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 14px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    flex-wrap: wrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.cacpwd-header-left[b-7tcumw6zx7] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.cacpwd-header-ico[b-7tcumw6zx7] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(16, 24, 40, .08);
}

.cacpwd-header-ico svg[b-7tcumw6zx7] { width: 22px; height: 22px; }

.cacpwd-header-titles[b-7tcumw6zx7] { min-width: 0; }

.cacpwd-header-titles h1[b-7tcumw6zx7] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.2;
}

.cacpwd-header-sub[b-7tcumw6zx7] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

.cacpwd-header-right[b-7tcumw6zx7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cacpwd-btn[b-7tcumw6zx7] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

.cacpwd-btn:hover[b-7tcumw6zx7] {
    background: var(--d-surface-2);
    color: var(--d-ink);
    text-decoration: none;
}

.cacpwd-btn-accent[b-7tcumw6zx7] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.18), 0 4px 12px -2px rgba(255, 107, 0,.22);
}

.cacpwd-btn-accent:hover[b-7tcumw6zx7] {
    background: var(--d-accent-grad-hover);
    color: #fff;
}

.cacpwd-btn-accent:disabled[b-7tcumw6zx7] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    box-shadow: none;
    cursor: not-allowed;
}

.cacpwd-grid[b-7tcumw6zx7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .cacpwd-grid[b-7tcumw6zx7] {
        grid-template-columns: 2fr 1fr;
    }
}

/* Card (ftc-card style with warm-cream gradient head + icon) */
.cacpwd-card[b-7tcumw6zx7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cacpwd-card-hd[b-7tcumw6zx7] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #fff8f2 0%, #fff 100%);
}

.cacpwd-card-hd h3[b-7tcumw6zx7] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    letter-spacing: -0.01em;
    text-transform: none;
}

.cacpwd-card-hd small[b-7tcumw6zx7] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-left: 2px;
}

.cacpwd-card-ico[b-7tcumw6zx7] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cacpwd-card-ico svg[b-7tcumw6zx7] { width: 15px; height: 15px; }

.cacpwd-card-body[b-7tcumw6zx7] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.cacpwd-card-ft[b-7tcumw6zx7] {
    padding: 12px 16px;
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cacpwd-kbd-hint[b-7tcumw6zx7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
}

.cacpwd-kbd[b-7tcumw6zx7] {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--d-ink-2);
}

.cacpwd-field[b-7tcumw6zx7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cacpwd-label[b-7tcumw6zx7] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cacpwd-label .req[b-7tcumw6zx7] {
    color: var(--d-danger);
    margin-left: 2px;
}

.cacpwd-input-wrap[b-7tcumw6zx7] {
    position: relative;
}

.cacpwd-input[b-7tcumw6zx7] {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 12px;
    font-size: 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

.cacpwd-input:focus[b-7tcumw6zx7] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0,.12);
}

.cacpwd-input[b-7tcumw6zx7]::placeholder {
    color: var(--d-ink-4);
}

.cacpwd-input.error[b-7tcumw6zx7] {
    border-color: var(--d-danger);
}

.cacpwd-input.error:focus[b-7tcumw6zx7] {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.cacpwd-eye[b-7tcumw6zx7] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--d-ink-4);
    cursor: pointer;
}

.cacpwd-eye:hover[b-7tcumw6zx7] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

.cacpwd-match[b-7tcumw6zx7] {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d-good);
}

.cacpwd-err-msg[b-7tcumw6zx7] {
    margin: 0;
    font-size: 11.5px;
    color: var(--d-danger);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cacpwd-strength[b-7tcumw6zx7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cacpwd-strength-bars[b-7tcumw6zx7] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.cacpwd-strength-bar[b-7tcumw6zx7] {
    height: 4px;
    border-radius: 999px;
    background: var(--d-line);
}

.cacpwd-strength-bar.s1[b-7tcumw6zx7] { background: var(--d-danger); }
.cacpwd-strength-bar.s2[b-7tcumw6zx7] { background: var(--d-warn); }
.cacpwd-strength-bar.s3[b-7tcumw6zx7] { background: #0ea5e9; }
.cacpwd-strength-bar.s4[b-7tcumw6zx7] { background: var(--d-good); }
.cacpwd-strength-bar.s5[b-7tcumw6zx7] { background: #15803d; }

.cacpwd-strength-lbl[b-7tcumw6zx7] {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cacpwd-strength-lbl.s1[b-7tcumw6zx7] { color: var(--d-danger); }
.cacpwd-strength-lbl.s2[b-7tcumw6zx7] { color: var(--d-warn); }
.cacpwd-strength-lbl.s3[b-7tcumw6zx7] { color: #0284c7; }
.cacpwd-strength-lbl.s4[b-7tcumw6zx7] { color: var(--d-good); }
.cacpwd-strength-lbl.s5[b-7tcumw6zx7] { color: #15803d; }

.cacpwd-alert[b-7tcumw6zx7] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid;
    font-size: 14px;
    align-items: flex-start;
}

.cacpwd-alert.error[b-7tcumw6zx7] {
    background: var(--d-danger-soft);
    border-color: #fecaca;
    color: #991b1b;
}

.cacpwd-alert.success[b-7tcumw6zx7] {
    background: var(--d-good-soft);
    border-color: #bbf7d0;
    color: #15803d;
}

.cacpwd-alert .x[b-7tcumw6zx7] {
    background: transparent;
    border: 0;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    padding: 0;
}

.cacpwd-alert .x:hover[b-7tcumw6zx7] { opacity: 1; }

.cacpwd-side[b-7tcumw6zx7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cacpwd-check-list[b-7tcumw6zx7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cacpwd-check-item[b-7tcumw6zx7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.cacpwd-check-mark[b-7tcumw6zx7] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cacpwd-check-mark.ok[b-7tcumw6zx7] {
    background: var(--d-good-soft);
    color: var(--d-good);
}

.cacpwd-check-mark.pending[b-7tcumw6zx7] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
}

.cacpwd-check-text[b-7tcumw6zx7] {
    color: var(--d-ink-2);
}

.cacpwd-check-text.pending[b-7tcumw6zx7] { color: var(--d-ink-3); }

.cacpwd-tips[b-7tcumw6zx7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-2);
}

.cacpwd-tips li[b-7tcumw6zx7] {
    display: flex;
    gap: 8px;
}

.cacpwd-tips li[b-7tcumw6zx7]::before {
    content: "•";
    color: var(--d-ink-4);
    flex-shrink: 0;
}

.cacpwd-spin[b-7tcumw6zx7] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cacpwd-spin-b-7tcumw6zx7 .8s linear infinite;
}

@keyframes cacpwd-spin-b-7tcumw6zx7 {
    to { transform: rotate(360deg); }
}
/* /src/Features/Account/Pages/Ca/CaLoginHistory.razor.rz.scp.css */
/* CaLoginHistory — Manager Dashboard v4 theme (ftc-style pattern) */
.calhist-root[b-eddgbgehcs] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 28px;
    min-height: calc(100vh - 64px);
}

/* ── ftc-style header ── */
.calhist-header[b-eddgbgehcs] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 14px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    flex-wrap: wrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.calhist-header-left[b-eddgbgehcs] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.calhist-header-ico[b-eddgbgehcs] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(16, 24, 40, .08);
}

.calhist-header-ico svg[b-eddgbgehcs] { width: 22px; height: 22px; }

.calhist-header-titles[b-eddgbgehcs] { min-width: 0; }

.calhist-header-titles h1[b-eddgbgehcs] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.calhist-code-chip[b-eddgbgehcs] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #ffe0c7;
    font-variant-numeric: tabular-nums;
}

.calhist-header-sub[b-eddgbgehcs] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

.calhist-header-right[b-eddgbgehcs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Header pills */
.calhist-hpill[b-eddgbgehcs] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 10px;
    border: 1.5px solid;
    line-height: 1.1;
    min-height: 36px;
}

.calhist-hpill small[b-eddgbgehcs] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--d-ink-4);
    text-transform: uppercase;
}

.calhist-hpill b[b-eddgbgehcs] {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.calhist-hpill--good[b-eddgbgehcs] {
    border-color: color-mix(in srgb, var(--d-good) 30%, transparent);
    background: color-mix(in srgb, var(--d-good) 7%, var(--d-surface));
}
.calhist-hpill--good b[b-eddgbgehcs] { color: var(--d-good); }

.calhist-hpill--danger[b-eddgbgehcs] {
    border-color: color-mix(in srgb, var(--d-danger) 30%, transparent);
    background: color-mix(in srgb, var(--d-danger) 7%, var(--d-surface));
}
.calhist-hpill--danger b[b-eddgbgehcs] { color: var(--d-danger); }

.calhist-btn[b-eddgbgehcs] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

.calhist-btn:hover[b-eddgbgehcs] {
    background: var(--d-surface-2);
    color: var(--d-ink);
    text-decoration: none;
}

/* Card (ftc-card style with warm-cream gradient head + icon) */
.calhist-card[b-eddgbgehcs] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    overflow: hidden;
}

.calhist-card-hd[b-eddgbgehcs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line-2);
    background: linear-gradient(180deg, #fff8f2 0%, #fff 100%);
}

.calhist-card-hd h2[b-eddgbgehcs] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.calhist-card-hd small[b-eddgbgehcs] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-left: 2px;
}

.calhist-card-ico[b-eddgbgehcs] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.calhist-card-ico svg[b-eddgbgehcs] { width: 15px; height: 15px; }

.calhist-card-count[b-eddgbgehcs] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.calhist-list[b-eddgbgehcs] {
    display: flex;
    flex-direction: column;
}

.calhist-row[b-eddgbgehcs] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line-2);
    transition: background .12s;
}

.calhist-row:last-child[b-eddgbgehcs] { border-bottom: 0; }

.calhist-row:hover[b-eddgbgehcs] { background: var(--d-surface-2); }

.calhist-ico[b-eddgbgehcs] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.calhist-ico.good[b-eddgbgehcs] {
    background: var(--d-good-soft);
    color: var(--d-good);
}

.calhist-ico.fail[b-eddgbgehcs] {
    background: var(--d-danger-soft);
    color: var(--d-danger);
}

.calhist-row-body[b-eddgbgehcs] {
    flex: 1;
    min-width: 0;
}

.calhist-row-head[b-eddgbgehcs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.calhist-status[b-eddgbgehcs] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.calhist-time[b-eddgbgehcs] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calhist-meta[b-eddgbgehcs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--d-ink-3);
}

.calhist-meta .ua[b-eddgbgehcs] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.calhist-meta .lbl[b-eddgbgehcs] {
    color: var(--d-ink-3);
    font-weight: 600;
    margin-right: 4px;
}

.calhist-meta .val[b-eddgbgehcs] {
    color: var(--d-ink-2);
}

.calhist-mono[b-eddgbgehcs] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-2);
}


.calhist-empty[b-eddgbgehcs] {
    padding: 48px 16px;
    text-align: center;
    color: var(--d-ink-3);
}

.calhist-empty svg[b-eddgbgehcs] {
    margin: 0 auto 8px;
    color: var(--d-ink-4);
}

.calhist-empty b[b-eddgbgehcs] {
    display: block;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.calhist-loading[b-eddgbgehcs] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.calhist-spinner[b-eddgbgehcs] {
    width: 28px;
    height: 28px;
    border: 2px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: calhist-spin-b-eddgbgehcs .8s linear infinite;
}

@keyframes calhist-spin-b-eddgbgehcs {
    to { transform: rotate(360deg); }
}
/* /src/Features/Account/Pages/Ca/CaPaymentPassword.razor.rz.scp.css */
/* CaPaymentPassword — mã 6 số của ví công ty.
   Token-only theo tokens.css SSOT; cỡ chữ ghim px theo quy ước FE.

   Trang dùng HẾT chiều ngang theo khung nm-list của cụm CA: cột trái là việc phải làm, cột phải
   trả lời "vì sao đáng làm". Nhân vật chính vẫn là ô nhập sáu ô, nên mọi thứ quanh nó giữ im. */

/* ── Khung trang chuẩn nm-list ──
   ⚠ .nm-list-* KHÔNG phải class toàn cục: do CSS isolation của Blazor, MỖI trang phải tự khai
   trong file scoped của mình (73 trang trong repo đang làm đúng vậy). Thiếu khối này thì trang
   mất sạch padding/typography — và mất padding phải là cột bên phải tràn ra ngoài mép. */
.nm-list-page[b-xwfl8ro6js] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-xwfl8ro6js] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-xwfl8ro6js] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-xwfl8ro6js] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }

.pin-grid[b-xwfl8ro6js] {
    display: grid;
    /* Cột phải co được (không ghim cứng 330px) để không bao giờ đẩy tràn khung ở màn hẹp. */
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

/* Lối quay lại: liên kết chữ đặt TRÊN tiêu đề — đi lùi một cấp là hành động phụ, không đáng làm nút. */
.pin-back[b-xwfl8ro6js] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.pin-back:hover[b-xwfl8ro6js] { color: var(--nm-brand-600); }
.pin-back:focus-visible[b-xwfl8ro6js] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; border-radius: 3px; }
.pin-back i[b-xwfl8ro6js] { font-size: 12px; }

/* ═══════════ Cột chính: biểu mẫu ═══════════ */
/* Header/Footer là ChildContent của NmCard ⇒ ::deep phải đứng ĐẦU,
   viết `.pin-card ::deep …` sẽ không khớp gì cả. */
[b-xwfl8ro6js] .pin-card .pin-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.pin-body[b-xwfl8ro6js] { display: flex; flex-direction: column; padding: 0 20px; }

/* Nhãn trái · thao tác phải: dùng hết chiều ngang mà mắt vẫn có một mốc dọc để bám. */
.pin-row[b-xwfl8ro6js] {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    padding: 22px 0;
}

.pin-row + .pin-row[b-xwfl8ro6js] { border-top: 1px solid var(--nm-border); }

.pin-row-label[b-xwfl8ro6js] { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }

.pin-label[b-xwfl8ro6js] {
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}

.pin-hint[b-xwfl8ro6js] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nm-muted);
}

.pin-row-field[b-xwfl8ro6js] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.pin-note[b-xwfl8ro6js] { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--nm-ink-2); }
.pin-err[b-xwfl8ro6js] { font-size: 11.5px; color: var(--nm-bad); }

/* ── Chọn cách xác minh ── */
.pin-seg[b-xwfl8ro6js] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
    /* không kéo dài hết khoang: hai lựa chọn ngắn mà trải 600px thì thành hai thanh trống */
    max-width: 420px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
}

.pin-seg-opt[b-xwfl8ro6js] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: calc(var(--nm-r-input) - 3px);
    background: transparent;
    font-family: var(--nm-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.pin-seg-opt:hover:not(:disabled):not(.is-on)[b-xwfl8ro6js] { color: var(--nm-ink-2); }
.pin-seg-opt:focus-visible[b-xwfl8ro6js] { outline: 2px solid var(--nm-brand-300); outline-offset: 1px; }
.pin-seg-opt:disabled[b-xwfl8ro6js] { cursor: not-allowed; opacity: .6; }

.pin-seg-opt.is-on[b-xwfl8ro6js] {
    background: var(--nm-surface);
    color: var(--nm-brand-600);
    box-shadow: 0 1px 2px rgb(0 0 0 / .06);
}

.pin-seg-opt i[b-xwfl8ro6js] { font-size: 14px; }

/* Gửi lại mã — hành động phụ, không tranh chấp với nút chính ở chân thẻ. */
.pin-link[b-xwfl8ro6js] {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--nm-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    cursor: pointer;
}

.pin-link:hover:not(:disabled)[b-xwfl8ro6js] { text-decoration: underline; }
.pin-link:disabled[b-xwfl8ro6js] { color: var(--nm-muted); cursor: not-allowed; }
.pin-link:focus-visible[b-xwfl8ro6js] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; border-radius: 3px; }

/* ── Điều kiện của mã ── */
.pin-rules[b-xwfl8ro6js] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pin-rule[b-xwfl8ro6js] { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--nm-muted); }
.pin-rule.is-ok[b-xwfl8ro6js] { color: var(--nm-ok); }
.pin-rule i[b-xwfl8ro6js] { font-size: 12px; }

/* ── Chân thẻ ──
   NmCard.__foot chỉ có padding + đường kẻ, không tự dàn hàng ⇒ tự bọc một lớp flex. */
[b-xwfl8ro6js] .pin-card .pin-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

[b-xwfl8ro6js] .pin-card .pin-guard {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    flex: 1 1 240px;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nm-muted);
}

[b-xwfl8ro6js] .pin-card .pin-guard i { flex-shrink: 0; margin-top: 1px; color: var(--nm-warn); }

/* ═══════════ Cột phải ═══════════ */
.pin-aside[b-xwfl8ro6js] { display: flex; flex-direction: column; gap: 12px; }

/* Liên kết sang ví — hành động phụ nên để dạng chữ. Trước đây chỗ này là một khoang cam to hiện
   số dư; đã bỏ vì màn cài đặt bảo mật không phải chỗ phơi số tiền, và không còn con số thì cái
   khoang cam đó chỉ còn là trang trí. */
.pin-wallet-link[b-xwfl8ro6js] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    text-decoration: none;
}

.pin-wallet-link:hover[b-xwfl8ro6js] { text-decoration: underline; }
.pin-wallet-link:focus-visible[b-xwfl8ro6js] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; border-radius: 3px; }

/* Bốn dòng sự thật về cách mã hoạt động — luật thật, không phải lời quảng cáo. */
.pin-facts[b-xwfl8ro6js] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}

.pin-fact[b-xwfl8ro6js] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
}

.pin-fact + .pin-fact[b-xwfl8ro6js] { border-top: 1px solid var(--nm-border); }

.pin-fact > i[b-xwfl8ro6js] { font-size: 15px; color: var(--nm-muted); flex: none; margin-top: 1px; }
.pin-fact > div[b-xwfl8ro6js] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pin-fact-title[b-xwfl8ro6js] { font-size: 12.5px; font-weight: 700; color: var(--nm-ink); }
.pin-fact-sub[b-xwfl8ro6js] { font-size: 11.5px; line-height: 1.5; color: var(--nm-muted); }

/* Dòng đầu là TRẠNG THÁI nên được tô màu theo tình trạng; ba dòng sau trung tính. */
.pin-fact.is-set > i[b-xwfl8ro6js] { color: var(--nm-ok); }
.pin-fact.is-unset[b-xwfl8ro6js] { background: var(--nm-warn-soft); }
.pin-fact.is-unset > i[b-xwfl8ro6js] { color: var(--nm-warn); }
.pin-fact.is-locked[b-xwfl8ro6js] { background: var(--nm-bad-soft); }
.pin-fact.is-locked > i[b-xwfl8ro6js] { color: var(--nm-bad); }

/* ═══════════ Thu hẹp ═══════════ */
@media (max-width: 1100px) {
    .pin-grid[b-xwfl8ro6js] { grid-template-columns: minmax(0, 1fr); }
    /* Cột phải xuống dưới: nó là ngữ cảnh, không phải bước bắt buộc. */
    .pin-aside[b-xwfl8ro6js] { order: 2; }
}

@media (max-width: 640px) {
    .nm-list-page[b-xwfl8ro6js] { padding: 16px 14px 22px; }
    .pin-row[b-xwfl8ro6js] { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
    .pin-body[b-xwfl8ro6js] { padding: 0 14px; }
    .pin-seg[b-xwfl8ro6js] { grid-template-columns: 1fr; max-width: none; }
    [b-xwfl8ro6js] .pin-card .pin-foot > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-xwfl8ro6js] { transition: none !important; animation-duration: .001ms !important; }
}
/* /src/Features/Account/Pages/Ca/Documents.razor.rz.scp.css */
/* Documents — Manager Dashboard v4 theme */
.cadoc-root[b-bimjr5agsw],
.cadoc-modal[b-bimjr5agsw] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;
}

.cadoc-root[b-bimjr5agsw] {
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 28px;
    min-height: calc(100vh - 64px);
}

.cadoc-num[b-bimjr5agsw] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-feature-settings: 'tnum'; }

/* ── ftc-style header ── */
.cadoc-header[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 14px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    flex-wrap: wrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.cadoc-header-left[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.cadoc-header-ico[b-bimjr5agsw] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(16, 24, 40, .08);
}

.cadoc-header-ico svg[b-bimjr5agsw] { width: 22px; height: 22px; }

.cadoc-header-titles[b-bimjr5agsw] { min-width: 0; }

.cadoc-header-titles h1[b-bimjr5agsw] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cadoc-code-chip[b-bimjr5agsw] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #ffe0c7;
    font-variant-numeric: tabular-nums;
}

.cadoc-header-sub[b-bimjr5agsw] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

.cadoc-header-right[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Header pills */
.cadoc-hpill[b-bimjr5agsw] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 10px;
    border: 1.5px solid;
    line-height: 1.1;
    min-height: 36px;
}

.cadoc-hpill small[b-bimjr5agsw] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--d-ink-4);
    text-transform: uppercase;
}

.cadoc-hpill b[b-bimjr5agsw] {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.cadoc-hpill--muted[b-bimjr5agsw] {
    border-color: var(--d-line);
    background: var(--d-surface);
}

.cadoc-hpill--accent[b-bimjr5agsw] {
    border-color: transparent;
    background: var(--d-accent-grad);
}
.cadoc-hpill--accent small[b-bimjr5agsw] { color: rgba(255, 255, 255, .75); }
.cadoc-hpill--accent b[b-bimjr5agsw] { color: #fff; }

.cadoc-btn[b-bimjr5agsw] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
}
.cadoc-btn:hover[b-bimjr5agsw] { background: var(--d-surface-2); color: var(--d-ink); }
.cadoc-btn.accent[b-bimjr5agsw] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.18), 0 4px 12px -2px rgba(255, 107, 0,.22);
}
.cadoc-btn.accent:hover[b-bimjr5agsw] { background: var(--d-accent-grad-hover); color: #fff; }

/* ── Card (ftc-card style with warm-cream gradient head + icon) ── */
.cadoc-card[b-bimjr5agsw] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    overflow: hidden;
}

.cadoc-card-hd[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line-2);
    background: linear-gradient(180deg, #fff8f2 0%, #fff 100%);
}

.cadoc-card-hd h2[b-bimjr5agsw] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.cadoc-card-hd small[b-bimjr5agsw] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-left: 2px;
}

.cadoc-card-ico[b-bimjr5agsw] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cadoc-card-ico svg[b-bimjr5agsw] { width: 15px; height: 15px; }

.cadoc-card-count[b-bimjr5agsw] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.cadoc-results[b-bimjr5agsw] { padding: 0; }

.cadoc-alert[b-bimjr5agsw] {
    border-radius: var(--d-r);
    padding: 10px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cadoc-alert.error[b-bimjr5agsw] { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.cadoc-alert.success[b-bimjr5agsw] { background: var(--d-good-soft); border: 1px solid #bbf7d0; color: #166534; }

.cadoc-loading[b-bimjr5agsw] { display: flex; justify-content: center; padding: 64px 0; }
.cadoc-spinner[b-bimjr5agsw] {
    width: 28px; height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: cadoc-spin-b-bimjr5agsw .8s linear infinite;
}
@keyframes cadoc-spin-b-bimjr5agsw { to { transform: rotate(360deg); } }

.cadoc-tbl-wrap[b-bimjr5agsw] { overflow-x: auto; }
.cadoc-tbl[b-bimjr5agsw] { width: 100%; border-collapse: collapse; font-size: 14px; }
.cadoc-tbl thead tr[b-bimjr5agsw] { background: var(--d-surface-2); }
.cadoc-tbl thead th[b-bimjr5agsw] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 0;
    background: transparent;
    white-space: nowrap;
}
.cadoc-tbl thead th.right[b-bimjr5agsw] { text-align: right; }
.cadoc-tbl thead th.center[b-bimjr5agsw] { text-align: center; }
.cadoc-tbl tbody td[b-bimjr5agsw] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.cadoc-tbl tbody tr:last-child td[b-bimjr5agsw] { border-bottom: 0; }
.cadoc-tbl tbody tr:hover[b-bimjr5agsw] { background: var(--d-surface-2); }
.cadoc-tbl td.right[b-bimjr5agsw] { text-align: right; }
.cadoc-tbl td.center[b-bimjr5agsw] { text-align: center; }
.cadoc-tbl .num[b-bimjr5agsw] { font-variant-numeric: tabular-nums; }

.cadoc-file-cell[b-bimjr5agsw] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cadoc-file-ico[b-bimjr5agsw] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}
.cadoc-file-ico.pdf[b-bimjr5agsw] { color: var(--d-danger); }
.cadoc-file-ico.doc[b-bimjr5agsw] { color: #2563eb; }
.cadoc-file-ico.xls[b-bimjr5agsw] { color: var(--d-good); }
.cadoc-file-ico.ppt[b-bimjr5agsw] { color: var(--d-accent); }
.cadoc-file-ico.img[b-bimjr5agsw] { color: #9333ea; }
.cadoc-file-ico.zip[b-bimjr5agsw] { color: #b45309; }
.cadoc-file-ico.txt[b-bimjr5agsw] { color: var(--d-ink-2); }
.cadoc-file-ico.vid[b-bimjr5agsw] { color: #db2777; }
.cadoc-file-ico.aud[b-bimjr5agsw] { color: #4f46e5; }
.cadoc-file-name[b-bimjr5agsw] {
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.cadoc-actions[b-bimjr5agsw] { display: inline-flex; gap: 14px; align-items: center; justify-content: center; }
.cadoc-action-btn[b-bimjr5agsw] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--d-accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.cadoc-action-btn:hover[b-bimjr5agsw] { color: #e85f00; text-decoration: underline; }
.cadoc-action-btn.danger[b-bimjr5agsw] { color: var(--d-ink-3); }
.cadoc-action-btn.danger:hover[b-bimjr5agsw] { color: var(--d-danger); }

.cadoc-empty[b-bimjr5agsw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}
.cadoc-empty b[b-bimjr5agsw] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.cadoc-empty small[b-bimjr5agsw] { font-size: 12px; }
.cadoc-empty svg[b-bimjr5agsw] { color: var(--d-ink-4); margin-bottom: 6px; }

/* === Toolbar (search + chips + view toggle) === */
.cadoc-toolbar[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
}
.cadoc-search[b-bimjr5agsw] {
    position: relative;
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 420px;
    display: flex;
    align-items: center;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 0 12px;
    height: 38px;
    transition: border-color .12s, box-shadow .12s;
}
.cadoc-search:focus-within[b-bimjr5agsw] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0,.12);
}
.cadoc-search svg[b-bimjr5agsw] { color: var(--d-ink-3); flex-shrink: 0; }
.cadoc-search input[b-bimjr5agsw] {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0 8px;
    font-size: 14px;
    color: var(--d-ink);
    height: 100%;
}
.cadoc-search input[b-bimjr5agsw]::placeholder { color: var(--d-ink-4); }
.cadoc-search-clear[b-bimjr5agsw] {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--d-ink-3);
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
}
.cadoc-search-clear:hover[b-bimjr5agsw] { color: var(--d-ink); }

.cadoc-chips[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cadoc-chip[b-bimjr5agsw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: all .12s;
}
.cadoc-chip:hover[b-bimjr5agsw] { background: var(--d-surface-2); }
.cadoc-chip.active[b-bimjr5agsw] {
    background: var(--d-accent-soft);
    border-color: rgba(255, 107, 0,.35);
    color: #c2540a;
}
.cadoc-chip-count[b-bimjr5agsw] {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.05);
    color: var(--d-ink-3);
    min-width: 18px;
    text-align: center;
}
.cadoc-chip.active .cadoc-chip-count[b-bimjr5agsw] {
    background: rgba(255, 107, 0,.18);
    color: #c2540a;
}

.cadoc-view-toggle[b-bimjr5agsw] {
    display: inline-flex;
    margin-left: auto;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--d-surface);
}
.cadoc-view-toggle button[b-bimjr5agsw] {
    width: 34px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .12s;
}
.cadoc-view-toggle button + button[b-bimjr5agsw] { border-left: 1px solid var(--d-line); }
.cadoc-view-toggle button:hover[b-bimjr5agsw] { background: var(--d-surface-2); color: var(--d-ink); }
.cadoc-view-toggle button.active[b-bimjr5agsw] { background: var(--d-accent-soft); color: var(--d-accent); }

/* === Grid view === */
.cadoc-grid[b-bimjr5agsw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    padding: 14px 16px;
}
.cadoc-tile[b-bimjr5agsw] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cadoc-tile:hover[b-bimjr5agsw] {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 0,.35);
    box-shadow: 0 10px 24px -8px rgba(16, 24, 40,.15);
}
.cadoc-tile-thumb[b-bimjr5agsw] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--d-surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.cadoc-tile-media[b-bimjr5agsw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--d-surface-2);
    z-index: 1;
    border: 0;
}
.cadoc-tile-media.cadoc-tile-pdf[b-bimjr5agsw] {
    object-fit: contain;
    background: #f4f5f8;
    pointer-events: none;
}
.cadoc-tile[b-bimjr5agsw] { cursor: pointer; }
.cadoc-tile-icon[b-bimjr5agsw] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f8fa;
    position: relative;
}
.cadoc-tile-icon svg[b-bimjr5agsw] {
    width: 48%;
    max-width: 80px;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(16, 24, 40, 0.08));
    transition: transform .2s;
}
.cadoc-tile:hover .cadoc-tile-icon svg[b-bimjr5agsw] { transform: translateY(-2px) scale(1.03); }
.cadoc-tile-ext[b-bimjr5agsw] { display: none; }

.cadoc-tile-overlay[b-bimjr5agsw] {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 40%, rgba(16, 24, 40,.55) 100%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    transition: opacity .15s;
}
.cadoc-tile:hover .cadoc-tile-overlay[b-bimjr5agsw] { opacity: 1; }
.cadoc-tile-act[b-bimjr5agsw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--d-ink-2);
    text-decoration: none;
    transition: all .12s;
}
.cadoc-tile-act:hover[b-bimjr5agsw] { background: #fff; color: var(--d-accent); transform: scale(1.05); }
.cadoc-tile-act.danger:hover[b-bimjr5agsw] { color: var(--d-danger); }

.cadoc-tile-meta[b-bimjr5agsw] {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cadoc-tile-name[b-bimjr5agsw] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cadoc-tile-sub[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
}
.cadoc-dot[b-bimjr5agsw] { opacity: 0.5; }

@media (max-width: 640px) {
    .cadoc-grid[b-bimjr5agsw] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .cadoc-view-toggle[b-bimjr5agsw] { margin-left: 0; }
    .cadoc-tile-overlay[b-bimjr5agsw] { opacity: 1; background: linear-gradient(180deg, transparent 60%, rgba(16, 24, 40,.5) 100%); }
}

/* === Preview modal === */
.cadoc-modal[b-bimjr5agsw] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 12, 10, 0.78);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: cadoc-fade-b-bimjr5agsw .15s ease-out;
}
@keyframes cadoc-fade-b-bimjr5agsw { from { opacity: 0; } to { opacity: 1; } }
.cadoc-modal-box[b-bimjr5agsw] {
    background: var(--d-surface);
    border-radius: 14px;
    width: min(1100px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 64px -16px rgba(0,0,0,.5);
    animation: cadoc-pop-b-bimjr5agsw .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes cadoc-pop-b-bimjr5agsw { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cadoc-modal-head[b-bimjr5agsw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}
.cadoc-modal-title[b-bimjr5agsw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    max-width: 50%;
}
.cadoc-modal-meta[b-bimjr5agsw] {
    font-size: 12px;
    color: var(--d-ink-3);
    display: flex;
    gap: 6px;
    align-items: center;
    font-variant-numeric: tabular-nums;
}
.cadoc-modal-actions[b-bimjr5agsw] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cadoc-modal-close[b-bimjr5agsw] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--d-ink-2);
    transition: all .12s;
}
.cadoc-modal-close:hover[b-bimjr5agsw] { background: var(--d-surface-2); color: var(--d-ink); }
.cadoc-modal-body[b-bimjr5agsw] {
    min-height: 0;
    background: var(--d-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: auto;
}
.cadoc-modal-body.media[b-bimjr5agsw] { flex: 1; background: var(--d-surface-2); }
.cadoc-modal-img[b-bimjr5agsw] {
    max-width: 100%;
    max-height: min(80vh, 100%);
    display: block;
    object-fit: contain;
}
.cadoc-modal-frame[b-bimjr5agsw] {
    width: 100%;
    height: 80vh;
    border: 0;
    background: #fff;
}
.cadoc-modal-fallback[b-bimjr5agsw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--d-ink-2);
    padding: 48px 24px;
    text-align: center;
    width: 100%;
}
.cadoc-modal-fallback b[b-bimjr5agsw] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.cadoc-modal-fallback small[b-bimjr5agsw] { color: var(--d-ink-3); font-size: 12px; }
.cadoc-modal-body.media .cadoc-modal-fallback[b-bimjr5agsw] { color: var(--d-ink-2); }
.cadoc-modal-body.media .cadoc-modal-fallback b[b-bimjr5agsw] { color: var(--d-ink); }
.cadoc-modal-body.media .cadoc-modal-fallback small[b-bimjr5agsw] { color: var(--d-ink-3); }
.cadoc-modal-bigicon[b-bimjr5agsw] {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
}
.cadoc-modal-bigicon svg[b-bimjr5agsw] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 20px rgba(16, 24, 40,.12));
}

@media (max-width: 640px) {
    .cadoc-modal[b-bimjr5agsw] { padding: 12px; }
    .cadoc-modal-head[b-bimjr5agsw] { flex-wrap: wrap; gap: 8px; }
    .cadoc-modal-title[b-bimjr5agsw] { max-width: 100%; }
    .cadoc-modal-frame[b-bimjr5agsw] { height: 70vh; }
}
/* /src/Features/Account/Pages/Manager/ChangePasswordPage.razor.rz.scp.css */
/* Change Password — Manager Dashboard v4 theme */
.cpwd-root[b-ro8ng70ov7] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg,#ea580c 0%,#f97316 55%,#fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cpwd-hero[b-ro8ng70ov7] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.cpwd-hero h1[b-ro8ng70ov7] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.cpwd-hero h1 em[b-ro8ng70ov7] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.cpwd-hero-meta[b-ro8ng70ov7] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.cpwd-hero-meta .dot[b-ro8ng70ov7] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.cpwd-hero-actions[b-ro8ng70ov7] { display: flex; align-items: center; gap: 10px; }

.cpwd-back[b-ro8ng70ov7] { width: 38px; height: 38px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--d-ink-2); transition: background .12s, color .12s; }
.cpwd-back:hover[b-ro8ng70ov7] { background: var(--d-surface-2); color: var(--d-ink); }

.cpwd-alert[b-ro8ng70ov7] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; line-height: 1.45; border: 1px solid var(--d-line); background: var(--d-surface); }
.cpwd-alert.is-error[b-ro8ng70ov7] { background: var(--d-danger-soft); border-color: #fecaca; color: #991b1b; }
.cpwd-alert.is-success[b-ro8ng70ov7] { background: var(--d-good-soft); border-color: #bbf7d0; color: #14532d; }
.cpwd-alert .ic[b-ro8ng70ov7] { flex-shrink: 0; margin-top: 1px; }
.cpwd-alert .x[b-ro8ng70ov7] { margin-left: auto; opacity: .6; cursor: pointer; background: transparent; border: 0; }
.cpwd-alert .x:hover[b-ro8ng70ov7] { opacity: 1; }

.cpwd-grid[b-ro8ng70ov7] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .cpwd-grid[b-ro8ng70ov7] { grid-template-columns: 2fr 1fr; } }

.cpwd-card[b-ro8ng70ov7] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; display: flex; flex-direction: column; }
.cpwd-card-hd[b-ro8ng70ov7] { padding: 14px 16px; border-bottom: 1px solid var(--d-line); }
.cpwd-card-hd h3[b-ro8ng70ov7] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.cpwd-card-bd[b-ro8ng70ov7] { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.cpwd-card-ft[b-ro8ng70ov7] { margin-top: auto; padding: 12px 16px; background: var(--d-surface-2); border-top: 1px solid var(--d-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.cpwd-field[b-ro8ng70ov7] { display: flex; flex-direction: column; gap: 6px; }
.cpwd-label[b-ro8ng70ov7] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.cpwd-label .req[b-ro8ng70ov7] { color: var(--d-danger); margin-left: 2px; }
.cpwd-input-wrap[b-ro8ng70ov7] { position: relative; }
.cpwd-input[b-ro8ng70ov7] { width: 100%; height: 38px; padding: 0 40px 0 12px; font-size: 14px; color: var(--d-ink); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); outline: 0; transition: border-color .12s, box-shadow .12s; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cpwd-input[b-ro8ng70ov7]::placeholder { color: var(--d-ink-4); }
.cpwd-input:focus[b-ro8ng70ov7] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.cpwd-input.is-invalid[b-ro8ng70ov7] { border-color: var(--d-danger); }
.cpwd-input.is-invalid:focus[b-ro8ng70ov7] { box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

.cpwd-eye[b-ro8ng70ov7] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: transparent; color: var(--d-ink-4); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cpwd-eye:hover[b-ro8ng70ov7] { background: var(--d-surface-2); color: var(--d-ink-2); }
.cpwd-match[b-ro8ng70ov7] { position: absolute; right: 38px; top: 50%; transform: translateY(-50%); color: var(--d-good); }

.cpwd-err[b-ro8ng70ov7] { font-size: 11.5px; color: var(--d-danger); display: flex; align-items: center; gap: 4px; }

.cpwd-strength[b-ro8ng70ov7] { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.cpwd-strength .bars[b-ro8ng70ov7] { flex: 1; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.cpwd-strength .bar[b-ro8ng70ov7] { height: 4px; border-radius: 999px; background: var(--d-line); }
.cpwd-strength .bar.s1[b-ro8ng70ov7] { background: #ef4444; }
.cpwd-strength .bar.s2[b-ro8ng70ov7] { background: #f59e0b; }
.cpwd-strength .bar.s3[b-ro8ng70ov7] { background: #0ea5e9; }
.cpwd-strength .bar.s4[b-ro8ng70ov7] { background: #10b981; }
.cpwd-strength .bar.s5[b-ro8ng70ov7] { background: #059669; }
.cpwd-strength .lbl[b-ro8ng70ov7] { font-size: 11px; font-weight: 600; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.cpwd-strength .lbl.s1[b-ro8ng70ov7] { color: #b91c1c; } .cpwd-strength .lbl.s2[b-ro8ng70ov7] { color: #b45309; } .cpwd-strength .lbl.s3[b-ro8ng70ov7] { color: #0369a1; } .cpwd-strength .lbl.s4[b-ro8ng70ov7] { color: #047857; } .cpwd-strength .lbl.s5[b-ro8ng70ov7] { color: #065f46; }

.cpwd-kbd-row[b-ro8ng70ov7] { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--d-ink-3); flex-wrap: wrap; }
.cpwd-kbd[b-ro8ng70ov7] { padding: 1px 6px; border-radius: 4px; background: var(--d-surface); border: 1px solid var(--d-line); font-family: 'JetBrains Mono',ui-monospace,monospace; font-size: 10px; color: var(--d-ink-2); }

.cpwd-actions[b-ro8ng70ov7] { display: flex; align-items: center; gap: 8px; }
.cpwd-btn[b-ro8ng70ov7] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.cpwd-btn:hover[b-ro8ng70ov7] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.cpwd-btn-accent[b-ro8ng70ov7] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.cpwd-btn-accent:hover[b-ro8ng70ov7] { background: var(--d-accent-grad-hover); color: #fff; border-color: transparent; }
.cpwd-btn:disabled[b-ro8ng70ov7], .cpwd-btn-accent:disabled[b-ro8ng70ov7] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.cpwd-side[b-ro8ng70ov7] { display: flex; flex-direction: column; gap: 16px; }
.cpwd-req-list[b-ro8ng70ov7] { list-style: none; padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.cpwd-req-list li[b-ro8ng70ov7] { display: flex; align-items: center; gap: 8px; color: var(--d-ink-2); }
.cpwd-req-mark[b-ro8ng70ov7] { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--d-surface-2); color: var(--d-ink-4); border: 1px solid var(--d-line); }
.cpwd-req-mark.ok[b-ro8ng70ov7] { background: var(--d-good-soft); color: var(--d-good); border-color: transparent; }
.cpwd-req-list li.ok[b-ro8ng70ov7] { color: var(--d-ink); }

.cpwd-tips[b-ro8ng70ov7] { padding: 14px 16px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--d-ink-2); line-height: 1.45; }
.cpwd-tips li[b-ro8ng70ov7] { display: flex; gap: 8px; }
.cpwd-tips .b[b-ro8ng70ov7] { color: var(--d-ink-4); flex-shrink: 0; }

.cpwd-spin[b-ro8ng70ov7] { width: 14px; height: 14px; animation: cpwd-spin-b-ro8ng70ov7 1s linear infinite; }
@keyframes cpwd-spin-b-ro8ng70ov7 { to { transform: rotate(360deg); } }
/* /src/Features/Account/Pages/Manager/LoginHistoryPage.razor.rz.scp.css */
/* Login History — Manager Dashboard v4 theme */
.lhist-root[b-f0dipcd2hr] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg,#ea580c 0%,#f97316 55%,#fb923c 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lhist-hero[b-f0dipcd2hr] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.lhist-hero h1[b-f0dipcd2hr] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.lhist-hero h1 em[b-f0dipcd2hr] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.lhist-hero-meta[b-f0dipcd2hr] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.lhist-hero-meta .dot[b-f0dipcd2hr] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.lhist-hero-actions[b-f0dipcd2hr] { display: flex; align-items: center; gap: 10px; }
.lhist-btn[b-f0dipcd2hr] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: background .12s; }
.lhist-btn:hover[b-f0dipcd2hr] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }

.lhist-card[b-f0dipcd2hr] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.lhist-list[b-f0dipcd2hr] { display: flex; flex-direction: column; }
.lhist-row[b-f0dipcd2hr] { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--d-line-2); transition: background .12s; }
.lhist-row:last-child[b-f0dipcd2hr] { border-bottom: 0; }
.lhist-row:hover[b-f0dipcd2hr] { background: var(--d-surface-2); }

.lhist-ico[b-f0dipcd2hr] { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lhist-ico.ok[b-f0dipcd2hr] { background: var(--d-good-soft); color: var(--d-good); }
.lhist-ico.fail[b-f0dipcd2hr] { background: var(--d-danger-soft); color: var(--d-danger); }

.lhist-info[b-f0dipcd2hr] { flex: 1; min-width: 0; }
.lhist-info-hd[b-f0dipcd2hr] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lhist-info-title[b-f0dipcd2hr] { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.lhist-info-time[b-f0dipcd2hr] { font-size: 12px; color: var(--d-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lhist-info-meta[b-f0dipcd2hr] { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--d-ink-3); }
.lhist-info-meta .ua[b-f0dipcd2hr] { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

.lhist-empty[b-f0dipcd2hr] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.lhist-empty svg[b-f0dipcd2hr] { color: var(--d-ink-4); margin-bottom: 6px; }
.lhist-empty b[b-f0dipcd2hr] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.lhist-empty small[b-f0dipcd2hr] { font-size: 12px; }

.lhist-loading[b-f0dipcd2hr] { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.lhist-pager[b-f0dipcd2hr] { padding: 12px 16px; border-top: 1px solid var(--d-line); }
/* /src/Features/Account/Pages/Manager/LoyaltyCardsPage.razor.rz.scp.css */
/* Manager Profile — LoyaltyCards (warm-neutral + cam accent) */
.mplc-root[b-c27br0lq9y] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 56px);
    padding: 20px 28px;
}

.mplc-bc[b-c27br0lq9y] { font-size: 12px; color: var(--d-ink-3); margin-bottom: 4px; }
.mplc-bc a[b-c27br0lq9y] { color: var(--d-ink-3); text-decoration: none; }
.mplc-bc a:hover[b-c27br0lq9y] { color: var(--d-accent); }
.mplc-bc .sep[b-c27br0lq9y] { margin: 0 6px; }

.mplc-hero[b-c27br0lq9y] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    margin-bottom: 20px;
}
.mplc-hero h1[b-c27br0lq9y] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}
.mplc-hero h1 em[b-c27br0lq9y] { font-style: normal; color: var(--d-ink-3); font-weight: 500; font-size: 18px; }
.mplc-hero-meta[b-c27br0lq9y] { margin-top: 6px; font-size: 14px; color: var(--d-ink-3); }
.mplc-hero-actions[b-c27br0lq9y] { display: flex; gap: 8px; }

.mplc-btn[b-c27br0lq9y] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; min-width: 84px;
    padding: 8px 16px; font-size: 14px; font-weight: 500;
    background: #ffffff; color: #44403c;
    border: 1px solid #d6d3d1; border-radius: 10px;
    cursor: pointer; transition: all .15s;
    font-family: inherit; line-height: 1;
}
.mplc-btn:hover[b-c27br0lq9y] { background: #f5f3ef; border-color: #a8a29e; }
.mplc-btn-accent[b-c27br0lq9y] {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    color: #ffffff; border: 1px solid transparent;
}
.mplc-btn-accent:hover[b-c27br0lq9y] { filter: brightness(1.06); }
.mplc-btn:disabled[b-c27br0lq9y] { opacity: .55; cursor: not-allowed; filter: none; }

.mplc-msg[b-c27br0lq9y] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; margin-bottom: 14px; }
.mplc-msg.good[b-c27br0lq9y] { background: var(--d-good-soft); color: var(--d-good); }
.mplc-msg.bad[b-c27br0lq9y] { background: #fee2e2; color: var(--d-danger); }

.mplc-loading[b-c27br0lq9y] { padding: 40px; text-align: center; color: var(--d-ink-3); }
.mplc-empty[b-c27br0lq9y] {
    background: var(--d-surface); border: 1px dashed var(--d-line);
    border-radius: var(--d-r); padding: 40px 24px; text-align: center;
}
.mplc-empty-ico[b-c27br0lq9y] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--d-accent-soft); color: var(--d-accent);
    margin-bottom: 12px;
}
.mplc-empty b[b-c27br0lq9y] { display: block; color: var(--d-ink); font-size: 15px; margin-bottom: 4px; }
.mplc-empty small[b-c27br0lq9y] { color: var(--d-ink-3); font-size: 14px; }

.mplc-grid[b-c27br0lq9y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.mplc-card[b-c27br0lq9y] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s;
}
.mplc-card:hover[b-c27br0lq9y] { border-color: var(--d-ink-4); }

.mplc-card-top[b-c27br0lq9y] { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mplc-card-prog-type[b-c27br0lq9y] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-ink-4); }
.mplc-card-prog-name[b-c27br0lq9y] { font-size: 14px; font-weight: 600; color: var(--d-ink); margin-top: 2px; }
.mplc-card-badge[b-c27br0lq9y] {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--d-accent-soft); color: var(--d-accent); font-weight: 500;
}
.mplc-card-badge.inactive[b-c27br0lq9y] { background: var(--d-surface-2); color: var(--d-ink-3); }

.mplc-card-num[b-c27br0lq9y] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 16px; letter-spacing: 0.06em; color: var(--d-ink);
    background: var(--d-surface-2); padding: 10px 12px; border-radius: 8px;
}

.mplc-card-foot[b-c27br0lq9y] { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 12px; }
.mplc-card-foot .lbl[b-c27br0lq9y] { color: var(--d-ink-4); font-size: 11px; }
.mplc-card-foot .val[b-c27br0lq9y] { color: var(--d-ink-2); font-weight: 500; }

.mplc-card-actions[b-c27br0lq9y] {
    display: flex; align-items: center; gap: 6px; padding-top: 8px;
    border-top: 1px solid var(--d-line-2);
}
.mplc-card-btn[b-c27br0lq9y] {
    font-size: 12px; padding: 5px 10px;
    background: transparent; color: var(--d-accent);
    border: 1px solid var(--d-accent-soft); border-radius: 6px;
    cursor: pointer;
}
.mplc-card-btn:hover[b-c27br0lq9y] { background: var(--d-accent-soft); }
.mplc-card-actions .spacer[b-c27br0lq9y] { margin-left: auto; display: flex; gap: 4px; }
.mplc-card-icon-btn[b-c27br0lq9y] {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--d-line); background: transparent; border-radius: 6px;
    color: var(--d-ink-3); cursor: pointer;
}
.mplc-card-icon-btn:hover[b-c27br0lq9y] { background: var(--d-surface-2); color: var(--d-ink); }
.mplc-card-icon-btn.danger:hover[b-c27br0lq9y] { background: #fee2e2; color: var(--d-danger); border-color: #fecaca; }

/* Modal */
.mplc-modal-bd[b-c27br0lq9y] {
    position: fixed; inset: 0; background: rgba(15, 12, 10, .55);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 16px;
    isolation: isolate;
}
.mplc-modal[b-c27br0lq9y] {
    background: #ffffff; width: 100%; max-width: 560px;
    border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
    display: flex; flex-direction: column; max-height: calc(100vh - 32px);
}
.mplc-modal-hd[b-c27br0lq9y] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--d-line);
}
.mplc-modal-hd h3[b-c27br0lq9y] { margin: 0; font-size: 16px; font-weight: 600; }
.mplc-modal-close[b-c27br0lq9y] {
    background: transparent; border: 0; color: var(--d-ink-3); cursor: pointer;
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.mplc-modal-close:hover[b-c27br0lq9y] { background: var(--d-surface-2); color: var(--d-ink); }
.mplc-modal-bd-body[b-c27br0lq9y] { padding: 16px 18px; overflow-y: auto; flex: 1; }
.mplc-modal-ft[b-c27br0lq9y] {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--d-line);
}

.mplc-field[b-c27br0lq9y] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mplc-field label[b-c27br0lq9y] { font-size: 12px; color: var(--d-ink-2); font-weight: 500; }
.mplc-field .req[b-c27br0lq9y] { color: var(--d-danger); }

.mplc-input[b-c27br0lq9y], .mplc-select[b-c27br0lq9y] {
    width: 100%; box-sizing: border-box;
    height: 38px; padding: 0 12px; font-size: 14px;
    background: #ffffff; color: var(--d-ink);
    border: 1px solid var(--d-line); border-radius: 8px;
    outline: none; transition: border-color .15s;
    font-family: inherit;
}
.mplc-input:focus[b-c27br0lq9y], .mplc-select:focus[b-c27br0lq9y] { border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-accent-soft); }
.mplc-input.upper[b-c27br0lq9y] { text-transform: uppercase; }
.mplc-input.mono[b-c27br0lq9y] { font-family: 'JetBrains Mono', 'Consolas', monospace; letter-spacing: 0.04em; }

.mplc-form-grid-2[b-c27br0lq9y] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mplc-checkbox-row[b-c27br0lq9y] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; font-size: 14px; color: var(--d-ink-2); cursor: pointer;
}
.mplc-checkbox-row input[b-c27br0lq9y] { width: 16px; height: 16px; accent-color: var(--d-accent); }

.mplc-form-error[b-c27br0lq9y] {
    margin-top: 8px; padding: 8px 12px;
    background: #fee2e2; color: var(--d-danger);
    border-radius: 8px; font-size: 12px;
}

@media (max-width: 768px) {
    .mplc-root[b-c27br0lq9y] { padding: 14px 16px; }
    .mplc-hero[b-c27br0lq9y] { grid-template-columns: 1fr; }
    .mplc-hero-actions[b-c27br0lq9y] { width: 100%; }
    .mplc-form-grid-2[b-c27br0lq9y] { grid-template-columns: 1fr; }
}
/* /src/Features/Account/Pages/Manager/NotificationsPage.razor.rz.scp.css */
/* Notifications — Manager Dashboard v4 */
.np-root[b-fn02sfaj47] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg,#ea580c 0%,#f97316 55%,#fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f97316 100%);
    --d-good: #16a34a;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 20px 28px;
    display: flex; flex-direction: column; gap: 20px;
}

.np-hero[b-fn02sfaj47] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.np-hero h1[b-fn02sfaj47] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.np-hero h1 em[b-fn02sfaj47] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.np-hero-meta[b-fn02sfaj47] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.np-hero-meta .dot[b-fn02sfaj47] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.np-hero-actions[b-fn02sfaj47] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.np-btn[b-fn02sfaj47] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s; text-decoration: none; }
.np-btn:hover[b-fn02sfaj47] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.np-btn-accent[b-fn02sfaj47] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.np-btn-accent:hover[b-fn02sfaj47] { background: var(--d-accent-grad-hover); color: #fff; border-color: transparent; }
.np-btn:disabled[b-fn02sfaj47], .np-btn-accent:disabled[b-fn02sfaj47] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.np-tabs[b-fn02sfaj47] { display: inline-flex; padding: 3px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: var(--d-r); gap: 2px; }
.np-tab[b-fn02sfaj47] { height: 30px; padding: 0 14px; border: 0; background: transparent; font-size: 12.5px; font-weight: 500; color: var(--d-ink-3); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.np-tab:hover[b-fn02sfaj47] { color: var(--d-ink-2); }
.np-tab.is-active[b-fn02sfaj47] { background: var(--d-surface); color: var(--d-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.np-tab-count[b-fn02sfaj47] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent); }

.np-card[b-fn02sfaj47] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.np-list[b-fn02sfaj47] { display: flex; flex-direction: column; }
.np-item[b-fn02sfaj47] { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--d-line-2); cursor: pointer; transition: background .12s; }
.np-item:last-child[b-fn02sfaj47] { border-bottom: 0; }
.np-item:hover[b-fn02sfaj47] { background: var(--d-surface-2); }
.np-item.is-unread[b-fn02sfaj47] { background: #fffaf5; }
.np-item.is-unread:hover[b-fn02sfaj47] { background: #fff1e6; }
.np-dot[b-fn02sfaj47] { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--d-ink-4); }
.np-dot.is-unread[b-fn02sfaj47] { background: var(--d-accent-grad); }
.np-body[b-fn02sfaj47] { flex: 1; min-width: 0; }
.np-body-hd[b-fn02sfaj47] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.np-title[b-fn02sfaj47] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.np-time[b-fn02sfaj47] { font-size: 11.5px; color: var(--d-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.np-msg[b-fn02sfaj47] { margin: 4px 0 0; font-size: 12.5px; color: var(--d-ink-2); line-height: 1.45; }
.np-tag[b-fn02sfaj47] { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); background: var(--d-surface-2); border: 1px solid var(--d-line); padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }

.np-empty[b-fn02sfaj47] { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.np-empty svg[b-fn02sfaj47] { color: var(--d-ink-4); margin-bottom: 6px; }
.np-empty b[b-fn02sfaj47] { color: var(--d-ink); font-weight: 500; font-size: 14px; }

.np-loading[b-fn02sfaj47] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.np-more[b-fn02sfaj47] { display: flex; justify-content: center; }
/* /src/Features/Account/Pages/Manager/ProfilePage.razor.rz.scp.css */
/* Profile — Manager Dashboard v4 */
.prof-root[b-kss7lr5nf2] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg,#ea580c 0%,#f97316 55%,#fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg,#c2410c 0%,#ea580c 55%,#f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg,#fff1e6 0%,#ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 20px 28px;
    display: flex; flex-direction: column; gap: 20px;
}

.prof-hero[b-kss7lr5nf2] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.prof-hero h1[b-kss7lr5nf2] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.prof-hero h1 em[b-kss7lr5nf2] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.prof-hero-meta[b-kss7lr5nf2] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.prof-hero-meta .dot[b-kss7lr5nf2] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.prof-grid[b-kss7lr5nf2] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .prof-grid[b-kss7lr5nf2] { grid-template-columns: 2fr 1fr; } }

.prof-card[b-kss7lr5nf2] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.prof-card-hd[b-kss7lr5nf2] { padding: 14px 16px; border-bottom: 1px solid var(--d-line); }
.prof-card-hd h3[b-kss7lr5nf2] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.prof-card-bd[b-kss7lr5nf2] { padding: 16px; }

.prof-id[b-kss7lr5nf2] { display: flex; flex-direction: column; sm-flex-direction: row; gap: 16px; align-items: center; padding: 4px 0 12px; }
@media (min-width: 640px) { .prof-id[b-kss7lr5nf2] { flex-direction: row; align-items: flex-start; } }

.prof-avatar-wrap[b-kss7lr5nf2] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prof-avatar[b-kss7lr5nf2], .prof-avatar-fallback[b-kss7lr5nf2] { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid var(--d-line); }
.prof-avatar-fallback[b-kss7lr5nf2] { background: var(--d-accent-grad); color: #fff; font-family: 'Inter Tight',sans-serif; font-size: 28px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 0; box-shadow: 0 2px 8px rgba(234,88,12,0.25); }
.prof-avatar-overlay[b-kss7lr5nf2] { position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius: 50%; background: rgba(0,0,0,0.5); opacity: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .12s; color: #fff; }
.prof-avatar-wrap:hover .prof-avatar-overlay[b-kss7lr5nf2] { opacity: 1; }
.prof-avatar-link[b-kss7lr5nf2] { font-size: 11.5px; color: var(--d-accent); font-weight: 500; cursor: pointer; background: transparent; border: 0; padding: 0; }
.prof-avatar-link:hover[b-kss7lr5nf2] { text-decoration: underline; }
.prof-avatar-cancel[b-kss7lr5nf2] { font-size: 11px; color: var(--d-ink-3); cursor: pointer; background: transparent; border: 0; margin-top: 4px; }

.prof-id-info h2[b-kss7lr5nf2] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.prof-id-info p[b-kss7lr5nf2] { margin: 4px 0 0; font-size: 14px; color: var(--d-ink-3); }
.prof-uploading[b-kss7lr5nf2] { font-size: 11.5px; color: var(--d-accent); margin-top: 4px; }

.prof-alert[b-kss7lr5nf2] { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; line-height: 1.45; margin-bottom: 12px; border: 1px solid var(--d-line); background: var(--d-surface); }
.prof-alert.is-error[b-kss7lr5nf2] { background: var(--d-danger-soft); border-color: #fecaca; color: #991b1b; }
.prof-alert.is-success[b-kss7lr5nf2] { background: var(--d-good-soft); border-color: #bbf7d0; color: #14532d; }

.prof-company[b-kss7lr5nf2] { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: var(--d-r); margin-bottom: 16px; }
.prof-company-ico[b-kss7lr5nf2] { width: 38px; height: 38px; border-radius: 8px; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: flex; align-items: center; justify-content: center; font-family: 'Inter Tight', sans-serif; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.prof-company-info p[b-kss7lr5nf2] { margin: 0; }
.prof-company-name[b-kss7lr5nf2] { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.prof-company-meta[b-kss7lr5nf2] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.prof-company-meta .code[b-kss7lr5nf2] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--d-ink-2); }

.prof-form-row[b-kss7lr5nf2] { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
@media (min-width: 768px) { .prof-form-row.is-2col[b-kss7lr5nf2] { grid-template-columns: 1fr 1fr; } }

.prof-field[b-kss7lr5nf2] { display: flex; flex-direction: column; gap: 6px; }
.prof-label[b-kss7lr5nf2] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.prof-label .req[b-kss7lr5nf2] { color: var(--d-danger); margin-left: 2px; }
.prof-input[b-kss7lr5nf2] { width: 100%; height: 38px; padding: 0 12px; font-size: 14px; color: var(--d-ink); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); outline: 0; transition: border-color .12s, box-shadow .12s; }
.prof-input:focus[b-kss7lr5nf2] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.prof-input:disabled[b-kss7lr5nf2] { background: var(--d-surface-2); color: var(--d-ink-3); cursor: not-allowed; pointer-events: none; }
.prof-hint[b-kss7lr5nf2] { font-size: 11px; color: var(--d-ink-3); margin: 0; }
.prof-vmsg[b-kss7lr5nf2] { color: var(--d-danger); font-size: 11.5px; margin: 2px 0 0; }

.prof-actions[b-kss7lr5nf2] { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.prof-btn[b-kss7lr5nf2] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s; text-decoration: none; }
.prof-btn:hover[b-kss7lr5nf2] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.prof-btn-accent[b-kss7lr5nf2] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.prof-btn-accent:hover[b-kss7lr5nf2] { background: var(--d-accent-grad-hover); color: #fff; border-color: transparent; }
.prof-btn:disabled[b-kss7lr5nf2], .prof-btn-accent:disabled[b-kss7lr5nf2] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.prof-qa-list[b-kss7lr5nf2] { display: flex; flex-direction: column; }
.prof-qa[b-kss7lr5nf2] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); text-decoration: none; color: var(--d-ink); transition: background .12s; }
.prof-qa:last-child[b-kss7lr5nf2] { border-bottom: 0; }
.prof-qa:hover[b-kss7lr5nf2] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.prof-qa-l[b-kss7lr5nf2] { display: flex; align-items: center; gap: 12px; }
.prof-qa-ico[b-kss7lr5nf2] { width: 32px; height: 32px; border-radius: 8px; background: var(--d-surface-2); border: 1px solid var(--d-line); color: var(--d-ink-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.prof-qa-name[b-kss7lr5nf2] { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.prof-qa-desc[b-kss7lr5nf2] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.prof-qa-arrow[b-kss7lr5nf2] { color: var(--d-ink-4); }
/* /src/Features/Auth/Pages/Auth/ForcePasswordChange.razor.rz.scp.css */
/* ForcePasswordChange — cùng recipe với ResetPassword (token-only theo tokens.css SSOT). */
.auth-force-root[b-o6wfmen1po] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ---- Header: icon + tiêu đề nằm NGANG để tiết kiệm chiều cao (xem chú thích .razor) ---- */
.auth-force-brand[b-o6wfmen1po] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.auth-force-brand .ico[b-o6wfmen1po] {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    color: var(--nm-brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-force-brand h1[b-o6wfmen1po] { margin: 0; min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--nm-ink); }

/* ---- Vì sao bị chặn ---- */
.auth-force-notice[b-o6wfmen1po] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-warn-soft);
    border: 1px solid var(--nm-warn);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}
.auth-force-notice .ic[b-o6wfmen1po] { flex-shrink: 0; margin-top: 2px; color: var(--nm-warn); }

/* ---- Alert lỗi ---- */
.auth-force-alert[b-o6wfmen1po] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}
.auth-force-alert.is-error[b-o6wfmen1po] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.auth-force-alert.is-error .ic[b-o6wfmen1po] { color: var(--nm-bad); }
.auth-force-alert .ic[b-o6wfmen1po] { flex-shrink: 0; margin-top: 2px; }

/* ---- Field ---- */
.auth-force-field[b-o6wfmen1po] { margin-bottom: 12px; }

.auth-force-label[b-o6wfmen1po] {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.auth-force-input-wrap[b-o6wfmen1po] { position: relative; width: 100%; }

/* Input dựng trực tiếp trong page (không qua child component) nên KHÔNG cần ::deep. */
input.auth-force-input[b-o6wfmen1po] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    min-width: 0;
    /* chừa chỗ bên phải cho nút mắt (+ dấu tích khớp ở ô xác nhận) */
    padding: 0 44px 0 14px;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

input.auth-force-input[b-o6wfmen1po]::placeholder { color: var(--nm-muted); }
input.auth-force-input:hover:not(:disabled):not(:focus)[b-o6wfmen1po] { border-color: var(--nm-ink-2); }

input.auth-force-input:focus[b-o6wfmen1po] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

input.auth-force-input:-webkit-autofill[b-o6wfmen1po],
input.auth-force-input:-webkit-autofill:hover[b-o6wfmen1po],
input.auth-force-input:-webkit-autofill:focus[b-o6wfmen1po] {
    -webkit-text-fill-color: var(--nm-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    caret-color: var(--nm-ink);
    transition: background-color 9999s ease-in-out 0s;
}

/* ---- Nút ẩn/hiện mật khẩu (recipe giống ô mật khẩu ở /login) ---- */
.auth-force-eye[b-o6wfmen1po] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--nm-muted);
    border-radius: var(--nm-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.auth-force-eye:hover[b-o6wfmen1po] { background: var(--nm-surface-2); color: var(--nm-ink-2); }
.auth-force-eye:focus-visible[b-o6wfmen1po] { outline: 2px solid var(--nm-brand-300); outline-offset: 1px; }

/* Dấu tích "khớp mật khẩu" — nằm SÁT TRÁI nút mắt, không chồng lên nhau. */
.auth-force-match[b-o6wfmen1po] {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--nm-ok);
    pointer-events: none;
}

/* ô xác nhận có thêm dấu tích ⇒ chừa rộng hơn */
.auth-force-field:has(.auth-force-match) input.auth-force-input[b-o6wfmen1po] { padding-right: 66px; }

.auth-force-err[b-o6wfmen1po] { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--nm-bad); }

/* ---- Danh sách điều kiện mật khẩu (2 cột cho gọn khoang form) ---- */
.auth-force-checks[b-o6wfmen1po] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 12px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.auth-force-check[b-o6wfmen1po] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--nm-muted);
}

.auth-force-check.is-ok[b-o6wfmen1po] { color: var(--nm-ok); }
.auth-force-check svg[b-o6wfmen1po] { flex-shrink: 0; }

@media (max-width: 420px) {
    .auth-force-checks[b-o6wfmen1po] { grid-template-columns: 1fr; }
}

/* ---- Nút chính (recipe NmButton primary/lg) ---- */
.auth-force-submit[b-o6wfmen1po] {
    width: 100%;
    height: 42px;
    margin-top: 4px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-family: var(--nm-font);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

.auth-force-submit:hover:not(:disabled)[b-o6wfmen1po] { background: var(--nm-brand-600); }
.auth-force-submit:focus-visible[b-o6wfmen1po] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; }
.auth-force-submit:disabled[b-o6wfmen1po] { opacity: .6; cursor: not-allowed; }
.auth-force-submit .sp[b-o6wfmen1po] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--nm-r-pill); animation: auth-force-spin-b-o6wfmen1po .6s linear infinite; }

@keyframes auth-force-spin-b-o6wfmen1po { to { transform: rotate(360deg); } }

/* ---- Lối thoát duy nhất: đăng xuất ---- */
.auth-force-foot[b-o6wfmen1po] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--nm-muted);
}

.auth-force-logout[b-o6wfmen1po] {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--nm-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-brand-600);
    cursor: pointer;
}

.auth-force-logout:hover[b-o6wfmen1po] { text-decoration: underline; }

/* ---- Nhịp vào trang: theo sau card của AuthLayout ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-force-brand[b-o6wfmen1po] { animation: auth-force-in-b-o6wfmen1po .45s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .auth-force-notice[b-o6wfmen1po] { animation: auth-force-in-b-o6wfmen1po .45s cubic-bezier(.16, 1, .3, 1) .12s both; }
    .auth-force-root[b-o6wfmen1po]  form { animation: auth-force-in-b-o6wfmen1po .45s cubic-bezier(.16, 1, .3, 1) .16s both; }
    .auth-force-foot[b-o6wfmen1po] { animation: auth-force-in-b-o6wfmen1po .45s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes auth-force-in-b-o6wfmen1po {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* /src/Features/Auth/Pages/Auth/ForgotPassword.razor.rz.scp.css */
/* ForgotPassword — token-only theo tokens.css SSOT, đồng bộ recipe với Login. */
.auth-forgot-root[b-8q4cawn0ta] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ---- Header (icon tile + tiêu đề) ---- */
.auth-forgot-brand[b-8q4cawn0ta] { margin-bottom: 22px; }
.auth-forgot-brand .ico[b-8q4cawn0ta] {
    width: 44px;
    height: 44px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    color: var(--nm-brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.auth-forgot-brand h1[b-8q4cawn0ta] { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--nm-ink); }
.auth-forgot-brand p[b-8q4cawn0ta] { margin: 0; font-size: 14px; color: var(--nm-muted); line-height: 1.5; }

/* ---- Alert (recipe NmAlert) ---- */
.auth-forgot-alert[b-8q4cawn0ta] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}

.auth-forgot-alert.is-error[b-8q4cawn0ta] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.auth-forgot-alert.is-error .ic[b-8q4cawn0ta] { color: var(--nm-bad); }
.auth-forgot-alert .ic[b-8q4cawn0ta] { flex-shrink: 0; margin-top: 2px; }

/* ---- Success (đã gửi email) ---- */
.auth-forgot-success[b-8q4cawn0ta] { text-align: center; padding: 8px 0 18px; }
.auth-forgot-success .ico[b-8q4cawn0ta] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nm-ok-soft);
    color: var(--nm-ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.auth-forgot-success .title[b-8q4cawn0ta] { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--nm-ink); }
.auth-forgot-success .detail[b-8q4cawn0ta] { margin: 0; font-size: 13.5px; color: var(--nm-muted); line-height: 1.55; }

/* ---- Field ---- */
.auth-forgot-field[b-8q4cawn0ta] { margin-bottom: 16px; }

.auth-forgot-label[b-8q4cawn0ta] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

/* ---- Input (recipe NmInput) — ::deep vì <InputText> là child component ---- */
.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 14px;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input::placeholder { color: var(--nm-muted); }
.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:hover:not(:disabled):not(:focus) { border-color: var(--nm-ink-2); }

.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:focus {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:disabled {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input.invalid {
    border-color: var(--nm-bad) !important;
    box-shadow: 0 0 0 3px var(--nm-bad-soft) !important;
    outline: 0 !important;
}

.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input.valid.modified:not([type=checkbox]) {
    outline: 0 !important;
}

.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:-webkit-autofill,
.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:-webkit-autofill:hover,
.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:-webkit-autofill:focus,
.auth-forgot-root[b-8q4cawn0ta]  input.auth-forgot-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--nm-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    caret-color: var(--nm-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-forgot-err[b-8q4cawn0ta] { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--nm-bad); }

/* ---- Nút gửi / link về đăng nhập dạng nút (recipe NmButton primary/lg) ---- */
.auth-forgot-submit[b-8q4cawn0ta] {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-family: var(--nm-font);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, opacity .15s ease;
}

.auth-forgot-submit:hover:not(:disabled)[b-8q4cawn0ta] { background: var(--nm-brand-600); color: var(--nm-on-brand); }
.auth-forgot-submit:active:not(:disabled)[b-8q4cawn0ta] { transform: translateY(1px); }
.auth-forgot-submit:focus-visible[b-8q4cawn0ta] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; }
.auth-forgot-submit:disabled[b-8q4cawn0ta] { opacity: .6; cursor: not-allowed; }
.auth-forgot-submit .sp[b-8q4cawn0ta] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--nm-r-pill); animation: auth-forgot-spin-b-8q4cawn0ta .6s linear infinite; }

@keyframes auth-forgot-spin-b-8q4cawn0ta { to { transform: rotate(360deg); } }

/* ---- Quay lại đăng nhập ---- */
.auth-forgot-back-row[b-8q4cawn0ta] { margin-top: 18px; text-align: center; }

.auth-forgot-back[b-8q4cawn0ta] {
    font-size: 13px;
    color: var(--nm-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-forgot-back:hover[b-8q4cawn0ta] { color: var(--nm-brand-600); }

/* ---- Nhịp vào trang: 3 khối so le, theo sau card của AuthLayout ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-forgot-brand[b-8q4cawn0ta] { animation: auth-forgot-in-b-8q4cawn0ta .45s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .auth-forgot-root[b-8q4cawn0ta]  form,
    .auth-forgot-success[b-8q4cawn0ta],
    a.auth-forgot-submit[b-8q4cawn0ta] { animation: auth-forgot-in-b-8q4cawn0ta .45s cubic-bezier(.16, 1, .3, 1) .16s both; }
    .auth-forgot-back-row[b-8q4cawn0ta] { animation: auth-forgot-in-b-8q4cawn0ta .45s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes auth-forgot-in-b-8q4cawn0ta {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* /src/Features/Auth/Pages/Auth/Login.razor.rz.scp.css */
/* Login — token-only theo tokens.css SSOT.
   Input/nút/label/alert bám đúng recipe NmInput/NmButton/NmField/NmAlert
   (giữ InputText + EditForm nên không dùng thẳng primitive được). */
.auth-login-root[b-da9l4jo2ey] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 440px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ---- Trạng thái đang kiểm tra phiên ---- */
.auth-login-loading[b-da9l4jo2ey] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 0;
    min-height: 440px;
}

.auth-login-loading .spin[b-da9l4jo2ey] { position: relative; width: 36px; height: 36px; }
.auth-login-loading .ring[b-da9l4jo2ey] { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--nm-brand-100); }
.auth-login-loading .arc[b-da9l4jo2ey] { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--nm-brand-500); animation: auth-spin-b-da9l4jo2ey 1s linear infinite; }
.auth-login-loading p[b-da9l4jo2ey] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

@keyframes auth-spin-b-da9l4jo2ey { to { transform: rotate(360deg); } }

/* ---- Header form ---- */
.auth-login-brand[b-da9l4jo2ey] { margin-bottom: 24px; }
.auth-login-brand h1[b-da9l4jo2ey] { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--nm-ink); }
.auth-login-brand p[b-da9l4jo2ey] { margin: 0; font-size: 14px; color: var(--nm-muted); }

/* ---- Alert (recipe NmAlert) ---- */
.auth-login-alert[b-da9l4jo2ey] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}

.auth-login-alert.is-error[b-da9l4jo2ey] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.auth-login-alert.is-error .ic[b-da9l4jo2ey] { color: var(--nm-bad); }
.auth-login-alert.is-warn[b-da9l4jo2ey] { background: var(--nm-warn-soft); border-color: var(--nm-warn); }
.auth-login-alert.is-warn .ic[b-da9l4jo2ey] { color: var(--nm-warn); }
.auth-login-alert.is-ok[b-da9l4jo2ey] { background: var(--nm-ok-soft); border-color: var(--nm-ok); }
.auth-login-alert.is-ok .ic[b-da9l4jo2ey] { color: var(--nm-ok); }
.auth-login-alert .ic[b-da9l4jo2ey] { flex-shrink: 0; margin-top: 2px; }

/* ---- Trạng thái chờ phê duyệt thiết bị khác ---- */
.auth-login-pending[b-da9l4jo2ey] { text-align: center; margin-bottom: 18px; }
.auth-login-pending .ico-wrap[b-da9l4jo2ey] { width: 56px; height: 56px; border-radius: var(--nm-r-input); background: var(--nm-brand-50); border: 1px solid var(--nm-brand-100); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; position: relative; }
.auth-login-pending .ico-wrap .ring[b-da9l4jo2ey] { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--nm-brand-100); }
.auth-login-pending .ico-wrap .arc[b-da9l4jo2ey] { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--nm-brand-500); animation: auth-spin-b-da9l4jo2ey 1s linear infinite; }
.auth-login-pending h2[b-da9l4jo2ey] { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--nm-ink); }
.auth-login-pending p[b-da9l4jo2ey] { margin: 0; font-size: 14px; color: var(--nm-muted); line-height: 1.5; }

.auth-login-countdown[b-da9l4jo2ey] { background: var(--nm-brand-50); border: 1px solid var(--nm-brand-100); border-radius: var(--nm-r-input); padding: 14px; text-align: center; margin-bottom: 16px; }
.auth-login-countdown .lbl[b-da9l4jo2ey] { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nm-brand-600); }
.auth-login-countdown .val[b-da9l4jo2ey] { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--nm-brand-600); font-variant-numeric: tabular-nums; }
.auth-login-countdown .val small[b-da9l4jo2ey] { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--nm-muted); }

/* ---- Field (label theo NmField) ---- */
.auth-login-field[b-da9l4jo2ey] { margin-bottom: 16px; }

.auth-login-field-row[b-da9l4jo2ey] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.auth-login-label[b-da9l4jo2ey] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.auth-login-field-row .auth-login-label[b-da9l4jo2ey] { margin-bottom: 0; }

.auth-login-link[b-da9l4jo2ey] {
    font-size: 12.5px;
    color: var(--nm-brand-600);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-login-link:hover[b-da9l4jo2ey] { color: var(--nm-brand-700); text-decoration: underline; }

/* ---- Input (recipe NmInput) ---- */
.auth-login-input-wrap[b-da9l4jo2ey] {
    position: relative;
    width: 100%;
}

.auth-login-input-wrap .lead[b-da9l4jo2ey] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nm-muted);
    pointer-events: none;
    transition: color .15s ease;
    z-index: 1;
}

.auth-login-input-wrap:focus-within .lead[b-da9l4jo2ey] { color: var(--nm-brand-500); }

/* `::deep` bắt buộc vì <InputText> là child component — Blazor không gắn
   scope identifier của component này lên markup do child render. */
.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 14px 0 38px;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input.has-trail { padding-right: 44px; }
.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input::placeholder { color: var(--nm-muted); }
.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:hover:not(:disabled):not(:focus) { border-color: var(--nm-ink-2); }

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:focus {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:disabled {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input.invalid {
    border-color: var(--nm-bad) !important;
    box-shadow: 0 0 0 3px var(--nm-bad-soft) !important;
    outline: 0 !important;
}

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input.valid.modified:not([type=checkbox]) {
    outline: 0 !important;
}

.auth-login-eye[b-da9l4jo2ey] {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--nm-muted);
    border-radius: var(--nm-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.auth-login-eye:hover[b-da9l4jo2ey] {
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

.auth-login-eye:focus-visible[b-da9l4jo2ey] {
    outline: 2px solid var(--nm-brand-300);
    outline-offset: 1px;
}

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:-webkit-autofill,
.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:-webkit-autofill:hover,
.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:-webkit-autofill:focus,
.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--nm-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    caret-color: var(--nm-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-login-input-wrap[b-da9l4jo2ey]  input.auth-login-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset, 0 0 0 3px var(--nm-brand-50) !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset, 0 0 0 3px var(--nm-brand-50) !important;
    border-color: var(--nm-brand-500) !important;
}

.auth-login-err[b-da9l4jo2ey] { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--nm-bad); }

/* ---- Nút đăng nhập (recipe NmButton primary/lg) ---- */
.auth-login-submit[b-da9l4jo2ey] {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-family: var(--nm-font);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

.auth-login-submit:hover:not(:disabled)[b-da9l4jo2ey] { background: var(--nm-brand-600); }
.auth-login-submit:active:not(:disabled)[b-da9l4jo2ey] { transform: translateY(1px); }
.auth-login-submit:focus-visible[b-da9l4jo2ey] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; }
.auth-login-submit:disabled[b-da9l4jo2ey] { opacity: .6; cursor: not-allowed; }
.auth-login-submit .sp[b-da9l4jo2ey] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--nm-r-pill); animation: auth-spin-b-da9l4jo2ey .6s linear infinite; }

/* ---- Nút hủy chờ phê duyệt (recipe NmButton secondary) ---- */
.auth-login-cancel[b-da9l4jo2ey] {
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border-radius: var(--nm-r-input);
    border: 1px solid var(--nm-border-strong);
    background: var(--nm-surface);
    color: var(--nm-ink);
    font-family: var(--nm-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.auth-login-cancel:hover[b-da9l4jo2ey] { background: var(--nm-surface-2); }

/* ---- Footer ---- */
.auth-login-foot[b-da9l4jo2ey] {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--nm-border);
}

.auth-login-foot p[b-da9l4jo2ey] { margin: 0; font-size: 13.5px; color: var(--nm-muted); }
.auth-login-foot a.cta[b-da9l4jo2ey] { font-weight: 600; color: var(--nm-brand-600); text-decoration: none; transition: color .15s ease; }
.auth-login-foot a.cta:hover[b-da9l4jo2ey] { color: var(--nm-brand-700); text-decoration: underline; }

/* ---- Nhịp vào trang: 3 khối so le, theo sau card của AuthLayout ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-login-brand[b-da9l4jo2ey] { animation: auth-login-in-b-da9l4jo2ey .45s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .auth-login-root[b-da9l4jo2ey]  form { animation: auth-login-in-b-da9l4jo2ey .45s cubic-bezier(.16, 1, .3, 1) .16s both; }
    .auth-login-foot[b-da9l4jo2ey] { animation: auth-login-in-b-da9l4jo2ey .45s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes auth-login-in-b-da9l4jo2ey {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .auth-login-field-row[b-da9l4jo2ey] {
        align-items: baseline;
        gap: 10px;
    }
}
/* /src/Features/Auth/Pages/Auth/Register.razor.rz.scp.css */
/* Register — token-only theo tokens.css SSOT, đồng bộ recipe với Login.
   Input/nút/label/alert bám NmInput/NmButton/NmField/NmAlert (giữ InputText
   + EditForm nên cần ::deep cho markup do child component render). */
.auth-register-root[b-jbaym2vbj8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ---- Header form ---- */
.auth-register-brand[b-jbaym2vbj8] { margin-bottom: 22px; }
.auth-register-brand h1[b-jbaym2vbj8] { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--nm-ink); }
.auth-register-brand p[b-jbaym2vbj8] { margin: 0; font-size: 14px; color: var(--nm-muted); line-height: 1.5; }

/* ---- Alert (recipe NmAlert) ---- */
.auth-register-alert[b-jbaym2vbj8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}

.auth-register-alert.is-error[b-jbaym2vbj8] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.auth-register-alert.is-error .ic[b-jbaym2vbj8] { color: var(--nm-bad); }
.auth-register-alert .ic[b-jbaym2vbj8] { flex-shrink: 0; margin-top: 2px; }

/* ---- Success ---- */
.auth-register-success[b-jbaym2vbj8] { text-align: center; padding: 8px 0; }
.auth-register-success .ico[b-jbaym2vbj8] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nm-ok-soft);
    color: var(--nm-ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.auth-register-success .title[b-jbaym2vbj8] { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--nm-ink); }
.auth-register-success .detail[b-jbaym2vbj8] { margin: 0 0 16px; font-size: 13.5px; color: var(--nm-muted); line-height: 1.55; }
.auth-register-success .cta[b-jbaym2vbj8] { font-size: 14px; font-weight: 600; color: var(--nm-brand-600); text-decoration: none; transition: color .15s ease; }
.auth-register-success .cta:hover[b-jbaym2vbj8] { color: var(--nm-brand-700); text-decoration: underline; }

/* ---- Field ---- */
.auth-register-grid2[b-jbaym2vbj8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 420px) {
    .auth-register-grid2[b-jbaym2vbj8] { grid-template-columns: 1fr; gap: 16px; }
}

.auth-register-field[b-jbaym2vbj8] { margin-bottom: 16px; }

.auth-register-label[b-jbaym2vbj8] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.auth-register-label .req[b-jbaym2vbj8] { color: var(--nm-bad); }

/* ---- Input (recipe NmInput) — ::deep vì <InputText> là child component ---- */
.auth-register-root[b-jbaym2vbj8]  input.auth-register-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 14px;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input::placeholder { color: var(--nm-muted); }
.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:hover:not(:disabled):not(:focus) { border-color: var(--nm-ink-2); }

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:focus {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:disabled {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input.invalid {
    border-color: var(--nm-bad) !important;
    box-shadow: 0 0 0 3px var(--nm-bad-soft) !important;
    outline: 0 !important;
}

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input.valid.modified:not([type=checkbox]) {
    outline: 0 !important;
}

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:-webkit-autofill,
.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:-webkit-autofill:hover,
.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:-webkit-autofill:focus,
.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--nm-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    caret-color: var(--nm-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-register-root[b-jbaym2vbj8]  input.auth-register-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset, 0 0 0 3px var(--nm-brand-50) !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset, 0 0 0 3px var(--nm-brand-50) !important;
    border-color: var(--nm-brand-500) !important;
}

.auth-register-err[b-jbaym2vbj8] { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--nm-bad); }

/* ---- Nút đăng ký (recipe NmButton primary/lg) ---- */
.auth-register-submit[b-jbaym2vbj8] {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-family: var(--nm-font);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

.auth-register-submit:hover:not(:disabled)[b-jbaym2vbj8] { background: var(--nm-brand-600); }
.auth-register-submit:active:not(:disabled)[b-jbaym2vbj8] { transform: translateY(1px); }
.auth-register-submit:focus-visible[b-jbaym2vbj8] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; }
.auth-register-submit:disabled[b-jbaym2vbj8] { opacity: .6; cursor: not-allowed; }
.auth-register-submit .sp[b-jbaym2vbj8] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--nm-r-pill); animation: auth-register-spin-b-jbaym2vbj8 .6s linear infinite; }

@keyframes auth-register-spin-b-jbaym2vbj8 { to { transform: rotate(360deg); } }

/* ---- Footer ---- */
.auth-register-foot[b-jbaym2vbj8] {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--nm-border);
}

.auth-register-foot p[b-jbaym2vbj8] { margin: 0; font-size: 13.5px; color: var(--nm-muted); }
.auth-register-foot a.cta[b-jbaym2vbj8] { font-weight: 600; color: var(--nm-brand-600); text-decoration: none; transition: color .15s ease; }
.auth-register-foot a.cta:hover[b-jbaym2vbj8] { color: var(--nm-brand-700); text-decoration: underline; }

/* ---- Nhịp vào trang: 3 khối so le, theo sau card của AuthLayout ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-register-brand[b-jbaym2vbj8] { animation: auth-register-in-b-jbaym2vbj8 .45s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .auth-register-root[b-jbaym2vbj8]  form,
    .auth-register-success[b-jbaym2vbj8] { animation: auth-register-in-b-jbaym2vbj8 .45s cubic-bezier(.16, 1, .3, 1) .16s both; }
    .auth-register-foot[b-jbaym2vbj8] { animation: auth-register-in-b-jbaym2vbj8 .45s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes auth-register-in-b-jbaym2vbj8 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* /src/Features/Auth/Pages/Auth/ResetPassword.razor.rz.scp.css */
/* ResetPassword — token-only theo tokens.css SSOT, đồng bộ recipe với Login. */
.auth-reset-root[b-rponwi05o4] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ---- Header (icon tile + tiêu đề) ---- */
.auth-reset-brand[b-rponwi05o4] { margin-bottom: 22px; }
.auth-reset-brand .ico[b-rponwi05o4] {
    width: 44px;
    height: 44px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    color: var(--nm-brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.auth-reset-brand h1[b-rponwi05o4] { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--nm-ink); }
.auth-reset-brand p[b-rponwi05o4] { margin: 0; font-size: 14px; color: var(--nm-muted); line-height: 1.5; }

/* ---- Alert (recipe NmAlert) ---- */
.auth-reset-alert[b-rponwi05o4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}

.auth-reset-alert.is-error[b-rponwi05o4] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.auth-reset-alert.is-error .ic[b-rponwi05o4] { color: var(--nm-bad); }
.auth-reset-alert .ic[b-rponwi05o4] { flex-shrink: 0; margin-top: 2px; }

/* ---- Success (đã đổi mật khẩu) ---- */
.auth-reset-success[b-rponwi05o4] { text-align: center; padding: 8px 0 18px; }
.auth-reset-success .ico[b-rponwi05o4] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nm-ok-soft);
    color: var(--nm-ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.auth-reset-success .title[b-rponwi05o4] { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--nm-ink); }
.auth-reset-success .detail[b-rponwi05o4] { margin: 0; font-size: 13.5px; color: var(--nm-muted); line-height: 1.55; }

/* ---- Field ---- */
.auth-reset-field[b-rponwi05o4] { margin-bottom: 16px; }

.auth-reset-label[b-rponwi05o4] {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

/* ---- Input (recipe NmInput) — ::deep vì <InputText> là child component ---- */
.auth-reset-root[b-rponwi05o4]  input.auth-reset-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-width: 0;
    padding: 0 14px;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-reset-root[b-rponwi05o4]  input.auth-reset-input::placeholder { color: var(--nm-muted); }
.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:hover:not(:disabled):not(:focus) { border-color: var(--nm-ink-2); }

.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:focus {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:disabled {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.auth-reset-root[b-rponwi05o4]  input.auth-reset-input.invalid {
    border-color: var(--nm-bad) !important;
    box-shadow: 0 0 0 3px var(--nm-bad-soft) !important;
    outline: 0 !important;
}

.auth-reset-root[b-rponwi05o4]  input.auth-reset-input.valid.modified:not([type=checkbox]) {
    outline: 0 !important;
}

.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:-webkit-autofill,
.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:-webkit-autofill:hover,
.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:-webkit-autofill:focus,
.auth-reset-root[b-rponwi05o4]  input.auth-reset-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--nm-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--nm-surface) inset !important;
    caret-color: var(--nm-ink);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-reset-err[b-rponwi05o4] { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--nm-bad); }

/* ---- Nút đổi mật khẩu / link về đăng nhập dạng nút (recipe NmButton primary/lg) ---- */
.auth-reset-submit[b-rponwi05o4] {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-family: var(--nm-font);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, opacity .15s ease;
}

.auth-reset-submit:hover:not(:disabled)[b-rponwi05o4] { background: var(--nm-brand-600); color: var(--nm-on-brand); }
.auth-reset-submit:active:not(:disabled)[b-rponwi05o4] { transform: translateY(1px); }
.auth-reset-submit:focus-visible[b-rponwi05o4] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; }
.auth-reset-submit:disabled[b-rponwi05o4] { opacity: .6; cursor: not-allowed; }
.auth-reset-submit .sp[b-rponwi05o4] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--nm-r-pill); animation: auth-reset-spin-b-rponwi05o4 .6s linear infinite; }

@keyframes auth-reset-spin-b-rponwi05o4 { to { transform: rotate(360deg); } }

/* ---- Quay lại đăng nhập ---- */
.auth-reset-back-row[b-rponwi05o4] { margin-top: 18px; text-align: center; }

.auth-reset-back[b-rponwi05o4] {
    font-size: 13px;
    color: var(--nm-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-reset-back:hover[b-rponwi05o4] { color: var(--nm-brand-600); }

/* ---- Nhịp vào trang: 3 khối so le, theo sau card của AuthLayout ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-reset-brand[b-rponwi05o4] { animation: auth-reset-in-b-rponwi05o4 .45s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .auth-reset-root[b-rponwi05o4]  form,
    .auth-reset-success[b-rponwi05o4],
    a.auth-reset-submit[b-rponwi05o4] { animation: auth-reset-in-b-rponwi05o4 .45s cubic-bezier(.16, 1, .3, 1) .16s both; }
    .auth-reset-back-row[b-rponwi05o4] { animation: auth-reset-in-b-rponwi05o4 .45s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes auth-reset-in-b-rponwi05o4 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* /src/Features/Auth/Pages/Auth/SetPaymentPassword.razor.rz.scp.css */
/* SetPaymentPassword — cùng recipe với ForcePasswordChange (token-only theo tokens.css SSOT). */
.auth-pin-root[b-0pshdc7cq5] {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ---- Header: icon + tiêu đề nằm NGANG để tiết kiệm chiều cao ---- */
.auth-pin-brand[b-0pshdc7cq5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.auth-pin-brand .ico[b-0pshdc7cq5] {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    color: var(--nm-brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.auth-pin-brand h1[b-0pshdc7cq5] { margin: 0; min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--nm-ink); }

/* ---- Vì sao bị chặn ---- */
.auth-pin-notice[b-0pshdc7cq5] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-warn-soft);
    border: 1px solid var(--nm-warn);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}
.auth-pin-notice .ic[b-0pshdc7cq5] { flex-shrink: 0; margin-top: 2px; color: var(--nm-warn); }

/* ---- Alert lỗi ---- */
.auth-pin-alert[b-0pshdc7cq5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}
.auth-pin-alert.is-error[b-0pshdc7cq5] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.auth-pin-alert.is-error .ic[b-0pshdc7cq5] { color: var(--nm-bad); }
.auth-pin-alert .ic[b-0pshdc7cq5] { flex-shrink: 0; margin-top: 2px; }

/* ---- Field ---- */
.auth-pin-field[b-0pshdc7cq5] { margin-bottom: 14px; }

.auth-pin-label[b-0pshdc7cq5] {
    display: block;
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.auth-pin-err[b-0pshdc7cq5] { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--nm-bad); }

/* ---- Điều kiện của mã ---- */
.auth-pin-checks[b-0pshdc7cq5] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.auth-pin-check[b-0pshdc7cq5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--nm-muted);
}

.auth-pin-check.is-ok[b-0pshdc7cq5] { color: var(--nm-ok); }
.auth-pin-check svg[b-0pshdc7cq5] { flex-shrink: 0; }

/* ---- Nhắc bảo mật ---- */
.auth-pin-tip[b-0pshdc7cq5] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nm-muted);
}
.auth-pin-tip svg[b-0pshdc7cq5] { flex-shrink: 0; margin-top: 2px; }

/* ---- Nút chính (recipe NmButton primary/lg) ---- */
.auth-pin-submit[b-0pshdc7cq5] {
    width: 100%;
    height: 42px;
    margin-top: 4px;
    padding: 0 18px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-family: var(--nm-font);
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}

.auth-pin-submit:hover:not(:disabled)[b-0pshdc7cq5] { background: var(--nm-brand-600); }
.auth-pin-submit:focus-visible[b-0pshdc7cq5] { outline: 2px solid var(--nm-brand-300); outline-offset: 2px; }
.auth-pin-submit:disabled[b-0pshdc7cq5] { opacity: .6; cursor: not-allowed; }
.auth-pin-submit .sp[b-0pshdc7cq5] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--nm-r-pill); animation: auth-pin-spin-b-0pshdc7cq5 .6s linear infinite; }

@keyframes auth-pin-spin-b-0pshdc7cq5 { to { transform: rotate(360deg); } }

/* ---- Lối thoát duy nhất: đăng xuất ---- */
.auth-pin-foot[b-0pshdc7cq5] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--nm-muted);
}

.auth-pin-logout[b-0pshdc7cq5] {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--nm-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-brand-600);
    cursor: pointer;
}

.auth-pin-logout:hover[b-0pshdc7cq5] { text-decoration: underline; }

/* ---- Nhịp vào trang: theo sau card của AuthLayout ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-pin-brand[b-0pshdc7cq5] { animation: auth-pin-in-b-0pshdc7cq5 .45s cubic-bezier(.16, 1, .3, 1) .08s both; }
    .auth-pin-notice[b-0pshdc7cq5] { animation: auth-pin-in-b-0pshdc7cq5 .45s cubic-bezier(.16, 1, .3, 1) .12s both; }
    .auth-pin-root[b-0pshdc7cq5]  form { animation: auth-pin-in-b-0pshdc7cq5 .45s cubic-bezier(.16, 1, .3, 1) .16s both; }
    .auth-pin-foot[b-0pshdc7cq5] { animation: auth-pin-in-b-0pshdc7cq5 .45s cubic-bezier(.16, 1, .3, 1) .24s both; }
}

@keyframes auth-pin-in-b-0pshdc7cq5 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
/* /src/Features/Bookings/Pages/Ca/CaBookingDetail.razor.rz.scp.css */
/* /ca/bookings/{id} — chuẩn nm token-only: head + shell 2 cột (main | side) + card dịch vụ theo loại. */
.nm-list-page[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-q864enoikt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-q864enoikt] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cabkd-title[b-q864enoikt] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-q864enoikt] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-q864enoikt] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cabkd-crumb[b-q864enoikt] { color: var(--nm-muted); text-decoration: none; }
.cabkd-crumb:hover[b-q864enoikt] { color: var(--nm-brand-700); text-decoration: underline; }
.cabkd-crumb-sep[b-q864enoikt] { margin: 0 4px; color: var(--nm-muted); }

.nm-code-pill[b-q864enoikt] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cabkd-svc-chip[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
}
.cabkd-svc-chip i[b-q864enoikt] { color: var(--nm-brand-600, var(--nm-brand-500)); font-size: 12px; }

.cabkd-loading[b-q864enoikt] { display: flex; flex-direction: column; gap: 12px; }

/* Badge Issuing pulse — Class truyền vào NmBadge không nhận page scope → ::deep */
[b-q864enoikt] .cabkd-pulse { animation: cabkd-pulse-b-q864enoikt 1.6s ease-in-out infinite; }
@keyframes cabkd-pulse-b-q864enoikt { 50% { opacity: .6; } }

/* NmAlert over-budget body */
.cabkd-alert-text[b-q864enoikt] { margin: 0; font-size: 13px; }
.cabkd-alert-text + .cabkd-alert-text[b-q864enoikt] { margin-top: 6px; }
.cabkd-violations[b-q864enoikt] { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }

/* ── Shell 2 cột ── */
.cabkd-shell[b-q864enoikt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .cabkd-shell[b-q864enoikt] { grid-template-columns: minmax(0, 1fr); }
}

.cabkd-main[b-q864enoikt] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Trip linkage ── */
.cabkd-trip[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--nm-ok) 40%, transparent);
    border-radius: var(--nm-r-card);
    background: color-mix(in srgb, var(--nm-ok) 6%, var(--nm-surface));
}
.cabkd-trip-ico[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--nm-ok);
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
}
.cabkd-trip-main[b-q864enoikt] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cabkd-trip-lbl[b-q864enoikt] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ok);
}
.cabkd-trip-val[b-q864enoikt] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.cabkd-trip-val a[b-q864enoikt] {
    color: var(--nm-brand-700);
    text-decoration: none;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.cabkd-trip-val a:hover[b-q864enoikt] { text-decoration: underline; }
.cabkd-trip-name[b-q864enoikt] { font-weight: 500; color: var(--nm-ink-2); }

/* ── Card ── */
[b-q864enoikt] .cabkd-card .nm-card__head { display: flex; align-items: center; gap: 8px; }
.cabkd-card-ico[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cabkd-card-title[b-q864enoikt] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cabkd-card-count[b-q864enoikt] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cabkd-card-body[b-q864enoikt] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

.cabkd-sect[b-q864enoikt] { display: flex; flex-direction: column; gap: 8px; }
.cabkd-sect-lbl[b-q864enoikt] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.cabkd-muted[b-q864enoikt] { color: var(--nm-muted); }
.cabkd-good[b-q864enoikt] { color: var(--nm-ok); }
.cabkd-bad[b-q864enoikt] { color: var(--nm-bad); }
.cabkd-em[b-q864enoikt] { color: var(--nm-brand-700); font-weight: 800; }
.cabkd-mono[b-q864enoikt] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .95em; }
.cabkd-count-line[b-q864enoikt] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

/* tag nhỏ (cabin/fare/stops/auto-activate/cá nhân) */
.cabkd-tag[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.cabkd-tag--violet[b-q864enoikt] { background: color-mix(in srgb, var(--nm-violet, #7c3aed) 12%, transparent); color: var(--nm-violet, #7c3aed); }
.cabkd-tag--warn[b-q864enoikt] { background: color-mix(in srgb, var(--nm-warn) 14%, transparent); color: var(--nm-warn); }
.cabkd-tag--ok[b-q864enoikt] { background: color-mix(in srgb, var(--nm-ok) 13%, transparent); color: var(--nm-ok); }

/* ── Tab flight (chặng bay / số vé / liên hệ) ── */
.cabkd-tab-body[b-q864enoikt] { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.cabkd-issued-line[b-q864enoikt] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ok);
}

/* ── PNR strip (Flight) ── */
.cabkd-pnrbar[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cabkd-pnr-cell[b-q864enoikt] { display: flex; flex-direction: column; gap: 1px; }
.cabkd-pnr-cell small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-pnr-cell b[b-q864enoikt] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cabkd-pnr-code[b-q864enoikt] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    color: var(--nm-brand-700) !important;
}
.cabkd-pnr-sep[b-q864enoikt] { width: 1px; height: 26px; background: var(--nm-border); flex-shrink: 0; }
.cabkd-pnr-issued[b-q864enoikt] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ok);
}

/* liên hệ / khách hàng inline */
.cabkd-contact[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nm-ink-2);
}
.cabkd-contact > span[b-q864enoikt] { display: inline-flex; align-items: center; gap: 6px; }
.cabkd-contact i[b-q864enoikt] { color: var(--nm-muted); font-size: 12px; }
.cabkd-contact b[b-q864enoikt] { font-weight: 600; color: var(--nm-ink); }

/* ── Segment (Flight) ── */
.cabkd-seg[b-q864enoikt] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

/* Chặng hãng đã huỷ: giờ bay giữ nguyên nên chỉ làm mờ là chưa đủ — gạch ngang giờ + mã sân bay
   để mắt bắt được ngay cả khi lướt nhanh, viền nét đứt cho khác hẳn khối chặng còn hiệu lực. */
.cabkd-seg--cancelled[b-q864enoikt] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--nm-bad) 40%, var(--nm-border));
    background: color-mix(in srgb, var(--nm-bad) 3%, transparent);
}
.cabkd-seg--cancelled .cabkd-seg-head[b-q864enoikt] {
    background: color-mix(in srgb, var(--nm-bad) 7%, transparent);
    border-bottom-color: color-mix(in srgb, var(--nm-bad) 25%, var(--nm-border));
}
.cabkd-seg--cancelled .cabkd-seg-fno[b-q864enoikt],
.cabkd-seg--cancelled .cabkd-seg-pt b[b-q864enoikt],
.cabkd-seg--cancelled .cabkd-seg-iata[b-q864enoikt] {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: var(--nm-muted);
}
.cabkd-tag--bad[b-q864enoikt] { background: color-mix(in srgb, var(--nm-bad) 14%, transparent); color: var(--nm-bad); }
.cabkd-seg-head[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}
.cabkd-seg-idx[b-q864enoikt] { font-size: 11px; font-weight: 700; color: var(--nm-muted); }
.cabkd-seg-fno[b-q864enoikt] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-brand-700);
}
.cabkd-seg-head .cabkd-muted[b-q864enoikt] { font-size: 12px; }
.cabkd-seg-tags[b-q864enoikt] { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cabkd-seg-route[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}
.cabkd-seg-pt[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 86px;
    text-align: center;
}
.cabkd-seg-pt b[b-q864enoikt] { font-size: 19px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cabkd-seg-iata[b-q864enoikt] { font-size: 13px; font-weight: 700; color: var(--nm-brand-700); }
.cabkd-seg-pt small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); }

.cabkd-seg-mid[b-q864enoikt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}
.cabkd-seg-mid small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-seg-line[b-q864enoikt] { width: 100%; display: flex; align-items: center; gap: 4px; }
.cabkd-seg-line i[b-q864enoikt] { color: var(--nm-brand-500); font-size: 13px; margin-left: -3px; }
.cabkd-seg-dot[b-q864enoikt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--nm-brand-500);
    flex-shrink: 0;
}
.cabkd-seg-dash[b-q864enoikt] {
    flex: 1;
    position: relative;
    border-top: 2px dashed color-mix(in srgb, var(--nm-brand-500) 45%, transparent);
}
.cabkd-seg-stop[b-q864enoikt] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nm-warn);
    border: 1px solid var(--nm-surface);
}

.cabkd-seg-foot[b-q864enoikt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--nm-surface-2);
    border-top: 1px solid var(--nm-border);
    font-size: 12px;
    color: var(--nm-muted);
}
.cabkd-seg-bags[b-q864enoikt] { display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.cabkd-seg-bags > span[b-q864enoikt] { display: inline-flex; align-items: center; gap: 5px; }
.cabkd-seg-bags b[b-q864enoikt] { color: var(--nm-ink); font-weight: 600; }
.cabkd-seg-price[b-q864enoikt] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabkd-seg-price b[b-q864enoikt] { color: var(--nm-brand-700); font-weight: 800; }

.cabkd-seg-legs[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--nm-warn) 5%, var(--nm-surface));
    border-top: 1px solid color-mix(in srgb, var(--nm-warn) 25%, transparent);
}
.cabkd-leg[b-q864enoikt] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--nm-ink-2); }
.cabkd-leg b[b-q864enoikt] { font-weight: 600; color: var(--nm-ink); }
.cabkd-leg-fno[b-q864enoikt] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--nm-brand-700);
    min-width: 56px;
}

/* Số vé */
.cabkd-tickets[b-q864enoikt] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabkd-ticket[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--nm-r-pill);
    border: 1px solid color-mix(in srgb, var(--nm-ok) 40%, transparent);
    background: color-mix(in srgb, var(--nm-ok) 8%, transparent);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ok);
    white-space: nowrap;
}

/* ── Hotel/Tour: headline + date strip + dl ── */
.cabkd-headline[b-q864enoikt] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cabkd-headline > b[b-q864enoikt] { font-size: 16px; font-weight: 800; color: var(--nm-ink); }
.cabkd-headline .cabkd-muted[b-q864enoikt] { font-size: 13px; }

.cabkd-dates[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cabkd-date-cell[b-q864enoikt] { display: flex; flex-direction: column; gap: 1px; }
.cabkd-date-cell small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-date-cell b[b-q864enoikt] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cabkd-date-arrow[b-q864enoikt] { color: var(--nm-muted); }
.cabkd-days-chip[b-q864enoikt] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.cabkd-dl[b-q864enoikt] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}
@media (max-width: 640px) { .cabkd-dl[b-q864enoikt] { grid-template-columns: minmax(0, 1fr); } }
.cabkd-dl-row[b-q864enoikt] { display: flex; flex-direction: column; gap: 2px; }
.cabkd-dl-row dt[b-q864enoikt] { font-size: 11.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-dl-row dd[b-q864enoikt] { margin: 0; font-size: 13.5px; color: var(--nm-ink); font-weight: 500; }

/* khối xác nhận (confirmation/voucher/activation/kết quả visa) */
.cabkd-confirm[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--nm-ok) 30%, transparent);
    border-radius: var(--nm-r-input, 10px);
    background: color-mix(in srgb, var(--nm-ok) 6%, var(--nm-surface));
}
.cabkd-confirm .cabkd-sect-lbl[b-q864enoikt] { color: var(--nm-ok); }
.cabkd-confirm-grid[b-q864enoikt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
}
@media (max-width: 640px) { .cabkd-confirm-grid[b-q864enoikt] { grid-template-columns: minmax(0, 1fr); } }
.cabkd-confirm-grid > div[b-q864enoikt] { display: flex; flex-direction: column; gap: 1px; }
.cabkd-confirm-grid small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-confirm-grid b[b-q864enoikt] { font-size: 13px; font-weight: 700; color: var(--nm-ink); word-break: break-all; }

.cabkd-lpa[b-q864enoikt] { display: flex; flex-direction: column; gap: 3px; }
.cabkd-lpa small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-lpa code[b-q864enoikt] {
    padding: 6px 10px;
    border: 1px solid var(--nm-border);
    border-radius: 8px;
    background: var(--nm-surface);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-ink);
    word-break: break-all;
}

.cabkd-links[b-q864enoikt] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cabkd-links a[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-700);
    text-decoration: none;
}
.cabkd-links a:hover[b-q864enoikt] { text-decoration: underline; }
.cabkd-links i[b-q864enoikt] { font-size: 12px; }

/* ── Tour pax tiles ── */
.cabkd-pax-tiles[b-q864enoikt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.cabkd-pax-tile[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    text-align: center;
}
.cabkd-pax-tile small[b-q864enoikt] { font-size: 11px; color: var(--nm-muted); font-weight: 600; }
.cabkd-pax-tile b[b-q864enoikt] { font-size: 19px; font-weight: 800; color: var(--nm-ink); }
.cabkd-pax-tile span[b-q864enoikt] { font-size: 11px; color: var(--nm-muted); }

/* ── Item con (eSIM order / visa / fast track / bảo hiểm) ── */
.cabkd-item[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
}
.cabkd-item-head[b-q864enoikt] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabkd-esim-img[b-q864enoikt] {
    width: 42px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--nm-border);
    flex-shrink: 0;
}
.cabkd-item-titles[b-q864enoikt] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cabkd-item-titles > b[b-q864enoikt] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.cabkd-item-titles small[b-q864enoikt] { font-size: 11.5px; color: var(--nm-muted); }
[b-q864enoikt] .cabkd-item-cta { align-self: flex-start; }

.cabkd-stat-row[b-q864enoikt] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.cabkd-stat-row--4[b-q864enoikt] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .cabkd-stat-row[b-q864enoikt], .cabkd-stat-row--4[b-q864enoikt] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cabkd-stat[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 6px;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    text-align: center;
}
.cabkd-stat small[b-q864enoikt] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-stat b[b-q864enoikt] { font-size: 13.5px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cabkd-stat--em[b-q864enoikt] { background: var(--nm-brand-50); }
.cabkd-stat--em b[b-q864enoikt] { color: var(--nm-brand-700); }

.cabkd-meta-line[b-q864enoikt] {
    display: flex;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nm-muted);
}
.cabkd-meta-line > span[b-q864enoikt] { display: inline-flex; align-items: center; gap: 5px; }
.cabkd-meta-line b[b-q864enoikt] { color: var(--nm-ink); font-weight: 600; }
.cabkd-meta-line b.cabkd-good[b-q864enoikt] { color: var(--nm-ok); }
.cabkd-meta-line b.cabkd-bad[b-q864enoikt] { color: var(--nm-bad); }
.cabkd-meta-line i[b-q864enoikt] { font-size: 11px; }

/* Fast Track inline detail */
.cabkd-dd-hint[b-q864enoikt] { display: block; font-size: 11px; color: var(--nm-muted); font-style: italic; }
.cabkd-ftnotes[b-q864enoikt] { display: flex; flex-direction: column; gap: 8px; }
.cabkd-ftnote[b-q864enoikt] {
    padding: 2px 0 2px 10px;
    border-left: 3px solid var(--nm-brand-500);
}
.cabkd-ftnote small[b-q864enoikt] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--nm-muted);
}
.cabkd-ftnote p[b-q864enoikt] { margin: 1px 0 0; font-size: 13px; color: var(--nm-ink-2); }

/* fallback loại dịch vụ chưa có chi tiết */
.cabkd-fallback[b-q864enoikt] { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--nm-ink-2); }
.cabkd-fallback p[b-q864enoikt] { margin: 0; }
.cabkd-fallback b[b-q864enoikt] { color: var(--nm-ink); }

/* ── Bảng hành khách ── */
.cabkd-table-wrap[b-q864enoikt] { overflow-x: auto; }
.cabkd-table[b-q864enoikt] { width: 100%; border-collapse: collapse; font-size: 13px; }
.cabkd-table th[b-q864enoikt] {
    padding: 9px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}
.cabkd-table td[b-q864enoikt] { padding: 9px 14px; border-bottom: 1px solid var(--nm-border); white-space: nowrap; }
.cabkd-table tr:last-child td[b-q864enoikt] { border-bottom: 0; }
.cabkd-table td b[b-q864enoikt] { font-weight: 600; color: var(--nm-ink); }
.cabkd-th-idx[b-q864enoikt] { width: 40px; text-align: center !important; }
.cabkd-td-idx[b-q864enoikt] { text-align: center; color: var(--nm-muted); font-family: ui-monospace, monospace; font-size: 11px; }
.cabkd-th-right[b-q864enoikt], .cabkd-td-right[b-q864enoikt] { text-align: right !important; }
.cell-amount[b-q864enoikt] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-brand-700);
    white-space: nowrap;
}

/* ── Ghi chú ── */
.cabkd-notes[b-q864enoikt] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cabkd-notes li[b-q864enoikt] {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    color: var(--nm-ink-2);
}
.cabkd-notes li[b-q864enoikt]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nm-brand-500);
}
.cabkd-empty-note[b-q864enoikt] { margin: 0; font-size: 13px; font-style: italic; }
.cabkd-note-row[b-q864enoikt] { display: flex; align-items: center; gap: 8px; }
.cabkd-note-row > :first-child[b-q864enoikt] { flex: 1; }

/* ── Sidebar ── */
.cabkd-side[b-q864enoikt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.cabkd-block[b-q864enoikt] { display: flex; flex-direction: column; gap: 8px; }
.cabkd-block--divider[b-q864enoikt] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.cabkd-label[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.cabkd-label i[b-q864enoikt] { font-size: 12px; }
.cabkd-hint[b-q864enoikt] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }

.cabkd-customer[b-q864enoikt] { display: flex; align-items: center; gap: 10px; }
.cabkd-avatar[b-q864enoikt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.cabkd-customer-main[b-q864enoikt] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cabkd-customer-main b[b-q864enoikt] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.cabkd-customer-main small[b-q864enoikt] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cabkd-meta-row[b-q864enoikt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}
.cabkd-meta-row > span[b-q864enoikt] { color: var(--nm-muted); display: inline-flex; align-items: center; gap: 5px; }
.cabkd-meta-row > b[b-q864enoikt] { font-weight: 600; color: var(--nm-ink); font-variant-numeric: tabular-nums; text-align: right; }
.cabkd-meta-row > b.cabkd-good[b-q864enoikt] { color: var(--nm-ok); }
.cabkd-meta-row > b.cabkd-bad[b-q864enoikt] { color: var(--nm-bad); }

.cabkd-total[b-q864enoikt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--nm-border);
}
.cabkd-total span[b-q864enoikt] { font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.cabkd-total b[b-q864enoikt] {
    font-size: 18px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
}

.cabkd-txn[b-q864enoikt] { font-size: 11px; color: var(--nm-muted); word-break: break-all; }

[b-q864enoikt] .cabkd-pay-cta { width: 100%; justify-content: center; }

/* ── Modal ── */
.cabkd-modal-sub[b-q864enoikt] { margin: 0 0 10px; font-size: 13px; color: var(--nm-muted); }
.cabkd-modal-sub b[b-q864enoikt] { color: var(--nm-ink); }
.cabkd-modal-label[b-q864enoikt] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
    margin-bottom: 6px;
}

@media (max-width: 640px) {
    .nm-list-page[b-q864enoikt] { padding: 16px 14px 22px; }
    .cabkd-seg-route[b-q864enoikt] { gap: 10px; padding: 12px; }
    .cabkd-seg-pt[b-q864enoikt] { min-width: 70px; }
}
/* /src/Features/Bookings/Pages/Ca/CaBookingPayment.razor.rz.scp.css */
/* CaBookingPayment — Manager Dashboard v4 theme */
.cabookpay-root[b-l24uc4jxe6] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cabookpay-hero[b-l24uc4jxe6] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
    flex-wrap: wrap;
}

    .cabookpay-hero h1[b-l24uc4jxe6] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.2;
    }

        .cabookpay-hero h1 em[b-l24uc4jxe6] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.cabookpay-hero-meta[b-l24uc4jxe6] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.cabookpay-hero-actions[b-l24uc4jxe6] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.dash-btn[b-l24uc4jxe6] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
}

    .dash-btn:hover[b-l24uc4jxe6] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-l24uc4jxe6] {
        opacity: .5;
        cursor: not-allowed;
    }

.dash-btn-accent[b-l24uc4jxe6] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.18), 0 4px 12px -2px rgba(255, 107, 0,.22);
}

    .dash-btn-accent:hover[b-l24uc4jxe6] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-card[b-l24uc4jxe6] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px 18px;
}

.dash-card h2[b-l24uc4jxe6] {
    margin: 0 0 14px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.dash-card h3[b-l24uc4jxe6] {
    margin: 14px 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

    .dash-card h3:first-of-type[b-l24uc4jxe6] {
        margin-top: 0;
    }

.cabookpay-grid[b-l24uc4jxe6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 1024px) {
    .cabookpay-grid[b-l24uc4jxe6] {
        grid-template-columns: 2fr 1fr;
    }
}

.cabookpay-info[b-l24uc4jxe6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 22px;
    font-size: 14px;
}

.cabookpay-row[b-l24uc4jxe6] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

    .cabookpay-row .lbl[b-l24uc4jxe6] {
        color: var(--d-ink-3);
    }

    .cabookpay-row .val[b-l24uc4jxe6] {
        font-weight: 500;
        color: var(--d-ink);
    }

.cabookpay-divider[b-l24uc4jxe6] {
    border: 0;
    border-top: 1px solid var(--d-line-2);
    margin: 12px 0;
}

.cabookpay-pay-grid[b-l24uc4jxe6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.cabookpay-pay-tile[b-l24uc4jxe6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    min-height: 110px;
    justify-content: center;
}

    .cabookpay-pay-tile:hover[b-l24uc4jxe6] {
        background: var(--d-surface-2);
    }

    .cabookpay-pay-tile.selected[b-l24uc4jxe6] {
        border-color: var(--d-line);
        background: var(--d-accent-soft);
        box-shadow: 0 0 0 3px rgba(255, 107, 0,.08);
    }

    .cabookpay-pay-tile.disabled[b-l24uc4jxe6] {
        opacity: .55;
        cursor: not-allowed;
        background: var(--d-surface-2);
    }

.cabookpay-pay-ico[b-l24uc4jxe6] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--d-ink-2);
    font-weight: 700;
    font-size: 12px;
    background: var(--d-ink-3);
}

    .cabookpay-pay-ico.momo[b-l24uc4jxe6] {
        background: #d82d8b;
    }

    .cabookpay-pay-ico.wallet[b-l24uc4jxe6] {
        background: var(--d-good);
    }

.cabookpay-pay-name[b-l24uc4jxe6] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink);
}

.cabookpay-pay-warn[b-l24uc4jxe6] {
    font-size: 10.5px;
    color: var(--d-danger);
    font-weight: 500;
}

.cabookpay-banner[b-l24uc4jxe6] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 12.5px;
    margin-top: 10px;
}

    .cabookpay-banner.warn[b-l24uc4jxe6] {
        background: var(--d-warn-soft);
        border: 1px solid color-mix(in srgb, var(--d-warn) 25%, white);
        color: #92400e;
    }

    .cabookpay-banner.danger[b-l24uc4jxe6] {
        background: color-mix(in srgb, var(--d-danger) 8%, white);
        border: 1px solid color-mix(in srgb, var(--d-danger) 25%, white);
        color: #991b1b;
    }

    .cabookpay-banner.accent[b-l24uc4jxe6] {
        background: var(--d-accent-soft);
        border: 1px solid color-mix(in srgb, var(--d-accent) 25%, white);
        color: #7c2d12;
    }

.cabookpay-summary[b-l24uc4jxe6] {
    position: sticky;
    top: 16px;
}

.cabookpay-summary-row[b-l24uc4jxe6] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}

    .cabookpay-summary-row .lbl[b-l24uc4jxe6] {
        color: var(--d-ink-3);
    }

    .cabookpay-summary-row .val[b-l24uc4jxe6] {
        font-weight: 500;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

    .cabookpay-summary-row .val.fee[b-l24uc4jxe6] {
        color: var(--d-ink);
    }

.cabookpay-total[b-l24uc4jxe6] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--d-line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .cabookpay-total .lbl[b-l24uc4jxe6] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .cabookpay-total .val[b-l24uc4jxe6] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 22px;
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.025em;
    }

.cabookpay-pax-list[b-l24uc4jxe6] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--d-line-2);
}

    .cabookpay-pax-list .lbl[b-l24uc4jxe6] {
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 6px;
    }

    .cabookpay-pax-list .pax[b-l24uc4jxe6] {
        font-size: 14px;
        color: var(--d-ink);
        padding: 2px 0;
    }

.cabookpay-terms[b-l24uc4jxe6] {
    display: flex;
    gap: 8px;
    font-size: 11.5px;
    color: var(--d-ink-3);
    cursor: pointer;
    margin-top: 12px;
}

    .cabookpay-terms input[b-l24uc4jxe6] {
        margin-top: 2px;
    }

    .cabookpay-terms a[b-l24uc4jxe6] {
        color: var(--d-accent);
        text-decoration: none;
    }

        .cabookpay-terms a:hover[b-l24uc4jxe6] {
            text-decoration: underline;
        }

.cabookpay-pay-btn[b-l24uc4jxe6] {
    width: 100%;
    margin-top: 10px;
    height: 44px;
    border: 0;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.18), 0 4px 12px -2px rgba(255, 107, 0,.22);
}

    .cabookpay-pay-btn:hover[b-l24uc4jxe6] {
        background: var(--d-accent-grad-hover);
    }

    .cabookpay-pay-btn:disabled[b-l24uc4jxe6] {
        opacity: .5;
        cursor: not-allowed;
    }

.cabookpay-back-link[b-l24uc4jxe6] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: center;
}

    .cabookpay-back-link:hover[b-l24uc4jxe6] {
        color: var(--d-ink);
    }

.cabookpay-qr[b-l24uc4jxe6] {
    text-align: center;
}

.cabookpay-qr-status[b-l24uc4jxe6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fce7f3;
    color: #be185d;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 16px;
}

    .cabookpay-qr-status .d[b-l24uc4jxe6] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ec4899;
    }

.cabookpay-qr-img-wrap[b-l24uc4jxe6] {
    display: inline-block;
    padding: 14px;
    background: var(--d-surface);
    border-radius: 14px;
    border: 1px solid var(--d-line);
    margin-bottom: 14px;
}

    .cabookpay-qr-img-wrap img[b-l24uc4jxe6] {
        width: 256px;
        height: 256px;
        display: block;
        image-rendering: pixelated;
    }

.cabookpay-loading[b-l24uc4jxe6] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.cabookpay-spinner[b-l24uc4jxe6] {
    width: 32px;
    height: 32px;
    border: 4px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: caspin-b-l24uc4jxe6 0.8s linear infinite;
}

@keyframes caspin-b-l24uc4jxe6 {
    to { transform: rotate(360deg); }
}

.cabookpay-not-found[b-l24uc4jxe6] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 48px 18px;
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

    .cabookpay-not-found b[b-l24uc4jxe6] {
        color: var(--d-ink);
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 12px;
    }

.cabookpay-mobile-bar[b-l24uc4jxe6] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--d-surface);
    border-top: 1px solid var(--d-line);
    padding: 14px 18px;
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}

@media (min-width: 1024px) {
    .cabookpay-mobile-bar[b-l24uc4jxe6] {
        display: none;
    }
}

.cabookpay-esim-row[b-l24uc4jxe6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: var(--d-surface-2);
    border-radius: 8px;
    margin-bottom: 6px;
}

    .cabookpay-esim-row img[b-l24uc4jxe6] {
        width: 40px;
        height: 28px;
        border-radius: 4px;
        object-fit: cover;
        border: 1px solid var(--d-line);
        flex-shrink: 0;
    }

    .cabookpay-esim-row .body[b-l24uc4jxe6] {
        flex: 1;
        min-width: 0;
    }

    .cabookpay-esim-row .name[b-l24uc4jxe6] {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--d-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cabookpay-esim-row .meta[b-l24uc4jxe6] {
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

    .cabookpay-esim-row .price[b-l24uc4jxe6] {
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        font-size: 14px;
    }

.cabookpay-checkbox-card[b-l24uc4jxe6] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    margin-top: 14px;
    border: 1px solid color-mix(in srgb, var(--d-line) 25%, white);
    background: var(--d-accent-soft);
    border-radius: var(--d-r);
    cursor: pointer;
}

    .cabookpay-checkbox-card .body[b-l24uc4jxe6] {
        flex: 1;
        font-size: 14px;
    }

    .cabookpay-checkbox-card .body b[b-l24uc4jxe6] {
        font-weight: 500;
        color: var(--d-ink);
        display: block;
    }

    .cabookpay-checkbox-card .body small[b-l24uc4jxe6] {
        color: var(--d-ink-3);
        font-size: 11.5px;
        margin-top: 2px;
        display: block;
    }
/* /src/Features/Bookings/Pages/Ca/CaBookings.razor.rz.scp.css */
/* /ca/bookings — chuẩn nm-list: shell trang + KPI + toolbar + cell helpers; chrome bảng do DataGrid/Nm* lo. */
.nm-list-page[b-idbejvbf7c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-idbejvbf7c] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-idbejvbf7c] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-idbejvbf7c] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-idbejvbf7c] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng — 1 hàng, thay cho lưới NmKpi to (đỡ chiếm chiều cao) ── */
.cabk-stats[b-idbejvbf7c] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.cabk-stats[b-idbejvbf7c]::-webkit-scrollbar { display: none; }

.cabk-stat[b-idbejvbf7c] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.cabk-stat + .cabk-stat[b-idbejvbf7c] { border-left: 1px solid var(--nm-border); }

.cabk-stat__dot[b-idbejvbf7c] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.cabk-stat__dot--accent[b-idbejvbf7c] { background: var(--nm-brand-500); }
.cabk-stat__dot--good[b-idbejvbf7c]   { background: var(--nm-ok); }
.cabk-stat__dot--info[b-idbejvbf7c]   { background: var(--nm-info); }
.cabk-stat__dot--warn[b-idbejvbf7c]   { background: var(--nm-warn); }
.cabk-stat__dot--bad[b-idbejvbf7c]    { background: var(--nm-bad); }

.cabk-stat__lbl[b-idbejvbf7c] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.cabk-stat__val[b-idbejvbf7c] {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar filter ── */
.nm-list-toolbar[b-idbejvbf7c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-idbejvbf7c] { width: 300px; max-width: 100%; }
.tb-select[b-idbejvbf7c] { min-width: 160px; }
.tb-select--date[b-idbejvbf7c] { min-width: 170px; }
.tb-filters[b-idbejvbf7c] { display: contents; }
[b-idbejvbf7c] .tb-clear { margin-left: auto; }

/* Cặp ô từ ngày – đến ngày (hiện khi chọn preset khoảng thời gian) */
.tb-daterange[b-idbejvbf7c] { display: inline-flex; align-items: center; gap: 6px; }
.tb-daterange__sep[b-idbejvbf7c] { color: var(--nm-muted); flex-shrink: 0; }
.tb-daterange[b-idbejvbf7c]  .nm-dateinput { width: 142px; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-idbejvbf7c] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-idbejvbf7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Chips trạng thái + số đếm ── */
.tb-status[b-idbejvbf7c] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-idbejvbf7c] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

@media (max-width: 640px) {
    .tb-search[b-idbejvbf7c] { flex: 1; width: auto; }
    [b-idbejvbf7c] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-idbejvbf7c] { display: none; }
    .tb-filters.is-open[b-idbejvbf7c] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-idbejvbf7c] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-idbejvbf7c]  .nm-select-wrap,
    .tb-select[b-idbejvbf7c]  .nm-select { width: 100%; }
    .tb-filters.is-open .tb-daterange[b-idbejvbf7c] { flex: 1 1 100%; }
    .tb-daterange[b-idbejvbf7c]  .nm-dateinput-wrap { flex: 1; min-width: 0; }
    .tb-daterange[b-idbejvbf7c]  .nm-dateinput { width: 100%; }

    /* Chips trạng thái: trượt ngang 1 hàng thay vì wrap 3 tầng */
    .tb-status[b-idbejvbf7c] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tb-status[b-idbejvbf7c]::-webkit-scrollbar { display: none; }
    .tb-status[b-idbejvbf7c]  .nm-chip { flex-shrink: 0; }
}

/* ── Cell helpers ── */
.cell-2line[b-idbejvbf7c] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-idbejvbf7c] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-2line__sub[b-idbejvbf7c] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-muted[b-idbejvbf7c] { color: var(--nm-muted); }
.cell-date[b-idbejvbf7c] { font-variant-numeric: tabular-nums; }

/* mã booking — pill mono, click về chi tiết */
.cell-code[b-idbejvbf7c] { display: inline-flex; align-items: center; gap: 6px; }
.nm-code-pill[b-idbejvbf7c] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
}
a.nm-code-pill:hover[b-idbejvbf7c] { background: var(--nm-brand-100, var(--nm-brand-50)); text-decoration: underline; }

/* tag đơn cá nhân (P) */
.cell-personal[b-idbejvbf7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
}

/* chip dịch vụ: icon tròn màu theo loại + nhãn */
.cell-svc[b-idbejvbf7c] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
}
.cell-svc__ico[b-idbejvbf7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
    background: color-mix(in srgb, var(--svc, #6B7280) 12%, transparent);
    color: var(--svc, #6B7280);
    flex-shrink: 0;
}
.cell-svc--flight[b-idbejvbf7c]    { --svc: #0284c7; }
.cell-svc--hotel[b-idbejvbf7c]     { --svc: #7c3aed; }
.cell-svc--tour[b-idbejvbf7c]      { --svc: #059669; }
.cell-svc--visa[b-idbejvbf7c]      { --svc: #b45309; }
.cell-svc--esim[b-idbejvbf7c]      { --svc: #db2777; }
.cell-svc--fasttrack[b-idbejvbf7c] { --svc: #ea580c; }

/* tổng tiền — mono, canh phải */
.cell-amount[b-idbejvbf7c] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* hàng đã huỷ / hết hạn — làm mờ nhẹ */
[b-idbejvbf7c] .cabk-row-muted .nm-grid__td { opacity: .6; }

.nm-row-actions[b-idbejvbf7c] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer: tổng + phân trang ── */
.cabk-foot[b-idbejvbf7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.cabk-total[b-idbejvbf7c] { font-size: 12.5px; color: var(--nm-muted); }
.cabk-total strong[b-idbejvbf7c] { color: var(--nm-ink); font-weight: 700; }

@media (max-width: 640px) {
    .nm-list-page[b-idbejvbf7c] { padding: 16px 14px 22px; }
}
/* /src/Features/Bookings/Pages/Ca/Purchases.razor.rz.scp.css */
/* /ca/purchases — chuẩn nm-list (token --nm-* only): shell trang + dải thống kê + toolbar + cell helpers.
   Chrome bảng/nút/badge do DataGrid + Nm* lo, ở đây chỉ còn phần riêng của trang. */
.nm-list-page[b-87d6qwqv38] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-87d6qwqv38] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-87d6qwqv38] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-87d6qwqv38] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-87d6qwqv38] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng — 1 hàng, thay lưới KPI to (đỡ chiếm chiều cao) ── */
.capur-stats[b-87d6qwqv38] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.capur-stats[b-87d6qwqv38]::-webkit-scrollbar { display: none; }

.capur-stat[b-87d6qwqv38] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.capur-stat + .capur-stat[b-87d6qwqv38] { border-left: 1px solid var(--nm-border); }

.capur-stat__dot[b-87d6qwqv38] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.capur-stat__dot--accent[b-87d6qwqv38] { background: var(--nm-brand-500); }
.capur-stat__dot--good[b-87d6qwqv38]   { background: var(--nm-ok); }
.capur-stat__dot--info[b-87d6qwqv38]   { background: var(--nm-info); }
.capur-stat__dot--warn[b-87d6qwqv38]   { background: var(--nm-warn); }

.capur-stat__lbl[b-87d6qwqv38] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }

.capur-stat__val[b-87d6qwqv38] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* số phụ: "/ tổng đơn" hoặc số tiền đang treo — đứng cạnh số chính, cỡ nhỏ hơn */
.capur-stat__sub[b-87d6qwqv38] {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-muted);
}

/* ── Toolbar filter ── */
.nm-list-toolbar[b-87d6qwqv38] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-87d6qwqv38] { width: 280px; max-width: 100%; }
.tb-select[b-87d6qwqv38] { min-width: 150px; }
.tb-select--date[b-87d6qwqv38] { min-width: 170px; }
.tb-select--sort[b-87d6qwqv38] { min-width: 160px; }
.tb-filters[b-87d6qwqv38] { display: contents; }
[b-87d6qwqv38] .tb-clear { margin-left: auto; }

/* Cặp ô từ ngày – đến ngày (hiện khi chọn khoảng thời gian) */
.tb-daterange[b-87d6qwqv38] { display: inline-flex; align-items: center; gap: 6px; }
.tb-daterange__sep[b-87d6qwqv38] { color: var(--nm-muted); flex-shrink: 0; }
.tb-daterange[b-87d6qwqv38]  .nm-dateinput { width: 142px; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-87d6qwqv38] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-87d6qwqv38] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Chips dịch vụ + số đếm ── */
.tb-status[b-87d6qwqv38] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-87d6qwqv38] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

@media (max-width: 640px) {
    .nm-list-page[b-87d6qwqv38] { padding: 16px 14px 22px; }
    .tb-search[b-87d6qwqv38] { flex: 1; width: auto; }
    [b-87d6qwqv38] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-87d6qwqv38] { display: none; }
    .tb-filters.is-open[b-87d6qwqv38] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-87d6qwqv38] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-87d6qwqv38]  .nm-select-wrap,
    .tb-select[b-87d6qwqv38]  .nm-select { width: 100%; }
    .tb-filters.is-open .tb-daterange[b-87d6qwqv38] { flex: 1 1 100%; }
    .tb-daterange[b-87d6qwqv38]  .nm-dateinput-wrap { flex: 1; min-width: 0; }
    .tb-daterange[b-87d6qwqv38]  .nm-dateinput { width: 100%; }

    /* Chips dịch vụ: trượt ngang 1 hàng thay vì wrap nhiều tầng */
    .tb-status[b-87d6qwqv38] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tb-status[b-87d6qwqv38]::-webkit-scrollbar { display: none; }
    .tb-status[b-87d6qwqv38]  .nm-chip { flex-shrink: 0; }
}

/* ── Cell helpers ── */
.cell-2line[b-87d6qwqv38] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-87d6qwqv38] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-2line__sub[b-87d6qwqv38] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-muted[b-87d6qwqv38] { color: var(--nm-muted); }
.cell-date[b-87d6qwqv38] { font-variant-numeric: tabular-nums; }
.cell-status[b-87d6qwqv38] { display: inline-flex; justify-content: center; }

/* mã đơn — pill mono, click về chi tiết */
.nm-code-pill[b-87d6qwqv38] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
}
a.nm-code-pill:hover[b-87d6qwqv38] { background: var(--nm-brand-100, var(--nm-brand-50)); text-decoration: underline; }

/* chip dịch vụ: icon tròn màu theo loại + nhãn */
.cell-svc[b-87d6qwqv38] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
}
.cell-svc__ico[b-87d6qwqv38] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
    background: color-mix(in srgb, var(--svc, #6B7280) 12%, transparent);
    color: var(--svc, #6B7280);
    flex-shrink: 0;
}
.cell-svc--flight[b-87d6qwqv38]          { --svc: #0284c7; }
.cell-svc--hotel[b-87d6qwqv38]           { --svc: #7c3aed; }
.cell-svc--tour[b-87d6qwqv38]            { --svc: #059669; }
.cell-svc--visa[b-87d6qwqv38]            { --svc: #b45309; }
.cell-svc--esim[b-87d6qwqv38]            { --svc: #db2777; }
.cell-svc--fasttrack[b-87d6qwqv38]       { --svc: #ea580c; }
.cell-svc--travelinsurance[b-87d6qwqv38] { --svc: #0f766e; }

/* tổng tiền — mono, canh phải */
.cell-amount[b-87d6qwqv38] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* hàng đã huỷ / hết hạn — làm mờ nhẹ */
[b-87d6qwqv38] .capur-row-muted .nm-grid__td { opacity: .6; }

.nm-row-actions[b-87d6qwqv38] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer: số kết quả + tổng tiền + phân trang ── */
.capur-foot[b-87d6qwqv38] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.capur-total[b-87d6qwqv38] { font-size: 12.5px; color: var(--nm-muted); }
.capur-total strong[b-87d6qwqv38] { color: var(--nm-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.capur-total__sep[b-87d6qwqv38] { margin: 0 6px; color: var(--nm-border-strong); }
/* /src/Features/Bookings/Pages/Manager/BookingDetail.razor.rz.scp.css */
/* /manager/booking/{id} — chuẩn nm token-only, đồng bộ pattern CaBookingDetail:
   head + shell 2 cột (main | side) + card dịch vụ theo loại + khối giá nội bộ (SYSTEM). */
.nm-list-page[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-d4dfiwqdrh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-d4dfiwqdrh] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cabkd-title[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-d4dfiwqdrh] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cabkd-crumb[b-d4dfiwqdrh] { color: var(--nm-muted); text-decoration: none; }
.cabkd-crumb:hover[b-d4dfiwqdrh] { color: var(--nm-brand-700); text-decoration: underline; }
.cabkd-crumb-sep[b-d4dfiwqdrh] { margin: 0 4px; color: var(--nm-muted); }

.nm-code-pill[b-d4dfiwqdrh] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cabkd-svc-chip[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
}
.cabkd-svc-chip i[b-d4dfiwqdrh] { color: var(--nm-brand-600, var(--nm-brand-500)); font-size: 12px; }

.cabkd-loading[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 12px; }

/* Badge Issuing pulse — Class truyền vào NmBadge không nhận page scope → ::deep */
[b-d4dfiwqdrh] .cabkd-pulse { animation: cabkd-pulse-b-d4dfiwqdrh 1.6s ease-in-out infinite; }
@keyframes cabkd-pulse-b-d4dfiwqdrh { 50% { opacity: .6; } }

/* NmAlert body */
.cabkd-alert-text[b-d4dfiwqdrh] { margin: 0; font-size: 13px; }
.cabkd-alert-text + .cabkd-alert-text[b-d4dfiwqdrh] { margin-top: 6px; }

/* ── Shell 2 cột ── */
.cabkd-shell[b-d4dfiwqdrh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .cabkd-shell[b-d4dfiwqdrh] { grid-template-columns: minmax(0, 1fr); }
}

.cabkd-main[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Card ── */
[b-d4dfiwqdrh] .cabkd-card .nm-card__head { display: flex; align-items: center; gap: 8px; }
.cabkd-card-ico[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cabkd-card-title[b-d4dfiwqdrh] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cabkd-card-count[b-d4dfiwqdrh] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cabkd-card-body[b-d4dfiwqdrh] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

.cabkd-sect-lbl[b-d4dfiwqdrh] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.cabkd-muted[b-d4dfiwqdrh] { color: var(--nm-muted); }
.cabkd-good[b-d4dfiwqdrh] { color: var(--nm-ok); }
.cabkd-bad[b-d4dfiwqdrh] { color: var(--nm-bad); }
.cabkd-em[b-d4dfiwqdrh] { color: var(--nm-brand-700); font-weight: 800; }
.cabkd-mono[b-d4dfiwqdrh] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .95em; }
.cabkd-count-line[b-d4dfiwqdrh] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

/* tag nhỏ (cabin/fare/stops/auto-activate/B2B/loại khách) */
.cabkd-tag[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.cabkd-tag--violet[b-d4dfiwqdrh] { background: color-mix(in srgb, var(--nm-violet, #7c3aed) 12%, transparent); color: var(--nm-violet, #7c3aed); }
.cabkd-tag--warn[b-d4dfiwqdrh] { background: color-mix(in srgb, var(--nm-warn) 14%, transparent); color: var(--nm-warn); }
.cabkd-tag--ok[b-d4dfiwqdrh] { background: color-mix(in srgb, var(--nm-ok) 13%, transparent); color: var(--nm-ok); }

/* ── Tab flight (chặng bay / hành khách / số vé / bảo hiểm / liên hệ) ── */
.cabkd-tab-body[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.cabkd-issued-line[b-d4dfiwqdrh] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ok);
}

/* ── PNR strip (Flight) ── */
.cabkd-pnrbar[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cabkd-pnr-cell[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 1px; }
.cabkd-pnr-cell small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-pnr-cell b[b-d4dfiwqdrh] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cabkd-pnr-code[b-d4dfiwqdrh] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .06em;
    color: var(--nm-brand-700) !important;
}
.cabkd-pnr-sep[b-d4dfiwqdrh] { width: 1px; height: 26px; background: var(--nm-border); flex-shrink: 0; }
.cabkd-pnr-issued[b-d4dfiwqdrh] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ok);
}

/* liên hệ / khách hàng inline */
.cabkd-contact[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    gap: 6px 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nm-ink-2);
}
.cabkd-contact > span[b-d4dfiwqdrh] { display: inline-flex; align-items: center; gap: 6px; }
.cabkd-contact i[b-d4dfiwqdrh] { color: var(--nm-muted); font-size: 12px; }
.cabkd-contact b[b-d4dfiwqdrh] { font-weight: 600; color: var(--nm-ink); }

/* ── Segment (Flight) ── */
.cabkd-seg[b-d4dfiwqdrh] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

/* Chặng hãng đã huỷ: giờ bay giữ nguyên nên chỉ làm mờ là chưa đủ — gạch ngang giờ + mã sân bay
   để mắt bắt được ngay cả khi lướt nhanh, viền nét đứt cho khác hẳn khối chặng còn hiệu lực. */
.cabkd-seg--cancelled[b-d4dfiwqdrh] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--nm-bad) 40%, var(--nm-border));
    background: color-mix(in srgb, var(--nm-bad) 3%, transparent);
}
.cabkd-seg--cancelled .cabkd-seg-head[b-d4dfiwqdrh] {
    background: color-mix(in srgb, var(--nm-bad) 7%, transparent);
    border-bottom-color: color-mix(in srgb, var(--nm-bad) 25%, var(--nm-border));
}
.cabkd-seg--cancelled .cabkd-seg-fno[b-d4dfiwqdrh],
.cabkd-seg--cancelled .cabkd-seg-pt b[b-d4dfiwqdrh],
.cabkd-seg--cancelled .cabkd-seg-iata[b-d4dfiwqdrh] {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: var(--nm-muted);
}
.cabkd-tag--bad[b-d4dfiwqdrh] { background: color-mix(in srgb, var(--nm-bad) 14%, transparent); color: var(--nm-bad); }
.cabkd-seg-head[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}
.cabkd-seg-idx[b-d4dfiwqdrh] { font-size: 11px; font-weight: 700; color: var(--nm-muted); }
.cabkd-seg-fno[b-d4dfiwqdrh] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-brand-700);
}
.cabkd-seg-head .cabkd-muted[b-d4dfiwqdrh] { font-size: 12px; }
.cabkd-seg-tags[b-d4dfiwqdrh] { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cabkd-seg-route[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}
.cabkd-seg-pt[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 86px;
    text-align: center;
}
.cabkd-seg-pt b[b-d4dfiwqdrh] { font-size: 19px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cabkd-seg-iata[b-d4dfiwqdrh] { font-size: 13px; font-weight: 700; color: var(--nm-brand-700); }
.cabkd-seg-pt small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); }

.cabkd-seg-mid[b-d4dfiwqdrh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}
.cabkd-seg-mid small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-seg-line[b-d4dfiwqdrh] { width: 100%; display: flex; align-items: center; gap: 4px; }
.cabkd-seg-line i[b-d4dfiwqdrh] { color: var(--nm-brand-500); font-size: 13px; margin-left: -3px; }
.cabkd-seg-dot[b-d4dfiwqdrh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--nm-brand-500);
    flex-shrink: 0;
}
.cabkd-seg-dash[b-d4dfiwqdrh] {
    flex: 1;
    position: relative;
    border-top: 2px dashed color-mix(in srgb, var(--nm-brand-500) 45%, transparent);
}
.cabkd-seg-stop[b-d4dfiwqdrh] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nm-warn);
    border: 1px solid var(--nm-surface);
}

.cabkd-seg-foot[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--nm-surface-2);
    border-top: 1px solid var(--nm-border);
    font-size: 12px;
    color: var(--nm-muted);
}
.cabkd-seg-bags[b-d4dfiwqdrh] { display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.cabkd-seg-bags > span[b-d4dfiwqdrh] { display: inline-flex; align-items: center; gap: 5px; }
.cabkd-seg-bags b[b-d4dfiwqdrh] { color: var(--nm-ink); font-weight: 600; }
.cabkd-seg-price[b-d4dfiwqdrh] { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabkd-seg-price b[b-d4dfiwqdrh] { color: var(--nm-brand-700); font-weight: 800; }

.cabkd-seg-legs[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--nm-warn) 5%, var(--nm-surface));
    border-top: 1px solid color-mix(in srgb, var(--nm-warn) 25%, transparent);
}
.cabkd-leg[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--nm-ink-2); }
.cabkd-leg b[b-d4dfiwqdrh] { font-weight: 600; color: var(--nm-ink); }
.cabkd-leg-fno[b-d4dfiwqdrh] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--nm-brand-700);
    min-width: 56px;
}

/* Số vé */
.cabkd-tickets[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabkd-ticket[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--nm-r-pill);
    border: 1px solid color-mix(in srgb, var(--nm-ok) 40%, transparent);
    background: color-mix(in srgb, var(--nm-ok) 8%, transparent);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ok);
    white-space: nowrap;
}

/* ── Hotel/Tour: headline + date strip + dl ── */
.cabkd-headline[b-d4dfiwqdrh] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cabkd-headline > b[b-d4dfiwqdrh] { font-size: 16px; font-weight: 800; color: var(--nm-ink); }
.cabkd-headline .cabkd-muted[b-d4dfiwqdrh] { font-size: 13px; }

.cabkd-dates[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cabkd-date-cell[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 1px; }
.cabkd-date-cell small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-date-cell b[b-d4dfiwqdrh] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cabkd-date-arrow[b-d4dfiwqdrh] { color: var(--nm-muted); }
.cabkd-days-chip[b-d4dfiwqdrh] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.cabkd-dl[b-d4dfiwqdrh] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}
@media (max-width: 640px) { .cabkd-dl[b-d4dfiwqdrh] { grid-template-columns: minmax(0, 1fr); } }
.cabkd-dl-row[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 2px; }
.cabkd-dl-row dt[b-d4dfiwqdrh] { font-size: 11.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-dl-row dd[b-d4dfiwqdrh] { margin: 0; font-size: 13.5px; color: var(--nm-ink); font-weight: 500; }

/* khối xác nhận (confirmation/voucher/activation/kết quả visa) */
.cabkd-confirm[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--nm-ok) 30%, transparent);
    border-radius: var(--nm-r-input, 10px);
    background: color-mix(in srgb, var(--nm-ok) 6%, var(--nm-surface));
}
.cabkd-confirm .cabkd-sect-lbl[b-d4dfiwqdrh] { color: var(--nm-ok); }
.cabkd-confirm-grid[b-d4dfiwqdrh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 20px;
}
@media (max-width: 640px) { .cabkd-confirm-grid[b-d4dfiwqdrh] { grid-template-columns: minmax(0, 1fr); } }
.cabkd-confirm-grid > div[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 1px; }
.cabkd-confirm-grid small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-confirm-grid b[b-d4dfiwqdrh] { font-size: 13px; font-weight: 700; color: var(--nm-ink); word-break: break-all; }

.cabkd-lpa[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 3px; }
.cabkd-lpa small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-lpa code[b-d4dfiwqdrh] {
    padding: 6px 10px;
    border: 1px solid var(--nm-border);
    border-radius: 8px;
    background: var(--nm-surface);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-ink);
    word-break: break-all;
}

.cabkd-links[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cabkd-links a[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-700);
    text-decoration: none;
}
.cabkd-links a:hover[b-d4dfiwqdrh] { text-decoration: underline; }
.cabkd-links i[b-d4dfiwqdrh] { font-size: 12px; }

/* ── Tour pax tiles ── */
.cabkd-pax-tiles[b-d4dfiwqdrh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.cabkd-pax-tile[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    text-align: center;
}
.cabkd-pax-tile small[b-d4dfiwqdrh] { font-size: 11px; color: var(--nm-muted); font-weight: 600; }
.cabkd-pax-tile b[b-d4dfiwqdrh] { font-size: 19px; font-weight: 800; color: var(--nm-ink); }
.cabkd-pax-tile span[b-d4dfiwqdrh] { font-size: 11px; color: var(--nm-muted); }

/* ── Item con (eSIM order / visa / fast track / bảo hiểm) ── */
.cabkd-item[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
}
.cabkd-item-head[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabkd-esim-img[b-d4dfiwqdrh] {
    width: 42px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--nm-border);
    flex-shrink: 0;
}
.cabkd-item-titles[b-d4dfiwqdrh] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cabkd-item-titles > b[b-d4dfiwqdrh] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.cabkd-item-titles small[b-d4dfiwqdrh] { font-size: 11.5px; color: var(--nm-muted); }
[b-d4dfiwqdrh] .cabkd-item-cta { align-self: flex-start; }

.cabkd-stat-row[b-d4dfiwqdrh] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 720px) { .cabkd-stat-row[b-d4dfiwqdrh] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cabkd-stat[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 8px 6px;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    text-align: center;
}
.cabkd-stat small[b-d4dfiwqdrh] { font-size: 10.5px; color: var(--nm-muted); font-weight: 600; }
.cabkd-stat b[b-d4dfiwqdrh] { font-size: 13.5px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cabkd-stat--em[b-d4dfiwqdrh] { background: var(--nm-brand-50); }
.cabkd-stat--em b[b-d4dfiwqdrh] { color: var(--nm-brand-700); }

.cabkd-meta-line[b-d4dfiwqdrh] {
    display: flex;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nm-muted);
}
.cabkd-meta-line > span[b-d4dfiwqdrh] { display: inline-flex; align-items: center; gap: 5px; }
.cabkd-meta-line b[b-d4dfiwqdrh] { color: var(--nm-ink); font-weight: 600; }
.cabkd-meta-line b.cabkd-good[b-d4dfiwqdrh] { color: var(--nm-ok); }
.cabkd-meta-line b.cabkd-bad[b-d4dfiwqdrh] { color: var(--nm-bad); }
.cabkd-meta-line i[b-d4dfiwqdrh] { font-size: 11px; }

/* fallback loại dịch vụ chưa có chi tiết */
.cabkd-fallback[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--nm-ink-2); }
.cabkd-fallback p[b-d4dfiwqdrh] { margin: 0; }
.cabkd-fallback b[b-d4dfiwqdrh] { color: var(--nm-ink); }

/* ── Bảng hành khách ── */
.cabkd-table-wrap[b-d4dfiwqdrh] { overflow-x: auto; }
.cabkd-table[b-d4dfiwqdrh] { width: 100%; border-collapse: collapse; font-size: 13px; }
.cabkd-table th[b-d4dfiwqdrh] {
    padding: 9px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}
.cabkd-table td[b-d4dfiwqdrh] { padding: 9px 14px; border-bottom: 1px solid var(--nm-border); white-space: nowrap; }
.cabkd-table tr:last-child td[b-d4dfiwqdrh] { border-bottom: 0; }
.cabkd-table td b[b-d4dfiwqdrh] { font-weight: 600; color: var(--nm-ink); }
.cabkd-th-idx[b-d4dfiwqdrh] { width: 40px; text-align: center !important; }
.cabkd-td-idx[b-d4dfiwqdrh] { text-align: center; color: var(--nm-muted); font-family: ui-monospace, monospace; font-size: 11px; }
.cabkd-th-right[b-d4dfiwqdrh], .cabkd-td-right[b-d4dfiwqdrh] { text-align: right !important; }
.cell-amount[b-d4dfiwqdrh] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-brand-700);
    white-space: nowrap;
}

/* ── Ghi chú ── */
.cabkd-notes[b-d4dfiwqdrh] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.cabkd-notes li[b-d4dfiwqdrh] {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    color: var(--nm-ink-2);
}
.cabkd-notes li[b-d4dfiwqdrh]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nm-brand-500);
}
.cabkd-empty-note[b-d4dfiwqdrh] { margin: 0; font-size: 13px; font-style: italic; }
.cabkd-note-row[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 8px; }
.cabkd-note-row > :first-child[b-d4dfiwqdrh] { flex: 1; }

/* ── Sidebar ── */
.cabkd-side[b-d4dfiwqdrh] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.cabkd-block[b-d4dfiwqdrh] { display: flex; flex-direction: column; gap: 8px; }
.cabkd-block--divider[b-d4dfiwqdrh] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.cabkd-label[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.cabkd-label i[b-d4dfiwqdrh] { font-size: 12px; }
.cabkd-hint[b-d4dfiwqdrh] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }
.cabkd-hint b[b-d4dfiwqdrh] { font-weight: 700; }

.cabkd-customer[b-d4dfiwqdrh] { display: flex; align-items: center; gap: 10px; }
.cabkd-avatar[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.cabkd-customer-main[b-d4dfiwqdrh] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cabkd-customer-main b[b-d4dfiwqdrh] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.cabkd-customer-main small[b-d4dfiwqdrh] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* link chuyến công tác trong sidebar */
.cabkd-triplink[b-d4dfiwqdrh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-700);
    text-decoration: none;
}
.cabkd-triplink:hover[b-d4dfiwqdrh] { text-decoration: underline; }

.cabkd-meta-row[b-d4dfiwqdrh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}
.cabkd-meta-row > span[b-d4dfiwqdrh] { color: var(--nm-muted); display: inline-flex; align-items: center; gap: 5px; }
.cabkd-meta-row > b[b-d4dfiwqdrh] { font-weight: 600; color: var(--nm-ink); font-variant-numeric: tabular-nums; text-align: right; }
.cabkd-meta-row > b.cabkd-good[b-d4dfiwqdrh] { color: var(--nm-ok); }
.cabkd-meta-row > b.cabkd-bad[b-d4dfiwqdrh] { color: var(--nm-bad); }

.cabkd-total[b-d4dfiwqdrh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--nm-border);
}
.cabkd-total span[b-d4dfiwqdrh] { font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.cabkd-total b[b-d4dfiwqdrh] {
    font-size: 18px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
}

.cabkd-txn[b-d4dfiwqdrh] { font-size: 11px; color: var(--nm-muted); word-break: break-all; }

[b-d4dfiwqdrh] .cabkd-pay-cta { width: 100%; justify-content: center; }

/* ── Khối "Chi tiết giá nội bộ" — CHỈ System Role ── */
.mgbkd-internal[b-d4dfiwqdrh] {
    padding: 12px;
    margin: 0 -4px;
    border: 1px dashed color-mix(in srgb, var(--nm-warn) 55%, transparent);
    border-radius: var(--nm-r-card);
    background: color-mix(in srgb, var(--nm-warn) 4%, var(--nm-surface));
}
.mgbkd-system-badge[b-d4dfiwqdrh] {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-warn);
    color: #fff;
}
.mgbkd-sub-label[b-d4dfiwqdrh] { margin-top: 6px; text-transform: none; letter-spacing: 0; color: var(--nm-ink-2); }
.mgbkd-margin[b-d4dfiwqdrh] { padding-top: 6px; border-top: 1px dashed var(--nm-border); }

/* ── Modal ── */
.cabkd-modal-sub[b-d4dfiwqdrh] { margin: 0 0 10px; font-size: 13px; color: var(--nm-muted); }
.cabkd-modal-sub b[b-d4dfiwqdrh] { color: var(--nm-ink); }
.cabkd-modal-label[b-d4dfiwqdrh] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
    margin: 10px 0 6px;
}
.mgbkd-agree[b-d4dfiwqdrh] { margin-top: 10px; }

@media (max-width: 640px) {
    .nm-list-page[b-d4dfiwqdrh] { padding: 16px 14px 22px; }
    .cabkd-seg-route[b-d4dfiwqdrh] { gap: 10px; padding: 12px; }
    .cabkd-seg-pt[b-d4dfiwqdrh] { min-width: 70px; }
}
/* /src/Features/Bookings/Pages/Manager/BookingsIndex.razor.rz.scp.css */
/* /manager/booking/all — chuẩn nm-list: shell trang + dải thống kê + toolbar + cell helpers;
   chrome bảng do DataGrid/Nm* lo. Đồng bộ pattern với /ca/bookings (CaBookings.razor.css). */
.nm-list-page[b-9ocnis92f5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-9ocnis92f5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-9ocnis92f5] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-9ocnis92f5] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-9ocnis92f5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* nhãn phạm vi cạnh tiêu đề (Toàn hệ thống / Portfolio) */
.mgbk-scope[b-9ocnis92f5] {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-brand-700);
    background: var(--nm-brand-50);
    padding: 3px 10px;
    border-radius: var(--nm-r-pill);
    vertical-align: middle;
}

/* ── Dải thống kê mỏng — 1 hàng ── */
.mgbk-stats[b-9ocnis92f5] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.mgbk-stats[b-9ocnis92f5]::-webkit-scrollbar { display: none; }

.mgbk-stat[b-9ocnis92f5] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.mgbk-stat + .mgbk-stat[b-9ocnis92f5] { border-left: 1px solid var(--nm-border); }

/* mục "Cần chú ý" là nút bấm — reset chrome button */
.mgbk-stat--btn[b-9ocnis92f5] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.mgbk-stat--btn:hover .mgbk-stat__lbl[b-9ocnis92f5] { color: var(--nm-bad); }

.mgbk-stat__dot[b-9ocnis92f5] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.mgbk-stat__dot--accent[b-9ocnis92f5] { background: var(--nm-brand-500); }
.mgbk-stat__dot--good[b-9ocnis92f5]   { background: var(--nm-ok); }
.mgbk-stat__dot--warn[b-9ocnis92f5]   { background: var(--nm-warn); }
.mgbk-stat__dot--bad[b-9ocnis92f5]    { background: var(--nm-bad); }
.mgbk-stat__dot--muted[b-9ocnis92f5]  { background: var(--nm-muted); }

.mgbk-stat__lbl[b-9ocnis92f5] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.mgbk-stat__amt[b-9ocnis92f5] {
    font-size: 11px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}
.mgbk-stat__val[b-9ocnis92f5] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar filter ── */
.nm-list-toolbar[b-9ocnis92f5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-9ocnis92f5] { width: 280px; max-width: 100%; }
.tb-select[b-9ocnis92f5] { min-width: 130px; }
.tb-select--company[b-9ocnis92f5] { min-width: 210px; }
.tb-select--date[b-9ocnis92f5] { min-width: 140px; }
.tb-select--sort[b-9ocnis92f5] { min-width: 150px; }
.tb-filters[b-9ocnis92f5] { display: contents; }
[b-9ocnis92f5] .tb-clear { margin-left: auto; }

/* Cặp ô từ ngày – đến ngày */
.tb-daterange[b-9ocnis92f5] { display: inline-flex; align-items: center; gap: 6px; }
.tb-daterange__sep[b-9ocnis92f5] { color: var(--nm-muted); flex-shrink: 0; }
.tb-daterange[b-9ocnis92f5]  .nm-dateinput { width: 142px; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-9ocnis92f5] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-9ocnis92f5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Panel nâng cao ── */
.mgbk-advanced[b-9ocnis92f5] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.mgbk-adv-field[b-9ocnis92f5] { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.mgbk-adv-field--wide[b-9ocnis92f5] { flex: 1 1 240px; }
.mgbk-adv-lbl[b-9ocnis92f5] { font-size: 11.5px; font-weight: 700; color: var(--nm-muted); }
.mgbk-adv-amount[b-9ocnis92f5] { display: flex; align-items: center; gap: 6px; }
.mgbk-adv-amount span[b-9ocnis92f5] { color: var(--nm-muted); }
.mgbk-adv-amount[b-9ocnis92f5]  .nm-input-wrap { width: 120px; }
.mgbk-adv-actions[b-9ocnis92f5] { display: flex; gap: 8px; margin-left: auto; }

/* ── Chips trạng thái + số đếm ── */
.tb-status[b-9ocnis92f5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-9ocnis92f5] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

/* ── Tag bộ lọc đang áp ── */
.mgbk-active-tags[b-9ocnis92f5] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .tb-search[b-9ocnis92f5] { flex: 1; width: auto; }
    [b-9ocnis92f5] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-9ocnis92f5] { display: none; }
    .tb-filters.is-open[b-9ocnis92f5] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-9ocnis92f5] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-9ocnis92f5]  .nm-select-wrap,
    .tb-select[b-9ocnis92f5]  .nm-select { width: 100%; }
    .tb-filters.is-open .tb-daterange[b-9ocnis92f5] { flex: 1 1 100%; }
    .tb-daterange[b-9ocnis92f5]  .nm-dateinput-wrap { flex: 1; min-width: 0; }
    .tb-daterange[b-9ocnis92f5]  .nm-dateinput { width: 100%; }

    .tb-status[b-9ocnis92f5] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tb-status[b-9ocnis92f5]::-webkit-scrollbar { display: none; }
    .tb-status[b-9ocnis92f5]  .nm-chip { flex-shrink: 0; }
}

/* ── Cell helpers ── */
.cell-2line[b-9ocnis92f5] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-9ocnis92f5] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-2line__sub[b-9ocnis92f5] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-muted[b-9ocnis92f5] { color: var(--nm-muted); }
.cell-date[b-9ocnis92f5] { font-variant-numeric: tabular-nums; }
.cell-mono[b-9ocnis92f5] { font-family: ui-monospace, 'JetBrains Mono', monospace; }

/* mã booking — pill mono, click về chi tiết */
.cell-code[b-9ocnis92f5] { display: inline-flex; align-items: center; gap: 6px; }
.nm-code-pill[b-9ocnis92f5] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
}
a.nm-code-pill:hover[b-9ocnis92f5] { background: var(--nm-brand-100, var(--nm-brand-50)); text-decoration: underline; }

/* tag đơn cá nhân (P) cạnh mã — cùng hình dạng với màn CA */
.cell-flag[b-9ocnis92f5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
}

/* công ty — bấm để lọc theo công ty đó */
.cell-co[b-9ocnis92f5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.cell-co:hover .cell-2line__main[b-9ocnis92f5] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }

/* chip dịch vụ: icon tròn màu theo loại + nhãn (+ tuyến bay/tên KS dòng phụ) */
.cell-svc[b-9ocnis92f5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
}
.cell-svc__ico[b-9ocnis92f5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
    background: color-mix(in srgb, var(--svc, #6B7280) 12%, transparent);
    color: var(--svc, #6B7280);
    flex-shrink: 0;
}
.cell-svc--flight[b-9ocnis92f5]    { --svc: #0284c7; }
.cell-svc--hotel[b-9ocnis92f5]     { --svc: #7c3aed; }
.cell-svc--tour[b-9ocnis92f5]      { --svc: #059669; }
.cell-svc--visa[b-9ocnis92f5]      { --svc: #b45309; }
.cell-svc--esim[b-9ocnis92f5]      { --svc: #db2777; }
.cell-svc--fasttrack[b-9ocnis92f5] { --svc: #ea580c; }

/* tổng tiền — mono, canh phải */
.cell-amount[b-9ocnis92f5] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* hạn giữ chỗ/thanh toán — pill đếm ngược + mốc tuyệt đối bên dưới.
   Màu mã hoá mức gấp: còn >24h (ok) → ≤24h (warn) → ≤2h hoặc quá hạn (bad) → đã thu hồi (muted). */
.cell-deadline[b-9ocnis92f5] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    cursor: help;
}
.cell-deadline__main[b-9ocnis92f5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, var(--dl, var(--nm-muted)) 12%, transparent);
    color: var(--dl, var(--nm-muted));
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cell-deadline__sub[b-9ocnis92f5] {
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cell-deadline--ok[b-9ocnis92f5]    { --dl: var(--nm-ok); }
.cell-deadline--warn[b-9ocnis92f5]  { --dl: var(--nm-warn); }
.cell-deadline--bad[b-9ocnis92f5]   { --dl: var(--nm-bad); }
.cell-deadline--muted[b-9ocnis92f5] { --dl: var(--nm-muted); }

/* hàng đã huỷ / hết hạn — làm mờ nhẹ */
[b-9ocnis92f5] .mgbk-row-muted .nm-grid__td { opacity: .6; }

.nm-row-actions[b-9ocnis92f5] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer: tổng + phân trang ── */
.mgbk-foot[b-9ocnis92f5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.mgbk-total[b-9ocnis92f5] { font-size: 12.5px; color: var(--nm-muted); }
.mgbk-total strong[b-9ocnis92f5] { color: var(--nm-ink); font-weight: 700; }

@media (max-width: 640px) {
    .nm-list-page[b-9ocnis92f5] { padding: 16px 14px 22px; }
}
/* /src/Features/Bookings/Pages/Manager/BookingsPending.razor.rz.scp.css */
/* Bookings Pending — Theme "Manager Dashboard v4" */

.bookpending-root[b-1zkfzqph59] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

/* ─── Hero ─── */
.bookpending-hero[b-1zkfzqph59] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 16px 28px 12px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .bookpending-hero h1[b-1zkfzqph59] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .bookpending-hero h1 em[b-1zkfzqph59] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.bookpending-hero-meta[b-1zkfzqph59] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .bookpending-hero-meta .dot[b-1zkfzqph59] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.bookpending-badge[b-1zkfzqph59] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
    font-variant-numeric: tabular-nums;
}

    .bookpending-badge .num[b-1zkfzqph59] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
    }

/* ─── Toolbar ─── */
.bookpending-toolbar[b-1zkfzqph59] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.bookpending-search-wrap[b-1zkfzqph59] {
    position: relative;
}

.bookpending-search-ico[b-1zkfzqph59] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.bookpending-input[b-1zkfzqph59] {
    height: 38px;
    width: 260px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 0 12px 0 32px;
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .bookpending-input:focus[b-1zkfzqph59] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

/* Buttons */
.dash-btn[b-1zkfzqph59] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
    white-space: nowrap;
}

    .dash-btn:hover[b-1zkfzqph59] { background: var(--d-surface-2); }

.dash-btn-accent[b-1zkfzqph59] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .dash-btn-accent:hover[b-1zkfzqph59] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-1zkfzqph59] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-1zkfzqph59] { background: var(--d-surface-2); color: var(--d-ink); }

.dash-btn-compact[b-1zkfzqph59] {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

    .dash-btn:disabled[b-1zkfzqph59] { opacity: 0.5; cursor: not-allowed; }

/* Layout */
.bookpending-content[b-1zkfzqph59] {
    flex: 1;
    min-height: 0;
    padding: 0 28px 12px;
    display: flex;
}

.bookpending-card[b-1zkfzqph59] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: auto;
    flex: 1;
}

.bookpending-pagination[b-1zkfzqph59] {
    padding: 0 28px 12px;
    flex-shrink: 0;
}

/* Tables */
.bookpending-tbl[b-1zkfzqph59] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .bookpending-tbl thead th[b-1zkfzqph59] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .bookpending-tbl thead th.right[b-1zkfzqph59] { text-align: right; }
        .bookpending-tbl thead th.center[b-1zkfzqph59] { text-align: center; }

    .bookpending-tbl tbody td[b-1zkfzqph59] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .bookpending-tbl tbody tr:last-child td[b-1zkfzqph59] { border-bottom: 0; }
    .bookpending-tbl tbody tr:hover[b-1zkfzqph59] { background: var(--d-surface-2); }
    .bookpending-tbl td.right[b-1zkfzqph59] { text-align: right; }
    .bookpending-tbl td.center[b-1zkfzqph59] { text-align: center; }

.bookpending-stt[b-1zkfzqph59] {
    color: var(--d-ink-4);
    font-size: 11.5px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.bookpending-tbl-link[b-1zkfzqph59] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
}

    .bookpending-tbl-link:hover[b-1zkfzqph59] { text-decoration: underline; }

.bookpending-tag-b2b[b-1zkfzqph59] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, #2563eb 10%, #fff);
    color: #2563eb;
    font-size: 9.5px;
    font-weight: 700;
    margin-left: 6px;
}

.bookpending-svc[b-1zkfzqph59] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--d-ink-2);
    font-size: 12.5px;
}

.bookpending-pax-name[b-1zkfzqph59] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
}

.bookpending-pax-extra[b-1zkfzqph59] {
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}

.bookpending-pax-empty[b-1zkfzqph59] {
    color: var(--d-ink-4);
}

.bookpending-amount[b-1zkfzqph59] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    color: var(--d-ink);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.bookpending-expires-soon[b-1zkfzqph59] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--d-warn) 12%, #fff);
    color: color-mix(in srgb, var(--d-warn) 80%, #000);
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, #fff);
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.bookpending-expired[b-1zkfzqph59] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--d-danger) 12%, #fff);
    color: color-mix(in srgb, var(--d-danger) 80%, #000);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, #fff);
}

.bookpending-expires-time[b-1zkfzqph59] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* Status pill (soft) */
.bookpending-status[b-1zkfzqph59] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

    .bookpending-status .d[b-1zkfzqph59] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }

    .bookpending-status.warn[b-1zkfzqph59] {
        background: color-mix(in srgb, var(--d-warn) 12%, #fff);
        color: color-mix(in srgb, var(--d-warn) 80%, #000);
        border-color: color-mix(in srgb, var(--d-warn) 30%, #fff);
    }

    .bookpending-status.warn .d[b-1zkfzqph59] { background: var(--d-warn); }

    .bookpending-status.good[b-1zkfzqph59] {
        background: color-mix(in srgb, var(--d-good) 12%, #fff);
        color: color-mix(in srgb, var(--d-good) 80%, #000);
        border-color: color-mix(in srgb, var(--d-good) 30%, #fff);
    }

    .bookpending-status.good .d[b-1zkfzqph59] { background: var(--d-good); }

    .bookpending-status.danger[b-1zkfzqph59] {
        background: color-mix(in srgb, var(--d-danger) 12%, #fff);
        color: color-mix(in srgb, var(--d-danger) 80%, #000);
        border-color: color-mix(in srgb, var(--d-danger) 30%, #fff);
    }

    .bookpending-status.danger .d[b-1zkfzqph59] { background: var(--d-danger); }

    .bookpending-status.accent[b-1zkfzqph59] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 25%, #fff);
    }

    .bookpending-status.accent .d[b-1zkfzqph59] { background: var(--d-accent); }

    .bookpending-status.muted[b-1zkfzqph59] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

    .bookpending-status.muted .d[b-1zkfzqph59] { background: var(--d-ink-4); }

.bookpending-actions[b-1zkfzqph59] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

/* Empty state */
.bookpending-empty[b-1zkfzqph59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .bookpending-empty svg[b-1zkfzqph59] { color: var(--d-good); margin-bottom: 6px; }
    .bookpending-empty b[b-1zkfzqph59] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
    .bookpending-empty small[b-1zkfzqph59] { font-size: 12px; }
/* /src/Features/Bookings/Pages/Manager/BookingsPreview.razor.rz.scp.css */
/* Moved from inline <style> in BookingsPreview.razor (now scoped). */
    .num[b-mtjlb1jp4s] { font-variant-numeric: tabular-nums; }
    .route-line[b-mtjlb1jp4s] {
        background-image: linear-gradient(to right, #cbd5e1 50%, transparent 0%);
        background-size: 6px 1px;
        background-repeat: repeat-x;
        background-position: center;
    }
    .row-expiring[b-mtjlb1jp4s] { background: linear-gradient(90deg, rgba(239,68,68,.06), transparent 35%); }
    @@keyframes pulseRing {
        0%[b-mtjlb1jp4s] { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
        100%[b-mtjlb1jp4s] { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    }
    .pulse-ring[b-mtjlb1jp4s] { animation: pulseRing 1.6s ease-out infinite; }
    .scroll-thin[b-mtjlb1jp4s]::-webkit-scrollbar { width: 8px; height: 8px; }
    .scroll-thin[b-mtjlb1jp4s]::-webkit-scrollbar-thumb { background: #DDE1E8; border-radius: 8px; }
/* /src/Features/Bookings/Pages/Manager/FlightSearch.razor.rz.scp.css */
/* Flight Search — Theme "Manager Dashboard v4" */

.flightsearch-root[b-tclj221ngp] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    min-height: calc(100vh - 64px);
    padding: 16px 28px 24px;
}

.flightsearch-stack > * + *[b-tclj221ngp] {
    margin-top: 20px;
}

/* ─── Hero ─── */
.flightsearch-hero[b-tclj221ngp] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
}

    .flightsearch-hero h1[b-tclj221ngp] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .flightsearch-hero h1 em[b-tclj221ngp] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.flightsearch-hero-meta[b-tclj221ngp] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .flightsearch-hero-meta .dot[b-tclj221ngp] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

/* Card */
.flightsearch-card[b-tclj221ngp] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.flightsearch-card-hd[b-tclj221ngp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--d-line-2);
}

    .flightsearch-card-hd h3[b-tclj221ngp] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

/* Form grid */
.flightsearch-form-grid[b-tclj221ngp] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .flightsearch-form-grid[b-tclj221ngp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .flightsearch-form-grid[b-tclj221ngp] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.flightsearch-field[b-tclj221ngp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.flightsearch-label[b-tclj221ngp] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.flightsearch-input[b-tclj221ngp] {
    height: 38px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 0 12px;
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    width: 100%;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

    .flightsearch-input:focus[b-tclj221ngp] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255,107,0, 0.12);
    }

.flightsearch-error[b-tclj221ngp] {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, #fff);
    padding: 8px 12px;
    border-radius: var(--d-r);
}

.flightsearch-actions[b-tclj221ngp] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--d-line-2);
}

/* Buttons */
.dash-btn[b-tclj221ngp] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
    white-space: nowrap;
}

    .dash-btn:hover[b-tclj221ngp] { background: var(--d-surface-2); }

.dash-btn-accent[b-tclj221ngp] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255,107,0, 0.18), 0 4px 12px -2px rgba(255,107,0, 0.22);
}

    .dash-btn-accent:hover[b-tclj221ngp] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .dash-btn:disabled[b-tclj221ngp] { opacity: 0.5; cursor: not-allowed; }
/* /src/Features/Content/Pages/Manager/AnnouncementEdit.razor.rz.scp.css */
/* === Announcement Edit page — 2-col layout + sticky preview === */
.anne-root[b-x2yc059d4d] {
    --d-bg: #f8fafc; /* match parent ManagerLayout bg-slate-50 */
    --d-card: #ffffff;
    --d-ink-1: #1a1410;
    --d-ink-2: #4a3c30;
    --d-ink-3: #7a6850;
    --d-ink-4: #a89880;
    --d-line: #e8dcc8;
    --d-accent: #f97316;
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    padding: 18px 28px 32px;
    background: transparent;
    min-height: calc(100vh - 56px);
}

/* Topbar */
.anne-topbar[b-x2yc059d4d] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding: 8px 0 14px;
    border-bottom: 1px solid var(--d-line);
    position: sticky; top: 0; background: var(--d-bg); z-index: 10;
}
.anne-crumbs[b-x2yc059d4d] {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--d-ink-3);
}
.anne-back[b-x2yc059d4d] {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--d-ink-2); text-decoration: none;
    padding: 4px 8px; border-radius: 6px; transition: background .15s;
}
.anne-back:hover[b-x2yc059d4d] { background: #fbf6ef; color: var(--d-accent); }
.anne-crumb-sep[b-x2yc059d4d] { color: var(--d-ink-4); }
.anne-crumb-current[b-x2yc059d4d] { color: var(--d-ink-1); font-weight: 500; }
.anne-topbar-actions[b-x2yc059d4d] { display: flex; gap: 8px; }

/* Banner */
.anne-banner[b-x2yc059d4d] {
    padding: 10px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 500; margin-bottom: 14px;
}
.anne-banner.error[b-x2yc059d4d] { background: #fef2f2; color: var(--d-danger); border: 1px solid #fecaca; }

/* Loading */
.anne-loading[b-x2yc059d4d] {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 80px 0; color: var(--d-ink-3);
}
.anne-spinner[b-x2yc059d4d] {
    width: 28px; height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: anne-spin-b-x2yc059d4d 0.7s linear infinite;
}
@keyframes anne-spin-b-x2yc059d4d { to { transform: rotate(360deg); } }

/* Grid layout */
.anne-grid[b-x2yc059d4d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: flex-start;
}
@media (max-width: 1100px) {
    .anne-grid[b-x2yc059d4d] { grid-template-columns: 1fr; }
    .anne-preview[b-x2yc059d4d] { position: static !important; }
}

/* Form column */
.anne-form[b-x2yc059d4d] { display: flex; flex-direction: column; gap: 16px; }

/* Section card */
.anne-section[b-x2yc059d4d] {
    background: var(--d-card); border: 1px solid var(--d-line);
    border-radius: 12px; overflow: hidden;
}
.anne-section-hd[b-x2yc059d4d] {
    padding: 14px 20px; border-bottom: 1px solid var(--d-line);
    background: #fbf6ef;
}
.anne-section-hd h3[b-x2yc059d4d] {
    margin: 0; font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px; font-weight: 500; color: var(--d-ink-1);
}
.anne-section-hd small[b-x2yc059d4d] { display: block; font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }
.anne-section-body[b-x2yc059d4d] { padding: 18px 20px; }

/* Fields */
.anne-field[b-x2yc059d4d] { margin-bottom: 14px; }
.anne-field:last-child[b-x2yc059d4d] { margin-bottom: 0; }
.anne-field label[b-x2yc059d4d] {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 500; color: var(--d-ink-2);
}
.anne-field label small[b-x2yc059d4d] { color: var(--d-ink-4); font-weight: 400; }
.anne-field label .req[b-x2yc059d4d] { color: var(--d-danger); }
.anne-input[b-x2yc059d4d], .anne-textarea[b-x2yc059d4d] {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--d-line); border-radius: 7px;
    font-size: 14px; color: var(--d-ink-1); background: #fefcf8;
    font-family: inherit;
}
.anne-input:focus[b-x2yc059d4d], .anne-textarea:focus[b-x2yc059d4d] {
    outline: none; border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}
.anne-input.is-invalid[b-x2yc059d4d], .anne-textarea.is-invalid[b-x2yc059d4d] {
    border-color: var(--d-danger);
    background: #fef9f9;
}
.anne-input.is-invalid:focus[b-x2yc059d4d], .anne-textarea.is-invalid:focus[b-x2yc059d4d] {
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.anne-field-err[b-x2yc059d4d] {
    font-size: 11.5px;
    color: var(--d-danger);
    margin-top: 6px;
    display: flex; align-items: center; gap: 4px;
    font-weight: 500;
}
.anne-field-err[b-x2yc059d4d]::before {
    content: "⚠";
    font-size: 12px;
}

/* Validation summary banner */
.anne-validation-hd[b-x2yc059d4d] {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 6px;
}
.anne-validation-list[b-x2yc059d4d] {
    margin: 0; padding-left: 22px;
    font-size: 12.5px; line-height: 1.7;
}
.anne-validation-list li[b-x2yc059d4d]::marker { color: var(--d-danger); }
.anne-textarea[b-x2yc059d4d] { resize: vertical; min-height: 70px; }
.anne-grid-2[b-x2yc059d4d] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.anne-hint[b-x2yc059d4d] { font-size: 11px; color: var(--d-ink-3); margin-top: 6px; }
.anne-hint b[b-x2yc059d4d] { color: var(--d-ink-1); font-weight: 600; }

/* Buttons */
.anne-btn[b-x2yc059d4d] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border-radius: 7px;
    font-size: 14px; font-weight: 500;
    border: 1px solid var(--d-line); background: var(--d-card); color: var(--d-ink-1);
    cursor: pointer; transition: all .15s;
}
.anne-btn:hover:not(:disabled)[b-x2yc059d4d] { border-color: var(--d-ink-4); }
.anne-btn:disabled[b-x2yc059d4d] { opacity: .55; cursor: not-allowed; }
.anne-btn-accent[b-x2yc059d4d] { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
.anne-btn-accent:hover:not(:disabled)[b-x2yc059d4d] { background: #ea580c; border-color: #ea580c; }
.anne-btn-ghost[b-x2yc059d4d] { background: transparent; }
.anne-btn-sm[b-x2yc059d4d] { padding: 5px 10px; font-size: 12px; }

/* Image upload */
.anne-upload[b-x2yc059d4d] {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 30px 20px; border-radius: 10px;
    border: 2px dashed var(--d-line); background: #fefcf8;
    color: var(--d-ink-3); cursor: pointer; transition: all .15s;
}
.anne-upload:hover[b-x2yc059d4d] { border-color: var(--d-accent); color: var(--d-accent); background: #fff7ed; }
.anne-upload-text[b-x2yc059d4d] { font-size: 14px; color: var(--d-ink-2); font-weight: 500; }
.anne-upload-hint[b-x2yc059d4d] { font-size: 11px; color: var(--d-ink-4); }
.anne-upload-loading[b-x2yc059d4d] {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--d-accent); font-size: 14px;
}
.anne-img-wrap[b-x2yc059d4d] {
    position: relative; border: 1px solid var(--d-line); border-radius: 8px;
    overflow: hidden; background: #fbf6ef;
}
.anne-img-wrap img[b-x2yc059d4d] {
    display: block; width: 100%; max-height: 260px; object-fit: cover;
}
.anne-img-remove[b-x2yc059d4d] {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; border: 0;
    cursor: pointer; font-size: 20px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.anne-img-remove:hover[b-x2yc059d4d] { background: rgba(220,38,38,.85); }

/* Audience tabs */
.anne-audience-tabs[b-x2yc059d4d] {
    display: flex; gap: 4px;
    background: #fbf6ef; padding: 3px; border-radius: 8px;
    margin-bottom: 4px;
}
.anne-audience-tab[b-x2yc059d4d] {
    flex: 1; padding: 8px 12px;
    background: transparent; border: 0; border-radius: 6px;
    font-size: 12px; color: var(--d-ink-3); cursor: pointer;
    font-family: inherit; transition: all .15s; font-weight: 500;
}
.anne-audience-tab:hover[b-x2yc059d4d] { color: var(--d-ink-1); }
.anne-audience-tab.on[b-x2yc059d4d] {
    background: var(--d-card); color: var(--d-accent);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* Picker — 2 columns */
.anne-audience-picker[b-x2yc059d4d] { margin-top: 14px; }
.anne-picker-toolbar[b-x2yc059d4d] {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 10px;
}
.anne-picker-toolbar .anne-input[b-x2yc059d4d] { flex: 1; }
.anne-picker-cols[b-x2yc059d4d] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.anne-picker-col[b-x2yc059d4d] {
    border: 1px solid var(--d-line); border-radius: 8px;
    background: #fefcf8; overflow: hidden;
    display: flex; flex-direction: column;
}
.anne-picker-hd[b-x2yc059d4d] {
    padding: 9px 12px; font-size: 11px; font-weight: 600;
    color: var(--d-ink-3); text-transform: uppercase; letter-spacing: .5px;
    background: #fbf6ef; border-bottom: 1px solid var(--d-line);
    display: flex; justify-content: space-between; align-items: center;
}
.anne-picker-hd-selected[b-x2yc059d4d] { color: var(--d-accent); }
.anne-picker-list[b-x2yc059d4d] {
    max-height: 320px; overflow-y: auto;
}
.anne-picker-row[b-x2yc059d4d] {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; background: transparent; border: 0;
    border-bottom: 1px solid var(--d-line);
    font-size: 12px; text-align: left; cursor: pointer;
    color: var(--d-ink-2); transition: background .12s;
    font-family: inherit;
}
.anne-picker-row:last-child[b-x2yc059d4d] { border-bottom: 0; }
.anne-picker-row:hover[b-x2yc059d4d] { background: #fff7ed; color: var(--d-accent); }
.anne-picker-row.selected:hover[b-x2yc059d4d] { background: #fef2f2; color: var(--d-danger); }
.anne-picker-row .code[b-x2yc059d4d] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; padding: 1px 6px; border-radius: 4px;
    background: #fff; border: 1px solid var(--d-line); color: var(--d-ink-3);
    flex-shrink: 0;
}
.anne-picker-row .name[b-x2yc059d4d] { flex: 1; color: var(--d-ink-1); }
.anne-picker-row svg[b-x2yc059d4d] { opacity: .5; }
.anne-picker-empty[b-x2yc059d4d] {
    padding: 28px 12px; text-align: center;
    color: var(--d-ink-4); font-size: 12px;
}

.anne-pill[b-x2yc059d4d] {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 999px;
    background: var(--d-card); color: var(--d-ink-2);
    font-size: 11px; font-weight: 600;
    border: 1px solid var(--d-line);
}
.anne-pill-accent[b-x2yc059d4d] { background: var(--d-accent); color: #fff; border-color: var(--d-accent); }

/* Toggle row (active/inactive) */
.anne-toggle-row[b-x2yc059d4d] {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; width: 100%;
}
.anne-toggle-row input[b-x2yc059d4d] { width: 18px; height: 18px; accent-color: var(--d-accent); }
.anne-toggle-label[b-x2yc059d4d] { display: flex; flex-direction: column; line-height: 1.2; }
.anne-toggle-label b[b-x2yc059d4d] { font-size: 14px; color: var(--d-ink-1); font-weight: 500; }
.anne-toggle-label small[b-x2yc059d4d] { font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }

/* === Preview column === */
.anne-preview[b-x2yc059d4d] { position: sticky; top: 76px; }
.anne-preview-card[b-x2yc059d4d] {
    background: var(--d-card); border: 1px solid var(--d-line);
    border-radius: 12px; overflow: hidden;
}
.anne-preview-hd[b-x2yc059d4d] {
    padding: 14px 20px; border-bottom: 1px solid var(--d-line); background: #fbf6ef;
}
.anne-preview-hd h3[b-x2yc059d4d] {
    margin: 0; font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px; font-weight: 500; color: var(--d-ink-1);
}
.anne-preview-hd small[b-x2yc059d4d] { display: block; font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }
.anne-preview-body[b-x2yc059d4d] { padding: 16px; }

/* Preview slide (mimics dashboard mkt) */
.prev-mkt[b-x2yc059d4d] {
    position: relative; border-radius: 10px; overflow: hidden;
    min-height: 168px; padding: 18px 22px;
    color: #fff; display: flex; align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.prev-mkt-gradient[b-x2yc059d4d] {
    background: linear-gradient(120deg, #7a2a0a 0%, #c14a1f 55%, #e85d2c 100%);
}
.prev-mkt-image[b-x2yc059d4d] {
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.prev-mkt-image[b-x2yc059d4d]::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(95deg,
        rgba(15,10,6,.58) 0%,
        rgba(15,10,6,.42) 22%,
        rgba(15,10,6,.18) 50%,
        rgba(15,10,6,0) 75%);
    pointer-events: none;
}
.prev-mkt-copy[b-x2yc059d4d] { position: relative; z-index: 1; }
.prev-mkt-image .prev-mkt-copy[b-x2yc059d4d] { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.prev-mkt-image .prev-mkt-cta[b-x2yc059d4d] { text-shadow: none; }
.prev-mkt-eyebrow[b-x2yc059d4d] {
    font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    opacity: .9; margin-bottom: 6px;
    display: inline-flex; align-items: center; gap: 6px;
}
.prev-mkt-eyebrow[b-x2yc059d4d]::before { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .7; }
.prev-mkt-title[b-x2yc059d4d] { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.prev-mkt-desc[b-x2yc059d4d] { font-size: 12px; opacity: .85; margin-top: 5px; line-height: 1.45; }
.prev-mkt-cta[b-x2yc059d4d] {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 10px; font-size: 11.5px; font-weight: 600;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
    padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(4px);
}

/* Preview meta */
.anne-preview-meta[b-x2yc059d4d] { margin-top: 14px; }
.anne-preview-row[b-x2yc059d4d] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--d-line);
    font-size: 12px;
}
.anne-preview-row:last-child[b-x2yc059d4d] { border-bottom: 0; }
.anne-preview-row .lbl[b-x2yc059d4d] { color: var(--d-ink-3); }
.anne-preview-row .val[b-x2yc059d4d] { color: var(--d-ink-1); }

/* Tags */
.anne-tag[b-x2yc059d4d] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 500;
}
.anne-tag.good[b-x2yc059d4d] { background: #f0fdf4; color: var(--d-good); }
.anne-tag.draft[b-x2yc059d4d] { background: #f5f5f4; color: var(--d-ink-4); }
.anne-tag.accent[b-x2yc059d4d] { background: #fff7ed; color: var(--d-accent); }
.anne-tag.warn[b-x2yc059d4d] { background: #fefce8; color: var(--d-warn); }
.anne-tag .d[b-x2yc059d4d] { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* /src/Features/Content/Pages/Manager/AnnouncementIndex.razor.rz.scp.css */
/* /manager/announcements — chuẩn nm-list: shell trang + dải thống kê + toolbar + cell helpers.
   Các class .nm-list-* KHÔNG global, mỗi trang tự khai — khung copy từ PoliciesIndex để các màn
   quản trị nhìn như một hệ. Chỉ dùng token --nm-*, không hex rời. */

.nm-list-page[b-9u8roh2v4i] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-9u8roh2v4i] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-9u8roh2v4i] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-9u8roh2v4i] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-9u8roh2v4i] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng — 5 mục đầu là nút lọc trạng thái ── */
.ann-stats[b-9u8roh2v4i] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.ann-stats[b-9u8roh2v4i]::-webkit-scrollbar { display: none; }

.ann-stat[b-9u8roh2v4i] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.ann-stat + .ann-stat[b-9u8roh2v4i] { border-left: 1px solid var(--nm-border); }

.ann-stat--btn[b-9u8roh2v4i] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.ann-stats > .ann-stat--btn:first-child[b-9u8roh2v4i] { border-left: 0; }
.ann-stat--btn:hover .ann-stat__lbl[b-9u8roh2v4i] { color: var(--nm-ink); }
/* Tab đang mở — đổi màu chữ thay vì đổi nền, để dải vẫn đọc như một hàng số liệu */
.ann-stat--btn.is-on .ann-stat__lbl[b-9u8roh2v4i] { color: var(--nm-brand-700); font-weight: 700; }
.ann-stat--btn.is-on .ann-stat__val[b-9u8roh2v4i] { color: var(--nm-brand-700); }

.ann-stat__dot[b-9u8roh2v4i] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.ann-stat__dot--accent[b-9u8roh2v4i] { background: var(--nm-brand-500); }
.ann-stat__dot--good[b-9u8roh2v4i]   { background: var(--nm-ok); }
.ann-stat__dot--info[b-9u8roh2v4i]   { background: var(--nm-info); }
.ann-stat__dot--bad[b-9u8roh2v4i]    { background: var(--nm-bad); }
.ann-stat__dot--muted[b-9u8roh2v4i]  { background: var(--nm-border-strong); }

.ann-stat__lbl[b-9u8roh2v4i] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.ann-stat__val[b-9u8roh2v4i] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* Mục cuối chỉ để đọc (không lọc được) — bỏ chấm màu, chữ nhạt hơn một bậc */
.ann-stat--info[b-9u8roh2v4i] { cursor: help; }
.ann-stat--info .ann-stat__val[b-9u8roh2v4i] { font-size: 13px; font-weight: 700; color: var(--nm-ink-2); }

/* ── Toolbar ── */
.nm-list-toolbar[b-9u8roh2v4i] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-9u8roh2v4i] { width: 320px; max-width: 100%; }
.tb-select[b-9u8roh2v4i] { min-width: 150px; }
.tb-select--sort[b-9u8roh2v4i] { min-width: 175px; }
.tb-select--audience[b-9u8roh2v4i] { min-width: 170px; }
.tb-filters[b-9u8roh2v4i] { display: contents; }
[b-9u8roh2v4i] .tb-clear { margin-left: auto; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-9u8roh2v4i] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-9u8roh2v4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* Giải thích vì sao mũi tên đổi thứ tự đang tắt */
.ann-reorder-hint[b-9u8roh2v4i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 7px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 12px;
}
.ann-reorder-hint i[b-9u8roh2v4i] { color: var(--nm-info); }

/* ── Cột thứ tự ── */
.ann-order[b-9u8roh2v4i] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.ann-order__no[b-9u8roh2v4i] {
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ── Cột slide: ảnh + chữ y như thứ tự đọc trên carousel ── */
.ann-slide[b-9u8roh2v4i] { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }

.ann-thumb[b-9u8roh2v4i] {
    width: 76px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--nm-r-input);
    object-fit: cover;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
}
.ann-thumb--empty[b-9u8roh2v4i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--nm-muted);
    font-size: 16px;
}

.ann-slide__copy[b-9u8roh2v4i] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ann-slide__eyebrow[b-9u8roh2v4i] {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--nm-brand-600);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.ann-slide__title[b-9u8roh2v4i] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    line-height: 1.35;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ann-slide__title:hover[b-9u8roh2v4i] { color: var(--nm-brand-700); text-decoration: underline; }
.ann-slide__desc[b-9u8roh2v4i] {
    font-size: 11.5px;
    color: var(--nm-muted);
    line-height: 1.4;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ann-slide__cta[b-9u8roh2v4i] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--nm-muted);
    cursor: help;
}

/* ── Cell chung ── */
.cell-2line[b-9u8roh2v4i] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-9u8roh2v4i] { font-weight: 500; color: var(--nm-ink); white-space: nowrap; }
.cell-muted[b-9u8roh2v4i] { color: var(--nm-muted); }
.cell-date[b-9u8roh2v4i] { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cell-mono[b-9u8roh2v4i] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; }

.ann-sched-note[b-9u8roh2v4i] { font-size: 10.5px; font-weight: 600; }
.ann-sched-note--muted[b-9u8roh2v4i] { color: var(--nm-muted); font-weight: 500; }
.ann-sched-note--warn[b-9u8roh2v4i] { color: var(--nm-warn); }
.ann-sched-note--bad[b-9u8roh2v4i] { color: var(--nm-bad); }

/* Công tắc điều khiển ở trên, nhãn trạng thái suy ra ở dưới */
.ann-status[b-9u8roh2v4i] { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }

.nm-row-actions[b-9u8roh2v4i] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Slide không chạy — làm nhạt cả dòng để mắt bám vào những slide đang lên sóng */
[b-9u8roh2v4i] .ann-row-dim .nm-grid__td { opacity: .62; }
[b-9u8roh2v4i] .ann-row-dim .nm-grid__td:last-child,
[b-9u8roh2v4i] .ann-row-dim .nm-grid__td:first-child { opacity: 1; }

/* ── Footer ── */
.ann-foot[b-9u8roh2v4i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 14px;
}
.ann-total[b-9u8roh2v4i] { font-size: 12.5px; color: var(--nm-muted); }

/* ── Xem trước slide (modal) ── */
.prev-slide[b-9u8roh2v4i] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 172px;
    padding: 20px 24px;
    border-radius: var(--nm-r-card);
    overflow: hidden;
    color: #fff;
}
.prev-slide--gradient[b-9u8roh2v4i] {
    background: linear-gradient(120deg, #7a2a0a 0%, #c14a1f 55%, #e85d2c 100%);
}
.prev-slide--image[b-9u8roh2v4i] { background-size: cover; background-position: center; }
.prev-slide--image[b-9u8roh2v4i]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, rgba(15,10,6,.62) 0%, rgba(15,10,6,.4) 30%, rgba(15,10,6,0) 78%);
}
.prev-slide__copy[b-9u8roh2v4i] { position: relative; z-index: 1; }
.prev-slide--image .prev-slide__copy[b-9u8roh2v4i] { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.prev-slide__eyebrow[b-9u8roh2v4i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .9;
}
.prev-slide__eyebrow[b-9u8roh2v4i]::before { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .7; }
.prev-slide__title[b-9u8roh2v4i] { font-size: 17px; font-weight: 700; line-height: 1.28; }
.prev-slide__desc[b-9u8roh2v4i] { margin-top: 6px; font-size: 12.5px; line-height: 1.45; opacity: .88; max-width: 52ch; }
.prev-slide__cta[b-9u8roh2v4i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    padding: 5px 11px;
    border-radius: var(--nm-r-input);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    font-size: 11.5px;
    font-weight: 600;
    text-shadow: none;
}

.prev-meta[b-9u8roh2v4i] { margin-top: 16px; }

@media (max-width: 640px) {
    .nm-list-page[b-9u8roh2v4i] { padding: 16px 14px 22px; }
    .tb-search[b-9u8roh2v4i] { flex: 1; width: auto; }
    [b-9u8roh2v4i] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-9u8roh2v4i] { display: none; }
    .tb-filters.is-open[b-9u8roh2v4i] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-9u8roh2v4i] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-9u8roh2v4i]  .nm-select-wrap,
    .tb-select[b-9u8roh2v4i]  .nm-select { width: 100%; }

    .ann-thumb[b-9u8roh2v4i] { width: 56px; height: 36px; }
    .ann-slide__desc[b-9u8roh2v4i] { display: none; }
}
/* /src/Features/Content/Pages/Manager/BannerIndex.razor.rz.scp.css */
/* /manager/banners — chuẩn nm-list (khung copy từ /manager/services/insurance để 2 màn quản trị
   nhìn như một hệ). Chỉ dùng token --nm-*, KHÔNG hex rời, KHÔNG --d-*/--ca-*.
   Các class .nm-list-* không global[b-f1cplr0ins], mỗi trang tự khai. Prefix riêng: bnr- */

.nm-list-page[b-f1cplr0ins] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-f1cplr0ins] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-f1cplr0ins] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-f1cplr0ins] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-f1cplr0ins] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải trạng thái sống — 1 hàng, mỗi mục là nút lọc ── */
.bnr-stats[b-f1cplr0ins] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.bnr-stats[b-f1cplr0ins]::-webkit-scrollbar { display: none; }

.bnr-stat[b-f1cplr0ins] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.bnr-stats > .bnr-stat:first-child[b-f1cplr0ins] { border-left: 0; }
.bnr-stat:hover .bnr-stat__lbl[b-f1cplr0ins] { color: var(--nm-ink); }
/* Mục đang lọc — đổi màu chữ thay vì đổi nền, để dải vẫn đọc như một hàng số liệu */
.bnr-stat.is-on .bnr-stat__lbl[b-f1cplr0ins] { color: var(--nm-brand-700); font-weight: 700; }
.bnr-stat.is-on .bnr-stat__val[b-f1cplr0ins] { color: var(--nm-brand-700); }

.bnr-stat__dot[b-f1cplr0ins] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.bnr-stat__dot--accent[b-f1cplr0ins] { background: var(--nm-brand-500); }
.bnr-stat__dot--good[b-f1cplr0ins]   { background: var(--nm-ok); }
.bnr-stat__dot--info[b-f1cplr0ins]   { background: var(--nm-info); }
.bnr-stat__dot--warn[b-f1cplr0ins]   { background: var(--nm-warn); }
.bnr-stat__dot--muted[b-f1cplr0ins]  { background: var(--nm-muted); }

.bnr-stat__lbl[b-f1cplr0ins] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.bnr-stat__val[b-f1cplr0ins] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-f1cplr0ins] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-f1cplr0ins] { width: 340px; max-width: 100%; }
[b-f1cplr0ins] .tb-clear { margin-left: auto; }

.tb-status[b-f1cplr0ins] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-f1cplr0ins] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

/* ── Cột thứ tự: số + 2 nút đổi chỗ (dùng endpoint reorder sẵn có) ── */
.bnr-order[b-f1cplr0ins] { display: inline-flex; align-items: center; gap: 6px; }
.bnr-order__pill[b-f1cplr0ins] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bnr-order__nav[b-f1cplr0ins] { display: inline-flex; flex-direction: column; gap: 1px; }
.bnr-order__btn[b-f1cplr0ins] {
    width: 20px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    color: var(--nm-muted);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.bnr-order__btn:first-child[b-f1cplr0ins] { border-radius: 5px 5px 0 0; }
.bnr-order__btn:last-child[b-f1cplr0ins] { border-radius: 0 0 5px 5px; }
.bnr-order__btn:hover:not(:disabled)[b-f1cplr0ins] {
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-600, var(--nm-brand-500));
    background: var(--nm-brand-50);
}
.bnr-order__btn:disabled[b-f1cplr0ins] { opacity: .35; cursor: not-allowed; }

/* ── Cột banner: ảnh + nội dung ── */
.bnr-cell[b-f1cplr0ins] { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bnr-thumb[b-f1cplr0ins] {
    flex-shrink: 0;
    width: 104px;
    height: 60px;
    padding: 0;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    overflow: hidden;
    cursor: zoom-in;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bnr-thumb:disabled[b-f1cplr0ins] { cursor: default; }
.bnr-thumb img[b-f1cplr0ins] { width: 100%; height: 100%; object-fit: cover; display: block; }
.bnr-thumb__empty[b-f1cplr0ins] { font-size: 10.5px; color: var(--nm-muted); padding: 0 6px; text-align: center; }

.bnr-cell__text[b-f1cplr0ins] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.bnr-badge[b-f1cplr0ins] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.bnr-cell__title[b-f1cplr0ins] {
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
.bnr-cell__sub[b-f1cplr0ins] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
.bnr-cell__link[b-f1cplr0ins] {
    font-size: 11px;
    color: var(--nm-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 340px;
}
.bnr-cell__link:hover[b-f1cplr0ins] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }

/* ── Chip vị trí ── */
.bnr-places[b-f1cplr0ins] { display: flex; flex-wrap: wrap; gap: 4px; }
.bnr-place[b-f1cplr0ins] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.bnr-place.is-index[b-f1cplr0ins]  { background: var(--nm-info-soft);   color: var(--nm-info); }
.bnr-place.is-auth[b-f1cplr0ins]   { background: var(--nm-brand-50);    color: var(--nm-brand-700); }
.bnr-place.is-page[b-f1cplr0ins]   { background: var(--nm-violet-soft); color: var(--nm-violet); }
.bnr-place.is-popup[b-f1cplr0ins]  { background: var(--nm-warn-soft);   color: var(--nm-warn); }
.bnr-place.is-none[b-f1cplr0ins]   { background: var(--nm-surface-2);   color: var(--nm-muted); }

/* ── Cột lịch ── */
.bnr-sched[b-f1cplr0ins] { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--nm-ink-2); }
.bnr-sched__row[b-f1cplr0ins] { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.bnr-sched__row i[b-f1cplr0ins] { color: var(--nm-muted); font-size: 11px; }
.bnr-sched__none[b-f1cplr0ins] { color: var(--nm-muted); }

/* ── Cột trạng thái: công tắc bật/tắt ngay tại bảng + nhãn trạng thái sống ── */
.bnr-status[b-f1cplr0ins] { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }

.nm-row-actions[b-f1cplr0ins] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Hàng đang ẩn — làm nhạt ảnh/chữ để quét mắt ra ngay banner không chạy */
[b-f1cplr0ins] .bnr-row-off .nm-grid__td { opacity: .62; }

/* ── Footer ── */
.bnr-foot[b-f1cplr0ins] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.bnr-total[b-f1cplr0ins] { font-size: 12.5px; color: var(--nm-muted); }
.bnr-total strong[b-f1cplr0ins] { color: var(--nm-ink); font-weight: 700; }
.bnr-foot-hint[b-f1cplr0ins] { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--nm-muted); }

/* ── Modal form ── */
.bnr-form[b-f1cplr0ins] { display: flex; flex-direction: column; gap: 18px; }

.bnr-sec[b-f1cplr0ins] { display: flex; flex-direction: column; gap: 10px; }
.bnr-sec-hd[b-f1cplr0ins] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--nm-border);
}
.bnr-sec-hd i[b-f1cplr0ins] { color: var(--nm-brand-500); font-size: 13px; }
.bnr-sec-hd span[b-f1cplr0ins] { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--nm-ink); }
.bnr-sec-hd small[b-f1cplr0ins] { margin-left: auto; font-size: 11px; color: var(--nm-muted); }

/* Xem trước — dựng lại bố cục nhãn/tiêu đề/mô tả đè lên ảnh như slider thật */
.bnr-preview[b-f1cplr0ins] { display: flex; flex-direction: column; gap: 6px; }
.bnr-preview__frame[b-f1cplr0ins] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    max-height: 220px;
    border-radius: var(--nm-r-card);
    border: 1px solid var(--nm-border);
    overflow: hidden;
    background: var(--nm-surface-2);
}
.bnr-preview__frame img[b-f1cplr0ins] { width: 100%; height: 100%; object-fit: cover; display: block; }
.bnr-preview__ph[b-f1cplr0ins] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nm-muted);
    font-size: 30px;
}
.bnr-preview__scrim[b-f1cplr0ins] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
}
.bnr-preview__text[b-f1cplr0ins] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding: 0 24px;
    max-width: 68%;
}
.bnr-preview__badge[b-f1cplr0ins] {
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.bnr-preview__title[b-f1cplr0ins] {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.bnr-preview__sub[b-f1cplr0ins] {
    color: rgba(255,255,255,.9);
    font-size: 12.5px;
    line-height: 1.4;
    text-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.bnr-preview__hint[b-f1cplr0ins] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }

.bnr-uploading[b-f1cplr0ins] { padding: 18px; display: flex; justify-content: center; }
.bnr-err[b-f1cplr0ins] { margin: 0; font-size: 11.5px; color: var(--nm-bad); }
.bnr-imgline[b-f1cplr0ins] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
}
.bnr-imgline code[b-f1cplr0ins] {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2 chế độ vị trí loại trừ nhau — thẻ chọn để thấy rõ hệ quả trước khi bấm */
.bnr-modes[b-f1cplr0ins] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bnr-mode[b-f1cplr0ins] {
    position: relative;
    text-align: left;
    padding: 10px 12px 10px 34px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    cursor: pointer;
    font-family: inherit;
}
.bnr-mode i[b-f1cplr0ins] { position: absolute; left: 12px; top: 12px; font-size: 14px; color: var(--nm-muted); }
.bnr-mode strong[b-f1cplr0ins] { display: block; font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.bnr-mode small[b-f1cplr0ins] { display: block; font-size: 11.5px; color: var(--nm-muted); margin-top: 2px; line-height: 1.35; }
.bnr-mode:hover[b-f1cplr0ins] { border-color: var(--nm-border-strong); }
.bnr-mode.is-active[b-f1cplr0ins] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.bnr-mode.is-active i[b-f1cplr0ins],
.bnr-mode.is-active strong[b-f1cplr0ins] { color: var(--nm-brand-700); }

.bnr-picks[b-f1cplr0ins] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
}
.bnr-pick small[b-f1cplr0ins] { display: block; margin: 2px 0 0 46px; font-size: 11.5px; color: var(--nm-muted); }

/* ── Modal xem ảnh ── */
.bnr-lightbox[b-f1cplr0ins] { display: flex; flex-direction: column; gap: 10px; }
.bnr-lightbox img[b-f1cplr0ins] {
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: var(--nm-r-card);
    border: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
}
.bnr-lightbox__meta[b-f1cplr0ins] { display: flex; flex-direction: column; gap: 3px; }
.bnr-lightbox__meta strong[b-f1cplr0ins] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.bnr-lightbox__meta span[b-f1cplr0ins] { font-size: 12.5px; color: var(--nm-muted); }
.bnr-lightbox__meta a[b-f1cplr0ins] { font-size: 12px; color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: none; word-break: break-all; }
.bnr-lightbox__meta a:hover[b-f1cplr0ins] { text-decoration: underline; }

@media (max-width: 720px) {
    .nm-list-page[b-f1cplr0ins] { padding: 16px 14px 22px; }
    .tb-search[b-f1cplr0ins] { flex: 1; width: auto; }
    .bnr-modes[b-f1cplr0ins] { grid-template-columns: 1fr; }
    .bnr-cell[b-f1cplr0ins] { flex-direction: column; }
    .bnr-cell__title[b-f1cplr0ins], .bnr-cell__sub[b-f1cplr0ins], .bnr-cell__link[b-f1cplr0ins] { max-width: 200px; }
    .tb-status[b-f1cplr0ins] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tb-status[b-f1cplr0ins]::-webkit-scrollbar { display: none; }
    .tb-status[b-f1cplr0ins]  .nm-chip { flex-shrink: 0; }
}
/* /src/Features/Content/Pages/Manager/ContentPageEdit.razor.rz.scp.css */
.cpe-root[b-xdladu8u54] { padding: 18px 26px 70px; }

.cpe-topbar[b-xdladu8u54] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px;
}
.cpe-crumbs[b-xdladu8u54] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9ca3af; }
.cpe-back[b-xdladu8u54] { display: inline-flex; align-items: center; gap: 4px; color: #6b7280; text-decoration: none; }
.cpe-back:hover[b-xdladu8u54] { color: #ea580c; }
.cpe-crumb-current[b-xdladu8u54] { color: #374151; font-weight: 600; }

.cpe-topbar-actions[b-xdladu8u54] { display: flex; gap: 8px; }
.cpe-btn[b-xdladu8u54] {
    padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 600; transition: all .15s;
}
.cpe-btn-ghost[b-xdladu8u54] { background: #f3f4f6; color: #6b7280; }
.cpe-btn-ghost:hover[b-xdladu8u54] { background: #e5e7eb; }
.cpe-btn-accent[b-xdladu8u54] { background: #f97316; color: #fff; }
.cpe-btn-accent:hover:not(:disabled)[b-xdladu8u54] { background: #ea580c; }
.cpe-btn:disabled[b-xdladu8u54] { opacity: .55; cursor: not-allowed; }

.cpe-banner[b-xdladu8u54] { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.cpe-banner.error[b-xdladu8u54] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.cpe-loading[b-xdladu8u54] { display: flex; align-items: center; gap: 10px; padding: 60px 0; justify-content: center; color: #9ca3af; }
.cpe-spinner[b-xdladu8u54] { width: 26px; height: 26px; border: 3px solid #e5e7eb; border-top-color: #f97316; border-radius: 50%; animation: cpe-spin-b-xdladu8u54 .8s linear infinite; }
@keyframes cpe-spin-b-xdladu8u54 { to { transform: rotate(360deg); } }

.cpe-grid[b-xdladu8u54] { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }

.cpe-card[b-xdladu8u54] {
    background: #fff; border: 1px solid #eef0f2; border-radius: 12px; padding: 18px;
}

.cpe-label[b-xdladu8u54] { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.cpe-label.mt[b-xdladu8u54] { margin-top: 16px; }
.cpe-label.mb0[b-xdladu8u54] { margin-bottom: 0; }
.req[b-xdladu8u54] { color: #ef4444; }

.cpe-input[b-xdladu8u54] {
    width: 100%; box-sizing: border-box; padding: 8px 11px; font-size: 13px;
    border: 1px solid #e5e7eb; border-radius: 8px; color: #374151; background: #fff; outline: none;
}
.cpe-input:focus[b-xdladu8u54] { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.cpe-input:disabled[b-xdladu8u54] { background: #f9fafb; color: #9ca3af; }

.cpe-slug-input[b-xdladu8u54] { display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cpe-slug-input:focus-within[b-xdladu8u54] { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.cpe-slug-prefix[b-xdladu8u54] { padding: 8px 4px 8px 11px; color: #9ca3af; font-family: ui-monospace, monospace; font-size: 13px; }
.cpe-slug-input .cpe-input[b-xdladu8u54] { border: none; box-shadow: none; padding-left: 2px; }

.cpe-hint[b-xdladu8u54] { font-size: 12px; color: #9ca3af; margin: 6px 0 0; }
.cpe-hint.warn[b-xdladu8u54] { color: #d97706; }
.cpe-hint b[b-xdladu8u54] { color: #ea580c; font-family: ui-monospace, monospace; }

.cpe-main[b-xdladu8u54] { background: #fff; border: 1px solid #eef0f2; border-radius: 12px; padding: 18px; min-width: 0; }

.cpe-tabs[b-xdladu8u54] { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #eef0f2; margin-bottom: 18px; padding-bottom: 2px; }
.cpe-tab[b-xdladu8u54] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: none; background: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #9ca3af; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.cpe-tab:hover[b-xdladu8u54] { color: #6b7280; }
.cpe-tab.on[b-xdladu8u54] { color: #ea580c; border-bottom-color: #f97316; }
.cpe-tab-def[b-xdladu8u54] { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 4px; background: #fff7ed; color: #c2410c; }

.cpe-add-lang[b-xdladu8u54] { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cpe-add-select[b-xdladu8u54] { padding: 5px 8px; font-size: 12px; border: 1px solid #e5e7eb; border-radius: 6px; color: #6b7280; background: #fff; }
.cpe-add-btn[b-xdladu8u54] { padding: 5px 10px; font-size: 12px; border: none; border-radius: 6px; background: #eef2ff; color: #4338ca; cursor: pointer; font-weight: 600; }
.cpe-add-btn:disabled[b-xdladu8u54] { opacity: .4; cursor: not-allowed; }

.cpe-format-row[b-xdladu8u54] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
.cpe-seg[b-xdladu8u54] { display: inline-flex; background: #f3f4f6; border-radius: 8px; padding: 2px; }
.cpe-seg-btn[b-xdladu8u54] { padding: 5px 14px; border: none; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: #6b7280; border-radius: 6px; }
.cpe-seg-btn.on[b-xdladu8u54] { background: #fff; color: #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

.cpe-textarea[b-xdladu8u54] { resize: vertical; font-family: inherit; line-height: 1.6; }

.cpe-remove-lang[b-xdladu8u54] {
    margin-top: 16px; padding: 6px 12px; border: 1px solid #fecaca; background: #fff;
    color: #dc2626; border-radius: 8px; font-size: 12px; cursor: pointer;
}
.cpe-remove-lang:hover[b-xdladu8u54] { background: #fef2f2; }

@media (max-width: 860px) {
    .cpe-root[b-xdladu8u54] { padding: 14px; }
    .cpe-grid[b-xdladu8u54] { grid-template-columns: 1fr; }
}
/* /src/Features/Content/Pages/Manager/ContentPageIndex.razor.rz.scp.css */
/* /manager/content-pages — chuẩn nm-list: shell trang + dải số liệu + toolbar + cell helpers.
   Các class .nm-list-* KHÔNG global, mỗi trang tự khai — khung giữ chung với AnnouncementIndex /
   AirlinesIndex để các màn quản trị nhìn như một hệ. Chrome (card/grid/badge/tag/nút) do Nm* lo. */

.nm-list-page[b-fsye309ohc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-fsye309ohc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-fsye309ohc] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-fsye309ohc] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-fsye309ohc] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải số liệu — 1 hàng; 4 ô đầu bấm được để lọc theo trạng thái ── */
.cpx-stats[b-fsye309ohc] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.cpx-stats[b-fsye309ohc]::-webkit-scrollbar { display: none; }

.cpx-stat[b-fsye309ohc] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.cpx-stat + .cpx-stat[b-fsye309ohc] { border-left: 1px solid var(--nm-border); }

.cpx-stat--btn[b-fsye309ohc] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.cpx-stats > .cpx-stat--btn:first-child[b-fsye309ohc] { border-left: 0; }
.cpx-stat--btn:hover .cpx-stat__lbl[b-fsye309ohc] { color: var(--nm-ink); }
/* Ô đang lọc — đổi màu chữ chứ không đổi nền, để dải vẫn đọc như một hàng số liệu */
.cpx-stat--btn.is-on .cpx-stat__lbl[b-fsye309ohc] { color: var(--nm-brand-700); font-weight: 700; }
.cpx-stat--btn.is-on .cpx-stat__val[b-fsye309ohc] { color: var(--nm-brand-700); }

.cpx-stat__dot[b-fsye309ohc] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.cpx-stat__dot--accent[b-fsye309ohc] { background: var(--nm-brand-500); }
.cpx-stat__dot--good[b-fsye309ohc]   { background: var(--nm-ok); }
.cpx-stat__dot--warn[b-fsye309ohc]   { background: var(--nm-warn); }
.cpx-stat__dot--muted[b-fsye309ohc]  { background: var(--nm-muted); }

.cpx-stat__lbl[b-fsye309ohc] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.cpx-stat__val[b-fsye309ohc] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-fsye309ohc] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-fsye309ohc] { width: 320px; max-width: 100%; }
.tb-select[b-fsye309ohc] { min-width: 140px; }
.tb-select--lang[b-fsye309ohc] { min-width: 120px; }
.tb-select--sort[b-fsye309ohc] { min-width: 170px; }
.tb-filters[b-fsye309ohc] { display: contents; }
[b-fsye309ohc] .tb-clear { margin-left: auto; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-fsye309ohc] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-fsye309ohc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Cell: trang (tiêu đề + đường dẫn) ── */
.cpx-page[b-fsye309ohc] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cpx-page__head[b-fsye309ohc] { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cpx-page__title[b-fsye309ohc] {
    font-weight: 600;
    color: var(--nm-ink);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 360px;
}
.cpx-page__title:hover[b-fsye309ohc] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }

.cpx-slug[b-fsye309ohc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 360px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-muted);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpx-slug:hover[b-fsye309ohc] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }
/* Chưa xuất bản → không phải link; gạch ngang để thấy ngay là chưa sống ngoài web */
.cpx-slug--off[b-fsye309ohc] { text-decoration: line-through; cursor: help; opacity: .7; }
.cpx-slug--off:hover[b-fsye309ohc] { color: var(--nm-muted); text-decoration: line-through; }

/* ── Cell: ngôn ngữ ── */
.cpx-langs[b-fsye309ohc] { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cpx-lang[b-fsye309ohc] {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
}
/* Ngôn ngữ mặc định — bản dịch dùng khi khách vào bằng ngôn ngữ chưa có bản riêng */
.cpx-lang.is-default[b-fsye309ohc] {
    border-color: var(--nm-brand-300, var(--nm-brand-500));
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

/* ── Cell chung ── */
.cell-2line[b-fsye309ohc] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-fsye309ohc] { font-weight: 500; color: var(--nm-ink); white-space: nowrap; }
.cell-2line__sub[b-fsye309ohc] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }
.cell-muted[b-fsye309ohc] { color: var(--nm-muted); }
.cell-date[b-fsye309ohc] { font-variant-numeric: tabular-nums; }

.nm-row-actions[b-fsye309ohc] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Chưa xuất bản → làm mờ cả dòng, quét mắt là biết trang nào đang sống ngoài web */
[b-fsye309ohc] .cpx-row-dim { opacity: .62; }
[b-fsye309ohc] .cpx-row-dim:hover { opacity: 1; }

/* ── Footer ── */
.cpx-foot[b-fsye309ohc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.cpx-total[b-fsye309ohc] { font-size: 12.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-fsye309ohc] { padding: 16px 14px 22px; }
    .nm-list-head[b-fsye309ohc] { align-items: flex-start; }
    .tb-search[b-fsye309ohc] { flex: 1; width: auto; }
    [b-fsye309ohc] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-fsye309ohc] { display: none; }
    .tb-filters.is-open[b-fsye309ohc] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-fsye309ohc] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-fsye309ohc]  .nm-select-wrap,
    .tb-select[b-fsye309ohc]  .nm-select { width: 100%; }
    [b-fsye309ohc] .tb-clear { margin-left: 0; }

    .cpx-page__title[b-fsye309ohc], .cpx-slug[b-fsye309ohc] { max-width: 200px; }
}
/* /src/Features/Content/Pages/Manager/NewsIndex.razor.rz.scp.css */
/* /manager/news — chuẩn nm-list: shell trang + dải số liệu + toolbar + cell helpers + modal soạn bài.
   Các class .nm-list-* KHÔNG global, mỗi trang tự khai — khung giữ chung với ContentPageIndex /
   BannerIndex / AnnouncementIndex để các màn quản trị nhìn như một hệ.
   Chrome (card/grid/badge/nút/modal) do Nm* lo, ở đây chỉ còn phần riêng của tin tức. */

.nm-list-page[b-rwogomdf5b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-rwogomdf5b] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-rwogomdf5b] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-rwogomdf5b] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-rwogomdf5b] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải số liệu — 4 ô đầu bấm được để lọc theo trạng thái ── */
.nws-stats[b-rwogomdf5b] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.nws-stats[b-rwogomdf5b]::-webkit-scrollbar { display: none; }

.nws-stat[b-rwogomdf5b] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.nws-stat + .nws-stat[b-rwogomdf5b] { border-left: 1px solid var(--nm-border); }

.nws-stat--btn[b-rwogomdf5b] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.nws-stats > .nws-stat--btn:first-child[b-rwogomdf5b] { border-left: 0; }
.nws-stat--btn:hover .nws-stat__lbl[b-rwogomdf5b] { color: var(--nm-ink); }
/* Ô đang lọc — đổi màu chữ chứ không đổi nền, để dải vẫn đọc như một hàng số liệu */
.nws-stat--btn.is-on .nws-stat__lbl[b-rwogomdf5b] { color: var(--nm-brand-700); font-weight: 700; }
.nws-stat--btn.is-on .nws-stat__val[b-rwogomdf5b] { color: var(--nm-brand-700); }

.nws-stat__dot[b-rwogomdf5b] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.nws-stat__dot--accent[b-rwogomdf5b] { background: var(--nm-brand-500); }
.nws-stat__dot--good[b-rwogomdf5b]   { background: var(--nm-ok); }
.nws-stat__dot--warn[b-rwogomdf5b]   { background: var(--nm-warn); }
.nws-stat__dot--info[b-rwogomdf5b]   { background: var(--nm-info); }
.nws-stat__dot--muted[b-rwogomdf5b]  { background: var(--nm-muted); }

.nws-stat__lbl[b-rwogomdf5b] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.nws-stat__val[b-rwogomdf5b] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-rwogomdf5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-rwogomdf5b] { width: 320px; max-width: 100%; }
.tb-select[b-rwogomdf5b] { min-width: 150px; }
.tb-select--cat[b-rwogomdf5b] { min-width: 190px; }
.tb-select--feat[b-rwogomdf5b] { min-width: 160px; }
.tb-filters[b-rwogomdf5b] { display: contents; }
[b-rwogomdf5b] .tb-clear { margin-left: auto; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-rwogomdf5b] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-rwogomdf5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Cell: bài viết (ảnh bìa + tiêu đề + slug + thẻ) ── */
.nws-cell[b-rwogomdf5b] { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }

.nws-thumb[b-rwogomdf5b] {
    flex-shrink: 0;
    width: 60px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nm-border);
    border-radius: 6px;
    background: var(--nm-surface-2);
    overflow: hidden;
    color: var(--nm-muted);
    font-size: 15px;
}
.nws-thumb img[b-rwogomdf5b] { width: 100%; height: 100%; object-fit: cover; }

.nws-cell__text[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nws-cell__title[b-rwogomdf5b] {
    font-weight: 600;
    color: var(--nm-ink);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 380px;
}
.nws-cell__title:hover[b-rwogomdf5b] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }

.nws-slug[b-rwogomdf5b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 380px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-muted);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nws-slug:hover[b-rwogomdf5b] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }
/* Chưa xuất bản → không phải link; gạch ngang để thấy ngay là chưa sống ngoài web */
.nws-slug--off[b-rwogomdf5b] { text-decoration: line-through; cursor: help; opacity: .7; }
.nws-slug--off:hover[b-rwogomdf5b] { color: var(--nm-muted); text-decoration: line-through; }

.nws-tags[b-rwogomdf5b] { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.nws-tag[b-rwogomdf5b] {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 10.5px;
    font-weight: 600;
}

/* ── Cell: thước SEO 3 vạch ── */
.nws-seo[b-rwogomdf5b] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: help;
}
.nws-seo__bars[b-rwogomdf5b] { display: inline-flex; gap: 3px; }
.nws-seo__bar[b-rwogomdf5b] {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: var(--nm-border-strong, var(--nm-border));
}
.nws-seo__bar.is-on[b-rwogomdf5b] { background: var(--nm-ok); }
.nws-seo__txt[b-rwogomdf5b] { font-size: 11px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

/* ── Cell: trạng thái (công tắc + nhãn) ── */
.nws-status[b-rwogomdf5b] { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }

/* Ngôi sao nổi bật — nút do NmIconButton render nên phải ::deep mới với tới */
[b-rwogomdf5b] .nm-iconbtn.nws-star { color: var(--nm-muted); }
[b-rwogomdf5b] .nm-iconbtn.nws-star.is-on { color: var(--nm-warn); }

/* ── Cell chung ── */
.cell-2line[b-rwogomdf5b] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-rwogomdf5b] { font-weight: 500; color: var(--nm-ink); white-space: nowrap; }
.cell-2line__sub[b-rwogomdf5b] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }
.cell-muted[b-rwogomdf5b] { color: var(--nm-muted); }
.cell-date[b-rwogomdf5b] { font-variant-numeric: tabular-nums; }
.cell-mono[b-rwogomdf5b] { font-family: ui-monospace, 'JetBrains Mono', monospace; }

.nm-row-actions[b-rwogomdf5b] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Chưa xuất bản → làm mờ cả dòng, quét mắt là biết bài nào đang sống ngoài web */
[b-rwogomdf5b] .nws-row-dim { opacity: .62; }
[b-rwogomdf5b] .nws-row-dim:hover { opacity: 1; }

/* ── Footer ── */
.nws-foot[b-rwogomdf5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.nws-total[b-rwogomdf5b] { font-size: 12.5px; color: var(--nm-muted); }

/* ══ Modal soạn bài ═══════════════════════════════════════════════════════════
   Nội dung modal do CHÍNH trang render nên vẫn mang scope-id — style trực tiếp được.
   Chỉ phần bên trong component con (NmInput, NmFileUpload…) mới cần ::deep. */

.nws-form[b-rwogomdf5b], .nws-cats[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 14px; }

.nws-form-tabs[b-rwogomdf5b] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}
.nws-form-hint[b-rwogomdf5b] { font-size: 12px; color: var(--nm-muted); }

.nws-pane[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 14px; }

.nws-sec[b-rwogomdf5b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.nws-sec-hd[b-rwogomdf5b] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}
.nws-sec-hd i[b-rwogomdf5b] { color: var(--nm-brand-500); }
.nws-sec-hd small[b-rwogomdf5b] { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--nm-muted); }
.nws-req[b-rwogomdf5b] { color: var(--nm-bad); font-weight: 700; }

.nws-feature[b-rwogomdf5b] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nws-feature small[b-rwogomdf5b] { font-size: 11.5px; color: var(--nm-muted); }

/* ── Ảnh bìa + tóm tắt ── */
.nws-media[b-rwogomdf5b] {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
    gap: 14px;
}
.nws-cover[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nws-cover__frame[b-rwogomdf5b] {
    aspect-ratio: 16 / 9;
    max-height: 190px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    background: var(--nm-surface-2);
}
.nws-cover__frame img[b-rwogomdf5b] { width: 100%; height: 100%; object-fit: cover; display: block; }
.nws-cover__line[b-rwogomdf5b] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nws-cover__line code[b-rwogomdf5b] {
    flex: 1;
    font-size: 11px;
    color: var(--nm-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nws-orurl[b-rwogomdf5b] { display: flex; align-items: center; gap: 8px; }
.nws-orurl > :first-child[b-rwogomdf5b] { flex: 1; min-width: 0; }
.nws-uploading[b-rwogomdf5b] { display: flex; align-items: center; justify-content: center; padding: 26px 0; }
.nws-err[b-rwogomdf5b] { margin: 0; font-size: 12px; color: var(--nm-bad); }

/* ── Xem trước kết quả Google ── */
.nws-serp[b-rwogomdf5b] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.nws-serp__url[b-rwogomdf5b] {
    font-size: 12px;
    color: var(--nm-ok);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nws-serp__title[b-rwogomdf5b] {
    font-size: 17px;
    line-height: 1.3;
    color: var(--nm-info);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nws-serp__desc[b-rwogomdf5b] {
    font-size: 13px;
    line-height: 1.45;
    color: var(--nm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Thẻ chia sẻ mạng xã hội ── */
.nws-og[b-rwogomdf5b] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(240px, 1fr);
    gap: 14px;
    align-items: start;
}
.nws-og__card[b-rwogomdf5b] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    background: var(--nm-surface-2);
}
.nws-og__img[b-rwogomdf5b] {
    aspect-ratio: 1.91 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-bg);
    color: var(--nm-muted);
    font-size: 26px;
}
.nws-og__img img[b-rwogomdf5b] { width: 100%; height: 100%; object-fit: cover; display: block; }
.nws-og__text[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; }
.nws-og__host[b-rwogomdf5b] { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--nm-muted); }
.nws-og__title[b-rwogomdf5b] {
    font-size: 14px;
    color: var(--nm-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nws-og__desc[b-rwogomdf5b] {
    font-size: 12px;
    color: var(--nm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 16px;
}
.nws-og__side[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 8px; }

/* ── Robots + hết hạn ── */
.nws-robots[b-rwogomdf5b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    align-items: start;
}
.nws-pick[b-rwogomdf5b] { display: flex; flex-direction: column; gap: 4px; }
.nws-pick small[b-rwogomdf5b] { font-size: 11.5px; color: var(--nm-muted); }

/* Nhắc SEO ở chân modal, đẩy 2 nút về bên phải */
.nws-foot-seo[b-rwogomdf5b] { margin-right: auto; font-size: 12px; color: var(--nm-muted); }

/* ── Modal danh mục ── */
.nws-cat-actions[b-rwogomdf5b] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nws-cat-actions__sp[b-rwogomdf5b] { flex: 1; }

@media (max-width: 860px) {
    .nws-media[b-rwogomdf5b], .nws-og[b-rwogomdf5b] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .nm-list-page[b-rwogomdf5b] { padding: 16px 14px 22px; }
    .nm-list-head[b-rwogomdf5b] { align-items: flex-start; }
    .tb-search[b-rwogomdf5b] { flex: 1; width: auto; }
    [b-rwogomdf5b] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-rwogomdf5b] { display: none; }
    .tb-filters.is-open[b-rwogomdf5b] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-rwogomdf5b] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-rwogomdf5b]  .nm-select-wrap,
    .tb-select[b-rwogomdf5b]  .nm-select { width: 100%; }
    [b-rwogomdf5b] .tb-clear { margin-left: 0; }

    .nws-cell__title[b-rwogomdf5b], .nws-slug[b-rwogomdf5b] { max-width: 200px; }
    .nws-foot[b-rwogomdf5b] { justify-content: center; }
    .nws-foot-seo[b-rwogomdf5b] { display: none; }
}
/* /src/Features/Content/Pages/Manager/NewsPreview.razor.rz.scp.css */
/* /manager/news/preview/{id} — bản dựng bài viết + bàn kiểm SEO.
   Dùng chung khung .nm-list-* với NewsIndex; chrome do Nm* lo. */

.nm-list-page[b-1sx8nclh0z] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-1sx8nclh0z] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-1sx8nclh0z] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-1sx8nclh0z] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-1sx8nclh0z] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Thanh trạng thái ── */
.nwp-bar[b-1sx8nclh0z] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.nwp-bar__tag[b-1sx8nclh0z] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-brand-700);
}
.nwp-bar__sp[b-1sx8nclh0z] { flex: 1; }
.nwp-bar__link[b-1sx8nclh0z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600, var(--nm-brand-500));
    text-decoration: none;
}
.nwp-bar__link:hover[b-1sx8nclh0z] { text-decoration: underline; }
.nwp-bar__off[b-1sx8nclh0z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
}

/* ── Bố cục 2 cột: bài viết | bàn kiểm ── */
.nwp-layout[b-1sx8nclh0z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}
.nwp-rail[b-1sx8nclh0z] { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }

/* ── Bản dựng bài viết ── */
.nwp-doc[b-1sx8nclh0z] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}
.nwp-doc__hero[b-1sx8nclh0z] { aspect-ratio: 21 / 9; background: var(--nm-surface-2); }
.nwp-doc__hero img[b-1sx8nclh0z] { width: 100%; height: 100%; object-fit: cover; display: block; }
.nwp-doc__hero-ph[b-1sx8nclh0z] {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--nm-muted); font-size: 13px;
}
.nwp-doc__hero-ph i[b-1sx8nclh0z] { font-size: 28px; }

.nwp-doc__head[b-1sx8nclh0z] { padding: 20px 26px 0; }
.nwp-doc__meta[b-1sx8nclh0z] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.nwp-doc__dot[b-1sx8nclh0z] { width: 3px; height: 3px; border-radius: 50%; background: var(--nm-border-strong, var(--nm-muted)); }
.nwp-cat[b-1sx8nclh0z] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.nwp-doc__title[b-1sx8nclh0z] {
    margin: 12px 0 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--nm-ink);
}
.nwp-doc__lead[b-1sx8nclh0z] {
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 3px solid var(--nm-brand-500);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--nm-ink-2);
}

/* ── Nội dung bài (MarkupString) ──────────────────────────────────────────────
   MarkupString KHÔNG nhận scope-id của trang, nên mọi thẻ bên trong phải nhắm bằng
   ::deep (bản cũ dùng class `prose-*` của plugin Tailwind Typography — plugin đó KHÔNG
   có trong dự án này, tức là bài viết xưa nay hiển thị bằng style mặc định của trình duyệt). */
.nwp-body[b-1sx8nclh0z] {
    padding: 20px 26px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--nm-ink-2);
    overflow-wrap: anywhere;
}
.nwp-body[b-1sx8nclh0z]  > *:first-child { margin-top: 0; }
.nwp-body[b-1sx8nclh0z]  h1,
.nwp-body[b-1sx8nclh0z]  h2,
.nwp-body[b-1sx8nclh0z]  h3,
.nwp-body[b-1sx8nclh0z]  h4 {
    margin: 1.6em 0 .55em;
    font-weight: 800;
    line-height: 1.3;
    color: var(--nm-ink);
}
.nwp-body[b-1sx8nclh0z]  h1 { font-size: 24px; }
.nwp-body[b-1sx8nclh0z]  h2 { font-size: 21px; }
.nwp-body[b-1sx8nclh0z]  h3 { font-size: 18px; }
.nwp-body[b-1sx8nclh0z]  h4 { font-size: 16px; }
.nwp-body[b-1sx8nclh0z]  p { margin: 0 0 1.1em; }
.nwp-body[b-1sx8nclh0z]  a { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: none; }
.nwp-body[b-1sx8nclh0z]  a:hover { text-decoration: underline; }
.nwp-body[b-1sx8nclh0z]  strong { color: var(--nm-ink); font-weight: 700; }
.nwp-body[b-1sx8nclh0z]  ul,
.nwp-body[b-1sx8nclh0z]  ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.nwp-body[b-1sx8nclh0z]  li { margin: .3em 0; }
.nwp-body[b-1sx8nclh0z]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow, 0 1px 3px rgba(0, 0, 0, .1));
}
.nwp-body[b-1sx8nclh0z]  figure { margin: 1.4em 0; }
.nwp-body[b-1sx8nclh0z]  figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--nm-muted);
    text-align: center;
}
.nwp-body[b-1sx8nclh0z]  blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--nm-brand-500);
    color: var(--nm-muted);
    font-style: italic;
}
.nwp-body[b-1sx8nclh0z]  code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--nm-surface-2);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: .9em;
}
.nwp-body[b-1sx8nclh0z]  pre {
    margin: 1.2em 0;
    padding: 12px 14px;
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    overflow-x: auto;
}
.nwp-body[b-1sx8nclh0z]  pre code { padding: 0; background: none; }
.nwp-body[b-1sx8nclh0z]  table {
    width: 100%;
    margin: 1.2em 0;
    border-collapse: collapse;
    font-size: 14px;
}
.nwp-body[b-1sx8nclh0z]  th,
.nwp-body[b-1sx8nclh0z]  td {
    padding: 8px 10px;
    border: 1px solid var(--nm-border);
    text-align: left;
}
.nwp-body[b-1sx8nclh0z]  th { background: var(--nm-surface-2); font-weight: 700; color: var(--nm-ink); }
.nwp-body[b-1sx8nclh0z]  hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--nm-border); }

.nwp-doc__foot[b-1sx8nclh0z] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 14px 26px 20px;
    border-top: 1px solid var(--nm-border);
}
.nwp-doc__foot-lbl[b-1sx8nclh0z] { font-size: 12.5px; font-weight: 700; color: var(--nm-muted); }
.nwp-muted[b-1sx8nclh0z] { font-size: 12.5px; color: var(--nm-muted); }

/* ── Cột phải ── */
.nwp-card-hd[b-1sx8nclh0z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}
.nwp-card-hd i[b-1sx8nclh0z] { color: var(--nm-brand-500); margin-right: 5px; }

.nwp-checks[b-1sx8nclh0z] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nwp-check[b-1sx8nclh0z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}
.nwp-check + .nwp-check[b-1sx8nclh0z] { border-top: 1px solid var(--nm-border); }
.nwp-check.is-ok i[b-1sx8nclh0z] { color: var(--nm-ok); }
.nwp-check.is-off i[b-1sx8nclh0z] { color: var(--nm-warn); }
.nwp-check__lbl[b-1sx8nclh0z] { color: var(--nm-ink-2); }
.nwp-check__val[b-1sx8nclh0z] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }
.nwp-check.is-off .nwp-check__val[b-1sx8nclh0z] { color: var(--nm-warn); font-weight: 600; }

.nwp-serp[b-1sx8nclh0z] { display: flex; flex-direction: column; gap: 3px; }
.nwp-serp__url[b-1sx8nclh0z] {
    font-size: 12px;
    color: var(--nm-ok);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nwp-serp__title[b-1sx8nclh0z] {
    font-size: 16px;
    line-height: 1.3;
    color: var(--nm-info);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nwp-serp__desc[b-1sx8nclh0z] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--nm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nwp-og[b-1sx8nclh0z] { border: 1px solid var(--nm-border); border-radius: var(--nm-r-card); overflow: hidden; }
.nwp-og__img[b-1sx8nclh0z] {
    aspect-ratio: 1.91 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 24px;
}
.nwp-og__img img[b-1sx8nclh0z] { width: 100%; height: 100%; object-fit: cover; display: block; }
.nwp-og__text[b-1sx8nclh0z] { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; }
.nwp-og__host[b-1sx8nclh0z] { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--nm-muted); }
.nwp-og__title[b-1sx8nclh0z] {
    font-size: 13.5px;
    color: var(--nm-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nwp-og__desc[b-1sx8nclh0z] {
    font-size: 12px;
    color: var(--nm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1100px) {
    .nwp-layout[b-1sx8nclh0z] { grid-template-columns: 1fr; }
    .nwp-rail[b-1sx8nclh0z] { position: static; }
}

@media (max-width: 640px) {
    .nm-list-page[b-1sx8nclh0z] { padding: 16px 14px 22px; }
    .nm-list-head[b-1sx8nclh0z] { align-items: flex-start; }
    .nwp-doc__head[b-1sx8nclh0z] { padding: 16px 16px 0; }
    .nwp-doc__title[b-1sx8nclh0z] { font-size: 22px; }
    .nwp-body[b-1sx8nclh0z] { padding: 16px; font-size: 15px; }
    .nwp-doc__foot[b-1sx8nclh0z] { padding: 12px 16px 16px; }
}
/* /src/Features/Content/Pages/Public/About.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   ABOUT — v4 "TẠP CHÍ HIỆN ĐẠI — CAM CHỦ ĐẠO" (06/08, đồng bộ /news,
   /careers, /partner-customer): nền trắng + thang stone ấm, CAM #ea580c
   là màu signature (bảng số liệu, thẻ hành lý, tab hãng, nhãn CHẶNG,
   waypoint) — navy rút hẳn khỏi mọi khối lớn, chỉ còn mực chữ stone.
   GIỮ NGUYÊN signature user thích: ảnh lồng trong Ô CỬA SỔ MÁY BAY
   (.win) + timeline zigzag hoa mai nở dần + đánh số CHẶNG (trang là
   một hành trình). Không gradient đa sắc.
   Display/body: Be Vietnam Pro · nhãn dữ liệu: IBM Plex Mono.
   ═══════════════════════════════════════════════════════════════════ */
.ab[b-yutv11zdss] {
    --soft: #faf9f7;
    --ink: #1c1917;
    --ink-2: #44403c;
    --ink-3: #78716c;
    --ink-4: #a8a29e;
    --line: #e7e5e4;
    --line-2: #d6d3d1;
    --accent: #ea580c;
    --accent-2: #f97316;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    background: #fff;
    color: var(--ink-2);
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.ab h1[b-yutv11zdss], .ab h2[b-yutv11zdss] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}
.ab h1[b-yutv11zdss] { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.08; margin: 0 0 1rem; }
.ab h2[b-yutv11zdss] { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; margin: 0; }
.ab h3[b-yutv11zdss] { font-weight: 700; color: var(--ink); }
.ab p[b-yutv11zdss] { letter-spacing: -0.005em; }
/* Fallback đặt 'Be Vietnam Pro' TRƯỚC monospace: Consolas/Courier thiếu glyph Việt
   → khi Plex Mono chưa load, dấu tiếng Việt vẫn hiển thị đúng (không vỡ). */
.ab .mono[b-yutv11zdss] { font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace; }

/* ===== Layout ===== */
.ab-wrap[b-yutv11zdss] { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.ab-sec[b-yutv11zdss] { padding: 4.5rem 0; }
.ab-band[b-yutv11zdss] {
    background: var(--soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
/* Band CTA = băng cam nhạt (đồng bộ .nw-band, .pc-band) */
.ab-band--cta[b-yutv11zdss] {
    background: var(--accent-soft);
    border-top: 1px solid var(--accent-line);
    border-bottom: 1px solid var(--accent-line);
}

/* ===== Eyebrow "chặng bay" — số chặng = chip cam đặc ===== */
.leg[b-yutv11zdss] {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 .8rem;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
}
.leg--c[b-yutv11zdss] { justify-content: center; }
.leg-no[b-yutv11zdss] {
    display: inline-flex; align-items: center;
    background: var(--accent); color: #fff;
    border-radius: 6px;
    padding: .22rem .55rem;
    font-size: .6rem;
    letter-spacing: .1em;
}
.leg-sep[b-yutv11zdss] { width: 26px; border-top: 2px dashed var(--accent-line); }
.leg > .mono:last-child[b-yutv11zdss] { color: var(--ink-3); }
.sec-head--c[b-yutv11zdss] { text-align: center; }
.sec-sub[b-yutv11zdss] { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-3); max-width: 34rem; }
.sec-note[b-yutv11zdss] { font-size: .8rem; color: var(--ink-3); max-width: 42rem; line-height: 1.6; }
.sub-h[b-yutv11zdss] { font-size: .95rem; margin: 0; }
.sub-h--mono[b-yutv11zdss] { font-size: .6875rem; letter-spacing: .13em; color: var(--ink-3); font-weight: 600; }

/* ═════════════════ HERO ═════════════════ */
/* Nền ửng cam một sắc (fade cùng hue, không gradient đa sắc) — mở trang bằng
   đúng màu thương hiệu */
.ab-hero[b-yutv11zdss] {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--accent-soft) 0%, #fffdfb 62%, #ffffff 100%);
    padding: 108px 0 4rem;
}
.hero-sky[b-yutv11zdss] { position: absolute; inset: 0; pointer-events: none; }
.hero-path[b-yutv11zdss] { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-plane[b-yutv11zdss] {
    position: absolute; left: 33%; top: 33%;
    width: 26px; height: 26px; color: var(--accent);
    transform: rotate(42deg); opacity: .9;
}
.hero-sky[b-yutv11zdss]  .hero-bloom {
    position: absolute; left: 58%; top: 8%;
    width: 92px; height: auto; opacity: .92;
    filter: drop-shadow(0 2px 4px rgba(234, 88, 12, .16));
}
.petal[b-yutv11zdss] { position: absolute; width: 12px; height: 12px; opacity: .5; }
.petal--h1[b-yutv11zdss] { left: 40%; top: 24%; --r0: -12deg; --r1: 20deg; }
.petal--h2[b-yutv11zdss] { left: 28%; top: 46%; --r0: 32deg; --r1: 64deg; }
.petal--h3[b-yutv11zdss] { left: 50%; top: 58%; --r0: -40deg; --r1: -8deg; }

.hero-grid[b-yutv11zdss] {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr;
    gap: 3rem; align-items: center;
}
@media (min-width: 1024px) {
    .hero-grid[b-yutv11zdss] { grid-template-columns: 1.02fr .98fr; }
    .hero-copy[b-yutv11zdss] { order: 1; }
    .hero-visual[b-yutv11zdss] { order: 2; justify-self: center; }
}

/* Eyebrow hero */
.hero-eyebrow[b-yutv11zdss] { display: flex; align-items: center; gap: 9px; margin: 0 0 1.1rem; }
.hero-eyebrow .mono[b-yutv11zdss] {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent-deep);
}
.eyebrow-mai[b-yutv11zdss] { width: 17px; height: 17px; flex: none; }
.hero-sub[b-yutv11zdss] { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 .8rem; max-width: 33rem; }
.hero-desc[b-yutv11zdss] { font-size: .85rem; color: var(--ink-3); line-height: 1.65; margin: 0 0 1.9rem; max-width: 33rem; }

/* Cửa sổ máy bay — signature GIỮ NGUYÊN, chỉ đổi tông bóng/vành sang ấm */
.hero-visual[b-yutv11zdss] { position: relative; width: fit-content; margin: 0 auto; }
.win[b-yutv11zdss] {
    border-radius: 999px;
    border: 8px solid #fff;
    overflow: hidden;
    box-shadow: 0 24px 54px -22px rgba(194, 65, 12, .32), 0 0 0 1px var(--accent-line);
    position: relative;
}
.win img[b-yutv11zdss] { width: 100%; height: 100%; object-fit: cover; display: block; }
.win[b-yutv11zdss]::after {
    content: '';
    position: absolute; inset: 7px;
    border: 1.5px solid rgba(28, 25, 23, .14);
    border-radius: inherit;
    pointer-events: none;
}
.win--main[b-yutv11zdss] { width: 318px; height: 424px; border-radius: 155px; }
.win--sm[b-yutv11zdss] {
    width: 172px; height: 230px; border-radius: 88px;
    position: absolute; left: -78px; bottom: -22px; z-index: 2;
}

/* Thẻ hành lý "năm kinh nghiệm" — giờ là thẻ CAM đặc (khối thương hiệu) */
.tag[b-yutv11zdss] {
    position: absolute; top: -16px; right: -26px; z-index: 3;
    display: flex; flex-direction: column; align-items: center;
    background: var(--accent);
    border: 0;
    border-radius: 12px;
    padding: .85rem .95rem .6rem;
    box-shadow: 0 14px 28px -14px rgba(194, 65, 12, .75);
    transform: rotate(5deg);
}
.tag-hole[b-yutv11zdss] {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent-deep); border: 2px solid rgba(255, 255, 255, .75);
}
.tag-num[b-yutv11zdss] {
    margin-top: 6px;
    font-weight: 800; font-size: 1.45rem; line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.tag-lbl[b-yutv11zdss] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: .5rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85); margin-top: 3px;
    max-width: 92px; text-align: center;
}

/* Bảng thông tin — khối CAM signature (màu chủ đạo, không còn navy) */
.board[b-yutv11zdss] {
    position: relative;
    display: grid; grid-template-columns: repeat(4, auto);
    width: max-content; max-width: 100%;
    background: var(--accent);
    border-radius: 14px;
    padding: .95rem 0;
    box-shadow: 0 18px 36px -18px rgba(194, 65, 12, .6);
    overflow: hidden;
}
.board-cell[b-yutv11zdss] { display: flex; flex-direction: column; gap: 4px; padding: 0 1.35rem; }
.board-cell + .board-cell[b-yutv11zdss] { border-left: 1px dashed rgba(255, 255, 255, .28); }
.board-lbl[b-yutv11zdss] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: .55rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.board-num[b-yutv11zdss] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-weight: 600; font-size: 1.3rem; line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.board-plane[b-yutv11zdss] {
    position: absolute; top: 8px; right: 10px;
    width: 12px; height: 12px;
    color: rgba(255, 255, 255, .7);
    transform: rotate(45deg);
}

/* ===== Dải tuyến bay ngăn section ===== */
.ab-route[b-yutv11zdss] {
    display: flex; align-items: center; gap: 10px;
    max-width: 560px; margin: 0 auto;
    padding: 2.4rem 1.5rem 0;
}
.rt-dot[b-yutv11zdss] { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); opacity: .55; }
.rt-line[b-yutv11zdss] { flex: 1; border-top: 2px dashed var(--line-2); }
.rt-plane[b-yutv11zdss] { flex: none; width: 16px; height: 16px; color: var(--accent); transform: rotate(90deg); opacity: .85; }
.rt-mai[b-yutv11zdss] { flex: none; width: 19px; height: 19px; }

/* ═════════════════ VỀ CHÚNG TÔI ═════════════════ */
.body-lg[b-yutv11zdss] { font-size: 1rem; color: var(--ink-2); line-height: 1.7; }
.ab-sec p[b-yutv11zdss] { font-size: .9rem; line-height: 1.7; }
.ab-note[b-yutv11zdss] {
    position: relative;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 14px;
    padding: 1rem 1.15rem 1rem 2.6rem;
    color: #7c3a12 !important;
    font-weight: 500;
}
.note-mai[b-yutv11zdss] { position: absolute; left: .95rem; top: 1.15rem; width: 18px; height: 18px; }

/* ═════════════════ LĨNH VỰC ═════════════════ */
.biz[b-yutv11zdss] {
    position: relative; border-radius: 18px;
    overflow: hidden; min-height: 258px;
    box-shadow: 0 6px 20px -10px rgba(28, 25, 23, .25);
    transition: transform .4s ease, box-shadow .4s;
}
.biz:hover[b-yutv11zdss] { transform: translateY(-6px); box-shadow: 0 22px 44px -18px rgba(28, 25, 23, .4); }
.biz-bg[b-yutv11zdss] { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s; }
.biz:hover .biz-bg[b-yutv11zdss] { transform: scale(1.07); }
.biz-ov[b-yutv11zdss] { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 25, 23, .05) 0%, rgba(28, 25, 23, .62) 58%, rgba(28, 25, 23, .88) 100%); }
.biz-body[b-yutv11zdss] {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: flex-end;
    height: 100%; min-height: 258px; padding: 1.4rem; color: #fff;
}
.biz-body h3[b-yutv11zdss] { color: #fff; font-size: 1.05rem; margin: 0 0 .35rem; }
.biz-body p[b-yutv11zdss] { font-size: .8rem; line-height: 1.55; opacity: .88; margin: 0 0 .7rem; }
.biz-tag[b-yutv11zdss] {
    align-self: flex-start;
    font-size: .575rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff;
    background: rgba(234, 88, 12, .85);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px; padding: .25rem .55rem;
    backdrop-filter: blur(3px);
}

.str[b-yutv11zdss] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.4rem;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.str:hover[b-yutv11zdss] { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 16px 32px -18px rgba(234, 88, 12, .3); }
.str-icon[b-yutv11zdss] {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .8rem;
    transition: background .3s, border-color .3s, transform .3s;
}
.str-icon svg[b-yutv11zdss] { width: 20px; height: 20px; color: var(--accent-deep); transition: color .3s; }
.str:hover .str-icon[b-yutv11zdss] { background: var(--accent); border-color: var(--accent); transform: scale(1.07); }
.str:hover .str-icon svg[b-yutv11zdss] { color: #fff; }
.str-head[b-yutv11zdss] { display: flex; align-items: center; gap: 8px; margin-bottom: .35rem; }
.str-head h3[b-yutv11zdss] { font-size: .9rem; margin: 0; }
.str-badge[b-yutv11zdss] {
    font-size: .55rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-radius: 999px; padding: .12rem .5rem;
}
.str > p[b-yutv11zdss] { font-size: .8rem !important; color: var(--ink-3); margin: 0; }

/* ═════════════════ BẦU TRỜI HỢP TÁC ═════════════════ */
.gate-tab[b-yutv11zdss] {
    padding: .42rem 1rem;
    font-size: .7rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    border-radius: 999px;
    border: 1.5px solid var(--line-2);
    background: #fff; color: var(--ink-3);
    cursor: pointer;
    transition: all .2s;
}
.gate-tab:hover[b-yutv11zdss] { border-color: var(--accent-line); color: var(--accent-deep); background: var(--accent-soft); }
/* Tab active = CAM thương hiệu (bỏ navy/amber) */
.gate-tab.active[b-yutv11zdss] { background: var(--accent); border-color: var(--accent); color: #fff; }
.gate-tab:focus-visible[b-yutv11zdss] { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate-panel[b-yutv11zdss] { animation: gateIn-b-yutv11zdss .25s ease; }
@keyframes gateIn-b-yutv11zdss { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.lcard[b-yutv11zdss] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.lcard:hover[b-yutv11zdss] { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 12px 26px -14px rgba(28, 25, 23, .25); }
.lcard--lg[b-yutv11zdss] { height: 84px; padding: 1rem; }
.lcard--lg img[b-yutv11zdss] { max-height: 3rem; max-width: 100%; object-fit: contain; }
.lcard--md[b-yutv11zdss] { height: 72px; padding: .8rem; }
.lcard--md img[b-yutv11zdss] { max-height: 2.9rem; max-width: 100%; object-fit: contain; }
.lcard--sm[b-yutv11zdss] { height: 58px; padding: .6rem; }
.lcard--sm img[b-yutv11zdss] { max-height: 2.2rem; max-width: 100%; object-fit: contain; }

/* ═════════════════ HÀNH TRÌNH — timeline zigzag ═════════════════ */
.tl[b-yutv11zdss] { position: relative; max-width: 900px; margin: 0 auto; }
.tl[b-yutv11zdss]::before {
    content: '';
    position: absolute; top: 10px; bottom: 10px; left: 22px;
    width: 0;
    border-left: 2px dashed var(--accent-line);
}
.tl-item[b-yutv11zdss] { position: relative; padding: 0 0 2rem 64px; }
.tl-item:last-child[b-yutv11zdss] { padding-bottom: 0; }
.tl-node[b-yutv11zdss] {
    position: absolute; left: 0; top: 0;
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff;
    border: 1px solid var(--accent-line);
    box-shadow: 0 6px 14px -8px rgba(194, 65, 12, .35);
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.tl-node svg[b-yutv11zdss] { width: 30px; height: 30px; }
.tl-node--plane[b-yutv11zdss] { background: var(--accent); border-color: var(--accent); box-shadow: 0 8px 18px -8px rgba(234, 88, 12, .6); }
.tl-node--plane svg[b-yutv11zdss] { width: 19px; height: 19px; color: #fff; transform: rotate(45deg); }

@media (min-width: 1024px) {
    .tl[b-yutv11zdss]::before { left: 50%; margin-left: -1px; }
    .tl-item[b-yutv11zdss] { width: 50%; padding: 0 3.2rem 2.4rem 0; }
    .tl-item .tl-node[b-yutv11zdss] { left: auto; right: -23px; }
    .tl-item:nth-child(even)[b-yutv11zdss] { margin-left: 50%; padding: 0 0 2.4rem 3.2rem; }
    .tl-item:nth-child(even) .tl-node[b-yutv11zdss] { right: auto; left: -23px; }
    .tl-item--end[b-yutv11zdss] { width: 100%; margin-left: 0 !important; padding: 0 0 0 0; text-align: center; }
    .tl-item--end .tl-node[b-yutv11zdss] { position: static; margin: 0 auto .8rem; }
}

.tl-card[b-yutv11zdss] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.3rem 1.45rem;
    box-shadow: 0 4px 16px -8px rgba(28, 25, 23, .12);
    transition: box-shadow .3s, transform .3s, border-color .3s;
}
.tl-card:hover[b-yutv11zdss] { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: 0 14px 30px -14px rgba(28, 25, 23, .22); }
.tl-head[b-yutv11zdss] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: .7rem; }
.tl-year[b-yutv11zdss] { font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.tl-tag[b-yutv11zdss] {
    font-size: .575rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3);
}
.tl-card ul[b-yutv11zdss] { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.tl-card li[b-yutv11zdss] { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--ink-2); line-height: 1.55; }
.tl-intro[b-yutv11zdss] { font-size: .84rem !important; color: var(--ink-3); margin: 0 0 .9rem; }
.tl-chips[b-yutv11zdss] { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip[b-yutv11zdss] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .32rem .65rem;
    font-size: .72rem; font-weight: 500; color: var(--ink-2);
}
.tl-chip img[b-yutv11zdss] { height: 15px; object-fit: contain; }
.tl-ranks[b-yutv11zdss] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .tl-ranks[b-yutv11zdss] { grid-template-columns: repeat(2, 1fr); } }
.tl-rank[b-yutv11zdss] {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .55rem .7rem;
}
.tl-rank-t[b-yutv11zdss] { margin: 0; font-size: .72rem !important; font-weight: 700; color: var(--ink); line-height: 1.35; }
.tl-rank-a[b-yutv11zdss] { margin: 2px 0 0; font-size: .58rem !important; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.tl-achs[b-yutv11zdss] { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .tl-achs[b-yutv11zdss] { grid-template-columns: 1fr 1fr; } }
.tl-ach[b-yutv11zdss] {
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .6rem .7rem;
}
.tl-ach p[b-yutv11zdss] { margin: 0; font-size: .72rem !important; color: var(--ink-2); line-height: 1.5; }
.tl-ach-logo[b-yutv11zdss] {
    flex: none; width: 30px; height: 30px; margin-top: 1px;
    border-radius: 8px; background: #fff;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.tl-ach-logo img[b-yutv11zdss] { max-height: 15px; max-width: 22px; object-fit: contain; }
.tl-ach-logo.is-star[b-yutv11zdss] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.tl-ach-logo.is-star svg[b-yutv11zdss] { width: 14px; height: 14px; }
.tl-end[b-yutv11zdss] {
    margin: 0; font-size: .9rem; font-weight: 500; font-style: italic;
    color: var(--ink-3);
    display: inline-block;
    background: #fff; /* che vạch tuyến sau chữ */
    padding: 0 12px;
    position: relative; z-index: 1;
}
.tl-item--end[b-yutv11zdss] { display: flex; align-items: center; gap: 14px; }
@media (min-width: 1024px) { .tl-item--end[b-yutv11zdss] { display: block; } }

/* ═════════════════ ĐỐI TÁC 600+ — SƠ ĐỒ TOẢ TRÒN ═════════════════
   Cùng bộ khung với khối "Hệ sinh thái đối tác" ở /corporate-customer, chỉ
   thay bảng màu --nm-* bằng thang stone/cam của trang này. */
.eco-head[b-yutv11zdss] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.4rem;
    margin-bottom: 2.6rem;
}
.eco-head-copy[b-yutv11zdss] { flex: 1 1 26rem; }

.big-stat[b-yutv11zdss] { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.big-stat-num[b-yutv11zdss] { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1; letter-spacing: -.045em; color: var(--accent); font-variant-numeric: tabular-nums; }
.big-stat-lbl[b-yutv11zdss] { font-size: .6rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); max-width: 6rem; }

/* ─────────────────────────────────────────────────────────────────────
   NỀN CHUNG (máy nhỏ): danh sách dọc — nhãn ngành ở trên, lưới logo dưới.
   Sơ đồ toả tròn chỉ bật từ 1120px trở lên (khối @media ở cuối phần này).
   ───────────────────────────────────────────────────────────────────── */
.eco-hub[b-yutv11zdss] { display: grid; gap: 1.5rem; }
.eco-node[b-yutv11zdss] { display: grid; gap: .7rem; }

/* Nhãn ngành: dưới 1120px là viên thuốc ngang (icon + tên),
   từ 1120px mới cắt thành lục giác tổ ong. */
.eco-hex[b-yutv11zdss] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    justify-self: start;
    padding: .42rem .95rem .42rem .7rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(234, 88, 12, .55);
}
.eco-hex svg[b-yutv11zdss] { width: 19px; height: 19px; flex: none; }
.eco-hex-name[b-yutv11zdss] { font-size: .84rem; font-weight: 700; line-height: 1.15; }

/* Lưới tự co thay vì flex: ô logo GIÃN ĐỀU hết bề ngang hàng — xếp flex thì
   ngành ít logo để hở một mảng trống lớn bên phải, hàng nhìn hụt. */
.eco-rail[b-yutv11zdss] { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: .5rem; }
.eco-logo[b-yutv11zdss] {
    height: 3.4rem;
    border-radius: 9px;
    background: #fff;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: .4rem .55rem;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.eco-logo:hover[b-yutv11zdss] { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(28, 25, 23, .3); }
.eco-logo img[b-yutv11zdss] { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Dấu "+" và vòng tròn giữa chỉ có nghĩa trong sơ đồ toả tròn */
.eco-plus[b-yutv11zdss], .eco-core[b-yutv11zdss] { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   ≥1120px — SƠ ĐỒ TOẢ TRÒN
   Lưới 2 cột: ngành lẻ bám cột trái (thanh logo chạy RA NGOÀI, lục giác quay
   vào trong), ngành chẵn bám cột phải. Hàng 2–3 thụt vào né vòng tròn giữa.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1120px) {
    .eco-hub[b-yutv11zdss] {
        position: relative;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 0;
        align-items: center;
    }

    .eco-node[b-yutv11zdss] { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0; }

    /* Cột trái: đảo thứ tự hiển thị ⇒ thanh logo trước, lục giác sát tim trang.
       Dùng direction thay vì row-reverse vì đây là grid, không phải flex. */
    .eco-node:nth-child(odd)[b-yutv11zdss] { direction: rtl; margin-right: 36px; }
    .eco-node:nth-child(odd) > *[b-yutv11zdss] { direction: ltr; }
    .eco-node:nth-child(even)[b-yutv11zdss] { margin-left: 36px; }

    /* Hai hàng giữa né vòng tròn Ø232 (116 bán kính + 16 thở) */
    .eco-node:nth-child(3)[b-yutv11zdss], .eco-node:nth-child(5)[b-yutv11zdss] { margin-right: 132px; }
    .eco-node:nth-child(4)[b-yutv11zdss], .eco-node:nth-child(6)[b-yutv11zdss] { margin-left: 132px; }

    /* Lục giác tổ ong — điểm nhọn nằm ở giữa hai cạnh trái/phải nên chữ dài
       ("Kinh doanh") vẫn có trọn bề ngang ở dòng giữa. */
    .eco-hex[b-yutv11zdss] {
        position: relative;
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        gap: .18rem;
        width: 96px;
        height: 86px;
        padding: 0 .9rem;
        border-radius: 0;
        box-shadow: none; /* clip-path cắt mất bóng — để lại chỉ tổ hao layer */
        clip-path: polygon(22% 0%, 78% 0%, 100% 50%, 78% 100%, 22% 100%, 0% 50%);
        text-align: center;
        transition: transform .3s ease, filter .3s ease;
    }

    .eco-hex svg[b-yutv11zdss] { width: 22px; height: 22px; }
    .eco-hex-name[b-yutv11zdss] { font-size: .72rem; letter-spacing: -.01em; }
    .eco-node:hover .eco-hex[b-yutv11zdss] { transform: scale(1.05); filter: brightness(1.06); }

    /* Thanh nét đứt: chui một đoạn xuống DƯỚI lục giác (âm lề) để hai thứ dính
       liền nhau như trong sơ đồ, không hở khe. */
    .eco-rail[b-yutv11zdss] {
        position: relative;
        display: flex;
        align-items: center;
        gap: .35rem;
        min-height: 76px;
        padding: .4rem 1.5rem;
        border: 1.5px dashed var(--accent-line);
        border-radius: 999px;
        background: #fff;
    }

    /* Đầu trong đệm dày hơn (2.2rem) kẻo logo chui xuống dưới lục giác;
       đầu ngoài 2rem để chừa chỗ cho nút "+". */
    .eco-node:nth-child(odd) .eco-rail[b-yutv11zdss] { margin-right: -22px; padding: .4rem 2.2rem .4rem 2rem; }
    .eco-node:nth-child(even) .eco-rail[b-yutv11zdss] { margin-left: -22px; padding: .4rem 2rem .4rem 2.2rem; }

    /* Ô logo bỏ khung: trong sơ đồ, khung bao đã là thanh nét đứt rồi —
       lồng thêm viền cho từng logo thì rối như bảng tính. */
    .eco-logo[b-yutv11zdss] {
        flex: 1 1 0;
        min-width: 0;
        height: 46px;
        border: 0;
        background: transparent;
        padding: 0 .15rem;
    }

    .eco-logo:hover[b-yutv11zdss] { transform: scale(1.07); box-shadow: none; }

    /* Nút "+" khoá đầu ngoài thanh, đè lên đúng nét đứt */
    .eco-plus[b-yutv11zdss] {
        position: absolute;
        top: 50%;
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: .8rem;
        line-height: 1;
    }

    .eco-node:nth-child(odd) .eco-plus[b-yutv11zdss] { left: -15px; }
    .eco-node:nth-child(even) .eco-plus[b-yutv11zdss] { right: -15px; }

    /* Vòng tròn tim sơ đồ */
    .eco-core[b-yutv11zdss] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        place-content: center;
        justify-items: center;
        gap: .1rem;
        width: 232px;
        height: 232px;
        border-radius: 50%;
        border: 2.5px dashed var(--accent);
        background: #fff;
        text-align: center;
        z-index: 1;
    }

    .eco-core-num[b-yutv11zdss] {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -.04em;
        color: var(--accent);
        font-variant-numeric: tabular-nums;
    }

    .eco-core-lbl[b-yutv11zdss] {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: var(--accent);
    }

    /* Vòng tròn đã nói "600+" rồi — để cả số nhấn ở đầu khối là nói hai lần */
    .eco-head .big-stat[b-yutv11zdss] { display: none; }
}

/* ═════════════════ VINH DANH ═════════════════ */
.prize[b-yutv11zdss] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.prize:hover[b-yutv11zdss] { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 16px 32px -16px rgba(28, 25, 23, .22); }
.prize:hover .prize-img img[b-yutv11zdss] { transform: scale(1.04); }
.prize-img[b-yutv11zdss] {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--soft);
    display: flex; align-items: center; justify-content: center;
    padding: .9rem;
    overflow: hidden;
}
.prize-img img[b-yutv11zdss] { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .4s ease; }
.prize-stamp[b-yutv11zdss] {
    position: absolute; top: 9px; right: 9px;
    font-size: .58rem; font-weight: 600; letter-spacing: .06em;
    color: var(--accent-deep);
    background: rgba(255, 255, 255, .88);
    border: 1.5px dashed var(--accent);
    border-radius: 6px;
    padding: .18rem .45rem;
    transform: rotate(6deg);
}
.prize-body[b-yutv11zdss] { padding: .75rem .85rem; border-top: 1px solid var(--line); }
.prize-body p[b-yutv11zdss] { margin: 0; font-size: .7rem !important; color: var(--ink-2); line-height: 1.45; }
.prize-airline[b-yutv11zdss] {
    display: inline-block; margin-bottom: .35rem;
    font-size: .55rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-radius: 999px; padding: .14rem .5rem;
}

/* ═════════════════ CTA — panel trắng trên băng cam nhạt ═════════════════ */
.ab-cta[b-yutv11zdss] {
    position: relative;
    max-width: 880px; margin: 0 auto;
    padding: 2.4rem 1.6rem 2.6rem;
    background: #fff;
    border: 1px solid var(--accent-line);
    border-radius: 22px;
    box-shadow: 0 24px 48px -34px rgba(194, 65, 12, .45);
    text-align: center;
    /* cắt cành mai theo đúng góc bo — cành cố ý thò ra ngoài mép để đọc như
       "cành vươn vào khung", không phải sticker dán lọt thỏm bên trong */
    overflow: hidden;
}
/* Quầng nắng ấm rót từ đỉnh panel: panel trắng phẳng là lý do khối này bị chê
   trống; quầng này thay cho việc phải bịa thêm nội dung. */
.ab-cta[b-yutv11zdss]::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(115% 80% at 50% -12%, var(--accent-soft) 0%, rgba(255, 243, 234, 0) 64%);
    pointer-events: none;
}
@media (min-width: 768px) { .ab-cta[b-yutv11zdss] { padding: 2.8rem 3rem 3rem; } }
/* Nội dung nổi trên lớp trang trí */
.ab-cta-body[b-yutv11zdss] { position: relative; z-index: 1; }
.ab-cta h2[b-yutv11zdss] { margin-bottom: 0; }
.ab-cta .hl[b-yutv11zdss] { color: var(--accent); }

/* Nhãn dẫn — nối tiếp cách đánh "CHẶNG" của cả trang, có 2 vạch kẻ hai bên */
.ab-cta-eyebrow[b-yutv11zdss] {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 0 0 .8rem;
    font-size: .6875rem !important; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--accent-deep);
}
.ab-cta-eyebrow[b-yutv11zdss]::before,
.ab-cta-eyebrow[b-yutv11zdss]::after {
    content: ''; width: 26px; height: 1px;
    background: var(--accent-line);
}

.ab-cta-desc[b-yutv11zdss] {
    margin: .75rem auto 1.3rem;
    max-width: 34rem;
    font-size: .9rem !important; color: var(--ink-3); line-height: 1.65;
}
.ab-cta-trust[b-yutv11zdss] {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px;
    margin: 0 0 1.6rem; padding: 0; list-style: none;
}
/* Chip viền cam thay cho 3 dòng chữ trần — cho khối có "vật thể" để mắt bám */
.ab-cta-trust li[b-yutv11zdss] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: .4rem .85rem;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    background: var(--accent-soft);
    font-size: .8rem; font-weight: 600; color: var(--ink-2);
}
.ab-cta-trust svg[b-yutv11zdss] { width: 14px; height: 14px; color: var(--accent); }

/* ---- Trang trí mai của khối CTA (component con ⇒ bắt buộc ::deep) ----
   Desktop-only: dưới 1024px panel hẹp, cành sẽ chồng lên chữ. */
.ab-cta[b-yutv11zdss]  .ab-cta-branch,
.ab-cta[b-yutv11zdss]  .ab-cta-bloom,
.ab-cta[b-yutv11zdss]  .ab-cta-petal { display: none; }

@media (min-width: 1024px) {
    .ab-cta[b-yutv11zdss]  .ab-cta-branch {
        display: block;
        position: absolute; left: -26px; bottom: -20px;
        width: 232px; height: auto;
        opacity: .88; pointer-events: none;
    }

    .ab-cta[b-yutv11zdss]  .ab-cta-bloom {
        display: block;
        position: absolute; right: -30px; top: -34px;
        width: 152px; height: 152px;
        opacity: .13; pointer-events: none;
    }

    .ab-cta[b-yutv11zdss]  .ab-cta-petal {
        display: block;
        position: absolute;
        width: 12px; height: auto;
        opacity: .55; pointer-events: none;
    }

    /* Né chữ: cánh rơi chỉ thả vào 2 khoảng trống hai bên khối chữ căn giữa —
       đặt sát tiêu đề thì đọc ra "vết bẩn cạnh chữ B". */
    .ab-cta[b-yutv11zdss]  .ab-cta-petal--1 { left: 11%; top: 47%; --r0: -14deg; --r1: 20deg; }
    .ab-cta[b-yutv11zdss]  .ab-cta-petal--2 { right: 17%; top: 58%; --r0: 34deg; --r1: 64deg; }

    @media (prefers-reduced-motion: no-preference) {
        .ab-cta[b-yutv11zdss]  .ab-cta-petal { animation: ab-sway-b-yutv11zdss 9s ease-in-out infinite alternate; }
        .ab-cta[b-yutv11zdss]  .ab-cta-petal--2 { animation-duration: 12s; animation-delay: -5s; }
    }
}
.ab-cta-actions[b-yutv11zdss] { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

.btn[b-yutv11zdss] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px;
    padding: .8rem 1.7rem;
    font-size: .85rem; font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background .15s, color .15s, border-color .15s;
}
.btn:focus-visible[b-yutv11zdss] { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--solid[b-yutv11zdss] {
    background: var(--accent); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(234, 88, 12, .55);
}
.btn--solid:hover[b-yutv11zdss] { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(234, 88, 12, .6); }
.btn--solid:active[b-yutv11zdss] { transform: translateY(0); }
.btn--ghost[b-yutv11zdss] { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn--ghost:hover[b-yutv11zdss] { border-color: var(--accent); color: var(--accent-deep); }

/* ═════════════════ REVEAL + MOTION ═════════════════ */
.ab-rv-on .rv[b-yutv11zdss] { transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.ab-rv-on .rv:not(.in)[b-yutv11zdss] { opacity: 0; transform: translateY(24px); }
.ab-rv-on .tl-item .tl-node svg[b-yutv11zdss] {
    opacity: 0; transform: scale(.2);
    transition: transform .65s cubic-bezier(.34, 1.56, .64, 1) .18s, opacity .3s ease .18s;
}
.ab-rv-on .tl-item.in .tl-node svg[b-yutv11zdss] { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: no-preference) {
    .petal[b-yutv11zdss] { animation: ab-sway-b-yutv11zdss 9s ease-in-out infinite alternate; }
    .petal--h2[b-yutv11zdss] { animation-duration: 12s; animation-delay: -4s; }
    .petal--h3[b-yutv11zdss] { animation-duration: 10.5s; animation-delay: -7s; }
    .hero-plane[b-yutv11zdss] { animation: ab-drift-b-yutv11zdss 15s ease-in-out infinite alternate; }
}
@keyframes ab-sway-b-yutv11zdss {
    from { transform: translateY(-6px) rotate(var(--r0, -12deg)); }
    to { transform: translateY(10px) rotate(var(--r1, 20deg)); }
}
@keyframes ab-drift-b-yutv11zdss {
    from { transform: rotate(42deg) translate(-3px, 2px); }
    to { transform: rotate(42deg) translate(6px, -4px); }
}
@media (prefers-reduced-motion: reduce) {
    .ab-rv-on .rv[b-yutv11zdss],
    .ab-rv-on .tl-item .tl-node svg[b-yutv11zdss] {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ═════════════════ MOBILE ═════════════════ */
@media (max-width: 640px) {
    .ab-sec[b-yutv11zdss] { padding: 2.6rem 0; }
    .ab-wrap[b-yutv11zdss] { padding: 0 1rem; }
    .ab-hero[b-yutv11zdss] { padding: 92px 0 2.6rem; }
    .hero-grid[b-yutv11zdss] { gap: 2.2rem; }
    .hero-plane[b-yutv11zdss], .hero-sky[b-yutv11zdss]  .hero-bloom { display: none; }
    .hero-path path[b-yutv11zdss] { opacity: .22; }
    .petal[b-yutv11zdss] { opacity: .3; }

    .win--main[b-yutv11zdss] { width: 232px; height: 310px; border-radius: 116px; border-width: 6px; }
    .win--sm[b-yutv11zdss] { width: 128px; height: 172px; border-radius: 66px; border-width: 5px; left: -44px; bottom: -16px; }
    .tag[b-yutv11zdss] { top: -12px; right: -14px; padding: .65rem .7rem .45rem; }
    .tag-num[b-yutv11zdss] { font-size: 1.15rem; }

    .board[b-yutv11zdss] { grid-template-columns: 1fr 1fr; width: 100%; padding: .4rem 0; }
    .board-cell[b-yutv11zdss] { padding: .6rem 1.1rem; }
    .board-cell:nth-of-type(3)[b-yutv11zdss] { border-left: none; }
    .board-cell:nth-of-type(n+3)[b-yutv11zdss] { border-top: 1px dashed rgba(255, 255, 255, .28); }
    .board-num[b-yutv11zdss] { font-size: 1.05rem; }

    .ab-route[b-yutv11zdss] { padding-top: 1.8rem; }
    .biz[b-yutv11zdss] { min-height: 208px; }
    .biz-body[b-yutv11zdss] { min-height: 208px; padding: 1.1rem; }
    .str[b-yutv11zdss] { padding: 1.1rem; }
    .tl-card[b-yutv11zdss] { padding: 1rem 1.1rem; }
    .tl-item[b-yutv11zdss] { padding-left: 58px; padding-bottom: 1.6rem; }
    .tl-node[b-yutv11zdss] { width: 40px; height: 40px; }
    .tl-node svg[b-yutv11zdss] { width: 26px; height: 26px; }
    .tl[b-yutv11zdss]::before { left: 19px; }
    .tl-ranks[b-yutv11zdss] { grid-template-columns: 1fr 1fr; }
    .ab-cta[b-yutv11zdss] { padding: 1.8rem 1.2rem; }
    .ab-cta-actions .btn[b-yutv11zdss] { flex: 1 1 100%; }
}
/* /src/Features/Content/Pages/Public/CareerDetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   /careers/{slug} — hệ "TẠP CHÍ HIỆN ĐẠI — CAM CHỦ ĐẠO" (06/08, đồng bộ
   /careers + khu /news): trắng + stone ấm + MỘT cam phẳng #ea580c, không
   gradient. Be Vietnam Pro; IBM Plex Mono cho lương/hạn nộp/nhãn nhỏ.
   (Bản cũ dùng token --d-* dashboard + gradient cam — đã bỏ.)
   ═══════════════════════════════════════════════════════════════════ */
.cdetail-root[b-9kup4ef06k] {
    --soft: #faf9f7;
    --ink: #1c1917;
    --ink-2: #44403c;
    --ink-3: #78716c;
    --ink-4: #a8a29e;
    --line: #e7e5e4;
    --line-2: #d6d3d1;
    --accent: #ea580c;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    --danger: #dc2626;
    --mono: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;

    color: var(--ink-2);
    background: #fff;
    min-height: 100vh;
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.cdetail-wrap[b-9kup4ef06k] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ───── Hero ───── */
.cdetail-hero[b-9kup4ef06k] {
    padding: 116px 0 1.6rem;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}

.cdetail-back[b-9kup4ef06k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-decoration: none;
    margin-bottom: 14px;
    transition: color .15s ease;
}

    .cdetail-back:hover[b-9kup4ef06k] {
        color: var(--accent-deep);
    }

    .cdetail-back svg[b-9kup4ef06k] {
        width: 14px;
        height: 14px;
    }

.cdetail-hero-row[b-9kup4ef06k] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

@media (min-width: 1024px) {
    .cdetail-hero-row[b-9kup4ef06k] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.cdetail-hero-main[b-9kup4ef06k] {
    flex: 1;
    min-width: 0;
}

.cdetail-badges[b-9kup4ef06k] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.cdetail-badge[b-9kup4ef06k] {
    padding: .22rem .7rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

    .cdetail-badge.urgent[b-9kup4ef06k] {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
    }

    /* "Nổi bật" = cam thương hiệu, không vàng amber lạc tông */
    .cdetail-badge.featured[b-9kup4ef06k] {
        background: var(--accent);
        color: #fff;
        border: 1px solid var(--accent);
    }

.cdetail-hero h1[b-9kup4ef06k] {
    margin: 0 0 12px;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.16;
    text-wrap: balance;
}

.cdetail-meta[b-9kup4ef06k] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cdetail-meta-chip[b-9kup4ef06k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .32rem .8rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: .78rem;
    font-weight: 600;
}

    .cdetail-meta-chip svg[b-9kup4ef06k] {
        width: 13px;
        height: 13px;
        color: var(--accent);
    }

.cdetail-salary[b-9kup4ef06k] {
    font-family: var(--mono);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cdetail-salary-cur[b-9kup4ef06k] {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--ink-3);
    margin-top: 4px;
}

.cdetail-salary-neg[b-9kup4ef06k] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-2);
}

/* ───── Nội dung 2 cột ───── */
.cdetail-grid[b-9kup4ef06k] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 1.8rem 0 2.6rem;
}

@media (min-width: 1024px) {
    .cdetail-grid[b-9kup4ef06k] {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}

.cdetail-card[b-9kup4ef06k] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.cdetail-section[b-9kup4ef06k] {
    padding: 1.2rem 1.4rem;
}

    .cdetail-section + .cdetail-section[b-9kup4ef06k] {
        border-top: 1px solid var(--line);
    }

    .cdetail-section h2[b-9kup4ef06k] {
        margin: 0 0 12px;
        font-family: var(--mono);
        font-size: .62rem;
        font-weight: 600;
        color: var(--ink-3);
        text-transform: uppercase;
        letter-spacing: .12em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .cdetail-section h2 .ic[b-9kup4ef06k] {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            background: var(--accent);
            color: #fff;
            display: grid;
            place-items: center;
        }

            .cdetail-section h2 .ic svg[b-9kup4ef06k] {
                width: 13px;
                height: 13px;
            }

.cdetail-prose[b-9kup4ef06k] {
    font-size: .9rem;
    color: var(--ink-2);
    line-height: 1.7;
}

    .cdetail-prose p[b-9kup4ef06k] {
        margin: 0 0 8px;
    }

    .cdetail-prose ul[b-9kup4ef06k], .cdetail-prose ol[b-9kup4ef06k] {
        margin: 0 0 8px;
        padding-left: 20px;
    }

    .cdetail-prose li[b-9kup4ef06k]::marker {
        color: var(--accent);
    }

/* ───── Sidebar ───── */
.cdetail-side[b-9kup4ef06k] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 1024px) {
    .cdetail-side[b-9kup4ef06k] {
        position: sticky;
        top: 1.5rem;
    }
}

.cdetail-side-card[b-9kup4ef06k] {
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
}

.cdetail-side-title[b-9kup4ef06k] {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .12em;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cdetail-side-title svg[b-9kup4ef06k] {
        width: 14px;
        height: 14px;
        color: var(--accent);
    }

.cdetail-row[b-9kup4ef06k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: .8125rem;
}

    .cdetail-row + .cdetail-row[b-9kup4ef06k] {
        border-top: 1px solid var(--line);
    }

    .cdetail-row .k[b-9kup4ef06k] {
        color: var(--ink-3);
    }

    .cdetail-row .v[b-9kup4ef06k] {
        color: var(--ink);
        font-weight: 600;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .cdetail-row .v.danger[b-9kup4ef06k] {
        color: var(--danger);
        font-weight: 600;
        font-family: var(--mono);
    }

/* ───── Form ứng tuyển — khối signature cam ───── */
.cdetail-apply[b-9kup4ef06k] {
    background: #fff;
    border: 1px solid var(--accent-line);
    border-radius: 16px;
    padding: 1.2rem;
    position: relative;
    overflow: hidden;
}

    /* Mép trên cam PHẲNG — thay dải gradient cũ */
    .cdetail-apply[b-9kup4ef06k]::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background: var(--accent);
    }

.cdetail-apply h3[b-9kup4ef06k] {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.011em;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .cdetail-apply h3 svg[b-9kup4ef06k] {
        width: 16px;
        height: 16px;
        color: var(--accent);
    }

.cdetail-apply .desc[b-9kup4ef06k] {
    font-size: .75rem;
    color: var(--ink-3);
    margin: 0 0 14px;
    line-height: 1.5;
}

.cdetail-field[b-9kup4ef06k] {
    margin-bottom: 10px;
}

.cdetail-lbl[b-9kup4ef06k] {
    display: block;
    font-size: .67rem;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
}

    .cdetail-lbl .req[b-9kup4ef06k] {
        color: var(--accent);
        margin-left: 2px;
    }

.cdetail-input[b-9kup4ef06k] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.3px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: .875rem;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .cdetail-input:focus[b-9kup4ef06k] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, .13);
    }

    .cdetail-input[b-9kup4ef06k]::placeholder {
        color: var(--ink-4);
    }

textarea.cdetail-input[b-9kup4ef06k] {
    height: auto;
    padding: 8px 12px;
    line-height: 1.5;
    resize: vertical;
}

.cdetail-btn[b-9kup4ef06k] {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    box-shadow: 0 10px 22px -12px rgba(234, 88, 12, .55);
}

    .cdetail-btn:hover:not(:disabled)[b-9kup4ef06k] {
        background: var(--accent-deep);
        transform: translateY(-1px);
        box-shadow: 0 14px 28px -12px rgba(234, 88, 12, .6);
    }

    .cdetail-btn:disabled[b-9kup4ef06k] {
        opacity: .55;
        cursor: not-allowed;
    }

    .cdetail-btn:focus-visible[b-9kup4ef06k] {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
    }

.cdetail-alert[b-9kup4ef06k] {
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: .78rem;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
}

    .cdetail-alert svg[b-9kup4ef06k] {
        width: 14px;
        height: 14px;
        margin-top: 1px;
        flex-shrink: 0;
    }

.cdetail-applied[b-9kup4ef06k] {
    text-align: center;
    padding: 1.8rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
}

    .cdetail-applied .ico[b-9kup4ef06k] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
        margin: 0 auto 10px;
        display: grid;
        place-items: center;
        color: #16a34a;
        border: 1px solid #bbf7d0;
    }

        .cdetail-applied .ico svg[b-9kup4ef06k] {
            width: 22px;
            height: 22px;
        }

    .cdetail-applied h3[b-9kup4ef06k] {
        margin: 0 0 4px;
        color: #166534;
        font-size: .92rem;
        font-weight: 700;
    }

    .cdetail-applied p[b-9kup4ef06k] {
        margin: 0;
        color: #166534;
        font-size: .8125rem;
    }

/* ───── Không tìm thấy / skeleton ───── */
.cdetail-empty[b-9kup4ef06k] {
    padding: 116px 16px 60px;
    text-align: center;
    color: var(--ink-3);
}

    .cdetail-empty .ico[b-9kup4ef06k] {
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
        border-radius: 16px;
        background: var(--accent-soft);
        display: grid;
        place-items: center;
        color: var(--accent);
        border: 1px solid var(--accent-line);
    }

    .cdetail-empty h1[b-9kup4ef06k] {
        margin: 0 0 6px;
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--ink);
    }

    .cdetail-empty p[b-9kup4ef06k] {
        font-size: .875rem;
        margin: 0 0 16px;
    }

.cdetail-skel[b-9kup4ef06k] {
    background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 37%, #f5f5f4 63%);
    background-size: 400% 100%;
    border-radius: 16px;
    height: 280px;
    animation: cdetail-shimmer-b-9kup4ef06k 1.4s ease infinite;
}

@keyframes cdetail-shimmer-b-9kup4ef06k {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .cdetail-skel[b-9kup4ef06k] { animation: none; }
}
/* /src/Features/Content/Pages/Public/Careers.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   /careers — hệ "TẠP CHÍ HIỆN ĐẠI — CAM CHỦ ĐẠO" (06/08, đồng bộ khu /news):
   nền trắng + thang xám ấm stone + MỘT cam phẳng #ea580c (không gradient —
   quy tắc đã chốt với user). Be Vietnam Pro cho chữ, IBM Plex Mono cho
   lương/ngày/nhãn nhỏ. Bo góc lớn + bóng mềm khi hover.
   (Bản cũ dùng bộ token --d-* kiểu dashboard + gradient cam — đã bỏ.)
   ═══════════════════════════════════════════════════════════════════ */
.careers-root[b-r1qbqzl5ji] {
    --soft: #faf9f7;
    --ink: #1c1917;
    --ink-2: #44403c;
    --ink-3: #78716c;
    --ink-4: #a8a29e;
    --line: #e7e5e4;
    --line-2: #d6d3d1;
    --accent: #ea580c;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    --mono: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;

    color: var(--ink-2);
    background: #fff;
    min-height: 100vh;
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.careers-wrap[b-r1qbqzl5ji] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ───── Hero ───── */
.careers-hero[b-r1qbqzl5ji] {
    padding: 116px 0 2.4rem;
    border-bottom: 1px solid var(--line);
    background: var(--soft);
}

.careers-hero-inner[b-r1qbqzl5ji] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

/* Kicker kiểu khu /news: vạch cam ngắn + mono hoa */
.careers-eyebrow[b-r1qbqzl5ji] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 600;
    color: var(--accent-deep);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: .7rem;
}

.careers-eyebrow[b-r1qbqzl5ji]::before {
    content: '';
    width: 22px;
    height: 3px;
    flex: none;
    border-radius: 999px;
    background: var(--accent);
}

.careers-hero h1[b-r1qbqzl5ji] {
    margin: 0;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    line-height: 1.12;
    text-wrap: balance;
}

    /* Cam phẳng, KHÔNG gradient text */
    .careers-hero h1 .accent[b-r1qbqzl5ji] { color: var(--accent); }

.careers-hero p.sub[b-r1qbqzl5ji] {
    margin: .9rem auto 0;
    max-width: 40rem;
    color: var(--ink-3);
    font-size: .92rem;
    line-height: 1.65;
}

/* Ô tìm dạng viên thuốc — đồng bộ .nw-search-box */
.careers-search[b-r1qbqzl5ji] {
    max-width: 560px;
    margin: 1.5rem auto 1.6rem;
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 14px 30px -24px rgba(28, 25, 23, .55);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .careers-search:focus-within[b-r1qbqzl5ji] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, .13);
    }

.careers-search-input-wrap[b-r1qbqzl5ji] {
    flex: 1;
    position: relative;
}

    .careers-search-input-wrap svg[b-r1qbqzl5ji] {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--ink-4);
        pointer-events: none;
    }

.careers-search-input[b-r1qbqzl5ji] {
    height: 38px;
    width: 100%;
    border: 0;
    padding: 0 12px 0 38px;
    background: transparent;
    outline: none;
    font-size: .9rem;
    font-family: inherit;
    color: var(--ink);
}

    .careers-search-input[b-r1qbqzl5ji]::placeholder {
        color: var(--ink-4);
    }

.careers-search-btn[b-r1qbqzl5ji] {
    flex: none;
    height: 38px;
    padding: 0 1.3rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 10px 22px -12px rgba(234, 88, 12, .55);
}

    .careers-search-btn:hover[b-r1qbqzl5ji] {
        background: var(--accent-deep);
        transform: translateY(-1px);
    }

/* Dải số liệu — số đậm, nhãn mono nhỏ */
.careers-stats[b-r1qbqzl5ji] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .careers-stats[b-r1qbqzl5ji] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.careers-stat[b-r1qbqzl5ji] {
    background: #fff;
    padding: 1rem .8rem;
    text-align: center;
}

    .careers-stat .v[b-r1qbqzl5ji] {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--accent);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .careers-stat .l[b-r1qbqzl5ji] {
        margin-top: 7px;
        font-family: var(--mono);
        font-size: .58rem;
        color: var(--ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 600;
    }

/* ───── Bộ lọc + kết quả ───── */
.careers-section[b-r1qbqzl5ji] {
    padding: 2rem 0 2.6rem;
}

.careers-filters[b-r1qbqzl5ji] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.1rem;
}

.careers-filter[b-r1qbqzl5ji] {
    height: 38px;
    padding: 0 2rem 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .7rem center/13px no-repeat;
    color: var(--ink-2);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .careers-filter:hover[b-r1qbqzl5ji], .careers-filter:focus[b-r1qbqzl5ji] {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, .1);
    }

.careers-clear[b-r1qbqzl5ji] {
    background: transparent;
    border: 0;
    color: var(--accent-deep);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 8px;
}

    .careers-clear:hover[b-r1qbqzl5ji] {
        text-decoration: underline;
    }

.careers-results-count[b-r1qbqzl5ji] {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-3);
    margin-bottom: .9rem;
}

.careers-list[b-r1qbqzl5ji] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* Thẻ tin tuyển — hover nâng nhẹ + viền ửng cam, đồng bộ .nc của khu /news */
.careers-card[b-r1qbqzl5ji] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .careers-card:hover[b-r1qbqzl5ji] {
        transform: translateY(-3px);
        border-color: var(--accent-line);
        box-shadow: 0 20px 36px -24px rgba(28, 25, 23, .5);
    }

@media (min-width: 640px) {
    .careers-card[b-r1qbqzl5ji] {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.careers-card-main[b-r1qbqzl5ji] {
    flex: 1;
    min-width: 0;
}

.careers-badges[b-r1qbqzl5ji] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.careers-badge[b-r1qbqzl5ji] {
    padding: .18rem .6rem;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

    .careers-badge.urgent[b-r1qbqzl5ji] {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
    }

    /* "Nổi bật" = cam thương hiệu, không vàng amber lạc tông */
    .careers-badge.featured[b-r1qbqzl5ji] {
        background: var(--accent);
        color: #fff;
        border: 1px solid var(--accent);
    }

.careers-card-title[b-r1qbqzl5ji] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.011em;
    margin: 0;
    transition: color .15s ease;
}

.careers-card:hover .careers-card-title[b-r1qbqzl5ji] {
    color: var(--accent-deep);
}

.careers-meta[b-r1qbqzl5ji] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--ink-3);
    font-size: .78rem;
    margin-top: 6px;
}

    .careers-meta .dot[b-r1qbqzl5ji] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--ink-4);
    }

    .careers-meta .ico[b-r1qbqzl5ji] {
        width: 13px;
        height: 13px;
        color: var(--accent);
        margin-right: 3px;
        vertical-align: -2px;
    }

.careers-summary[b-r1qbqzl5ji] {
    color: var(--ink-3);
    font-size: .8125rem;
    margin: 8px 0 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.careers-tags[b-r1qbqzl5ji] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.careers-tag[b-r1qbqzl5ji] {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--ink-3);
    font-size: .67rem;
    font-weight: 500;
}

.careers-card-side[b-r1qbqzl5ji] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.careers-salary[b-r1qbqzl5ji] {
    font-family: var(--mono);
    font-size: .95rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.careers-salary-cur[b-r1qbqzl5ji] {
    font-family: var(--mono);
    font-size: .67rem;
    color: var(--ink-3);
}

.careers-salary-neg[b-r1qbqzl5ji] {
    font-size: .8125rem;
    color: var(--ink-3);
    font-weight: 600;
}

.careers-date[b-r1qbqzl5ji] {
    font-family: var(--mono);
    font-size: .67rem;
    color: var(--ink-4);
}

.careers-empty[b-r1qbqzl5ji] {
    text-align: center;
    padding: 3.6rem 1.5rem;
    border: 1px dashed var(--line-2);
    border-radius: 16px;
    background: var(--soft);
    color: var(--ink-3);
}

    .careers-empty svg[b-r1qbqzl5ji] {
        width: 36px;
        height: 36px;
        color: var(--ink-4);
        margin: 0 auto 10px;
        display: block;
    }

    .careers-empty b[b-r1qbqzl5ji] {
        display: block;
        color: var(--ink);
        font-weight: 700;
        margin-bottom: 4px;
        font-size: 1rem;
    }

    .careers-empty small[b-r1qbqzl5ji] {
        font-size: .8125rem;
        color: var(--ink-3);
    }

.careers-skeleton[b-r1qbqzl5ji] {
    background: linear-gradient(90deg, #f5f5f4 25%, #e7e5e4 37%, #f5f5f4 63%);
    background-size: 400% 100%;
    border-radius: 16px;
    height: 110px;
    animation: careers-shimmer-b-r1qbqzl5ji 1.4s ease infinite;
}

@keyframes careers-shimmer-b-r1qbqzl5ji {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .careers-skeleton[b-r1qbqzl5ji] { animation: none; }
}

.careers-pager[b-r1qbqzl5ji] {
    margin-top: 1.4rem;
}

/* ───── Vì sao chọn chúng tôi ───── */
.careers-why[b-r1qbqzl5ji] {
    padding: 2.6rem 0 3.4rem;
    border-top: 1px solid var(--accent-line);
    background: var(--accent-soft);
    margin-top: .6rem;
}

.careers-why-head[b-r1qbqzl5ji] {
    text-align: center;
    margin-bottom: 1.6rem;
}

    .careers-why-head h2[b-r1qbqzl5ji] {
        margin: 0;
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--ink);
    }

.careers-why-grid[b-r1qbqzl5ji] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .careers-why-grid[b-r1qbqzl5ji] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .careers-why-grid[b-r1qbqzl5ji] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.careers-why-card[b-r1qbqzl5ji] {
    background: #fff;
    border: 1px solid var(--accent-line);
    border-radius: 16px;
    padding: 1.2rem;
    transition: transform .2s ease, box-shadow .25s ease;
}

    .careers-why-card:hover[b-r1qbqzl5ji] {
        transform: translateY(-3px);
        box-shadow: 0 20px 36px -26px rgba(194, 65, 12, .5);
    }

.careers-why-icon[b-r1qbqzl5ji] {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}

    .careers-why-icon svg[b-r1qbqzl5ji] {
        width: 19px;
        height: 19px;
    }

.careers-why-card h3[b-r1qbqzl5ji] {
    margin: 0 0 4px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.011em;
}

.careers-why-card p[b-r1qbqzl5ji] {
    margin: 0;
    font-size: .8125rem;
    color: var(--ink-3);
    line-height: 1.55;
}
/* /src/Features/Content/Pages/Public/ContentPageView.razor.rz.scp.css */
.cp-wrap[b-4gdetcpag0] {
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 20px 80px;
    min-height: 60vh;
}

/* ─── States ─────────────────────────────────────────────── */
.cp-state[b-4gdetcpag0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
}

.cp-spinner[b-4gdetcpag0] {
    width: 34px;
    height: 34px;
    border: 3px solid #e5e7eb;
    border-top-color: #f97316;
    border-radius: 50%;
    animation: cp-spin-b-4gdetcpag0 0.8s linear infinite;
}

@keyframes cp-spin-b-4gdetcpag0 { to { transform: rotate(360deg); } }

.cp-404-code[b-4gdetcpag0] {
    font-size: 56px;
    font-weight: 800;
    color: #f97316;
    letter-spacing: 2px;
    margin: 0;
}

.cp-404-msg[b-4gdetcpag0] {
    font-size: 16px;
    color: #6b7280;
    margin: 0;
}

.cp-404-link[b-4gdetcpag0] {
    margin-top: 8px;
    font-size: 14px;
    color: #2563eb;
    text-decoration: none;
}

.cp-404-link:hover[b-4gdetcpag0] { text-decoration: underline; }

/* ─── Article ────────────────────────────────────────────── */
.cp-header[b-4gdetcpag0] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.cp-title[b-4gdetcpag0] {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 800;
    color: #1f2937;
    margin: 0;
}

.cp-updated[b-4gdetcpag0] {
    margin: 10px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

.cp-plain[b-4gdetcpag0] {
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
}

/* Prose cho nội dung HTML do admin soạn (WYSIWYG → sanitize server) */
.cp-body[b-4gdetcpag0] {
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cp-body[b-4gdetcpag0]  h1,
.cp-body[b-4gdetcpag0]  h2,
.cp-body[b-4gdetcpag0]  h3,
.cp-body[b-4gdetcpag0]  h4 {
    color: #1f2937;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.6em 0 0.6em;
}

.cp-body[b-4gdetcpag0]  h1 { font-size: 26px; }
.cp-body[b-4gdetcpag0]  h2 { font-size: 22px; }
.cp-body[b-4gdetcpag0]  h3 { font-size: 18px; }
.cp-body[b-4gdetcpag0]  h4 { font-size: 16px; }

.cp-body[b-4gdetcpag0]  p { margin: 0 0 1.1em; }

.cp-body[b-4gdetcpag0]  a {
    color: #ea580c;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cp-body[b-4gdetcpag0]  ul,
.cp-body[b-4gdetcpag0]  ol {
    margin: 0 0 1.1em;
    padding-left: 1.5em;
}

.cp-body[b-4gdetcpag0]  li { margin: 0.35em 0; }

.cp-body[b-4gdetcpag0]  blockquote {
    margin: 1.2em 0;
    padding: 0.4em 1.1em;
    border-left: 3px solid #f97316;
    background: #fff7ed;
    color: #7c2d12;
    border-radius: 0 6px 6px 0;
}

.cp-body[b-4gdetcpag0]  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 0.8em 0;
}

.cp-body[b-4gdetcpag0]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 14px;
    display: block;
    overflow-x: auto;
}

.cp-body[b-4gdetcpag0]  th,
.cp-body[b-4gdetcpag0]  td {
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    text-align: left;
}

.cp-body[b-4gdetcpag0]  th { background: #f9fafb; font-weight: 600; }

.cp-body[b-4gdetcpag0]  pre {
    background: #f3f4f6;
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 13px;
    margin: 1.2em 0;
}

.cp-body[b-4gdetcpag0]  code {
    background: #f3f4f6;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.9em;
}

.cp-body[b-4gdetcpag0]  pre code { background: none; padding: 0; }

.cp-body[b-4gdetcpag0]  hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 2em 0;
}

@media (max-width: 640px) {
    .cp-wrap[b-4gdetcpag0] { padding: 32px 16px 60px; }
    .cp-title[b-4gdetcpag0] { font-size: 24px; }
}
/* /src/Features/Content/Pages/Public/CorporateCustomer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   /corporate-customer — hệ "NM EDITORIAL — TẠP CHÍ DOANH NGHIỆP" (v4, 08/08)

   Vòng 3 đã đúng token nhưng nhịp vẫn là landing SaaS: khối nào cũng là thẻ
   bo góc + bóng, chữ cỡ vừa, mọi thứ căn giữa ⇒ nhìn "mẫu có sẵn". Vòng 4 đổi
   NHỊP chứ không đổi màu:
     · tiêu đề khổ báo (h1 tới 4.1rem, leading .96, mỗi vế một dòng)
     · dải số liệu chạy ngang hết hero, ngăn bằng nét hairline
     · cảm nhận = PULL-QUOTE trần trên nền, KHÔNG thẻ, không dấu nháy trang trí
     · đối tác = TƯỜNG LOGO theo hàng (nhãn trái · logo phải), bỏ 8 hộp rời
     · cành mai làm nhịp: hero → vạch ngăn có bông ở giữa → CTA
   Thẻ/bóng giờ chỉ dành cho 2 thứ THẬT SỰ nổi lên mặt giấy: ảnh hero và khối CTA.

   - Control (nút, ô nhập, hộp thoại, cảnh báo) là primitive `Nm*`; file này chỉ
     lo BỐ CỤC + các khối đặc thù của trang.
   - Trang trí mai dùng <MaiBranch/> ⇒ mọi selector nhắm nó PHẢI qua ::deep.

   ⚠ BẪY TOKEN: `wwwroot/app.css` khai lại vài tên `--nm-*` ở `:root` và nạp SAU
   tokens.css nên THẮNG. Không dùng `--nm-accent`, `--nm-bg`, `--nm-shadow-sm/md/lg`,
   `--nm-text*`, `--nm-radius*`. Chỉ dùng: brand ramp, ink/ink-2/muted,
   surface/surface-2, border/border-strong, r-card/r-input/r-pill,
   shadow/shadow-pop, font, status.
   ═══════════════════════════════════════════════════════════════════ */
.defcc-root[b-jd66kcvm73] {
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    font-family: var(--nm-font);
    overflow-x: clip;
}

.defcc-root h1[b-jd66kcvm73],
.defcc-root h2[b-jd66kcvm73],
.defcc-root h3[b-jd66kcvm73] {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--nm-ink);
    text-wrap: balance;
}

.defcc-root h2[b-jd66kcvm73] { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.12; }

.cc-wrap[b-jd66kcvm73] { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.cc-sec[b-jd66kcvm73] { padding: 4.6rem 0; }

/* ───── Nhãn đầu khối: vạch cam ngắn + chữ hoa giãn tracking ───── */
.cc-kicker[b-jd66kcvm73] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 .7rem;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--nm-brand-700);
}

.cc-kicker[b-jd66kcvm73]::before {
    content: '';
    width: 20px;
    height: 3px;
    flex: none;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
}

.sec-sub[b-jd66kcvm73] { margin: .8rem 0 0; font-size: 15px; line-height: 1.75; color: var(--nm-ink-2); max-width: 38rem; }

/* ═════════════════ HERO ═════════════════ */
.cc-hero[b-jd66kcvm73] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--nm-brand-50) 0%, var(--nm-surface) 78%);
    padding: 112px 0 0;
}

.hero-decor[b-jd66kcvm73] { position: absolute; inset: 0; pointer-events: none; }

/* Cành mai mọc từ mép TRÁI hero, nằm thấp dưới cột chữ — vùng duy nhất trống */
.hero-decor[b-jd66kcvm73]  .hero-branch {
    position: absolute;
    left: -34px;
    bottom: 88px;
    width: 300px;
    height: auto;
    opacity: .5;
    display: none;
}

/* Bông chìm sau ảnh, góc trên-phải */
.hero-decor[b-jd66kcvm73]  .hero-bloom {
    position: absolute;
    right: 3%;
    top: 8%;
    width: 210px;
    height: 210px;
    opacity: .14;
}

.hero-decor[b-jd66kcvm73]  .petal { position: absolute; width: 13px; height: auto; opacity: .5; }
.hero-decor[b-jd66kcvm73]  .petal--1 { left: 14%; top: 34%; --r0: -12deg; --r1: 20deg; }
.hero-decor[b-jd66kcvm73]  .petal--2 { left: 46%; top: 64%; --r0: 32deg; --r1: 64deg; }
.hero-decor[b-jd66kcvm73]  .petal--3 { left: 62%; top: 22%; --r0: -40deg; --r1: -8deg; }

@media (min-width: 1280px) {
    .hero-decor[b-jd66kcvm73]  .hero-branch { display: block; }
}

.hero-grid[b-jd66kcvm73] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.6rem;
    align-items: center;
}

@media (min-width: 1024px) { .hero-grid[b-jd66kcvm73] { grid-template-columns: 1.15fr .85fr; gap: 3.4rem; } }

/* Măng-sét: mỗi vế MỘT DÒNG, vế nhấn đứng riêng — đây là thứ tạo cảm giác
   "trang bìa" thay vì một dòng tiêu đề landing bình thường. */
.hero-copy h1[b-jd66kcvm73] {
    font-size: clamp(2.1rem, 4.4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0 0 1.3rem;
}

/* Mỗi vế một dòng; vế nào dài quá thì text-wrap:balance chia ĐỀU hai dòng —
   để mặc định sẽ rơi ra kiểu "Tiên phong dẫn / đầu", một chữ lẻ loi. */
.hero-copy h1 span[b-jd66kcvm73],
.hero-copy h1 em[b-jd66kcvm73] { display: block; text-wrap: balance; }
.hero-copy h1 em[b-jd66kcvm73] { font-style: normal; color: var(--nm-brand-500); }

/* Câu dẫn: cỡ lớn hơn thân bài + vạch cam bên trái = "lead" của bài báo */
.hero-lead[b-jd66kcvm73] {
    margin: 0 0 1.9rem;
    padding-left: 1.1rem;
    /* brand-300 chứ không phải 200: nền hero là brand-50, vạch nhạt quá thì mất hút */
    border-left: 3px solid var(--nm-brand-300);
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--nm-ink-2);
    max-width: 34rem;
}

.hero-actions[b-jd66kcvm73] { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Ảnh: chỉ còn MỘT thẻ nổi, bỏ vòng ring cam (nhiễu, không mang thông tin) */
.hero-visual[b-jd66kcvm73] { position: relative; }

.hero-photo[b-jd66kcvm73] {
    position: relative;
    z-index: 1;
    border-radius: var(--nm-r-card);
    overflow: hidden;
    border: 1px solid var(--nm-border);
    box-shadow: var(--nm-shadow-pop);
}

.hero-photo img[b-jd66kcvm73] { width: 100%; height: 420px; object-fit: cover; display: block; }

.float-card[b-jd66kcvm73] {
    position: absolute;
    z-index: 2;
    bottom: 26px;
    left: -26px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--nm-r-card);
    padding: .8rem 1.05rem;
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    box-shadow: var(--nm-shadow-pop);
}

.fc-ico[b-jd66kcvm73] {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--nm-r-input);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .2);
    color: var(--nm-on-brand);
}

.fc-ico svg[b-jd66kcvm73] { width: 18px; height: 18px; }
.fc-body[b-jd66kcvm73] { display: flex; flex-direction: column; }
.fc-body b[b-jd66kcvm73] { font-size: 1.05rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.fc-body i[b-jd66kcvm73] {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .85;
    margin-top: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .float-card[b-jd66kcvm73] { animation: cc-float-b-jd66kcvm73 6s ease-in-out infinite alternate; }
}

@keyframes cc-float-b-jd66kcvm73 {
    from { translate: 0 -4px; }
    to { translate: 0 6px; }
}

/* ───── Dải số liệu: chạy hết chiều rộng, ngăn bằng hairline ─────
   Trước đây 3 số nhét trong cột chữ nên bị co nhỏ; tách ra thành dải riêng
   thì số được phóng to và trang có một "hàng dữ liệu" đúng chất báo. */
.hero-strip[b-jd66kcvm73] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3.4rem;
    border-top: 1px solid var(--nm-border);
}

.hstat[b-jd66kcvm73] { padding: 1.5rem 1.4rem 1.7rem 0; }
.hstat + .hstat[b-jd66kcvm73] { border-left: 1px solid var(--nm-border); padding-left: 1.6rem; }

.hstat .v[b-jd66kcvm73] {
    display: block;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--nm-brand-500);
    font-variant-numeric: tabular-nums;
}

.hstat .l[b-jd66kcvm73] {
    display: block;
    margin-top: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nm-muted);
}

/* ═════════════════ VÌ SAO CHỌN ═════════════════ */
.why-grid[b-jd66kcvm73] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .why-grid[b-jd66kcvm73] { grid-template-columns: 2fr 3fr; gap: 4rem; }
    .why-head[b-jd66kcvm73] { position: sticky; top: 96px; }
}

.why-list[b-jd66kcvm73] { display: flex; flex-direction: column; }

.why-item[b-jd66kcvm73] {
    display: flex;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 1.7rem 0;
}

.why-item + .why-item[b-jd66kcvm73] { border-top: 1px solid var(--nm-border); }

/* Số khổ lớn màu nhạt, đậm lên khi rê chuột — nhịp "mục lục tạp chí" */
.why-no[b-jd66kcvm73] {
    flex: none;
    width: 3.2rem;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--nm-brand-200);
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}

.why-item:hover .why-no[b-jd66kcvm73] { color: var(--nm-brand-500); }
.why-item p[b-jd66kcvm73] { margin: 0; font-size: 16px; line-height: 1.85; color: var(--nm-ink-2); }

/* ═════════════════ VẠCH NGĂN CÓ BÔNG MAI ═════════════════ */
.cc-fleuron[b-jd66kcvm73] {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cc-fleuron-line[b-jd66kcvm73] { flex: 1; height: 1px; background: var(--nm-border); }

.cc-fleuron[b-jd66kcvm73]  .cc-fleuron-mai {
    flex: none;
    width: 30px;
    height: 30px;
    opacity: .55;
}

/* ═════════════════ CẢM NHẬN — PULL-QUOTE ═════════════════ */
.cc-quote-sec[b-jd66kcvm73] { background: var(--nm-surface-2); border-top: 1px solid var(--nm-border); border-bottom: 1px solid var(--nm-border); }

.quote-head[b-jd66kcvm73] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}

.testi-nav[b-jd66kcvm73] { display: flex; align-items: center; gap: 10px; }
.testi-count[b-jd66kcvm73] { font-size: 12.5px; font-weight: 600; color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.testi-dots[b-jd66kcvm73] { display: flex; align-items: center; gap: 7px; margin-right: 4px; }

.testi-dot[b-jd66kcvm73] {
    width: 8px;
    height: 8px;
    border-radius: var(--nm-r-pill);
    border: 0;
    padding: 0;
    background: var(--nm-border-strong);
    cursor: pointer;
    transition: background .25s, width .25s;
}

.testi-dot.on[b-jd66kcvm73] { width: 22px; background: var(--nm-brand-500); }
.testi-dot:focus-visible[b-jd66kcvm73] { outline: 2px solid var(--nm-brand-500); outline-offset: 2px; }

/* Trích dẫn nằm TRẦN trên nền: cỡ chữ mới là thứ đỡ khối này, không phải cái hộp.
   Dấu mở ngoặc treo ra ngoài lề trái (hanging punctuation làm tay) — dấu hiệu
   kinh điển của trang trích dẫn trên báo in. */
.quote[b-jd66kcvm73] { margin: 0; max-width: 60rem; }

.quote-text[b-jd66kcvm73] {
    position: relative;
    margin: 0 0 1.8rem;
    font-size: clamp(1.15rem, 2.2vw, 1.75rem);
    line-height: 1.5;
    letter-spacing: -.015em;
    color: var(--nm-ink);
    font-weight: 500;
}

.quote-text[b-jd66kcvm73]::before {
    content: '\201C';
    position: absolute;
    left: -.62em;
    top: -.1em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.6em;
    line-height: 1;
    color: var(--nm-brand-200);
    pointer-events: none;
}

.quote-by[b-jd66kcvm73] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--nm-border);
}

.quote-logos[b-jd66kcvm73] { display: flex; align-items: center; gap: 8px; }

.quote-logos img[b-jd66kcvm73] {
    height: 36px;
    max-width: 118px;
    object-fit: contain;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    padding: 4px 9px;
}

.quote-who[b-jd66kcvm73] { display: flex; flex-direction: column; gap: 3px; }
.quote-who .n[b-jd66kcvm73] { font-size: 14.5px; font-weight: 700; color: var(--nm-ink); }
.quote-who .p[b-jd66kcvm73] { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nm-muted); }

/* Slide animation (giữ tên class cũ — code-behind dùng) */
.defcc-slide-active[b-jd66kcvm73] { opacity: 1; transform: translateX(0); transition: opacity .28s ease, transform .28s ease; }
.defcc-slide-enter[b-jd66kcvm73] { opacity: 0; transform: translateX(26px); transition: opacity .1s ease, transform .1s ease; }
.defcc-slide-enter-rev[b-jd66kcvm73] { opacity: 0; transform: translateX(-26px); transition: opacity .1s ease, transform .1s ease; }

/* ═════════════════ HỆ SINH THÁI — TƯỜNG LOGO ═════════════════ */
.eco-head[b-jd66kcvm73] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.4rem;
    margin-bottom: 2.6rem;
}

.eco-head-copy[b-jd66kcvm73] { flex: 1 1 26rem; }

.big-stat[b-jd66kcvm73] { margin: 0; display: flex; align-items: baseline; gap: 12px; }

.big-stat-num[b-jd66kcvm73] {
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.045em;
    color: var(--nm-brand-500);
    font-variant-numeric: tabular-nums;
}

.big-stat-lbl[b-jd66kcvm73] { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--nm-muted); max-width: 6rem; }

/* ─────────────────────────────────────────────────────────────────────
   NỀN CHUNG (máy nhỏ): danh sách dọc — nhãn ngành ở trên, lưới logo dưới.
   Sơ đồ toả tròn chỉ bật từ 1120px trở lên (khối @media ở cuối phần này).
   ───────────────────────────────────────────────────────────────────── */
.eco-hub[b-jd66kcvm73] { display: grid; gap: 1.5rem; }

.eco-node[b-jd66kcvm73] { display: grid; gap: .7rem; }

/* Nhãn ngành: dưới 1120px là viên thuốc ngang (icon + tên),
   từ 1120px mới cắt thành lục giác tổ ong. */
.eco-hex[b-jd66kcvm73] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    justify-self: start;
    padding: .42rem .95rem .42rem .7rem;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
}

.eco-hex svg[b-jd66kcvm73] { width: 19px; height: 19px; flex: none; }
.eco-hex-name[b-jd66kcvm73] { font-size: 13.5px; font-weight: 700; line-height: 1.15; }

/* Lưới tự co thay vì flex: ô logo GIÃN ĐỀU hết bề ngang hàng — xếp flex thì
   ngành ít logo để hở một mảng trống lớn bên phải, hàng nhìn hụt. */
.eco-rail[b-jd66kcvm73] { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: .5rem; }

.eco-logo[b-jd66kcvm73] {
    height: 3.4rem;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem .55rem;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.eco-logo:hover[b-jd66kcvm73] { border-color: var(--nm-brand-300); transform: translateY(-2px); box-shadow: var(--nm-shadow); }
.eco-logo img[b-jd66kcvm73] { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Dấu "+" và vòng tròn giữa chỉ có nghĩa trong sơ đồ toả tròn */
.eco-plus[b-jd66kcvm73], .eco-core[b-jd66kcvm73] { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   ≥1120px — SƠ ĐỒ TOẢ TRÒN
   Lưới 2 cột: ngành lẻ bám cột trái (thanh logo chạy RA NGOÀI, lục giác quay
   vào trong), ngành chẵn bám cột phải. Hàng 2–3 thụt vào né vòng tròn giữa.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1120px) {
    .eco-hub[b-jd66kcvm73] {
        position: relative;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 0;
        align-items: center;
    }

    .eco-node[b-jd66kcvm73] { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0; }

    /* Cột trái: đảo thứ tự hiển thị ⇒ thanh logo trước, lục giác sát tim trang.
       Dùng direction thay vì row-reverse vì đây là grid, không phải flex. */
    .eco-node:nth-child(odd)[b-jd66kcvm73] { direction: rtl; margin-right: 36px; }
    .eco-node:nth-child(odd) > *[b-jd66kcvm73] { direction: ltr; }
    .eco-node:nth-child(even)[b-jd66kcvm73] { margin-left: 36px; }

    /* Hai hàng giữa né vòng tròn Ø232 (116 bán kính + 16 thở) */
    .eco-node:nth-child(3)[b-jd66kcvm73], .eco-node:nth-child(5)[b-jd66kcvm73] { margin-right: 132px; }
    .eco-node:nth-child(4)[b-jd66kcvm73], .eco-node:nth-child(6)[b-jd66kcvm73] { margin-left: 132px; }

    /* Lục giác tổ ong — điểm nhọn nằm ở giữa hai cạnh trái/phải nên chữ dài
       ("Kinh doanh") vẫn có trọn bề ngang ở dòng giữa. */
    .eco-hex[b-jd66kcvm73] {
        position: relative;
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        gap: .18rem;
        width: 96px;
        height: 86px;
        padding: 0 .9rem;
        border-radius: 0;
        clip-path: polygon(22% 0%, 78% 0%, 100% 50%, 78% 100%, 22% 100%, 0% 50%);
        text-align: center;
        transition: transform .3s ease, filter .3s ease;
    }

    .eco-hex svg[b-jd66kcvm73] { width: 22px; height: 22px; }
    .eco-hex-name[b-jd66kcvm73] { font-size: 11.5px; letter-spacing: -.01em; }
    .eco-node:hover .eco-hex[b-jd66kcvm73] { transform: scale(1.05); filter: brightness(1.06); }

    /* Thanh nét đứt: chui một đoạn xuống DƯỚI lục giác (âm lề) để hai thứ dính
       liền nhau như trong sơ đồ, không hở khe. */
    .eco-rail[b-jd66kcvm73] {
        position: relative;
        display: flex;
        align-items: center;
        gap: .35rem;
        min-height: 76px;
        padding: .4rem 1.5rem;
        border: 1.5px dashed var(--nm-brand-300);
        border-radius: 999px;
        background: var(--nm-surface);
    }

    /* Đầu trong đệm dày hơn (2.2rem) kẻo logo chui xuống dưới lục giác;
       đầu ngoài 2rem để chừa chỗ cho nút "+". */
    .eco-node:nth-child(odd) .eco-rail[b-jd66kcvm73] { margin-right: -22px; padding: .4rem 2.2rem .4rem 2rem; }
    .eco-node:nth-child(even) .eco-rail[b-jd66kcvm73] { margin-left: -22px; padding: .4rem 2rem .4rem 2.2rem; }

    /* Ô logo bỏ khung: trong sơ đồ, khung bao đã là thanh nét đứt rồi —
       lồng thêm viền cho từng logo thì rối như bảng tính. */
    .eco-logo[b-jd66kcvm73] {
        flex: 1 1 0;
        min-width: 0;
        height: 46px;
        border: 0;
        background: transparent;
        padding: 0 .15rem;
    }

    .eco-logo:hover[b-jd66kcvm73] { transform: scale(1.07); box-shadow: none; }

    /* Nút "+" khoá đầu ngoài thanh, đè lên đúng nét đứt */
    .eco-plus[b-jd66kcvm73] {
        position: absolute;
        top: 50%;
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        border-radius: 50%;
        background: var(--nm-brand-500);
        color: var(--nm-on-brand);
        font-size: 14px;
        line-height: 1;
    }

    .eco-node:nth-child(odd) .eco-plus[b-jd66kcvm73] { left: -15px; }
    .eco-node:nth-child(even) .eco-plus[b-jd66kcvm73] { right: -15px; }

    /* Vòng tròn tim sơ đồ */
    .eco-core[b-jd66kcvm73] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        place-content: center;
        justify-items: center;
        gap: .1rem;
        width: 232px;
        height: 232px;
        border-radius: 50%;
        border: 2.5px dashed var(--nm-brand-500);
        background: var(--nm-surface);
        text-align: center;
        z-index: 1;
    }

    .eco-core-num[b-jd66kcvm73] {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -.04em;
        color: var(--nm-brand-500);
        font-variant-numeric: tabular-nums;
    }

    .eco-core-lbl[b-jd66kcvm73] {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -.02em;
        color: var(--nm-brand-500);
    }

    /* Khoá resx là "đối tác" (chữ thường, dùng chung với kicker in hoa).
       capitalize sẽ ra "Đối Tác" — chỉ hoa CHỮ ĐẦU câu. */
    .eco-core-lbl[b-jd66kcvm73]::first-letter { text-transform: uppercase; }

    /* Vòng tròn đã nói "600+" rồi — để cả số nhấn ở đầu khối là nói hai lần */
    .cc-eco .big-stat[b-jd66kcvm73] { display: none; }
}

/* ═════════════════ CTA — TRANG BÌA SAU (khối brand đặc) ═════════════════
   Bố cục lệch trái, không còn căn giữa: cột chữ khổ báo + cột cam kết kê dọc.
   Nền là dải chuyển cam nhẹ (brand-600 → brand-500) cho mảng màu lớn đỡ phẳng.
   ⚠ Ramp chỉ có 50/100/300/500/600/700 — KHÔNG có --nm-brand-400. */
.cc-cta[b-jd66kcvm73] { background: var(--nm-surface); }

.cc-cta-panel[b-jd66kcvm73] {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.6rem 1.5rem;
    background: linear-gradient(140deg, var(--nm-brand-600) 0%, var(--nm-brand-500) 62%);
    border: 0;
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-pop);
    text-align: left;
    overflow: hidden;
}

@media (min-width: 768px) { .cc-cta-panel[b-jd66kcvm73] { padding: 3.4rem 3rem; } }
@media (min-width: 1024px) { .cc-cta-panel[b-jd66kcvm73] { padding: 4rem 3.6rem; } }

/* Vệt sáng chéo góc trên–phải: mảng cam 1100px để trơn sẽ bệt như tấm nhựa */
.cc-cta-panel[b-jd66kcvm73]::before {
    content: "";
    position: absolute;
    top: -45%;
    right: -12%;
    width: 62%;
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .20), transparent 68%);
    pointer-events: none;
}

/* Cành mai trên nền cam: bản vẽ vốn tông cam nên đặt thẳng lên là chìm.
   brightness(0) đưa mọi màu về ĐEN, invert(1) lật thành TRẮNG ⇒ còn đúng
   hình bóng cành mai, hạ opacity thành hoạ tiết chìm. */
.cc-cta-panel[b-jd66kcvm73]  .cc-cta-mai {
    position: absolute;
    left: -34px;
    bottom: -30px;
    width: 400px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .20;
    pointer-events: none;
    display: none;
}

/* Một bông nở lớn chìm ở góc phải — neo cột cam kết, cân với cành ở góc trái */
.cc-cta-panel[b-jd66kcvm73]  .cc-cta-bloom {
    position: absolute;
    right: -46px;
    top: -40px;
    width: 190px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .14;
    pointer-events: none;
    display: none;
}

@media (min-width: 1024px) {
    .cc-cta-panel[b-jd66kcvm73]  .cc-cta-mai,
    .cc-cta-panel[b-jd66kcvm73]  .cc-cta-bloom { display: block; }
}

.cc-cta-grid[b-jd66kcvm73] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
}

@media (min-width: 900px) {
    .cc-cta-grid[b-jd66kcvm73] {
        grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
        align-items: center;
        gap: 3.2rem;
    }
}

.cc-cta-copy[b-jd66kcvm73] { min-width: 0; }

/* Nhãn nhỏ có gạch dẫn — cùng nhịp "kicker" của các khối trên trang */
.cc-cta-eyebrow[b-jd66kcvm73] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .7rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}

.cc-cta-eyebrow[b-jd66kcvm73]::before {
    content: "";
    width: 26px;
    height: 2px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .6);
}

.defcc-root .cc-cta-panel h2[b-jd66kcvm73] {
    color: var(--nm-on-brand);
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.035em;
    margin: 0 0 .9rem;
}

.cc-cta-lead[b-jd66kcvm73] {
    margin: 0 0 1.7rem;
    max-width: 46ch;
    font-size: clamp(14.5px, 1.5vw, 16px);
    line-height: 1.62;
    color: rgba(255, 255, 255, .9);
}

.cc-cta-actions[b-jd66kcvm73] { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

/* Lối liên hệ phụ: chữ trắng gạch chân mảnh, KHÔNG dựng thành nút thứ hai —
   hai nút đặc cạnh nhau sẽ triệt tiêu nhau, mắt không biết bấm cái nào. */
.cc-cta-call[b-jd66kcvm73] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: border-color .18s ease, opacity .18s ease;
}

.cc-cta-call:hover[b-jd66kcvm73] { border-bottom-color: #fff; opacity: .92; }
.cc-cta-call i[b-jd66kcvm73] { font-size: 15px; }

/* Cột cam kết — bảng kê có vạch ngăn, tách khỏi cột chữ bằng một nét dọc mảnh */
.cc-cta-trust[b-jd66kcvm73] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .1rem;
}

@media (min-width: 900px) {
    .cc-cta-trust[b-jd66kcvm73] {
        padding-left: 2.6rem;
        border-left: 1px solid rgba(255, 255, 255, .28);
    }
}

.cc-cta-trust li[b-jd66kcvm73] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.cc-cta-trust li + li[b-jd66kcvm73] { border-top: 1px solid rgba(255, 255, 255, .22); }

/* Dấu tích trong khuyên tròn — thay chip viền, đọc rõ hơn ở cỡ chữ lớn */
.cc-cta-trust i[b-jd66kcvm73] {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    font-size: 14px;
    color: #fff;
}

/* ═════════════════ HỘP THOẠI (nội dung trong NmModal) ═════════════════ */
.dlg-alert[b-jd66kcvm73] { margin-bottom: 1rem; }
.dlg-form[b-jd66kcvm73] { display: flex; flex-direction: column; gap: 1rem; }
.dlg-row[b-jd66kcvm73] { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 480px) { .dlg-row[b-jd66kcvm73] { grid-template-columns: 1fr 1fr; } }

.dlg-success[b-jd66kcvm73] { text-align: center; padding: 1.2rem 0 .6rem; }

.dlg-success-ico[b-jd66kcvm73] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--nm-ok-soft);
    color: var(--nm-ok);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
}

.dlg-success h4[b-jd66kcvm73] { margin: 0 0 .4rem; font-size: 16px; font-weight: 700; color: var(--nm-ink); }
.dlg-success p[b-jd66kcvm73] { margin: 0; font-size: 14px; color: var(--nm-muted); line-height: 1.6; }

/* ═════════════════ REVEAL + MOTION ═════════════════ */
.cc-rv-on .rv[b-jd66kcvm73] { transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.cc-rv-on .rv:not(.in)[b-jd66kcvm73] { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: no-preference) {
    .hero-decor[b-jd66kcvm73]  .petal { animation: cc-sway-b-jd66kcvm73 9s ease-in-out infinite alternate; }
    .hero-decor[b-jd66kcvm73]  .petal--2 { animation-duration: 12s; animation-delay: -4s; }
    .hero-decor[b-jd66kcvm73]  .petal--3 { animation-duration: 10.5s; animation-delay: -7s; }
}

@keyframes cc-sway-b-jd66kcvm73 {
    from { translate: 0 -6px; rotate: var(--r0, -12deg); }
    to { translate: 0 10px; rotate: var(--r1, 20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-rv-on .rv[b-jd66kcvm73] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═════════════════ THU HẸP ═════════════════ */
@media (max-width: 900px) {
    /* Dải số liệu: 3 cột hẹp quá thì số bị xuống dòng — xếp dọc, ngăn ngang */
    .hero-strip[b-jd66kcvm73] { grid-template-columns: 1fr 1fr; }
    .hstat + .hstat[b-jd66kcvm73] { border-left: 1px solid var(--nm-border); }
    .hstat:nth-child(3)[b-jd66kcvm73] { border-left: 0; border-top: 1px solid var(--nm-border); grid-column: 1 / -1; padding-left: 0; }
}

@media (max-width: 640px) {
    .cc-wrap[b-jd66kcvm73] { padding: 0 1.15rem; }
    .cc-sec[b-jd66kcvm73] { padding: 2.8rem 0; }
    .cc-fleuron[b-jd66kcvm73] { padding: 0 1.15rem; }
    .cc-hero[b-jd66kcvm73] { padding: 92px 0 0; }
    .hero-decor[b-jd66kcvm73]  .hero-bloom { display: none; }
    .hero-decor[b-jd66kcvm73]  .petal { opacity: .35; }
    .hero-copy h1[b-jd66kcvm73] { letter-spacing: -.025em; }
    .hero-lead[b-jd66kcvm73] { font-size: 15px; padding-left: .9rem; }
    .hero-photo img[b-jd66kcvm73] { height: 240px; }
    /* Thẻ nổi kéo vào TRONG mép ảnh — tràn mép âm trên mobile là tràn ngang */
    .float-card[b-jd66kcvm73] { padding: .55rem .75rem; border-radius: var(--nm-r-input); bottom: 12px; left: 10px; }
    .fc-ico[b-jd66kcvm73] { width: 30px; height: 30px; }
    .fc-body b[b-jd66kcvm73] { font-size: .92rem; }
    .hero-strip[b-jd66kcvm73] { margin-top: 2.2rem; }
    .hstat[b-jd66kcvm73] { padding: 1.1rem 1rem 1.2rem 0; }
    .hstat + .hstat[b-jd66kcvm73] { padding-left: 1rem; }
    .why-item[b-jd66kcvm73] { gap: 1rem; padding: 1.3rem 0; }
    .why-no[b-jd66kcvm73] { width: 2.4rem; font-size: 1.9rem; }
    .why-item p[b-jd66kcvm73] { font-size: 15px; line-height: 1.8; }
    .quote-text[b-jd66kcvm73] { padding-left: .1rem; }
    .quote-text[b-jd66kcvm73]::before { font-size: 2.2em; left: -.34em; }
    .eco-rail[b-jd66kcvm73] { grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); }
    .eco-logo[b-jd66kcvm73] { height: 2.9rem; }
    .cc-cta-panel[b-jd66kcvm73] { padding: 2.2rem 1.3rem 2.4rem; }
    .cc-cta-grid[b-jd66kcvm73] { gap: 1.5rem; }
    .cc-cta-lead[b-jd66kcvm73] { font-size: 14.5px; margin-bottom: 1.4rem; }
    /* Nút chiếm trọn hàng, "gọi ngay" xuống dòng dưới — hai thứ cạnh nhau ở
       360px sẽ vỡ thành nút cụt + chữ dính mép. */
    .cc-cta-actions[b-jd66kcvm73] { gap: .85rem; }
    .cc-cta-actions[b-jd66kcvm73]  .nm-btn { width: 100%; justify-content: center; }
    .cc-cta-trust li[b-jd66kcvm73] { padding: .72rem 0; font-size: 14.5px; gap: .65rem; }
    .cc-cta-trust i[b-jd66kcvm73] { width: 23px; height: 23px; font-size: 13px; }
}
/* /src/Features/Content/Pages/Public/PartnerCustomer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   /partner-customer — hệ "TẠP CHÍ HIỆN ĐẠI — CAM CHỦ ĐẠO" (06/08,
   đồng bộ khu /news + /careers): nền trắng + thang stone ấm + MỘT cam
   phẳng #ea580c làm màu signature; bo góc lớn + bóng mềm; IBM Plex Mono
   cho kicker/số liệu/chỉ mục. Không gradient đa sắc, không washi/vé.
   ═══════════════════════════════════════════════════════════════════ */
/* Token khai trên CẢ .pc-dialog-back vì dialog render NGOÀI .pc-root
   (var() không cascade tới → từng làm header dialog trong suốt). */
.pc-root[b-cswzj1qg2k],
.pc-dialog-back[b-cswzj1qg2k] {
    --soft: #faf9f7;
    --ink: #1c1917;
    --ink-2: #44403c;
    --ink-3: #78716c;
    --ink-4: #a8a29e;
    --line: #e7e5e4;
    --line-2: #d6d3d1;
    --accent: #ea580c;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    --mono: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;

    color: var(--ink-2);
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.pc-root[b-cswzj1qg2k] {
    background: #fff;
    overflow-x: clip;
}

.pc-container[b-cswzj1qg2k] { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.pc-section[b-cswzj1qg2k] { padding: 3.6rem 0; }
.pc-section--tight[b-cswzj1qg2k] { padding: 2.6rem 0 3.6rem; }

/* Kicker chữ ký thương hiệu: vạch cam + mono hoa */
.pc-kicker[b-cswzj1qg2k] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 .7rem;
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.pc-kicker[b-cswzj1qg2k]::before { content: ''; width: 22px; height: 3px; flex: none; border-radius: 999px; background: var(--accent); }

/* ───── Nút ───── */
.pc-btn[b-cswzj1qg2k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    padding: .78rem 1.5rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.pc-btn svg[b-cswzj1qg2k] { width: 16px; height: 16px; transition: transform .2s ease; }
.pc-btn:focus-visible[b-cswzj1qg2k] { outline: 2px solid var(--accent); outline-offset: 2px; }

.pc-btn--solid[b-cswzj1qg2k] {
    background: var(--accent);
    color: #fff;
    border: 0;
    box-shadow: 0 10px 22px -12px rgba(234, 88, 12, .55);
}

.pc-btn--solid:hover:not(:disabled)[b-cswzj1qg2k] {
    background: var(--accent-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(234, 88, 12, .6);
}

.pc-btn--solid:hover:not(:disabled) svg[b-cswzj1qg2k] { transform: translateX(3px); }

.pc-btn--ghost[b-cswzj1qg2k] {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--line-2);
}

.pc-btn--ghost:hover[b-cswzj1qg2k] { border-color: var(--accent); color: var(--accent-deep); }
.pc-btn--block[b-cswzj1qg2k] { width: 100%; }
.pc-btn:disabled[b-cswzj1qg2k] { opacity: .6; cursor: not-allowed; }

/* ═════════════════ HERO ═════════════════ */
.pc-hero[b-cswzj1qg2k] {
    padding: 116px 0 3.2rem;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.pc-hero-grid[b-cswzj1qg2k] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    align-items: center;
}

@media (min-width: 1024px) { .pc-hero-grid[b-cswzj1qg2k] { grid-template-columns: 1.05fr .95fr; gap: 3.6rem; } }

.pc-hero-title[b-cswzj1qg2k] {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 3.8vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    color: var(--ink);
    text-wrap: balance;
}

.pc-hero-title .hl[b-cswzj1qg2k],
.pc-section-title .hl[b-cswzj1qg2k] { color: var(--accent); }

.pc-hero-tagline[b-cswzj1qg2k] {
    margin: 0 0 1.5rem;
    max-width: 32rem;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ink-3);
}

/* Dải số liệu — số cam đậm, nhãn mono (đồng bộ .careers-stats) */
.pc-stats[b-cswzj1qg2k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    max-width: 520px;
}

.pc-stat[b-cswzj1qg2k] {
    background: #fff;
    padding: .95rem .8rem;
    text-align: center;
}

.pc-stat .v[b-cswzj1qg2k] {
    display: block;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pc-stat .l[b-cswzj1qg2k] {
    display: block;
    margin-top: 7px;
    font-family: var(--mono);
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.pc-hero-actions[b-cswzj1qg2k] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.6rem;
}

/* Ảnh hero + huy hiệu năm kinh nghiệm */
.pc-hero-visual[b-cswzj1qg2k] { position: relative; display: none; }
@media (min-width: 1024px) { .pc-hero-visual[b-cswzj1qg2k] { display: block; } }

.pc-hero-photo[b-cswzj1qg2k] {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px -36px rgba(28, 25, 23, .55);
}

.pc-hero-photo img[b-cswzj1qg2k] { display: block; width: 100%; height: auto; }

.pc-hero-badge[b-cswzj1qg2k] {
    position: absolute;
    left: -18px;
    bottom: 22px;
    background: var(--accent);
    color: #fff;
    border-radius: 14px;
    padding: .8rem 1.1rem;
    box-shadow: 0 16px 32px -16px rgba(194, 65, 12, .7);
    text-align: center;
}

.pc-hero-badge .n[b-cswzj1qg2k] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pc-hero-badge .t[b-cswzj1qg2k] {
    display: block;
    margin-top: 5px;
    font-family: var(--mono);
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
}

/* ═════════════════ VÌ SAO CHỌN ═════════════════ */
.pc-why-grid[b-cswzj1qg2k] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .pc-why-grid[b-cswzj1qg2k] { grid-template-columns: 2fr 3fr; gap: 3.4rem; }
    .ch-head[b-cswzj1qg2k] { position: sticky; top: 96px; }
}

.pc-section-title[b-cswzj1qg2k] {
    margin: 0 0 .8rem;
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.18;
    color: var(--ink);
    text-wrap: balance;
}

.pc-section-desc[b-cswzj1qg2k] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--ink-3);
}

/* Accordion — thẻ trắng bo lớn, mở ra viền cam + chỉ mục cam */
.pc-acc[b-cswzj1qg2k] { display: flex; flex-direction: column; gap: .65rem; }

.pc-acc-item[b-cswzj1qg2k] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.pc-acc-item.is-open[b-cswzj1qg2k] {
    border-color: var(--accent-line);
    box-shadow: 0 16px 32px -24px rgba(194, 65, 12, .5);
}

.pc-acc-btn[b-cswzj1qg2k] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem 1.15rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.pc-acc-btn:focus-visible[b-cswzj1qg2k] { outline: 2px solid var(--accent); outline-offset: -2px; }

.pc-acc-index[b-cswzj1qg2k] {
    flex: none;
    font-family: var(--mono);
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink-4);
    transition: color .2s ease;
}

.pc-acc-item.is-open .pc-acc-index[b-cswzj1qg2k] { color: var(--accent); }

.pc-acc-title[b-cswzj1qg2k] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}

.pc-acc-ico[b-cswzj1qg2k] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.pc-acc-ico svg[b-cswzj1qg2k] { width: 13px; height: 13px; }

/* Dấu cộng xoay 45° thành × khi mở — icon tĩnh, không đổi markup */
.pc-acc-item.is-open .pc-acc-ico[b-cswzj1qg2k] {
    transform: rotate(45deg);
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pc-acc-body[b-cswzj1qg2k] { padding: 0 1.15rem 1.1rem 3.1rem; }

.pc-acc-list[b-cswzj1qg2k] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.pc-acc-list li[b-cswzj1qg2k] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ink-2);
}

.pc-acc-check[b-cswzj1qg2k] { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

/* ═════════════════ CTA — băng cam nhạt + panel trắng ═════════════════ */
.pc-band[b-cswzj1qg2k] {
    padding: 3.6rem 0 4rem;
    background: var(--accent-soft);
    border-top: 1px solid var(--accent-line);
    border-bottom: 1px solid var(--accent-line);
}

.pc-cta-panel[b-cswzj1qg2k] {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 2.4rem 1.6rem 2.6rem;
    background: #fff;
    border: 1px solid var(--accent-line);
    border-radius: 22px;
    box-shadow: 0 24px 48px -34px rgba(194, 65, 12, .45);
    text-align: center;
    /* cắt cành mai theo góc bo — cành cố ý thò ra ngoài mép để đọc như
       "cành vươn vào khung", không phải sticker dán lọt thỏm bên trong */
    overflow: hidden;
}

/* Quầng nắng ấm rót từ đỉnh panel: nền trắng phẳng là lý do khối chốt bị chê
   trống, quầng này thay cho việc phải bịa thêm nội dung. */
.pc-cta-panel[b-cswzj1qg2k]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(115% 80% at 50% -12%, var(--accent-soft) 0%, rgba(255, 243, 234, 0) 64%);
    pointer-events: none;
}

@media (min-width: 768px) { .pc-cta-panel[b-cswzj1qg2k] { padding: 2.8rem 3rem 3rem; } }

/* Nội dung nổi trên lớp trang trí */
.pc-cta-body[b-cswzj1qg2k] { position: relative; z-index: 1; }

/* Nhãn dẫn — cùng chất mono với .pc-kicker nhưng căn giữa, nên dùng 2 vạch
   kẻ hai bên thay cho vạch cam đơn nằm bên trái của kicker. */
.pc-cta-eyebrow[b-cswzj1qg2k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 .8rem;
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-deep);
}

.pc-cta-eyebrow[b-cswzj1qg2k]::before,
.pc-cta-eyebrow[b-cswzj1qg2k]::after {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--accent-line);
}

.pc-cta-panel h2[b-cswzj1qg2k] {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}

.pc-cta-desc[b-cswzj1qg2k] {
    margin: .7rem auto 1.1rem;
    max-width: 34rem;
    font-size: .9rem;
    line-height: 1.65;
    color: var(--ink-3);
}

.pc-cta-trust[b-cswzj1qg2k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

/* Chip viền cam thay cho 3 dòng chữ trần — cho khối có "vật thể" để mắt bám */
.pc-cta-trust li[b-cswzj1qg2k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .4rem .85rem;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    background: var(--accent-soft);
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-2);
}

.pc-cta-trust svg[b-cswzj1qg2k] { width: 14px; height: 14px; color: var(--accent); }

.pc-cta-actions[b-cswzj1qg2k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
}

/* ---- Trang trí mai của khối CTA (component con ⇒ bắt buộc ::deep) ----
   Desktop-only: dưới 1024px panel hẹp, cành sẽ chồng lên chữ. */
.pc-cta-panel[b-cswzj1qg2k]  .pc-cta-branch,
.pc-cta-panel[b-cswzj1qg2k]  .pc-cta-bloom,
.pc-cta-panel[b-cswzj1qg2k]  .pc-cta-petal { display: none; }

@media (min-width: 1024px) {
    .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-branch {
        display: block;
        position: absolute;
        left: -26px;
        bottom: -20px;
        width: 232px;
        height: auto;
        opacity: .88;
        pointer-events: none;
    }

    .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-bloom {
        display: block;
        position: absolute;
        right: -30px;
        top: -34px;
        width: 152px;
        height: 152px;
        opacity: .13;
        pointer-events: none;
    }

    .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-petal {
        display: block;
        position: absolute;
        width: 12px;
        height: auto;
        opacity: .55;
        pointer-events: none;
    }

    /* Né chữ: cánh rơi chỉ thả vào 2 khoảng trống hai bên khối chữ căn giữa */
    .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-petal--1 { left: 11%; top: 47%; --r0: -14deg; --r1: 20deg; }
    .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-petal--2 { right: 17%; top: 58%; --r0: 34deg; --r1: 64deg; }

    @media (prefers-reduced-motion: no-preference) {
        .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-petal { animation: pc-cta-sway-b-cswzj1qg2k 9s ease-in-out infinite alternate; }
        .pc-cta-panel[b-cswzj1qg2k]  .pc-cta-petal--2 { animation-duration: 12s; animation-delay: -5s; }
    }
}

@keyframes pc-cta-sway-b-cswzj1qg2k {
    from { transform: translateY(-6px) rotate(var(--r0, -12deg)); }
    to { transform: translateY(10px) rotate(var(--r1, 20deg)); }
}

/* ═════════════════ SUBSCRIBE ═════════════════ */

/* ═════════════════ FORM / DIALOG ═════════════════ */
.pc-input[b-cswzj1qg2k] {
    width: 100%;
    min-height: 44px;
    padding: .6rem 1rem;
    border: 1.3px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: .875rem;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pc-input:focus[b-cswzj1qg2k] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, .13); }
.pc-input[b-cswzj1qg2k]::placeholder { color: var(--ink-4); }
select.pc-input[b-cswzj1qg2k] { cursor: pointer; }
textarea.pc-input[b-cswzj1qg2k] { resize: vertical; line-height: 1.5; }

.pc-label[b-cswzj1qg2k] {
    display: block;
    margin-bottom: 5px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.pc-label .req[b-cswzj1qg2k] { color: var(--accent); }

.pc-err[b-cswzj1qg2k] {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #991b1b;
    font-size: .8rem;
}

.pc-form-grid[b-cswzj1qg2k] { display: flex; flex-direction: column; gap: 12px; }
.pc-form-row[b-cswzj1qg2k] { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .pc-form-row[b-cswzj1qg2k] { grid-template-columns: 1fr 1fr; } }

.pc-dialog-back[b-cswzj1qg2k] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(28, 25, 23, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: pc-fade-b-cswzj1qg2k .2s ease;
}

.pc-dialog[b-cswzj1qg2k] {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 2rem);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 40px 80px -40px rgba(28, 25, 23, .7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pc-up-b-cswzj1qg2k .28s cubic-bezier(.16, 1, .3, 1);
}

.pc-dialog-hd[b-cswzj1qg2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--line);
}

.pc-dialog-hd h3[b-cswzj1qg2k] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.011em;
    color: var(--ink);
}

.pc-dialog-close[b-cswzj1qg2k] {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.pc-dialog-close:hover[b-cswzj1qg2k] { color: var(--accent-deep); border-color: var(--accent-line); background: var(--accent-soft); }

.pc-dialog-body[b-cswzj1qg2k] { padding: 1.3rem 1.4rem 1.5rem; overflow-y: auto; }

.pc-success[b-cswzj1qg2k] { text-align: center; padding: 1.6rem 0 .8rem; }

.pc-success-ico[b-cswzj1qg2k] {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 28px -14px rgba(234, 88, 12, .7);
}

.pc-success h4[b-cswzj1qg2k] { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.pc-success p[b-cswzj1qg2k] { margin: 0; font-size: .875rem; color: var(--ink-3); line-height: 1.6; }

@keyframes pc-fade-b-cswzj1qg2k { from { opacity: 0; } to { opacity: 1; } }
@keyframes pc-up-b-cswzj1qg2k { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* ═════════════════ REVEAL ═════════════════ */
.pc-reveal-ready .ch-head[b-cswzj1qg2k],
.pc-reveal-ready .pc-acc[b-cswzj1qg2k],
.pc-reveal-ready .pc-cta-panel[b-cswzj1qg2k] {
    transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}

.pc-reveal-ready .ch-head:not(.is-revealed)[b-cswzj1qg2k],
.pc-reveal-ready .pc-acc:not(.is-revealed)[b-cswzj1qg2k],
.pc-reveal-ready .pc-cta-panel:not(.is-revealed)[b-cswzj1qg2k] {
    opacity: 0;
    transform: translateY(22px);
}

@media (prefers-reduced-motion: reduce) {
    .pc-reveal-ready .ch-head[b-cswzj1qg2k],
    .pc-reveal-ready .pc-acc[b-cswzj1qg2k],
    .pc-reveal-ready .pc-cta-panel[b-cswzj1qg2k] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .pc-dialog-back[b-cswzj1qg2k], .pc-dialog[b-cswzj1qg2k] { animation: none; }
}

/* ═════════════════ MOBILE ═════════════════ */
@media (max-width: 640px) {
    .pc-container[b-cswzj1qg2k] { padding: 0 1.15rem; }
    .pc-section[b-cswzj1qg2k] { padding: 2.6rem 0; }
    .pc-hero[b-cswzj1qg2k] { padding: 96px 0 2.4rem; }
    .pc-stats[b-cswzj1qg2k] { max-width: none; }
    .pc-hero-actions .pc-btn[b-cswzj1qg2k] { flex: 1 1 100%; }
    .pc-cta-actions .pc-btn[b-cswzj1qg2k] { flex: 1 1 100%; }
    .pc-acc-body[b-cswzj1qg2k] { padding-left: 1.15rem; }
}
/* /src/Features/Content/Pages/Public/Services.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   SERVICES — hệ "Bầu trời Ngọc Mai" (đồng bộ /about, 2026-07-06)
   Navy hàng không + xanh trời nhạt + cam hoa mai. Mỗi dịch vụ = GATE.
   ═══════════════════════════════════════════════════════════════════ */
.sv[b-6vntrohfg4] {
    --sky-50: #f3f8fd;
    --sky-100: #e8f2fb;
    --sky-line: #d8e6f2;
    --ink: #0f2438;
    --ink-2: #3f5670;
    --ink-3: #6b7f95;
    --accent: #ea580c;
    --accent-2: #f97316;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    --amber: #ffc94d;
    --board: #0f2438;
    background: #fff;
    color: var(--ink-2);
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.sv h1[b-6vntrohfg4], .sv h2[b-6vntrohfg4] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}
.sv h1[b-6vntrohfg4] { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; margin: 0 0 1.1rem; }
.sv h2[b-6vntrohfg4] { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; margin: 0; }
.sv h3[b-6vntrohfg4] { font-weight: 700; color: var(--ink); }
.sv .hl[b-6vntrohfg4] { color: var(--accent); }
/* Fallback đặt 'Be Vietnam Pro' TRƯỚC monospace: Consolas/Courier thiếu glyph Việt
   → khi Plex Mono chưa load, dấu tiếng Việt vẫn hiển thị đúng (không vỡ). */
.sv .mono[b-6vntrohfg4] { font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace; }

/* ===== Layout ===== */
.sv-wrap[b-6vntrohfg4] { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.sv-sec[b-6vntrohfg4] { padding: 4.5rem 0; }
.sv-band[b-6vntrohfg4] {
    background: linear-gradient(180deg, var(--sky-50) 0%, var(--sky-100) 100%);
    border-top: 1px solid var(--sky-line);
    border-bottom: 1px solid var(--sky-line);
}
/* Band CTA: MÀU ĐẶC (không gradient) để notch trùng màu tuyệt đối, đậm hơn 1 cấp
   cho vé trắng nổi khối */
.sv-cta[b-6vntrohfg4] {
    background: #e2edf8;
    border-top: 1px solid #c9dcee;
    border-bottom: 1px solid #c9dcee;
}

/* ===== Eyebrow ===== */
.leg[b-6vntrohfg4] {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 .8rem;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
}
.leg--c[b-6vntrohfg4] { justify-content: center; }
.leg-no[b-6vntrohfg4] { color: var(--accent-deep); }
.sec-head--c[b-6vntrohfg4] { text-align: center; }
.sec-sub[b-6vntrohfg4] { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-3); max-width: 34rem; }

/* ═════════════════ HERO (căn giữa) ═════════════════ */
.sv-hero[b-6vntrohfg4] {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #e9f3fc 0%, #f6fafd 58%, #ffffff 100%);
    padding: 112px 0 4rem;
}
.hero-sky[b-6vntrohfg4] { position: absolute; inset: 0; pointer-events: none; }
.hero-path[b-6vntrohfg4] { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-plane[b-6vntrohfg4] {
    position: absolute; left: 76%; top: 26%;
    width: 26px; height: 26px; color: var(--accent);
    transform: rotate(42deg); opacity: .9;
}
.hero-sky[b-6vntrohfg4]  .hero-bloom {
    position: absolute; left: 88%; top: 7%;
    width: 92px; height: auto; opacity: .92;
    filter: drop-shadow(0 2px 4px rgba(234, 88, 12, .16));
}
.petal[b-6vntrohfg4] { position: absolute; width: 12px; height: 12px; opacity: .5; }
.petal--1[b-6vntrohfg4] { left: 12%; top: 28%; --r0: -12deg; --r1: 20deg; }
.petal--2[b-6vntrohfg4] { left: 8%; top: 62%; --r0: 32deg; --r1: 64deg; }
.petal--3[b-6vntrohfg4] { left: 88%; top: 56%; --r0: -40deg; --r1: -8deg; }

.hero-inner[b-6vntrohfg4] {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.hero-eyebrow[b-6vntrohfg4] { display: flex; align-items: center; gap: 9px; margin: 0 0 1.1rem; }
.hero-eyebrow .mono[b-6vntrohfg4] {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow-mai[b-6vntrohfg4] { width: 17px; height: 17px; flex: none; }
.hero-desc[b-6vntrohfg4] { font-size: .95rem; color: var(--ink-2); line-height: 1.7; margin: 0 0 1.8rem; max-width: 38rem; }
.hero-actions[b-6vntrohfg4] { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 2.4rem; }

/* ===== Buttons ===== */
.btn[b-6vntrohfg4] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px;
    padding: .8rem 1.7rem;
    font-size: .85rem; font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .15s, color .15s, border-color .15s;
}
.btn--sm[b-6vntrohfg4] { padding: .6rem 1.2rem; font-size: .8rem; }
.btn:focus-visible[b-6vntrohfg4] { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--solid[b-6vntrohfg4] {
    background: var(--accent); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(234, 88, 12, .55);
}
.btn--solid:hover[b-6vntrohfg4] { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(234, 88, 12, .6); }
.btn--solid:active[b-6vntrohfg4] { transform: translateY(0); }
.btn--solid:disabled[b-6vntrohfg4] { opacity: .6; transform: none; cursor: not-allowed; }
.btn--ghost[b-6vntrohfg4] { background: #fff; color: var(--ink); border: 1.5px solid var(--sky-line); }
.btn--ghost:hover[b-6vntrohfg4] { border-color: var(--ink); color: var(--ink); }

/* ===== Bảng thông tin sân bay ===== */
.board[b-6vntrohfg4] {
    position: relative;
    display: grid; grid-template-columns: repeat(4, auto);
    width: max-content; max-width: 100%;
    background: var(--board);
    border-radius: 14px;
    padding: .95rem 0;
    box-shadow: 0 18px 36px -18px rgba(15, 36, 56, .5);
    overflow: hidden;
}
.board-cell[b-6vntrohfg4] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 1.35rem; text-align: left; }
.board-cell + .board-cell[b-6vntrohfg4] { border-left: 1px dashed rgba(255, 255, 255, .16); }
.board-lbl[b-6vntrohfg4] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: .55rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: #8fa7bd;
}
.board-num[b-6vntrohfg4] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-weight: 600; font-size: 1.3rem; line-height: 1;
    color: var(--amber);
    font-variant-numeric: tabular-nums;
}
.board-plane[b-6vntrohfg4] {
    position: absolute; top: 8px; right: 10px;
    width: 12px; height: 12px;
    color: var(--amber); opacity: .55;
    transform: rotate(45deg);
}

/* ===== Dải tuyến bay ===== */
.sv-route[b-6vntrohfg4] {
    display: flex; align-items: center; gap: 10px;
    max-width: 560px; margin: 0 auto;
    padding: 2.4rem 1.5rem 0;
}
.rt-dot[b-6vntrohfg4] { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); opacity: .55; }
.rt-line[b-6vntrohfg4] { flex: 1; border-top: 2px dashed var(--sky-line); }
.rt-plane[b-6vntrohfg4] { flex: none; width: 16px; height: 16px; color: var(--accent); transform: rotate(90deg); opacity: .85; }
.rt-mai[b-6vntrohfg4] { flex: none; width: 19px; height: 19px; }

/* ═════════════════ GATE CARDS ═════════════════ */
.gate[b-6vntrohfg4] {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 6px 18px -10px rgba(15, 36, 56, .3);
    transition: transform .3s, box-shadow .3s, border-color .3s;
    text-align: left;
    padding: 0;
}
.gate:hover[b-6vntrohfg4] { transform: translateY(-4px); box-shadow: 0 16px 32px -14px rgba(15, 36, 56, .4); }
.gate:focus-visible[b-6vntrohfg4] { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate--active[b-6vntrohfg4] { border-color: var(--accent); box-shadow: 0 14px 30px -12px rgba(234, 88, 12, .45); }
.gate-img[b-6vntrohfg4] { position: absolute; inset: 0; }
.gate-img img[b-6vntrohfg4] { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.gate:hover .gate-img img[b-6vntrohfg4] { transform: scale(1.07); }
.gate-ov[b-6vntrohfg4] {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 36, 56, .3) 0%, rgba(15, 36, 56, .35) 45%, rgba(15, 36, 56, .82) 100%);
    transition: background .3s;
}
.gate--active .gate-ov[b-6vntrohfg4] { background: linear-gradient(180deg, rgba(15, 36, 56, .12) 0%, rgba(15, 36, 56, .3) 45%, rgba(194, 65, 12, .82) 100%); }
.gate-no[b-6vntrohfg4] {
    position: absolute; top: 7px; left: 7px; z-index: 2;
    font-size: .5rem; font-weight: 600; letter-spacing: .1em;
    color: #fff;
    background: rgba(15, 36, 56, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 5px;
    padding: .14rem .38rem;
    backdrop-filter: blur(2px);
}
.gate--active .gate-no[b-6vntrohfg4] { background: var(--accent); border-color: var(--accent-2); color: #fff; }
.gate-body[b-6vntrohfg4] {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 6px; padding: .8rem .5rem;
    text-align: center;
}
.gate-icon[b-6vntrohfg4] {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    backdrop-filter: blur(3px);
}
.gate--active .gate-icon[b-6vntrohfg4] { background: var(--accent); border-color: var(--accent-2); }
.gate-icon svg[b-6vntrohfg4] { width: 18px; height: 18px; }
.gate-title[b-6vntrohfg4] { font-size: .72rem; font-weight: 700; color: #fff; line-height: 1.25; }

/* ═════════════════ DETAIL PANELS ═════════════════ */
.dt-panel[b-6vntrohfg4] { animation: dtIn-b-6vntrohfg4 .28s ease; }
@keyframes dtIn-b-6vntrohfg4 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.dt[b-6vntrohfg4] {
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 44px -24px rgba(15, 36, 56, .3);
}
.dt-img[b-6vntrohfg4] { position: relative; }
.dt-img img[b-6vntrohfg4] { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-gate[b-6vntrohfg4] {
    position: absolute; top: 12px; left: 12px;
    font-size: .58rem; font-weight: 600; letter-spacing: .1em;
    color: #fff;
    background: rgba(15, 36, 56, .6);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    padding: .2rem .5rem;
    backdrop-filter: blur(2px);
}
.dt-body[b-6vntrohfg4] { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .dt-body[b-6vntrohfg4] { padding: 2.2rem 2.4rem; } }
.dt-badge[b-6vntrohfg4] {
    font-size: .58rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink);
    background: var(--sky-50);
    border: 1px solid var(--sky-line);
    border-radius: 999px;
    padding: .22rem .6rem;
}
.dt-star[b-6vntrohfg4] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    padding: .2rem .55rem;
}
.dt-title[b-6vntrohfg4] { font-size: 1.35rem; margin: 0 0 .8rem; }
.dt-hl[b-6vntrohfg4] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 500;
    color: var(--ink-2);
    background: var(--sky-50);
    border: 1px solid var(--sky-line);
    border-radius: 8px;
    padding: .3rem .6rem;
}
.dt-hl svg[b-6vntrohfg4] { color: var(--accent); }
.dt-p[b-6vntrohfg4] { font-size: .84rem; color: var(--ink-3); line-height: 1.65; margin: 0 0 .8rem; }
.dt-list[b-6vntrohfg4] { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.dt-list li[b-6vntrohfg4] { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--ink-2); line-height: 1.55; }
.dt-check[b-6vntrohfg4] { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent); }
.dt-steps[b-6vntrohfg4] { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1rem; }
.dt-step[b-6vntrohfg4] { display: flex; align-items: flex-start; gap: 11px; }
.dt-step-no[b-6vntrohfg4] {
    flex: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ink); color: var(--amber);
    font-size: .7rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.dt-step p[b-6vntrohfg4] { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.55; padding-top: 3px; }

/* ═════════════════ THẾ MẠNH ═════════════════ */
.str[b-6vntrohfg4] {
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 16px;
    padding: 1.4rem;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.str:hover[b-6vntrohfg4] { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 16px 32px -18px rgba(234, 88, 12, .3); }
.str-icon[b-6vntrohfg4] {
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--sky-50); border: 1px solid var(--sky-line);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .8rem;
    transition: background .3s, border-color .3s, transform .3s;
}
.str-icon svg[b-6vntrohfg4] { width: 20px; height: 20px; color: var(--ink); transition: color .3s; }
.str:hover .str-icon[b-6vntrohfg4] { background: var(--accent); border-color: var(--accent); transform: scale(1.07); }
.str:hover .str-icon svg[b-6vntrohfg4] { color: #fff; }
.str-head[b-6vntrohfg4] { display: flex; align-items: center; gap: 8px; margin-bottom: .35rem; }
.str-head h3[b-6vntrohfg4] { font-size: .9rem; margin: 0; }
.str-badge[b-6vntrohfg4] {
    font-size: .55rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-radius: 999px; padding: .12rem .5rem;
}
.str > p[b-6vntrohfg4] { font-size: .8rem; color: var(--ink-3); margin: 0; line-height: 1.6; }

/* ═════════════════ CTA — BOARDING PASS ═════════════════ */
.pass[b-6vntrohfg4] {
    max-width: 920px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr;
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 22px;
    box-shadow: 0 30px 60px -30px rgba(15, 36, 56, .35);
    overflow: hidden;
}
@media (min-width: 768px) { .pass[b-6vntrohfg4] { grid-template-columns: 1fr auto 262px; } }
.pass-main[b-6vntrohfg4] { padding: 2.4rem 1.5rem; }
@media (min-width: 768px) { .pass-main[b-6vntrohfg4] { padding: 2.8rem 3rem; } }
.pass-eyebrow[b-6vntrohfg4] {
    margin: 0 0 .9rem;
    font-size: .625rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3);
}
.pass h2[b-6vntrohfg4] { margin-bottom: .8rem; }
.pass-desc[b-6vntrohfg4] { font-size: .875rem; color: var(--ink-3); line-height: 1.65; margin: 0 0 1.6rem; max-width: 28rem; }
.pass-actions[b-6vntrohfg4] { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
/* Lối liên hệ thứ ba: link chữ, KHÔNG phải nút — ba khối đặc cạnh nhau
   sẽ tranh nhau, còn khách ngại điền form vẫn có đường gọi thẳng. */
.pass-call[b-6vntrohfg4] {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: .3rem;
    font-size: .82rem; font-weight: 600;
    color: var(--accent-deep);
    text-decoration: none;
    transition: color .2s;
}
.pass-call svg[b-6vntrohfg4] { width: 15px; height: 15px; }
.pass-call:hover[b-6vntrohfg4] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.pass-cut[b-6vntrohfg4] { position: relative; border-top: 2px dashed #c3d8ea; margin: 0 1.5rem; }
@media (min-width: 768px) {
    .pass-cut[b-6vntrohfg4] { border-top: none; border-left: 2px dashed #c3d8ea; margin: 1.4rem 0; }
}
/* Notch = lỗ đục: fill ĐẬM hơn band + inset shadow sâu — phải tách bạch rõ với
   cả vé trắng, cuống sky lẫn band (feedback user: nhạt quá lẫn vào nền) */
.pass-cut[b-6vntrohfg4]::before,
.pass-cut[b-6vntrohfg4]::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px; border-radius: 50%;
    background: #cfe0f0;
    border: 1px solid #b3cde5;
    box-shadow: inset 0 2px 4px rgba(15, 36, 56, .28);
}
.pass-cut[b-6vntrohfg4]::before { top: -13px; left: -36px; }
.pass-cut[b-6vntrohfg4]::after { top: -13px; right: -36px; }
@media (min-width: 768px) {
    .pass-cut[b-6vntrohfg4]::before { top: -34px; left: -11px; right: auto; }
    .pass-cut[b-6vntrohfg4]::after { top: auto; bottom: -34px; left: -11px; right: auto; }
}

.pass-stub[b-6vntrohfg4] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .8rem;
    text-align: center;
    padding: 1.8rem 1.5rem 2.2rem;
    background: var(--sky-50);
}
.stub-mai[b-6vntrohfg4] { width: 38px; height: 38px; }
.stub-route[b-6vntrohfg4] {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink);
}
.stub-plane[b-6vntrohfg4] { width: 13px; height: 13px; color: var(--accent); transform: rotate(90deg); }
.stub-trust[b-6vntrohfg4] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.stub-trust li[b-6vntrohfg4] { font-size: .72rem; color: var(--ink-3); position: relative; padding-left: 14px; text-align: left; }
.stub-trust li[b-6vntrohfg4]::before {
    content: '';
    position: absolute; left: 0; top: 6px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-2); opacity: .7;
}
.stub-est[b-6vntrohfg4] { margin: .2rem 0 0; font-size: .55rem; letter-spacing: .14em; color: #9db1c4; }

/* Khối SUBSCRIBE (.sub*) đã gỡ 08/08 cùng markup — boarding pass là khối
   đóng trang duy nhất, giống /corporate-customer. */

/* ═════════════════ REVEAL + MOTION ═════════════════ */
.sv-rv-on .rv[b-6vntrohfg4] { transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.sv-rv-on .rv:not(.in)[b-6vntrohfg4] { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: no-preference) {
    .petal[b-6vntrohfg4] { animation: sv-sway-b-6vntrohfg4 9s ease-in-out infinite alternate; }
    .petal--2[b-6vntrohfg4] { animation-duration: 12s; animation-delay: -4s; }
    .petal--3[b-6vntrohfg4] { animation-duration: 10.5s; animation-delay: -7s; }
    .hero-plane[b-6vntrohfg4] { animation: sv-drift-b-6vntrohfg4 15s ease-in-out infinite alternate; }
}
@keyframes sv-sway-b-6vntrohfg4 {
    from { transform: translateY(-6px) rotate(var(--r0, -12deg)); }
    to { transform: translateY(10px) rotate(var(--r1, 20deg)); }
}
@keyframes sv-drift-b-6vntrohfg4 {
    from { transform: rotate(42deg) translate(-3px, 2px); }
    to { transform: rotate(42deg) translate(6px, -4px); }
}
@media (prefers-reduced-motion: reduce) {
    .sv-rv-on .rv[b-6vntrohfg4] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═════════════════ MOBILE ═════════════════ */
@media (max-width: 640px) {
    .sv-sec[b-6vntrohfg4] { padding: 2.6rem 0; }
    .sv-wrap[b-6vntrohfg4] { padding: 0 1rem; }
    .sv-hero[b-6vntrohfg4] { padding: 96px 0 2.6rem; }
    .hero-plane[b-6vntrohfg4], .hero-sky[b-6vntrohfg4]  .hero-bloom { display: none; }
    .hero-path path[b-6vntrohfg4] { opacity: .2; }
    .petal[b-6vntrohfg4] { opacity: .3; }

    .board[b-6vntrohfg4] { grid-template-columns: 1fr 1fr; width: 100%; padding: .4rem 0; }
    .board-cell[b-6vntrohfg4] { padding: .6rem 1.1rem; }
    .board-cell:nth-of-type(3)[b-6vntrohfg4] { border-left: none; }
    .board-cell:nth-of-type(n+3)[b-6vntrohfg4] { border-top: 1px dashed rgba(255, 255, 255, .16); }
    .board-num[b-6vntrohfg4] { font-size: 1.05rem; }

    .sv-route[b-6vntrohfg4] { padding-top: 1.8rem; }
    .gate-title[b-6vntrohfg4] { font-size: .6rem; }
    .gate-icon[b-6vntrohfg4] { width: 28px; height: 28px; }
    .gate-icon svg[b-6vntrohfg4] { width: 15px; height: 15px; }
    .gate-no[b-6vntrohfg4] { font-size: .44rem; }
    .dt-title[b-6vntrohfg4] { font-size: 1.15rem; }
    .pass-main[b-6vntrohfg4] { padding: 2rem 1.25rem 1.6rem; }
    .pass-stub[b-6vntrohfg4] { padding: 1.5rem 1.25rem 1.8rem; }
    /* Nút xếp dọc trên máy: link gọi bỏ thụt lề kẻo lệch mép so với 2 nút trên */
    .pass-actions .btn[b-6vntrohfg4] { width: 100%; justify-content: center; }
    .pass-call[b-6vntrohfg4] { margin-left: 0; }
}
/* /src/Features/Dashboard/Pages/Accountant/AccountantDashboard.razor.rz.scp.css */
/* Accountant Dashboard — Manager Dashboard v4 theme (warm-neutral + accent cam) */
.acdash-root[b-ez8nnrlewb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
}

.acdash-num[b-ez8nnrlewb] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* Hero */
.acdash-hero[b-ez8nnrlewb] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .acdash-hero h1[b-ez8nnrlewb] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .acdash-hero h1 em[b-ez8nnrlewb] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.acdash-hero-meta[b-ez8nnrlewb] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .acdash-hero-meta .dot[b-ez8nnrlewb] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

/* KPI strip */
.acdash-kpis[b-ez8nnrlewb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .acdash-kpis[b-ez8nnrlewb] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.acdash-kpi[b-ez8nnrlewb] {
    padding: 18px 18px 14px;
    border-right: 1px solid var(--d-line);
    border-bottom: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .acdash-kpi[b-ez8nnrlewb] {
        border-bottom: 0;
    }

        .acdash-kpi:last-child[b-ez8nnrlewb] {
            border-right: 0;
        }
}

.acdash-kpi-lbl[b-ez8nnrlewb] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.acdash-kpi-dot[b-ez8nnrlewb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .acdash-kpi-dot.accent[b-ez8nnrlewb] {
        background: var(--d-accent-grad);
    }

    .acdash-kpi-dot.good[b-ez8nnrlewb] {
        background: var(--d-good);
    }

    .acdash-kpi-dot.warn[b-ez8nnrlewb] {
        background: var(--d-warn);
    }

.acdash-kpi-val[b-ez8nnrlewb] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1.1;
}

.acdash-kpi-sub[b-ez8nnrlewb] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: auto;
}

/* Grid */
.acdash-grid[b-ez8nnrlewb] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.acdash-col-4[b-ez8nnrlewb], .acdash-col-6[b-ez8nnrlewb], .acdash-col-8[b-ez8nnrlewb] {
    grid-column: span 12;
}

@media (min-width: 1024px) {
    .acdash-col-4[b-ez8nnrlewb] {
        grid-column: span 4;
    }

    .acdash-col-6[b-ez8nnrlewb] {
        grid-column: span 6;
    }

    .acdash-col-8[b-ez8nnrlewb] {
        grid-column: span 8;
    }
}

/* Card */
.acdash-card[b-ez8nnrlewb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.acdash-card-hd[b-ez8nnrlewb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

    .acdash-card-hd h3[b-ez8nnrlewb] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.acdash-link[b-ez8nnrlewb] {
    color: var(--d-ink-3);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color .12s;
}

    .acdash-link:hover[b-ez8nnrlewb] {
        color: var(--d-accent);
        text-decoration: none;
    }

/* Quick actions grid */
.acdash-qa-grid[b-ez8nnrlewb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--d-line);
    margin: 0 16px 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--d-line);
}

.acdash-qa[b-ez8nnrlewb] {
    background: var(--d-surface);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    color: var(--d-ink);
    position: relative;
}

    .acdash-qa:hover[b-ez8nnrlewb] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

.acdash-qa-ico[b-ez8nnrlewb] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    border: 1px solid var(--d-line);
}

.acdash-qa.primary .acdash-qa-ico[b-ez8nnrlewb] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.15);
}

.acdash-qa-name[b-ez8nnrlewb] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink);
    line-height: 1.25;
}

.acdash-qa-badge[b-ez8nnrlewb] {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.25);
}

/* Budget overview tiles */
.acdash-budget-body[b-ez8nnrlewb] {
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acdash-budget-tiles[b-ez8nnrlewb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.acdash-budget-tile[b-ez8nnrlewb] {
    padding: 12px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: var(--d-surface);
}

    .acdash-budget-tile.is-accent[b-ez8nnrlewb] {
        background: var(--d-accent-grad-soft);
        border-color: #fed7aa;
    }

.acdash-budget-lbl[b-ez8nnrlewb] {
    font-size: 10px;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.acdash-budget-val[b-ez8nnrlewb] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: 4px;
    letter-spacing: -0.02em;
}

.acdash-budget-bar-wrap[b-ez8nnrlewb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acdash-budget-bar-meta[b-ez8nnrlewb] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--d-ink-3);
}

    .acdash-budget-bar-meta b[b-ez8nnrlewb] {
        color: var(--d-ink);
        font-weight: 600;
    }

.acdash-budget-bar[b-ez8nnrlewb] {
    height: 6px;
    border-radius: 3px;
    background: var(--d-line-2);
    overflow: hidden;
}

.acdash-budget-bar-fill[b-ez8nnrlewb] {
    height: 100%;
    background: var(--d-accent-grad);
}

.acdash-warn-banner[b-ez8nnrlewb] {
    padding: 8px 10px;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--d-danger);
    font-size: 12px;
}

/* List rows */
.acdash-list[b-ez8nnrlewb] {
    padding: 4px 16px 12px;
    display: flex;
    flex-direction: column;
}

.acdash-list-row[b-ez8nnrlewb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin: 0 -8px;
    border-radius: 6px;
    transition: background .12s;
}

    .acdash-list-row:last-child[b-ez8nnrlewb] {
        border-bottom: 0;
    }

    .acdash-list-row:hover[b-ez8nnrlewb] {
        background: var(--d-surface-2);
    }

.acdash-list-ico[b-ez8nnrlewb] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.acdash-list-info[b-ez8nnrlewb] {
    min-width: 0;
    flex: 1;
}

    .acdash-list-info .name[b-ez8nnrlewb] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    .acdash-list-info .meta[b-ez8nnrlewb] {
        font-size: 11.5px;
        color: var(--d-ink-3);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.acdash-list-amt[b-ez8nnrlewb] {
    text-align: right;
    flex-shrink: 0;
}

    .acdash-list-amt .v[b-ez8nnrlewb] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .acdash-list-amt .s[b-ez8nnrlewb] {
        font-size: 10.5px;
        font-weight: 500;
        margin-top: 2px;
    }

.acdash-st-good[b-ez8nnrlewb] {
    color: var(--d-good);
}

.acdash-st-warn[b-ez8nnrlewb] {
    color: var(--d-warn);
}

.acdash-st-danger[b-ez8nnrlewb] {
    color: var(--d-danger);
}

.acdash-st-info[b-ez8nnrlewb] {
    color: #2563eb;
}

.acdash-st-muted[b-ez8nnrlewb] {
    color: var(--d-ink-3);
}

/* Empty / loading */
.acdash-empty[b-ez8nnrlewb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 16px;
    color: var(--d-ink-3);
    text-align: center;
    font-size: 12px;
}

.acdash-loading[b-ez8nnrlewb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
}
/* /src/Features/Dashboard/Pages/CaStaff/CaStaffDashboard.razor.rz.scp.css */
/* CaStaffDashboard — bảng điều hành team CA nội bộ.
   Giữ đúng chữ ký thị giác của /manager (Dashboard.razor.css): khung .nm-list-*, CẤU TRÚC nói sans,
   DỮ LIỆU nói mono. Phần riêng dùng tiền tố .cadash- để hai màn không giẫm CSS của nhau.
   Chrome (card/badge/tag/empty/skeleton) do Nm* lo — ở đây chỉ còn bố cục + khối số liệu. */

.nm-list-page[b-w9ag65ojr9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-w9ag65ojr9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-w9ag65ojr9] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-w9ag65ojr9] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-w9ag65ojr9] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cadash-num[b-w9ag65ojr9] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Chọn kỳ ─────────────────────────────────────────────────────────── */
.cadash-period[b-w9ag65ojr9] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
}

.cadash-period button[b-w9ag65ojr9] {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    padding: 5px 12px;
    border-radius: var(--nm-r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, background .12s;
}

.cadash-period button:hover[b-w9ag65ojr9] { color: var(--nm-ink); }

.cadash-period button.is-active[b-w9ag65ojr9] {
    background: var(--nm-surface);
    color: var(--nm-ink);
    box-shadow: var(--nm-shadow-sm);
}

/* ── Dải chỉ số ──────────────────────────────────────────────────────────
   6 ô nên số cột thay đổi theo bề ngang. Đường tóc vẽ bằng gap 1px trên nền
   border thay vì nth-child: cách này không vỡ khi lưới xuống dòng lẻ ô. */
.cadash-readouts[b-w9ag65ojr9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--nm-border);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
    overflow: hidden;
}

@media (min-width: 620px) { .cadash-readouts[b-w9ag65ojr9] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cadash-readouts[b-w9ag65ojr9] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1560px) { .cadash-readouts[b-w9ag65ojr9] { grid-template-columns: repeat(6, 1fr); } }

.cadash-ro[b-w9ag65ojr9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    min-width: 0;
    background: var(--nm-surface);
}

.cadash-ro.is-skel[b-w9ag65ojr9] { gap: 10px; }

.cadash-ro__lbl[b-w9ag65ojr9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-dot[b-w9ag65ojr9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--nm-pending);
}

.cadash-dot--accent[b-w9ag65ojr9] { background: var(--nm-brand-500); }
.cadash-dot--ok[b-w9ag65ojr9] { background: var(--nm-ok); }
.cadash-dot--info[b-w9ag65ojr9] { background: var(--nm-info); }
.cadash-dot--warn[b-w9ag65ojr9] { background: var(--nm-warn); }
.cadash-dot--bad[b-w9ag65ojr9] { background: var(--nm-bad); }
.cadash-dot--muted[b-w9ag65ojr9] { background: var(--nm-border-strong); }

.cadash-ro__val[b-w9ag65ojr9] {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-ro__foot[b-w9ag65ojr9] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    min-width: 0;
}

.cadash-ro__sub[b-w9ag65ojr9] {
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Việc trễ hạn phải đọc ra ngay từ dải chỉ số, không đợi cuộn xuống hàng chờ. */
.cadash-ro__sub.is-alert[b-w9ag65ojr9] { color: var(--nm-bad); font-weight: 600; }

.cadash-delta[b-w9ag65ojr9] { font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.cadash-delta.is-good[b-w9ag65ojr9] { color: var(--nm-ok); }
.cadash-delta.is-bad[b-w9ag65ojr9] { color: var(--nm-bad); }
.cadash-delta.is-flat[b-w9ag65ojr9] { color: var(--nm-muted); }

/* ── Lưới 12 cột ─────────────────────────────────────────────────────── */
.cadash-grid[b-w9ag65ojr9] { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.cadash-col-4[b-w9ag65ojr9], .cadash-col-5[b-w9ag65ojr9], .cadash-col-7[b-w9ag65ojr9], .cadash-col-8[b-w9ag65ojr9] { grid-column: span 12; min-width: 0; }

@media (min-width: 1100px) {
    .cadash-col-4[b-w9ag65ojr9] { grid-column: span 4; }
    .cadash-col-5[b-w9ag65ojr9] { grid-column: span 5; }
    .cadash-col-7[b-w9ag65ojr9] { grid-column: span 7; }
    .cadash-col-8[b-w9ag65ojr9] { grid-column: span 8; }
}

/* ── Đầu thẻ (slot Header của NmCard) ────────────────────────────────── */
.cadash-hd[b-w9ag65ojr9] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.cadash-hd h2[b-w9ag65ojr9] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
}

.cadash-hd-note[b-w9ag65ojr9] { font-size: 12px; color: var(--nm-muted); }

.cadash-count[b-w9ag65ojr9] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.cadash-link[b-w9ag65ojr9] { font-size: 12px; font-weight: 600; color: var(--nm-muted); text-decoration: none; transition: color .12s; }
.cadash-link:hover[b-w9ag65ojr9] { color: var(--nm-brand-600); text-decoration: none; }

.cadash-pad[b-w9ag65ojr9] { padding: 16px 18px; }

/* ── Hàng chờ cần xử lý ──────────────────────────────────────────────── */
.cadash-queue[b-w9ag65ojr9] { display: flex; flex-direction: column; }

.cadash-q[b-w9ag65ojr9] {
    display: grid;
    grid-template-columns: 32px 1fr auto 14px;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: var(--nm-ink);
    border-bottom: 1px solid var(--nm-border);
    transition: background .12s;
}

.cadash-q:last-child[b-w9ag65ojr9] { border-bottom: 0; }
.cadash-q:hover[b-w9ag65ojr9] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }

.cadash-q__ico[b-w9ag65ojr9] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--nm-pending-soft);
    color: var(--nm-pending);
}

.cadash-q__ico--bad[b-w9ag65ojr9] { background: var(--nm-bad-soft); color: var(--nm-bad); }
.cadash-q__ico--warn[b-w9ag65ojr9] { background: var(--nm-warn-soft); color: var(--nm-warn); }
.cadash-q__ico--info[b-w9ag65ojr9] { background: var(--nm-info-soft); color: var(--nm-info); }

.cadash-q__body[b-w9ag65ojr9] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.cadash-q__name[b-w9ag65ojr9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-q__hint[b-w9ag65ojr9] {
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-q__n[b-w9ag65ojr9] { font-size: 17px; font-weight: 600; color: var(--nm-ink); }
.cadash-q__n--bad[b-w9ag65ojr9] { color: var(--nm-bad); }
.cadash-q__n--warn[b-w9ag65ojr9] { color: var(--nm-warn); }
.cadash-q__go[b-w9ag65ojr9] { font-size: 12px; color: var(--nm-muted); }

/* ── Sức khoẻ ví danh mục ────────────────────────────────────────────── */
.cadash-health[b-w9ag65ojr9] { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }

.cadash-health__bar[b-w9ag65ojr9] {
    display: flex;
    height: 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    overflow: hidden;
}

.cadash-health__seg[b-w9ag65ojr9] { display: block; height: 100%; }
.cadash-health__seg--ok[b-w9ag65ojr9] { background: var(--nm-ok); }
.cadash-health__seg--low[b-w9ag65ojr9] { background: var(--nm-warn); }
.cadash-health__seg--zero[b-w9ag65ojr9] { background: var(--nm-bad); }
.cadash-health__seg--nowallet[b-w9ag65ojr9] { background: var(--nm-border-strong); }

.cadash-health__legend[b-w9ag65ojr9] { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.cadash-health__item[b-w9ag65ojr9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--nm-ink-2);
}

.cadash-health__item b[b-w9ag65ojr9] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.cadash-health__item.is-off[b-w9ag65ojr9] { opacity: .45; }

.cadash-flow[b-w9ag65ojr9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
}

.cadash-flow__row[b-w9ag65ojr9] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.cadash-flow__lbl[b-w9ag65ojr9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--nm-ink-2);
}

.cadash-flow__lbl i[b-w9ag65ojr9] { font-size: 13px; color: var(--nm-muted); }
.cadash-flow__row b[b-w9ag65ojr9] { font-size: 14px; font-weight: 600; color: var(--nm-ink); }
.cadash-flow__row b.is-in[b-w9ag65ojr9] { color: var(--nm-ok); }
.cadash-flow__row b.is-out[b-w9ag65ojr9] { color: var(--nm-ink-2); }
.cadash-flow__note[b-w9ag65ojr9] { font-size: 11.5px; color: var(--nm-muted); }

/* ── Bảng (ticket + đơn hàng) ────────────────────────────────────────── */
.cadash-tbl-wrap[b-w9ag65ojr9] { overflow-x: auto; }
.cadash-tbl[b-w9ag65ojr9] { width: 100%; border-collapse: collapse; }

.cadash-tbl thead th[b-w9ag65ojr9] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nm-muted);
    text-align: left;
    padding: 9px 18px;
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}

.cadash-tbl th.right[b-w9ag65ojr9], .cadash-tbl td.right[b-w9ag65ojr9] { text-align: right; }
.cadash-tbl tbody tr[b-w9ag65ojr9] { transition: background .12s; }
.cadash-tbl tbody tr:hover[b-w9ag65ojr9] { background: var(--nm-surface-2); }

.cadash-tbl tbody td[b-w9ag65ojr9] {
    padding: 10px 18px;
    border-bottom: 1px solid var(--nm-border);
    vertical-align: middle;
    white-space: nowrap;
}

.cadash-tbl tbody tr:last-child td[b-w9ag65ojr9] { border-bottom: 0; }

/* dòng ticket */
.cadash-tk[b-w9ag65ojr9] { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; min-width: 0; }
.cadash-tk:hover[b-w9ag65ojr9] { text-decoration: none; color: inherit; }
.cadash-tk:hover .cadash-tk__name[b-w9ag65ojr9] { color: var(--nm-brand-600); }

.cadash-tk__ico[b-w9ag65ojr9] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

.cadash-tk__body[b-w9ag65ojr9] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.cadash-tk__name[b-w9ag65ojr9] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-tk__sub[b-w9ag65ojr9] { font-size: 11.5px; color: var(--nm-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.cadash-when[b-w9ag65ojr9] { font-size: 12px; color: var(--nm-muted); }
.is-late[b-w9ag65ojr9] { font-size: 12px; font-weight: 700; color: var(--nm-bad); }

/* dòng đơn hàng */
.cadash-svc[b-w9ag65ojr9] { display: inline-flex; align-items: center; gap: 8px; --svc: var(--nm-pending); text-decoration: none; color: inherit; }
a.cadash-svc:hover[b-w9ag65ojr9] { text-decoration: none; color: inherit; }
a.cadash-svc:hover .cadash-code[b-w9ag65ojr9] { color: var(--nm-brand-600); }

.cadash-svc--flight[b-w9ag65ojr9] { --svc: #0284c7; }
.cadash-svc--hotel[b-w9ag65ojr9] { --svc: #7c3aed; }
.cadash-svc--tour[b-w9ag65ojr9] { --svc: #059669; }
.cadash-svc--visa[b-w9ag65ojr9] { --svc: #b45309; }
.cadash-svc--esim[b-w9ag65ojr9] { --svc: #db2777; }
.cadash-svc--fasttrack[b-w9ag65ojr9] { --svc: #ea580c; }
.cadash-svc--travelinsurance[b-w9ag65ojr9] { --svc: #0d9488; }

.cadash-svc__ico[b-w9ag65ojr9] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--svc) 12%, transparent);
    color: var(--svc);
}

.cadash-code[b-w9ag65ojr9] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink); }

.cadash-cust[b-w9ag65ojr9] {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nm-ink);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-cust__sub[b-w9ag65ojr9] { display: block; font-size: 11.5px; color: var(--nm-muted); }
.cadash-amt[b-w9ag65ojr9] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }

/* ── Công ty cần chú ý ───────────────────────────────────────────────── */
.cadash-comp[b-w9ag65ojr9] { display: flex; flex-direction: column; }

.cadash-comp__row[b-w9ag65ojr9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--nm-border);
    text-decoration: none;
    color: var(--nm-ink);
    transition: background .12s;
}

.cadash-comp__row:last-child[b-w9ag65ojr9] { border-bottom: 0; }
.cadash-comp__row:hover[b-w9ag65ojr9] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }

.cadash-comp__body[b-w9ag65ojr9] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.cadash-comp__name[b-w9ag65ojr9] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cadash-comp__sub[b-w9ag65ojr9] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--nm-muted); }

.cadash-comp__bal[b-w9ag65ojr9] { font-size: 13.5px; font-weight: 600; color: var(--nm-ink); white-space: nowrap; flex-shrink: 0; }
.cadash-comp__bal.is-warn[b-w9ag65ojr9] { color: var(--nm-warn); }
.cadash-comp__bal.is-bad[b-w9ag65ojr9] { color: var(--nm-bad); }

/* ── Tác vụ nhanh ────────────────────────────────────────────────────── */
.cadash-qa[b-w9ag65ojr9] { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }

.cadash-qa__tile[b-w9ag65ojr9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    text-decoration: none;
    color: var(--nm-ink);
    transition: border-color .12s, background .12s;
    min-width: 0;
}

.cadash-qa__tile:hover[b-w9ag65ojr9] {
    background: var(--nm-surface-2);
    border-color: var(--nm-border-strong);
    text-decoration: none;
    color: var(--nm-ink);
}

.cadash-qa__tile.is-primary[b-w9ag65ojr9] { border-color: var(--nm-brand-100); background: var(--nm-brand-50); }
.cadash-qa__tile.is-primary:hover[b-w9ag65ojr9] { background: var(--nm-brand-100); border-color: var(--nm-brand-300); }

.cadash-qa__ico[b-w9ag65ojr9] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--nm-pending-soft);
    color: var(--nm-pending);
}

.cadash-qa__ico--brand[b-w9ag65ojr9] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.cadash-qa__ico--blue[b-w9ag65ojr9] { background: #eff6ff; color: #0284c7; }
.cadash-qa__ico--amber[b-w9ag65ojr9] { background: #fffbeb; color: #b45309; }
.cadash-qa__ico--violet[b-w9ag65ojr9] { background: #f5f3ff; color: #7c3aed; }
.cadash-qa__ico--emerald[b-w9ag65ojr9] { background: #ecfdf5; color: #059669; }
.cadash-qa__ico--teal[b-w9ag65ojr9] { background: #f0fdfa; color: #0d9488; }

.cadash-qa__lbl[b-w9ag65ojr9] { font-size: 13px; font-weight: 500; line-height: 1.25; min-width: 0; flex: 1; }

.cadash-qa__badge[b-w9ag65ojr9] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-bad-soft);
    color: var(--nm-bad);
    flex-shrink: 0;
}

/* ── Thu hẹp màn hình ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .nm-list-page[b-w9ag65ojr9] { padding: 16px 14px 22px; }
    .nm-list-head[b-w9ag65ojr9] { align-items: flex-start; }
    .nm-list-actions[b-w9ag65ojr9] { width: 100%; }
    .cadash-period[b-w9ag65ojr9] { overflow-x: auto; scrollbar-width: none; }
    .cadash-period[b-w9ag65ojr9]::-webkit-scrollbar { display: none; }
}
/* /src/Features/Dashboard/Pages/Ca/CaDashboard.razor.rz.scp.css */

/* ============================================================
   CA Dashboard — Minimal Premium B2B 2026 (compact rebuild)
   Built on the CA design-system tokens (--ca-*) declared on
   .ca-scope (CaLayout). No new hex — everything references --ca-*.
   Clear top→down hierarchy: greeting · KPI · service search (brand
   focal point) · "Cần chú ý & Sắp tới" + Quick actions.
   Restrained brand orange (#ff6b00): only the service-search panel,
   the slim announcement banner + the primary CTA.
   Status vocabulary: slate (pending) · teal (info) ·
   emerald (ok) · rose (bad). No amber/yellow, no gray/stone.
   ============================================================ */
.cadash[b-p7vn88zz4u] {
    /* derived surfaces / lines (mixed from SSOT tokens, no raw hex) */
    --d-surface-2: color-mix(in srgb, var(--ca-border) 40%, var(--ca-surface));
    --d-line-2: color-mix(in srgb, var(--ca-border) 55%, var(--ca-surface));
    --d-line-3: var(--ca-border-strong);
    /* darker muted than the CA default: dashboard uses muted at 11px where
       #7b8190 fails AA on white (~3.9:1) — slate-500 passes (~4.8:1) */
    --ca-muted: #64748b;
    /* soft, navy-tinted shadows — keep light per design rule */
    --sh-1: var(--ca-shadow-sm);
    --sh-2: var(--ca-shadow-sm);
    --sh-3: var(--ca-shadow);
    --ease: cubic-bezier(.22, 1, .36, 1);
    font-family: var(--ca-font);
    color: var(--ca-ink);
    background: transparent;
    padding: 14px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
}

/* NOTE: --ca-* token SSOT lives in Styles/app.css (.ca-scope on CaLayout).
   Do NOT redeclare it here — a scoped copy is dead code (CSS isolation never
   matches the layout element) and silently drifts from the real tokens. */

@media (max-width: 1023px) {
    .cadash[b-p7vn88zz4u] {
        padding: 12px 16px 16px;
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .cadash[b-p7vn88zz4u] {
        padding: 10px 12px 14px;
        gap: 10px;
    }
}

/* Data voice: structure speaks Be Vietnam Pro, numbers speak mono.
   JetBrains Mono ships in the app bundle (Styles/app.css) at 400/500/600 —
   don't use 700 here, the browser would fake-bold it. */
.cadash-num[b-p7vn88zz4u] {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    font-feature-settings: 'tnum';
}

/* ───────── Hero row: image slide (½ left) + overview (½ right) ─────────
   Desktop: the slide sits on the LEFT (user preference) via `order`, while
   the overview stays FIRST in DOM — so when the row stacks on mobile the
   analytics still land on top, not the banner. */
.cadash-hero[b-p7vn88zz4u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

@media (min-width: 861px) {
    .cadash-hero .cadash-slide[b-p7vn88zz4u] {
        order: -1;
    }
}

@media (max-width: 860px) {
    .cadash-hero[b-p7vn88zz4u] {
        grid-template-columns: 1fr;
    }
}

/* ── Image slide — the visual focal point, fills its half ── */
.cadash-slide[b-p7vn88zz4u] {
    position: relative;
    border-radius: var(--ca-r-card);
    overflow: hidden;
    min-height: 280px;
    box-shadow: var(--sh-2);
    isolation: isolate;
    /* dark fallback so a slide change never flashes transparent during the fade */
    background: linear-gradient(135deg, var(--ca-ink) 0%, var(--ca-ink-2) 160%);
}
/* Staggered entrance for the text inside the active slide — each line drifts up + fades in */
@keyframes cadash-slide-text-in-b-p7vn88zz4u {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 860px) {
    .cadash-slide[b-p7vn88zz4u] {
        min-height: 240px;
    }
}

@media (max-width: 575px) {
    .cadash-slide[b-p7vn88zz4u] {
        min-height: 190px;
    }
}

/* Every slide is stacked in the same box. Inactive ones sit underneath, transparent and
   slightly over-scaled; the active one crossfades in on top and settles its zoom (Ken Burns).
   Because old + new co-exist, the change is a soft dissolve — no hard cut, no load flash. */
.cadash-slide-link[b-p7vn88zz4u] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 24px;
    text-decoration: none;
    color: #fff;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
    z-index: 0;
    transition: opacity .85s var(--ease), transform 1.2s var(--ease);
    will-change: opacity, transform;
}

    .cadash-slide-link.active[b-p7vn88zz4u] {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        z-index: 2;
    }

    .cadash-slide-link.no-img[b-p7vn88zz4u] {
        background: radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--ca-brand) 40%, transparent) 0%, transparent 55%), linear-gradient(135deg, var(--ca-ink) 0%, var(--ca-ink-2) 165%);
    }

.cadash-slide:hover .cadash-slide-link.active.has-img[b-p7vn88zz4u] {
    transform: scale(1.04);
}

/* Replay the staggered text reveal whenever a slide gains `.active` (initial load + each rotation) */
.cadash-slide-link.active .cadash-slide-eyebrow[b-p7vn88zz4u],
.cadash-slide-link.active .cadash-slide-title[b-p7vn88zz4u],
.cadash-slide-link.active .cadash-slide-desc[b-p7vn88zz4u],
.cadash-slide-link.active .cadash-slide-cta[b-p7vn88zz4u] {
    animation: cadash-slide-text-in-b-p7vn88zz4u .65s var(--ease) both;
}

.cadash-slide-link.active .cadash-slide-eyebrow[b-p7vn88zz4u] {
    animation-delay: .18s;
}

.cadash-slide-link.active .cadash-slide-title[b-p7vn88zz4u] {
    animation-delay: .28s;
}

.cadash-slide-link.active .cadash-slide-desc[b-p7vn88zz4u] {
    animation-delay: .38s;
}

.cadash-slide-link.active .cadash-slide-cta[b-p7vn88zz4u] {
    animation-delay: .48s;
}

@media (prefers-reduced-motion: reduce) {
    .cadash-slide-link[b-p7vn88zz4u] {
        transition: opacity .3s linear;
        transform: none;
    }

        .cadash-slide-link.active[b-p7vn88zz4u] {
            transform: none;
        }

        .cadash-slide-link.active .cadash-slide-eyebrow[b-p7vn88zz4u],
        .cadash-slide-link.active .cadash-slide-title[b-p7vn88zz4u],
        .cadash-slide-link.active .cadash-slide-desc[b-p7vn88zz4u],
        .cadash-slide-link.active .cadash-slide-cta[b-p7vn88zz4u] {
            animation: none;
        }
}

.cadash-slide-scrim[b-p7vn88zz4u] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(0deg, color-mix(in srgb, var(--ca-ink) 88%, transparent) 0%, color-mix(in srgb, var(--ca-ink) 32%, transparent) 46%, transparent 80%);
}

.cadash-slide-body[b-p7vn88zz4u] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 94%;
}

.cadash-slide-eyebrow[b-p7vn88zz4u] {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: color-mix(in srgb, var(--ca-brand) 52%, #fff);
}

.cadash-slide-title[b-p7vn88zz4u] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 575px) {
    .cadash-slide-title[b-p7vn88zz4u] {
        font-size: 17px;
    }
}

.cadash-slide-desc[b-p7vn88zz4u] {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .86);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cadash-slide-cta[b-p7vn88zz4u] {
    align-self: flex-start;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ca-r-input);
    background: var(--ca-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--ca-brand) 70%, transparent);
    transition: background .15s;
}

.cadash-slide:hover .cadash-slide-cta[b-p7vn88zz4u] {
    background: var(--ca-brand-strong);
}

.cadash-slide-nav[b-p7vn88zz4u] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .15s;
}

.cadash-slide:hover .cadash-slide-nav[b-p7vn88zz4u] {
    opacity: 1;
}

.cadash-slide-nav:hover[b-p7vn88zz4u] {
    background: rgba(255, 255, 255, .3);
}

.cadash-slide-nav.prev[b-p7vn88zz4u] {
    left: 12px;
}

.cadash-slide-nav.next[b-p7vn88zz4u] {
    right: 12px;
}

@media (max-width: 767px) {
    .cadash-slide-nav[b-p7vn88zz4u] {
        opacity: 1;
    }
}

.cadash-slide-dots[b-p7vn88zz4u] {
    position: absolute;
    bottom: 8px;
    right: 14px;
    z-index: 3;
    display: flex;
}

    /* 22px hit area per dot (a11y); the visible dot is the ::after */
    .cadash-slide-dots button[b-p7vn88zz4u] {
        position: relative;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        border: 0;
        padding: 0;
        cursor: pointer;
        background: transparent;
    }

        .cadash-slide-dots button[b-p7vn88zz4u]::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .45);
            transition: width .25s var(--ease), background .2s;
        }

        .cadash-slide-dots button.active[b-p7vn88zz4u] {
            width: 34px;
        }

            .cadash-slide-dots button.active[b-p7vn88zz4u]::after {
                width: 20px;
                background: #fff;
            }

/* ── Overview panel — period stats + spend chart, fills the other half ── */
.cadash-ov[b-p7vn88zz4u] {
    padding: 14px 16px 16px;
}

.cadash-ov-hd[b-p7vn88zz4u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

    .cadash-ov-hd h2[b-p7vn88zz4u] {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--ca-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cadash-ov-hd .hd-pill[b-p7vn88zz4u] {
        width: 4px;
        height: 13px;
        border-radius: 2px;
        background: var(--ca-brand);
        display: inline-block;
    }

/* segmented period control */
/* z-index stays below the layout's sticky header (z-30) so its dropdowns/popovers
   sit above the period control; must stay above .cadash-period-backdrop (z-20). */
.cadash-period[b-p7vn88zz4u] {
    position: relative;
    z-index: 25;
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ca-pending-soft);
    border: 1px solid var(--ca-border);
    border-radius: 12px;
}

    .cadash-period > button[b-p7vn88zz4u] {
        border: 0;
        background: transparent;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 9px;
        font-family: var(--ca-font);
        font-size: 12px;
        font-weight: 600;
        color: var(--ca-muted);
        white-space: nowrap;
        transition: background .15s, color .15s, box-shadow .15s;
    }

        .cadash-period > button:hover[b-p7vn88zz4u] {
            color: var(--ca-ink);
        }

        .cadash-period > button.active[b-p7vn88zz4u] {
            background: var(--ca-surface);
            color: var(--ca-brand);
            box-shadow: var(--sh-1);
        }

.cadash-period-trigger[b-p7vn88zz4u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .cadash-period-trigger .caret[b-p7vn88zz4u] {
        opacity: .6;
        transition: transform .2s var(--ease);
    }

        .cadash-period-trigger .caret.open[b-p7vn88zz4u] {
            transform: rotate(180deg);
            opacity: 1;
        }

/* Custom range as a dropdown popover — overlays so the panel height never grows */
.cadash-period-pop[b-p7vn88zz4u] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    width: 232px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 12px;
    box-shadow: var(--ca-shadow-pop);
}

    .cadash-period-pop label[b-p7vn88zz4u] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .cadash-period-pop label span[b-p7vn88zz4u] {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--ca-muted);
        }

    .cadash-period-pop input[b-p7vn88zz4u] {
        height: 36px;
        padding: 0 10px;
        border: 1px solid var(--ca-border-strong);
        border-radius: var(--ca-r-input);
        font-family: var(--ca-font);
        font-size: 12.5px;
        color: var(--ca-ink);
        background: var(--ca-surface);
    }

        .cadash-period-pop input:focus[b-p7vn88zz4u] {
            outline: none;
            border-color: var(--ca-brand);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-brand) 18%, transparent);
        }

.cadash-period-apply[b-p7vn88zz4u] {
    margin-top: 2px;
    height: 34px;
    border: 0;
    border-radius: var(--ca-r-input);
    background: var(--ca-brand);
    color: #fff;
    font-family: var(--ca-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .cadash-period-apply:hover[b-p7vn88zz4u] {
        background: var(--ca-brand-strong);
    }

.cadash-period-backdrop[b-p7vn88zz4u] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

/* period stats — instrument readout: no boxes, hairline dividers between metrics.
   Label (quiet) → value (loud, mono) → delta (semantic) in a strict vertical rhythm. */
.cadash-ov-stats[b-p7vn88zz4u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 14px;
}

.cadash-ov-stat[b-p7vn88zz4u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 16px 6px;
    min-width: 0;
}

    .cadash-ov-stat:first-child[b-p7vn88zz4u] {
        padding-left: 2px;
    }

    .cadash-ov-stat + .cadash-ov-stat[b-p7vn88zz4u] {
        border-left: 1px solid var(--d-line-2);
    }

    .cadash-ov-stat .lbl[b-p7vn88zz4u] {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ca-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cadash-ov-stat .val[b-p7vn88zz4u] {
        font-size: 21px;
        font-weight: 600; /* mono has no 700 loaded */
        line-height: 1.05;
        color: var(--ca-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 575px) {
    .cadash-ov-stat[b-p7vn88zz4u] {
        padding: 4px 10px 6px;
    }

        .cadash-ov-stat .val[b-p7vn88zz4u] {
            font-size: 17px;
        }
}
/* delta as bare data text — no pill chrome; color carries the meaning */
.cadash-ov-stat .delta[b-p7vn88zz4u] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: fit-content;
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ca-ink-2);
}

    .cadash-ov-stat .delta.up[b-p7vn88zz4u] {
        color: var(--ca-ok);
    }

    .cadash-ov-stat .delta.flat[b-p7vn88zz4u] {
        color: var(--ca-muted);
    }

/* spend column chart */
.cadash-ov-chart[b-p7vn88zz4u] {
    border-top: 1px solid var(--d-line-2);
    padding-top: 12px;
}

.cadash-ov-chart-hd[b-p7vn88zz4u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

    .cadash-ov-chart-hd .t[b-p7vn88zz4u] {
        font-size: 11px;
        font-weight: 600;
        color: var(--ca-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .cadash-ov-chart-hd .rng[b-p7vn88zz4u] {
        font-size: 11px;
        font-weight: 600;
        color: var(--ca-muted);
    }

/* Chart plot area: hairline gridlines at 33/66/100% + a firm baseline under the
   bars — the anatomy of a real chart, not decorative stripes. Bars sit above the
   grid in paint order (::before renders first). */
.cadash-cols[b-p7vn88zz4u] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    /* Headroom for the peak value annotation: the tallest bar fills its whole
       track, so its ::after label needs reserved space above the plot area or
       it collides with the chart header. */
    padding-top: 18px;
}

    .cadash-cols[b-p7vn88zz4u]::before {
        content: "";
        position: absolute;
        top: 18px; /* below the annotation headroom */
        left: 0;
        right: 0;
        height: 90px; /* = .track height */
        background-image: repeating-linear-gradient(to top, transparent 0 29px, var(--d-line-2) 29px 30px);
        border-bottom: 1px solid var(--d-line-3);
        pointer-events: none;
    }

    /* Dense series (year view = 12 cols): skip every other tick label, like real axes */
    .cadash-cols.dense .cadash-col:nth-child(even) .lbl[b-p7vn88zz4u] {
        visibility: hidden;
    }

.cadash-col[b-p7vn88zz4u] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

    .cadash-col .track[b-p7vn88zz4u] {
        position: relative;
        width: 100%;
        max-width: 40px;
        height: 90px;
        display: flex;
        align-items: flex-end;
    }

    .cadash-col .fill[b-p7vn88zz4u] {
        width: 100%;
        height: var(--pct, 0%);
        min-height: 3px;
        border-radius: 6px 6px 0 0;
        background: linear-gradient(180deg, color-mix(in srgb, var(--ca-accent) 44%, var(--ca-surface)) 0%, color-mix(in srgb, var(--ca-accent) 22%, var(--ca-surface)) 100%);
        transition: height .4s var(--ease), filter .15s var(--ease);
    }

    .cadash-col.cur .fill[b-p7vn88zz4u] {
        background: linear-gradient(180deg, var(--ca-brand) 0%, color-mix(in srgb, var(--ca-brand) 80%, #fff) 100%);
    }

    .cadash-col:hover .fill[b-p7vn88zz4u] {
        filter: brightness(1.06);
    }

    /* Peak annotation — the max value printed right above its bar */
    .cadash-col.peak .track[b-p7vn88zz4u]::after {
        content: attr(data-v);
        position: absolute;
        left: 50%;
        bottom: calc(var(--pct, 0%) + 3px);
        transform: translateX(-50%);
        font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
        font-size: 10px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--ca-ink-2);
        white-space: nowrap;
        pointer-events: none;
    }

    .cadash-col .lbl[b-p7vn88zz4u] {
        font-size: 11px;
        font-weight: 500;
        color: var(--ca-muted);
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 575px) {
    .cadash-col .lbl[b-p7vn88zz4u] {
        font-size: 10px;
    }
}

.cadash-ov-empty[b-p7vn88zz4u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 110px;
    color: var(--ca-muted);
}

    .cadash-ov-empty span[b-p7vn88zz4u] {
        font-size: 13px;
    }

/* ───────── 12-col grid (lower section) ───────── */
.cadash-grid[b-p7vn88zz4u] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.cadash-col-4[b-p7vn88zz4u], .cadash-col-8[b-p7vn88zz4u] {
    grid-column: span 12;
}

@media (min-width: 1024px) {
    .cadash-col-4[b-p7vn88zz4u] {
        grid-column: span 4;
    }

    .cadash-col-8[b-p7vn88zz4u] {
        grid-column: span 8;
    }
}

/* ───────── Card primitive ───────── */
.cadash-card[b-p7vn88zz4u] {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-r-card);
    box-shadow: var(--sh-2);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s var(--ease);
}

    .cadash-card.cadash-card-overflow[b-p7vn88zz4u] {
        overflow: visible;
    }

.cadash-card-hd[b-p7vn88zz4u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px 6px;
}

    .cadash-card-hd h2[b-p7vn88zz4u] {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--ca-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .cadash-card-hd .hd-pill[b-p7vn88zz4u] {
        width: 4px;
        height: 13px;
        border-radius: 2px;
        background: var(--ca-border-strong);
        display: inline-block;
    }

        .cadash-card-hd .hd-pill.accent[b-p7vn88zz4u] {
            background: var(--ca-brand);
        }

        .cadash-card-hd .hd-pill.warn[b-p7vn88zz4u] {
            background: var(--ca-brand); /* warn = brand orange, not teal (teal reads as info/ok) */
        }

        .cadash-card-hd .hd-pill.good[b-p7vn88zz4u] {
            background: var(--ca-ok);
        }

.cadash-card-body[b-p7vn88zz4u] {
    padding: 2px 16px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cadash-link[b-p7vn88zz4u] {
    color: var(--ca-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
}

    .cadash-link:hover[b-p7vn88zz4u] {
        color: var(--ca-brand-strong);
        text-decoration: none;
    }

.cadash-badge[b-p7vn88zz4u] {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ca-pending-soft);
    color: var(--ca-ink-2);
}

    .cadash-badge.warn[b-p7vn88zz4u] {
        background: var(--ca-brand-soft);
        color: var(--ca-brand-strong);
    }

/* ───────── Alert ───────── */
.cadash-alert[b-p7vn88zz4u] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ca-bad-soft);
    border: 1px solid color-mix(in srgb, var(--ca-bad) 30%, #fff);
    border-radius: var(--ca-r-input);
    color: var(--ca-bad);
    font-size: 14px;
}

/* ───────── Quick actions ───────── */
.cadash-qa[b-p7vn88zz4u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 2px 16px 14px;
    flex: 1;
    align-content: start;
}

@media (max-width: 767px) {
    .cadash-qa[b-p7vn88zz4u] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 420px) {
    .cadash-qa[b-p7vn88zz4u] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cadash-qa-tile[b-p7vn88zz4u] {
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: 12px;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s;
    text-decoration: none;
    color: var(--ca-ink);
    min-height: 60px;
}

    .cadash-qa-tile:hover[b-p7vn88zz4u] {
        text-decoration: none;
        color: var(--ca-ink);
        transform: translateY(-1px);
        box-shadow: var(--ca-shadow-sm);
        border-color: var(--ca-border-strong);
        background: color-mix(in srgb, var(--ca-pending-soft) 55%, var(--ca-surface));
    }

    .cadash-qa-tile .ico[b-p7vn88zz4u] {
        width: 30px;
        height: 30px;
        border-radius: var(--ca-r-input);
        display: grid;
        place-items: center;
    }
        /* CA palette only — brand · teal · neutral slate. NO rose here:
           rose is the error/cancel tone, never decoration for an action tile. */
        .cadash-qa-tile .ico.brand[b-p7vn88zz4u] {
            background: var(--ca-brand-soft);
            color: var(--ca-brand-strong);
        }

        .cadash-qa-tile .ico.teal[b-p7vn88zz4u] {
            background: var(--ca-accent-soft);
            color: var(--ca-accent);
        }

        .cadash-qa-tile .ico.neutral[b-p7vn88zz4u] {
            background: var(--ca-pending-soft);
            color: var(--ca-ink-2);
        }

    .cadash-qa-tile .lbl[b-p7vn88zz4u] {
        font-size: 13px;
        font-weight: 500;
        color: var(--ca-ink-2);
        line-height: 1.3;
    }

    /* Odd tile count: let the last tile absorb the leftover cell instead of leaving a hole
       (span 2 also completes the 3-col mobile row: 3 + 1+span2) */
    .cadash-qa .cadash-qa-tile:last-child:nth-child(odd)[b-p7vn88zz4u] {
        grid-column: span 2;
    }

/* ───────── Compact list (attention + upcoming) ───────── */
.cadash-list[b-p7vn88zz4u] {
    display: flex;
    flex-direction: column;
}

/* Group sub-header — separates "action required" rows from "upcoming" rows */
.cadash-group-hd[b-p7vn88zz4u] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ca-muted);
}

    .cadash-group-hd:first-child[b-p7vn88zz4u] {
        padding-top: 2px;
    }

.cadash-list-row[b-p7vn88zz4u] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 8px;
    border-radius: 12px;
    margin: 0 -8px;
    border-bottom: 1px solid var(--d-line-2);
    text-decoration: none;
    color: var(--ca-ink);
    transition: background .15s;
}

    .cadash-list-row:last-child[b-p7vn88zz4u] {
        border-bottom: 0;
    }

    .cadash-list-row:hover[b-p7vn88zz4u] {
        background: var(--ca-pending-soft);
        text-decoration: none;
        color: var(--ca-ink);
    }

    .cadash-list-row .name[b-p7vn88zz4u] {
        font-size: 14px;
        font-weight: 600;
        color: var(--ca-ink);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cadash-list-row .meta[b-p7vn88zz4u] {
        font-size: 12px;
        color: var(--ca-muted);
        margin: 2px 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cadash-list-row .info[b-p7vn88zz4u] {
        min-width: 0;
        flex: 1;
    }

/* Date chip — neutral */
.cadash-day[b-p7vn88zz4u] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ca-pending-soft);
    border: 1px solid var(--ca-border);
    color: var(--ca-ink-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .cadash-day b[b-p7vn88zz4u] {
        font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--ca-ink);
    }

    .cadash-day span[b-p7vn88zz4u] {
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ca-muted);
    }

/* Icon chips (attention) — status tones only */
.cadash-chip[b-p7vn88zz4u] {
    width: 30px;
    height: 30px;
    border-radius: var(--ca-r-input);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--ca-pending-soft);
    color: var(--ca-ink-2);
}

    .cadash-chip.warn[b-p7vn88zz4u] {
        background: var(--ca-brand-soft);
        color: var(--ca-brand-strong);
    }

    .cadash-chip.danger[b-p7vn88zz4u] {
        background: var(--ca-bad-soft);
        color: var(--ca-bad);
    }

/* ───────── Empty state ───────── */
.cadash-empty[b-p7vn88zz4u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 22px 14px;
    color: var(--ca-muted);
    text-align: center;
    flex: 1;
}

.cadash-empty-art[b-p7vn88zz4u] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
}

    .cadash-empty-art svg[b-p7vn88zz4u] {
        width: 22px;
        height: 22px;
    }

    .cadash-empty-art.accent[b-p7vn88zz4u] {
        background: var(--ca-brand-soft);
        color: var(--ca-brand);
    }

    .cadash-empty-art.good[b-p7vn88zz4u] {
        background: var(--ca-ok-soft);
        color: var(--ca-ok);
    }

    .cadash-empty-art.warn[b-p7vn88zz4u] {
        background: var(--ca-brand-soft);
        color: var(--ca-brand-strong);
    }

    .cadash-empty-art.neutral[b-p7vn88zz4u] {
        background: var(--ca-pending-soft);
        color: var(--ca-muted);
    }

.cadash-empty .msg[b-p7vn88zz4u] {
    margin: 0;
    font-size: 13px;
    color: var(--ca-muted);
    max-width: 220px;
}

.cadash-empty-cta[b-p7vn88zz4u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    min-height: 36px;
    height: 36px;
    margin-top: 4px;
    border-radius: var(--ca-r-input);
    background: var(--ca-brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s var(--ease), background .15s;
    box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--ca-brand) 35%, transparent);
}

    .cadash-empty-cta:hover[b-p7vn88zz4u] {
        color: #fff;
        text-decoration: none;
        background: var(--ca-brand-strong);
        transform: translateY(-1px);
    }

/* Focus ring (a11y) */
.cadash a:focus-visible[b-p7vn88zz4u],
.cadash button:focus-visible[b-p7vn88zz4u] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ca-brand) 28%, transparent);
    border-radius: var(--ca-r-input);
}

@media (prefers-reduced-motion: reduce) {
    .cadash *[b-p7vn88zz4u], .cadash *[b-p7vn88zz4u]::before, .cadash *[b-p7vn88zz4u]::after {
        transition: none !important;
        animation: none !important;
    }
}
/* /src/Features/Dashboard/Pages/Dashboard/UserDashboard.razor.rz.scp.css */
/* User Dashboard — Manager Dashboard v4 theme */
.udash-root[b-k4tf73y4u2] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-info: #2563eb;
    --d-info-soft: #dbeafe;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    padding: 20px 28px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

@media (max-width: 640px) {
    .udash-root[b-k4tf73y4u2] { padding: 14px 14px; }
}

/* Hero */
.udash-hero[b-k4tf73y4u2] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--d-line);
}

    .udash-hero h1[b-k4tf73y4u2] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

    .udash-hero p[b-k4tf73y4u2] {
        margin: 4px 0 0;
        color: var(--d-ink-3);
        font-size: 14px;
    }

/* Search card */
.udash-search[b-k4tf73y4u2] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: visible;
    margin-bottom: 18px;
}

.udash-search-hd[b-k4tf73y4u2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
}

    .udash-search-hd .ico[b-k4tf73y4u2] {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: var(--d-accent-grad);
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 1px 2px rgba(234, 88, 12, .15);
    }

    .udash-search-hd .ttl[b-k4tf73y4u2] {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .udash-search-hd .sub[b-k4tf73y4u2] {
        font-size: 12px;
        color: var(--d-ink-3);
    }

/* KPI strip */
.udash-kpis[b-k4tf73y4u2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .udash-kpis[b-k4tf73y4u2] { grid-template-columns: repeat(2, 1fr); }
    .udash-kpi:nth-child(2)[b-k4tf73y4u2] { border-right: 0; }
}

.udash-kpi[b-k4tf73y4u2] {
    padding: 16px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .udash-kpi:last-child[b-k4tf73y4u2] { border-right: 0; }

.udash-kpi-lbl[b-k4tf73y4u2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.udash-kpi-dot[b-k4tf73y4u2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .udash-kpi-dot.accent[b-k4tf73y4u2] { background: var(--d-accent-grad); }
    .udash-kpi-dot.good[b-k4tf73y4u2] { background: var(--d-good); }
    .udash-kpi-dot.warn[b-k4tf73y4u2] { background: var(--d-warn); }
    .udash-kpi-dot.info[b-k4tf73y4u2] { background: var(--d-info); }

.udash-kpi-val[b-k4tf73y4u2] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Grid */
.udash-grid[b-k4tf73y4u2] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.udash-col-8[b-k4tf73y4u2] { grid-column: span 12; }
.udash-col-4[b-k4tf73y4u2] { grid-column: span 12; }

@media (min-width: 1024px) {
    .udash-col-8[b-k4tf73y4u2] { grid-column: span 8; }
    .udash-col-4[b-k4tf73y4u2] { grid-column: span 4; }
}

/* Card */
.udash-card[b-k4tf73y4u2] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.udash-card-hd[b-k4tf73y4u2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

    .udash-card-hd h3[b-k4tf73y4u2] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.udash-link[b-k4tf73y4u2] {
    color: var(--d-ink-3);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color .12s;
}

    .udash-link:hover[b-k4tf73y4u2] {
        color: var(--d-accent);
        text-decoration: none;
    }

/* Booking row list */
.udash-rows[b-k4tf73y4u2] {
    padding: 0 8px 12px;
    display: flex;
    flex-direction: column;
}

.udash-row[b-k4tf73y4u2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--d-line-2);
    border-radius: 6px;
    text-decoration: none;
    color: var(--d-ink);
    transition: background .12s;
}

    .udash-row:last-child[b-k4tf73y4u2] { border-bottom: 0; }
    .udash-row:hover[b-k4tf73y4u2] { background: var(--d-surface-2); }

.udash-row-ico[b-k4tf73y4u2] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    border: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .udash-row-ico.accent[b-k4tf73y4u2] {
        background: var(--d-accent-grad-soft);
        color: var(--d-accent);
        border-color: #fed7aa;
    }

.udash-row-info[b-k4tf73y4u2] {
    min-width: 0;
    flex: 1;
}

    .udash-row-info .nm[b-k4tf73y4u2] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .udash-row-info .meta[b-k4tf73y4u2] {
        font-size: 11.5px;
        color: var(--d-ink-3);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    .udash-row-info .meta .code[b-k4tf73y4u2] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--d-accent);
    }

.udash-row-amt[b-k4tf73y4u2] {
    text-align: right;
    flex-shrink: 0;
}

    .udash-row-amt .v[b-k4tf73y4u2] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }

    .udash-row-amt .c[b-k4tf73y4u2] {
        font-size: 10px;
        color: var(--d-ink-3);
        margin-left: 2px;
    }

/* Status pills */
.udash-pill[b-k4tf73y4u2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    margin-top: 3px;
}

    .udash-pill.s-warn[b-k4tf73y4u2] { background: var(--d-warn-soft); color: var(--d-warn); }
    .udash-pill.s-good[b-k4tf73y4u2] { background: var(--d-good-soft); color: var(--d-good); }
    .udash-pill.s-info[b-k4tf73y4u2] { background: var(--d-info-soft); color: var(--d-info); }
    .udash-pill.s-mute[b-k4tf73y4u2] { background: var(--d-surface-2); color: var(--d-ink-3); }
    .udash-pill.s-danger[b-k4tf73y4u2] { background: var(--d-danger-soft); color: var(--d-danger); }
    .udash-pill.s-purple[b-k4tf73y4u2] { background: #ede9fe; color: #6d28d9; }
    .udash-pill.s-indigo[b-k4tf73y4u2] { background: #e0e7ff; color: #4338ca; }

/* Quick Actions */
.udash-qa[b-k4tf73y4u2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 16px 16px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--d-line);
}

.udash-qa-item[b-k4tf73y4u2] {
    background: var(--d-surface);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    transition: background .12s;
}

    .udash-qa-item:hover[b-k4tf73y4u2] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .udash-qa-item .ico[b-k4tf73y4u2] {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: var(--d-surface-2);
        color: var(--d-ink-2);
        display: grid;
        place-items: center;
        border: 1px solid var(--d-line);
        flex-shrink: 0;
    }

    .udash-qa-item.primary .ico[b-k4tf73y4u2] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(234, 88, 12, .15);
    }

/* Empty */
.udash-empty[b-k4tf73y4u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .udash-empty svg[b-k4tf73y4u2] { color: var(--d-ink-4); margin-bottom: 6px; }

    .udash-empty b[b-k4tf73y4u2] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .udash-empty small[b-k4tf73y4u2] { font-size: 12px; }

/* Loading */
.udash-loading[b-k4tf73y4u2] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.udash-spinner[b-k4tf73y4u2] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: udash-spin-b-k4tf73y4u2 .8s linear infinite;
}

@keyframes udash-spin-b-k4tf73y4u2 {
    to { transform: rotate(360deg); }
}
/* /src/Features/Dashboard/Pages/Manager/Dashboard.razor.rz.scp.css */
/* /manager — bảng điều hành vận hành nội bộ.
   Khung .nm-list-* giữ chung với các màn quản trị đã redesign (booking/all, news, banners…)
   nên trang này khai lại đúng bộ đó, phần riêng dùng tiền tố .mdash-.
   Chrome (card/badge/nút/empty/skeleton) do Nm* lo — ở đây chỉ còn bố cục + khối số liệu.
   Chữ ký thị giác: CẤU TRÚC nói sans, DỮ LIỆU nói mono (JetBrains Mono, đã có sẵn trong bundle). */

.nm-list-page[b-nijwsis5ss] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-nijwsis5ss] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-nijwsis5ss] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-nijwsis5ss] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-nijwsis5ss] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Số liệu luôn mono + tabular để cột số không nhảy khi đổi kỳ. */
.mdash-num[b-nijwsis5ss] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Chọn kỳ ─────────────────────────────────────────────────────────── */
.mdash-period[b-nijwsis5ss] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
}

.mdash-period button[b-nijwsis5ss] {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    padding: 5px 12px;
    border-radius: var(--nm-r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, background .12s;
}

.mdash-period button:hover[b-nijwsis5ss] { color: var(--nm-ink); }

.mdash-period button.is-active[b-nijwsis5ss] {
    background: var(--nm-surface);
    color: var(--nm-ink);
    box-shadow: var(--nm-shadow-sm);
}

/* ── Dải chỉ số — 5 ô readout ngăn nhau bằng đường tóc, không phải 5 thẻ rời ── */
.mdash-readouts[b-nijwsis5ss] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
    overflow: hidden;
}

.mdash-ro[b-nijwsis5ss] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    min-width: 0;
}

.mdash-ro + .mdash-ro[b-nijwsis5ss] { border-left: 1px solid var(--nm-border); }
.mdash-ro.is-skel[b-nijwsis5ss] { gap: 10px; }

.mdash-ro__lbl[b-nijwsis5ss] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-dot[b-nijwsis5ss] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--nm-pending);
}

.mdash-dot--accent[b-nijwsis5ss] { background: var(--nm-brand-500); }
.mdash-dot--ok[b-nijwsis5ss] { background: var(--nm-ok); }
.mdash-dot--info[b-nijwsis5ss] { background: var(--nm-info); }
.mdash-dot--warn[b-nijwsis5ss] { background: var(--nm-warn); }
.mdash-dot--bad[b-nijwsis5ss] { background: var(--nm-bad); }

.mdash-ro__val[b-nijwsis5ss] {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-ro__foot[b-nijwsis5ss] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    min-width: 0;
}

.mdash-ro__sub[b-nijwsis5ss] {
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-delta[b-nijwsis5ss] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mũi tên theo dấu, MÀU theo nghĩa: "Chờ thanh toán"/"Huỷ" tăng lên là tin xấu. */
.mdash-delta.is-good[b-nijwsis5ss] { color: var(--nm-ok); }
.mdash-delta.is-bad[b-nijwsis5ss] { color: var(--nm-bad); }
.mdash-delta.is-flat[b-nijwsis5ss] { color: var(--nm-muted); }

/* ── Lưới 12 cột ─────────────────────────────────────────────────────── */
.mdash-grid[b-nijwsis5ss] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.mdash-col-4[b-nijwsis5ss], .mdash-col-5[b-nijwsis5ss], .mdash-col-7[b-nijwsis5ss], .mdash-col-8[b-nijwsis5ss] { grid-column: span 12; min-width: 0; }

@media (min-width: 1100px) {
    .mdash-col-4[b-nijwsis5ss] { grid-column: span 4; }
    .mdash-col-5[b-nijwsis5ss] { grid-column: span 5; }
    .mdash-col-7[b-nijwsis5ss] { grid-column: span 7; }
    .mdash-col-8[b-nijwsis5ss] { grid-column: span 8; }
}

/* ── Đầu thẻ (đặt trong slot Header của NmCard) ──────────────────────── */
.mdash-hd[b-nijwsis5ss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mdash-hd h2[b-nijwsis5ss] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
}

.mdash-hd-note[b-nijwsis5ss] { font-size: 12px; color: var(--nm-muted); }

.mdash-count[b-nijwsis5ss] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.mdash-link[b-nijwsis5ss] {
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    text-decoration: none;
    transition: color .12s;
}

.mdash-link:hover[b-nijwsis5ss] { color: var(--nm-brand-600); text-decoration: none; }

.mdash-pad[b-nijwsis5ss] { padding: 16px 18px; }

/* ── Hàng chờ cần xử lý ──────────────────────────────────────────────── */
.mdash-queue[b-nijwsis5ss] { display: flex; flex-direction: column; }

.mdash-q[b-nijwsis5ss] {
    display: grid;
    grid-template-columns: 32px 1fr auto 14px;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: var(--nm-ink);
    border-bottom: 1px solid var(--nm-border);
    transition: background .12s;
}

.mdash-q:last-child[b-nijwsis5ss] { border-bottom: 0; }
.mdash-q:hover[b-nijwsis5ss] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }

.mdash-q__ico[b-nijwsis5ss] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--nm-pending-soft);
    color: var(--nm-pending);
}

.mdash-q__ico--bad[b-nijwsis5ss] { background: var(--nm-bad-soft); color: var(--nm-bad); }
.mdash-q__ico--warn[b-nijwsis5ss] { background: var(--nm-warn-soft); color: var(--nm-warn); }
.mdash-q__ico--info[b-nijwsis5ss] { background: var(--nm-info-soft); color: var(--nm-info); }

.mdash-q__body[b-nijwsis5ss] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mdash-q__name[b-nijwsis5ss] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-q__hint[b-nijwsis5ss] {
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-q__n[b-nijwsis5ss] {
    font-size: 17px;
    font-weight: 600;
    color: var(--nm-ink);
}

.mdash-q__n--bad[b-nijwsis5ss] { color: var(--nm-bad); }
.mdash-q__n--warn[b-nijwsis5ss] { color: var(--nm-warn); }

.mdash-q__go[b-nijwsis5ss] { font-size: 12px; color: var(--nm-muted); }

/* ── Cơ cấu dịch vụ ──────────────────────────────────────────────────── */
.mdash-mix[b-nijwsis5ss] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
}

.mdash-mix__row[b-nijwsis5ss] {
    display: grid;
    grid-template-columns: 108px 1fr 40px 34px;
    align-items: center;
    gap: 10px;
    --svc: var(--nm-pending);
}

/* Cùng bộ màu dịch vụ với /manager/booking/all (cell-svc--*) để 2 màn khớp nhau. */
.mdash-mix__row.mdash-svc--flight[b-nijwsis5ss], .mdash-svc--flight[b-nijwsis5ss] { --svc: #0284c7; }
.mdash-mix__row.mdash-svc--hotel[b-nijwsis5ss], .mdash-svc--hotel[b-nijwsis5ss] { --svc: #7c3aed; }
.mdash-mix__row.mdash-svc--tour[b-nijwsis5ss], .mdash-svc--tour[b-nijwsis5ss] { --svc: #059669; }
.mdash-mix__row.mdash-svc--visa[b-nijwsis5ss], .mdash-svc--visa[b-nijwsis5ss] { --svc: #b45309; }
.mdash-mix__row.mdash-svc--esim[b-nijwsis5ss], .mdash-svc--esim[b-nijwsis5ss] { --svc: #db2777; }
.mdash-mix__row.mdash-svc--fasttrack[b-nijwsis5ss], .mdash-svc--fasttrack[b-nijwsis5ss] { --svc: #ea580c; }
.mdash-mix__row.mdash-svc--travelinsurance[b-nijwsis5ss], .mdash-svc--travelinsurance[b-nijwsis5ss] { --svc: #0d9488; }

.mdash-mix__lbl[b-nijwsis5ss] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-mix__lbl i[b-nijwsis5ss] { color: var(--svc); font-size: 13px; }

.mdash-mix__bar[b-nijwsis5ss] {
    height: 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    overflow: hidden;
}

.mdash-mix__fill[b-nijwsis5ss] {
    display: block;
    height: 100%;
    border-radius: var(--nm-r-pill);
    background: var(--svc);
}

.mdash-mix__n[b-nijwsis5ss] { font-size: 13px; font-weight: 600; color: var(--nm-ink); text-align: right; }
.mdash-mix__pct[b-nijwsis5ss] { font-size: 12px; color: var(--nm-muted); text-align: right; }

/* ── Bảng đơn mới nhất ───────────────────────────────────────────────── */
.mdash-tbl-wrap[b-nijwsis5ss] { overflow-x: auto; }

.mdash-tbl[b-nijwsis5ss] { width: 100%; border-collapse: collapse; }

.mdash-tbl thead th[b-nijwsis5ss] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nm-muted);
    text-align: left;
    padding: 9px 18px;
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}

.mdash-tbl th.right[b-nijwsis5ss], .mdash-tbl td.right[b-nijwsis5ss] { text-align: right; }

.mdash-tbl tbody tr[b-nijwsis5ss] {
    cursor: pointer;
    transition: background .12s;
}

.mdash-tbl tbody tr:hover[b-nijwsis5ss] { background: var(--nm-surface-2); }

.mdash-tbl tbody td[b-nijwsis5ss] {
    padding: 10px 18px;
    border-bottom: 1px solid var(--nm-border);
    vertical-align: middle;
    white-space: nowrap;
}

.mdash-tbl tbody tr:last-child td[b-nijwsis5ss] { border-bottom: 0; }

.mdash-svc[b-nijwsis5ss] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    --svc: var(--nm-pending);
    text-decoration: none;
    color: inherit;
}

a.mdash-svc:hover[b-nijwsis5ss] { text-decoration: none; color: inherit; }
a.mdash-svc:hover .mdash-code[b-nijwsis5ss] { color: var(--nm-brand-600); }

.mdash-svc__ico[b-nijwsis5ss] {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--svc) 12%, transparent);
    color: var(--svc);
}

.mdash-code[b-nijwsis5ss] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink); }

.mdash-cust[b-nijwsis5ss] {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nm-ink);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdash-cust__sub[b-nijwsis5ss] { display: block; font-size: 11.5px; color: var(--nm-muted); }

.mdash-amt[b-nijwsis5ss] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.mdash-when[b-nijwsis5ss] { font-size: 12px; color: var(--nm-muted); }

/* ── Tác vụ nhanh ────────────────────────────────────────────────────── */
/* Cột 4/12 chỉ rộng ~360px: xếp 2 cột thì "Đặt vé máy bay"/"Hỗ trợ khách hàng" xuống dòng
   và các ô cao thấp so le → 1 cột, nhãn không bao giờ gãy. */
.mdash-qa[b-nijwsis5ss] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
}

.mdash-qa--wide[b-nijwsis5ss] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.mdash-qa__tile[b-nijwsis5ss] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    text-decoration: none;
    color: var(--nm-ink);
    transition: border-color .12s, background .12s;
    min-width: 0;
}

.mdash-qa__tile:hover[b-nijwsis5ss] {
    background: var(--nm-surface-2);
    border-color: var(--nm-border-strong);
    text-decoration: none;
    color: var(--nm-ink);
}

.mdash-qa__tile.is-primary[b-nijwsis5ss] { border-color: var(--nm-brand-100); background: var(--nm-brand-50); }
.mdash-qa__tile.is-primary:hover[b-nijwsis5ss] { background: var(--nm-brand-100); border-color: var(--nm-brand-300); }

.mdash-qa__ico[b-nijwsis5ss] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--nm-pending-soft);
    color: var(--nm-pending);
}

/* Ô kề nhau không trùng tông; dịch vụ giữ đúng màu quy ước (bay = xanh dương). */
.mdash-qa__ico--brand[b-nijwsis5ss] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.mdash-qa__ico--blue[b-nijwsis5ss] { background: #eff6ff; color: #0284c7; }
.mdash-qa__ico--amber[b-nijwsis5ss] { background: #fffbeb; color: #b45309; }
.mdash-qa__ico--violet[b-nijwsis5ss] { background: #f5f3ff; color: #7c3aed; }
.mdash-qa__ico--emerald[b-nijwsis5ss] { background: #ecfdf5; color: #059669; }
.mdash-qa__ico--teal[b-nijwsis5ss] { background: #f0fdfa; color: #0d9488; }
.mdash-qa__ico--indigo[b-nijwsis5ss] { background: #eef2ff; color: #4f46e5; }

.mdash-qa__lbl[b-nijwsis5ss] {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    min-width: 0;
}

/* ── Thu hẹp màn hình ────────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .mdash-readouts[b-nijwsis5ss] { grid-template-columns: repeat(2, 1fr); }
    .mdash-ro[b-nijwsis5ss] { border-left: 1px solid var(--nm-border); border-top: 1px solid var(--nm-border); }
    .mdash-ro:nth-child(odd)[b-nijwsis5ss] { border-left: 0; }
    .mdash-ro:nth-child(-n+2)[b-nijwsis5ss] { border-top: 0; }
    /* Ô lẻ cuối cùng ăn trọn hàng để không hở nửa dải. */
    .mdash-ro:last-child:nth-child(odd)[b-nijwsis5ss] { grid-column: span 2; border-left: 0; }
}

@media (max-width: 640px) {
    .nm-list-page[b-nijwsis5ss] { padding: 16px 14px 22px; }
    .nm-list-head[b-nijwsis5ss] { align-items: flex-start; }
    .nm-list-actions[b-nijwsis5ss] { width: 100%; }
    .mdash-period[b-nijwsis5ss] { overflow-x: auto; scrollbar-width: none; }
    .mdash-period[b-nijwsis5ss]::-webkit-scrollbar { display: none; }
    .mdash-readouts[b-nijwsis5ss] { grid-template-columns: 1fr; }
    .mdash-ro[b-nijwsis5ss] { border-left: 0; }
    .mdash-ro:nth-child(-n+2)[b-nijwsis5ss] { border-top: 1px solid var(--nm-border); }
    .mdash-ro:first-child[b-nijwsis5ss] { border-top: 0; }
    .mdash-ro:last-child:nth-child(odd)[b-nijwsis5ss] { grid-column: span 1; }
    .mdash-mix__row[b-nijwsis5ss] { grid-template-columns: 92px 1fr 36px 30px; }
}
/* /src/Features/Dashboard/Pages/Marketing/MarketingDashboard.razor.rz.scp.css */
/* MarketingDashboard — bảng điều hành marketing nội bộ.
   Giữ đúng chữ ký thị giác của /manager (Dashboard.razor.css) và /manager cho CaStaff:
   khung .nm-list-*, CẤU TRÚC nói sans, DỮ LIỆU nói mono. Phần riêng dùng tiền tố .mkdash-
   để ba màn không giẫm CSS của nhau. Chrome (card/badge/empty/skeleton) do Nm* lo. */

.nm-list-page[b-0ket3qu11r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-0ket3qu11r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-0ket3qu11r] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-0ket3qu11r] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-0ket3qu11r] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mkdash-num[b-0ket3qu11r] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Chọn kỳ ─────────────────────────────────────────────────────────── */
.mkdash-period[b-0ket3qu11r] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
}

.mkdash-period button[b-0ket3qu11r] {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    padding: 5px 12px;
    border-radius: var(--nm-r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, background .12s;
}

.mkdash-period button:hover[b-0ket3qu11r] { color: var(--nm-ink); }

.mkdash-period button.is-active[b-0ket3qu11r] {
    background: var(--nm-surface);
    color: var(--nm-ink);
    box-shadow: var(--nm-shadow-sm);
}

/* ── Dải chỉ số ──────────────────────────────────────────────────────────
   Số ô đổi theo quyền (3–6) nên đường tóc vẽ bằng gap 1px trên nền border
   thay vì nth-child: cách này không vỡ khi lưới xuống dòng lẻ ô. */
.mkdash-readouts[b-0ket3qu11r] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--nm-border);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
    overflow: hidden;
}

/* Ô CUỐI LẤP NỐT DÒNG khi tổng số ô không chia hết cho số cột. Dải này có 3–7 ô tuỳ quyền
   (marketing đủ quyền = 7), mà nền lưới là màu border — thiếu luật này thì phần dư của dòng
   cuối hiện ra thành một mảng xám to đúng giữa màn. `:last-child:nth-child(Xn+k)` là cách duy
   nhất CSS thuần biết ô cuối đang đứng thứ mấy trên dòng. */
@media (min-width: 620px) {
    .mkdash-readouts[b-0ket3qu11r] { grid-template-columns: repeat(2, 1fr); }
    .mkdash-ro:last-child:nth-child(2n+1)[b-0ket3qu11r] { grid-column: span 2; }
}

@media (min-width: 1100px) {
    .mkdash-readouts[b-0ket3qu11r] { grid-template-columns: repeat(3, 1fr); }
    .mkdash-ro:last-child:nth-child(3n+1)[b-0ket3qu11r] { grid-column: span 3; }
    .mkdash-ro:last-child:nth-child(3n+2)[b-0ket3qu11r] { grid-column: span 2; }
}

@media (min-width: 1560px) {
    .mkdash-readouts[b-0ket3qu11r] { grid-template-columns: repeat(6, 1fr); }
    .mkdash-ro:last-child:nth-child(6n+1)[b-0ket3qu11r] { grid-column: span 6; }
    .mkdash-ro:last-child:nth-child(6n+2)[b-0ket3qu11r] { grid-column: span 5; }
    .mkdash-ro:last-child:nth-child(6n+3)[b-0ket3qu11r] { grid-column: span 4; }
    .mkdash-ro:last-child:nth-child(6n+4)[b-0ket3qu11r] { grid-column: span 3; }
    .mkdash-ro:last-child:nth-child(6n+5)[b-0ket3qu11r] { grid-column: span 2; }
}

.mkdash-ro[b-0ket3qu11r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    min-width: 0;
    background: var(--nm-surface);
}

.mkdash-ro.is-skel[b-0ket3qu11r] { gap: 10px; }

.mkdash-ro__lbl[b-0ket3qu11r] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-dot[b-0ket3qu11r] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--nm-pending);
}

.mkdash-dot--accent[b-0ket3qu11r] { background: var(--nm-brand-500); }
.mkdash-dot--ok[b-0ket3qu11r] { background: var(--nm-ok); }
.mkdash-dot--info[b-0ket3qu11r] { background: var(--nm-info); }
.mkdash-dot--warn[b-0ket3qu11r] { background: var(--nm-warn); }
.mkdash-dot--bad[b-0ket3qu11r] { background: var(--nm-bad); }
.mkdash-dot--muted[b-0ket3qu11r] { background: var(--nm-border-strong); }

.mkdash-ro__val[b-0ket3qu11r] {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-ro__foot[b-0ket3qu11r] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
    min-width: 0;
}

.mkdash-ro__sub[b-0ket3qu11r] {
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nội dung hết hạn mà còn bật phải đọc ra ngay từ dải chỉ số. */
.mkdash-ro__sub.is-alert[b-0ket3qu11r] { color: var(--nm-bad); font-weight: 600; }

.mkdash-delta[b-0ket3qu11r] { font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.mkdash-delta.is-good[b-0ket3qu11r] { color: var(--nm-ok); }
.mkdash-delta.is-bad[b-0ket3qu11r] { color: var(--nm-bad); }
.mkdash-delta.is-flat[b-0ket3qu11r] { color: var(--nm-muted); }

/* ── Lưới 12 cột ─────────────────────────────────────────────────────── */
.mkdash-grid[b-0ket3qu11r] { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.mkdash-col-4[b-0ket3qu11r], .mkdash-col-5[b-0ket3qu11r], .mkdash-col-7[b-0ket3qu11r], .mkdash-col-8[b-0ket3qu11r] { grid-column: span 12; min-width: 0; }

/* Các thẻ trong cùng một hàng phải cao bằng nhau, nếu không mép dưới so le và hàng đọc ra là bị vỡ.
   Ô lưới đã stretch sẵn nên chỉ cần đẩy chiều cao ấy xuống NmCard bằng height.
   ⚠ KHÔNG làm bằng `display:flex` trên ô lưới: thẻ chứa ApexChart sẽ thành flex item co theo nội
   dung, Apex đo được bề ngang 0 và rơi về mặc định 300px — biểu đồ teo lại giữa thẻ rộng 800px. */
/* ⚠ PHẢI có `::deep`: div gốc của NmCard mang scope của NmCard, không phải của màn này, nên
   `.mkdash-col-4 > *` bị trình biên dịch gắn thêm [b-…] của màn và không khớp gì cả — thẻ vẫn so le
   mà CSS trông như đã viết đúng. */
.mkdash-col-4[b-0ket3qu11r]  > *,
.mkdash-col-5[b-0ket3qu11r]  > *,
.mkdash-col-7[b-0ket3qu11r]  > *,
.mkdash-col-8[b-0ket3qu11r]  > * { height: 100%; }

@media (min-width: 1100px) {
    .mkdash-col-4[b-0ket3qu11r] { grid-column: span 4; }
    .mkdash-col-5[b-0ket3qu11r] { grid-column: span 5; }
    .mkdash-col-7[b-0ket3qu11r] { grid-column: span 7; }
    .mkdash-col-8[b-0ket3qu11r] { grid-column: span 8; }
}

/* ── Đầu thẻ (slot Header của NmCard) ────────────────────────────────── */
.mkdash-hd[b-0ket3qu11r] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.mkdash-hd h2[b-0ket3qu11r] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
}

.mkdash-hd-note[b-0ket3qu11r] { font-size: 12px; color: var(--nm-muted); }

.mkdash-count[b-0ket3qu11r] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.mkdash-link[b-0ket3qu11r] { font-size: 12px; font-weight: 600; color: var(--nm-muted); text-decoration: none; transition: color .12s; }
.mkdash-link:hover[b-0ket3qu11r] { color: var(--nm-brand-600); text-decoration: none; }

.mkdash-pad[b-0ket3qu11r] { padding: 16px 18px; }

/* ── Hàng chờ cần xử lý ──────────────────────────────────────────────── */
.mkdash-queue[b-0ket3qu11r] { display: flex; flex-direction: column; }

.mkdash-q[b-0ket3qu11r] {
    display: grid;
    grid-template-columns: 32px 1fr auto 14px;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: var(--nm-ink);
    border-bottom: 1px solid var(--nm-border);
    transition: background .12s;
}

.mkdash-q:last-child[b-0ket3qu11r] { border-bottom: 0; }
.mkdash-q:hover[b-0ket3qu11r] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }

.mkdash-q__ico[b-0ket3qu11r] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    background: var(--nm-pending-soft);
    color: var(--nm-pending);
}

.mkdash-q__ico--bad[b-0ket3qu11r] { background: var(--nm-bad-soft); color: var(--nm-bad); }
.mkdash-q__ico--warn[b-0ket3qu11r] { background: var(--nm-warn-soft); color: var(--nm-warn); }
.mkdash-q__ico--info[b-0ket3qu11r] { background: var(--nm-info-soft); color: var(--nm-info); }

.mkdash-q__body[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mkdash-q__name[b-0ket3qu11r] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-q__hint[b-0ket3qu11r] {
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-q__n[b-0ket3qu11r] { font-size: 17px; font-weight: 600; color: var(--nm-ink); }
.mkdash-q__n--bad[b-0ket3qu11r] { color: var(--nm-bad); }
.mkdash-q__n--warn[b-0ket3qu11r] { color: var(--nm-warn); }
.mkdash-q__go[b-0ket3qu11r] { font-size: 12px; color: var(--nm-muted); }

/* ── Cơ cấu chuyên mục ───────────────────────────────────────────────── */
.mkdash-mix[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }

.mkdash-mix__bar[b-0ket3qu11r] {
    display: flex;
    height: 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    overflow: hidden;
}

.mkdash-mix__seg[b-0ket3qu11r] { display: block; height: 100%; background: var(--cat, var(--nm-border-strong)); }

/* Bảng màu chuyên mục — dùng chung hệ màu dịch vụ của /manager/booking/all để
   các màn quản trị đọc như một hệ; ô cuối (Khác) cố ý xám. */
.mkdash-mix__seg--c0[b-0ket3qu11r], .mkdash-dot--c0[b-0ket3qu11r] { --cat: #0284c7; background: #0284c7; }
.mkdash-mix__seg--c1[b-0ket3qu11r], .mkdash-dot--c1[b-0ket3qu11r] { --cat: #7c3aed; background: #7c3aed; }
.mkdash-mix__seg--c2[b-0ket3qu11r], .mkdash-dot--c2[b-0ket3qu11r] { --cat: #059669; background: #059669; }
.mkdash-mix__seg--c3[b-0ket3qu11r], .mkdash-dot--c3[b-0ket3qu11r] { --cat: #b45309; background: #b45309; }
.mkdash-mix__seg--c4[b-0ket3qu11r], .mkdash-dot--c4[b-0ket3qu11r] { --cat: #db2777; background: #db2777; }
.mkdash-mix__seg--c5[b-0ket3qu11r], .mkdash-dot--c5[b-0ket3qu11r] { --cat: #ea580c; background: #ea580c; }
.mkdash-mix__seg--c6[b-0ket3qu11r], .mkdash-dot--c6[b-0ket3qu11r] { --cat: var(--nm-border-strong); background: var(--nm-border-strong); }

.mkdash-mix__legend[b-0ket3qu11r] { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.mkdash-mix__item[b-0ket3qu11r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    text-decoration: none;
    min-width: 0;
}

.mkdash-mix__item:hover[b-0ket3qu11r] { text-decoration: none; color: var(--nm-brand-600); }

.mkdash-mix__name[b-0ket3qu11r] { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkdash-mix__item b[b-0ket3qu11r] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }

.mkdash-mix__foot[b-0ket3qu11r] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
    font-size: 11.5px;
    color: var(--nm-muted);
}

/* Nói thẳng khi số tổng hợp chỉ tính trên lát cắt đã kéo về, không im lặng cắt bớt. */
.mkdash-mix__note[b-0ket3qu11r] { color: var(--nm-warn); }

/* ── Khung biểu đồ (ApexCharts) ───────────────────────────────────────
   Apex tự dựng SVG bên trong; ở đây chỉ lo khoảng đệm và ghìm kích thước.
   `min-width: 0` là bắt buộc: ô lưới mặc định min-width auto nên biểu đồ co
   theo chiều rộng ban đầu rồi KHÔNG thu lại được khi cửa sổ hẹp đi. */
.mkdash-chart[b-0ket3qu11r] { padding: 12px 10px 6px; min-width: 0; }
.mkdash-chart[b-0ket3qu11r]  .apexcharts-canvas { margin: 0 auto; }

/* Đường lưới và chữ trục phải lùi lại sau dữ liệu. */
.mkdash-chart[b-0ket3qu11r]  .apexcharts-gridline { opacity: .7; }
.mkdash-chart[b-0ket3qu11r]  .apexcharts-tooltip {
    border: 1px solid var(--nm-border) !important;
    box-shadow: var(--nm-shadow) !important;
    border-radius: var(--nm-r-input) !important;
    font-family: var(--nm-font) !important;
}

.mkdash-chart[b-0ket3qu11r]  .apexcharts-tooltip-title {
    background: var(--nm-surface-2) !important;
    border-bottom: 1px solid var(--nm-border) !important;
    font-weight: 700 !important;
}

/* ── Sức khoẻ nội dung ───────────────────────────────────────────────── */
.mkdash-score[b-0ket3qu11r] {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    letter-spacing: 0;
}

.mkdash-score b[b-0ket3qu11r] { font-size: 13px; font-weight: 700; }
.mkdash-score--ok[b-0ket3qu11r] { background: var(--nm-ok-soft); color: var(--nm-ok); }
.mkdash-score--warn[b-0ket3qu11r] { background: var(--nm-warn-soft); color: var(--nm-warn); }
.mkdash-score--bad[b-0ket3qu11r] { background: var(--nm-bad-soft); color: var(--nm-bad); }

.mkdash-health[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }

.mkdash-health__row[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; min-width: 0; }
.mkdash-health__row:hover[b-0ket3qu11r] { text-decoration: none; color: inherit; }
.mkdash-health__row:hover .mkdash-health__lbl[b-0ket3qu11r] { color: var(--nm-brand-600); }

.mkdash-health__top[b-0ket3qu11r] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }

.mkdash-health__lbl[b-0ket3qu11r] {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-health__ico[b-0ket3qu11r] { font-size: 12px; color: var(--nm-muted); flex-shrink: 0; }
.mkdash-health__ico--warn[b-0ket3qu11r] { color: var(--nm-warn); }
.mkdash-health__ico--bad[b-0ket3qu11r] { color: var(--nm-bad); }
.mkdash-health__ico--ok[b-0ket3qu11r] { color: var(--nm-ok); }

.mkdash-health__n[b-0ket3qu11r] { font-size: 13px; font-weight: 600; color: var(--nm-ink); flex-shrink: 0; }
.mkdash-health__n--warn[b-0ket3qu11r] { color: var(--nm-warn); }
.mkdash-health__n--bad[b-0ket3qu11r] { color: var(--nm-bad); }
.mkdash-health__n--ok[b-0ket3qu11r] { color: var(--nm-ok); }

/* Mẫu số là bối cảnh, không phải con số cần đọc trước. */
.mkdash-health__of[b-0ket3qu11r] { font-size: 11px; font-weight: 500; color: var(--nm-muted); }

.mkdash-health__bar[b-0ket3qu11r] {
    display: block;
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    overflow: hidden;
}

/* Thanh đo phần ĐẠT: dài = tốt, nên màu đi theo mức còn thiếu chứ không theo độ dài. */
.mkdash-health__fill[b-0ket3qu11r] { display: block; height: 100%; background: var(--nm-ok); }
.mkdash-health__fill--warn[b-0ket3qu11r] { background: var(--nm-warn); }
.mkdash-health__fill--bad[b-0ket3qu11r] { background: var(--nm-bad); }

.mkdash-health__note[b-0ket3qu11r] {
    padding-top: 10px;
    border-top: 1px solid var(--nm-border);
    font-size: 11.5px;
    color: var(--nm-muted);
}

/* ── Bảng bài viết ───────────────────────────────────────────────────── */
.mkdash-tbl-wrap[b-0ket3qu11r] { overflow-x: auto; }
.mkdash-tbl[b-0ket3qu11r] { width: 100%; border-collapse: collapse; }

.mkdash-tbl thead th[b-0ket3qu11r] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--nm-muted);
    text-align: left;
    padding: 9px 18px;
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}

.mkdash-tbl th.right[b-0ket3qu11r], .mkdash-tbl td.right[b-0ket3qu11r] { text-align: right; }
.mkdash-tbl tbody tr[b-0ket3qu11r] { transition: background .12s; }
.mkdash-tbl tbody tr:hover[b-0ket3qu11r] { background: var(--nm-surface-2); }

.mkdash-tbl tbody td[b-0ket3qu11r] {
    padding: 10px 18px;
    border-bottom: 1px solid var(--nm-border);
    vertical-align: middle;
    white-space: nowrap;
}

.mkdash-tbl tbody tr:last-child td[b-0ket3qu11r] { border-bottom: 0; }

.mkdash-art[b-0ket3qu11r] { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; min-width: 0; }
.mkdash-art:hover[b-0ket3qu11r] { text-decoration: none; color: inherit; }
.mkdash-art:hover .mkdash-art__name[b-0ket3qu11r] { color: var(--nm-brand-600); }

.mkdash-art__ico[b-0ket3qu11r] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

.mkdash-art__body[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mkdash-art__name[b-0ket3qu11r] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-art__sub[b-0ket3qu11r] { font-size: 11.5px; color: var(--nm-muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

.mkdash-cat[b-0ket3qu11r] {
    display: inline-block;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-views[b-0ket3qu11r] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.mkdash-when[b-0ket3qu11r] { font-size: 12px; color: var(--nm-muted); }

/* ── Bài xem nhiều nhất ──────────────────────────────────────────────── */
.mkdash-top[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }

.mkdash-top__row[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; min-width: 0; }
.mkdash-top__row:hover[b-0ket3qu11r] { text-decoration: none; color: inherit; }
.mkdash-top__row:hover .mkdash-top__name[b-0ket3qu11r] { color: var(--nm-brand-600); }

.mkdash-top__head[b-0ket3qu11r] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }

.mkdash-top__name[b-0ket3qu11r] {
    font-size: 13px;
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-top__n[b-0ket3qu11r] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); flex-shrink: 0; }

.mkdash-top__bar[b-0ket3qu11r] {
    display: block;
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    overflow: hidden;
}

.mkdash-top__fill[b-0ket3qu11r] { display: block; height: 100%; background: var(--nm-brand-500); }

/* ── Danh sách (lịch hiển thị + sự kiện bốc thăm) ─────────────────────── */
.mkdash-list[b-0ket3qu11r] { display: flex; flex-direction: column; }

.mkdash-item[b-0ket3qu11r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--nm-border);
    text-decoration: none;
    color: var(--nm-ink);
    transition: background .12s;
}

.mkdash-item:last-child[b-0ket3qu11r] { border-bottom: 0; }
.mkdash-item:hover[b-0ket3qu11r] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }

.mkdash-item__ico[b-0ket3qu11r] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

.mkdash-item__ico--game[b-0ket3qu11r] { background: var(--nm-brand-50); color: var(--nm-brand-600); }

.mkdash-item__body[b-0ket3qu11r] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.mkdash-item__name[b-0ket3qu11r] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkdash-item__sub[b-0ket3qu11r] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.mkdash-kind[b-0ket3qu11r] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nm-ink-2);
}

.mkdash-item__when[b-0ket3qu11r] { color: var(--nm-muted); }

/* ── Tác vụ nhanh ────────────────────────────────────────────────────── */
.mkdash-qa[b-0ket3qu11r] { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }

.mkdash-qa__tile[b-0ket3qu11r] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    text-decoration: none;
    color: var(--nm-ink);
    transition: border-color .12s, background .12s;
    min-width: 0;
}

.mkdash-qa__tile:hover[b-0ket3qu11r] {
    background: var(--nm-surface-2);
    border-color: var(--nm-border-strong);
    text-decoration: none;
    color: var(--nm-ink);
}

.mkdash-qa__tile.is-primary[b-0ket3qu11r] { border-color: var(--nm-brand-100); background: var(--nm-brand-50); }
.mkdash-qa__tile.is-primary:hover[b-0ket3qu11r] { background: var(--nm-brand-100); border-color: var(--nm-brand-300); }

.mkdash-qa__ico[b-0ket3qu11r] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
    background: var(--nm-pending-soft);
    color: var(--nm-pending);
}

.mkdash-qa__ico--brand[b-0ket3qu11r] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.mkdash-qa__ico--blue[b-0ket3qu11r] { background: #eff6ff; color: #0284c7; }
.mkdash-qa__ico--amber[b-0ket3qu11r] { background: #fffbeb; color: #b45309; }
.mkdash-qa__ico--violet[b-0ket3qu11r] { background: #f5f3ff; color: #7c3aed; }
.mkdash-qa__ico--emerald[b-0ket3qu11r] { background: #ecfdf5; color: #059669; }
.mkdash-qa__ico--teal[b-0ket3qu11r] { background: #f0fdfa; color: #0d9488; }

.mkdash-qa__lbl[b-0ket3qu11r] { font-size: 13px; font-weight: 500; line-height: 1.25; min-width: 0; flex: 1; }

.mkdash-qa__badge[b-0ket3qu11r] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-bad-soft);
    color: var(--nm-bad);
    flex-shrink: 0;
}

/* Đỏ chỉ dành cho việc tồn (bài nháp). Sự kiện đang quay là trạng thái đang diễn ra —
   tô đỏ thì người dùng đọc ra là hỏng hóc. */
.mkdash-qa__badge--info[b-0ket3qu11r] { background: var(--nm-info-soft); color: var(--nm-info); }

/* ── Thu hẹp màn hình ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .nm-list-page[b-0ket3qu11r] { padding: 16px 14px 22px; }
    .nm-list-head[b-0ket3qu11r] { align-items: flex-start; }
    .nm-list-actions[b-0ket3qu11r] { width: 100%; }
    .mkdash-period[b-0ket3qu11r] { overflow-x: auto; scrollbar-width: none; }
    .mkdash-period[b-0ket3qu11r]::-webkit-scrollbar { display: none; }
}
/* /src/Features/Dev/Pages/Dev/UiKit.razor.rz.scp.css */
.nm-demo-input[b-d3sr1d1pg0] {
    width: 100%;
    padding: 8px 12px;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: none;
}

.nm-demo-input:focus[b-d3sr1d1pg0] {
    border-color: var(--nm-brand-500);
}
/* /src/Features/Diagnostics/Pages/Manager/ApiLogs.razor.rz.scp.css */
/* /manager/logs/api — nhật ký API đối tác + webhook.
   Khung (card/grid/badge/pager/modal) do primitive Nm* lo; file này chỉ style phần riêng của màn.
   Token-only (var(--nm-*)), không hex — giữ trùng tên class khung (.nm-list-*, .cell-*) với
   /manager/logs/audit để cả cụm nhật ký nhìn như một hệ. */

.nm-list-page[b-aalub0mv5f] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-aalub0mv5f] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-aalub0mv5f] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-aalub0mv5f] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-aalub0mv5f] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Toàn màn hình — bảng log dài, bỏ sidebar/topbar để đọc được nhiều dòng hơn. Esc để thoát. */
.apilog-page.is-full[b-aalub0mv5f] {
    position: fixed;
    inset: 0;
    z-index: 900;
    overflow: auto;
    background: var(--nm-bg);
    padding: 16px 20px 24px;
}
.apilog-page.is-full:focus[b-aalub0mv5f] { outline: none; }

/* ── Dải chuyển giữa 3 màn nhật ký ── */
.apilog-nav[b-aalub0mv5f] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.apilog-nav[b-aalub0mv5f]::-webkit-scrollbar { display: none; }

.apilog-nav__item[b-aalub0mv5f] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--nm-r-input);
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.apilog-nav__item:hover[b-aalub0mv5f] { background: var(--nm-surface-2); color: var(--nm-ink); }
.apilog-nav__item.is-current[b-aalub0mv5f] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    cursor: default;
}

/* ── Chọn kênh ── */
.apilog-tabs[b-aalub0mv5f] {
    display: flex;
    padding: 12px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.apilog-tabs[b-aalub0mv5f]::-webkit-scrollbar { display: none; }

/* ── Bộ lọc ── */
.apilog-filters[b-aalub0mv5f] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.apilog-filters__row[b-aalub0mv5f] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apilog-filters__row--quick[b-aalub0mv5f] { gap: 6px; }
.apilog-filters__sep[b-aalub0mv5f] { width: 1px; height: 18px; background: var(--nm-border); margin: 0 4px; }

.apilog-search[b-aalub0mv5f] { flex: 1 1 260px; min-width: 200px; }
.apilog-sel[b-aalub0mv5f] { min-width: 160px; }
.apilog-sel--sort[b-aalub0mv5f] { min-width: 148px; margin-left: auto; }
.apilog-dates[b-aalub0mv5f] { display: inline-flex; align-items: center; gap: 6px; }
.apilog-dates__sep[b-aalub0mv5f] { color: var(--nm-muted); font-size: 12px; }

.apilog-quick-lbl[b-aalub0mv5f] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-muted);
    margin-right: 2px;
}

.apilog-tags[b-aalub0mv5f] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
[b-aalub0mv5f] .apilog-clear { margin-left: auto; }

/* ── Bảng ── */
.apilog-grid[b-aalub0mv5f] { overflow-x: auto; }

/* <tr> do DataGrid render ⇒ neo vào .apilog-grid (thẻ của TRANG) rồi ::deep xuống. */
.apilog-grid[b-aalub0mv5f]  .nm-grid__row.is-bad > td:first-child { box-shadow: inset 3px 0 0 var(--nm-bad); }
.apilog-grid[b-aalub0mv5f]  .nm-grid__row.is-warn > td:first-child { box-shadow: inset 3px 0 0 var(--nm-warn); }

/* Ô trong bảng — cùng tên class với /manager/logs/audit */
.cell-2line[b-aalub0mv5f] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line--right[b-aalub0mv5f] { align-items: flex-end; }
.cell-2line__main[b-aalub0mv5f] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cell-2line__sub[b-aalub0mv5f] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cell-stack[b-aalub0mv5f] { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cell-stack--start[b-aalub0mv5f] { align-items: flex-start; min-width: 0; }

.apilog-mono[b-aalub0mv5f] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.apilog-dim[b-aalub0mv5f] { color: var(--nm-muted); }

.apilog-trunc[b-aalub0mv5f] {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* Thông báo lỗi cắt 2 dòng — phần thừa xem ở panel chi tiết */
.apilog-err[b-aalub0mv5f] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--nm-bad);
    font-size: 12px;
}

/* Thời lượng: quét mắt là thấy lượt gọi nào đang kéo dài */
.apilog-ms[b-aalub0mv5f] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.apilog-ms.is-warn[b-aalub0mv5f] { color: var(--nm-warn); font-weight: 600; }
.apilog-ms.is-bad[b-aalub0mv5f] { color: var(--nm-bad); font-weight: 700; }

/* ── Nguồn Saladin: key NM đang cấu hình, hằng số để đối chiếu mọi dòng bên dưới ── */
.apilog-expected[b-aalub0mv5f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px 12px;
    padding: 8px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    font-size: 12.5px;
}
.apilog-expected > i[b-aalub0mv5f] { color: var(--nm-muted); }
.apilog-expected__lbl[b-aalub0mv5f] { color: var(--nm-muted); font-weight: 600; }
.apilog-expected__val[b-aalub0mv5f] {
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    padding: 1px 8px;
    overflow-wrap: anywhere;
}

/* ── Chân bảng: tóm tắt + số dòng/trang + pager ── */
.apilog-foot[b-aalub0mv5f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--nm-border);
}
.apilog-foot__left[b-aalub0mv5f] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apilog-foot__sep[b-aalub0mv5f] { width: 1px; height: 16px; background: var(--nm-border); }

.apilog-range[b-aalub0mv5f] { font-size: 12.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

.apilog-psize[b-aalub0mv5f] { display: inline-flex; align-items: center; gap: 6px; }
.apilog-psize > span[b-aalub0mv5f] { font-size: 12.5px; color: var(--nm-muted); }
.apilog-psize[b-aalub0mv5f]  .nm-select { min-width: 74px; }

/* ── Panel chi tiết ── */
.apilog-modal__hd[b-aalub0mv5f] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.apilog-modal__title[b-aalub0mv5f] { margin: 0; font-size: 15px; font-weight: 700; color: var(--nm-ink); }
.apilog-modal__when[b-aalub0mv5f] {
    font-size: 12.5px; color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
[b-aalub0mv5f] .apilog-modal__zoom { margin-left: auto; }

.apilog-detail__sub[b-aalub0mv5f] { display: block; margin-top: 3px; font-size: 11.5px; color: var(--nm-muted); }

/* Khối chẩn đoán X-API-KEY của callback Saladin — dữ kiện duy nhất kết luận 401 do phía ai */
.apilog-keybox[b-aalub0mv5f] {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    font-size: 12.5px;
}
.apilog-keybox.is-ok[b-aalub0mv5f] { border-color: var(--nm-ok); background: var(--nm-ok-soft); }
.apilog-keybox.is-bad[b-aalub0mv5f] { border-color: var(--nm-bad); background: var(--nm-bad-soft); }

.apilog-keybox__row[b-aalub0mv5f] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.apilog-keybox__lbl[b-aalub0mv5f] {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--nm-muted);
}
.apilog-keybox__warn[b-aalub0mv5f] { color: var(--nm-ink); font-weight: 700; }
.apilog-keybox__dim[b-aalub0mv5f] { color: var(--nm-muted); }
.apilog-keybox__note[b-aalub0mv5f] { margin: 8px 0 0; color: var(--nm-ink-2); line-height: 1.5; }

.apilog-code[b-aalub0mv5f] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    padding: 1px 8px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    color: var(--nm-ink);
    overflow-wrap: anywhere;
}

.apilog-block[b-aalub0mv5f] { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.apilog-block__hd[b-aalub0mv5f] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--nm-muted);
}
.apilog-block__actions[b-aalub0mv5f] { display: inline-flex; align-items: center; gap: 4px; }

.apilog-pre[b-aalub0mv5f] {
    margin: 0; padding: 10px 12px;
    border-radius: var(--nm-r-input);
    max-height: 340px; overflow: auto;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px; line-height: 1.55;
    white-space: pre; tab-size: 2;
}
.apilog-pre.is-wrap[b-aalub0mv5f] { white-space: pre-wrap; word-break: break-all; }
.apilog-pre.is-error[b-aalub0mv5f] { background: var(--nm-bad-soft); border-color: var(--nm-bad); color: var(--nm-bad); }

/* Modal phóng to — JSON dài đọc gần như toàn màn hình.
   Class truyền qua param nằm trên panel của COMPONENT ⇒ ::deep phải ĐỨNG ĐẦU, và cần 2 class
   để thắng .nm-modal-panel--lg { max-width: … }. */
[b-aalub0mv5f] .nm-modal-panel.apilog-modal--full {
    max-width: none;
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    max-height: none;
}
[b-aalub0mv5f] .nm-modal-panel.apilog-modal--full .apilog-pre { max-height: none; }

@media (max-width: 900px) {
    .nm-list-page[b-aalub0mv5f] { padding: 16px 14px 22px; }
    .apilog-search[b-aalub0mv5f] { flex: 1 1 100%; }
    .apilog-sel[b-aalub0mv5f] { flex: 1 1 46%; min-width: 0; }
    .apilog-sel--sort[b-aalub0mv5f] { margin-left: 0; }
    .apilog-sel[b-aalub0mv5f]  .nm-select { width: 100%; }
    .apilog-dates[b-aalub0mv5f] { flex: 1 1 100%; }
    [b-aalub0mv5f] .apilog-clear { margin-left: 0; }
}
/* /src/Features/Diagnostics/Pages/Manager/ApiStats.razor.rz.scp.css */
/* /manager/logs/api-stats — thống kê & đánh giá API vé máy bay.
   Khung (card/grid/badge/kpi) do primitive Nm* lo; file này chỉ style phần riêng của màn.
   Token-only (var(--nm-*)), không hex — giữ trùng tên class khung (.nm-list-*, .cell-*) với
   /manager/logs/api và /manager/logs/audit để cả cụm nhật ký nhìn như một hệ. */

.nm-list-page[b-oyalqmz746] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-oyalqmz746] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-oyalqmz746] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-oyalqmz746] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-oyalqmz746] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.apistat-stamp[b-oyalqmz746] { font-size: 12px; color: var(--nm-muted); }

/* ── Dải chuyển giữa các màn nhật ký ── */
.apistat-nav[b-oyalqmz746] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.apistat-nav[b-oyalqmz746]::-webkit-scrollbar { display: none; }

.apistat-nav__item[b-oyalqmz746] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--nm-r-input);
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.apistat-nav__item:hover[b-oyalqmz746] { background: var(--nm-surface-2); color: var(--nm-ink); }
.apistat-nav__item.is-current[b-oyalqmz746] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    cursor: default;
}

/* ── Bộ lọc ── */
.apistat-filters[b-oyalqmz746] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
}
.apistat-filters__lbl[b-oyalqmz746] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-muted);
    margin-right: 2px;
}
.apistat-filters__sep[b-oyalqmz746] { width: 1px; height: 18px; background: var(--nm-border); margin: 0 4px; }

.apistat-dates[b-oyalqmz746] { display: inline-flex; align-items: center; gap: 6px; }
.apistat-dates__sep[b-oyalqmz746] { color: var(--nm-muted); font-size: 12px; }
.apistat-sel[b-oyalqmz746] { min-width: 160px; }

/* ── Dải KPI ── */
.apistat-kpi__sub[b-oyalqmz746] {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
}
.apistat-kpi__sub.is-bad[b-oyalqmz746] { color: var(--nm-bad); }

/* ── Đầu mỗi khối nội dung ── */
.apistat-sect__hd[b-oyalqmz746] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--nm-border);
}
.apistat-sect__title[b-oyalqmz746] { margin: 0; font-size: 15px; font-weight: 700; color: var(--nm-ink); }
.apistat-sect__sub[b-oyalqmz746] { margin: 3px 0 0; font-size: 12.5px; color: var(--nm-muted); max-width: 80ch; }

/* ── Biểu đồ cột chồng ──
   Ba lớp mã hoá TRẠNG THÁI của lượt gọi (không phải danh mục) nên lấy đúng bộ màu trạng thái:
   xanh = có kết quả · tím = trả rỗng (không tốt cũng không lỗi) · đỏ = lỗi kỹ thuật. */
.apistat-chart[b-oyalqmz746] { padding: 14px 16px 4px; }
.apistat-chart svg[b-oyalqmz746] { width: 100%; height: auto; display: block; overflow: visible; }

.apistat-chart-grid[b-oyalqmz746], .apistat-chart-axis[b-oyalqmz746] { stroke: var(--nm-border); stroke-width: 1; }
.apistat-chart-hit[b-oyalqmz746] { fill: transparent; }

.apistat-chart-seg[b-oyalqmz746] { transition: opacity .12s ease; }
.apistat-chart-seg.is-ok[b-oyalqmz746] { fill: var(--nm-ok); }
.apistat-chart-seg.is-empty[b-oyalqmz746] { fill: var(--nm-violet); }
.apistat-chart-seg.is-fail[b-oyalqmz746] { fill: var(--nm-bad); }

/* Cột đang trỏ giữ nguyên màu, các cột còn lại mờ đi — đổi màu cột được trỏ sẽ phá mã hoá trạng thái. */
.apistat-chart:hover .apistat-chart-seg[b-oyalqmz746] { opacity: .45; }
.apistat-chart-bar:hover .apistat-chart-seg[b-oyalqmz746] { opacity: 1; }

.apistat-chart-tip[b-oyalqmz746] { opacity: 0; pointer-events: none; transition: opacity .1s ease; }
.apistat-chart-bar:hover .apistat-chart-tip[b-oyalqmz746] { opacity: 1; }
.apistat-chart-tip rect[b-oyalqmz746] { fill: var(--nm-ink); opacity: .94; }

.apistat-legend[b-oyalqmz746] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 4px 16px 14px;
}
.apistat-legend__item[b-oyalqmz746] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--nm-ink-2);
}
.apistat-dot[b-oyalqmz746] { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.apistat-dot.is-ok[b-oyalqmz746] { background: var(--nm-ok); }
.apistat-dot.is-empty[b-oyalqmz746] { background: var(--nm-violet); }
.apistat-dot.is-fail[b-oyalqmz746] { background: var(--nm-bad); }

.apistat-legend--inline[b-oyalqmz746] { padding: 0; gap: 14px; }

/* ── Khối so sánh kênh ──
   Bốn cột giữ NGUYÊN bề rộng ở mọi dòng để đọc dọc theo cột được; hẹp quá thì cuộn ngang chứ không
   co lại, vì co thì trục chung giữa các dòng lệch nhau và mất luôn tính so sánh. */
.apistat-cmp[b-oyalqmz746] { overflow-x: auto; padding: 4px 16px 12px; }

.apistat-cmp__head[b-oyalqmz746],
.apistat-cmp__row[b-oyalqmz746] {
    display: grid;
    grid-template-columns: 190px minmax(200px, 1fr) 300px 180px;
    align-items: center;
    gap: 14px;
    min-width: 900px;
}

.apistat-cmp__head[b-oyalqmz746] {
    padding: 8px 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--nm-muted);
    border-bottom: 1px solid var(--nm-border);
}

.apistat-cmp__row[b-oyalqmz746] {
    padding: 9px 0;
    border-bottom: 1px solid var(--nm-border);
}
.apistat-cmp__row:last-of-type[b-oyalqmz746] { border-bottom: none; }

.apistat-cmp__name[b-oyalqmz746] { display: inline-flex; align-items: center; gap: 8px; }
.apistat-cmp__cell[b-oyalqmz746] { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Bề rộng CỐ ĐỊNH: ô số nằm ngay sau thanh tỉ lệ, để nó co theo độ dài chữ thì mỗi dòng một
   độ dài thanh khác nhau — thanh 100% mà dài ngắn lệch nhau là hỏng hẳn tính so sánh. */
.apistat-cmp__num[b-oyalqmz746] {
    flex: 0 0 auto;
    min-width: 104px;
    text-align: right;
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Thanh tỉ lệ kết cục — cùng bộ màu với biểu đồ thời gian, hở 2px giữa các mảng. */
.apistat-mix[b-oyalqmz746] {
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    height: 10px;
    min-width: 90px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--nm-surface-2);
}
.apistat-mix__seg[b-oyalqmz746] { display: block; height: 100%; }
.apistat-mix__seg.is-ok[b-oyalqmz746] { background: var(--nm-ok); }
.apistat-mix__seg.is-empty[b-oyalqmz746] { background: var(--nm-violet); }
.apistat-mix__seg.is-fail[b-oyalqmz746] { background: var(--nm-bad); }

/* Dải trung vị → p95. Để MỘT sắc trung tính: "chậm hay không" đọc bằng vị trí so với vạch mốc,
   tô màu thêm là mã hoá lại đúng cái badge đánh giá đã nói. */
.apistat-speed[b-oyalqmz746] { width: 210px; height: 16px; flex: 0 0 auto; overflow: visible; }
.apistat-speed__track[b-oyalqmz746] { stroke: var(--nm-border); stroke-width: 2; stroke-linecap: round; }
.apistat-speed__range[b-oyalqmz746] { fill: var(--nm-ink-2); opacity: .55; }
.apistat-speed__p50[b-oyalqmz746] { fill: var(--nm-ink-2); }
.apistat-speed__mark[b-oyalqmz746] { stroke: var(--nm-warn); stroke-width: 1.5; stroke-dasharray: 3 2; }

/* Có vạch đáy để khoảng trống đọc ra là "mốc đó không gọi lượt nào", chứ không phải chưa vẽ xong. */
.apistat-spark[b-oyalqmz746] { width: 170px; height: 26px; flex: 0 0 auto; }
.apistat-spark__base[b-oyalqmz746] { stroke: var(--nm-border); stroke-width: 1; }
.apistat-spark__bar[b-oyalqmz746] { fill: var(--nm-ink-2); opacity: .5; }

.apistat-cmp__foot[b-oyalqmz746] {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 0 0;
    font-size: 11.5px;
    color: var(--nm-muted);
    min-width: 900px;
}
.apistat-cmp__axis[b-oyalqmz746] { display: inline-flex; align-items: center; gap: 6px; }
.apistat-mark[b-oyalqmz746] {
    width: 0;
    height: 12px;
    border-left: 1.5px dashed var(--nm-warn);
    display: inline-block;
}

/* ── Bảng ── */
.apistat-grid[b-oyalqmz746] { overflow-x: auto; }

/* <tr> do DataGrid render ⇒ neo vào .apistat-grid (thẻ của TRANG) rồi ::deep xuống. */
.apistat-grid[b-oyalqmz746]  .nm-grid__row.is-bad > td:first-child { box-shadow: inset 3px 0 0 var(--nm-bad); }
.apistat-grid[b-oyalqmz746]  .nm-grid__row.is-warn > td:first-child { box-shadow: inset 3px 0 0 var(--nm-warn); }

/* Ô trong bảng — cùng tên class với /manager/logs/api */
.cell-2line[b-oyalqmz746] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line--right[b-oyalqmz746] { align-items: flex-end; }

/* ★★ Chặn một ô nong rộng cả bảng.
   Mã kênh suy từ nhật ký có thể là chuỗi bất kỳ; đã gặp chuỗi 860 ký tự KHÔNG có khoảng trắng.
   Bảng để table-layout AUTO nên bề rộng cột trong Columns chỉ là gợi ý — bề rộng thật do nội dung
   quyết định, một token không ngắt được sẽ đẩy bảng rộng ra và hất mọi cột sau khỏi màn hình.

   Mấu chốt là `overflow-wrap: anywhere`: nó cho phép ngắt giữa token, nhờ vậy bề rộng tối thiểu của
   ô tụt xuống và bảng thôi giãn. `text-overflow: ellipsis` + `white-space: nowrap` KHÔNG cứu được —
   nowrap cấm ngắt nên token vẫn nguyên khối, dấu … chỉ che phần nhìn thấy chứ ô vẫn rộng như cũ.
   Ngắt xong thì kẹp lại 1 dòng cho khỏi cao lêu nghêu. Giá trị đủ xem bằng cách rê chuột (title). */
.apistat-clamp1[b-oyalqmz746] {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.cell-2line__main[b-oyalqmz746] {
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-ink);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.cell-2line__sub[b-oyalqmz746] {
    font-size: 11.5px;
    color: var(--nm-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apistat-code[b-oyalqmz746] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
/* Mã kênh là nút mở khối chi tiết — cần trông bấm được mà không phá nhịp của bảng,
   nên bỏ hết trang trí mặc định của <button> và chỉ giữ con trỏ + gạch chân khi rê chuột. */
.apistat-chbtn[b-oyalqmz746] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.apistat-chbtn:hover .cell-2line__main[b-oyalqmz746] { text-decoration: underline; }
.apistat-chbtn.is-open .cell-2line__main[b-oyalqmz746] { color: var(--nm-brand-700); }
.apistat-chbtn:focus-visible[b-oyalqmz746] {
    outline: 2px solid var(--nm-brand-700);
    outline-offset: 2px;
    border-radius: 4px;
}

.apistat-detail__hd[b-oyalqmz746] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.apistat-detail__hd .apistat-sect__title[b-oyalqmz746] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apistat-detail__close[b-oyalqmz746] {
    appearance: none;
    background: none;
    border: 0;
    padding: 4px;
    color: var(--nm-muted);
    cursor: pointer;
    line-height: 1;
}
.apistat-detail__close:hover[b-oyalqmz746] { color: var(--nm-ink); }
.apistat-detail__kpi[b-oyalqmz746] { padding: 0 16px 4px; }
.apistat-sect__hd--sub[b-oyalqmz746] { padding-top: 4px; }
.apistat-sect__title--sm[b-oyalqmz746] { font-size: 14px; }

.apistat-dim[b-oyalqmz746] { color: var(--nm-muted); font-size: 12.5px; }
.apistat-err[b-oyalqmz746] { color: var(--nm-bad); font-weight: 600; }

.apistat-ms[b-oyalqmz746] { font-size: 12.5px; color: var(--nm-ink-2); }
.apistat-ms.is-warn[b-oyalqmz746] { color: var(--nm-warn); font-weight: 600; }
.apistat-ms.is-bad[b-oyalqmz746] { color: var(--nm-bad); font-weight: 700; }
/* Vạch mở đầu mỗi nhóm lệnh trong bảng đo lệnh × hãng — thay cho việc lặp tên lệnh ở mọi dòng. */
[b-oyalqmz746] .apistat-row-group > td { border-top: 2px solid var(--nm-border); }

/* Câu giải thích đánh giá: cho xuống dòng thoải mái, đây là phần người đọc cần nhất ở bảng này. */
.apistat-why[b-oyalqmz746] { white-space: normal; line-height: 1.45; }

/* ── Đối chiếu với đơn thật ── */
.apistat-outcome[b-oyalqmz746] { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.apistat-outcome__row[b-oyalqmz746] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
}
.apistat-outcome__row i[b-oyalqmz746] { color: var(--nm-ok); font-size: 15px; line-height: 1.4; }
.apistat-outcome__row.is-warn i[b-oyalqmz746] { color: var(--nm-warn); }
.apistat-outcome__note[b-oyalqmz746] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--nm-muted);
    max-width: 90ch;
}

@media (max-width: 900px) {
    .nm-list-page[b-oyalqmz746] { padding: 16px 14px 22px; }
    .apistat-sel[b-oyalqmz746] { min-width: 140px; }
}
/* /src/Features/Diagnostics/Pages/Manager/AuditLogs.razor.rz.scp.css */
/* /manager/logs/audit — nhật ký hành động nghiệp vụ.
   Chrome (card/grid/badge/pager/drawer/modal) do primitive Nm* lo; file này chỉ style phần riêng
   của màn. Token-only (var(--nm-*)), không hex — giữ trùng tên class khung (.nm-list-*, .cell-*)
   với các màn quản trị khác để cả cụm nhìn như một hệ. */

.nm-list-page[b-gas4sl49nl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-gas4sl49nl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-gas4sl49nl] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-gas4sl49nl] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-gas4sl49nl] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải chuyển giữa 3 màn nhật ký ── */
.audlog-nav[b-gas4sl49nl] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.audlog-nav[b-gas4sl49nl]::-webkit-scrollbar { display: none; }

.audlog-nav__item[b-gas4sl49nl] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--nm-r-input);
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.audlog-nav__item:hover[b-gas4sl49nl] { background: var(--nm-surface-2); color: var(--nm-ink); }
.audlog-nav__item.is-current[b-gas4sl49nl] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    cursor: default;
}

/* ── Bộ lọc ── */
.audlog-filters[b-gas4sl49nl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nm-border);
}
.audlog-filters__row[b-gas4sl49nl] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.audlog-filters__row--quick[b-gas4sl49nl] { gap: 6px; }

.audlog-search[b-gas4sl49nl] { flex: 1 1 280px; min-width: 220px; }
.audlog-sel[b-gas4sl49nl] { min-width: 168px; }
.audlog-dates[b-gas4sl49nl] { display: inline-flex; align-items: center; gap: 6px; }
.audlog-dates__sep[b-gas4sl49nl] { color: var(--nm-muted); font-size: 12px; }

.audlog-quick-lbl[b-gas4sl49nl] {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-muted);
    margin-right: 2px;
}

.audlog-tags[b-gas4sl49nl] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 6px; }
[b-gas4sl49nl] .audlog-clear { margin-left: auto; }

/* ── Ô trong bảng ── */
.cell-2line[b-gas4sl49nl] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-gas4sl49nl] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cell-2line__sub[b-gas4sl49nl] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.audlog-mono[b-gas4sl49nl] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Tên bảng/mã kỹ thuật — pill mono để tách khỏi chữ tiếng Việt cạnh nó */
.audlog-code[b-gas4sl49nl] {
    display: inline-block;
    max-width: 100%;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mô tả — cắt 2 dòng, phần thừa xem ở panel chi tiết */
.audlog-desc[b-gas4sl49nl] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--nm-ink-2);
    min-width: 220px;
}

/* ── Chân bảng: tóm tắt + số dòng/trang + pager ── */
.audlog-foot[b-gas4sl49nl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--nm-border);
}
.audlog-foot__left[b-gas4sl49nl] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audlog-foot__sep[b-gas4sl49nl] { width: 1px; height: 16px; background: var(--nm-border); }

.audlog-range[b-gas4sl49nl] { font-size: 12.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

.audlog-psize[b-gas4sl49nl] { display: inline-flex; align-items: center; gap: 6px; }
.audlog-psize > span[b-gas4sl49nl] { font-size: 12.5px; color: var(--nm-muted); }
.audlog-psize[b-gas4sl49nl]  .nm-select { min-width: 74px; }

/* ── Panel chi tiết ── */
.audlog-detail[b-gas4sl49nl] { display: flex; flex-direction: column; gap: 16px; }
.audlog-detail__hd[b-gas4sl49nl] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.audlog-detail__when[b-gas4sl49nl] {
    font-size: 12.5px; color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.audlog-detail__sub[b-gas4sl49nl] { display: block; margin-top: 3px; font-size: 12px; color: var(--nm-muted); }
[b-gas4sl49nl] .audlog-detail__wide { grid-column: 1 / -1; }

.audlog-detail__none[b-gas4sl49nl] {
    display: flex; gap: 8px; align-items: flex-start; margin: 0;
    padding: 10px 12px; border-radius: var(--nm-r-input);
    background: var(--nm-info-soft); color: var(--nm-info); font-size: 12.5px;
}

.audlog-json-block[b-gas4sl49nl] { display: flex; flex-direction: column; gap: 6px; }
.audlog-json-hd[b-gas4sl49nl] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--nm-muted);
}
.audlog-json[b-gas4sl49nl] {
    margin: 0; padding: 10px 12px;
    border-radius: var(--nm-r-input);
    max-height: 340px; overflow: auto;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
}

/* ── Bản kê phạm vi ── */
.audlog-scope__lead[b-gas4sl49nl] { margin: 0 0 12px; font-size: 13px; color: var(--nm-muted); }

@media (max-width: 900px) {
    .nm-list-page[b-gas4sl49nl] { padding: 16px 14px 22px; }
    .audlog-search[b-gas4sl49nl] { flex: 1 1 100%; }
    .audlog-sel[b-gas4sl49nl] { flex: 1 1 46%; min-width: 0; }
    .audlog-sel[b-gas4sl49nl]  .nm-select { width: 100%; }
    .audlog-dates[b-gas4sl49nl] { flex: 1 1 100%; }
    [b-gas4sl49nl] .audlog-clear { margin-left: 0; }
}
/* /src/Features/Diagnostics/Pages/Manager/WorkflowDetail.razor.rz.scp.css */
/* ═══ Workflow Detail — Manager Dashboard v4 ═══ */
.workflow-root[b-xdptulgih9] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.workflow-mono[b-xdptulgih9] { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Hero ── */
.workflow-hero[b-xdptulgih9] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .workflow-hero h1[b-xdptulgih9] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.2;
    }

.workflow-hero-meta[b-xdptulgih9] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--d-ink-3);
    font-size: 12.5px;
    flex-wrap: wrap;
}

    .workflow-hero-meta .dot[b-xdptulgih9] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.workflow-hero-actions[b-xdptulgih9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.workflow-btn[b-xdptulgih9] {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
    font-family: inherit;
}

    .workflow-btn:hover[b-xdptulgih9] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .workflow-btn:disabled[b-xdptulgih9] {
        opacity: .5;
        cursor: not-allowed;
    }

.workflow-btn-accent[b-xdptulgih9] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .workflow-btn-accent:hover[b-xdptulgih9] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.workflow-btn-ghost[b-xdptulgih9] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .workflow-btn-ghost:hover[b-xdptulgih9] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.workflow-btn-sm[b-xdptulgih9] {
    height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
}

/* ── Pill ── */
.workflow-pill[b-xdptulgih9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    line-height: 1.5;
}

    .workflow-pill.good[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-good) 12%, white);
        color: #166534;
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

    .workflow-pill.warn[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-warn) 12%, white);
        color: #92400e;
        border-color: color-mix(in srgb, var(--d-warn) 25%, white);
    }

    .workflow-pill.danger[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-danger) 10%, white);
        color: #991b1b;
        border-color: color-mix(in srgb, var(--d-danger) 25%, white);
    }

    .workflow-pill.accent[b-xdptulgih9] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 25%, white);
    }

/* ── Card ── */
.workflow-card[b-xdptulgih9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.workflow-card-hd[b-xdptulgih9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .workflow-card-hd .titles h3[b-xdptulgih9] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .workflow-card-hd .titles small[b-xdptulgih9] {
        display: block;
        margin-top: 3px;
        font-size: 11.5px;
        color: var(--d-ink-3);
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
    }

/* ── Loading / banners ── */
.workflow-loading[b-xdptulgih9] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.workflow-spinner[b-xdptulgih9] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: workflow-spin-b-xdptulgih9 .9s linear infinite;
}

@keyframes workflow-spin-b-xdptulgih9 {
    to { transform: rotate(360deg); }
}

.workflow-not-found[b-xdptulgih9] {
    text-align: center;
    padding: 64px 16px;
    color: var(--d-ink-3);
}

.workflow-banner[b-xdptulgih9] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 12.5px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
}

    .workflow-banner.ok[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-good) 10%, white);
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
        color: #166534;
    }

    .workflow-banner.err[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-danger) 8%, white);
        border-color: color-mix(in srgb, var(--d-danger) 25%, white);
        color: #991b1b;
    }

/* ── Scope item ── */
.workflow-scope-list[b-xdptulgih9] {
    display: flex;
    flex-direction: column;
}

.workflow-scope[b-xdptulgih9] {
    padding: 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .workflow-scope:last-child[b-xdptulgih9] {
        border-bottom: 0;
    }

.workflow-scope-hd[b-xdptulgih9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.workflow-scope-info[b-xdptulgih9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.workflow-scope-prio[b-xdptulgih9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--d-line);
    font-variant-numeric: tabular-nums;
}

.workflow-scope-title[b-xdptulgih9] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.3;
}

.workflow-scope-tags[b-xdptulgih9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.workflow-scope-actions[b-xdptulgih9] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.workflow-icobtn[b-xdptulgih9] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .workflow-icobtn:hover[b-xdptulgih9] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .workflow-icobtn.is-danger:hover[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-danger) 10%, white);
        color: var(--d-danger);
        border-color: color-mix(in srgb, var(--d-danger) 30%, white);
    }

    .workflow-icobtn.is-accent:hover[b-xdptulgih9] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 30%, white);
    }

/* ── Conditions chips ── */
.workflow-cond[b-xdptulgih9] {
    margin: 10px 0 14px 40px;
    padding: 12px 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    font-size: 12px;
}

@media (min-width: 768px) {
    .workflow-cond[b-xdptulgih9] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.workflow-cond-lbl[b-xdptulgih9] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: block;
    margin-bottom: 3px;
}

.workflow-cond-val[b-xdptulgih9] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

    .workflow-cond-val.danger[b-xdptulgih9] {
        color: var(--d-danger);
    }

/* ── Steps timeline ── */
.workflow-steps[b-xdptulgih9] {
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

    .workflow-steps[b-xdptulgih9]::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 4px;
        bottom: 4px;
        width: 2px;
        background: var(--d-line);
        border-radius: 1px;
    }

.workflow-step-card[b-xdptulgih9] {
    position: relative;
    padding: 12px 14px 12px 46px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

    .workflow-step-card.is-current[b-xdptulgih9] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 35%, white);
        box-shadow: 0 1px 2px rgba(234,88,12,.10), 0 4px 12px -4px rgba(234,88,12,.18);
    }

    .workflow-step-card.is-done[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-good) 8%, white);
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

.workflow-step-num[b-xdptulgih9] {
    position: absolute;
    left: 4px;
    top: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d-surface);
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid var(--d-line);
    font-variant-numeric: tabular-nums;
}

.workflow-step-card.is-current .workflow-step-num[b-xdptulgih9] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(234,88,12,.35);
}

.workflow-step-card.is-done .workflow-step-num[b-xdptulgih9] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}

.workflow-step-hd[b-xdptulgih9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.workflow-step-name[b-xdptulgih9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.3;
}

.workflow-step-tags[b-xdptulgih9] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.workflow-step-tag[b-xdptulgih9] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    font-variant-numeric: tabular-nums;
}

    .workflow-step-tag.accent[b-xdptulgih9] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 25%, white);
    }

    .workflow-step-tag.good[b-xdptulgih9] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

    .workflow-step-tag.warn[b-xdptulgih9] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: color-mix(in srgb, var(--d-warn) 25%, white);
    }

    .workflow-step-tag.danger[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-danger) 10%, white);
        color: #991b1b;
        border-color: color-mix(in srgb, var(--d-danger) 25%, white);
    }

.workflow-approver-list[b-xdptulgih9] {
    margin-top: 8px;
}

    .workflow-approver-list .lbl[b-xdptulgih9] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: 4px;
        display: block;
    }

    .workflow-approver-list .chips[b-xdptulgih9] {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

.workflow-approver-chip[b-xdptulgih9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--d-ink-2);
}

    .workflow-approver-chip svg[b-xdptulgih9] {
        color: var(--d-ink-4);
        flex-shrink: 0;
    }

.workflow-step-empty[b-xdptulgih9] {
    margin: 8px 0 0 40px;
    font-size: 11.5px;
    color: var(--d-ink-4);
    font-style: italic;
}

.workflow-empty[b-xdptulgih9] {
    padding: 40px 16px;
    text-align: center;
    color: var(--d-ink-3);
}

    .workflow-empty svg[b-xdptulgih9] {
        color: var(--d-ink-4);
        margin-bottom: 8px;
    }

    .workflow-empty p[b-xdptulgih9] {
        margin: 0;
        font-size: 12.5px;
    }

/* ── Modal ── */
.workflow-modal-backdrop[b-xdptulgih9] {
    position: fixed;
    inset: 0;
    background: rgba(28,25,23,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.workflow-modal[b-xdptulgih9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .workflow-modal.lg[b-xdptulgih9] {
        max-width: 680px;
    }

.workflow-modal-hd[b-xdptulgih9] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .workflow-modal-hd h2[b-xdptulgih9] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .workflow-modal-hd small[b-xdptulgih9] {
        display: block;
        margin-top: 2px;
        font-size: 11.5px;
        color: var(--d-ink-3);
        font-weight: 400;
    }

.workflow-modal-close[b-xdptulgih9] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    cursor: pointer;
    font-size: 14px;
    display: grid;
    place-items: center;
}

    .workflow-modal-close:hover[b-xdptulgih9] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.workflow-modal-bd[b-xdptulgih9] {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.workflow-modal-ft[b-xdptulgih9] {
    padding: 12px 18px;
    background: var(--d-bg);
    border-top: 1px solid var(--d-line-2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Form ── */
.workflow-label[b-xdptulgih9] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

    .workflow-label .req[b-xdptulgih9] {
        color: var(--d-danger);
    }

.workflow-input[b-xdptulgih9],
.workflow-select[b-xdptulgih9],
.workflow-textarea[b-xdptulgih9] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.workflow-textarea[b-xdptulgih9] {
    height: auto;
    padding: 8px 12px;
    min-height: 80px;
    resize: vertical;
}

    .workflow-input:focus[b-xdptulgih9],
    .workflow-select:focus[b-xdptulgih9],
    .workflow-textarea:focus[b-xdptulgih9] {
        outline: 0;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234,88,12,.12);
    }

.workflow-grid-2[b-xdptulgih9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .workflow-grid-2[b-xdptulgih9] {
        grid-template-columns: 1fr 1fr;
    }
}

.workflow-fieldset[b-xdptulgih9] {
    padding: 12px 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .workflow-fieldset .legend[b-xdptulgih9] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .workflow-fieldset.danger[b-xdptulgih9] {
        background: color-mix(in srgb, var(--d-danger) 5%, white);
        border-color: color-mix(in srgb, var(--d-danger) 20%, white);
    }

.workflow-checkbox-row[b-xdptulgih9] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--d-ink);
}

    .workflow-checkbox-row input[type=checkbox][b-xdptulgih9] {
        width: 15px;
        height: 15px;
        accent-color: var(--d-accent);
        cursor: pointer;
    }

/* Toggle switch */
.workflow-toggle[b-xdptulgih9] {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--d-line);
    border: 0;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    padding: 0;
}

    .workflow-toggle.is-on[b-xdptulgih9] {
        background: var(--d-accent-grad);
    }

    .workflow-toggle[b-xdptulgih9]::after {
        content: '';
        position: absolute;
        left: 3px;
        top: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: transform .15s;
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }

    .workflow-toggle.is-on[b-xdptulgih9]::after {
        transform: translateX(18px);
    }

.workflow-toggle-row[b-xdptulgih9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 22px;
}

    .workflow-toggle-row .lbl[b-xdptulgih9] {
        font-size: 12.5px;
        color: var(--d-ink-2);
        font-weight: 500;
    }

        .workflow-toggle-row .lbl.is-on[b-xdptulgih9] {
            color: var(--d-accent);
            font-weight: 600;
        }

/* Approver row inside step modal */
.workflow-approver-row[b-xdptulgih9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.workflow-approver-rows[b-xdptulgih9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workflow-link-add[b-xdptulgih9] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-accent);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

    .workflow-link-add:hover[b-xdptulgih9] {
        background: var(--d-accent-soft);
    }
/* /src/Features/Diagnostics/Pages/Manager/WorkflowsIndex.razor.rz.scp.css */
/* ═══ Workflows Index — Manager Dashboard v4 ═══ */
.workflows-root[b-qczc6bqnz3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
    min-height: calc(100vh - 64px);
}

.workflows-hero[b-qczc6bqnz3] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .workflows-hero h1[b-qczc6bqnz3] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .workflows-hero h1 em[b-qczc6bqnz3] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.workflows-hero-meta[b-qczc6bqnz3] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--d-ink-3);
    font-size: 12.5px;
    flex-wrap: wrap;
}

    .workflows-hero-meta .dot[b-qczc6bqnz3] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.workflows-card[b-qczc6bqnz3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

.workflows-loading[b-qczc6bqnz3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.workflows-spinner[b-qczc6bqnz3] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: workflows-spin-b-qczc6bqnz3 .9s linear infinite;
}

@keyframes workflows-spin-b-qczc6bqnz3 {
    to { transform: rotate(360deg); }
}

.workflows-empty[b-qczc6bqnz3] {
    background: var(--d-surface);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, white);
    border-radius: var(--d-r);
    padding: 24px;
    text-align: center;
}

    .workflows-empty .title[b-qczc6bqnz3] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-danger);
    }

    .workflows-empty .hint[b-qczc6bqnz3] {
        font-size: 12px;
        color: var(--d-ink-3);
        margin-top: 4px;
    }
/* /src/Features/Esim/Pages/Ca/CaEsim.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CaEsim — chuẩn nm-list (Nm* UI-kit, token-only, scoped).
   Shell + KPI + toolbar lọc + tab local/regional + grid card gói.
   ═══════════════════════════════════════════════════════════════ */
.nm-list-page[b-caw3iq5qmd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-caw3iq5qmd] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-caw3iq5qmd] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-caw3iq5qmd] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-sub b[b-caw3iq5qmd] { color: var(--nm-ink); }

/* ── KPI strip ── */
.nm-kpis[b-caw3iq5qmd] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ── toolbar lọc: điểm đến + từ khoá + loại gói ── */
.nm-list-toolbar[b-caw3iq5qmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-dest[b-caw3iq5qmd] { width: 240px; }
.tb-search[b-caw3iq5qmd] { flex: 1; min-width: 200px; max-width: 340px; }
.tb-plan[b-caw3iq5qmd] { width: 180px; }

/* ── chip châu lục (tab local) ── */
.esim-continents[b-caw3iq5qmd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ── grid card nhóm gói ── */
.esim-grid[b-caw3iq5qmd] {
    display: grid;
    /* Đồng bộ cỡ item với /ca/tours (catos-grid): 250px desktop / 190px mobile */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.esim-item[b-caw3iq5qmd] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
    text-decoration: none;
    color: var(--nm-ink);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.esim-item:hover[b-caw3iq5qmd] {
    border-color: var(--nm-border-strong);
    box-shadow: var(--nm-shadow);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--nm-ink);
}

.esim-item__media[b-caw3iq5qmd] {
    position: relative;
    width: 100%;
    height: 130px;
    background: var(--nm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.esim-item__img[b-caw3iq5qmd] { width: 100%; height: 100%; object-fit: cover; display: block; }
.esim-item__flag[b-caw3iq5qmd] { font-size: 52px; line-height: 1; }
.esim-item__icon[b-caw3iq5qmd] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 64px;
    opacity: .85;
    pointer-events: none;
}
.esim-item__media[b-caw3iq5qmd]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .10);
    pointer-events: none;
}

.esim-item__body[b-caw3iq5qmd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    flex: 1;
}
.esim-item__tags[b-caw3iq5qmd] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esim-item__name[b-caw3iq5qmd] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.esim-item__sub[b-caw3iq5qmd] { font-size: 12px; color: var(--nm-muted); }
.esim-item__foot[b-caw3iq5qmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--nm-border);
}
.esim-item__price[b-caw3iq5qmd] {
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-brand-600);
    font-variant-numeric: tabular-nums;
}
.esim-item__count[b-caw3iq5qmd] { font-size: 11px; color: var(--nm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── skeleton khi tải ── */
.esim-skel[b-caw3iq5qmd] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}
.esim-skel__body[b-caw3iq5qmd] { padding: 12px 14px 14px; }

.nm-list-pager[b-caw3iq5qmd] { margin-top: 14px; }

/* ── responsive ── */
@media (max-width: 900px) {
    .nm-kpis[b-caw3iq5qmd] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

@media (max-width: 640px) {
    .nm-list-page[b-caw3iq5qmd] { padding: 14px 14px 20px; }
    .nm-kpis[b-caw3iq5qmd] { grid-template-columns: 1fr 1fr; }
    .tb-dest[b-caw3iq5qmd], .tb-search[b-caw3iq5qmd], .tb-plan[b-caw3iq5qmd] { width: 100%; max-width: none; flex: none; }
    .esim-grid[b-caw3iq5qmd] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .esim-item__media[b-caw3iq5qmd] { height: 110px; }
}
/* /src/Features/Esim/Pages/Ca/CaEsimCountry.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CaEsimCountry — chuẩn nm-list, bố cục 2 cột quen thuộc:
   media card (trái) · card cấu hình + CTA (phải), spec card
   full-width bên dưới. UI polish: thẻ tên trên ảnh, thẻ số liệu,
   khối tổng cộng nổi, lưới thông số icon, thanh đặt nhanh mobile.
   Token-only (--nm-*), Nm* primitives.
   ═══════════════════════════════════════════════════════════════ */
.nm-list-page[b-klftmn6x4t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-klftmn6x4t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-klftmn6x4t] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-klftmn6x4t] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-klftmn6x4t] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.esc-flag[b-klftmn6x4t] { font-size: 22px; line-height: 1; margin-right: 2px; }

/* ── layout 2 cột: media + cấu hình ── */
.esc-layout[b-klftmn6x4t] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* ── media card: ảnh + thẻ tên + thẻ số liệu ── */
.esc-media[b-klftmn6x4t] {
    position: relative;
    width: 100%;
    height: 240px;
    background: var(--nm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.esc-media__img[b-klftmn6x4t] { width: 100%; height: 100%; object-fit: cover; display: block; }
.esc-media__flag[b-klftmn6x4t] { font-size: 90px; line-height: 1; }
.esc-media[b-klftmn6x4t]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 40, 0) 55%, rgba(16, 24, 40, .38) 100%);
    pointer-events: none;
}
.esc-media-tag[b-klftmn6x4t] {
    position: absolute; left: 12px; bottom: 12px; z-index: 1;
    display: flex; align-items: center; gap: 7px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    padding: 5px 12px 5px 8px;
    box-shadow: var(--nm-shadow);
}
.esc-media-tag__flag[b-klftmn6x4t] { font-size: 17px; line-height: 1; }
.esc-media-tag__name[b-klftmn6x4t] { font-weight: 700; font-size: 13px; color: var(--nm-ink); }

/* thẻ số liệu danh mục (số gói · dung lượng · tốc độ) */
.esc-media-info[b-klftmn6x4t] {
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 14px 16px 16px;
}
.esc-stat[b-klftmn6x4t] {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 13px 7px 8px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
}
.esc-stat-ic[b-klftmn6x4t] {
    flex: none; width: 30px; height: 30px; border-radius: 8px;
    background: var(--nm-surface); border: 1px solid var(--nm-brand-100);
    display: grid; place-items: center; color: var(--nm-brand-500); font-size: 15px;
}
.esc-stat-txt[b-klftmn6x4t] { display: flex; flex-direction: column; line-height: 1.1; }
.esc-stat-txt b[b-klftmn6x4t] { font-size: 14px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.esc-stat-txt span[b-klftmn6x4t] { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--nm-muted); }

/* ── tiêu đề card (fragment của page → scoped trực tiếp) ── */
.esc-card-title[b-klftmn6x4t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
}
.esc-card-title i[b-klftmn6x4t] { color: var(--nm-brand-500); }
.esc-card-title small[b-klftmn6x4t] { font-weight: 500; font-size: 12px; color: var(--nm-muted); margin-left: 2px; }

/* ── cấu hình gói ── */
.esc-config[b-klftmn6x4t] { display: flex; flex-direction: column; gap: 14px; }

.esc-row[b-klftmn6x4t] { display: flex; align-items: flex-start; gap: 12px; }
.esc-row__lbl[b-klftmn6x4t] {
    min-width: 92px;
    padding-top: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}
.esc-row__body[b-klftmn6x4t] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }

/* Tóm tắt lựa chọn + tổng cộng — 1 khối nhấn brand, giá không bao giờ wrap */
.esc-summary[b-klftmn6x4t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
}
.esc-summary__facts[b-klftmn6x4t] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; font-weight: 600; color: var(--nm-ink-2);
}
.esc-summary__fact[b-klftmn6x4t] { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.esc-summary__fact i[b-klftmn6x4t] { color: var(--nm-brand-500); font-size: 13px; }
.esc-summary__dot[b-klftmn6x4t] { color: var(--nm-brand-300); }
.esc-total[b-klftmn6x4t] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.esc-total__lbl[b-klftmn6x4t] {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--nm-muted);
}
.esc-total__val[b-klftmn6x4t] {
    font-size: 22px; font-weight: 800; color: var(--nm-brand-600);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
    line-height: 1.1;
}

.esc-cta-row[b-klftmn6x4t]  .esc-cta { width: 100%; justify-content: center; }

/* ── card thông số gói đã chọn ── */
.esc-spec-head[b-klftmn6x4t] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.esc-spec-name[b-klftmn6x4t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}
.esc-spec-sub[b-klftmn6x4t] { font-size: 12.5px; color: var(--nm-muted); }

.esc-spec-stats[b-klftmn6x4t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

/* lưới thông số icon — dễ quét hơn desc-list phẳng */
.esc-specs[b-klftmn6x4t] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.esc-spec-item[b-klftmn6x4t] {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--nm-border);
}
.esc-spec-item--full[b-klftmn6x4t] { grid-column: 1 / -1; align-items: flex-start; }
.esc-spec-ic[b-klftmn6x4t] {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    background: var(--nm-surface-2); border: 1px solid var(--nm-border);
    display: grid; place-items: center; color: var(--nm-brand-500); font-size: 15px;
}
.esc-spec-txt[b-klftmn6x4t] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.esc-spec-lbl[b-klftmn6x4t] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nm-muted); }
.esc-spec-val[b-klftmn6x4t] { font-size: 13px; font-weight: 600; color: var(--nm-ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.esc-spec-val--wrap[b-klftmn6x4t] { font-weight: 500; line-height: 1.5; }

.esc-coverage[b-klftmn6x4t] {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding: 12px 14px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2); border: 1px solid var(--nm-border);
    font-size: 13px; color: var(--nm-ink-2);
}
.esc-coverage i[b-klftmn6x4t] { color: var(--nm-brand-500); font-size: 16px; }
.esc-coverage b[b-klftmn6x4t] { color: var(--nm-ink); }

/* ── Thanh đặt nhanh (chỉ màn nhỏ) ── */
.esc-mbar[b-klftmn6x4t] { display: none; }

/* ── responsive ── */
@media (max-width: 900px) {
    .esc-layout[b-klftmn6x4t] { grid-template-columns: 1fr; }
    .esc-media[b-klftmn6x4t] { height: 200px; }

    /* Thanh đặt nhanh nổi ở đáy — luôn trong tầm tay khi cuộn */
    .esc-mbar[b-klftmn6x4t] {
        display: flex; align-items: center; gap: 10px;
        position: sticky; bottom: 12px; z-index: 20;
        padding: 9px 10px 9px 4px;
        background: var(--nm-surface);
        border: 1px solid var(--nm-border);
        border-radius: 14px;
        box-shadow: var(--nm-shadow-pop);
    }
    .esc-mbar-info[b-klftmn6x4t] { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-left: 12px; }
    .esc-mbar-lbl[b-klftmn6x4t] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--nm-muted); }
    .esc-mbar-val[b-klftmn6x4t] { font-size: 17px; font-weight: 800; color: var(--nm-brand-600); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .esc-mbar[b-klftmn6x4t]  .esc-mbar-buy { flex: 0 0 auto; min-width: 150px; justify-content: center; }
}

@media (max-width: 640px) {
    .nm-list-page[b-klftmn6x4t] { padding: 14px 14px 20px; }
    .esc-row[b-klftmn6x4t] { flex-direction: column; gap: 6px; }
    .esc-row__lbl[b-klftmn6x4t] { padding-top: 0; }
    .esc-summary[b-klftmn6x4t] { flex-direction: column; align-items: stretch; }
    .esc-total[b-klftmn6x4t] { align-items: flex-start; }
    .esc-specs[b-klftmn6x4t] { grid-template-columns: 1fr; }
}
/* /src/Features/Esim/Pages/Manager/ESimCountry.razor.rz.scp.css */
/* ESimCountry — Manager Dashboard v4 — prefix: esc- */
.esc-root[b-bd631meht0] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-info: #2563eb;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.esc-back[b-bd631meht0] { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--d-ink-3); text-decoration: none; transition: color .12s; }
.esc-back:hover[b-bd631meht0] { color: var(--d-accent); }

.esc-hero[b-bd631meht0] { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.esc-hero-flag[b-bd631meht0] { width: 48px; height: 48px; border-radius: 12px; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.esc-hero h1[b-bd631meht0] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.2; }
.esc-hero-meta[b-bd631meht0] { margin-top: 4px; font-size: 12.5px; color: var(--d-ink-3); }

.esc-card[b-bd631meht0] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.esc-card-pad[b-bd631meht0] { padding: 18px; }

.esc-content[b-bd631meht0] { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 768px) { .esc-content[b-bd631meht0] { flex-direction: row; } }
.esc-image-wrap[b-bd631meht0] { position: relative; width: 100%; height: 220px; border-radius: var(--d-r); overflow: hidden; background: var(--d-surface-2); flex-shrink: 0; }
@media (min-width: 768px) { .esc-image-wrap[b-bd631meht0] { width: 360px; height: 280px; } }
.esc-image-wrap img.esc-bg[b-bd631meht0] { width: 100%; height: 100%; object-fit: cover; }
.esc-image-fallback[b-bd631meht0] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 110px; background: var(--d-accent-grad-soft); }
.esc-image-overlay[b-bd631meht0] { position: absolute; inset: 0; background: rgba(0,0,0,0.15); pointer-events: none; }
.esc-image-icon[b-bd631meht0] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 130px; height: 90px; opacity: 0.85; pointer-events: none; }

.esc-info[b-bd631meht0] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.esc-info-list[b-bd631meht0] { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--d-ink-2); margin: 0; padding: 0; list-style: none; }
.esc-info-list li b[b-bd631meht0] { color: var(--d-ink); font-weight: 600; }

.esc-section[b-bd631meht0] { display: flex; flex-direction: column; gap: 6px; }
.esc-section-lbl[b-bd631meht0] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.esc-pill-row[b-bd631meht0] { display: flex; flex-wrap: wrap; gap: 6px; }
.esc-pill[b-bd631meht0] { padding: 6px 12px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); font-size: 12.5px; color: var(--d-ink-2); cursor: pointer; transition: background .12s, border-color .12s; }
.esc-pill:hover[b-bd631meht0] { background: var(--d-surface-2); }
.esc-pill.is-active[b-bd631meht0] { background: var(--d-accent-soft); color: var(--d-accent); border-color: color-mix(in srgb, var(--d-accent) 35%, #fff); font-weight: 600; }

.esc-qty[b-bd631meht0] { display: inline-flex; align-items: center; border: 1px solid var(--d-line); border-radius: 8px; overflow: hidden; }
.esc-qty button[b-bd631meht0] { width: 32px; height: 34px; border: 0; background: transparent; color: var(--d-ink-2); cursor: pointer; font-size: 16px; }
.esc-qty button:hover[b-bd631meht0] { background: var(--d-accent-soft); color: var(--d-accent); }
.esc-qty span[b-bd631meht0] { width: 44px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }

.esc-total-row[b-bd631meht0] { display: flex; align-items: baseline; gap: 10px; padding-top: 4px; }
.esc-total-lbl[b-bd631meht0] { font-size: 14px; color: var(--d-ink-3); }
.esc-total-val[b-bd631meht0] { font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 700; color: var(--d-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.esc-msg[b-bd631meht0] { padding: 8px 12px; border-radius: var(--d-r); font-size: 14px; }
.esc-msg.ok[b-bd631meht0] { background: color-mix(in srgb, var(--d-good) 10%, #fff); color: color-mix(in srgb, var(--d-good) 80%, #000); border: 1px solid color-mix(in srgb, var(--d-good) 30%, #fff); }
.esc-msg.err[b-bd631meht0] { background: color-mix(in srgb, #dc2626 10%, #fff); color: #b91c1c; border: 1px solid color-mix(in srgb, #dc2626 30%, #fff); }

.esc-cta[b-bd631meht0] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--d-r); background: var(--d-accent-grad); color: #fff; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); transition: background .12s; }
.esc-cta:hover[b-bd631meht0] { background: var(--d-accent-grad-hover); }
.esc-cta:disabled[b-bd631meht0] { opacity: 0.5; cursor: not-allowed; }
.esc-cta svg[b-bd631meht0] { width: 18px; height: 18px; }

.esc-spec-hd[b-bd631meht0] { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line-2); margin-bottom: 14px; }
.esc-spec-title[b-bd631meht0] { font-family: 'Inter Tight','Inter',sans-serif; font-size: 18px; font-weight: 600; color: var(--d-ink); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.esc-spec-badge[b-bd631meht0] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--d-info) 10%, #fff); color: var(--d-info); font-size: 10.5px; font-weight: 700; }
.esc-spec-sub[b-bd631meht0] { font-size: 12.5px; color: var(--d-ink-3); }
.esc-spec-stats[b-bd631meht0] { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 8px; }
.esc-spec-stat[b-bd631meht0] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.esc-spec-stat-lbl[b-bd631meht0] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.esc-spec-stat-val[b-bd631meht0] { font-size: 14px; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.esc-spec-stat-val.accent[b-bd631meht0] { color: var(--d-accent); }
.esc-spec-grid[b-bd631meht0] { display: grid; grid-template-columns: 1fr; gap: 10px 28px; font-size: 14px; }
@media (min-width: 768px) { .esc-spec-grid[b-bd631meht0] { grid-template-columns: 1fr 1fr; } }
.esc-spec-grid > div span:first-child[b-bd631meht0] { font-weight: 600; color: var(--d-ink-2); margin-right: 4px; }
.esc-spec-grid > div span:nth-child(2)[b-bd631meht0] { color: var(--d-ink); }
.esc-tag[b-bd631meht0] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.esc-tag.info[b-bd631meht0] { background: color-mix(in srgb, var(--d-info) 10%, #fff); color: var(--d-info); }
.esc-tag.good[b-bd631meht0] { background: color-mix(in srgb, var(--d-good) 12%, #fff); color: color-mix(in srgb, var(--d-good) 80%, #000); }
.esc-tag.muted[b-bd631meht0] { background: var(--d-surface-2); color: var(--d-ink-3); }
.esc-tag.accent[b-bd631meht0] { background: var(--d-accent-soft); color: var(--d-accent); }

.esc-skeleton[b-bd631meht0] { display: flex; flex-direction: column; gap: 16px; }
.esc-sk-row[b-bd631meht0] { display: flex; gap: 16px; flex-direction: column; }
@media (min-width: 768px) { .esc-sk-row[b-bd631meht0] { flex-direction: row; } }
.esc-sk[b-bd631meht0] { background: var(--d-surface-2); border-radius: 8px; }
.esc-sk-img[b-bd631meht0] { width: 100%; height: 220px; }
@media (min-width: 768px) { .esc-sk-img[b-bd631meht0] { width: 360px; height: 280px; } }
.esc-sk-line[b-bd631meht0] { height: 12px; border-radius: 6px; }
.esc-sk-h[b-bd631meht0] { height: 22px; border-radius: 6px; }
.esc-sk-pulse[b-bd631meht0] { animation: esc-pulse-b-bd631meht0 1.5s ease-in-out infinite; }
@keyframes esc-pulse-b-bd631meht0 { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.esc-empty[b-bd631meht0] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 64px 16px; color: var(--d-ink-3); text-align: center; }
.esc-empty b[b-bd631meht0] { color: var(--d-ink); font-weight: 600; font-size: 16px; }
.esc-empty small[b-bd631meht0] { font-size: 14px; }
/* /src/Features/Esim/Pages/Manager/ESimOrderDetail.razor.rz.scp.css */
/* /manager/services/esim/order/{id} — token-only.
   Chủ ý: MỘT kiểu hàng dữ liệu (nm-dl inline) cho toàn màn, tiêu đề khối để trơn,
   màu chỉ dùng cho trạng thái + tổng tiền. Ít đường kẻ, ít icon, một trục quét dọc. */

.nm-list-page[b-nxoapnd0ap] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-nxoapnd0ap] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-nxoapnd0ap] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.esod-title[b-nxoapnd0ap] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-nxoapnd0ap] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-nxoapnd0ap] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.esod-crumb[b-nxoapnd0ap] { color: var(--nm-muted); text-decoration: none; }
.esod-crumb:hover[b-nxoapnd0ap] { color: var(--nm-brand-700); text-decoration: underline; }
.esod-crumb-sep[b-nxoapnd0ap] { margin: 0 4px; color: var(--nm-muted); }

.nm-code-pill[b-nxoapnd0ap] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.esod-loading[b-nxoapnd0ap] { display: flex; flex-direction: column; gap: 12px; }

/* ── Thanh tóm tắt: MỘT hàng, phân ô bằng đường kẻ mảnh (không phải 4 thẻ nổi) ── */
.esod-sum[b-nxoapnd0ap] {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.esod-sum__i[b-nxoapnd0ap] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 18px;
    min-width: 0;
    flex: 1 1 auto;
    border-left: 1px solid var(--nm-border);
}
.esod-sum__i:first-child[b-nxoapnd0ap] { border-left: 0; }
.esod-sum__k[b-nxoapnd0ap] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.esod-sum__v[b-nxoapnd0ap] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    line-height: 1.3;
}
.esod-sum__i--total[b-nxoapnd0ap] { margin-left: auto; text-align: right; }
.esod-sum__i--total .esod-sum__v[b-nxoapnd0ap] {
    font-size: 17px;
    font-weight: 800;
    color: var(--nm-brand-600);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
    .esod-sum__i[b-nxoapnd0ap] { flex: 1 1 45%; border-left: 0; border-top: 1px solid var(--nm-border); }
    .esod-sum__i:first-child[b-nxoapnd0ap], .esod-sum__i:nth-child(2)[b-nxoapnd0ap] { border-top: 0; }
    .esod-sum__i--total[b-nxoapnd0ap] { margin-left: 0; text-align: left; }
}

/* ── Hai cột trong tab, NGĂN BẰNG MỘT ĐƯỜNG DỌC ──
   Không có vạch này thì hai cột dính vào nhau thành một khối chữ, người đọc
   không biết dòng nào thuộc bên nào. */
.esod-cols[b-nxoapnd0ap] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
}
.esod-aside[b-nxoapnd0ap] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    padding-left: 32px;
    border-left: 1px solid var(--nm-border);
}
@media (max-width: 1100px) {
    .esod-cols[b-nxoapnd0ap] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .esod-aside[b-nxoapnd0ap] { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--nm-border); }
}

/* ── Khối: tiêu đề phải TRỘI hẳn so với nhãn của từng dòng ──
   Bản trước tiêu đề 13px/700 còn nhãn 12px/600 — gần bằng nhau nên nhìn ra một mảng chữ đều đều. */
.esod-sec[b-nxoapnd0ap] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.esod-sec__title[b-nxoapnd0ap] {
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--nm-ink);
    font-size: 14px;
    font-weight: 800;
    color: var(--nm-ink);
}
/* Nhãn dòng nhẹ đi để trục quét dồn vào cột giá trị.
   Ba cấp selector để thắng .nm-dl ::deep .nm-dl__term (600) của NmDescriptionList mà không cần !important. */
[b-nxoapnd0ap] .esod-sec .nm-dl__term { font-weight: 500; }

/* Lưới 2 cột con cho danh sách giá trị ngắn — mỗi vạch kẻ chỉ dài bằng nửa cột. */
[b-nxoapnd0ap] .esod-dl-split { column-gap: 32px; }
.esod-sec__head[b-nxoapnd0ap] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
}

.esod-muted[b-nxoapnd0ap] { color: var(--nm-muted); }
.esod-good[b-nxoapnd0ap] { color: var(--nm-ok, #16a34a); }
.esod-mono[b-nxoapnd0ap] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12.5px; }
.esod-hint[b-nxoapnd0ap] { margin: 4px 0 0; font-size: 12.5px; color: var(--nm-muted); line-height: 1.55; }
.esod-note[b-nxoapnd0ap] { margin: 4px 0 0; font-size: 13.5px; color: var(--nm-ink); line-height: 1.6; }

/* Hàng số: canh phải + chữ số đều bề ngang để cột tiền đọc thẳng xuống. */
[b-nxoapnd0ap] .esod-num .nm-dl__desc {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
[b-nxoapnd0ap] .esod-total .nm-dl__desc {
    font-size: 16px;
    font-weight: 800;
    color: var(--nm-brand-600);
}
[b-nxoapnd0ap] .esod-total { border-bottom: 0; }
[b-nxoapnd0ap] .esod-dl-tight .nm-dl__item:last-child { border-bottom: 0; }

/* ── Hồ sơ eSIM: QR nhỏ bên trái, danh sách mã bên phải ── */
.esod-profile[b-nxoapnd0ap] {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding-top: 4px;
}
@media (max-width: 700px) {
    .esod-profile[b-nxoapnd0ap] { grid-template-columns: minmax(0, 1fr); }
}

.esod-qr[b-nxoapnd0ap] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.esod-qr__img[b-nxoapnd0ap] {
    width: 148px;
    height: 148px;
    object-fit: contain;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: #fff;
    padding: 6px;
}
.esod-qr__none[b-nxoapnd0ap] {
    width: 148px;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12px;
    border: 1px dashed var(--nm-border-strong);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 12px;
}
.esod-qr__links[b-nxoapnd0ap] { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.esod-link[b-nxoapnd0ap] { font-size: 12.5px; color: var(--nm-brand-700); text-decoration: none; }
.esod-link:hover[b-nxoapnd0ap] { text-decoration: underline; }

/* ── Dung lượng còn lại: một con số lớn + thanh, không bảng số chi chít ── */
.esod-usage[b-nxoapnd0ap] { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; }
.esod-usage__nums[b-nxoapnd0ap] { display: flex; align-items: baseline; gap: 6px; }
.esod-usage__nums b[b-nxoapnd0ap] {
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.esod-usage__nums span[b-nxoapnd0ap] { font-size: 12.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-nxoapnd0ap] { padding: 14px 14px 20px; }
}
/* /src/Features/Esim/Pages/Manager/ESimOrders.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Manager · eSIM — chuẩn nm-list (Nm* UI-kit, token-only, scoped).
   Shell + KPI + toolbar lọc + tab danh mục/đơn hàng + hộp thoại làm mới.
   ═══════════════════════════════════════════════════════════════ */
.nm-list-page[b-2r5gg8x87e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-2r5gg8x87e] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-2r5gg8x87e] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-2r5gg8x87e] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.esm-lastsync[b-2r5gg8x87e] { color: var(--nm-ink); font-weight: 600; }

.nm-list-actions[b-2r5gg8x87e] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── KPI ── */
.nm-kpis[b-2r5gg8x87e] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ── toolbar lọc ── */
.nm-list-toolbar[b-2r5gg8x87e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-dest[b-2r5gg8x87e] { width: 240px; }
.tb-search[b-2r5gg8x87e] { flex: 1; min-width: 200px; max-width: 340px; }
.tb-plan[b-2r5gg8x87e] { width: 180px; }

/* ── chip: châu lục + trạng thái đơn ── */
.esm-continents[b-2r5gg8x87e],
.tb-status[b-2r5gg8x87e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-2r5gg8x87e] {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* ── lưới card nhóm gói ── */
.esm-grid[b-2r5gg8x87e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.esm-item[b-2r5gg8x87e] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
    text-decoration: none;
    color: var(--nm-ink);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.esm-item:hover[b-2r5gg8x87e] {
    border-color: var(--nm-border-strong);
    box-shadow: var(--nm-shadow);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--nm-ink);
}

.esm-item__media[b-2r5gg8x87e] {
    position: relative;
    width: 100%;
    height: 130px;
    background: var(--nm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.esm-item__img[b-2r5gg8x87e] { width: 100%; height: 100%; object-fit: cover; display: block; }
.esm-item__flag[b-2r5gg8x87e] { font-size: 52px; line-height: 1; }
.esm-item__icon[b-2r5gg8x87e] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 64px;
    opacity: .85;
    pointer-events: none;
}
.esm-item__media[b-2r5gg8x87e]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .10);
    pointer-events: none;
}

.esm-item__body[b-2r5gg8x87e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    flex: 1;
}
.esm-item__tags[b-2r5gg8x87e] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esm-item__name[b-2r5gg8x87e] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.esm-item__sub[b-2r5gg8x87e] { font-size: 12px; color: var(--nm-muted); }
.esm-item__foot[b-2r5gg8x87e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--nm-border);
}
.esm-item__price[b-2r5gg8x87e] {
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-brand-600);
    font-variant-numeric: tabular-nums;
}
.esm-item__count[b-2r5gg8x87e] { font-size: 11px; color: var(--nm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── skeleton khi tải ── */
.esm-skel[b-2r5gg8x87e] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}
.esm-skel__body[b-2r5gg8x87e] { padding: 12px 14px 14px; }

.nm-list-pager[b-2r5gg8x87e] { margin-top: 14px; }

/* ── cảnh báo hết hạn chờ: chữ + nút tải lại trên cùng một hàng ── */
.esm-timeout[b-2r5gg8x87e] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── hộp thoại làm mới ── */
.esm-confirm[b-2r5gg8x87e] { display: flex; flex-direction: column; gap: 12px; }
.esm-confirm__intro[b-2r5gg8x87e] { font-size: 14px; font-weight: 600; color: var(--nm-ink); }
.esm-confirm__steps[b-2r5gg8x87e] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    color: var(--nm-ink-2, var(--nm-ink));
}
.esm-confirm__note[b-2r5gg8x87e] { font-size: 12.5px; color: var(--nm-muted); }

/* Trạng thái ĐANG CHẠY: cùng hộp thoại, đổi ruột — người dùng không mất dấu tiến trình. */
.esm-run[b-2r5gg8x87e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0 6px;
    text-align: center;
}
.esm-run__title[b-2r5gg8x87e] { font-size: 15px; font-weight: 700; color: var(--nm-ink); }
.esm-run__hint[b-2r5gg8x87e] { font-size: 13px; color: var(--nm-muted); max-width: 420px; line-height: 1.5; }
.esm-run__bar[b-2r5gg8x87e] { width: 100%; margin-top: 4px; }
.esm-run__elapsed[b-2r5gg8x87e] {
    font-size: 12.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* ── responsive ── */
@media (max-width: 1100px) {
    .nm-kpis[b-2r5gg8x87e] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .nm-list-page[b-2r5gg8x87e] { padding: 14px 14px 20px; }
    .nm-list-actions[b-2r5gg8x87e] { width: 100%; }
    .tb-dest[b-2r5gg8x87e], .tb-search[b-2r5gg8x87e], .tb-plan[b-2r5gg8x87e] { width: 100%; max-width: none; flex: none; }
    .esm-grid[b-2r5gg8x87e] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .esm-item__media[b-2r5gg8x87e] { height: 110px; }
}
/* /src/Features/Esim/Pages/Public/Esim.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   eSIM (public khách lẻ) — hệ "Bầu trời Ngọc Mai" (đồng bộ /about,
   /services…): navy hàng không + xanh trời nhạt + cam hoa mai.
   Vùng listing giữ Nm* UI-kit + token --nm-* (đồng bộ CaEsim).
   ═══════════════════════════════════════════════════════════════════ */

.pubesim-root[b-b7nimq2v8h] {
    --sky-50: #f3f8fd;
    --sky-100: #e8f2fb;
    --sky-line: #d8e6f2;
    --ink: #0f2438;
    --ink-2: #3f5670;
    --ink-3: #6b7f95;
    --accent: #ea580c;
    --accent-2: #f97316;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    --amber: #ffc94d;
    --board: #0f2438;
    background: #fff;
    color: var(--ink-2);
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.pubesim-root h1[b-b7nimq2v8h],
.pubesim-root h2[b-b7nimq2v8h] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}
.pubesim-root h1[b-b7nimq2v8h] { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; margin: 0 0 1rem; }
.pubesim-root h2[b-b7nimq2v8h] { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; margin: 0; }
.pubesim-root h3[b-b7nimq2v8h] { font-weight: 700; color: var(--ink); }
.hl[b-b7nimq2v8h] { color: var(--accent); }
/* Fallback đặt 'Be Vietnam Pro' TRƯỚC monospace: Consolas/Courier thiếu glyph Việt
   → khi Plex Mono chưa load, dấu tiếng Việt vẫn hiển thị đúng (không vỡ). */
.mono[b-b7nimq2v8h] { font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace; }

/* ===== Layout ===== */
.pes-wrap[b-b7nimq2v8h] { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.pes-sec[b-b7nimq2v8h] { padding: 4.5rem 0; }
.pes-band[b-b7nimq2v8h] {
    background: linear-gradient(180deg, var(--sky-50) 0%, var(--sky-100) 100%);
    border-top: 1px solid var(--sky-line);
    border-bottom: 1px solid var(--sky-line);
}
/* Band CTA: MÀU ĐẶC (không gradient) để notch trùng màu tuyệt đối, đậm hơn 1 cấp
   cho vé trắng nổi khối */
.pes-cta[b-b7nimq2v8h] {
    position: relative;
    overflow: hidden;
    background: #e2edf8;
    border-top: 1px solid #c9dcee;
    border-bottom: 1px solid #c9dcee;
}
.pes-cta .pes-wrap[b-b7nimq2v8h] { position: relative; z-index: 1; }

/* Chi tiết hoa mai trong băng CTA — cành nở 2 góc + cánh bay */
.pes-cta-decor[b-b7nimq2v8h] { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pes-cta-branch[b-b7nimq2v8h] {
    position: absolute;
    width: 200px; height: auto;
    filter: drop-shadow(0 3px 5px rgba(234, 88, 12, .14));
    opacity: .85;
}
.pes-cta-branch--tl[b-b7nimq2v8h] { top: -14px; left: -26px; }
.pes-cta-branch--br[b-b7nimq2v8h] { bottom: -14px; right: -26px; }
.pes-cta-petal[b-b7nimq2v8h] { position: absolute; width: 13px; height: 13px; opacity: .5; }
.pes-cta-petal--1[b-b7nimq2v8h] { top: 24%; left: 30%; --r0: -14deg; --r1: 22deg; }
.pes-cta-petal--2[b-b7nimq2v8h] { top: 62%; left: 20%; --r0: 30deg; --r1: 62deg; }
.pes-cta-petal--3[b-b7nimq2v8h] { top: 34%; right: 32%; --r0: -38deg; --r1: -6deg; }

/* ===== Eyebrow ===== */
.leg[b-b7nimq2v8h] {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 .8rem;
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--ink-3);
}
.leg--c[b-b7nimq2v8h] { justify-content: center; }
.eyebrow-mai[b-b7nimq2v8h] { width: 17px; height: 17px; flex: none; }
.sec-head--c[b-b7nimq2v8h] { text-align: center; }
.sec-sub[b-b7nimq2v8h] { margin: .6rem 0 0; font-size: .9rem; color: var(--ink-3); max-width: 34rem; }
.sec-sub--c[b-b7nimq2v8h] { margin-left: auto; margin-right: auto; }

/* ═════════════════ HERO ═════════════════ */
.pes-hero[b-b7nimq2v8h] {
    position: relative;
    overflow-x: clip; overflow-y: visible; /* dropdown search box tràn ra ngoài hero */
    background: linear-gradient(180deg, #e9f3fc 0%, #f6fafd 58%, #ffffff 100%);
}
/* Banner CMS (PageCode ESIM_LIST) */
.pes-hero-bg[b-b7nimq2v8h] { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.pes-hero-veil[b-b7nimq2v8h] {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 36, 56, .42) 0%, rgba(15, 36, 56, .16) 55%, #ffffff 100%);
}

.hero-sky[b-b7nimq2v8h] { position: absolute; inset: 0; pointer-events: none; }
.hero-path[b-b7nimq2v8h] { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-plane[b-b7nimq2v8h] {
    position: absolute; left: 76%; top: 22%;
    width: 26px; height: 26px; color: var(--accent);
    transform: rotate(42deg); opacity: .9;
}
.hero-sky[b-b7nimq2v8h]  .hero-bloom {
    position: absolute; left: 88%; top: 7%;
    width: 92px; height: auto; opacity: .92;
    filter: drop-shadow(0 2px 4px rgba(234, 88, 12, .16));
}
.petal[b-b7nimq2v8h] { position: absolute; width: 12px; height: 12px; opacity: .5; }
.petal--1[b-b7nimq2v8h] { left: 10%; top: 26%; --r0: -12deg; --r1: 20deg; }
.petal--2[b-b7nimq2v8h] { left: 6%; top: 58%; --r0: 32deg; --r1: 64deg; }
.petal--3[b-b7nimq2v8h] { left: 90%; top: 52%; --r0: -40deg; --r1: -8deg; }

.hero-inner[b-b7nimq2v8h] {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding-bottom: 0;
}
/* Banner CMS mang thông điệp lớn → đẩy content xuống nhiều để banner có đất cao */
.hero-inner--banner[b-b7nimq2v8h] { padding-top: 420px; }
.hero-inner--plain[b-b7nimq2v8h] { padding-top: 150px; }
.hero-eyebrow[b-b7nimq2v8h] {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 1.1rem;
    padding: .45rem .95rem;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(216, 230, 242, .9);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.hero-eyebrow .mono[b-b7nimq2v8h] {
    font-size: .65rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3);
}
.hero-desc[b-b7nimq2v8h] { font-size: .95rem; color: var(--ink-2); line-height: 1.7; margin: 0 0 1.6rem; max-width: 38rem; }
/* Ô tìm kiếm vắt ngang ranh giới banner ↔ vùng dưới: nửa dưới tràn xuống nền trắng */
.hero-search[b-b7nimq2v8h] {
    width: 100%; max-width: 960px;
    margin: 0 auto -72px;
    position: relative; z-index: 5;
}

/* ===== Dải bảng số liệu — nền trắng, TÁCH khỏi banner hero ===== */
.pes-board-strip[b-b7nimq2v8h] {
    position: relative; z-index: 1;
    background: #fff;
    display: flex; justify-content: center;
    padding: 104px 1.5rem 1rem; /* chừa chỗ cho nửa dưới ô tìm kiếm tràn xuống */
}

/* ===== Bảng thông tin sân bay — khối CAM (màu chủ đạo thương hiệu) ===== */
.board[b-b7nimq2v8h] {
    position: relative;
    display: grid; grid-template-columns: repeat(4, auto);
    width: max-content; max-width: 100%;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    border-radius: 14px;
    padding: .95rem 0;
    box-shadow: 0 18px 36px -16px rgba(234, 88, 12, .55);
    overflow: hidden;
}
.board-cell[b-b7nimq2v8h] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 1.35rem; text-align: left; }
.board-cell + .board-cell[b-b7nimq2v8h] { border-left: 1px dashed rgba(255, 255, 255, .28); }
.board-lbl[b-b7nimq2v8h] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: .55rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: #ffe3cc;
}
.board-num[b-b7nimq2v8h] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-weight: 700; font-size: 1.3rem; line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.board-plane[b-b7nimq2v8h] {
    position: absolute; top: 8px; right: 10px;
    width: 12px; height: 12px;
    color: #fff; opacity: .6;
    transform: rotate(45deg);
}

/* ===== Dải tuyến bay (cầu nối listing → marketing) ===== */
.pes-route[b-b7nimq2v8h] {
    display: flex; align-items: center; gap: 10px;
    max-width: 560px; margin: 0 auto;
    padding: .6rem 1.5rem 2.2rem;
}
.rt-dot[b-b7nimq2v8h] { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); opacity: .55; }
.rt-line[b-b7nimq2v8h] { flex: 1; border-top: 2px dashed var(--sky-line); }
.rt-plane[b-b7nimq2v8h] { flex: none; width: 16px; height: 16px; color: var(--accent); transform: rotate(90deg); opacity: .85; }
.rt-mai[b-b7nimq2v8h] { flex: none; width: 19px; height: 19px; }

/* ===== Buttons ===== */
.btn[b-b7nimq2v8h] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px;
    padding: .8rem 1.7rem;
    font-size: .85rem; font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .15s, color .15s, border-color .15s;
}
.btn:focus-visible[b-b7nimq2v8h] { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--solid[b-b7nimq2v8h] {
    background: var(--accent); color: #fff;
    box-shadow: 0 10px 22px -12px rgba(234, 88, 12, .55);
}
.btn--solid:hover[b-b7nimq2v8h] { background: var(--accent-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(234, 88, 12, .6); }
.btn--solid:active[b-b7nimq2v8h] { transform: translateY(0); }
.btn--ghost[b-b7nimq2v8h] { background: #fff; color: var(--ink); border: 1.5px solid var(--sky-line); }
.btn--ghost:hover[b-b7nimq2v8h] { border-color: var(--ink); color: var(--ink); }

/* ═════════════════ Vùng listing (Nm*) ═════════════════ */
.esim-list-zone[b-b7nimq2v8h] {
    background: #fff;
    position: relative;
    z-index: 1;
    padding: 8px 0 30px;
}
.esim-wrap[b-b7nimq2v8h] {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 24px;
}

/* heading vùng danh sách */
.esim-list-heading[b-b7nimq2v8h] { margin: 6px 0 16px; }
.esim-list-heading h2[b-b7nimq2v8h] { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.esim-list-heading .leg[b-b7nimq2v8h] { margin-bottom: .45rem; }
.esim-list-hint[b-b7nimq2v8h] {
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--ink-3);
}

/* thanh bộ lọc đang áp */
.esim-filterbar[b-b7nimq2v8h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--nm-surface-2);
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
}
.esim-filterbar__lbl[b-b7nimq2v8h] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.esim-fchip[b-b7nimq2v8h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    color: var(--nm-brand-700);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--nm-font);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.esim-fchip:hover[b-b7nimq2v8h] { border-color: var(--nm-brand-300); }
.esim-fchip i[b-b7nimq2v8h] { font-size: 10px; }
.esim-filterbar[b-b7nimq2v8h]  .esim-filterbar__clear { margin-left: auto; }

/* tabs + nút redeem cùng hàng */
.esim-list-head[b-b7nimq2v8h] { position: relative; }
.esim-list-head[b-b7nimq2v8h]  .esim-redeem-link {
    position: absolute;
    top: 0;
    right: 0;
}

/* chip châu lục */
.esim-continents[b-b7nimq2v8h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* grid card gói — đồng bộ CaEsim */
.esim-grid[b-b7nimq2v8h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.esim-item[b-b7nimq2v8h] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
    text-decoration: none;
    color: var(--nm-ink);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.esim-item:hover[b-b7nimq2v8h] {
    border-color: var(--nm-brand-300);
    box-shadow: var(--nm-shadow);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--nm-ink);
}

.esim-item__media[b-b7nimq2v8h] {
    position: relative;
    width: 100%;
    height: 150px;
    background: var(--nm-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.esim-item__img[b-b7nimq2v8h] { width: 100%; height: 100%; object-fit: cover; display: block; }
.esim-item__flag[b-b7nimq2v8h] { font-size: 56px; line-height: 1; }
.esim-item__icon[b-b7nimq2v8h] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 70px;
    opacity: .85;
    pointer-events: none;
}
.esim-item__media[b-b7nimq2v8h]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, .10);
    pointer-events: none;
}

.esim-item__body[b-b7nimq2v8h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    flex: 1;
}
.esim-item__tags[b-b7nimq2v8h] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esim-item__name[b-b7nimq2v8h] {
    font-size: 15px;
    font-weight: 600;
    color: var(--nm-ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.esim-item:hover .esim-item__name[b-b7nimq2v8h] { color: var(--nm-brand-600); }
.esim-item__sub[b-b7nimq2v8h] { font-size: 12px; color: var(--nm-muted); }
.esim-item__foot[b-b7nimq2v8h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--nm-border);
}
.esim-item__price[b-b7nimq2v8h] {
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-brand-600);
    font-variant-numeric: tabular-nums;
}
.esim-item__count[b-b7nimq2v8h] { font-size: 11px; color: var(--nm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* skeleton */
.esim-skel[b-b7nimq2v8h] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}
.esim-skel__body[b-b7nimq2v8h] { padding: 12px 14px 14px; }

.esim-pager[b-b7nimq2v8h] { margin-top: 16px; display: flex; justify-content: center; }

/* ═════════════════ ƯU ĐIỂM — lưới 2×2 + thẻ eSIM ═════════════════ */
.pes-adv[b-b7nimq2v8h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 2.4rem;
    align-items: stretch;
}
.pes-adv-main[b-b7nimq2v8h] { display: flex; flex-direction: column; }
.pes-adv-main h2[b-b7nimq2v8h] { margin-bottom: 1.5rem; }

/* Tuyến tín hiệu dọc — 4 ưu điểm là waypoint trên đường bay nét đứt.
   Bắt đầu bằng chấm gốc (.pes-adv-cap), kết bằng bông mai (.pes-adv-bloom). */
.pes-advtrack[b-b7nimq2v8h] {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
    padding: .4rem 0 2.2rem;
}
/* Đường bay nét đứt chạy qua tâm các node (node 48px → tâm 24px) */
.pes-advtrack[b-b7nimq2v8h]::before {
    content: '';
    position: absolute;
    left: 23px; top: 18px; bottom: 34px;
    width: 2px;
    background: repeating-linear-gradient(#fdba74 0 5px, transparent 5px 11px);
}
/* Chấm gốc tuyến */
.pes-adv-cap[b-b7nimq2v8h] {
    position: absolute; left: 18px; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--accent);
    background: #fff;
    z-index: 1;
}
/* Bông mai kết tuyến */
.pes-adv-bloom[b-b7nimq2v8h] {
    position: absolute; left: 8px; bottom: 0;
    width: 32px; height: 32px;
    filter: drop-shadow(0 2px 4px rgba(234, 88, 12, .18));
}

.pes-advitem[b-b7nimq2v8h] {
    position: relative;
    display: flex; align-items: flex-start; gap: 18px;
}
/* Node = waypoint: vòng cam đặc, icon trắng, ring trắng tách khỏi đường */
.pes-advnode[b-b7nimq2v8h] {
    position: relative; z-index: 1;
    flex: none;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: 3px solid #fff;
    box-shadow: 0 6px 16px -6px rgba(234, 88, 12, .6);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pes-advitem:hover .pes-advnode[b-b7nimq2v8h] {
    transform: scale(1.08);
    box-shadow: 0 10px 22px -6px rgba(234, 88, 12, .7);
}
.pes-advnode svg[b-b7nimq2v8h] { width: 23px; height: 23px; }
.pes-advtext[b-b7nimq2v8h] { padding-top: 2px; }
.pes-advkicker[b-b7nimq2v8h] {
    display: inline-block;
    font-size: .58rem; font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent-deep);
    margin-bottom: .3rem;
}
.pes-advitem h3[b-b7nimq2v8h] { font-size: 1.05rem; margin: 0 0 .3rem; }
.pes-advitem p[b-b7nimq2v8h] { font-size: .84rem; color: var(--ink-3); line-height: 1.6; margin: 0; max-width: 30rem; }

/* Khung iPhone — bezel graphite, dynamic island, status bar, app bên trong */
.pes-adv-side[b-b7nimq2v8h] { display: flex; align-items: center; justify-content: center; }
.pes-phone[b-b7nimq2v8h] { width: 100%; display: flex; justify-content: center; }
.pes-phone-frame[b-b7nimq2v8h] {
    position: relative;
    width: 300px;
    padding: 10px;
    background: linear-gradient(155deg, #2b3444 0%, #141a24 55%, #0d1218 100%);
    border-radius: 46px;
    box-shadow:
        0 40px 70px -30px rgba(15, 36, 56, .55),
        0 0 0 2px rgba(255, 255, 255, .05) inset,
        0 1px 2px rgba(255, 255, 255, .18) inset;
}
.pes-phone-screen[b-b7nimq2v8h] {
    position: relative;
    border-radius: 36px;
    overflow: hidden;
    background: #fff;
}
.pes-phone-island[b-b7nimq2v8h] {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 96px; height: 27px;
    background: #05070c;
    border-radius: 999px;
    z-index: 6;
}

/* Status bar */
.pes-phone-status[b-b7nimq2v8h] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 22px 6px;
    color: var(--ink);
}
.pes-phone-time[b-b7nimq2v8h] { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.pes-phone-sig[b-b7nimq2v8h] { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.pes-phone-sig svg[b-b7nimq2v8h] { height: 11px; width: auto; display: block; }

/* App bar cam */
.pes-phone-appbar[b-b7nimq2v8h] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 60%, #f97316 100%);
    padding: .55rem 1.15rem;
}
.pes-phone-appbar .mono[b-b7nimq2v8h] { font-size: .6rem; font-weight: 600; letter-spacing: .14em; color: #fff; }
.pes-phone-plane[b-b7nimq2v8h] { width: 13px; height: 13px; color: #ffe3cc; opacity: .9; transform: rotate(45deg); }

/* Nội dung app */
.pes-phone-content[b-b7nimq2v8h] { display: flex; flex-direction: column; padding: .85rem 1rem 1rem; }

/* Thẻ eSIM có QR kích hoạt */
.pes-esim-pass[b-b7nimq2v8h] {
    background: linear-gradient(160deg, #fff7ed 0%, #ffe3cc 100%);
    border: 1px solid var(--accent-line);
    border-radius: 14px;
    padding: .65rem;
    margin-bottom: .75rem;
}
.pes-pass-top[b-b7nimq2v8h] { display: flex; align-items: center; gap: 9px; margin-bottom: .5rem; }
.pes-pass-chip[b-b7nimq2v8h] { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 3px 5px rgba(180, 83, 9, .28)); }
.pes-pass-meta[b-b7nimq2v8h] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; line-height: 1.1; }
.pes-pass-meta .mono[b-b7nimq2v8h] { font-size: .55rem; font-weight: 600; letter-spacing: .12em; color: var(--accent-deep); }
.pes-pass-meta b[b-b7nimq2v8h] { font-size: .72rem; font-weight: 700; color: var(--ink); }
.pes-pass-waves[b-b7nimq2v8h] { width: 22px; height: 22px; flex: none; color: var(--accent); transform: rotate(0deg); }
.pes-qr[b-b7nimq2v8h] {
    background: #fff;
    border-radius: 11px;
    padding: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .12), 0 4px 10px -6px rgba(15, 36, 56, .25);
}
.pes-qr svg[b-b7nimq2v8h] { width: 90px; height: 90px; display: block; }
.pes-qr-cap[b-b7nimq2v8h] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: .45rem 0 0;
    font-size: .64rem; font-weight: 600;
    color: var(--ink-2);
}
.pes-qr-cap svg[b-b7nimq2v8h] { width: 13px; height: 13px; color: var(--accent); }
.pes-phone-content h3[b-b7nimq2v8h] { font-size: 1rem; margin: 0 0 .35rem; }
.pes-sim-desc[b-b7nimq2v8h] { font-size: .78rem; color: var(--ink-3); line-height: 1.5; margin: 0 0 .7rem; }

/* Dải thông số 3 cột — vạch ngăn kiểu bảng spec */
.pes-sim-spec[b-b7nimq2v8h] {
    list-style: none; margin: 0; padding: .7rem 0;
    border-top: 1px dashed var(--sky-line);
    border-bottom: 1px dashed var(--sky-line);
    display: grid; grid-template-columns: repeat(3, 1fr);
}
.pes-sim-spec li[b-b7nimq2v8h] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    padding: 0 .35rem;
    font-size: .72rem; font-weight: 600; color: var(--ink-2);
    line-height: 1.3;
}
.pes-sim-spec li + li[b-b7nimq2v8h] { border-left: 1px solid var(--sky-line); }
.pes-spec-ico[b-b7nimq2v8h] {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
}
.pes-spec-ico svg[b-b7nimq2v8h] { width: 17px; height: 17px; }
.pes-sim-cta[b-b7nimq2v8h] { display: flex; width: 100%; margin-top: .85rem; }

/* ═════════════════ TÍNH NĂNG NỔI BẬT ═════════════════ */
.sec-head--c h2[b-b7nimq2v8h] { margin-bottom: 0; }
.pes-feats[b-b7nimq2v8h] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 2.4rem;
}
@media (min-width: 768px) { .pes-feats[b-b7nimq2v8h] { grid-template-columns: repeat(4, 1fr); } }
.pes-feat[b-b7nimq2v8h] {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 16px;
    padding: 1.5rem 1rem 1.4rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pes-feat:hover[b-b7nimq2v8h] {
    transform: translateY(-3px);
    border-color: var(--accent-line);
    box-shadow: 0 16px 32px -20px rgba(15, 36, 56, .35);
}
.pes-feat-ico[b-b7nimq2v8h] {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    margin-bottom: .9rem;
}
.pes-feat-ico svg[b-b7nimq2v8h] { width: 26px; height: 26px; }
.pes-feat h3[b-b7nimq2v8h] { font-size: .92rem; margin: 0 0 .35rem; }
.pes-feat p[b-b7nimq2v8h] { font-size: .78rem; color: var(--ink-3); line-height: 1.6; margin: 0; }

/* ═════════════════ CTA — BOARDING PASS ═════════════════ */
.pass[b-b7nimq2v8h] {
    max-width: 920px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr;
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 22px;
    box-shadow: 0 30px 60px -30px rgba(15, 36, 56, .35);
}
@media (min-width: 768px) { .pass[b-b7nimq2v8h] { grid-template-columns: 1fr auto 262px; } }
.pass-main[b-b7nimq2v8h] { padding: 2.4rem 1.5rem; }
@media (min-width: 768px) { .pass-main[b-b7nimq2v8h] { padding: 2.8rem 3rem; } }
.pass-eyebrow[b-b7nimq2v8h] {
    margin: 0 0 .9rem;
    font-size: .625rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3);
}
.pass h2[b-b7nimq2v8h] { margin-bottom: .8rem; }
.pass-desc[b-b7nimq2v8h] { font-size: .875rem; color: var(--ink-3); line-height: 1.65; margin: 0 0 1.6rem; max-width: 28rem; }
.pass-actions[b-b7nimq2v8h] { display: flex; flex-wrap: wrap; gap: .7rem; }

.pass-cut[b-b7nimq2v8h] { position: relative; border-top: 2px dashed #c3d8ea; margin: 0 1.5rem; }
@media (min-width: 768px) {
    .pass-cut[b-b7nimq2v8h] { border-top: none; border-left: 2px dashed #c3d8ea; margin: 1.4rem 0; }
}
/* Notch = lỗ đục: fill ĐẬM hơn band + inset shadow sâu — phải tách bạch rõ với
   cả vé trắng, cuống sky lẫn band (chuẩn chốt của bộ trang public) */
.pass-cut[b-b7nimq2v8h]::before,
.pass-cut[b-b7nimq2v8h]::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px; border-radius: 50%;
    background: #cfe0f0;
    border: 1px solid #b3cde5;
    box-shadow: inset 0 2px 4px rgba(15, 36, 56, .28);
}
.pass-cut[b-b7nimq2v8h]::before { top: -13px; left: -36px; }
.pass-cut[b-b7nimq2v8h]::after { top: -13px; right: -36px; }
@media (min-width: 768px) {
    .pass-cut[b-b7nimq2v8h]::before { top: -34px; left: -11px; right: auto; }
    .pass-cut[b-b7nimq2v8h]::after { top: auto; bottom: -34px; left: -11px; right: auto; }
}

.pass-stub[b-b7nimq2v8h] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .8rem;
    text-align: center;
    padding: 1.8rem 1.5rem 2.2rem;
    background: var(--sky-50);
    border-radius: 0 0 21px 21px;
}
@media (min-width: 768px) { .pass-stub[b-b7nimq2v8h] { border-radius: 0 21px 21px 0; } }
.stub-mai[b-b7nimq2v8h] { width: 62px; height: 52px; }
.stub-route[b-b7nimq2v8h] {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .1em;
    color: var(--ink);
}
.stub-plane[b-b7nimq2v8h] { width: 13px; height: 13px; color: var(--accent); transform: rotate(90deg); }
.stub-est[b-b7nimq2v8h] { margin: .2rem 0 0; font-size: .55rem; letter-spacing: .14em; color: #9db1c4; }

/* ═════════════════ REVEAL + MOTION ═════════════════ */
.pes-rv-on .rv[b-b7nimq2v8h] { transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.pes-rv-on .rv:not(.in)[b-b7nimq2v8h] { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: no-preference) {
    .petal[b-b7nimq2v8h] { animation: pes-sway-b-b7nimq2v8h 9s ease-in-out infinite alternate; }
    .petal--2[b-b7nimq2v8h] { animation-duration: 12s; animation-delay: -4s; }
    .petal--3[b-b7nimq2v8h] { animation-duration: 10.5s; animation-delay: -7s; }
    .hero-plane[b-b7nimq2v8h] { animation: pes-drift-b-b7nimq2v8h 15s ease-in-out infinite alternate; }
    .pes-cta-petal[b-b7nimq2v8h] { animation: pes-sway-b-b7nimq2v8h 10s ease-in-out infinite alternate; }
    .pes-cta-petal--2[b-b7nimq2v8h] { animation-duration: 13s; animation-delay: -5s; }
    .pes-cta-petal--3[b-b7nimq2v8h] { animation-duration: 11s; animation-delay: -8s; }
    .pes-wave[b-b7nimq2v8h] { animation: pes-signal-b-b7nimq2v8h 3.2s ease-in-out infinite; }
    .pes-wave--2[b-b7nimq2v8h] { animation-delay: .35s; }
    .pes-wave--3[b-b7nimq2v8h] { animation-delay: .7s; }
}
@keyframes pes-sway-b-b7nimq2v8h {
    from { transform: translateY(-6px) rotate(var(--r0, -12deg)); }
    to { transform: translateY(10px) rotate(var(--r1, 20deg)); }
}
@keyframes pes-drift-b-b7nimq2v8h {
    from { transform: rotate(42deg) translate(-3px, 2px); }
    to { transform: rotate(42deg) translate(6px, -4px); }
}
@keyframes pes-signal-b-b7nimq2v8h {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
    .pes-rv-on .rv[b-b7nimq2v8h] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═════════════════ MOBILE ═════════════════ */
@media (max-width: 640px) {
    .pes-sec[b-b7nimq2v8h] { padding: 2.6rem 0; }
    .pes-wrap[b-b7nimq2v8h] { padding: 0 1rem; }
    .hero-plane[b-b7nimq2v8h], .hero-sky[b-b7nimq2v8h]  .hero-bloom { display: none; }
    .hero-path path[b-b7nimq2v8h] { opacity: .2; }
    .petal[b-b7nimq2v8h] { opacity: .3; }
    .hero-inner[b-b7nimq2v8h] { padding-bottom: 0; }
    .hero-inner--banner[b-b7nimq2v8h] { padding-top: 280px; }
    .hero-inner--plain[b-b7nimq2v8h] { padding-top: 120px; }
    .hero-search[b-b7nimq2v8h] { margin-bottom: -56px; }
    /* chừa chỗ cho nửa dưới ô search tràn xuống (padding-top gộp vào shorthand) */
    .pes-board-strip[b-b7nimq2v8h] { padding: 92px 1rem .6rem; }
    .board[b-b7nimq2v8h] { grid-template-columns: 1fr 1fr; width: 100%; padding: .4rem 0; }
    .board-cell[b-b7nimq2v8h] { padding: .6rem 1.1rem; }
    .board-cell:nth-of-type(3)[b-b7nimq2v8h] { border-left: none; }
    .board-cell:nth-of-type(n+3)[b-b7nimq2v8h] { border-top: 1px dashed rgba(255, 255, 255, .16); }
    .board-num[b-b7nimq2v8h] { font-size: 1.05rem; }

    .pes-route[b-b7nimq2v8h] { padding-bottom: 1.6rem; }

    .pes-adv[b-b7nimq2v8h] { grid-template-columns: 1fr; gap: 1.8rem; }
    .pes-advtrack[b-b7nimq2v8h] { padding-bottom: 2.4rem; }
    .pes-adv-side[b-b7nimq2v8h] { max-width: 420px; margin: 0 auto; width: 100%; }

    .pass-main[b-b7nimq2v8h] { padding: 2rem 1.25rem 1.6rem; }
    .pass-stub[b-b7nimq2v8h] { padding: 1.5rem 1.25rem 1.8rem; }

    .esim-wrap[b-b7nimq2v8h] { padding: 0 14px; }
    .esim-grid[b-b7nimq2v8h] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .esim-item__media[b-b7nimq2v8h] { height: 110px; }
    .esim-item__flag[b-b7nimq2v8h] { font-size: 44px; }
    .esim-list-head[b-b7nimq2v8h] { display: flex; flex-direction: column; }
    .esim-list-head[b-b7nimq2v8h]  .esim-redeem-link {
        position: static;
        order: -1;
        align-self: flex-end;
        margin-bottom: 10px;
    }
}
/* /src/Features/Esim/Pages/Public/EsimCountry.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   EsimCountry (public) — hệ "Bầu trời Ngọc Mai" (đồng bộ /esim, /about…):
   navy hàng không + xanh trời nhạt + cam hoa mai. Hero điểm đến (ảnh trong
   ô cửa sổ máy bay + thẻ hành lý) + khung mua branded + 3 bước đánh số.
   Giữ Nm* cho phần tương tác (chip/stepper/kpi/desclist/button).
   ═══════════════════════════════════════════════════════════════════ */
.pubesc-root[b-hc60b8n92a] {
    --sky-50: #f3f8fd;
    --sky-100: #e8f2fb;
    --sky-line: #d8e6f2;
    --ink: #0f2438;
    --ink-2: #3f5670;
    --ink-3: #6b7f95;
    --accent: #ea580c;
    --accent-2: #f97316;
    --accent-deep: #c2410c;
    --accent-soft: #fff3ea;
    --accent-line: #fed7aa;
    --amber: #ffc94d;
    --board: #0f2438;
    background: #fff;
    color: var(--ink-2);
    min-height: 100vh;
    padding-bottom: 3.5rem;
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.pubesc-root h1[b-hc60b8n92a], .pubesc-root h2[b-hc60b8n92a] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.pubesc-root h1[b-hc60b8n92a] { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; margin: 0 0 .7rem; }
.pubesc-root h2[b-hc60b8n92a] { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; margin: 0; }
.hl[b-hc60b8n92a] { color: var(--accent); }
.mono[b-hc60b8n92a] { font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace; }

.pubesc-wrap[b-hc60b8n92a], .pesc-wrap[b-hc60b8n92a] { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.pubesc-wrap--pad[b-hc60b8n92a] { padding-top: 140px; }

/* ═════════════════ TOPBAR (breadcrumb) ═════════════════ */
.pesc-topbar[b-hc60b8n92a] {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #eaf3fc 0%, #f6fafd 100%);
    border-bottom: 1px solid var(--sky-line);
    padding: 90px 0 14px;
}
.pesc-topbar-sky[b-hc60b8n92a] { position: absolute; inset: 0; pointer-events: none; }
.pesc-hero-path[b-hc60b8n92a] { position: absolute; inset: 0; width: 100%; height: 100%; }
.pesc-hero-plane[b-hc60b8n92a] { position: absolute; left: 78%; top: 44%; width: 20px; height: 20px; color: var(--accent); transform: rotate(42deg); opacity: .7; }
.pesc-topbar-inner[b-hc60b8n92a] { position: relative; z-index: 1; }

.pesc-crumb[b-hc60b8n92a] {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink-3);
}
.pesc-crumb a[b-hc60b8n92a] { color: var(--ink-3); text-decoration: none; transition: color .12s; }
.pesc-crumb a:hover[b-hc60b8n92a] { color: var(--accent); }
.pesc-crumb .here[b-hc60b8n92a] { color: var(--ink); font-weight: 600; }
.pesc-crumb .sep[b-hc60b8n92a] { color: var(--sky-line); }
.pesc-back[b-hc60b8n92a] {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--sky-line);
    border-radius: 999px;
    background: #fff;
    font-size: .78rem; font-weight: 600; color: var(--ink-2);
    text-decoration: none; transition: color .12s, border-color .12s, background .12s;
}
.pesc-back:hover[b-hc60b8n92a] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

/* ═════════════════ HEADER CARD (ảnh + tên gói + chọn gói) ═════════════════ */
.pesc-head-card[b-hc60b8n92a] { grid-area: head; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 1.7rem; align-items: stretch; }
.pesc-hc-media[b-hc60b8n92a] { position: relative; display: flex; }
.pesc-win[b-hc60b8n92a] {
    position: relative;
    width: 100%; height: 100%; min-height: 240px;
    border-radius: 18px;
    border: 5px solid #fff;
    box-shadow: 0 22px 44px -24px rgba(15, 36, 56, .45), 0 0 0 1px var(--sky-line);
    background: var(--sky-100);
    overflow: hidden;
}
.pesc-win__img[b-hc60b8n92a] { width: 100%; height: 100%; object-fit: cover; display: block; }
.pesc-win__flag[b-hc60b8n92a] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 72px; }
.pesc-tag[b-hc60b8n92a] {
    position: absolute; left: -10px; bottom: -12px;
    display: flex; align-items: center; gap: 7px;
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 11px;
    padding: 6px 12px 6px 9px;
    box-shadow: 0 12px 26px -14px rgba(15, 36, 56, .4);
}
.pesc-tag[b-hc60b8n92a]::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent-line); background: var(--accent-soft); }
.pesc-tag__flag[b-hc60b8n92a] { font-size: 20px; line-height: 1; }
.pesc-tag__name[b-hc60b8n92a] { font-weight: 700; font-size: .85rem; color: var(--ink); }

.pesc-hc-body[b-hc60b8n92a] { min-width: 0; }
.pesc-eyebrow[b-hc60b8n92a] {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 .7rem;
    font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3);
}
.pesc-eyebrow-mai[b-hc60b8n92a] { width: 16px; height: 16px; flex: none; }
.pesc-hc-body h1[b-hc60b8n92a] { font-size: clamp(1.5rem, 2.8vw, 2.15rem); line-height: 1.1; margin: 0 0 .45rem; }
.pesc-hero-sub[b-hc60b8n92a] { font-size: .92rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 1rem; }

/* thẻ số liệu danh mục */
.pesc-hc-stats[b-hc60b8n92a] { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.1rem; }
.pesc-stat[b-hc60b8n92a] {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 13px 7px 8px;
    background: var(--sky-50); border: 1px solid var(--sky-line);
    border-radius: 11px;
}
.pesc-stat-ic[b-hc60b8n92a] {
    flex: none; width: 30px; height: 30px; border-radius: 8px;
    background: #fff; border: 1px solid var(--accent-line);
    display: grid; place-items: center; color: var(--accent); font-size: 15px;
}
.pesc-stat-txt[b-hc60b8n92a] { display: flex; flex-direction: column; line-height: 1.1; }
.pesc-stat-txt b[b-hc60b8n92a] { font-size: .9rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pesc-stat-txt span[b-hc60b8n92a] { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }

.pesc-hc-config[b-hc60b8n92a] { padding-top: 1.2rem; border-top: 1px dashed var(--sky-line); }
.pesc-hc-config .esc-row__lbl[b-hc60b8n92a] { min-width: 76px; }

/* ═════════════════ LƯỚI THÔNG SỐ (spec) ═════════════════ */
.pesc-specs[b-hc60b8n92a] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
.pesc-spec-item[b-hc60b8n92a] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--sky-line);
}
.pesc-spec-item--full[b-hc60b8n92a] { grid-column: 1 / -1; align-items: flex-start; }
.pesc-spec-ic[b-hc60b8n92a] {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: var(--sky-50); border: 1px solid var(--sky-line);
    display: grid; place-items: center; color: var(--accent); font-size: 16px;
}
.pesc-spec-txt[b-hc60b8n92a] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pesc-spec-lbl[b-hc60b8n92a] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.pesc-spec-val[b-hc60b8n92a] { font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pesc-spec-val--wrap[b-hc60b8n92a] { font-weight: 500; line-height: 1.5; }

/* ═════════════════ MAIN ═════════════════ */
.pesc-main[b-hc60b8n92a] { display: flex; flex-direction: column; gap: 1.4rem; padding-top: 1.8rem; }

.pesc-card[b-hc60b8n92a] {
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 14px 30px -22px rgba(15, 36, 56, .3);
}
.pesc-card-hd[b-hc60b8n92a] {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin-bottom: 1.1rem;
    font-size: .95rem; font-weight: 700; color: var(--ink);
}
.pesc-card-hd i[b-hc60b8n92a] { color: var(--accent); font-size: 1.05rem; }

/* Grid-areas: desktop = header(ảnh+chọn) + thông số (trái) · thanh toán (phải, dính);
   mobile = header → thông số → thanh toán (thêm thanh mua nhanh cố định đáy). */
.pesc-buy[b-hc60b8n92a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    grid-template-areas:
        "head buy"
        "spec buy";
    gap: 1.4rem;
    align-items: start;
}
.pesc-spec-card[b-hc60b8n92a] { grid-area: spec; }
.pesc-buybox[b-hc60b8n92a] { grid-area: buy; }

/* ── buy box (cột phải, dính khi cuộn) ── */
.pesc-buybox[b-hc60b8n92a] { position: sticky; top: 88px; align-self: start; display: flex; flex-direction: column; gap: 13px; }
.pesc-bb-hd[b-hc60b8n92a] {
    display: flex; align-items: center; gap: 9px;
    padding-bottom: 12px; margin: 0;
    border-bottom: 1px solid var(--sky-line);
    font-size: .98rem; font-weight: 700; color: var(--ink);
}
.pesc-bb-hd i[b-hc60b8n92a] { color: var(--accent); font-size: 1.1rem; }
.pesc-bb-facts[b-hc60b8n92a] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pesc-bb-fact[b-hc60b8n92a] {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--sky-50); border: 1px solid var(--sky-line);
}
.pesc-bb-lbl[b-hc60b8n92a] { font-size: 10.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pesc-bb-fact b[b-hc60b8n92a] { font-size: 1rem; font-weight: 700; color: var(--ink); }
.pesc-bb-price[b-hc60b8n92a] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 2px 0; }
.pesc-bb-price-val[b-hc60b8n92a] { font-size: 1.3rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pesc-bb-qty[b-hc60b8n92a] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px; }
.pesc-bb-sep[b-hc60b8n92a] { border-top: 1px dashed var(--sky-line); margin: 2px 0; }
.pesc-bb-cta[b-hc60b8n92a] { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pesc-bb-cta[b-hc60b8n92a]  .esc-cta { width: 100%; justify-content: center; }
/* Tổng cộng: khối nhấn cam — nhãn trên, giá to dưới (luôn vừa, kể cả giá lớn) */
.pesc-buybox .esc-total[b-hc60b8n92a] {
    flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--accent-soft), #fff);
    border: 1px solid var(--accent-line);
}
.pesc-buybox .esc-total__lbl[b-hc60b8n92a] {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3);
}
.pesc-buybox .esc-total__val[b-hc60b8n92a] { font-size: 1.5rem; }

/* ── cấu hình gói (giữ Nm chip/stepper) ── */
.esc-config[b-hc60b8n92a] { display: flex; flex-direction: column; gap: 14px; }
.esc-row[b-hc60b8n92a] { display: flex; align-items: flex-start; gap: 12px; }
.esc-row__lbl[b-hc60b8n92a] {
    min-width: 84px; padding-top: 7px;
    font-size: 10.5px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .07em;
}
.esc-row__body[b-hc60b8n92a] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }

.esc-total[b-hc60b8n92a] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: 13px;
    background: linear-gradient(135deg, var(--accent-soft), #fff);
    border: 1px solid var(--accent-line);
}
.esc-total__lbl[b-hc60b8n92a] { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.esc-total__val[b-hc60b8n92a] {
    font-size: 1.55rem; font-weight: 800; color: var(--accent-deep);
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.esc-cta-row[b-hc60b8n92a] { display: flex; gap: 10px; }
.esc-cta-row[b-hc60b8n92a]  .esc-cta { flex: 1; justify-content: center; }

/* ── spec card ── */
.esc-spec-sub[b-hc60b8n92a] { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
.esc-spec-stats[b-hc60b8n92a] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.esc-coverage[b-hc60b8n92a] {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding: 12px 14px;
    border-radius: 13px;
    background: var(--sky-50); border: 1px solid var(--sky-line);
    font-size: 13.5px; color: var(--ink-2);
}
.esc-coverage i[b-hc60b8n92a] { color: var(--accent); font-size: 16px; }
.esc-coverage b[b-hc60b8n92a] { color: var(--ink); }
.esc-coverage__hint[b-hc60b8n92a] { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ═════════════════ HƯỚNG DẪN — 3 bước đánh số ═════════════════ */
.pesc-how[b-hc60b8n92a] {
    background: linear-gradient(180deg, var(--sky-50), var(--sky-100));
    border: 1px solid var(--sky-line);
    border-radius: 20px;
    padding: 2rem 1.8rem 2.2rem;
    text-align: center;
}
.pesc-how .pesc-eyebrow[b-hc60b8n92a] { justify-content: center; }
.pesc-how h2[b-hc60b8n92a] { margin-bottom: 1.6rem; }
.pesc-steps[b-hc60b8n92a] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pesc-step[b-hc60b8n92a] {
    position: relative;
    background: #fff;
    border: 1px solid var(--sky-line);
    border-radius: 16px;
    padding: 2rem 1.2rem 1.4rem;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pesc-step:hover[b-hc60b8n92a] { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 16px 32px -18px rgba(234, 88, 12, .3); }
.pesc-step-no[b-hc60b8n92a] {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 28px;
    background: var(--board); color: var(--amber);
    border-radius: 8px;
    font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 16px -8px rgba(15, 36, 56, .5);
}
.pesc-step-ic[b-hc60b8n92a] {
    width: 52px; height: 52px; margin: .6rem auto .9rem;
    border-radius: 50%;
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 1.35rem;
}
.pesc-step h4[b-hc60b8n92a] { margin: 0 0 .4rem; font-size: .98rem; font-weight: 700; color: var(--ink); }
.pesc-step p[b-hc60b8n92a] { margin: 0; font-size: .82rem; color: var(--ink-3); line-height: 1.55; }

/* ═════════════════ Thanh mua nhanh (chỉ màn nhỏ) ═════════════════ */
.pesc-mbar[b-hc60b8n92a] { display: none; }

/* ═════════════════ MOTION ═════════════════ */
@media (prefers-reduced-motion: no-preference) {
    .pesc-hero-plane[b-hc60b8n92a] { animation: pesc-drift-b-hc60b8n92a 15s ease-in-out infinite alternate; }
}
@keyframes pesc-drift-b-hc60b8n92a {
    from { transform: rotate(42deg) translate(-3px, 2px); }
    to { transform: rotate(42deg) translate(6px, -4px); }
}

/* ═════════════════ RESPONSIVE ═════════════════ */
@media (max-width: 900px) {
    /* minmax(0,…) chứ KHÔNG phải 1fr: 1fr = minmax(auto,1fr) nên cột không co được
       dưới min-content của thẻ con → cả trang tràn ngang trên điện thoại. */
    .pesc-buy[b-hc60b8n92a] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "spec" "buy";
    }
    /* mobile: buy box theo luồng, dùng thanh cố định đáy để mua nhanh */
    .pesc-buybox[b-hc60b8n92a] { position: static; top: auto; }

    /* Thanh mua nhanh nổi ở đáy — luôn trong tầm tay khi cuộn */
    .pesc-mbar[b-hc60b8n92a] {
        display: flex; align-items: center; gap: 10px;
        position: sticky; bottom: 12px; z-index: 40;
        margin-top: 1.4rem;
        padding: 9px 10px 9px 4px;
        background: #fff;
        border: 1px solid var(--sky-line);
        border-radius: 15px;
        box-shadow: 0 16px 34px -12px rgba(15, 36, 56, .4);
    }
    .pesc-mbar-info[b-hc60b8n92a] { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-left: 12px; }
    .pesc-mbar-lbl[b-hc60b8n92a] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
    .pesc-mbar-val[b-hc60b8n92a] { font-size: 1.12rem; font-weight: 800; color: var(--accent-deep); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pesc-mbar[b-hc60b8n92a]  .pesc-mbar-cart { flex: 0 0 auto; }
    .pesc-mbar[b-hc60b8n92a]  .pesc-mbar-buy { flex: 0 0 auto; min-width: 120px; justify-content: center; }
}

@media (max-width: 640px) {
    .pubesc-wrap[b-hc60b8n92a], .pesc-wrap[b-hc60b8n92a] { padding: 0 16px; }
    .pesc-topbar[b-hc60b8n92a] { padding-top: 78px; }
    .pesc-hero-plane[b-hc60b8n92a] { display: none; }
    .esc-row[b-hc60b8n92a] { flex-direction: column; gap: 6px; }
    .esc-row__lbl[b-hc60b8n92a] { padding-top: 0; }
    .esc-cta-row[b-hc60b8n92a] { flex-direction: column; }
    .pesc-tag[b-hc60b8n92a] { left: 0; }
    .pesc-steps[b-hc60b8n92a] { grid-template-columns: 1fr; }
    /* thẻ hẹp lại → trả thêm bề ngang cho nội dung */
    .pesc-card[b-hc60b8n92a] { padding: 1.1rem 1rem; border-radius: 16px; }
    .pesc-how[b-hc60b8n92a] { padding: 1.6rem 1rem 1.8rem; border-radius: 16px; }
    /* header card: ảnh lên trên, tên + chọn gói xuống dưới */
    .pesc-head-card[b-hc60b8n92a] { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
    .pesc-hc-media[b-hc60b8n92a] { max-width: 360px; margin: 0 auto; width: 100%; min-width: 0; }
    /* min-height + aspect-ratio tạo sàn min-content 330px (200 × 16/10 + viền) khiến
       lưới cha phình ra ngoài viewport — bỏ sàn, để tỉ lệ tự co theo bề ngang. */
    .pesc-win[b-hc60b8n92a] { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
    /* lưới thông số 2 cột quá chật ở mobile → 1 cột */
    .pesc-specs[b-hc60b8n92a] { grid-template-columns: 1fr; }
}

/* Điện thoại nhỏ (≤400px): thanh mua nhanh phải vừa cả giá lẫn 2 nút */
@media (max-width: 400px) {
    .pesc-mbar[b-hc60b8n92a] { gap: 8px; padding: 8px 8px 8px 4px; }
    .pesc-mbar-info[b-hc60b8n92a] { padding-left: 8px; }
    .pesc-mbar-val[b-hc60b8n92a] { font-size: 1rem; }
    .pesc-mbar[b-hc60b8n92a]  .pesc-mbar-buy { min-width: 0; padding-left: 14px; padding-right: 14px; }
}
/* /src/Features/Esim/Pages/Public/EsimRedeem.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   EsimRedeem (public) — Nm* UI-kit + token --nm-*.
   Kích hoạt / tra cứu trạng thái / nạp thêm data cho eSIM đã mua.
   ═══════════════════════════════════════════════════════════════ */
.esredeem-root[b-h5fct01kql] {
    background: var(--nm-bg);
    color: var(--nm-ink);
    font-family: var(--nm-font);
    min-height: 100vh;
}

.esredeem-wrap[b-h5fct01kql] {
    max-width: 760px;
    margin: 0 auto;
    padding: 96px 20px 48px; /* chừa header public fixed */
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.esredeem-wrap[b-h5fct01kql]  .esredeem-back { align-self: flex-start; }

.nm-list-head[b-h5fct01kql] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nm-list-title[b-h5fct01kql] { margin: 0; font-size: 22px; font-weight: 800; color: var(--nm-ink); }

/* stack form / kết quả trong mỗi tab */
.esredeem-stack[b-h5fct01kql] { display: flex; flex-direction: column; gap: 14px; }

.esredeem-stack[b-h5fct01kql]  .esredeem-full { width: 100%; justify-content: center; }

/* hàng serial + nút kiểm tra (tab top-up) */
.esredeem-serial-row[b-h5fct01kql] { display: flex; gap: 8px; }
.esredeem-serial-row[b-h5fct01kql]  .nm-input-wrap { flex: 1; }

/* khối kết quả */
.esredeem-result[b-h5fct01kql] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.esredeem-result__title[b-h5fct01kql] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }

.esredeem-remaining[b-h5fct01kql] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.esredeem-link[b-h5fct01kql] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--nm-brand-600);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--nm-font);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.esredeem-link:hover[b-h5fct01kql] { color: var(--nm-brand-700); }

/* khối QR / cài đặt nhanh */
.esredeem-qr[b-h5fct01kql] {
    text-align: center;
    padding: 14px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.esredeem-qr__title[b-h5fct01kql] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); margin-bottom: 10px; }
.esredeem-qr img[b-h5fct01kql] {
    width: 192px;
    height: 192px;
    max-width: 100%;
    border-radius: var(--nm-r-input);
    border: 1px solid var(--nm-border);
    margin: 0 auto;
    display: block;
}
.esredeem-qr__hint[b-h5fct01kql] { font-size: 12px; color: var(--nm-muted); margin-top: 8px; }

/* danh sách gói nạp */
.esredeem-pkg-list[b-h5fct01kql] { display: flex; flex-direction: column; gap: 10px; }
.esredeem-pkg[b-h5fct01kql] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    transition: border-color .12s, box-shadow .12s;
}
.esredeem-pkg:hover[b-h5fct01kql] { border-color: var(--nm-border-strong); box-shadow: var(--nm-shadow-sm); }
.esredeem-pkg__info[b-h5fct01kql] { min-width: 0; }
.esredeem-pkg__name[b-h5fct01kql] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.esredeem-pkg__meta[b-h5fct01kql] { font-size: 12px; color: var(--nm-muted); margin-top: 2px; }
.esredeem-pkg__side[b-h5fct01kql] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.esredeem-pkg__price[b-h5fct01kql] {
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-brand-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* trợ giúp */
.esredeem-help[b-h5fct01kql] {
    text-align: center;
    font-size: 13px;
    color: var(--nm-muted);
}
.esredeem-help a[b-h5fct01kql] { color: var(--nm-brand-600); font-weight: 600; text-decoration: none; }
.esredeem-help a:hover[b-h5fct01kql] { color: var(--nm-brand-700); }

/* ── responsive ── */
@media (max-width: 640px) {
    .esredeem-wrap[b-h5fct01kql] { padding: 88px 14px 32px; }
    .esredeem-pkg[b-h5fct01kql] { flex-direction: column; align-items: stretch; }
    .esredeem-pkg__side[b-h5fct01kql] { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* /src/Features/FastTrack/Pages/Manager/Admin/Addons.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Addons — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ftaddon-
   ═══════════════════════════════════════════════════════════════ */

.ftaddon-root[b-66bo9b1ck0] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftaddon-num[b-66bo9b1ck0] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftaddon-btn[b-66bo9b1ck0] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.ftaddon-btn:hover[b-66bo9b1ck0] { background: var(--d-surface-2); color: var(--d-ink); }
.ftaddon-btn:disabled[b-66bo9b1ck0] { opacity: 0.5; cursor: not-allowed; }
.ftaddon-btn-accent[b-66bo9b1ck0] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}
.ftaddon-btn-accent:hover[b-66bo9b1ck0] { background: var(--d-accent-grad-hover); color: #fff; }
.ftaddon-btn-accent:disabled[b-66bo9b1ck0] {
    background: var(--d-line);
    color: var(--d-ink-4);
    box-shadow: none;
}
.ftaddon-btn-sm[b-66bo9b1ck0] { height: 32px; padding: 0 12px; font-size: 12px; }
.ftaddon-btn-icon[b-66bo9b1ck0] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftaddon-btn-icon:hover[b-66bo9b1ck0] { background: var(--d-surface-2); color: var(--d-ink); }

/* ─── Card primitive ─── */
.ftaddon-card[b-66bo9b1ck0] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filters / Toolbar ─── */
.ftaddon-toolbar[b-66bo9b1ck0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
}
.ftaddon-search[b-66bo9b1ck0] {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.ftaddon-search svg[b-66bo9b1ck0] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); pointer-events: none;
}
.ftaddon-input[b-66bo9b1ck0] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.ftaddon-input:focus[b-66bo9b1ck0] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftaddon-search .ftaddon-input[b-66bo9b1ck0] { padding-left: 36px; }
.ftaddon-select[b-66bo9b1ck0] {
    height: 36px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    min-width: 140px;
}
.ftaddon-select:focus[b-66bo9b1ck0] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftaddon-chip-reset[b-66bo9b1ck0] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; border-radius: var(--d-r);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.ftaddon-count[b-66bo9b1ck0] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.ftaddon-count b[b-66bo9b1ck0] {
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Tables ─── */
.ftaddon-tbl-wrap[b-66bo9b1ck0] {
    overflow: auto;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 260px);
    border-top: 1px solid var(--d-line);
}
.ftaddon-tbl[b-66bo9b1ck0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ftaddon-tbl thead th[b-66bo9b1ck0] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}
.ftaddon-tbl thead th.right[b-66bo9b1ck0] { text-align: right; }
.ftaddon-tbl thead th.no-sort[b-66bo9b1ck0] { cursor: default; }
.ftaddon-tbl thead th .sort-wrap[b-66bo9b1ck0] {
    display: inline-flex; align-items: center; gap: 4px;
}
.ftaddon-tbl thead th.right .sort-wrap[b-66bo9b1ck0] { justify-content: flex-end; }
.ftaddon-tbl tbody td[b-66bo9b1ck0] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.ftaddon-tbl tbody tr:last-child td[b-66bo9b1ck0] { border-bottom: 0; }
.ftaddon-tbl tbody tr:hover[b-66bo9b1ck0] { background: var(--d-surface-2); }
.ftaddon-tbl td.right[b-66bo9b1ck0] { text-align: right; }
.ftaddon-tbl td.center[b-66bo9b1ck0] { text-align: center; }
.ftaddon-tbl-code[b-66bo9b1ck0] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftaddon-tbl-name[b-66bo9b1ck0] {
    font-weight: 500;
    color: var(--d-ink);
}
.ftaddon-tbl-num[b-66bo9b1ck0] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}
.ftaddon-tbl-unit[b-66bo9b1ck0] {
    color: var(--d-ink-4);
    font-size: 10.5px;
    margin-left: 4px;
}

/* ─── Status pill ─── */
.ftaddon-tag[b-66bo9b1ck0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}
.ftaddon-tag .d[b-66bo9b1ck0] {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ftaddon-tag.good[b-66bo9b1ck0] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}
.ftaddon-tag.good .d[b-66bo9b1ck0] { background: var(--d-good); }
.ftaddon-tag.draft[b-66bo9b1ck0] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}
.ftaddon-tag.draft .d[b-66bo9b1ck0] { background: var(--d-ink-4); }
.ftaddon-tag.danger[b-66bo9b1ck0] {
    background: color-mix(in srgb, var(--d-danger) 12%, transparent);
    color: var(--d-danger);
}
.ftaddon-tag.danger .d[b-66bo9b1ck0] { background: var(--d-danger); }
.ftaddon-tag.info[b-66bo9b1ck0] {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}
.ftaddon-tag.violet[b-66bo9b1ck0] {
    background: color-mix(in srgb, #7c3aed 12%, transparent);
    color: #6d28d9;
}

/* ─── Row actions ─── */
.ftaddon-actions[b-66bo9b1ck0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.ftaddon-icon-btn[b-66bo9b1ck0] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftaddon-icon-btn:hover[b-66bo9b1ck0] { background: var(--d-surface-2); color: var(--d-ink); }
.ftaddon-icon-btn.edit:hover[b-66bo9b1ck0] {
    background: color-mix(in srgb, #2563eb 10%, transparent);
    color: #2563eb;
}
.ftaddon-icon-btn.warn:hover[b-66bo9b1ck0] {
    background: color-mix(in srgb, var(--d-warn) 12%, transparent);
    color: var(--d-warn);
}
.ftaddon-icon-btn.good:hover[b-66bo9b1ck0] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}

/* ─── Empty / Loading ─── */
.ftaddon-empty[b-66bo9b1ck0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 16px;
    color: var(--d-ink-3);
    text-align: center;
}
.ftaddon-empty b[b-66bo9b1ck0] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}
.ftaddon-empty small[b-66bo9b1ck0] {
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftaddon-empty svg[b-66bo9b1ck0] { color: var(--d-ink-4); }
.ftaddon-skel[b-66bo9b1ck0] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftaddon-pulse-b-66bo9b1ck0 1.2s ease-in-out infinite;
}
@keyframes ftaddon-pulse-b-66bo9b1ck0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Banner / Errors ─── */
.ftaddon-error-banner[b-66bo9b1ck0] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
}
.ftaddon-error-banner button[b-66bo9b1ck0] {
    background: transparent; border: 0; color: var(--d-danger);
    cursor: pointer; font-size: 14px; opacity: 0.6;
}
.ftaddon-error-banner button:hover[b-66bo9b1ck0] { opacity: 1; }

/* ─── Pagination ─── */
.ftaddon-pager[b-66bo9b1ck0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftaddon-pager b[b-66bo9b1ck0] {
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ftaddon-pager-controls[b-66bo9b1ck0] {
    display: inline-flex; align-items: center; gap: 6px;
}
.ftaddon-pager-btn[b-66bo9b1ck0] {
    height: 30px; padding: 0 10px; border-radius: 7px;
    border: 1px solid var(--d-line); background: var(--d-surface);
    color: var(--d-ink-2); font-size: 12px; cursor: pointer;
}
.ftaddon-pager-btn:hover:not(:disabled)[b-66bo9b1ck0] { background: var(--d-surface-2); }
.ftaddon-pager-btn:disabled[b-66bo9b1ck0] { opacity: 0.4; cursor: not-allowed; }

/* ─── Modal ─── */
.ftaddon-modal-backdrop[b-66bo9b1ck0] {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}
.ftaddon-modal[b-66bo9b1ck0] {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ftaddon-modal.sm[b-66bo9b1ck0] { max-width: 420px; }
.ftaddon-modal-hd[b-66bo9b1ck0] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}
.ftaddon-modal-hd h2[b-66bo9b1ck0] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}
.ftaddon-modal-hd .sub[b-66bo9b1ck0] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}
.ftaddon-modal-close[b-66bo9b1ck0] {
    width: 32px; height: 32px; border: 0; background: transparent;
    border-radius: 7px; color: var(--d-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ftaddon-modal-close:hover[b-66bo9b1ck0] { background: var(--d-surface-2); color: var(--d-ink); }
.ftaddon-modal-body[b-66bo9b1ck0] {
    flex: 1; overflow-y: auto; padding: 18px;
}
.ftaddon-modal-ft[b-66bo9b1ck0] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}
.ftaddon-modal-ft .hint[b-66bo9b1ck0] {
    font-size: 11px; color: var(--d-ink-4);
}
.ftaddon-modal-ft .hint kbd[b-66bo9b1ck0] {
    display: inline-block;
    padding: 1px 5px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--d-ink-3);
}
.ftaddon-modal-ft .grp[b-66bo9b1ck0] {
    display: inline-flex; gap: 8px;
}

/* ─── Form ─── */
.ftaddon-form[b-66bo9b1ck0] {
    display: flex; flex-direction: column; gap: 18px;
}
.ftaddon-section-title[b-66bo9b1ck0] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 4px;
}
.ftaddon-grid[b-66bo9b1ck0] { display: grid; gap: 14px; }
.ftaddon-grid.cols-2[b-66bo9b1ck0] { grid-template-columns: 1fr; }
.ftaddon-grid.cols-3[b-66bo9b1ck0] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ftaddon-grid.cols-2[b-66bo9b1ck0] { grid-template-columns: 1fr 1fr; }
    .ftaddon-grid.cols-3[b-66bo9b1ck0] { grid-template-columns: 1fr 1fr 1fr; }
}
.ftaddon-field-label[b-66bo9b1ck0] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.ftaddon-req[b-66bo9b1ck0] { color: var(--d-danger); }
.ftaddon-input.is-mono[b-66bo9b1ck0] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
}
.ftaddon-input.is-num[b-66bo9b1ck0] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 28px;
}
.ftaddon-input:disabled[b-66bo9b1ck0] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    cursor: not-allowed;
}
.ftaddon-input.is-error[b-66bo9b1ck0] {
    border-color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 5%, transparent);
}
.ftaddon-input.is-error:focus[b-66bo9b1ck0] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-danger) 15%, transparent);
}
.ftaddon-help[b-66bo9b1ck0] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-4);
}
.ftaddon-help.is-error[b-66bo9b1ck0] { color: var(--d-danger); }
.ftaddon-textarea[b-66bo9b1ck0] {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    resize: vertical;
}
.ftaddon-textarea:focus[b-66bo9b1ck0] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftaddon-price-wrap[b-66bo9b1ck0] {
    position: relative;
}
.ftaddon-price-wrap .cur[b-66bo9b1ck0] {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); font-size: 12px; pointer-events: none;
}

/* Stepper (sort order) */
.ftaddon-stepper[b-66bo9b1ck0] { display: flex; align-items: stretch; }
.ftaddon-stepper .step-btn[b-66bo9b1ck0] {
    width: 36px; padding: 0; border: 1px solid var(--d-line);
    background: var(--d-surface-2); color: var(--d-ink-3);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ftaddon-stepper .step-btn:hover[b-66bo9b1ck0] { background: var(--d-line); color: var(--d-ink); }
.ftaddon-stepper .step-btn.minus[b-66bo9b1ck0] { border-radius: var(--d-r) 0 0 var(--d-r); border-right: 0; }
.ftaddon-stepper .step-btn.plus[b-66bo9b1ck0] { border-radius: 0 var(--d-r) var(--d-r) 0; border-left: 0; }
.ftaddon-stepper .ftaddon-input[b-66bo9b1ck0] { border-radius: 0; text-align: center; }

/* Choice card (radio / checkbox tile) */
.ftaddon-choice-grid[b-66bo9b1ck0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ftaddon-choice[b-66bo9b1ck0] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--d-surface);
}
.ftaddon-choice:hover[b-66bo9b1ck0] { border-color: var(--d-ink-4); }
.ftaddon-choice.is-on[b-66bo9b1ck0] {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
}
.ftaddon-choice input[b-66bo9b1ck0] { accent-color: var(--d-accent); }
.ftaddon-choice .lbl[b-66bo9b1ck0] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
}
.ftaddon-choice .desc[b-66bo9b1ck0] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Confirm dialog row */
.ftaddon-confirm-row[b-66bo9b1ck0] {
    display: flex; align-items: flex-start; gap: 12px;
}
.ftaddon-confirm-ico[b-66bo9b1ck0] {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ftaddon-confirm-ico.warn[b-66bo9b1ck0] {
    background: var(--d-warn-soft); color: var(--d-warn);
}
.ftaddon-confirm-ico.good[b-66bo9b1ck0] {
    background: var(--d-good-soft); color: var(--d-good);
}
.ftaddon-confirm-row h3[b-66bo9b1ck0] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}
.ftaddon-confirm-row p[b-66bo9b1ck0] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftaddon-confirm-row p code[b-66bo9b1ck0] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

.ftaddon-btn-warn[b-66bo9b1ck0] {
    background: var(--d-warn);
    color: #fff;
    border-color: transparent;
}
.ftaddon-btn-warn:hover[b-66bo9b1ck0] { background: #b45309; color: #fff; }
.ftaddon-btn-good[b-66bo9b1ck0] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}
.ftaddon-btn-good:hover[b-66bo9b1ck0] { background: #15803d; color: #fff; }
.ftaddon-btn-danger[b-66bo9b1ck0] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}
.ftaddon-btn-danger:hover[b-66bo9b1ck0] { background: #b91c1c; color: #fff; }

.ftaddon-spinner[b-66bo9b1ck0] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ftaddon-spin-b-66bo9b1ck0 0.7s linear infinite;
}
@keyframes ftaddon-spin-b-66bo9b1ck0 { to { transform: rotate(360deg); } }
/* /src/Features/FastTrack/Pages/Manager/Admin/CancelReasons.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Addons — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ftcr-
   ═══════════════════════════════════════════════════════════════ */

.ftcr-root[b-90z1xf0ssk] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftcr-num[b-90z1xf0ssk] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftcr-btn[b-90z1xf0ssk] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.ftcr-btn:hover[b-90z1xf0ssk] { background: var(--d-surface-2); color: var(--d-ink); }
.ftcr-btn:disabled[b-90z1xf0ssk] { opacity: 0.5; cursor: not-allowed; }
.ftcr-btn-accent[b-90z1xf0ssk] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}
.ftcr-btn-accent:hover[b-90z1xf0ssk] { background: var(--d-accent-grad-hover); color: #fff; }
.ftcr-btn-accent:disabled[b-90z1xf0ssk] {
    background: var(--d-line);
    color: var(--d-ink-4);
    box-shadow: none;
}
.ftcr-btn-sm[b-90z1xf0ssk] { height: 32px; padding: 0 12px; font-size: 12px; }
.ftcr-btn-icon[b-90z1xf0ssk] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftcr-btn-icon:hover[b-90z1xf0ssk] { background: var(--d-surface-2); color: var(--d-ink); }

/* ─── Card primitive ─── */
.ftcr-card[b-90z1xf0ssk] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filters / Toolbar ─── */
.ftcr-toolbar[b-90z1xf0ssk] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
}
.ftcr-search[b-90z1xf0ssk] {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.ftcr-search svg[b-90z1xf0ssk] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); pointer-events: none;
}
.ftcr-input[b-90z1xf0ssk] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.ftcr-input:focus[b-90z1xf0ssk] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftcr-search .ftcr-input[b-90z1xf0ssk] { padding-left: 36px; }
.ftcr-select[b-90z1xf0ssk] {
    height: 36px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    min-width: 140px;
}
.ftcr-select:focus[b-90z1xf0ssk] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftcr-chip-reset[b-90z1xf0ssk] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; border-radius: var(--d-r);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.ftcr-count[b-90z1xf0ssk] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.ftcr-count b[b-90z1xf0ssk] {
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Tables ─── */
.ftcr-tbl-wrap[b-90z1xf0ssk] {
    overflow: auto;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 260px);
    border-top: 1px solid var(--d-line);
}
.ftcr-tbl[b-90z1xf0ssk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ftcr-tbl thead th[b-90z1xf0ssk] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}
.ftcr-tbl thead th.right[b-90z1xf0ssk] { text-align: right; }
.ftcr-tbl thead th.no-sort[b-90z1xf0ssk] { cursor: default; }
.ftcr-tbl thead th .sort-wrap[b-90z1xf0ssk] {
    display: inline-flex; align-items: center; gap: 4px;
}
.ftcr-tbl thead th.right .sort-wrap[b-90z1xf0ssk] { justify-content: flex-end; }
.ftcr-tbl tbody td[b-90z1xf0ssk] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.ftcr-tbl tbody tr:last-child td[b-90z1xf0ssk] { border-bottom: 0; }
.ftcr-tbl tbody tr:hover[b-90z1xf0ssk] { background: var(--d-surface-2); }
.ftcr-tbl td.right[b-90z1xf0ssk] { text-align: right; }
.ftcr-tbl td.center[b-90z1xf0ssk] { text-align: center; }
.ftcr-tbl-code[b-90z1xf0ssk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftcr-tbl-name[b-90z1xf0ssk] {
    font-weight: 500;
    color: var(--d-ink);
}
.ftcr-tbl-num[b-90z1xf0ssk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}
.ftcr-tbl-unit[b-90z1xf0ssk] {
    color: var(--d-ink-4);
    font-size: 10.5px;
    margin-left: 4px;
}

/* ─── Status pill ─── */
.ftcr-tag[b-90z1xf0ssk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}
.ftcr-tag .d[b-90z1xf0ssk] {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ftcr-tag.good[b-90z1xf0ssk] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}
.ftcr-tag.good .d[b-90z1xf0ssk] { background: var(--d-good); }
.ftcr-tag.draft[b-90z1xf0ssk] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}
.ftcr-tag.draft .d[b-90z1xf0ssk] { background: var(--d-ink-4); }
.ftcr-tag.danger[b-90z1xf0ssk] {
    background: color-mix(in srgb, var(--d-danger) 12%, transparent);
    color: var(--d-danger);
}
.ftcr-tag.danger .d[b-90z1xf0ssk] { background: var(--d-danger); }
.ftcr-tag.info[b-90z1xf0ssk] {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}
.ftcr-tag.violet[b-90z1xf0ssk] {
    background: color-mix(in srgb, #7c3aed 12%, transparent);
    color: #6d28d9;
}

/* ─── Row actions ─── */
.ftcr-actions[b-90z1xf0ssk] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.ftcr-icon-btn[b-90z1xf0ssk] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftcr-icon-btn:hover[b-90z1xf0ssk] { background: var(--d-surface-2); color: var(--d-ink); }
.ftcr-icon-btn.edit:hover[b-90z1xf0ssk] {
    background: color-mix(in srgb, #2563eb 10%, transparent);
    color: #2563eb;
}
.ftcr-icon-btn.warn:hover[b-90z1xf0ssk] {
    background: color-mix(in srgb, var(--d-warn) 12%, transparent);
    color: var(--d-warn);
}
.ftcr-icon-btn.good:hover[b-90z1xf0ssk] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}

/* ─── Empty / Loading ─── */
.ftcr-empty[b-90z1xf0ssk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 16px;
    color: var(--d-ink-3);
    text-align: center;
}
.ftcr-empty b[b-90z1xf0ssk] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}
.ftcr-empty small[b-90z1xf0ssk] {
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftcr-empty svg[b-90z1xf0ssk] { color: var(--d-ink-4); }
.ftcr-skel[b-90z1xf0ssk] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftcr-pulse-b-90z1xf0ssk 1.2s ease-in-out infinite;
}
@keyframes ftcr-pulse-b-90z1xf0ssk {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Banner / Errors ─── */
.ftcr-error-banner[b-90z1xf0ssk] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
}
.ftcr-error-banner button[b-90z1xf0ssk] {
    background: transparent; border: 0; color: var(--d-danger);
    cursor: pointer; font-size: 14px; opacity: 0.6;
}
.ftcr-error-banner button:hover[b-90z1xf0ssk] { opacity: 1; }

/* ─── Pagination ─── */
.ftcr-pager[b-90z1xf0ssk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftcr-pager b[b-90z1xf0ssk] {
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ftcr-pager-controls[b-90z1xf0ssk] {
    display: inline-flex; align-items: center; gap: 6px;
}
.ftcr-pager-btn[b-90z1xf0ssk] {
    height: 30px; padding: 0 10px; border-radius: 7px;
    border: 1px solid var(--d-line); background: var(--d-surface);
    color: var(--d-ink-2); font-size: 12px; cursor: pointer;
}
.ftcr-pager-btn:hover:not(:disabled)[b-90z1xf0ssk] { background: var(--d-surface-2); }
.ftcr-pager-btn:disabled[b-90z1xf0ssk] { opacity: 0.4; cursor: not-allowed; }

/* ─── Modal ─── */
.ftcr-modal-backdrop[b-90z1xf0ssk] {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}
.ftcr-modal[b-90z1xf0ssk] {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ftcr-modal.sm[b-90z1xf0ssk] { max-width: 420px; }
.ftcr-modal-hd[b-90z1xf0ssk] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}
.ftcr-modal-hd h2[b-90z1xf0ssk] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}
.ftcr-modal-hd .sub[b-90z1xf0ssk] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}
.ftcr-modal-close[b-90z1xf0ssk] {
    width: 32px; height: 32px; border: 0; background: transparent;
    border-radius: 7px; color: var(--d-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ftcr-modal-close:hover[b-90z1xf0ssk] { background: var(--d-surface-2); color: var(--d-ink); }
.ftcr-modal-body[b-90z1xf0ssk] {
    flex: 1; overflow-y: auto; padding: 18px;
}
.ftcr-modal-ft[b-90z1xf0ssk] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}
.ftcr-modal-ft .hint[b-90z1xf0ssk] {
    font-size: 11px; color: var(--d-ink-4);
}
.ftcr-modal-ft .hint kbd[b-90z1xf0ssk] {
    display: inline-block;
    padding: 1px 5px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--d-ink-3);
}
.ftcr-modal-ft .grp[b-90z1xf0ssk] {
    display: inline-flex; gap: 8px;
}

/* ─── Form ─── */
.ftcr-form[b-90z1xf0ssk] {
    display: flex; flex-direction: column; gap: 18px;
}
.ftcr-section-title[b-90z1xf0ssk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 4px;
}
.ftcr-grid[b-90z1xf0ssk] { display: grid; gap: 14px; }
.ftcr-grid.cols-2[b-90z1xf0ssk] { grid-template-columns: 1fr; }
.ftcr-grid.cols-3[b-90z1xf0ssk] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ftcr-grid.cols-2[b-90z1xf0ssk] { grid-template-columns: 1fr 1fr; }
    .ftcr-grid.cols-3[b-90z1xf0ssk] { grid-template-columns: 1fr 1fr 1fr; }
}
.ftcr-field-label[b-90z1xf0ssk] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.ftcr-req[b-90z1xf0ssk] { color: var(--d-danger); }
.ftcr-input.is-mono[b-90z1xf0ssk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
}
.ftcr-input.is-num[b-90z1xf0ssk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 28px;
}
.ftcr-input:disabled[b-90z1xf0ssk] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    cursor: not-allowed;
}
.ftcr-input.is-error[b-90z1xf0ssk] {
    border-color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 5%, transparent);
}
.ftcr-input.is-error:focus[b-90z1xf0ssk] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-danger) 15%, transparent);
}
.ftcr-help[b-90z1xf0ssk] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-4);
}
.ftcr-help.is-error[b-90z1xf0ssk] { color: var(--d-danger); }
.ftcr-textarea[b-90z1xf0ssk] {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    resize: vertical;
}
.ftcr-textarea:focus[b-90z1xf0ssk] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftcr-price-wrap[b-90z1xf0ssk] {
    position: relative;
}
.ftcr-price-wrap .cur[b-90z1xf0ssk] {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); font-size: 12px; pointer-events: none;
}

/* Stepper (sort order) */
.ftcr-stepper[b-90z1xf0ssk] { display: flex; align-items: stretch; }
.ftcr-stepper .step-btn[b-90z1xf0ssk] {
    width: 36px; padding: 0; border: 1px solid var(--d-line);
    background: var(--d-surface-2); color: var(--d-ink-3);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ftcr-stepper .step-btn:hover[b-90z1xf0ssk] { background: var(--d-line); color: var(--d-ink); }
.ftcr-stepper .step-btn.minus[b-90z1xf0ssk] { border-radius: var(--d-r) 0 0 var(--d-r); border-right: 0; }
.ftcr-stepper .step-btn.plus[b-90z1xf0ssk] { border-radius: 0 var(--d-r) var(--d-r) 0; border-left: 0; }
.ftcr-stepper .ftcr-input[b-90z1xf0ssk] { border-radius: 0; text-align: center; }

/* Choice card (radio / checkbox tile) */
.ftcr-choice-grid[b-90z1xf0ssk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ftcr-choice[b-90z1xf0ssk] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--d-surface);
}
.ftcr-choice:hover[b-90z1xf0ssk] { border-color: var(--d-ink-4); }
.ftcr-choice.is-on[b-90z1xf0ssk] {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
}
.ftcr-choice input[b-90z1xf0ssk] { accent-color: var(--d-accent); }
.ftcr-choice .lbl[b-90z1xf0ssk] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
}
.ftcr-choice .desc[b-90z1xf0ssk] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Confirm dialog row */
.ftcr-confirm-row[b-90z1xf0ssk] {
    display: flex; align-items: flex-start; gap: 12px;
}
.ftcr-confirm-ico[b-90z1xf0ssk] {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ftcr-confirm-ico.warn[b-90z1xf0ssk] {
    background: var(--d-warn-soft); color: var(--d-warn);
}
.ftcr-confirm-ico.good[b-90z1xf0ssk] {
    background: var(--d-good-soft); color: var(--d-good);
}
.ftcr-confirm-row h3[b-90z1xf0ssk] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}
.ftcr-confirm-row p[b-90z1xf0ssk] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftcr-confirm-row p code[b-90z1xf0ssk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

.ftcr-btn-warn[b-90z1xf0ssk] {
    background: var(--d-warn);
    color: #fff;
    border-color: transparent;
}
.ftcr-btn-warn:hover[b-90z1xf0ssk] { background: #b45309; color: #fff; }
.ftcr-btn-good[b-90z1xf0ssk] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}
.ftcr-btn-good:hover[b-90z1xf0ssk] { background: #15803d; color: #fff; }
.ftcr-btn-danger[b-90z1xf0ssk] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}
.ftcr-btn-danger:hover[b-90z1xf0ssk] { background: #b91c1c; color: #fff; }

.ftcr-spinner[b-90z1xf0ssk] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ftcr-spin-b-90z1xf0ssk 0.7s linear infinite;
}
@keyframes ftcr-spin-b-90z1xf0ssk { to { transform: rotate(360deg); } }
/* /src/Features/FastTrack/Pages/Manager/Admin/Channels.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Addons — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ftchan-
   ═══════════════════════════════════════════════════════════════ */

.ftchan-root[b-doo82ka01u] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftchan-num[b-doo82ka01u] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftchan-btn[b-doo82ka01u] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.ftchan-btn:hover[b-doo82ka01u] { background: var(--d-surface-2); color: var(--d-ink); }
.ftchan-btn:disabled[b-doo82ka01u] { opacity: 0.5; cursor: not-allowed; }
.ftchan-btn-accent[b-doo82ka01u] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}
.ftchan-btn-accent:hover[b-doo82ka01u] { background: var(--d-accent-grad-hover); color: #fff; }
.ftchan-btn-accent:disabled[b-doo82ka01u] {
    background: var(--d-line);
    color: var(--d-ink-4);
    box-shadow: none;
}
.ftchan-btn-sm[b-doo82ka01u] { height: 32px; padding: 0 12px; font-size: 12px; }
.ftchan-btn-icon[b-doo82ka01u] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftchan-btn-icon:hover[b-doo82ka01u] { background: var(--d-surface-2); color: var(--d-ink); }

/* ─── Card primitive ─── */
.ftchan-card[b-doo82ka01u] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filters / Toolbar ─── */
.ftchan-toolbar[b-doo82ka01u] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
}
.ftchan-search[b-doo82ka01u] {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.ftchan-search svg[b-doo82ka01u] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); pointer-events: none;
}
.ftchan-input[b-doo82ka01u] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.ftchan-input:focus[b-doo82ka01u] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftchan-search .ftchan-input[b-doo82ka01u] { padding-left: 36px; }
.ftchan-select[b-doo82ka01u] {
    height: 36px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    min-width: 140px;
}
.ftchan-select:focus[b-doo82ka01u] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftchan-chip-reset[b-doo82ka01u] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; border-radius: var(--d-r);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.ftchan-count[b-doo82ka01u] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.ftchan-count b[b-doo82ka01u] {
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Tables ─── */
.ftchan-tbl-wrap[b-doo82ka01u] {
    overflow: auto;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 260px);
    border-top: 1px solid var(--d-line);
}
.ftchan-tbl[b-doo82ka01u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ftchan-tbl thead th[b-doo82ka01u] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}
.ftchan-tbl thead th.right[b-doo82ka01u] { text-align: right; }
.ftchan-tbl thead th.no-sort[b-doo82ka01u] { cursor: default; }
.ftchan-tbl thead th .sort-wrap[b-doo82ka01u] {
    display: inline-flex; align-items: center; gap: 4px;
}
.ftchan-tbl thead th.right .sort-wrap[b-doo82ka01u] { justify-content: flex-end; }
.ftchan-tbl tbody td[b-doo82ka01u] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.ftchan-tbl tbody tr:last-child td[b-doo82ka01u] { border-bottom: 0; }
.ftchan-tbl tbody tr:hover[b-doo82ka01u] { background: var(--d-surface-2); }
.ftchan-tbl td.right[b-doo82ka01u] { text-align: right; }
.ftchan-tbl td.center[b-doo82ka01u] { text-align: center; }
.ftchan-tbl-code[b-doo82ka01u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftchan-tbl-name[b-doo82ka01u] {
    font-weight: 500;
    color: var(--d-ink);
}
.ftchan-tbl-num[b-doo82ka01u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}
.ftchan-tbl-unit[b-doo82ka01u] {
    color: var(--d-ink-4);
    font-size: 10.5px;
    margin-left: 4px;
}

/* ─── Status pill ─── */
.ftchan-tag[b-doo82ka01u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}
.ftchan-tag .d[b-doo82ka01u] {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ftchan-tag.good[b-doo82ka01u] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}
.ftchan-tag.good .d[b-doo82ka01u] { background: var(--d-good); }
.ftchan-tag.draft[b-doo82ka01u] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}
.ftchan-tag.draft .d[b-doo82ka01u] { background: var(--d-ink-4); }
.ftchan-tag.danger[b-doo82ka01u] {
    background: color-mix(in srgb, var(--d-danger) 12%, transparent);
    color: var(--d-danger);
}
.ftchan-tag.danger .d[b-doo82ka01u] { background: var(--d-danger); }
.ftchan-tag.info[b-doo82ka01u] {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}
.ftchan-tag.violet[b-doo82ka01u] {
    background: color-mix(in srgb, #7c3aed 12%, transparent);
    color: #6d28d9;
}

/* ─── Row actions ─── */
.ftchan-actions[b-doo82ka01u] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.ftchan-icon-btn[b-doo82ka01u] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftchan-icon-btn:hover[b-doo82ka01u] { background: var(--d-surface-2); color: var(--d-ink); }
.ftchan-icon-btn.edit:hover[b-doo82ka01u] {
    background: color-mix(in srgb, #2563eb 10%, transparent);
    color: #2563eb;
}
.ftchan-icon-btn.warn:hover[b-doo82ka01u] {
    background: color-mix(in srgb, var(--d-warn) 12%, transparent);
    color: var(--d-warn);
}
.ftchan-icon-btn.good:hover[b-doo82ka01u] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}

/* ─── Empty / Loading ─── */
.ftchan-empty[b-doo82ka01u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 16px;
    color: var(--d-ink-3);
    text-align: center;
}
.ftchan-empty b[b-doo82ka01u] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}
.ftchan-empty small[b-doo82ka01u] {
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftchan-empty svg[b-doo82ka01u] { color: var(--d-ink-4); }
.ftchan-skel[b-doo82ka01u] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftchan-pulse-b-doo82ka01u 1.2s ease-in-out infinite;
}
@keyframes ftchan-pulse-b-doo82ka01u {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Banner / Errors ─── */
.ftchan-error-banner[b-doo82ka01u] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
}
.ftchan-error-banner button[b-doo82ka01u] {
    background: transparent; border: 0; color: var(--d-danger);
    cursor: pointer; font-size: 14px; opacity: 0.6;
}
.ftchan-error-banner button:hover[b-doo82ka01u] { opacity: 1; }

/* ─── Pagination ─── */
.ftchan-pager[b-doo82ka01u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftchan-pager b[b-doo82ka01u] {
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ftchan-pager-controls[b-doo82ka01u] {
    display: inline-flex; align-items: center; gap: 6px;
}
.ftchan-pager-btn[b-doo82ka01u] {
    height: 30px; padding: 0 10px; border-radius: 7px;
    border: 1px solid var(--d-line); background: var(--d-surface);
    color: var(--d-ink-2); font-size: 12px; cursor: pointer;
}
.ftchan-pager-btn:hover:not(:disabled)[b-doo82ka01u] { background: var(--d-surface-2); }
.ftchan-pager-btn:disabled[b-doo82ka01u] { opacity: 0.4; cursor: not-allowed; }

/* ─── Modal ─── */
.ftchan-modal-backdrop[b-doo82ka01u] {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}
.ftchan-modal[b-doo82ka01u] {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ftchan-modal.sm[b-doo82ka01u] { max-width: 420px; }
.ftchan-modal-hd[b-doo82ka01u] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}
.ftchan-modal-hd h2[b-doo82ka01u] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}
.ftchan-modal-hd .sub[b-doo82ka01u] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}
.ftchan-modal-close[b-doo82ka01u] {
    width: 32px; height: 32px; border: 0; background: transparent;
    border-radius: 7px; color: var(--d-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ftchan-modal-close:hover[b-doo82ka01u] { background: var(--d-surface-2); color: var(--d-ink); }
.ftchan-modal-body[b-doo82ka01u] {
    flex: 1; overflow-y: auto; padding: 18px;
}
.ftchan-modal-ft[b-doo82ka01u] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}
.ftchan-modal-ft .hint[b-doo82ka01u] {
    font-size: 11px; color: var(--d-ink-4);
}
.ftchan-modal-ft .hint kbd[b-doo82ka01u] {
    display: inline-block;
    padding: 1px 5px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--d-ink-3);
}
.ftchan-modal-ft .grp[b-doo82ka01u] {
    display: inline-flex; gap: 8px;
}

/* ─── Form ─── */
.ftchan-form[b-doo82ka01u] {
    display: flex; flex-direction: column; gap: 18px;
}
.ftchan-section-title[b-doo82ka01u] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 4px;
}
.ftchan-grid[b-doo82ka01u] { display: grid; gap: 14px; }
.ftchan-grid.cols-2[b-doo82ka01u] { grid-template-columns: 1fr; }
.ftchan-grid.cols-3[b-doo82ka01u] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ftchan-grid.cols-2[b-doo82ka01u] { grid-template-columns: 1fr 1fr; }
    .ftchan-grid.cols-3[b-doo82ka01u] { grid-template-columns: 1fr 1fr 1fr; }
}
.ftchan-field-label[b-doo82ka01u] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.ftchan-req[b-doo82ka01u] { color: var(--d-danger); }
.ftchan-input.is-mono[b-doo82ka01u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
}
.ftchan-input.is-num[b-doo82ka01u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 28px;
}
.ftchan-input:disabled[b-doo82ka01u] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    cursor: not-allowed;
}
.ftchan-input.is-error[b-doo82ka01u] {
    border-color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 5%, transparent);
}
.ftchan-input.is-error:focus[b-doo82ka01u] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-danger) 15%, transparent);
}
.ftchan-help[b-doo82ka01u] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-4);
}
.ftchan-help.is-error[b-doo82ka01u] { color: var(--d-danger); }
.ftchan-textarea[b-doo82ka01u] {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    resize: vertical;
}
.ftchan-textarea:focus[b-doo82ka01u] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftchan-price-wrap[b-doo82ka01u] {
    position: relative;
}
.ftchan-price-wrap .cur[b-doo82ka01u] {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); font-size: 12px; pointer-events: none;
}

/* Stepper (sort order) */
.ftchan-stepper[b-doo82ka01u] { display: flex; align-items: stretch; }
.ftchan-stepper .step-btn[b-doo82ka01u] {
    width: 36px; padding: 0; border: 1px solid var(--d-line);
    background: var(--d-surface-2); color: var(--d-ink-3);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ftchan-stepper .step-btn:hover[b-doo82ka01u] { background: var(--d-line); color: var(--d-ink); }
.ftchan-stepper .step-btn.minus[b-doo82ka01u] { border-radius: var(--d-r) 0 0 var(--d-r); border-right: 0; }
.ftchan-stepper .step-btn.plus[b-doo82ka01u] { border-radius: 0 var(--d-r) var(--d-r) 0; border-left: 0; }
.ftchan-stepper .ftchan-input[b-doo82ka01u] { border-radius: 0; text-align: center; }

/* Choice card (radio / checkbox tile) */
.ftchan-choice-grid[b-doo82ka01u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ftchan-choice[b-doo82ka01u] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--d-surface);
}
.ftchan-choice:hover[b-doo82ka01u] { border-color: var(--d-ink-4); }
.ftchan-choice.is-on[b-doo82ka01u] {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
}
.ftchan-choice input[b-doo82ka01u] { accent-color: var(--d-accent); }
.ftchan-choice .lbl[b-doo82ka01u] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
}
.ftchan-choice .desc[b-doo82ka01u] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Confirm dialog row */
.ftchan-confirm-row[b-doo82ka01u] {
    display: flex; align-items: flex-start; gap: 12px;
}
.ftchan-confirm-ico[b-doo82ka01u] {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ftchan-confirm-ico.warn[b-doo82ka01u] {
    background: var(--d-warn-soft); color: var(--d-warn);
}
.ftchan-confirm-ico.good[b-doo82ka01u] {
    background: var(--d-good-soft); color: var(--d-good);
}
.ftchan-confirm-row h3[b-doo82ka01u] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}
.ftchan-confirm-row p[b-doo82ka01u] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftchan-confirm-row p code[b-doo82ka01u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

.ftchan-btn-warn[b-doo82ka01u] {
    background: var(--d-warn);
    color: #fff;
    border-color: transparent;
}
.ftchan-btn-warn:hover[b-doo82ka01u] { background: #b45309; color: #fff; }
.ftchan-btn-good[b-doo82ka01u] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}
.ftchan-btn-good:hover[b-doo82ka01u] { background: #15803d; color: #fff; }
.ftchan-btn-danger[b-doo82ka01u] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}
.ftchan-btn-danger:hover[b-doo82ka01u] { background: #b91c1c; color: #fff; }

.ftchan-spinner[b-doo82ka01u] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ftchan-spin-b-doo82ka01u 0.7s linear infinite;
}
@keyframes ftchan-spin-b-doo82ka01u { to { transform: rotate(360deg); } }
/* /src/Features/FastTrack/Pages/Manager/Admin/CostRates.razor.rz.scp.css */
/* CostRates — Manager Dashboard v4 theme */
.ftcost-root[b-bilz65qjpz] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftcost-shell[b-bilz65qjpz] { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.ftcost-hero[b-bilz65qjpz] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.ftcost-hero h1[b-bilz65qjpz] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.ftcost-hero h1 em[b-bilz65qjpz] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.ftcost-hero-meta[b-bilz65qjpz] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.ftcost-hero-meta .dot[b-bilz65qjpz] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.ftcost-hero-actions[b-bilz65qjpz] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.ftcost-btn[b-bilz65qjpz] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.ftcost-btn:hover[b-bilz65qjpz] { background: var(--d-surface-2); }
.ftcost-btn-accent[b-bilz65qjpz] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.ftcost-btn-accent:hover[b-bilz65qjpz] { background: var(--d-accent-grad-hover); color: #fff; }
.ftcost-btn-accent:disabled[b-bilz65qjpz], .ftcost-btn-accent[disabled][b-bilz65qjpz] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }
.ftcost-btn-sm[b-bilz65qjpz] { height: 32px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.ftcost-btn-danger[b-bilz65qjpz] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ftcost-btn-danger:hover[b-bilz65qjpz] { background: #fee2e2; }
.ftcost-btn-solid-danger[b-bilz65qjpz] { background: var(--d-danger); color: #fff; border-color: transparent; }
.ftcost-btn-solid-danger:hover[b-bilz65qjpz] { background: #b91c1c; color: #fff; }

/* Cards */
.ftcost-card[b-bilz65qjpz] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.ftcost-card-flex[b-bilz65qjpz] { display: flex; flex-direction: column; }

/* Filter bar */
.ftcost-filter[b-bilz65qjpz] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.ftcost-filter .lbl[b-bilz65qjpz] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftcost-input[b-bilz65qjpz], .ftcost-select[b-bilz65qjpz] { height: 34px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.ftcost-input:focus[b-bilz65qjpz], .ftcost-select:focus[b-bilz65qjpz] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.ftcost-input.num[b-bilz65qjpz] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.ftcost-count[b-bilz65qjpz] { color: var(--d-ink-3); font-size: 11.5px; margin-left: auto; }
.ftcost-count b[b-bilz65qjpz] { color: var(--d-ink); font-weight: 600; }

/* Alert */
.ftcost-alert[b-bilz65qjpz] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
.ftcost-alert button[b-bilz65qjpz] { margin-left: auto; background: transparent; border: 0; color: #b91c1c; cursor: pointer; }

/* Table */
.ftcost-tbl-wrap[b-bilz65qjpz] { max-height: calc(100vh - 240px); display: flex; flex-direction: column; }
.ftcost-tbl-scroll[b-bilz65qjpz] { overflow: auto; flex: 1; }
.ftcost-tbl[b-bilz65qjpz] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftcost-tbl thead th[b-bilz65qjpz] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ftcost-tbl thead th.right[b-bilz65qjpz] { text-align: right; }
.ftcost-tbl thead th.center[b-bilz65qjpz] { text-align: center; }
.ftcost-tbl tbody td[b-bilz65qjpz] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.ftcost-tbl tbody tr:last-child td[b-bilz65qjpz] { border-bottom: 0; }
.ftcost-tbl tbody tr:hover[b-bilz65qjpz] { background: var(--d-surface-2); }
.ftcost-tbl td.right[b-bilz65qjpz] { text-align: right; }
.ftcost-tbl td.center[b-bilz65qjpz] { text-align: center; }
.ftcost-tbl .num[b-bilz65qjpz] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink); }
.ftcost-tbl .code[b-bilz65qjpz] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-3); }

/* Pills / Tags */
.ftcost-tag[b-bilz65qjpz] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); white-space: nowrap; }
.ftcost-tag.good[b-bilz65qjpz] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.ftcost-tag.danger[b-bilz65qjpz] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.ftcost-tag.muted[b-bilz65qjpz] { background: var(--d-surface-2); color: var(--d-ink-3); }
.ftcost-tag.info[b-bilz65qjpz] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.ftcost-tag .d[b-bilz65qjpz] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.ftcost-tag .d.dot-good[b-bilz65qjpz] { background: var(--d-good); }
.ftcost-tag .d.dot-mute[b-bilz65qjpz] { background: var(--d-ink-4); }

/* Skeleton */
.ftcost-sk[b-bilz65qjpz] { display: inline-block; height: 12px; background: linear-gradient(90deg, var(--d-surface-2) 0%, var(--d-line-2) 50%, var(--d-surface-2) 100%); background-size: 200% 100%; animation: ftcost-sh-b-bilz65qjpz 1.2s linear infinite; border-radius: 4px; }
@keyframes ftcost-sh-b-bilz65qjpz { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty */
.ftcost-empty[b-bilz65qjpz] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 16px; color: var(--d-ink-3); text-align: center; }
.ftcost-empty .ico[b-bilz65qjpz] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: grid; place-items: center; }
.ftcost-empty b[b-bilz65qjpz] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.ftcost-empty small[b-bilz65qjpz] { font-size: 12px; }

/* Row actions */
.ftcost-row-actions[b-bilz65qjpz] { display: flex; justify-content: flex-end; gap: 4px; }
.ftcost-icon-btn[b-bilz65qjpz] { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 0; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ftcost-icon-btn:hover[b-bilz65qjpz] { background: var(--d-surface-2); color: var(--d-ink); }
.ftcost-icon-btn.danger:hover[b-bilz65qjpz] { background: #fee2e2; color: #b91c1c; }

/* Pager */
.ftcost-pager[b-bilz65qjpz] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d-line); background: var(--d-surface); font-size: 11.5px; color: var(--d-ink-3); }
.ftcost-pager b[b-bilz65qjpz] { color: var(--d-ink); font-weight: 600; }
.ftcost-pager-right[b-bilz65qjpz] { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ftcost-pager .ftcost-select[b-bilz65qjpz] { height: 28px; padding: 0 8px; font-size: 11.5px; }
.ftcost-pager-btn[b-bilz65qjpz] { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); font-size: 11.5px; cursor: pointer; }
.ftcost-pager-btn:hover:not(:disabled)[b-bilz65qjpz] { background: var(--d-surface-2); }
.ftcost-pager-btn:disabled[b-bilz65qjpz] { opacity: .4; cursor: not-allowed; }

/* Modal */
.ftcost-modal-bg[b-bilz65qjpz] { position: fixed; inset: 0; background: rgba(28,25,23,0.45); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ftcost-modal[b-bilz65qjpz] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 700px; display: flex; flex-direction: column; max-height: 92vh; }
.ftcost-modal-hd[b-bilz65qjpz] { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--d-line); }
.ftcost-modal-hd h2[b-bilz65qjpz] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.ftcost-modal-hd p[b-bilz65qjpz] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.ftcost-modal-body[b-bilz65qjpz] { padding: 18px 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.ftcost-modal-ft[b-bilz65qjpz] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 12px 12px; font-size: 11.5px; color: var(--d-ink-3); }
.ftcost-modal-ft .actions[b-bilz65qjpz] { display: flex; gap: 8px; margin-left: auto; }
.ftcost-section h3[b-bilz65qjpz] { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftcost-grid[b-bilz65qjpz] { display: grid; gap: 12px; }
.ftcost-grid-2[b-bilz65qjpz] { grid-template-columns: 1fr 1fr; }
.ftcost-grid-3[b-bilz65qjpz] { grid-template-columns: 1fr 2fr; }
.ftcost-field[b-bilz65qjpz] { display: flex; flex-direction: column; gap: 6px; }
.ftcost-field label[b-bilz65qjpz] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.ftcost-field .req[b-bilz65qjpz] { color: var(--d-danger); }
.ftcost-field .hint[b-bilz65qjpz] { font-size: 11px; color: var(--d-ink-3); }
.ftcost-field .err[b-bilz65qjpz] { font-size: 11px; color: var(--d-danger); }
.ftcost-field .ftcost-input[b-bilz65qjpz], .ftcost-field .ftcost-select[b-bilz65qjpz] { height: 38px; }
.ftcost-radios[b-bilz65qjpz] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftcost-radio[b-bilz65qjpz] { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.ftcost-radio:hover[b-bilz65qjpz] { background: var(--d-surface-2); }
.ftcost-radio.active[b-bilz65qjpz] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftcost-radio .top[b-bilz65qjpz] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftcost-radio .sub[b-bilz65qjpz] { font-size: 11.5px; color: var(--d-ink-3); }
.ftcost-checkbox[b-bilz65qjpz] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; }
.ftcost-checkbox.active[b-bilz65qjpz] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftcost-checkbox input[b-bilz65qjpz] { margin-top: 3px; accent-color: var(--d-accent); }
.ftcost-checkbox .title[b-bilz65qjpz] { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.ftcost-checkbox .desc[b-bilz65qjpz] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.ftcost-rate-wrap[b-bilz65qjpz] { position: relative; }
.ftcost-rate-wrap .suf[b-bilz65qjpz] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); font-size: 12px; }

/* Confirm dialog */
.ftcost-confirm[b-bilz65qjpz] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 380px; padding: 18px; }
.ftcost-confirm .head[b-bilz65qjpz] { display: flex; gap: 10px; }
.ftcost-confirm .ico[b-bilz65qjpz] { width: 36px; height: 36px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; flex-shrink: 0; }
.ftcost-confirm h3[b-bilz65qjpz] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftcost-confirm p[b-bilz65qjpz] { margin: 4px 0 0; font-size: 12px; color: var(--d-ink-3); }
.ftcost-confirm .ft[b-bilz65qjpz] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 768px) {
    .ftcost-grid-2[b-bilz65qjpz], .ftcost-grid-3[b-bilz65qjpz], .ftcost-radios[b-bilz65qjpz] { grid-template-columns: 1fr; }
    .ftcost-hero[b-bilz65qjpz] { grid-template-columns: 1fr; }
}
/* /src/Features/FastTrack/Pages/Manager/Admin/DocumentTypes.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Addons — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ftdoc-
   ═══════════════════════════════════════════════════════════════ */

.ftdoc-root[b-6hcnw67u5q] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftdoc-num[b-6hcnw67u5q] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftdoc-btn[b-6hcnw67u5q] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.ftdoc-btn:hover[b-6hcnw67u5q] { background: var(--d-surface-2); color: var(--d-ink); }
.ftdoc-btn:disabled[b-6hcnw67u5q] { opacity: 0.5; cursor: not-allowed; }
.ftdoc-btn-accent[b-6hcnw67u5q] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}
.ftdoc-btn-accent:hover[b-6hcnw67u5q] { background: var(--d-accent-grad-hover); color: #fff; }
.ftdoc-btn-accent:disabled[b-6hcnw67u5q] {
    background: var(--d-line);
    color: var(--d-ink-4);
    box-shadow: none;
}
.ftdoc-btn-sm[b-6hcnw67u5q] { height: 32px; padding: 0 12px; font-size: 12px; }
.ftdoc-btn-icon[b-6hcnw67u5q] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftdoc-btn-icon:hover[b-6hcnw67u5q] { background: var(--d-surface-2); color: var(--d-ink); }

/* ─── Card primitive ─── */
.ftdoc-card[b-6hcnw67u5q] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filters / Toolbar ─── */
.ftdoc-toolbar[b-6hcnw67u5q] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
}
.ftdoc-search[b-6hcnw67u5q] {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.ftdoc-search svg[b-6hcnw67u5q] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); pointer-events: none;
}
.ftdoc-input[b-6hcnw67u5q] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.ftdoc-input:focus[b-6hcnw67u5q] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftdoc-search .ftdoc-input[b-6hcnw67u5q] { padding-left: 36px; }
.ftdoc-select[b-6hcnw67u5q] {
    height: 36px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    min-width: 140px;
}
.ftdoc-select:focus[b-6hcnw67u5q] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftdoc-chip-reset[b-6hcnw67u5q] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; border-radius: var(--d-r);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.ftdoc-count[b-6hcnw67u5q] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.ftdoc-count b[b-6hcnw67u5q] {
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Tables ─── */
.ftdoc-tbl-wrap[b-6hcnw67u5q] {
    overflow: auto;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 260px);
    border-top: 1px solid var(--d-line);
}
.ftdoc-tbl[b-6hcnw67u5q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ftdoc-tbl thead th[b-6hcnw67u5q] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}
.ftdoc-tbl thead th.right[b-6hcnw67u5q] { text-align: right; }
.ftdoc-tbl thead th.no-sort[b-6hcnw67u5q] { cursor: default; }
.ftdoc-tbl thead th .sort-wrap[b-6hcnw67u5q] {
    display: inline-flex; align-items: center; gap: 4px;
}
.ftdoc-tbl thead th.right .sort-wrap[b-6hcnw67u5q] { justify-content: flex-end; }
.ftdoc-tbl tbody td[b-6hcnw67u5q] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.ftdoc-tbl tbody tr:last-child td[b-6hcnw67u5q] { border-bottom: 0; }
.ftdoc-tbl tbody tr:hover[b-6hcnw67u5q] { background: var(--d-surface-2); }
.ftdoc-tbl td.right[b-6hcnw67u5q] { text-align: right; }
.ftdoc-tbl td.center[b-6hcnw67u5q] { text-align: center; }
.ftdoc-tbl-code[b-6hcnw67u5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftdoc-tbl-name[b-6hcnw67u5q] {
    font-weight: 500;
    color: var(--d-ink);
}
.ftdoc-tbl-num[b-6hcnw67u5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}
.ftdoc-tbl-unit[b-6hcnw67u5q] {
    color: var(--d-ink-4);
    font-size: 10.5px;
    margin-left: 4px;
}

/* ─── Status pill ─── */
.ftdoc-tag[b-6hcnw67u5q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}
.ftdoc-tag .d[b-6hcnw67u5q] {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ftdoc-tag.good[b-6hcnw67u5q] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}
.ftdoc-tag.good .d[b-6hcnw67u5q] { background: var(--d-good); }
.ftdoc-tag.draft[b-6hcnw67u5q] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}
.ftdoc-tag.draft .d[b-6hcnw67u5q] { background: var(--d-ink-4); }
.ftdoc-tag.danger[b-6hcnw67u5q] {
    background: color-mix(in srgb, var(--d-danger) 12%, transparent);
    color: var(--d-danger);
}
.ftdoc-tag.danger .d[b-6hcnw67u5q] { background: var(--d-danger); }
.ftdoc-tag.info[b-6hcnw67u5q] {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}
.ftdoc-tag.violet[b-6hcnw67u5q] {
    background: color-mix(in srgb, #7c3aed 12%, transparent);
    color: #6d28d9;
}

/* ─── Row actions ─── */
.ftdoc-actions[b-6hcnw67u5q] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.ftdoc-icon-btn[b-6hcnw67u5q] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftdoc-icon-btn:hover[b-6hcnw67u5q] { background: var(--d-surface-2); color: var(--d-ink); }
.ftdoc-icon-btn.edit:hover[b-6hcnw67u5q] {
    background: color-mix(in srgb, #2563eb 10%, transparent);
    color: #2563eb;
}
.ftdoc-icon-btn.warn:hover[b-6hcnw67u5q] {
    background: color-mix(in srgb, var(--d-warn) 12%, transparent);
    color: var(--d-warn);
}
.ftdoc-icon-btn.good:hover[b-6hcnw67u5q] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}

/* ─── Empty / Loading ─── */
.ftdoc-empty[b-6hcnw67u5q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 16px;
    color: var(--d-ink-3);
    text-align: center;
}
.ftdoc-empty b[b-6hcnw67u5q] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}
.ftdoc-empty small[b-6hcnw67u5q] {
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftdoc-empty svg[b-6hcnw67u5q] { color: var(--d-ink-4); }
.ftdoc-skel[b-6hcnw67u5q] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftdoc-pulse-b-6hcnw67u5q 1.2s ease-in-out infinite;
}
@keyframes ftdoc-pulse-b-6hcnw67u5q {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Banner / Errors ─── */
.ftdoc-error-banner[b-6hcnw67u5q] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
}
.ftdoc-error-banner button[b-6hcnw67u5q] {
    background: transparent; border: 0; color: var(--d-danger);
    cursor: pointer; font-size: 14px; opacity: 0.6;
}
.ftdoc-error-banner button:hover[b-6hcnw67u5q] { opacity: 1; }

/* ─── Pagination ─── */
.ftdoc-pager[b-6hcnw67u5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftdoc-pager b[b-6hcnw67u5q] {
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ftdoc-pager-controls[b-6hcnw67u5q] {
    display: inline-flex; align-items: center; gap: 6px;
}
.ftdoc-pager-btn[b-6hcnw67u5q] {
    height: 30px; padding: 0 10px; border-radius: 7px;
    border: 1px solid var(--d-line); background: var(--d-surface);
    color: var(--d-ink-2); font-size: 12px; cursor: pointer;
}
.ftdoc-pager-btn:hover:not(:disabled)[b-6hcnw67u5q] { background: var(--d-surface-2); }
.ftdoc-pager-btn:disabled[b-6hcnw67u5q] { opacity: 0.4; cursor: not-allowed; }

/* ─── Modal ─── */
.ftdoc-modal-backdrop[b-6hcnw67u5q] {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}
.ftdoc-modal[b-6hcnw67u5q] {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ftdoc-modal.sm[b-6hcnw67u5q] { max-width: 420px; }
.ftdoc-modal-hd[b-6hcnw67u5q] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}
.ftdoc-modal-hd h2[b-6hcnw67u5q] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}
.ftdoc-modal-hd .sub[b-6hcnw67u5q] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}
.ftdoc-modal-close[b-6hcnw67u5q] {
    width: 32px; height: 32px; border: 0; background: transparent;
    border-radius: 7px; color: var(--d-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ftdoc-modal-close:hover[b-6hcnw67u5q] { background: var(--d-surface-2); color: var(--d-ink); }
.ftdoc-modal-body[b-6hcnw67u5q] {
    flex: 1; overflow-y: auto; padding: 18px;
}
.ftdoc-modal-ft[b-6hcnw67u5q] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}
.ftdoc-modal-ft .hint[b-6hcnw67u5q] {
    font-size: 11px; color: var(--d-ink-4);
}
.ftdoc-modal-ft .hint kbd[b-6hcnw67u5q] {
    display: inline-block;
    padding: 1px 5px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--d-ink-3);
}
.ftdoc-modal-ft .grp[b-6hcnw67u5q] {
    display: inline-flex; gap: 8px;
}

/* ─── Form ─── */
.ftdoc-form[b-6hcnw67u5q] {
    display: flex; flex-direction: column; gap: 18px;
}
.ftdoc-section-title[b-6hcnw67u5q] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 4px;
}
.ftdoc-grid[b-6hcnw67u5q] { display: grid; gap: 14px; }
.ftdoc-grid.cols-2[b-6hcnw67u5q] { grid-template-columns: 1fr; }
.ftdoc-grid.cols-3[b-6hcnw67u5q] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ftdoc-grid.cols-2[b-6hcnw67u5q] { grid-template-columns: 1fr 1fr; }
    .ftdoc-grid.cols-3[b-6hcnw67u5q] { grid-template-columns: 1fr 1fr 1fr; }
}
.ftdoc-field-label[b-6hcnw67u5q] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.ftdoc-req[b-6hcnw67u5q] { color: var(--d-danger); }
.ftdoc-input.is-mono[b-6hcnw67u5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
}
.ftdoc-input.is-num[b-6hcnw67u5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 28px;
}
.ftdoc-input:disabled[b-6hcnw67u5q] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    cursor: not-allowed;
}
.ftdoc-input.is-error[b-6hcnw67u5q] {
    border-color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 5%, transparent);
}
.ftdoc-input.is-error:focus[b-6hcnw67u5q] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-danger) 15%, transparent);
}
.ftdoc-help[b-6hcnw67u5q] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-4);
}
.ftdoc-help.is-error[b-6hcnw67u5q] { color: var(--d-danger); }
.ftdoc-textarea[b-6hcnw67u5q] {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    resize: vertical;
}
.ftdoc-textarea:focus[b-6hcnw67u5q] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftdoc-price-wrap[b-6hcnw67u5q] {
    position: relative;
}
.ftdoc-price-wrap .cur[b-6hcnw67u5q] {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); font-size: 12px; pointer-events: none;
}

/* Stepper (sort order) */
.ftdoc-stepper[b-6hcnw67u5q] { display: flex; align-items: stretch; }
.ftdoc-stepper .step-btn[b-6hcnw67u5q] {
    width: 36px; padding: 0; border: 1px solid var(--d-line);
    background: var(--d-surface-2); color: var(--d-ink-3);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ftdoc-stepper .step-btn:hover[b-6hcnw67u5q] { background: var(--d-line); color: var(--d-ink); }
.ftdoc-stepper .step-btn.minus[b-6hcnw67u5q] { border-radius: var(--d-r) 0 0 var(--d-r); border-right: 0; }
.ftdoc-stepper .step-btn.plus[b-6hcnw67u5q] { border-radius: 0 var(--d-r) var(--d-r) 0; border-left: 0; }
.ftdoc-stepper .ftdoc-input[b-6hcnw67u5q] { border-radius: 0; text-align: center; }

/* Choice card (radio / checkbox tile) */
.ftdoc-choice-grid[b-6hcnw67u5q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ftdoc-choice[b-6hcnw67u5q] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--d-surface);
}
.ftdoc-choice:hover[b-6hcnw67u5q] { border-color: var(--d-ink-4); }
.ftdoc-choice.is-on[b-6hcnw67u5q] {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
}
.ftdoc-choice input[b-6hcnw67u5q] { accent-color: var(--d-accent); }
.ftdoc-choice .lbl[b-6hcnw67u5q] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
}
.ftdoc-choice .desc[b-6hcnw67u5q] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Confirm dialog row */
.ftdoc-confirm-row[b-6hcnw67u5q] {
    display: flex; align-items: flex-start; gap: 12px;
}
.ftdoc-confirm-ico[b-6hcnw67u5q] {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ftdoc-confirm-ico.warn[b-6hcnw67u5q] {
    background: var(--d-warn-soft); color: var(--d-warn);
}
.ftdoc-confirm-ico.good[b-6hcnw67u5q] {
    background: var(--d-good-soft); color: var(--d-good);
}
.ftdoc-confirm-row h3[b-6hcnw67u5q] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}
.ftdoc-confirm-row p[b-6hcnw67u5q] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftdoc-confirm-row p code[b-6hcnw67u5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

.ftdoc-btn-warn[b-6hcnw67u5q] {
    background: var(--d-warn);
    color: #fff;
    border-color: transparent;
}
.ftdoc-btn-warn:hover[b-6hcnw67u5q] { background: #b45309; color: #fff; }
.ftdoc-btn-good[b-6hcnw67u5q] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}
.ftdoc-btn-good:hover[b-6hcnw67u5q] { background: #15803d; color: #fff; }
.ftdoc-btn-danger[b-6hcnw67u5q] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}
.ftdoc-btn-danger:hover[b-6hcnw67u5q] { background: #b91c1c; color: #fff; }

.ftdoc-spinner[b-6hcnw67u5q] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ftdoc-spin-b-6hcnw67u5q 0.7s linear infinite;
}
@keyframes ftdoc-spin-b-6hcnw67u5q { to { transform: rotate(360deg); } }
/* /src/Features/FastTrack/Pages/Manager/Admin/ExpenseCategories.razor.rz.scp.css */
/* CostRates — Manager Dashboard v4 theme */
.ftexp-root[b-k2gs1kp0tb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftexp-shell[b-k2gs1kp0tb] { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.ftexp-hero[b-k2gs1kp0tb] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.ftexp-hero h1[b-k2gs1kp0tb] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.ftexp-hero h1 em[b-k2gs1kp0tb] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.ftexp-hero-meta[b-k2gs1kp0tb] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.ftexp-hero-meta .dot[b-k2gs1kp0tb] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.ftexp-hero-actions[b-k2gs1kp0tb] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.ftexp-btn[b-k2gs1kp0tb] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.ftexp-btn:hover[b-k2gs1kp0tb] { background: var(--d-surface-2); }
.ftexp-btn-accent[b-k2gs1kp0tb] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.ftexp-btn-accent:hover[b-k2gs1kp0tb] { background: var(--d-accent-grad-hover); color: #fff; }
.ftexp-btn-accent:disabled[b-k2gs1kp0tb], .ftexp-btn-accent[disabled][b-k2gs1kp0tb] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }
.ftexp-btn-sm[b-k2gs1kp0tb] { height: 32px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.ftexp-btn-danger[b-k2gs1kp0tb] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ftexp-btn-danger:hover[b-k2gs1kp0tb] { background: #fee2e2; }
.ftexp-btn-solid-danger[b-k2gs1kp0tb] { background: var(--d-danger); color: #fff; border-color: transparent; }
.ftexp-btn-solid-danger:hover[b-k2gs1kp0tb] { background: #b91c1c; color: #fff; }

/* Cards */
.ftexp-card[b-k2gs1kp0tb] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.ftexp-card-flex[b-k2gs1kp0tb] { display: flex; flex-direction: column; }

/* Filter bar */
.ftexp-filter[b-k2gs1kp0tb] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.ftexp-filter .lbl[b-k2gs1kp0tb] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftexp-input[b-k2gs1kp0tb], .ftexp-select[b-k2gs1kp0tb] { height: 34px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.ftexp-input:focus[b-k2gs1kp0tb], .ftexp-select:focus[b-k2gs1kp0tb] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.ftexp-input.num[b-k2gs1kp0tb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.ftexp-count[b-k2gs1kp0tb] { color: var(--d-ink-3); font-size: 11.5px; margin-left: auto; }
.ftexp-count b[b-k2gs1kp0tb] { color: var(--d-ink); font-weight: 600; }

/* Alert */
.ftexp-alert[b-k2gs1kp0tb] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
.ftexp-alert button[b-k2gs1kp0tb] { margin-left: auto; background: transparent; border: 0; color: #b91c1c; cursor: pointer; }

/* Table */
.ftexp-tbl-wrap[b-k2gs1kp0tb] { max-height: calc(100vh - 240px); display: flex; flex-direction: column; }
.ftexp-tbl-scroll[b-k2gs1kp0tb] { overflow: auto; flex: 1; }
.ftexp-tbl[b-k2gs1kp0tb] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftexp-tbl thead th[b-k2gs1kp0tb] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ftexp-tbl thead th.right[b-k2gs1kp0tb] { text-align: right; }
.ftexp-tbl thead th.center[b-k2gs1kp0tb] { text-align: center; }
.ftexp-tbl tbody td[b-k2gs1kp0tb] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.ftexp-tbl tbody tr:last-child td[b-k2gs1kp0tb] { border-bottom: 0; }
.ftexp-tbl tbody tr:hover[b-k2gs1kp0tb] { background: var(--d-surface-2); }
.ftexp-tbl td.right[b-k2gs1kp0tb] { text-align: right; }
.ftexp-tbl td.center[b-k2gs1kp0tb] { text-align: center; }
.ftexp-tbl .num[b-k2gs1kp0tb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink); }
.ftexp-tbl .code[b-k2gs1kp0tb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-3); }

/* Pills / Tags */
.ftexp-tag[b-k2gs1kp0tb] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); white-space: nowrap; }
.ftexp-tag.good[b-k2gs1kp0tb] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.ftexp-tag.danger[b-k2gs1kp0tb] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.ftexp-tag.muted[b-k2gs1kp0tb] { background: var(--d-surface-2); color: var(--d-ink-3); }
.ftexp-tag.info[b-k2gs1kp0tb] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.ftexp-tag .d[b-k2gs1kp0tb] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.ftexp-tag .d.dot-good[b-k2gs1kp0tb] { background: var(--d-good); }
.ftexp-tag .d.dot-mute[b-k2gs1kp0tb] { background: var(--d-ink-4); }

/* Skeleton */
.ftexp-sk[b-k2gs1kp0tb] { display: inline-block; height: 12px; background: linear-gradient(90deg, var(--d-surface-2) 0%, var(--d-line-2) 50%, var(--d-surface-2) 100%); background-size: 200% 100%; animation: ftexp-sh-b-k2gs1kp0tb 1.2s linear infinite; border-radius: 4px; }
@keyframes ftexp-sh-b-k2gs1kp0tb { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty */
.ftexp-empty[b-k2gs1kp0tb] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 16px; color: var(--d-ink-3); text-align: center; }
.ftexp-empty .ico[b-k2gs1kp0tb] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: grid; place-items: center; }
.ftexp-empty b[b-k2gs1kp0tb] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.ftexp-empty small[b-k2gs1kp0tb] { font-size: 12px; }

/* Row actions */
.ftexp-row-actions[b-k2gs1kp0tb] { display: flex; justify-content: flex-end; gap: 4px; }
.ftexp-icon-btn[b-k2gs1kp0tb] { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 0; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ftexp-icon-btn:hover[b-k2gs1kp0tb] { background: var(--d-surface-2); color: var(--d-ink); }
.ftexp-icon-btn.danger:hover[b-k2gs1kp0tb] { background: #fee2e2; color: #b91c1c; }

/* Pager */
.ftexp-pager[b-k2gs1kp0tb] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d-line); background: var(--d-surface); font-size: 11.5px; color: var(--d-ink-3); }
.ftexp-pager b[b-k2gs1kp0tb] { color: var(--d-ink); font-weight: 600; }
.ftexp-pager-right[b-k2gs1kp0tb] { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ftexp-pager .ftexp-select[b-k2gs1kp0tb] { height: 28px; padding: 0 8px; font-size: 11.5px; }
.ftexp-pager-btn[b-k2gs1kp0tb] { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); font-size: 11.5px; cursor: pointer; }
.ftexp-pager-btn:hover:not(:disabled)[b-k2gs1kp0tb] { background: var(--d-surface-2); }
.ftexp-pager-btn:disabled[b-k2gs1kp0tb] { opacity: .4; cursor: not-allowed; }

/* Modal */
.ftexp-modal-bg[b-k2gs1kp0tb] { position: fixed; inset: 0; background: rgba(28,25,23,0.45); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ftexp-modal[b-k2gs1kp0tb] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 700px; display: flex; flex-direction: column; max-height: 92vh; }
.ftexp-modal-hd[b-k2gs1kp0tb] { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--d-line); }
.ftexp-modal-hd h2[b-k2gs1kp0tb] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.ftexp-modal-hd p[b-k2gs1kp0tb] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.ftexp-modal-body[b-k2gs1kp0tb] { padding: 18px 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.ftexp-modal-ft[b-k2gs1kp0tb] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 12px 12px; font-size: 11.5px; color: var(--d-ink-3); }
.ftexp-modal-ft .actions[b-k2gs1kp0tb] { display: flex; gap: 8px; margin-left: auto; }
.ftexp-section h3[b-k2gs1kp0tb] { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftexp-grid[b-k2gs1kp0tb] { display: grid; gap: 12px; }
.ftexp-grid-2[b-k2gs1kp0tb] { grid-template-columns: 1fr 1fr; }
.ftexp-grid-3[b-k2gs1kp0tb] { grid-template-columns: 1fr 2fr; }
.ftexp-field[b-k2gs1kp0tb] { display: flex; flex-direction: column; gap: 6px; }
.ftexp-field label[b-k2gs1kp0tb] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.ftexp-field .req[b-k2gs1kp0tb] { color: var(--d-danger); }
.ftexp-field .hint[b-k2gs1kp0tb] { font-size: 11px; color: var(--d-ink-3); }
.ftexp-field .err[b-k2gs1kp0tb] { font-size: 11px; color: var(--d-danger); }
.ftexp-field .ftexp-input[b-k2gs1kp0tb], .ftexp-field .ftexp-select[b-k2gs1kp0tb] { height: 38px; }
.ftexp-radios[b-k2gs1kp0tb] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftexp-radio[b-k2gs1kp0tb] { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.ftexp-radio:hover[b-k2gs1kp0tb] { background: var(--d-surface-2); }
.ftexp-radio.active[b-k2gs1kp0tb] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftexp-radio .top[b-k2gs1kp0tb] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftexp-radio .sub[b-k2gs1kp0tb] { font-size: 11.5px; color: var(--d-ink-3); }
.ftexp-checkbox[b-k2gs1kp0tb] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; }
.ftexp-checkbox.active[b-k2gs1kp0tb] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftexp-checkbox input[b-k2gs1kp0tb] { margin-top: 3px; accent-color: var(--d-accent); }
.ftexp-checkbox .title[b-k2gs1kp0tb] { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.ftexp-checkbox .desc[b-k2gs1kp0tb] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.ftexp-rate-wrap[b-k2gs1kp0tb] { position: relative; }
.ftexp-rate-wrap .suf[b-k2gs1kp0tb] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); font-size: 12px; }

/* Confirm dialog */
.ftexp-confirm[b-k2gs1kp0tb] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 380px; padding: 18px; }
.ftexp-confirm .head[b-k2gs1kp0tb] { display: flex; gap: 10px; }
.ftexp-confirm .ico[b-k2gs1kp0tb] { width: 36px; height: 36px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; flex-shrink: 0; }
.ftexp-confirm h3[b-k2gs1kp0tb] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftexp-confirm p[b-k2gs1kp0tb] { margin: 4px 0 0; font-size: 12px; color: var(--d-ink-3); }
.ftexp-confirm .ft[b-k2gs1kp0tb] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 768px) {
    .ftexp-grid-2[b-k2gs1kp0tb], .ftexp-grid-3[b-k2gs1kp0tb], .ftexp-radios[b-k2gs1kp0tb] { grid-template-columns: 1fr; }
    .ftexp-hero[b-k2gs1kp0tb] { grid-template-columns: 1fr; }
}

/* ExpenseCategories-specific */
.ftexp-stepper[b-k2gs1kp0tb] { display: flex; align-items: stretch; }
.ftexp-stepper button[b-k2gs1kp0tb] { width: 30px; background: var(--d-surface-2); border: 1px solid var(--d-line); color: var(--d-ink-2); display: grid; place-items: center; cursor: pointer; }
.ftexp-stepper button:first-child[b-k2gs1kp0tb] { border-radius: 8px 0 0 8px; border-right: 0; }
.ftexp-stepper button:last-child[b-k2gs1kp0tb] { border-radius: 0 8px 8px 0; border-left: 0; }
.ftexp-stepper input[b-k2gs1kp0tb] { flex: 1; height: 38px; border: 1px solid var(--d-line); text-align: center; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; outline: none; }
.ftexp-stepper input:focus[b-k2gs1kp0tb] { border-color: var(--d-accent); }
.ftexp-sort-btn[b-k2gs1kp0tb] { background: transparent; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--d-ink-3); font: inherit; text-transform: inherit; letter-spacing: inherit; }
.ftexp-sort-btn:hover[b-k2gs1kp0tb] { color: var(--d-ink); }
.ftexp-sort-btn.active[b-k2gs1kp0tb] { color: var(--d-accent); }
/* /src/Features/FastTrack/Pages/Manager/Admin/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Index — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ftadmin-
   ═══════════════════════════════════════════════════════════════ */

.ftadmin-root[b-fcg8vjqjoi] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftadmin-num[b-fcg8vjqjoi] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftadmin-btn[b-fcg8vjqjoi] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ftadmin-btn:hover[b-fcg8vjqjoi] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

.ftadmin-btn-accent[b-fcg8vjqjoi] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ftadmin-btn-accent:hover[b-fcg8vjqjoi] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

/* ─── KPI tile ─── */
.ftadmin-kpis[b-fcg8vjqjoi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--d-line);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

@media (min-width: 768px) {
    .ftadmin-kpis[b-fcg8vjqjoi] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ftadmin-kpi[b-fcg8vjqjoi] {
    background: var(--d-surface);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    border: 0;
    transition: background .12s;
    width: 100%;
}

    .ftadmin-kpi:hover[b-fcg8vjqjoi] {
        background: var(--d-surface-2);
    }

.ftadmin-kpi-bar[b-fcg8vjqjoi] {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--d-ink-4);
}

    .ftadmin-kpi-bar.accent[b-fcg8vjqjoi] {
        background: var(--d-accent-grad);
    }

    .ftadmin-kpi-bar.warn[b-fcg8vjqjoi] {
        background: var(--d-warn);
    }

    .ftadmin-kpi-bar.good[b-fcg8vjqjoi] {
        background: var(--d-good);
    }

.ftadmin-kpi-lbl[b-fcg8vjqjoi] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftadmin-kpi-val[b-fcg8vjqjoi] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

    .ftadmin-kpi-val b[b-fcg8vjqjoi] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: -0.025em;
        color: var(--d-ink);
    }

.ftadmin-kpi-sub[b-fcg8vjqjoi] {
    font-size: 10.5px;
    color: var(--d-ink-3);
}

/* ─── Tabs ─── */
.ftadmin-tabs[b-fcg8vjqjoi] {
    display: flex;
    align-items: end;
    gap: 2px;
    border-bottom: 1px solid var(--d-line);
    flex-wrap: wrap;
}

.ftadmin-tab[b-fcg8vjqjoi] {
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    margin-bottom: -1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .12s, border-color .12s;
}

    .ftadmin-tab:hover[b-fcg8vjqjoi] {
        color: var(--d-ink);
        border-bottom-color: var(--d-line);
    }

    .ftadmin-tab.is-active[b-fcg8vjqjoi] {
        color: var(--d-ink);
        border-bottom-color: var(--d-accent);
    }

.ftadmin-tab-count[b-fcg8vjqjoi] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

/* ─── Card / tile grid ─── */
.ftadmin-card[b-fcg8vjqjoi] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.ftadmin-tile[b-fcg8vjqjoi] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px;
    transition: border-color .12s, box-shadow .12s;
    position: relative;
}

    .ftadmin-tile:hover[b-fcg8vjqjoi] {
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
        box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.06);
    }

.ftadmin-tile.is-warn[b-fcg8vjqjoi] {
    border-color: #fde68a;
    background: #fffbeb;
}

.ftadmin-tile-ico[b-fcg8vjqjoi] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    border: 1px solid var(--d-line);
    flex-shrink: 0;
}

.ftadmin-section-hd[b-fcg8vjqjoi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    margin-bottom: 6px;
}

    .ftadmin-section-hd h2[b-fcg8vjqjoi] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-2);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.ftadmin-section-bar[b-fcg8vjqjoi] {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--d-ink-4);
}

/* ─── Status pill ─── */
.ftadmin-pill[b-fcg8vjqjoi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ftadmin-pill.good[b-fcg8vjqjoi] {
    background: var(--d-good-soft);
    color: #166534;
    border-color: color-mix(in srgb, var(--d-good) 25%, transparent);
}

.ftadmin-pill.warn[b-fcg8vjqjoi] {
    background: var(--d-warn-soft);
    color: #92400e;
    border-color: color-mix(in srgb, var(--d-warn) 30%, transparent);
}

.ftadmin-pill.empty[b-fcg8vjqjoi] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border-color: var(--d-line);
}

/* ─── Search input ─── */
.ftadmin-search[b-fcg8vjqjoi] {
    height: 32px;
    padding: 0 10px 0 30px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink);
    outline: none;
    width: 100%;
    transition: border-color .12s, box-shadow .12s;
}

    .ftadmin-search:focus[b-fcg8vjqjoi] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

/* ─── Tables ─── */
.ftadmin-tbl[b-fcg8vjqjoi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ftadmin-tbl thead th[b-fcg8vjqjoi] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

    .ftadmin-tbl tbody td[b-fcg8vjqjoi] {
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .ftadmin-tbl tbody tr:hover[b-fcg8vjqjoi] {
        background: var(--d-surface-2);
    }

    .ftadmin-tbl tbody tr:last-child td[b-fcg8vjqjoi] {
        border-bottom: 0;
    }

/* ─── Quick create dropdown ─── */
.ftadmin-menu[b-fcg8vjqjoi] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
    padding: 6px;
    min-width: 240px;
}

.ftadmin-menu-item[b-fcg8vjqjoi] {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--d-ink);
    transition: background .12s;
}

    .ftadmin-menu-item:hover[b-fcg8vjqjoi] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

.ftadmin-menu-ico[b-fcg8vjqjoi] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--d-accent-grad-soft);
    color: var(--d-accent);
    display: grid;
    place-items: center;
    border: 1px solid #fed7aa;
    flex-shrink: 0;
}

.ftadmin-menu-eyebrow[b-fcg8vjqjoi] {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
/* /src/Features/FastTrack/Pages/Manager/Admin/MeetingPoints.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Addons — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ftmp-
   ═══════════════════════════════════════════════════════════════ */

.ftmp-root[b-72i0tnvsjv] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftmp-num[b-72i0tnvsjv] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftmp-btn[b-72i0tnvsjv] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.ftmp-btn:hover[b-72i0tnvsjv] { background: var(--d-surface-2); color: var(--d-ink); }
.ftmp-btn:disabled[b-72i0tnvsjv] { opacity: 0.5; cursor: not-allowed; }
.ftmp-btn-accent[b-72i0tnvsjv] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}
.ftmp-btn-accent:hover[b-72i0tnvsjv] { background: var(--d-accent-grad-hover); color: #fff; }
.ftmp-btn-accent:disabled[b-72i0tnvsjv] {
    background: var(--d-line);
    color: var(--d-ink-4);
    box-shadow: none;
}
.ftmp-btn-sm[b-72i0tnvsjv] { height: 32px; padding: 0 12px; font-size: 12px; }
.ftmp-btn-icon[b-72i0tnvsjv] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftmp-btn-icon:hover[b-72i0tnvsjv] { background: var(--d-surface-2); color: var(--d-ink); }

/* ─── Card primitive ─── */
.ftmp-card[b-72i0tnvsjv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filters / Toolbar ─── */
.ftmp-toolbar[b-72i0tnvsjv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
}
.ftmp-search[b-72i0tnvsjv] {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.ftmp-search svg[b-72i0tnvsjv] {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); pointer-events: none;
}
.ftmp-input[b-72i0tnvsjv] {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.ftmp-input:focus[b-72i0tnvsjv] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftmp-search .ftmp-input[b-72i0tnvsjv] { padding-left: 36px; }
.ftmp-select[b-72i0tnvsjv] {
    height: 36px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    min-width: 140px;
}
.ftmp-select:focus[b-72i0tnvsjv] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftmp-chip-reset[b-72i0tnvsjv] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 12px; border-radius: var(--d-r);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    font-size: 12px; font-weight: 500; cursor: pointer;
}
.ftmp-count[b-72i0tnvsjv] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.ftmp-count b[b-72i0tnvsjv] {
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Tables ─── */
.ftmp-tbl-wrap[b-72i0tnvsjv] {
    overflow: auto;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 260px);
    border-top: 1px solid var(--d-line);
}
.ftmp-tbl[b-72i0tnvsjv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.ftmp-tbl thead th[b-72i0tnvsjv] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
}
.ftmp-tbl thead th.right[b-72i0tnvsjv] { text-align: right; }
.ftmp-tbl thead th.no-sort[b-72i0tnvsjv] { cursor: default; }
.ftmp-tbl thead th .sort-wrap[b-72i0tnvsjv] {
    display: inline-flex; align-items: center; gap: 4px;
}
.ftmp-tbl thead th.right .sort-wrap[b-72i0tnvsjv] { justify-content: flex-end; }
.ftmp-tbl tbody td[b-72i0tnvsjv] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.ftmp-tbl tbody tr:last-child td[b-72i0tnvsjv] { border-bottom: 0; }
.ftmp-tbl tbody tr:hover[b-72i0tnvsjv] { background: var(--d-surface-2); }
.ftmp-tbl td.right[b-72i0tnvsjv] { text-align: right; }
.ftmp-tbl td.center[b-72i0tnvsjv] { text-align: center; }
.ftmp-tbl-code[b-72i0tnvsjv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftmp-tbl-name[b-72i0tnvsjv] {
    font-weight: 500;
    color: var(--d-ink);
}
.ftmp-tbl-num[b-72i0tnvsjv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}
.ftmp-tbl-unit[b-72i0tnvsjv] {
    color: var(--d-ink-4);
    font-size: 10.5px;
    margin-left: 4px;
}

/* ─── Status pill ─── */
.ftmp-tag[b-72i0tnvsjv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}
.ftmp-tag .d[b-72i0tnvsjv] {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ftmp-tag.good[b-72i0tnvsjv] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}
.ftmp-tag.good .d[b-72i0tnvsjv] { background: var(--d-good); }
.ftmp-tag.draft[b-72i0tnvsjv] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}
.ftmp-tag.draft .d[b-72i0tnvsjv] { background: var(--d-ink-4); }
.ftmp-tag.danger[b-72i0tnvsjv] {
    background: color-mix(in srgb, var(--d-danger) 12%, transparent);
    color: var(--d-danger);
}
.ftmp-tag.danger .d[b-72i0tnvsjv] { background: var(--d-danger); }
.ftmp-tag.info[b-72i0tnvsjv] {
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}
.ftmp-tag.violet[b-72i0tnvsjv] {
    background: color-mix(in srgb, #7c3aed 12%, transparent);
    color: #6d28d9;
}

/* ─── Row actions ─── */
.ftmp-actions[b-72i0tnvsjv] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}
.ftmp-icon-btn[b-72i0tnvsjv] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.ftmp-icon-btn:hover[b-72i0tnvsjv] { background: var(--d-surface-2); color: var(--d-ink); }
.ftmp-icon-btn.edit:hover[b-72i0tnvsjv] {
    background: color-mix(in srgb, #2563eb 10%, transparent);
    color: #2563eb;
}
.ftmp-icon-btn.warn:hover[b-72i0tnvsjv] {
    background: color-mix(in srgb, var(--d-warn) 12%, transparent);
    color: var(--d-warn);
}
.ftmp-icon-btn.good:hover[b-72i0tnvsjv] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good);
}

/* ─── Empty / Loading ─── */
.ftmp-empty[b-72i0tnvsjv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 16px;
    color: var(--d-ink-3);
    text-align: center;
}
.ftmp-empty b[b-72i0tnvsjv] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}
.ftmp-empty small[b-72i0tnvsjv] {
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftmp-empty svg[b-72i0tnvsjv] { color: var(--d-ink-4); }
.ftmp-skel[b-72i0tnvsjv] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftmp-pulse-b-72i0tnvsjv 1.2s ease-in-out infinite;
}
@keyframes ftmp-pulse-b-72i0tnvsjv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ─── Banner / Errors ─── */
.ftmp-error-banner[b-72i0tnvsjv] {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
}
.ftmp-error-banner button[b-72i0tnvsjv] {
    background: transparent; border: 0; color: var(--d-danger);
    cursor: pointer; font-size: 14px; opacity: 0.6;
}
.ftmp-error-banner button:hover[b-72i0tnvsjv] { opacity: 1; }

/* ─── Pagination ─── */
.ftmp-pager[b-72i0tnvsjv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftmp-pager b[b-72i0tnvsjv] {
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ftmp-pager-controls[b-72i0tnvsjv] {
    display: inline-flex; align-items: center; gap: 6px;
}
.ftmp-pager-btn[b-72i0tnvsjv] {
    height: 30px; padding: 0 10px; border-radius: 7px;
    border: 1px solid var(--d-line); background: var(--d-surface);
    color: var(--d-ink-2); font-size: 12px; cursor: pointer;
}
.ftmp-pager-btn:hover:not(:disabled)[b-72i0tnvsjv] { background: var(--d-surface-2); }
.ftmp-pager-btn:disabled[b-72i0tnvsjv] { opacity: 0.4; cursor: not-allowed; }

/* ─── Modal ─── */
.ftmp-modal-backdrop[b-72i0tnvsjv] {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}
.ftmp-modal[b-72i0tnvsjv] {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.ftmp-modal.sm[b-72i0tnvsjv] { max-width: 420px; }
.ftmp-modal-hd[b-72i0tnvsjv] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}
.ftmp-modal-hd h2[b-72i0tnvsjv] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}
.ftmp-modal-hd .sub[b-72i0tnvsjv] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}
.ftmp-modal-close[b-72i0tnvsjv] {
    width: 32px; height: 32px; border: 0; background: transparent;
    border-radius: 7px; color: var(--d-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ftmp-modal-close:hover[b-72i0tnvsjv] { background: var(--d-surface-2); color: var(--d-ink); }
.ftmp-modal-body[b-72i0tnvsjv] {
    flex: 1; overflow-y: auto; padding: 18px;
}
.ftmp-modal-ft[b-72i0tnvsjv] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}
.ftmp-modal-ft .hint[b-72i0tnvsjv] {
    font-size: 11px; color: var(--d-ink-4);
}
.ftmp-modal-ft .hint kbd[b-72i0tnvsjv] {
    display: inline-block;
    padding: 1px 5px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--d-ink-3);
}
.ftmp-modal-ft .grp[b-72i0tnvsjv] {
    display: inline-flex; gap: 8px;
}

/* ─── Form ─── */
.ftmp-form[b-72i0tnvsjv] {
    display: flex; flex-direction: column; gap: 18px;
}
.ftmp-section-title[b-72i0tnvsjv] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 4px;
}
.ftmp-grid[b-72i0tnvsjv] { display: grid; gap: 14px; }
.ftmp-grid.cols-2[b-72i0tnvsjv] { grid-template-columns: 1fr; }
.ftmp-grid.cols-3[b-72i0tnvsjv] { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .ftmp-grid.cols-2[b-72i0tnvsjv] { grid-template-columns: 1fr 1fr; }
    .ftmp-grid.cols-3[b-72i0tnvsjv] { grid-template-columns: 1fr 1fr 1fr; }
}
.ftmp-field-label[b-72i0tnvsjv] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.ftmp-req[b-72i0tnvsjv] { color: var(--d-danger); }
.ftmp-input.is-mono[b-72i0tnvsjv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
}
.ftmp-input.is-num[b-72i0tnvsjv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 28px;
}
.ftmp-input:disabled[b-72i0tnvsjv] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    cursor: not-allowed;
}
.ftmp-input.is-error[b-72i0tnvsjv] {
    border-color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 5%, transparent);
}
.ftmp-input.is-error:focus[b-72i0tnvsjv] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-danger) 15%, transparent);
}
.ftmp-help[b-72i0tnvsjv] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-4);
}
.ftmp-help.is-error[b-72i0tnvsjv] { color: var(--d-danger); }
.ftmp-textarea[b-72i0tnvsjv] {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    resize: vertical;
}
.ftmp-textarea:focus[b-72i0tnvsjv] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.ftmp-price-wrap[b-72i0tnvsjv] {
    position: relative;
}
.ftmp-price-wrap .cur[b-72i0tnvsjv] {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--d-ink-4); font-size: 12px; pointer-events: none;
}

/* Stepper (sort order) */
.ftmp-stepper[b-72i0tnvsjv] { display: flex; align-items: stretch; }
.ftmp-stepper .step-btn[b-72i0tnvsjv] {
    width: 36px; padding: 0; border: 1px solid var(--d-line);
    background: var(--d-surface-2); color: var(--d-ink-3);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ftmp-stepper .step-btn:hover[b-72i0tnvsjv] { background: var(--d-line); color: var(--d-ink); }
.ftmp-stepper .step-btn.minus[b-72i0tnvsjv] { border-radius: var(--d-r) 0 0 var(--d-r); border-right: 0; }
.ftmp-stepper .step-btn.plus[b-72i0tnvsjv] { border-radius: 0 var(--d-r) var(--d-r) 0; border-left: 0; }
.ftmp-stepper .ftmp-input[b-72i0tnvsjv] { border-radius: 0; text-align: center; }

/* Choice card (radio / checkbox tile) */
.ftmp-choice-grid[b-72i0tnvsjv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ftmp-choice[b-72i0tnvsjv] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    background: var(--d-surface);
}
.ftmp-choice:hover[b-72i0tnvsjv] { border-color: var(--d-ink-4); }
.ftmp-choice.is-on[b-72i0tnvsjv] {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
}
.ftmp-choice input[b-72i0tnvsjv] { accent-color: var(--d-accent); }
.ftmp-choice .lbl[b-72i0tnvsjv] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
}
.ftmp-choice .desc[b-72i0tnvsjv] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Confirm dialog row */
.ftmp-confirm-row[b-72i0tnvsjv] {
    display: flex; align-items: flex-start; gap: 12px;
}
.ftmp-confirm-ico[b-72i0tnvsjv] {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ftmp-confirm-ico.warn[b-72i0tnvsjv] {
    background: var(--d-warn-soft); color: var(--d-warn);
}
.ftmp-confirm-ico.good[b-72i0tnvsjv] {
    background: var(--d-good-soft); color: var(--d-good);
}
.ftmp-confirm-row h3[b-72i0tnvsjv] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}
.ftmp-confirm-row p[b-72i0tnvsjv] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}
.ftmp-confirm-row p code[b-72i0tnvsjv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

.ftmp-btn-warn[b-72i0tnvsjv] {
    background: var(--d-warn);
    color: #fff;
    border-color: transparent;
}
.ftmp-btn-warn:hover[b-72i0tnvsjv] { background: #b45309; color: #fff; }
.ftmp-btn-good[b-72i0tnvsjv] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}
.ftmp-btn-good:hover[b-72i0tnvsjv] { background: #15803d; color: #fff; }
.ftmp-btn-danger[b-72i0tnvsjv] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}
.ftmp-btn-danger:hover[b-72i0tnvsjv] { background: #b91c1c; color: #fff; }

.ftmp-spinner[b-72i0tnvsjv] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ftmp-spin-b-72i0tnvsjv 0.7s linear infinite;
}
@keyframes ftmp-spin-b-72i0tnvsjv { to { transform: rotate(360deg); } }
/* /src/Features/FastTrack/Pages/Manager/Admin/PackagePrices.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin PackagePrices — Manager Dashboard v4 theme
   Prefix: ftprice-
   ═══════════════════════════════════════════════════════════════ */

.ftprice-root[b-f1retr5g29] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftprice-num[b-f1retr5g29] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons / icons ─── */
.ftprice-btn[b-f1retr5g29] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s;
}

    .ftprice-btn:hover[b-f1retr5g29] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.ftprice-btn-accent[b-f1retr5g29] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ftprice-btn-accent:hover[b-f1retr5g29] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .ftprice-btn-accent:disabled[b-f1retr5g29] {
        background: var(--d-line);
        color: var(--d-ink-4);
        box-shadow: none;
        cursor: not-allowed;
    }

.ftprice-iconbtn[b-f1retr5g29] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--d-ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftprice-iconbtn:hover[b-f1retr5g29] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* ─── Card / table wrapper ─── */
.ftprice-card[b-f1retr5g29] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ftprice-tbl[b-f1retr5g29] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .ftprice-tbl thead th[b-f1retr5g29] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 10px 12px;
        background: var(--d-surface);
        border-bottom: 1px solid var(--d-line);
        white-space: nowrap;
    }

    .ftprice-tbl tbody td[b-f1retr5g29] {
        padding: 6px 6px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

.ftprice-pkg-cell[b-f1retr5g29] {
    padding: 8px 14px !important;
    background: var(--d-surface);
    position: sticky;
    left: 0;
    border-right: 1px solid var(--d-line);
    z-index: 1;
    min-width: 220px;
}

.ftprice-pkg-name[b-f1retr5g29] {
    font-weight: 600;
    color: var(--d-ink);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ftprice-pkg-meta[b-f1retr5g29] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.ftprice-group-row td[b-f1retr5g29] {
    padding: 6px 14px !important;
    background: var(--d-surface-2) !important;
    color: var(--d-ink-2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-top: 1px solid var(--d-line);
    border-bottom: 1px solid var(--d-line);
}

.ftprice-tier[b-f1retr5g29] {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    background: var(--d-warn-soft);
    color: #92400e;
}

/* ─── Cell button ─── */
.ftprice-cell[b-f1retr5g29] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    border: 1px solid transparent;
    background: transparent;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .ftprice-cell:hover[b-f1retr5g29] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 30%, transparent);
        color: var(--d-accent);
    }

.ftprice-cell.has-value[b-f1retr5g29] {
    background: var(--d-surface);
    color: var(--d-ink);
    font-weight: 600;
}

    .ftprice-cell.has-value:hover[b-f1retr5g29] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 30%, transparent);
        color: #166534;
    }

.ftprice-cell.disabled[b-f1retr5g29] {
    background: #fef2f2;
    color: var(--d-danger);
    text-decoration: line-through;
}

    .ftprice-cell.disabled:hover[b-f1retr5g29] {
        background: #fee2e2;
        border-color: #fecaca;
        color: #991b1b;
    }

/* ─── Modal ─── */
.ftprice-modal-overlay[b-f1retr5g29] {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ftprice-modal[b-f1retr5g29] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.25);
    width: 100%;
    max-width: 520px;
}

.ftprice-modal-hd[b-f1retr5g29] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ftprice-modal-hd h2[b-f1retr5g29] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .ftprice-modal-hd p[b-f1retr5g29] {
        margin: 2px 0 0;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

.ftprice-modal-bd[b-f1retr5g29] {
    padding: 20px 22px;
}

.ftprice-modal-ft[b-f1retr5g29] {
    padding: 12px 22px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    border-radius: 0 0 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ftprice-label[b-f1retr5g29] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ftprice-input[b-f1retr5g29] {
    width: 100%;
    height: 38px;
    padding: 0 36px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .ftprice-input:focus[b-f1retr5g29] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

/* ─── Search input ─── */
.ftprice-search[b-f1retr5g29] {
    height: 32px;
    padding: 0 10px 0 28px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .ftprice-search:focus[b-f1retr5g29] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

/* ─── Footer status ─── */
.ftprice-footer[b-f1retr5g29] {
    padding: 8px 14px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    font-size: 11px;
    color: var(--d-ink-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
/* /src/Features/FastTrack/Pages/Manager/Admin/Packages.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin Packages — Manager Dashboard v4 theme
   Prefix: ftpkg-
   ═══════════════════════════════════════════════════════════════ */

.ftpkg-root[b-dkumetfr4p] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftpkg-num[b-dkumetfr4p] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftpkg-btn[b-dkumetfr4p] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ftpkg-btn:hover[b-dkumetfr4p] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

.ftpkg-btn-accent[b-dkumetfr4p] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ftpkg-btn-accent:hover[b-dkumetfr4p] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

    .ftpkg-btn-accent:disabled[b-dkumetfr4p] {
        background: var(--d-line);
        color: var(--d-ink-4);
        cursor: not-allowed;
        box-shadow: none;
    }

.ftpkg-badge-count[b-dkumetfr4p] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 0 6px;
    height: 16px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.25);
}

/* ─── Cards / panels ─── */
.ftpkg-card[b-dkumetfr4p] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftpkg-toolbar[b-dkumetfr4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-line-2);
    background: var(--d-surface);
}

.ftpkg-bulkbar[b-dkumetfr4p] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    border-radius: var(--d-r);
    padding: 8px 12px;
    font-size: 12.5px;
    color: #9a3412;
}

/* ─── Inputs ─── */
.ftpkg-input[b-dkumetfr4p],
.ftpkg-select[b-dkumetfr4p] {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .ftpkg-input:focus[b-dkumetfr4p],
    .ftpkg-select:focus[b-dkumetfr4p] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

/* ─── Tables ─── */
.ftpkg-tbl[b-dkumetfr4p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ftpkg-tbl thead th[b-dkumetfr4p] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

    .ftpkg-tbl tbody td[b-dkumetfr4p] {
        padding: 10px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .ftpkg-tbl tbody tr:hover[b-dkumetfr4p] {
        background: var(--d-surface-2);
    }

/* ─── Pills ─── */
.ftpkg-pill[b-dkumetfr4p] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ftpkg-pill.good[b-dkumetfr4p] {
    background: var(--d-good-soft);
    color: #166534;
    border-color: color-mix(in srgb, var(--d-good) 25%, transparent);
}

.ftpkg-pill.danger[b-dkumetfr4p] {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.ftpkg-pill.warn[b-dkumetfr4p] {
    background: var(--d-warn-soft);
    color: #92400e;
    border-color: color-mix(in srgb, var(--d-warn) 30%, transparent);
}

/* ─── Modal primitive ─── */
.ftpkg-modal-overlay[b-dkumetfr4p] {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ftpkg-modal[b-dkumetfr4p] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.25), 0 6px 20px rgba(15, 23, 42, 0.08);
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}

.ftpkg-modal-hd[b-dkumetfr4p] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

    .ftpkg-modal-hd h2[b-dkumetfr4p] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .ftpkg-modal-hd p[b-dkumetfr4p] {
        margin: 2px 0 0;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

.ftpkg-modal-bd[b-dkumetfr4p] {
    flex: 1;
    overflow: auto;
    padding: 20px 22px;
}

.ftpkg-modal-ft[b-dkumetfr4p] {
    padding: 12px 22px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    border-radius: 0 0 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.ftpkg-iconbtn[b-dkumetfr4p] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--d-ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftpkg-iconbtn:hover[b-dkumetfr4p] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* ─── Form labels ─── */
.ftpkg-label[b-dkumetfr4p] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ftpkg-help[b-dkumetfr4p] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-3);
}

.ftpkg-error[b-dkumetfr4p] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-danger);
}
/* /src/Features/FastTrack/Pages/Manager/Admin/ServiceTypes.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Admin ServiceTypes — Manager Dashboard v4 theme
   Prefix: ftsvc-
   ═══════════════════════════════════════════════════════════════ */

.ftsvc-root[b-530vynor2q] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftsvc-num[b-530vynor2q] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Buttons ─── */
.ftsvc-btn[b-530vynor2q] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ftsvc-btn:hover[b-530vynor2q] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.ftsvc-btn-accent[b-530vynor2q] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ftsvc-btn-accent:hover[b-530vynor2q] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .ftsvc-btn-accent:disabled[b-530vynor2q] {
        background: var(--d-line);
        color: var(--d-ink-4);
        box-shadow: none;
        cursor: not-allowed;
    }

.ftsvc-iconbtn[b-530vynor2q] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: var(--d-ink-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftsvc-iconbtn:hover[b-530vynor2q] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ftsvc-iconbtn.danger:hover[b-530vynor2q] {
        background: #fef2f2;
        color: var(--d-danger);
    }

/* ─── Card ─── */
.ftsvc-card[b-530vynor2q] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftsvc-filterbar[b-530vynor2q] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ─── Inputs ─── */
.ftsvc-input[b-530vynor2q],
.ftsvc-select[b-530vynor2q] {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .ftsvc-input:focus[b-530vynor2q],
    .ftsvc-select:focus[b-530vynor2q] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.ftsvc-search[b-530vynor2q] {
    padding-left: 30px;
    width: 100%;
}

/* ─── Tables ─── */
.ftsvc-tbl[b-530vynor2q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .ftsvc-tbl thead th[b-530vynor2q] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .ftsvc-tbl thead th.sortable[b-530vynor2q] {
            cursor: pointer;
            user-select: none;
        }

            .ftsvc-tbl thead th.sortable:hover[b-530vynor2q] {
                color: var(--d-ink);
            }

    .ftsvc-tbl tbody td[b-530vynor2q] {
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .ftsvc-tbl tbody tr:hover[b-530vynor2q] {
        background: var(--d-surface-2);
    }

    .ftsvc-tbl tbody tr:last-child td[b-530vynor2q] {
        border-bottom: 0;
    }

/* ─── Pills ─── */
.ftsvc-pill[b-530vynor2q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ftsvc-pill.good[b-530vynor2q] {
    background: var(--d-good-soft);
    color: #166534;
    border-color: color-mix(in srgb, var(--d-good) 25%, transparent);
}

.ftsvc-pill.muted[b-530vynor2q] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border-color: var(--d-line);
}

.ftsvc-pill.dir-arrival[b-530vynor2q] {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
}

.ftsvc-pill.dir-departure[b-530vynor2q] {
    background: #ede9fe;
    color: #5b21b6;
    border-color: #ddd6fe;
}

.ftsvc-pill.dir-transit[b-530vynor2q] {
    background: var(--d-warn-soft);
    color: #92400e;
    border-color: color-mix(in srgb, var(--d-warn) 30%, transparent);
}

/* ─── Modal ─── */
.ftsvc-modal-overlay[b-530vynor2q] {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ftsvc-modal[b-530vynor2q] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.25);
    width: 100%;
    max-width: 600px;
}

.ftsvc-modal.sm[b-530vynor2q] {
    max-width: 400px;
    padding: 22px;
}

.ftsvc-modal-hd[b-530vynor2q] {
    padding: 16px 22px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ftsvc-modal-hd h2[b-530vynor2q] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .ftsvc-modal-hd p[b-530vynor2q] {
        margin: 2px 0 0;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

.ftsvc-modal-bd[b-530vynor2q] {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ftsvc-modal-ft[b-530vynor2q] {
    padding: 12px 22px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    border-radius: 0 0 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ftsvc-label[b-530vynor2q] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ftsvc-help[b-530vynor2q] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-ink-3);
}

.ftsvc-error[b-530vynor2q] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--d-danger);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ftsvc-stepper[b-530vynor2q] {
    display: flex;
    align-items: stretch;
}

    .ftsvc-stepper button[b-530vynor2q] {
        width: 32px;
        background: var(--d-surface-2);
        border: 1px solid var(--d-line);
        color: var(--d-ink-3);
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background .12s;
    }

        .ftsvc-stepper button:hover[b-530vynor2q] {
            background: var(--d-line);
            color: var(--d-ink);
        }

        .ftsvc-stepper button:first-child[b-530vynor2q] {
            border-radius: var(--d-r) 0 0 var(--d-r);
            border-right: 0;
        }

        .ftsvc-stepper button:last-child[b-530vynor2q] {
            border-radius: 0 var(--d-r) var(--d-r) 0;
            border-left: 0;
        }

    .ftsvc-stepper input[b-530vynor2q] {
        flex: 1;
        text-align: center;
        height: 36px;
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-variant-numeric: tabular-nums;
        font-size: 14px;
        outline: none;
        color: var(--d-ink);
    }

        .ftsvc-stepper input:focus[b-530vynor2q] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
            position: relative;
            z-index: 1;
        }
/* /src/Features/FastTrack/Pages/Manager/Admin/SurchargeRules.razor.rz.scp.css */
/* CostRates — Manager Dashboard v4 theme */
.ftsur-root[b-pk217szo4k] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftsur-shell[b-pk217szo4k] { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.ftsur-hero[b-pk217szo4k] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.ftsur-hero h1[b-pk217szo4k] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.ftsur-hero h1 em[b-pk217szo4k] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.ftsur-hero-meta[b-pk217szo4k] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.ftsur-hero-meta .dot[b-pk217szo4k] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.ftsur-hero-actions[b-pk217szo4k] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.ftsur-btn[b-pk217szo4k] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.ftsur-btn:hover[b-pk217szo4k] { background: var(--d-surface-2); }
.ftsur-btn-accent[b-pk217szo4k] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.ftsur-btn-accent:hover[b-pk217szo4k] { background: var(--d-accent-grad-hover); color: #fff; }
.ftsur-btn-accent:disabled[b-pk217szo4k], .ftsur-btn-accent[disabled][b-pk217szo4k] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }
.ftsur-btn-sm[b-pk217szo4k] { height: 32px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.ftsur-btn-danger[b-pk217szo4k] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ftsur-btn-danger:hover[b-pk217szo4k] { background: #fee2e2; }
.ftsur-btn-solid-danger[b-pk217szo4k] { background: var(--d-danger); color: #fff; border-color: transparent; }
.ftsur-btn-solid-danger:hover[b-pk217szo4k] { background: #b91c1c; color: #fff; }

/* Cards */
.ftsur-card[b-pk217szo4k] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.ftsur-card-flex[b-pk217szo4k] { display: flex; flex-direction: column; }

/* Filter bar */
.ftsur-filter[b-pk217szo4k] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.ftsur-filter .lbl[b-pk217szo4k] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftsur-input[b-pk217szo4k], .ftsur-select[b-pk217szo4k] { height: 34px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.ftsur-input:focus[b-pk217szo4k], .ftsur-select:focus[b-pk217szo4k] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.ftsur-input.num[b-pk217szo4k] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.ftsur-count[b-pk217szo4k] { color: var(--d-ink-3); font-size: 11.5px; margin-left: auto; }
.ftsur-count b[b-pk217szo4k] { color: var(--d-ink); font-weight: 600; }

/* Alert */
.ftsur-alert[b-pk217szo4k] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
.ftsur-alert button[b-pk217szo4k] { margin-left: auto; background: transparent; border: 0; color: #b91c1c; cursor: pointer; }

/* Table */
.ftsur-tbl-wrap[b-pk217szo4k] { max-height: calc(100vh - 240px); display: flex; flex-direction: column; }
.ftsur-tbl-scroll[b-pk217szo4k] { overflow: auto; flex: 1; }
.ftsur-tbl[b-pk217szo4k] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftsur-tbl thead th[b-pk217szo4k] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ftsur-tbl thead th.right[b-pk217szo4k] { text-align: right; }
.ftsur-tbl thead th.center[b-pk217szo4k] { text-align: center; }
.ftsur-tbl tbody td[b-pk217szo4k] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.ftsur-tbl tbody tr:last-child td[b-pk217szo4k] { border-bottom: 0; }
.ftsur-tbl tbody tr:hover[b-pk217szo4k] { background: var(--d-surface-2); }
.ftsur-tbl td.right[b-pk217szo4k] { text-align: right; }
.ftsur-tbl td.center[b-pk217szo4k] { text-align: center; }
.ftsur-tbl .num[b-pk217szo4k] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink); }
.ftsur-tbl .code[b-pk217szo4k] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-3); }

/* Pills / Tags */
.ftsur-tag[b-pk217szo4k] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); white-space: nowrap; }
.ftsur-tag.good[b-pk217szo4k] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.ftsur-tag.danger[b-pk217szo4k] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.ftsur-tag.muted[b-pk217szo4k] { background: var(--d-surface-2); color: var(--d-ink-3); }
.ftsur-tag.info[b-pk217szo4k] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.ftsur-tag .d[b-pk217szo4k] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.ftsur-tag .d.dot-good[b-pk217szo4k] { background: var(--d-good); }
.ftsur-tag .d.dot-mute[b-pk217szo4k] { background: var(--d-ink-4); }

/* Skeleton */
.ftsur-sk[b-pk217szo4k] { display: inline-block; height: 12px; background: linear-gradient(90deg, var(--d-surface-2) 0%, var(--d-line-2) 50%, var(--d-surface-2) 100%); background-size: 200% 100%; animation: ftsur-sh-b-pk217szo4k 1.2s linear infinite; border-radius: 4px; }
@keyframes ftsur-sh-b-pk217szo4k { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty */
.ftsur-empty[b-pk217szo4k] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 16px; color: var(--d-ink-3); text-align: center; }
.ftsur-empty .ico[b-pk217szo4k] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: grid; place-items: center; }
.ftsur-empty b[b-pk217szo4k] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.ftsur-empty small[b-pk217szo4k] { font-size: 12px; }

/* Row actions */
.ftsur-row-actions[b-pk217szo4k] { display: flex; justify-content: flex-end; gap: 4px; }
.ftsur-icon-btn[b-pk217szo4k] { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 0; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ftsur-icon-btn:hover[b-pk217szo4k] { background: var(--d-surface-2); color: var(--d-ink); }
.ftsur-icon-btn.danger:hover[b-pk217szo4k] { background: #fee2e2; color: #b91c1c; }

/* Pager */
.ftsur-pager[b-pk217szo4k] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d-line); background: var(--d-surface); font-size: 11.5px; color: var(--d-ink-3); }
.ftsur-pager b[b-pk217szo4k] { color: var(--d-ink); font-weight: 600; }
.ftsur-pager-right[b-pk217szo4k] { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ftsur-pager .ftsur-select[b-pk217szo4k] { height: 28px; padding: 0 8px; font-size: 11.5px; }
.ftsur-pager-btn[b-pk217szo4k] { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); font-size: 11.5px; cursor: pointer; }
.ftsur-pager-btn:hover:not(:disabled)[b-pk217szo4k] { background: var(--d-surface-2); }
.ftsur-pager-btn:disabled[b-pk217szo4k] { opacity: .4; cursor: not-allowed; }

/* Modal */
.ftsur-modal-bg[b-pk217szo4k] { position: fixed; inset: 0; background: rgba(28,25,23,0.45); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ftsur-modal[b-pk217szo4k] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 700px; display: flex; flex-direction: column; max-height: 92vh; }
.ftsur-modal-hd[b-pk217szo4k] { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--d-line); }
.ftsur-modal-hd h2[b-pk217szo4k] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.ftsur-modal-hd p[b-pk217szo4k] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.ftsur-modal-body[b-pk217szo4k] { padding: 18px 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.ftsur-modal-ft[b-pk217szo4k] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 12px 12px; font-size: 11.5px; color: var(--d-ink-3); }
.ftsur-modal-ft .actions[b-pk217szo4k] { display: flex; gap: 8px; margin-left: auto; }
.ftsur-section h3[b-pk217szo4k] { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftsur-grid[b-pk217szo4k] { display: grid; gap: 12px; }
.ftsur-grid-2[b-pk217szo4k] { grid-template-columns: 1fr 1fr; }
.ftsur-grid-3[b-pk217szo4k] { grid-template-columns: 1fr 2fr; }
.ftsur-field[b-pk217szo4k] { display: flex; flex-direction: column; gap: 6px; }
.ftsur-field label[b-pk217szo4k] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.ftsur-field .req[b-pk217szo4k] { color: var(--d-danger); }
.ftsur-field .hint[b-pk217szo4k] { font-size: 11px; color: var(--d-ink-3); }
.ftsur-field .err[b-pk217szo4k] { font-size: 11px; color: var(--d-danger); }
.ftsur-field .ftsur-input[b-pk217szo4k], .ftsur-field .ftsur-select[b-pk217szo4k] { height: 38px; }
.ftsur-radios[b-pk217szo4k] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftsur-radio[b-pk217szo4k] { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.ftsur-radio:hover[b-pk217szo4k] { background: var(--d-surface-2); }
.ftsur-radio.active[b-pk217szo4k] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftsur-radio .top[b-pk217szo4k] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftsur-radio .sub[b-pk217szo4k] { font-size: 11.5px; color: var(--d-ink-3); }
.ftsur-checkbox[b-pk217szo4k] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; }
.ftsur-checkbox.active[b-pk217szo4k] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftsur-checkbox input[b-pk217szo4k] { margin-top: 3px; accent-color: var(--d-accent); }
.ftsur-checkbox .title[b-pk217szo4k] { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.ftsur-checkbox .desc[b-pk217szo4k] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.ftsur-rate-wrap[b-pk217szo4k] { position: relative; }
.ftsur-rate-wrap .suf[b-pk217szo4k] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); font-size: 12px; }

/* Confirm dialog */
.ftsur-confirm[b-pk217szo4k] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 380px; padding: 18px; }
.ftsur-confirm .head[b-pk217szo4k] { display: flex; gap: 10px; }
.ftsur-confirm .ico[b-pk217szo4k] { width: 36px; height: 36px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; flex-shrink: 0; }
.ftsur-confirm h3[b-pk217szo4k] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftsur-confirm p[b-pk217szo4k] { margin: 4px 0 0; font-size: 12px; color: var(--d-ink-3); }
.ftsur-confirm .ft[b-pk217szo4k] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 768px) {
    .ftsur-grid-2[b-pk217szo4k], .ftsur-grid-3[b-pk217szo4k], .ftsur-radios[b-pk217szo4k] { grid-template-columns: 1fr; }
    .ftsur-hero[b-pk217szo4k] { grid-template-columns: 1fr; }
}

/* SurchargeRules-specific */
.ftsur-day-grid[b-pk217szo4k] { display: flex; flex-wrap: wrap; gap: 4px; }
.ftsur-day[b-pk217szo4k] { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; font-size: 10px; font-weight: 700; background: var(--d-surface-2); color: var(--d-ink-4); border: 1px solid var(--d-line); }
.ftsur-day.on[b-pk217szo4k] { background: var(--d-accent-soft); color: var(--d-accent); border-color: #fed7aa; }
.ftsur-day-pick[b-pk217szo4k] { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-3); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .12s; }
.ftsur-day-pick:hover[b-pk217szo4k] { background: var(--d-surface-2); }
.ftsur-day-pick.on[b-pk217szo4k] { border-color: var(--d-accent); background: var(--d-accent-soft); color: var(--d-accent); }
.ftsur-day-pick small[b-pk217szo4k] { font-size: 9px; font-weight: 500; color: inherit; opacity: 0.7; margin-top: 2px; }
.ftsur-day-quick[b-pk217szo4k] { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; }
.ftsur-day-quick button[b-pk217szo4k] { background: transparent; border: 0; color: var(--d-accent); font-weight: 600; cursor: pointer; padding: 0; }
.ftsur-day-quick button.muted[b-pk217szo4k] { color: var(--d-ink-3); font-weight: 500; }
.ftsur-time-wrap[b-pk217szo4k] { position: relative; }
.ftsur-time-wrap .ico[b-pk217szo4k] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); pointer-events: none; }
.ftsur-time-wrap .ftsur-input[b-pk217szo4k] { padding-left: 30px; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
/* /src/Features/FastTrack/Pages/Manager/Admin/Templates.razor.rz.scp.css */
/* CostRates — Manager Dashboard v4 theme */
.fttpl-root[b-j1wf7mfam3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.fttpl-shell[b-j1wf7mfam3] { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.fttpl-hero[b-j1wf7mfam3] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.fttpl-hero h1[b-j1wf7mfam3] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.fttpl-hero h1 em[b-j1wf7mfam3] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.fttpl-hero-meta[b-j1wf7mfam3] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.fttpl-hero-meta .dot[b-j1wf7mfam3] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.fttpl-hero-actions[b-j1wf7mfam3] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.fttpl-btn[b-j1wf7mfam3] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.fttpl-btn:hover[b-j1wf7mfam3] { background: var(--d-surface-2); }
.fttpl-btn-accent[b-j1wf7mfam3] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.fttpl-btn-accent:hover[b-j1wf7mfam3] { background: var(--d-accent-grad-hover); color: #fff; }
.fttpl-btn-accent:disabled[b-j1wf7mfam3], .fttpl-btn-accent[disabled][b-j1wf7mfam3] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }
.fttpl-btn-sm[b-j1wf7mfam3] { height: 32px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.fttpl-btn-danger[b-j1wf7mfam3] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.fttpl-btn-danger:hover[b-j1wf7mfam3] { background: #fee2e2; }
.fttpl-btn-solid-danger[b-j1wf7mfam3] { background: var(--d-danger); color: #fff; border-color: transparent; }
.fttpl-btn-solid-danger:hover[b-j1wf7mfam3] { background: #b91c1c; color: #fff; }

/* Cards */
.fttpl-card[b-j1wf7mfam3] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.fttpl-card-flex[b-j1wf7mfam3] { display: flex; flex-direction: column; }

/* Filter bar */
.fttpl-filter[b-j1wf7mfam3] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.fttpl-filter .lbl[b-j1wf7mfam3] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.fttpl-input[b-j1wf7mfam3], .fttpl-select[b-j1wf7mfam3] { height: 34px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.fttpl-input:focus[b-j1wf7mfam3], .fttpl-select:focus[b-j1wf7mfam3] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.fttpl-input.num[b-j1wf7mfam3] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.fttpl-count[b-j1wf7mfam3] { color: var(--d-ink-3); font-size: 11.5px; margin-left: auto; }
.fttpl-count b[b-j1wf7mfam3] { color: var(--d-ink); font-weight: 600; }

/* Alert */
.fttpl-alert[b-j1wf7mfam3] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
.fttpl-alert button[b-j1wf7mfam3] { margin-left: auto; background: transparent; border: 0; color: #b91c1c; cursor: pointer; }

/* Table */
.fttpl-tbl-wrap[b-j1wf7mfam3] { max-height: calc(100vh - 240px); display: flex; flex-direction: column; }
.fttpl-tbl-scroll[b-j1wf7mfam3] { overflow: auto; flex: 1; }
.fttpl-tbl[b-j1wf7mfam3] { width: 100%; border-collapse: collapse; font-size: 14px; }
.fttpl-tbl thead th[b-j1wf7mfam3] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.fttpl-tbl thead th.right[b-j1wf7mfam3] { text-align: right; }
.fttpl-tbl thead th.center[b-j1wf7mfam3] { text-align: center; }
.fttpl-tbl tbody td[b-j1wf7mfam3] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.fttpl-tbl tbody tr:last-child td[b-j1wf7mfam3] { border-bottom: 0; }
.fttpl-tbl tbody tr:hover[b-j1wf7mfam3] { background: var(--d-surface-2); }
.fttpl-tbl td.right[b-j1wf7mfam3] { text-align: right; }
.fttpl-tbl td.center[b-j1wf7mfam3] { text-align: center; }
.fttpl-tbl .num[b-j1wf7mfam3] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink); }
.fttpl-tbl .code[b-j1wf7mfam3] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-3); }

/* Pills / Tags */
.fttpl-tag[b-j1wf7mfam3] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); white-space: nowrap; }
.fttpl-tag.good[b-j1wf7mfam3] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.fttpl-tag.danger[b-j1wf7mfam3] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.fttpl-tag.muted[b-j1wf7mfam3] { background: var(--d-surface-2); color: var(--d-ink-3); }
.fttpl-tag.info[b-j1wf7mfam3] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.fttpl-tag .d[b-j1wf7mfam3] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.fttpl-tag .d.dot-good[b-j1wf7mfam3] { background: var(--d-good); }
.fttpl-tag .d.dot-mute[b-j1wf7mfam3] { background: var(--d-ink-4); }

/* Skeleton */
.fttpl-sk[b-j1wf7mfam3] { display: inline-block; height: 12px; background: linear-gradient(90deg, var(--d-surface-2) 0%, var(--d-line-2) 50%, var(--d-surface-2) 100%); background-size: 200% 100%; animation: fttpl-sh-b-j1wf7mfam3 1.2s linear infinite; border-radius: 4px; }
@keyframes fttpl-sh-b-j1wf7mfam3 { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty */
.fttpl-empty[b-j1wf7mfam3] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 16px; color: var(--d-ink-3); text-align: center; }
.fttpl-empty .ico[b-j1wf7mfam3] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: grid; place-items: center; }
.fttpl-empty b[b-j1wf7mfam3] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.fttpl-empty small[b-j1wf7mfam3] { font-size: 12px; }

/* Row actions */
.fttpl-row-actions[b-j1wf7mfam3] { display: flex; justify-content: flex-end; gap: 4px; }
.fttpl-icon-btn[b-j1wf7mfam3] { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 0; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.fttpl-icon-btn:hover[b-j1wf7mfam3] { background: var(--d-surface-2); color: var(--d-ink); }
.fttpl-icon-btn.danger:hover[b-j1wf7mfam3] { background: #fee2e2; color: #b91c1c; }

/* Pager */
.fttpl-pager[b-j1wf7mfam3] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d-line); background: var(--d-surface); font-size: 11.5px; color: var(--d-ink-3); }
.fttpl-pager b[b-j1wf7mfam3] { color: var(--d-ink); font-weight: 600; }
.fttpl-pager-right[b-j1wf7mfam3] { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fttpl-pager .fttpl-select[b-j1wf7mfam3] { height: 28px; padding: 0 8px; font-size: 11.5px; }
.fttpl-pager-btn[b-j1wf7mfam3] { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); font-size: 11.5px; cursor: pointer; }
.fttpl-pager-btn:hover:not(:disabled)[b-j1wf7mfam3] { background: var(--d-surface-2); }
.fttpl-pager-btn:disabled[b-j1wf7mfam3] { opacity: .4; cursor: not-allowed; }

/* Modal */
.fttpl-modal-bg[b-j1wf7mfam3] { position: fixed; inset: 0; background: rgba(28,25,23,0.45); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fttpl-modal[b-j1wf7mfam3] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 700px; display: flex; flex-direction: column; max-height: 92vh; }
.fttpl-modal-hd[b-j1wf7mfam3] { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--d-line); }
.fttpl-modal-hd h2[b-j1wf7mfam3] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.fttpl-modal-hd p[b-j1wf7mfam3] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.fttpl-modal-body[b-j1wf7mfam3] { padding: 18px 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.fttpl-modal-ft[b-j1wf7mfam3] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 12px 12px; font-size: 11.5px; color: var(--d-ink-3); }
.fttpl-modal-ft .actions[b-j1wf7mfam3] { display: flex; gap: 8px; margin-left: auto; }
.fttpl-section h3[b-j1wf7mfam3] { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.fttpl-grid[b-j1wf7mfam3] { display: grid; gap: 12px; }
.fttpl-grid-2[b-j1wf7mfam3] { grid-template-columns: 1fr 1fr; }
.fttpl-grid-3[b-j1wf7mfam3] { grid-template-columns: 1fr 2fr; }
.fttpl-field[b-j1wf7mfam3] { display: flex; flex-direction: column; gap: 6px; }
.fttpl-field label[b-j1wf7mfam3] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.fttpl-field .req[b-j1wf7mfam3] { color: var(--d-danger); }
.fttpl-field .hint[b-j1wf7mfam3] { font-size: 11px; color: var(--d-ink-3); }
.fttpl-field .err[b-j1wf7mfam3] { font-size: 11px; color: var(--d-danger); }
.fttpl-field .fttpl-input[b-j1wf7mfam3], .fttpl-field .fttpl-select[b-j1wf7mfam3] { height: 38px; }
.fttpl-radios[b-j1wf7mfam3] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fttpl-radio[b-j1wf7mfam3] { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.fttpl-radio:hover[b-j1wf7mfam3] { background: var(--d-surface-2); }
.fttpl-radio.active[b-j1wf7mfam3] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.fttpl-radio .top[b-j1wf7mfam3] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.fttpl-radio .sub[b-j1wf7mfam3] { font-size: 11.5px; color: var(--d-ink-3); }
.fttpl-checkbox[b-j1wf7mfam3] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; }
.fttpl-checkbox.active[b-j1wf7mfam3] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.fttpl-checkbox input[b-j1wf7mfam3] { margin-top: 3px; accent-color: var(--d-accent); }
.fttpl-checkbox .title[b-j1wf7mfam3] { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.fttpl-checkbox .desc[b-j1wf7mfam3] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.fttpl-rate-wrap[b-j1wf7mfam3] { position: relative; }
.fttpl-rate-wrap .suf[b-j1wf7mfam3] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); font-size: 12px; }

/* Confirm dialog */
.fttpl-confirm[b-j1wf7mfam3] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 380px; padding: 18px; }
.fttpl-confirm .head[b-j1wf7mfam3] { display: flex; gap: 10px; }
.fttpl-confirm .ico[b-j1wf7mfam3] { width: 36px; height: 36px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; flex-shrink: 0; }
.fttpl-confirm h3[b-j1wf7mfam3] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.fttpl-confirm p[b-j1wf7mfam3] { margin: 4px 0 0; font-size: 12px; color: var(--d-ink-3); }
.fttpl-confirm .ft[b-j1wf7mfam3] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 768px) {
    .fttpl-grid-2[b-j1wf7mfam3], .fttpl-grid-3[b-j1wf7mfam3], .fttpl-radios[b-j1wf7mfam3] { grid-template-columns: 1fr; }
    .fttpl-hero[b-j1wf7mfam3] { grid-template-columns: 1fr; }
}

/* Templates-specific */
.fttpl-file-ico[b-j1wf7mfam3] { width: 32px; height: 32px; border-radius: 7px; background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; display: grid; place-items: center; }
.fttpl-attached[b-j1wf7mfam3] { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--d-good-soft); border: 1px solid #bbf7d0; border-radius: 10px; }
.fttpl-attached .ico[b-j1wf7mfam3] { width: 36px; height: 36px; background: var(--d-surface); border: 1px solid #bbf7d0; border-radius: 8px; color: var(--d-good); display: grid; place-items: center; flex-shrink: 0; }
.fttpl-attached .name[b-j1wf7mfam3] { font-size: 12.5px; font-weight: 600; color: #166534; }
.fttpl-attached .id[b-j1wf7mfam3] { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--d-good); }
.fttpl-dropzone[b-j1wf7mfam3] { display: block; padding: 28px; text-align: center; border: 2px dashed var(--d-line); border-radius: 10px; cursor: pointer; transition: all .12s; }
.fttpl-dropzone:hover[b-j1wf7mfam3] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.fttpl-dropzone svg[b-j1wf7mfam3] { width: 36px; height: 36px; color: var(--d-ink-4); margin: 0 auto; }
.fttpl-dropzone .lbl[b-j1wf7mfam3] { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.fttpl-dropzone .sub[b-j1wf7mfam3] { margin-top: 2px; font-size: 11px; color: var(--d-ink-3); }
.fttpl-placeholders[b-j1wf7mfam3] { padding: 12px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: 10px; }
.fttpl-placeholders h4[b-j1wf7mfam3] { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.fttpl-placeholders .list[b-j1wf7mfam3] { display: flex; flex-wrap: wrap; gap: 6px; }
.fttpl-placeholders .ph[b-j1wf7mfam3] { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; padding: 2px 7px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 4px; color: var(--d-ink-2); }
.fttpl-version-badge[b-j1wf7mfam3] { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; }
.fttpl-stepper[b-j1wf7mfam3] { display: flex; align-items: stretch; }
.fttpl-stepper button[b-j1wf7mfam3] { width: 30px; background: var(--d-surface-2); border: 1px solid var(--d-line); color: var(--d-ink-2); display: grid; place-items: center; cursor: pointer; }
.fttpl-stepper button:first-child[b-j1wf7mfam3] { border-radius: 8px 0 0 8px; border-right: 0; }
.fttpl-stepper button:last-child[b-j1wf7mfam3] { border-radius: 0 8px 8px 0; border-left: 0; }
.fttpl-stepper input[b-j1wf7mfam3] { flex: 1; height: 38px; border: 1px solid var(--d-line); text-align: center; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; outline: none; }
.fttpl-stepper input:focus[b-j1wf7mfam3] { border-color: var(--d-accent); }
/* /src/Features/FastTrack/Pages/Manager/BookingDetail.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Booking Detail — Manager Dashboard v4 theme
   prefix: ftbd-
   ═══════════════════════════════════════════════════════════════ */

/* Khai báo CSS vars trên CẢ root + modal-bg + fab-wrap — các phần này render là
   sibling NGOÀI .ftbd-root nên không kế thừa được var nếu chỉ khai trên root
   (nền modal trong suốt; label FAB mất nền; nút FAB chính mất gradient). */
.ftbd-root[b-7046k90jo5],
.ftbd-modal-bg[b-7046k90jo5],
.ftbd-fab-wrap[b-7046k90jo5] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
}

.ftbd-root[b-7046k90jo5] {
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    padding-bottom: 96px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.ftbd-container[b-7046k90jo5] {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Alert ─── */
.ftbd-alert[b-7046k90jo5] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border: 1px solid color-mix(in srgb, var(--d-danger) 24%, var(--d-line));
    color: var(--d-danger);
    font-size: 12.5px;
}

    .ftbd-alert-msg[b-7046k90jo5] {
        flex: 1;
    }

    .ftbd-alert button[b-7046k90jo5] {
        background: none;
        border: 0;
        color: var(--d-danger);
        opacity: .65;
        cursor: pointer;
        font-size: 14px;
        padding: 0 4px;
    }

        .ftbd-alert button:hover[b-7046k90jo5] {
            opacity: 1;
        }

/* ─── Header chips ─── */
.ftbd-chip[b-7046k90jo5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
}

    .ftbd-chip .d[b-7046k90jo5] {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

    .ftbd-chip.mono[b-7046k90jo5] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: .03em;
    }

    .ftbd-chip.good[b-7046k90jo5] { color: var(--d-good); background: var(--d-good-soft); border-color: color-mix(in srgb, var(--d-good) 22%, var(--d-line)); }
    .ftbd-chip.good .d[b-7046k90jo5] { background: var(--d-good); }
    .ftbd-chip.warn[b-7046k90jo5] { color: var(--d-warn); background: var(--d-warn-soft); border-color: color-mix(in srgb, var(--d-warn) 22%, var(--d-line)); }
    .ftbd-chip.warn .d[b-7046k90jo5] { background: var(--d-warn); }
    .ftbd-chip.danger[b-7046k90jo5] { color: var(--d-danger); background: var(--d-danger-soft); border-color: color-mix(in srgb, var(--d-danger) 22%, var(--d-line)); }
    .ftbd-chip.danger .d[b-7046k90jo5] { background: var(--d-danger); }
    .ftbd-chip.info[b-7046k90jo5] { color: #0369a1; background: color-mix(in srgb, #0ea5e9 10%, var(--d-surface)); border-color: color-mix(in srgb, #0ea5e9 22%, var(--d-line)); }
    .ftbd-chip.info .d[b-7046k90jo5] { background: #0ea5e9; }
    .ftbd-chip.violet[b-7046k90jo5] { color: #6d28d9; background: color-mix(in srgb, #8b5cf6 10%, var(--d-surface)); border-color: color-mix(in srgb, #8b5cf6 22%, var(--d-line)); }
    .ftbd-chip.violet .d[b-7046k90jo5] { background: #8b5cf6; }
    .ftbd-chip.accent[b-7046k90jo5] { color: var(--d-accent); background: var(--d-accent-soft); border-color: color-mix(in srgb, var(--d-accent) 22%, var(--d-line)); }
    .ftbd-chip.accent .d[b-7046k90jo5] { background: var(--d-accent); }

/* ─── Tabs ─── */
.ftbd-tabs[b-7046k90jo5] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    border-bottom: 1px solid var(--d-line-2);
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    background: linear-gradient(180deg, #fdfcfa 0%, var(--d-bg) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 12px;
}

.ftbd-tab[b-7046k90jo5] {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    color: var(--d-ink-3);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
    font-family: inherit;
}

    .ftbd-tab:hover[b-7046k90jo5] {
        color: var(--d-ink-2);
        border-bottom-color: var(--d-line);
    }

    .ftbd-tab .num[b-7046k90jo5] {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        font-size: 10.5px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ftbd-tab.active[b-7046k90jo5] {
        color: var(--d-ink);
        border-bottom-color: var(--d-accent);
    }

        .ftbd-tab.active .num[b-7046k90jo5] {
            background: var(--d-accent-grad);
            color: #fff;
        }

/* ─── Card (soft) ─── */
.ftbd-card[b-7046k90jo5] {
    background: var(--d-surface);
    border: 1px solid var(--d-line-2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(28, 25, 23, 0.02);
    transition: border-color .15s;
}

    .ftbd-card:hover[b-7046k90jo5] {
        border-color: var(--d-line);
    }

.ftbd-card-pad[b-7046k90jo5] {
    padding: 12px 14px;
}

.ftbd-card-hd[b-7046k90jo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #fdfcfa 0%, var(--d-surface) 100%);
    border-bottom: 1px solid var(--d-line-2);
}

    .ftbd-card-hd h3[b-7046k90jo5] {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.09em;
    }

.ftbd-loading[b-7046k90jo5] {
    padding: 64px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--d-ink-3);
    font-size: 12px;
}

    .ftbd-loading svg[b-7046k90jo5] {
        color: var(--d-accent);
    }

/* ─── Grids ─── */
.ftbd-grid-2[b-7046k90jo5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .ftbd-grid-2[b-7046k90jo5] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─── Field rows in info card ─── */
.ftbd-field[b-7046k90jo5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .ftbd-field-lbl[b-7046k90jo5] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .ftbd-field-val[b-7046k90jo5] {
        font-size: 14px;
        color: var(--d-ink);
    }

        .ftbd-field-val.mono[b-7046k90jo5] {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 12.5px;
        }

        .ftbd-field-val.muted[b-7046k90jo5] {
            color: var(--d-ink-3);
            font-style: italic;
            font-size: 12px;
        }

.ftbd-field-grid[b-7046k90jo5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ftbd-stack[b-7046k90jo5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── Pricing rows ─── */
.ftbd-pricing[b-7046k90jo5] {
    border-top: 1px solid var(--d-line);
    padding-top: 6px;
    margin-top: 6px;
}

.ftbd-pricing-row[b-7046k90jo5] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
}

    .ftbd-pricing-row .v[b-7046k90jo5] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
        color: var(--d-ink);
    }

    .ftbd-pricing-row.total[b-7046k90jo5] {
        font-weight: 600;
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 0;
        color: var(--d-ink);
    }

    .ftbd-pricing-row.danger[b-7046k90jo5],
    .ftbd-pricing-row.danger .v[b-7046k90jo5] {
        color: var(--d-danger);
    }

.ftbd-callout[b-7046k90jo5] {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .ftbd-callout.warn[b-7046k90jo5] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border: 1px solid color-mix(in srgb, var(--d-warn) 24%, var(--d-line));
    }

    .ftbd-callout svg[b-7046k90jo5] {
        flex-shrink: 0;
        margin-top: 1px;
    }

/* ─── Notes ─── */
.ftbd-note[b-7046k90jo5] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line-2);
    border-radius: var(--d-r);
    padding: 10px 12px;
}

    .ftbd-note .meta[b-7046k90jo5] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: var(--d-ink-3);
    }

    .ftbd-note .body[b-7046k90jo5] {
        margin-top: 6px;
        font-size: 14px;
        color: var(--d-ink);
        white-space: pre-wrap;
    }

    .ftbd-note .meta .pin[b-7046k90jo5] {
        color: var(--d-warn);
    }

    .ftbd-note .meta .del[b-7046k90jo5] {
        margin-left: auto;
        background: none;
        border: 0;
        color: var(--d-danger);
        cursor: pointer;
        font-size: 11px;
        opacity: 0;
        transition: opacity .12s;
    }

    .ftbd-note:hover .meta .del[b-7046k90jo5] {
        opacity: 1;
    }

.ftbd-empty-line[b-7046k90jo5] {
    text-align: center;
    padding: 14px 0;
    color: var(--d-ink-4);
    font-size: 12px;
    font-style: italic;
}

.ftbd-note-add[b-7046k90jo5] {
    border-top: 1px solid var(--d-line);
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ftbd-note-add-row[b-7046k90jo5] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

/* ─── Buttons ─── */
.ftbd-btn[b-7046k90jo5] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s, opacity .12s;
    text-decoration: none;
    font-family: inherit;
}

    .ftbd-btn:hover[b-7046k90jo5] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .ftbd-btn:disabled[b-7046k90jo5] {
        opacity: .5;
        cursor: not-allowed;
    }

.ftbd-btn-accent[b-7046k90jo5] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .ftbd-btn-accent:hover[b-7046k90jo5] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.ftbd-btn-danger[b-7046k90jo5] {
    background: color-mix(in srgb, var(--d-danger) 92%, #fff);
    color: #fff;
    border-color: transparent;
}

    .ftbd-btn-danger:hover[b-7046k90jo5] {
        background: var(--d-danger);
        color: #fff;
    }

.ftbd-btn-compact[b-7046k90jo5] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.ftbd-btn-full[b-7046k90jo5] {
    width: 100%;
}

/* ─── Form inputs ─── */
.ftbd-input[b-7046k90jo5],
.ftbd-select[b-7046k90jo5],
.ftbd-textarea[b-7046k90jo5] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
}

.ftbd-textarea[b-7046k90jo5] {
    height: auto;
    padding: 8px 12px;
    line-height: 1.45;
    resize: vertical;
}

.ftbd-input:focus[b-7046k90jo5],
.ftbd-select:focus[b-7046k90jo5],
.ftbd-textarea:focus[b-7046k90jo5] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}

.ftbd-input.mono[b-7046k90jo5] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ftbd-select[b-7046k90jo5] {
    padding: 0 28px 0 12px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.ftbd-input-compact[b-7046k90jo5] {
    height: 32px;
    font-size: 12px;
}

.ftbd-label[b-7046k90jo5] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    display: block;
}

.ftbd-checkbox[b-7046k90jo5] {
    width: 16px;
    height: 16px;
    accent-color: var(--d-accent);
}

.ftbd-checkrow[b-7046k90jo5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-2);
    cursor: pointer;
}

/* ─── Toolbar / form rows ─── */
.ftbd-form-grid[b-7046k90jo5] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    align-items: end;
}

.ftbd-form-grid > *[b-7046k90jo5] {
    grid-column: span 12;
}

@media (min-width: 768px) {
    .ftbd-form-grid > .col-2[b-7046k90jo5] { grid-column: span 2; }
    .ftbd-form-grid > .col-3[b-7046k90jo5] { grid-column: span 3; }
    .ftbd-form-grid > .col-4[b-7046k90jo5] { grid-column: span 4; }
    .ftbd-form-grid > .col-5[b-7046k90jo5] { grid-column: span 5; }
    .ftbd-form-grid > .col-6[b-7046k90jo5] { grid-column: span 6; }
    .ftbd-form-grid > .col-7[b-7046k90jo5] { grid-column: span 7; }
}

/* ─── Tables ─── */
.ftbd-tbl-wrap[b-7046k90jo5] {
    overflow-x: auto;
}

.ftbd-tbl[b-7046k90jo5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .ftbd-tbl thead th[b-7046k90jo5] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .ftbd-tbl thead th.right[b-7046k90jo5] { text-align: right; }
        .ftbd-tbl thead th.center[b-7046k90jo5] { text-align: center; }

    .ftbd-tbl tbody td[b-7046k90jo5] {
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .ftbd-tbl tbody tr:hover[b-7046k90jo5] {
        background: var(--d-surface-2);
    }

    .ftbd-tbl tbody tr:last-child td[b-7046k90jo5] {
        border-bottom: 0;
    }

    .ftbd-tbl td.right[b-7046k90jo5] { text-align: right; }
    .ftbd-tbl td.center[b-7046k90jo5] { text-align: center; }

    .ftbd-tbl td.name[b-7046k90jo5] {
        font-weight: 600;
        color: var(--d-ink);
    }

    .ftbd-tbl td.mono[b-7046k90jo5] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        color: var(--d-ink-2);
    }

    .ftbd-tbl tr.totals[b-7046k90jo5] {
        background: var(--d-surface-2);
        font-weight: 600;
    }

        .ftbd-tbl tr.totals td[b-7046k90jo5] {
            color: var(--d-ink);
        }

.ftbd-num[b-7046k90jo5] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}

    .ftbd-num .ccy[b-7046k90jo5] {
        color: var(--d-ink-4);
        font-size: 10.5px;
        margin-left: 3px;
    }

/* Action icon buttons in tables */
.ftbd-iconbtn[b-7046k90jo5] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftbd-iconbtn:hover[b-7046k90jo5] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ftbd-iconbtn.danger:hover[b-7046k90jo5] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

    .ftbd-iconbtn.info:hover[b-7046k90jo5] {
        background: color-mix(in srgb, #0ea5e9 12%, var(--d-surface));
        color: #0369a1;
    }

/* Photo cell */
.ftbd-photo[b-7046k90jo5] {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--d-line);
    cursor: zoom-in;
    background: var(--d-surface-2);
}

    .ftbd-photo img[b-7046k90jo5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ftbd-photo .badge[b-7046k90jo5] {
        position: absolute;
        top: -4px;
        right: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--d-accent-grad);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* ─── Expense skip categories panel ─── */
.ftbd-skip-grid[b-7046k90jo5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

@media (min-width: 768px) {
    .ftbd-skip-grid[b-7046k90jo5] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ftbd-skip-item[b-7046k90jo5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--d-ink-2);
}

    .ftbd-skip-item.skipped[b-7046k90jo5] {
        color: var(--d-ink-4);
        text-decoration: line-through;
    }

    .ftbd-skip-item .tag[b-7046k90jo5] {
        font-size: 10px;
        color: var(--d-accent);
        margin-left: 4px;
    }

.ftbd-section-sub[b-7046k90jo5] {
    font-size: 11px;
    color: var(--d-ink-3);
}

/* ─── Files grid ─── */
.ftbd-file-grid[b-7046k90jo5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .ftbd-file-grid[b-7046k90jo5] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ftbd-file-card[b-7046k90jo5] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    padding: 12px;
}

    .ftbd-file-card .head[b-7046k90jo5] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .ftbd-file-card .path[b-7046k90jo5] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 6px;
        word-break: break-all;
    }

    .ftbd-file-card .foot[b-7046k90jo5] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 11px;
        color: var(--d-ink-3);
    }

        .ftbd-file-card .foot button[b-7046k90jo5] {
            background: none;
            border: 0;
            color: var(--d-danger);
            cursor: pointer;
            font-weight: 500;
            font-size: 11px;
        }

.ftbd-color-dot[b-7046k90jo5] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--d-line);
}

    .ftbd-color-dot.white[b-7046k90jo5] { background: #fff; }
    .ftbd-color-dot.yellow[b-7046k90jo5] { background: #fbbf24; border-color: #f59e0b; }
    .ftbd-color-dot.pink[b-7046k90jo5] { background: #f472b6; border-color: #ec4899; }

.ftbd-file-input[b-7046k90jo5] {
    width: 100%;
    font-size: 12.5px;
}

    .ftbd-file-input[b-7046k90jo5]::file-selector-button {
        padding: 6px 10px;
        border-radius: 6px;
        border: 0;
        background: var(--d-surface-2);
        color: var(--d-ink-2);
        font-size: 12px;
        font-weight: 500;
        margin-right: 10px;
        cursor: pointer;
    }

        .ftbd-file-input[b-7046k90jo5]::file-selector-button:hover {
            background: var(--d-line);
        }

.ftbd-hint[b-7046k90jo5] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin: 6px 0 0;
}

.ftbd-uploading[b-7046k90jo5] {
    font-size: 11px;
    color: var(--d-accent);
    margin-top: 4px;
}

/* ─── FAB ─── */
/* Scrim làm mờ trang khi mở FAB → nút + label nổi rõ, không bị chữ phía sau xuyên qua.
   Click vào scrim để đóng. z-index < fab-wrap để nút vẫn bấm được. */
.ftbd-fab-scrim[b-7046k90jo5] {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(28, 25, 23, .32);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: ftbd-fab-fade-b-7046k90jo5 .15s ease-out;
}

@keyframes ftbd-fab-fade-b-7046k90jo5 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ftbd-fab-wrap[b-7046k90jo5] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.ftbd-fab-item[b-7046k90jo5] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ftbd-fab-item .lbl[b-7046k90jo5] {
        padding: 6px 12px;
        border-radius: 8px;
        background: var(--d-surface);
        border: 1px solid var(--d-line);
        font-size: 12px;
        font-weight: 500;
        color: var(--d-ink-2);
        box-shadow: 0 4px 10px -2px rgba(28,25,23,.08);
    }

.ftbd-fab-btn[b-7046k90jo5] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px -4px rgba(28,25,23,.25);
    transition: transform .12s, filter .12s;
}

    .ftbd-fab-btn:hover[b-7046k90jo5] {
        filter: brightness(1.05);
    }

    .ftbd-fab-btn.violet[b-7046k90jo5] { background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); }
    .ftbd-fab-btn.indigo[b-7046k90jo5] { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); }
    .ftbd-fab-btn.sky[b-7046k90jo5] { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); }
    .ftbd-fab-btn.warn[b-7046k90jo5] { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
    .ftbd-fab-btn.danger[b-7046k90jo5] { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); }
    .ftbd-fab-btn.good[b-7046k90jo5] { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); }
    .ftbd-fab-btn.rose[b-7046k90jo5] { background: linear-gradient(135deg, #be123c 0%, #e11d48 100%); }

.ftbd-fab-main[b-7046k90jo5] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px -4px rgba(234,88,12,.4);
    transition: transform .15s;
}

    .ftbd-fab-main.open[b-7046k90jo5] {
        transform: rotate(45deg);
    }

/* ─── Modal ─── */
.ftbd-modal-bg[b-7046k90jo5] {
    position: fixed;
    inset: 0;
    background: rgba(28,25,23,.5);
    backdrop-filter: blur(6px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ftbd-modal[b-7046k90jo5] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 20px 60px -10px rgba(28,25,23,.3);
    max-height: 92vh;
    overflow: auto;
    width: 100%;
    max-width: 520px;
}

    .ftbd-modal.lg[b-7046k90jo5] {
        max-width: 760px;
    }

    .ftbd-modal.md[b-7046k90jo5] {
        max-width: 640px;
    }

    .ftbd-modal-pad[b-7046k90jo5] {
        padding: 20px 22px;
    }

.ftbd-modal-hd[b-7046k90jo5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .ftbd-modal-hd h2[b-7046k90jo5] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .ftbd-modal-hd button[b-7046k90jo5] {
        background: none;
        border: 0;
        color: var(--d-ink-3);
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        padding: 4px 8px;
    }

        .ftbd-modal-hd button:hover[b-7046k90jo5] {
            color: var(--d-ink);
        }

.ftbd-modal-foot[b-7046k90jo5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--d-line);
}

/* Lightbox */
.ftbd-lightbox[b-7046k90jo5] {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
}

    .ftbd-lightbox img[b-7046k90jo5] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 10px;
        box-shadow: 0 12px 60px rgba(0,0,0,.5);
    }

    .ftbd-lightbox .close[b-7046k90jo5] {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        color: #fff;
        border: 0;
        font-size: 18px;
        cursor: pointer;
    }

        .ftbd-lightbox .close:hover[b-7046k90jo5] {
            background: rgba(255,255,255,.28);
        }

/* Passenger upload dropzone */
.ftbd-dropzone[b-7046k90jo5] {
    display: block;
    padding: 18px;
    border: 2px dashed var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .ftbd-dropzone:hover[b-7046k90jo5],
    .ftbd-dropzone.over[b-7046k90jo5] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .ftbd-dropzone .ico[b-7046k90jo5] {
        width: 28px;
        height: 28px;
        color: var(--d-ink-4);
        margin: 0 auto 6px;
        display: block;
    }

    .ftbd-dropzone .title[b-7046k90jo5] {
        font-size: 14px;
        font-weight: 500;
        color: var(--d-ink-2);
    }

    .ftbd-dropzone .sub[b-7046k90jo5] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 4px;
    }

    .ftbd-dropzone .hint[b-7046k90jo5] {
        font-size: 10px;
        color: var(--d-ink-4);
        margin-top: 4px;
    }

.ftbd-px-grid[b-7046k90jo5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ftbd-px-thumb[b-7046k90jo5] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

    .ftbd-px-thumb img[b-7046k90jo5] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: zoom-in;
    }

    .ftbd-px-thumb .x[b-7046k90jo5] {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--d-danger);
        color: #fff;
        border: 0;
        font-size: 11px;
        cursor: pointer;
        opacity: 0;
        transition: opacity .12s;
    }

    .ftbd-px-thumb:hover .x[b-7046k90jo5] {
        opacity: 1;
    }

/* Inline alerts inside modal */
.ftbd-modal-alert[b-7046k90jo5] {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--d-r);
    font-size: 12px;
}

    .ftbd-modal-alert.danger[b-7046k90jo5] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
        border: 1px solid color-mix(in srgb, var(--d-danger) 22%, var(--d-line));
    }

    .ftbd-modal-alert.good[b-7046k90jo5] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border: 1px solid color-mix(in srgb, var(--d-good) 22%, var(--d-line));
    }

/* Bulk import textarea */
.ftbd-textarea.mono[b-7046k90jo5] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
}
/* /src/Features/FastTrack/Pages/Manager/Bookings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Bookings — Manager Dashboard v4 theme
   prefix: ftb-
   ═══════════════════════════════════════════════════════════════ */

.ftb-root[b-6xdibi0qdi] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.ftb-container[b-6xdibi0qdi] {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.ftb-hero[b-6xdibi0qdi] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .ftb-hero h1[b-6xdibi0qdi] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .ftb-hero h1 em[b-6xdibi0qdi] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.ftb-hero-meta[b-6xdibi0qdi] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .ftb-hero-meta .dot[b-6xdibi0qdi] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.ftb-hero-actions[b-6xdibi0qdi] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.ftb-btn[b-6xdibi0qdi] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ftb-btn:hover[b-6xdibi0qdi] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .ftb-btn:disabled[b-6xdibi0qdi] {
        opacity: .45;
        cursor: not-allowed;
    }

.ftb-btn-accent[b-6xdibi0qdi] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ftb-btn-accent:hover[b-6xdibi0qdi] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.ftb-btn-compact[b-6xdibi0qdi] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.ftb-btn-danger[b-6xdibi0qdi] {
    color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border-color: color-mix(in srgb, var(--d-danger) 22%, var(--d-line));
}

    .ftb-btn-danger:hover[b-6xdibi0qdi] {
        background: color-mix(in srgb, var(--d-danger) 14%, var(--d-surface));
        color: var(--d-danger);
    }

/* ─── Alert ─── */
.ftb-alert[b-6xdibi0qdi] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border: 1px solid color-mix(in srgb, var(--d-danger) 24%, var(--d-line));
    color: var(--d-danger);
    font-size: 12.5px;
}

    .ftb-alert .ftb-alert-msg[b-6xdibi0qdi] {
        flex: 1;
    }

    .ftb-alert button[b-6xdibi0qdi] {
        background: none;
        border: 0;
        color: var(--d-danger);
        opacity: .65;
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
        padding: 0 4px;
    }

        .ftb-alert button:hover[b-6xdibi0qdi] {
            opacity: 1;
        }

/* ─── Card ─── */
.ftb-card[b-6xdibi0qdi] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filter bar ─── */
.ftb-filter[b-6xdibi0qdi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.ftb-search[b-6xdibi0qdi] {
    position: relative;
    flex: 1;
    min-width: 240px;
}

    .ftb-search svg.ftb-search-ic[b-6xdibi0qdi] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

.ftb-input[b-6xdibi0qdi] {
    height: 34px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
}

    .ftb-input:focus[b-6xdibi0qdi] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.ftb-input.ftb-search-input[b-6xdibi0qdi] {
    width: 100%;
    padding-left: 30px;
}

.ftb-input.ftb-airport[b-6xdibi0qdi] {
    width: 120px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .04em;
}

.ftb-input.ftb-date[b-6xdibi0qdi] {
    width: 150px;
}

.ftb-select[b-6xdibi0qdi] {
    height: 34px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .12s, box-shadow .12s;
}

    .ftb-select:focus[b-6xdibi0qdi] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.ftb-sep[b-6xdibi0qdi] {
    color: var(--d-ink-4);
    font-size: 12px;
}

/* ─── KPI strip ─── */
.ftb-kpis[b-6xdibi0qdi] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

@media (min-width: 640px) {
    .ftb-kpis[b-6xdibi0qdi] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .ftb-kpis[b-6xdibi0qdi] {
        grid-template-columns: repeat(6, 1fr);
    }
}

.ftb-kpi[b-6xdibi0qdi] {
    padding: 14px 16px;
    border-right: 1px solid var(--d-line);
    border-bottom: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .ftb-kpi[b-6xdibi0qdi] {
        border-bottom: 0;
    }
}

.ftb-kpi:last-child[b-6xdibi0qdi] {
    border-right: 0;
}

.ftb-kpi-lbl[b-6xdibi0qdi] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ftb-kpi-dot[b-6xdibi0qdi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--d-ink-4);
}

    .ftb-kpi-dot.accent[b-6xdibi0qdi] {
        background: var(--d-accent-grad);
    }

    .ftb-kpi-dot.good[b-6xdibi0qdi] {
        background: var(--d-good);
    }

    .ftb-kpi-dot.warn[b-6xdibi0qdi] {
        background: var(--d-warn);
    }

    .ftb-kpi-dot.danger[b-6xdibi0qdi] {
        background: var(--d-danger);
    }

.ftb-kpi-val[b-6xdibi0qdi] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

    .ftb-kpi-val .unit[b-6xdibi0qdi] {
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-3);
        margin-left: 4px;
        letter-spacing: 0;
    }

/* ─── Table ─── */
.ftb-tbl-wrap[b-6xdibi0qdi] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 320px);
}

.ftb-tbl-scroll[b-6xdibi0qdi] {
    flex: 1;
    overflow: auto;
}

.ftb-tbl[b-6xdibi0qdi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .ftb-tbl thead th[b-6xdibi0qdi] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .ftb-tbl thead th.right[b-6xdibi0qdi] {
            text-align: right;
        }

        .ftb-tbl thead th.center[b-6xdibi0qdi] {
            text-align: center;
        }

    .ftb-tbl tbody td[b-6xdibi0qdi] {
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .ftb-tbl tbody tr:last-child td[b-6xdibi0qdi] {
        border-bottom: 0;
    }

    .ftb-tbl tbody tr.ftb-row[b-6xdibi0qdi] {
        cursor: pointer;
        transition: background .12s;
    }

        .ftb-tbl tbody tr.ftb-row:hover[b-6xdibi0qdi] {
            background: var(--d-surface-2);
        }

    .ftb-tbl td.right[b-6xdibi0qdi] {
        text-align: right;
    }

    .ftb-tbl td.center[b-6xdibi0qdi] {
        text-align: center;
    }

.ftb-code[b-6xdibi0qdi] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 600;
}

.ftb-pkg-name[b-6xdibi0qdi] {
    font-weight: 600;
    color: var(--d-ink);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftb-pkg-sub[b-6xdibi0qdi] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftb-num[b-6xdibi0qdi] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink);
    font-weight: 500;
}

    .ftb-num .ccy[b-6xdibi0qdi] {
        color: var(--d-ink-4);
        font-size: 10.5px;
        margin-left: 3px;
        font-family: inherit;
    }

.ftb-flight[b-6xdibi0qdi] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
}

/* Airport pill — soft color-mix backgrounds */
.ftb-apt[b-6xdibi0qdi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

    .ftb-apt.sgn[b-6xdibi0qdi] {
        color: #0369a1;
        background: color-mix(in srgb, #0ea5e9 10%, var(--d-surface));
        border-color: color-mix(in srgb, #0ea5e9 22%, var(--d-line));
    }

    .ftb-apt.han[b-6xdibi0qdi] {
        color: #6d28d9;
        background: color-mix(in srgb, #8b5cf6 10%, var(--d-surface));
        border-color: color-mix(in srgb, #8b5cf6 22%, var(--d-line));
    }

    .ftb-apt.dad[b-6xdibi0qdi] {
        color: #047857;
        background: color-mix(in srgb, #10b981 10%, var(--d-surface));
        border-color: color-mix(in srgb, #10b981 22%, var(--d-line));
    }

/* Skeleton loading */
.ftb-skel[b-6xdibi0qdi] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftb-pulse-b-6xdibi0qdi 1.4s ease-in-out infinite;
}

@keyframes ftb-pulse-b-6xdibi0qdi {
    0%, 100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

/* Empty state */
.ftb-empty[b-6xdibi0qdi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .ftb-empty .ico[b-6xdibi0qdi] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--d-accent-grad-soft);
        border: 1px solid #fed7aa;
        display: grid;
        place-items: center;
        color: var(--d-accent);
        margin-bottom: 6px;
    }

    .ftb-empty b[b-6xdibi0qdi] {
        color: var(--d-ink);
        font-weight: 600;
        font-size: 13.5px;
    }

    .ftb-empty small[b-6xdibi0qdi] {
        font-size: 12px;
        color: var(--d-ink-3);
        max-width: 320px;
    }

    .ftb-empty .ftb-empty-actions[b-6xdibi0qdi] {
        margin-top: 10px;
        display: flex;
        gap: 8px;
    }

/* Pagination footer */
.ftb-pager[b-6xdibi0qdi] {
    padding: 10px 14px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--d-ink-3);
    font-size: 11.5px;
}

@media (min-width: 640px) {
    .ftb-pager[b-6xdibi0qdi] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ftb-pager strong[b-6xdibi0qdi] {
    color: var(--d-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ftb-pager-actions[b-6xdibi0qdi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ftb-pager-btn[b-6xdibi0qdi] {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 11.5px;
    cursor: pointer;
    transition: background .12s;
}

    .ftb-pager-btn:hover:not(:disabled)[b-6xdibi0qdi] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ftb-pager-btn:disabled[b-6xdibi0qdi] {
        opacity: .35;
        cursor: not-allowed;
    }
/* /src/Features/FastTrack/Pages/Manager/ManagerCreate.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Manager Create — Manager Dashboard v4 theme
   prefix: ftmc-
   ═══════════════════════════════════════════════════════════════ */

.ftmc-root[b-9odj4hhoyb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.ftmc-container[b-9odj4hhoyb] {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Alert ─── */
.ftmc-alert[b-9odj4hhoyb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border: 1px solid color-mix(in srgb, var(--d-danger) 24%, var(--d-line));
    color: var(--d-danger);
    font-size: 12.5px;
}

    .ftmc-alert .msg[b-9odj4hhoyb] { flex: 1; }
    .ftmc-alert button[b-9odj4hhoyb] {
        background: none;
        border: 0;
        color: var(--d-danger);
        opacity: .65;
        cursor: pointer;
        font-size: 14px;
        padding: 0 4px;
    }
    .ftmc-alert button:hover[b-9odj4hhoyb] { opacity: 1; }

/* ─── Card ─── */
.ftmc-card[b-9odj4hhoyb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.ftmc-card-hd[b-9odj4hhoyb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .ftmc-card-hd h3[b-9odj4hhoyb] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

/* ─── Layout grid ─── */
.ftmc-grid[b-9odj4hhoyb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .ftmc-grid[b-9odj4hhoyb] {
        grid-template-columns: 2fr 1fr;
    }
}

.ftmc-col[b-9odj4hhoyb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ─── Buttons ─── */
.ftmc-btn[b-9odj4hhoyb] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s, opacity .12s;
    text-decoration: none;
    font-family: inherit;
}

    .ftmc-btn:hover[b-9odj4hhoyb] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ftmc-btn:disabled[b-9odj4hhoyb] {
        opacity: .5;
        cursor: not-allowed;
    }

.ftmc-btn-accent[b-9odj4hhoyb] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .ftmc-btn-accent:hover[b-9odj4hhoyb] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .ftmc-btn-accent:disabled[b-9odj4hhoyb] {
        background: var(--d-surface-2);
        color: var(--d-ink-4);
        box-shadow: none;
    }

.ftmc-btn-compact[b-9odj4hhoyb] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.ftmc-btn-icon[b-9odj4hhoyb] {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftmc-btn-icon:hover[b-9odj4hhoyb] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ftmc-btn-icon.danger:hover[b-9odj4hhoyb] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

.ftmc-btn-full[b-9odj4hhoyb] {
    width: 100%;
}

/* ─── Inputs ─── */
.ftmc-input[b-9odj4hhoyb],
.ftmc-select[b-9odj4hhoyb],
.ftmc-textarea[b-9odj4hhoyb] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
}

.ftmc-textarea[b-9odj4hhoyb] {
    height: auto;
    padding: 8px 12px;
    line-height: 1.45;
    resize: vertical;
}

.ftmc-input:focus[b-9odj4hhoyb],
.ftmc-select:focus[b-9odj4hhoyb],
.ftmc-textarea:focus[b-9odj4hhoyb] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}

.ftmc-input.mono[b-9odj4hhoyb] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ftmc-input.compact[b-9odj4hhoyb] {
    height: 34px;
    font-size: 12.5px;
}

.ftmc-select[b-9odj4hhoyb] {
    padding: 0 28px 0 12px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.ftmc-input.warn[b-9odj4hhoyb] {
    border-color: color-mix(in srgb, var(--d-warn) 38%, var(--d-line));
}

    .ftmc-input.warn:focus[b-9odj4hhoyb] {
        border-color: var(--d-warn);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-warn) 18%, transparent);
    }

.ftmc-label[b-9odj4hhoyb] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    display: block;
}

    .ftmc-label.warn[b-9odj4hhoyb] {
        color: var(--d-warn);
    }

    .ftmc-label .badge[b-9odj4hhoyb] {
        margin-left: 6px;
        padding: 1px 6px;
        border-radius: 4px;
        background: var(--d-warn-soft);
        color: var(--d-warn);
        font-size: 9.5px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        border: 1px solid color-mix(in srgb, var(--d-warn) 22%, var(--d-line));
    }

.ftmc-checkbox[b-9odj4hhoyb] {
    width: 16px;
    height: 16px;
    accent-color: var(--d-accent);
}

.ftmc-checkrow[b-9odj4hhoyb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-2);
    cursor: pointer;
}

/* Field grids */
.ftmc-form-3[b-9odj4hhoyb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .ftmc-form-3[b-9odj4hhoyb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ftmc-form-2[b-9odj4hhoyb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .ftmc-form-2[b-9odj4hhoyb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ftmc-stack[b-9odj4hhoyb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ftmc-divider[b-9odj4hhoyb] {
    border-top: 1px solid var(--d-line);
    padding-top: 12px;
    margin-top: 12px;
}

.ftmc-row-flex[b-9odj4hhoyb] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ─── Package picker ─── */
.ftmc-pkg-toolbar[b-9odj4hhoyb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ftmc-pkg-current[b-9odj4hhoyb] {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .ftmc-pkg-current strong[b-9odj4hhoyb] {
        color: var(--d-ink);
        font-weight: 600;
    }

    .ftmc-pkg-current .iata[b-9odj4hhoyb] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        background: var(--d-surface-2);
        color: var(--d-ink-2);
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid var(--d-line);
    }

.ftmc-pkg-grid[b-9odj4hhoyb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
    max-height: 340px;
    overflow: auto;
}

@media (min-width: 768px) {
    .ftmc-pkg-grid[b-9odj4hhoyb] {
        grid-template-columns: 1fr 1fr;
    }
}

.ftmc-pkg-item[b-9odj4hhoyb] {
    text-align: left;
    padding: 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-family: inherit;
}

    .ftmc-pkg-item:hover[b-9odj4hhoyb] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .ftmc-pkg-item .top[b-9odj4hhoyb] {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .ftmc-pkg-item .name[b-9odj4hhoyb] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ftmc-pkg-item .meta[b-9odj4hhoyb] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 2px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

    .ftmc-pkg-item .price[b-9odj4hhoyb] {
        margin-top: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--d-accent);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

    .ftmc-pkg-item .tier[b-9odj4hhoyb] {
        flex-shrink: 0;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        background: color-mix(in srgb, #8b5cf6 12%, var(--d-surface));
        color: #6d28d9;
        border: 1px solid color-mix(in srgb, #8b5cf6 24%, var(--d-line));
    }

.ftmc-link[b-9odj4hhoyb] {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 10px;
    font-size: 12px;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

    .ftmc-link:hover[b-9odj4hhoyb] {
        color: var(--d-accent);
    }

/* ─── Selectable card list (addons / meeting points) ─── */
.ftmc-opt-list[b-9odj4hhoyb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 640px) {
    .ftmc-opt-list.cols-2[b-9odj4hhoyb] {
        grid-template-columns: 1fr 1fr;
    }
}

.ftmc-opt[b-9odj4hhoyb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .ftmc-opt:hover[b-9odj4hhoyb] {
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
        background: var(--d-surface-2);
    }

    .ftmc-opt.selected[b-9odj4hhoyb] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .ftmc-opt input[b-9odj4hhoyb] {
        margin-top: 2px;
        flex-shrink: 0;
        accent-color: var(--d-accent);
    }

    .ftmc-opt .body[b-9odj4hhoyb] {
        flex: 1;
        min-width: 0;
    }

    .ftmc-opt .name[b-9odj4hhoyb] {
        font-size: 14px;
        font-weight: 500;
        color: var(--d-ink);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ftmc-opt .sub[b-9odj4hhoyb] {
        font-size: 11.5px;
        color: var(--d-ink-3);
        margin-top: 4px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

    .ftmc-opt .ico[b-9odj4hhoyb] {
        width: 14px;
        height: 14px;
        color: var(--d-accent);
        flex-shrink: 0;
    }

.ftmc-default-mp[b-9odj4hhoyb] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: var(--d-good-soft);
    color: var(--d-good);
    border: 1px solid color-mix(in srgb, var(--d-good) 24%, var(--d-line));
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ftmc-empty-line[b-9odj4hhoyb] {
    font-size: 12px;
    color: var(--d-ink-4);
    font-style: italic;
}

/* ─── Passenger row ─── */
.ftmc-pax[b-9odj4hhoyb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    align-items: center;
}

@media (min-width: 768px) {
    .ftmc-pax[b-9odj4hhoyb] {
        grid-template-columns: 5fr 2fr 4fr 1fr;
    }
}

.ftmc-pax .ftmc-input[b-9odj4hhoyb] {
    background: var(--d-surface);
}

/* ─── Currency segmented switcher ─── */
.ftmc-seg[b-9odj4hhoyb] {
    display: flex;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    font-size: 14px;
}

.ftmc-seg button[b-9odj4hhoyb] {
    flex: 1;
    background: var(--d-surface);
    color: var(--d-ink-2);
    border: 0;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    transition: background .12s, color .12s;
    font-family: inherit;
}

    .ftmc-seg button:hover:not(:disabled)[b-9odj4hhoyb] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ftmc-seg button.active[b-9odj4hhoyb] {
        background: var(--d-accent-grad);
        color: #fff;
    }

    .ftmc-seg button:disabled[b-9odj4hhoyb] {
        opacity: .4;
        cursor: not-allowed;
    }

.ftmc-help[b-9odj4hhoyb] {
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--d-warn);
}

/* ─── Quote panel ─── */
.ftmc-quote[b-9odj4hhoyb] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    margin-top: 4px;
}

.ftmc-quote-hd[b-9odj4hhoyb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .ftmc-quote-hd button[b-9odj4hhoyb] {
        background: none;
        border: 0;
        color: var(--d-ink-3);
        cursor: pointer;
        font-size: 10.5px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: inherit;
    }

        .ftmc-quote-hd button:hover[b-9odj4hhoyb] {
            color: var(--d-accent);
        }

.ftmc-quote-row[b-9odj4hhoyb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12px;
    color: var(--d-ink-2);
}

    .ftmc-quote-row .v[b-9odj4hhoyb] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
        color: var(--d-ink);
    }

    .ftmc-quote-row.surcharge[b-9odj4hhoyb] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        font-weight: 500;
    }

        .ftmc-quote-row.surcharge .v[b-9odj4hhoyb] {
            color: var(--d-warn);
            font-weight: 600;
        }

.ftmc-quote-total[b-9odj4hhoyb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

    .ftmc-quote-total .v[b-9odj4hhoyb] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
        color: #fff;
    }

.ftmc-quote-foot[b-9odj4hhoyb] {
    padding: 8px 12px;
    background: var(--d-warn-soft);
    color: var(--d-warn);
    border-top: 1px solid color-mix(in srgb, var(--d-warn) 22%, var(--d-line));
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ftmc-quote-empty[b-9odj4hhoyb] {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--d-ink-4);
}

/* ─── Override details ─── */
.ftmc-override summary[b-9odj4hhoyb] {
    list-style: none;
    cursor: pointer;
    color: var(--d-ink-3);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

    .ftmc-override summary[b-9odj4hhoyb]::-webkit-details-marker { display: none; }

    .ftmc-override summary .arrow[b-9odj4hhoyb] {
        transition: transform .12s;
    }

.ftmc-override[open] summary .arrow[b-9odj4hhoyb] {
    transform: rotate(90deg);
}

.ftmc-override summary:hover[b-9odj4hhoyb] {
    color: var(--d-accent);
}

.ftmc-override .body[b-9odj4hhoyb] {
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ─── Success card ─── */
.ftmc-success[b-9odj4hhoyb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 18px 20px;
}

    .ftmc-success-hd[b-9odj4hhoyb] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ftmc-success .ico[b-9odj4hhoyb] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--d-good-soft);
        color: var(--d-good);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ftmc-success h3[b-9odj4hhoyb] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--d-ink);
        letter-spacing: -0.02em;
    }

    .ftmc-success .meta[b-9odj4hhoyb] {
        margin-top: 4px;
        font-size: 12px;
        color: var(--d-ink-3);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

        .ftmc-success .meta .code[b-9odj4hhoyb] {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            color: var(--d-ink-2);
        }

    .ftmc-success-actions[b-9odj4hhoyb] {
        display: flex;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--d-line);
    }

.ftmc-spin[b-9odj4hhoyb] {
    width: 14px;
    height: 14px;
    animation: ftmc-spin-b-9odj4hhoyb 1s linear infinite;
}

@keyframes ftmc-spin-b-9odj4hhoyb {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}
/* /src/Features/FastTrack/Pages/Manager/Operations/DailyRun.razor.rz.scp.css */
/* CostRates — Manager Dashboard v4 theme */
.ftdr-root[b-7rc9wk9sxd] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftdr-shell[b-7rc9wk9sxd] { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.ftdr-hero[b-7rc9wk9sxd] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.ftdr-hero h1[b-7rc9wk9sxd] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.ftdr-hero h1 em[b-7rc9wk9sxd] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.ftdr-hero-meta[b-7rc9wk9sxd] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.ftdr-hero-meta .dot[b-7rc9wk9sxd] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.ftdr-hero-actions[b-7rc9wk9sxd] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.ftdr-btn[b-7rc9wk9sxd] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.ftdr-btn:hover[b-7rc9wk9sxd] { background: var(--d-surface-2); }
.ftdr-btn-accent[b-7rc9wk9sxd] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.ftdr-btn-accent:hover[b-7rc9wk9sxd] { background: var(--d-accent-grad-hover); color: #fff; }
.ftdr-btn-accent:disabled[b-7rc9wk9sxd], .ftdr-btn-accent[disabled][b-7rc9wk9sxd] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }
.ftdr-btn-sm[b-7rc9wk9sxd] { height: 32px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.ftdr-btn-danger[b-7rc9wk9sxd] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ftdr-btn-danger:hover[b-7rc9wk9sxd] { background: #fee2e2; }
.ftdr-btn-solid-danger[b-7rc9wk9sxd] { background: var(--d-danger); color: #fff; border-color: transparent; }
.ftdr-btn-solid-danger:hover[b-7rc9wk9sxd] { background: #b91c1c; color: #fff; }

/* Cards */
.ftdr-card[b-7rc9wk9sxd] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.ftdr-card-flex[b-7rc9wk9sxd] { display: flex; flex-direction: column; }

/* Filter bar */
.ftdr-filter[b-7rc9wk9sxd] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.ftdr-filter .lbl[b-7rc9wk9sxd] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftdr-input[b-7rc9wk9sxd], .ftdr-select[b-7rc9wk9sxd] { height: 34px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.ftdr-input:focus[b-7rc9wk9sxd], .ftdr-select:focus[b-7rc9wk9sxd] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.ftdr-input.num[b-7rc9wk9sxd] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.ftdr-count[b-7rc9wk9sxd] { color: var(--d-ink-3); font-size: 11.5px; margin-left: auto; }
.ftdr-count b[b-7rc9wk9sxd] { color: var(--d-ink); font-weight: 600; }

/* Alert */
.ftdr-alert[b-7rc9wk9sxd] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
.ftdr-alert button[b-7rc9wk9sxd] { margin-left: auto; background: transparent; border: 0; color: #b91c1c; cursor: pointer; }

/* Table */
.ftdr-tbl-wrap[b-7rc9wk9sxd] { max-height: calc(100vh - 240px); display: flex; flex-direction: column; }
.ftdr-tbl-scroll[b-7rc9wk9sxd] { overflow: auto; flex: 1; }
.ftdr-tbl[b-7rc9wk9sxd] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftdr-tbl thead th[b-7rc9wk9sxd] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ftdr-tbl thead th.right[b-7rc9wk9sxd] { text-align: right; }
.ftdr-tbl thead th.center[b-7rc9wk9sxd] { text-align: center; }
.ftdr-tbl tbody td[b-7rc9wk9sxd] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.ftdr-tbl tbody tr:last-child td[b-7rc9wk9sxd] { border-bottom: 0; }
.ftdr-tbl tbody tr:hover[b-7rc9wk9sxd] { background: var(--d-surface-2); }
.ftdr-tbl td.right[b-7rc9wk9sxd] { text-align: right; }
.ftdr-tbl td.center[b-7rc9wk9sxd] { text-align: center; }
.ftdr-tbl .num[b-7rc9wk9sxd] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink); }
.ftdr-tbl .code[b-7rc9wk9sxd] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-3); }

/* Pills / Tags */
.ftdr-tag[b-7rc9wk9sxd] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); white-space: nowrap; }
.ftdr-tag.good[b-7rc9wk9sxd] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.ftdr-tag.danger[b-7rc9wk9sxd] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.ftdr-tag.muted[b-7rc9wk9sxd] { background: var(--d-surface-2); color: var(--d-ink-3); }
.ftdr-tag.info[b-7rc9wk9sxd] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.ftdr-tag .d[b-7rc9wk9sxd] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.ftdr-tag .d.dot-good[b-7rc9wk9sxd] { background: var(--d-good); }
.ftdr-tag .d.dot-mute[b-7rc9wk9sxd] { background: var(--d-ink-4); }

/* Skeleton */
.ftdr-sk[b-7rc9wk9sxd] { display: inline-block; height: 12px; background: linear-gradient(90deg, var(--d-surface-2) 0%, var(--d-line-2) 50%, var(--d-surface-2) 100%); background-size: 200% 100%; animation: ftdr-sh-b-7rc9wk9sxd 1.2s linear infinite; border-radius: 4px; }
@keyframes ftdr-sh-b-7rc9wk9sxd { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty */
.ftdr-empty[b-7rc9wk9sxd] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 16px; color: var(--d-ink-3); text-align: center; }
.ftdr-empty .ico[b-7rc9wk9sxd] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: grid; place-items: center; }
.ftdr-empty b[b-7rc9wk9sxd] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.ftdr-empty small[b-7rc9wk9sxd] { font-size: 12px; }

/* Row actions */
.ftdr-row-actions[b-7rc9wk9sxd] { display: flex; justify-content: flex-end; gap: 4px; }
.ftdr-icon-btn[b-7rc9wk9sxd] { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 0; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ftdr-icon-btn:hover[b-7rc9wk9sxd] { background: var(--d-surface-2); color: var(--d-ink); }
.ftdr-icon-btn.danger:hover[b-7rc9wk9sxd] { background: #fee2e2; color: #b91c1c; }

/* Pager */
.ftdr-pager[b-7rc9wk9sxd] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d-line); background: var(--d-surface); font-size: 11.5px; color: var(--d-ink-3); }
.ftdr-pager b[b-7rc9wk9sxd] { color: var(--d-ink); font-weight: 600; }
.ftdr-pager-right[b-7rc9wk9sxd] { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ftdr-pager .ftdr-select[b-7rc9wk9sxd] { height: 28px; padding: 0 8px; font-size: 11.5px; }
.ftdr-pager-btn[b-7rc9wk9sxd] { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); font-size: 11.5px; cursor: pointer; }
.ftdr-pager-btn:hover:not(:disabled)[b-7rc9wk9sxd] { background: var(--d-surface-2); }
.ftdr-pager-btn:disabled[b-7rc9wk9sxd] { opacity: .4; cursor: not-allowed; }

/* Modal */
.ftdr-modal-bg[b-7rc9wk9sxd] { position: fixed; inset: 0; background: rgba(28,25,23,0.45); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ftdr-modal[b-7rc9wk9sxd] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 700px; display: flex; flex-direction: column; max-height: 92vh; }
.ftdr-modal-hd[b-7rc9wk9sxd] { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--d-line); }
.ftdr-modal-hd h2[b-7rc9wk9sxd] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.ftdr-modal-hd p[b-7rc9wk9sxd] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.ftdr-modal-body[b-7rc9wk9sxd] { padding: 18px 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.ftdr-modal-ft[b-7rc9wk9sxd] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 12px 12px; font-size: 11.5px; color: var(--d-ink-3); }
.ftdr-modal-ft .actions[b-7rc9wk9sxd] { display: flex; gap: 8px; margin-left: auto; }
.ftdr-section h3[b-7rc9wk9sxd] { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftdr-grid[b-7rc9wk9sxd] { display: grid; gap: 12px; }
.ftdr-grid-2[b-7rc9wk9sxd] { grid-template-columns: 1fr 1fr; }
.ftdr-grid-3[b-7rc9wk9sxd] { grid-template-columns: 1fr 2fr; }
.ftdr-field[b-7rc9wk9sxd] { display: flex; flex-direction: column; gap: 6px; }
.ftdr-field label[b-7rc9wk9sxd] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.ftdr-field .req[b-7rc9wk9sxd] { color: var(--d-danger); }
.ftdr-field .hint[b-7rc9wk9sxd] { font-size: 11px; color: var(--d-ink-3); }
.ftdr-field .err[b-7rc9wk9sxd] { font-size: 11px; color: var(--d-danger); }
.ftdr-field .ftdr-input[b-7rc9wk9sxd], .ftdr-field .ftdr-select[b-7rc9wk9sxd] { height: 38px; }
.ftdr-radios[b-7rc9wk9sxd] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftdr-radio[b-7rc9wk9sxd] { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.ftdr-radio:hover[b-7rc9wk9sxd] { background: var(--d-surface-2); }
.ftdr-radio.active[b-7rc9wk9sxd] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftdr-radio .top[b-7rc9wk9sxd] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftdr-radio .sub[b-7rc9wk9sxd] { font-size: 11.5px; color: var(--d-ink-3); }
.ftdr-checkbox[b-7rc9wk9sxd] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; }
.ftdr-checkbox.active[b-7rc9wk9sxd] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftdr-checkbox input[b-7rc9wk9sxd] { margin-top: 3px; accent-color: var(--d-accent); }
.ftdr-checkbox .title[b-7rc9wk9sxd] { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.ftdr-checkbox .desc[b-7rc9wk9sxd] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.ftdr-rate-wrap[b-7rc9wk9sxd] { position: relative; }
.ftdr-rate-wrap .suf[b-7rc9wk9sxd] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); font-size: 12px; }

/* Confirm dialog */
.ftdr-confirm[b-7rc9wk9sxd] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 380px; padding: 18px; }
.ftdr-confirm .head[b-7rc9wk9sxd] { display: flex; gap: 10px; }
.ftdr-confirm .ico[b-7rc9wk9sxd] { width: 36px; height: 36px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; flex-shrink: 0; }
.ftdr-confirm h3[b-7rc9wk9sxd] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftdr-confirm p[b-7rc9wk9sxd] { margin: 4px 0 0; font-size: 12px; color: var(--d-ink-3); }
.ftdr-confirm .ft[b-7rc9wk9sxd] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 768px) {
    .ftdr-grid-2[b-7rc9wk9sxd], .ftdr-grid-3[b-7rc9wk9sxd], .ftdr-radios[b-7rc9wk9sxd] { grid-template-columns: 1fr; }
    .ftdr-hero[b-7rc9wk9sxd] { grid-template-columns: 1fr; }
}

/* DailyRun-specific */
.ftdr-segctl[b-7rc9wk9sxd] { display: inline-flex; padding: 2px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: 8px; }
.ftdr-segctl button[b-7rc9wk9sxd] { padding: 5px 11px; border-radius: 6px; border: 0; background: transparent; color: var(--d-ink-3); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.ftdr-segctl button:hover:not(.on)[b-7rc9wk9sxd] { color: var(--d-ink); }
.ftdr-segctl button.on[b-7rc9wk9sxd] { background: var(--d-accent-grad); color: #fff; box-shadow: 0 1px 2px rgba(234,88,12,0.2); }
.ftdr-stat-pill[b-7rc9wk9sxd] { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--d-line); background: var(--d-surface); font-size: 11px; }
.ftdr-stat-pill.sgn[b-7rc9wk9sxd] { background: #f0f9ff; color: #075985; border-color: #bae6fd; }
.ftdr-stat-pill.han[b-7rc9wk9sxd] { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ftdr-stat-pill.pax[b-7rc9wk9sxd] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.ftdr-stat-pill .num[b-7rc9wk9sxd] { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; }
.ftdr-hub-hd[b-7rc9wk9sxd] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--d-surface-2); border-bottom: 1px solid var(--d-line); }
.ftdr-hub-hd .bar[b-7rc9wk9sxd] { width: 3px; height: 16px; border-radius: 2px; }
.ftdr-hub-hd .bar.sgn[b-7rc9wk9sxd] { background: #38bdf8; }
.ftdr-hub-hd .bar.han[b-7rc9wk9sxd] { background: #a78bfa; }
.ftdr-hub-hd .bar.def[b-7rc9wk9sxd] { background: var(--d-accent-grad); }
.ftdr-hub-hd .ttl[b-7rc9wk9sxd] { font-size: 12.5px; font-weight: 700; color: var(--d-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.ftdr-hub-hd .meta[b-7rc9wk9sxd] { font-size: 11px; color: var(--d-ink-3); }
.ftdr-hub-hd .meta b[b-7rc9wk9sxd] { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--d-ink); font-weight: 600; }
.ftdr-warn[b-7rc9wk9sxd] { padding: 14px; background: var(--d-warn-soft); border: 1px solid #fde68a; border-radius: 10px; color: #92400e; }
.ftdr-warn h3[b-7rc9wk9sxd] { margin: 0 0 4px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ftdr-warn p[b-7rc9wk9sxd] { margin: 0; font-size: 12px; }
.ftdr-color-dot[b-7rc9wk9sxd] { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.ftdr-color-dot.white[b-7rc9wk9sxd] { background: #fff; border: 1px solid var(--d-ink-4); }
.ftdr-color-dot.yellow[b-7rc9wk9sxd] { background: #facc15; }
.ftdr-color-dot.pink[b-7rc9wk9sxd] { background: #f472b6; }
.ftdr-staff-tag[b-7rc9wk9sxd] { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; font-size: 10.5px; font-weight: 600; }
.ftdr-staff-tag .d[b-7rc9wk9sxd] { width: 4px; height: 4px; border-radius: 50%; background: #38bdf8; }
.ftdr-thumb[b-7rc9wk9sxd] { display: inline-block; width: 30px; height: 30px; border-radius: 6px; overflow: hidden; border: 2px solid var(--d-line); }
.ftdr-thumb.pink[b-7rc9wk9sxd] { border-color: #f472b6; }
.ftdr-thumb.yellow[b-7rc9wk9sxd] { border-color: #facc15; }
.ftdr-thumb img[b-7rc9wk9sxd] { width: 100%; height: 100%; object-fit: cover; }
.ftdr-loading[b-7rc9wk9sxd] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; color: var(--d-ink-3); }
.ftdr-loading svg[b-7rc9wk9sxd] { animation: ftdr-spin-b-7rc9wk9sxd 1s linear infinite; color: var(--d-accent); }
@keyframes ftdr-spin-b-7rc9wk9sxd { to { transform: rotate(360deg); } }
.ftdr-detail-link[b-7rc9wk9sxd] { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--d-ink-3); border-radius: 6px; text-decoration: none; transition: all .12s; }
.ftdr-detail-link:hover[b-7rc9wk9sxd] { background: var(--d-accent-soft); color: var(--d-accent); text-decoration: none; }
/* /src/Features/FastTrack/Pages/Manager/Reports/MonthlyDebt.razor.rz.scp.css */
/* CostRates — Manager Dashboard v4 theme */
.ftdebt-root[b-vax32bkxnw] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.ftdebt-shell[b-vax32bkxnw] { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.ftdebt-hero[b-vax32bkxnw] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.ftdebt-hero h1[b-vax32bkxnw] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.ftdebt-hero h1 em[b-vax32bkxnw] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.ftdebt-hero-meta[b-vax32bkxnw] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
.ftdebt-hero-meta .dot[b-vax32bkxnw] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.ftdebt-hero-actions[b-vax32bkxnw] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.ftdebt-btn[b-vax32bkxnw] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.ftdebt-btn:hover[b-vax32bkxnw] { background: var(--d-surface-2); }
.ftdebt-btn-accent[b-vax32bkxnw] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.ftdebt-btn-accent:hover[b-vax32bkxnw] { background: var(--d-accent-grad-hover); color: #fff; }
.ftdebt-btn-accent:disabled[b-vax32bkxnw], .ftdebt-btn-accent[disabled][b-vax32bkxnw] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }
.ftdebt-btn-sm[b-vax32bkxnw] { height: 32px; padding: 0 11px; font-size: 12px; border-radius: 8px; }
.ftdebt-btn-danger[b-vax32bkxnw] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ftdebt-btn-danger:hover[b-vax32bkxnw] { background: #fee2e2; }
.ftdebt-btn-solid-danger[b-vax32bkxnw] { background: var(--d-danger); color: #fff; border-color: transparent; }
.ftdebt-btn-solid-danger:hover[b-vax32bkxnw] { background: #b91c1c; color: #fff; }

/* Cards */
.ftdebt-card[b-vax32bkxnw] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.ftdebt-card-flex[b-vax32bkxnw] { display: flex; flex-direction: column; }

/* Filter bar */
.ftdebt-filter[b-vax32bkxnw] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.ftdebt-filter .lbl[b-vax32bkxnw] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftdebt-input[b-vax32bkxnw], .ftdebt-select[b-vax32bkxnw] { height: 34px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); color: var(--d-ink); font-size: 12.5px; outline: none; transition: border-color .12s, box-shadow .12s; }
.ftdebt-input:focus[b-vax32bkxnw], .ftdebt-select:focus[b-vax32bkxnw] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.ftdebt-input.num[b-vax32bkxnw] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }
.ftdebt-count[b-vax32bkxnw] { color: var(--d-ink-3); font-size: 11.5px; margin-left: auto; }
.ftdebt-count b[b-vax32bkxnw] { color: var(--d-ink); font-weight: 600; }

/* Alert */
.ftdebt-alert[b-vax32bkxnw] { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; }
.ftdebt-alert button[b-vax32bkxnw] { margin-left: auto; background: transparent; border: 0; color: #b91c1c; cursor: pointer; }

/* Table */
.ftdebt-tbl-wrap[b-vax32bkxnw] { max-height: calc(100vh - 240px); display: flex; flex-direction: column; }
.ftdebt-tbl-scroll[b-vax32bkxnw] { overflow: auto; flex: 1; }
.ftdebt-tbl[b-vax32bkxnw] { width: 100%; border-collapse: collapse; font-size: 14px; }
.ftdebt-tbl thead th[b-vax32bkxnw] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.ftdebt-tbl thead th.right[b-vax32bkxnw] { text-align: right; }
.ftdebt-tbl thead th.center[b-vax32bkxnw] { text-align: center; }
.ftdebt-tbl tbody td[b-vax32bkxnw] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.ftdebt-tbl tbody tr:last-child td[b-vax32bkxnw] { border-bottom: 0; }
.ftdebt-tbl tbody tr:hover[b-vax32bkxnw] { background: var(--d-surface-2); }
.ftdebt-tbl td.right[b-vax32bkxnw] { text-align: right; }
.ftdebt-tbl td.center[b-vax32bkxnw] { text-align: center; }
.ftdebt-tbl .num[b-vax32bkxnw] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink); }
.ftdebt-tbl .code[b-vax32bkxnw] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-3); }

/* Pills / Tags */
.ftdebt-tag[b-vax32bkxnw] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); white-space: nowrap; }
.ftdebt-tag.good[b-vax32bkxnw] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
.ftdebt-tag.danger[b-vax32bkxnw] { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.ftdebt-tag.muted[b-vax32bkxnw] { background: var(--d-surface-2); color: var(--d-ink-3); }
.ftdebt-tag.info[b-vax32bkxnw] { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.ftdebt-tag .d[b-vax32bkxnw] { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.ftdebt-tag .d.dot-good[b-vax32bkxnw] { background: var(--d-good); }
.ftdebt-tag .d.dot-mute[b-vax32bkxnw] { background: var(--d-ink-4); }

/* Skeleton */
.ftdebt-sk[b-vax32bkxnw] { display: inline-block; height: 12px; background: linear-gradient(90deg, var(--d-surface-2) 0%, var(--d-line-2) 50%, var(--d-surface-2) 100%); background-size: 200% 100%; animation: ftdebt-sh-b-vax32bkxnw 1.2s linear infinite; border-radius: 4px; }
@keyframes ftdebt-sh-b-vax32bkxnw { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }

/* Empty */
.ftdebt-empty[b-vax32bkxnw] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 56px 16px; color: var(--d-ink-3); text-align: center; }
.ftdebt-empty .ico[b-vax32bkxnw] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-grad-soft); border: 1px solid #fed7aa; color: var(--d-accent); display: grid; place-items: center; }
.ftdebt-empty b[b-vax32bkxnw] { color: var(--d-ink); font-weight: 600; font-size: 14px; }
.ftdebt-empty small[b-vax32bkxnw] { font-size: 12px; }

/* Row actions */
.ftdebt-row-actions[b-vax32bkxnw] { display: flex; justify-content: flex-end; gap: 4px; }
.ftdebt-icon-btn[b-vax32bkxnw] { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 0; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.ftdebt-icon-btn:hover[b-vax32bkxnw] { background: var(--d-surface-2); color: var(--d-ink); }
.ftdebt-icon-btn.danger:hover[b-vax32bkxnw] { background: #fee2e2; color: #b91c1c; }

/* Pager */
.ftdebt-pager[b-vax32bkxnw] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--d-line); background: var(--d-surface); font-size: 11.5px; color: var(--d-ink-3); }
.ftdebt-pager b[b-vax32bkxnw] { color: var(--d-ink); font-weight: 600; }
.ftdebt-pager-right[b-vax32bkxnw] { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ftdebt-pager .ftdebt-select[b-vax32bkxnw] { height: 28px; padding: 0 8px; font-size: 11.5px; }
.ftdebt-pager-btn[b-vax32bkxnw] { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); font-size: 11.5px; cursor: pointer; }
.ftdebt-pager-btn:hover:not(:disabled)[b-vax32bkxnw] { background: var(--d-surface-2); }
.ftdebt-pager-btn:disabled[b-vax32bkxnw] { opacity: .4; cursor: not-allowed; }

/* Modal */
.ftdebt-modal-bg[b-vax32bkxnw] { position: fixed; inset: 0; background: rgba(28,25,23,0.45); backdrop-filter: blur(2px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ftdebt-modal[b-vax32bkxnw] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 700px; display: flex; flex-direction: column; max-height: 92vh; }
.ftdebt-modal-hd[b-vax32bkxnw] { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--d-line); }
.ftdebt-modal-hd h2[b-vax32bkxnw] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.ftdebt-modal-hd p[b-vax32bkxnw] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.ftdebt-modal-body[b-vax32bkxnw] { padding: 18px 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.ftdebt-modal-ft[b-vax32bkxnw] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 12px 12px; font-size: 11.5px; color: var(--d-ink-3); }
.ftdebt-modal-ft .actions[b-vax32bkxnw] { display: flex; gap: 8px; margin-left: auto; }
.ftdebt-section h3[b-vax32bkxnw] { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ftdebt-grid[b-vax32bkxnw] { display: grid; gap: 12px; }
.ftdebt-grid-2[b-vax32bkxnw] { grid-template-columns: 1fr 1fr; }
.ftdebt-grid-3[b-vax32bkxnw] { grid-template-columns: 1fr 2fr; }
.ftdebt-field[b-vax32bkxnw] { display: flex; flex-direction: column; gap: 6px; }
.ftdebt-field label[b-vax32bkxnw] { font-size: 11.5px; font-weight: 600; color: var(--d-ink-2); }
.ftdebt-field .req[b-vax32bkxnw] { color: var(--d-danger); }
.ftdebt-field .hint[b-vax32bkxnw] { font-size: 11px; color: var(--d-ink-3); }
.ftdebt-field .err[b-vax32bkxnw] { font-size: 11px; color: var(--d-danger); }
.ftdebt-field .ftdebt-input[b-vax32bkxnw], .ftdebt-field .ftdebt-select[b-vax32bkxnw] { height: 38px; }
.ftdebt-radios[b-vax32bkxnw] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ftdebt-radio[b-vax32bkxnw] { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.ftdebt-radio:hover[b-vax32bkxnw] { background: var(--d-surface-2); }
.ftdebt-radio.active[b-vax32bkxnw] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftdebt-radio .top[b-vax32bkxnw] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftdebt-radio .sub[b-vax32bkxnw] { font-size: 11.5px; color: var(--d-ink-3); }
.ftdebt-checkbox[b-vax32bkxnw] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: 10px; cursor: pointer; }
.ftdebt-checkbox.active[b-vax32bkxnw] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.ftdebt-checkbox input[b-vax32bkxnw] { margin-top: 3px; accent-color: var(--d-accent); }
.ftdebt-checkbox .title[b-vax32bkxnw] { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }
.ftdebt-checkbox .desc[b-vax32bkxnw] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.ftdebt-rate-wrap[b-vax32bkxnw] { position: relative; }
.ftdebt-rate-wrap .suf[b-vax32bkxnw] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--d-ink-3); font-size: 12px; }

/* Confirm dialog */
.ftdebt-confirm[b-vax32bkxnw] { background: var(--d-surface); border-radius: 12px; border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 380px; padding: 18px; }
.ftdebt-confirm .head[b-vax32bkxnw] { display: flex; gap: 10px; }
.ftdebt-confirm .ico[b-vax32bkxnw] { width: 36px; height: 36px; border-radius: 50%; background: #fee2e2; color: #b91c1c; display: grid; place-items: center; flex-shrink: 0; }
.ftdebt-confirm h3[b-vax32bkxnw] { margin: 0; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftdebt-confirm p[b-vax32bkxnw] { margin: 4px 0 0; font-size: 12px; color: var(--d-ink-3); }
.ftdebt-confirm .ft[b-vax32bkxnw] { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

@media (max-width: 768px) {
    .ftdebt-grid-2[b-vax32bkxnw], .ftdebt-grid-3[b-vax32bkxnw], .ftdebt-radios[b-vax32bkxnw] { grid-template-columns: 1fr; }
    .ftdebt-hero[b-vax32bkxnw] { grid-template-columns: 1fr; }
}

/* MonthlyDebt-specific KPI strip */
.ftdebt-kpis[b-vax32bkxnw] { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.ftdebt-kpi[b-vax32bkxnw] { padding: 12px 14px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ftdebt-kpi:last-child[b-vax32bkxnw] { border-right: 0; }
.ftdebt-kpi .lbl[b-vax32bkxnw] { font-size: 10px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; }
.ftdebt-kpi .lbl .bar[b-vax32bkxnw] { width: 3px; height: 11px; border-radius: 2px; background: var(--d-ink-4); }
.ftdebt-kpi .lbl.sky .bar[b-vax32bkxnw] { background: #38bdf8; }
.ftdebt-kpi .lbl.good .bar[b-vax32bkxnw] { background: var(--d-good); }
.ftdebt-kpi .lbl.danger .bar[b-vax32bkxnw] { background: var(--d-danger); }
.ftdebt-kpi .lbl.accent .bar[b-vax32bkxnw] { background: var(--d-accent-grad); }
.ftdebt-kpi .lbl.good[b-vax32bkxnw] { color: var(--d-good); }
.ftdebt-kpi .lbl.danger[b-vax32bkxnw] { color: var(--d-danger); }
.ftdebt-kpi .lbl.accent[b-vax32bkxnw] { color: var(--d-accent); }
.ftdebt-kpi .val[b-vax32bkxnw] { font-family: 'Inter Tight','Inter',sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.ftdebt-kpi .val.sm[b-vax32bkxnw] { font-family: 'JetBrains Mono', monospace; font-size: 15px; }
.ftdebt-kpi .val .unit[b-vax32bkxnw] { font-size: 10px; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--d-ink-3); margin-left: 3px; }
.ftdebt-kpi .val.good[b-vax32bkxnw] { color: var(--d-good); }
.ftdebt-kpi .val.danger[b-vax32bkxnw] { color: var(--d-danger); }
.ftdebt-kpi .val.accent[b-vax32bkxnw] { color: var(--d-accent); }
.ftdebt-kpi .extra[b-vax32bkxnw] { font-size: 10px; color: var(--d-ink-4); }
@media (max-width: 1024px) { .ftdebt-kpis[b-vax32bkxnw] { grid-template-columns: repeat(3, 1fr); } .ftdebt-kpi:nth-child(3n)[b-vax32bkxnw] { border-right: 0; } }
@media (max-width: 640px) { .ftdebt-kpis[b-vax32bkxnw] { grid-template-columns: repeat(2, 1fr); } .ftdebt-kpi[b-vax32bkxnw] { border-right: 1px solid var(--d-line) !important; } .ftdebt-kpi:nth-child(2n)[b-vax32bkxnw] { border-right: 0 !important; } }

.ftdebt-air-tag[b-vax32bkxnw] { display: inline-flex; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; border: 1px solid var(--d-line); background: var(--d-surface); color: var(--d-ink-2); }
.ftdebt-air-tag.sgn[b-vax32bkxnw] { background: #f0f9ff; color: #075985; border-color: #bae6fd; }
.ftdebt-air-tag.han[b-vax32bkxnw] { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ftdebt-air-tag.dad[b-vax32bkxnw] { background: var(--d-good-soft); color: #166534; border-color: #bbf7d0; }
/* /src/Features/FastTrack/Pages/Manager/Reports/MonthlyExpenses.razor.rz.scp.css */
/* MonthlyExpenses — Manager Dashboard v4 theme. Prefix: ftexpense- */
.ftexpense-root[b-6fld1t6jn1] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
}
.ftexpense-num[b-6fld1t6jn1] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.ftexpense-btn-accent[b-6fld1t6jn1] {
    background: var(--d-accent-grad); color: #fff; border: 0;
    padding: 0 14px; height: 32px; border-radius: var(--d-r);
    font-size: 12px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
    transition: background .12s;
}
.ftexpense-btn-accent:hover[b-6fld1t6jn1] { background: var(--d-accent-grad-hover); color: #fff; }
.ftexpense-btn-accent:disabled[b-6fld1t6jn1] { opacity: 0.55; cursor: not-allowed; }

.ftexpense-btn-dark[b-6fld1t6jn1] {
    background: var(--d-ink); color: #fff; border: 0;
    padding: 0 12px; height: 32px; border-radius: var(--d-r);
    font-size: 12px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s;
}
.ftexpense-btn-dark:hover[b-6fld1t6jn1] { background: var(--d-ink-2); color: #fff; }
.ftexpense-btn-dark:disabled[b-6fld1t6jn1] { opacity: 0.55; cursor: not-allowed; }

.ftexpense-card[b-6fld1t6jn1] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); overflow: hidden;
}
.ftexpense-card-hd[b-6fld1t6jn1] {
    padding: 10px 14px; background: var(--d-surface);
    border-bottom: 1px solid var(--d-line-2);
    font-size: 10.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    display: flex; align-items: center; justify-content: space-between;
}

.ftexpense-stat[b-6fld1t6jn1] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); padding: 12px 14px;
}
.ftexpense-stat-lbl[b-6fld1t6jn1] {
    font-size: 10px; color: var(--d-ink-3); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 6px;
}
.ftexpense-stat-dot[b-6fld1t6jn1] { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ftexpense-stat-dot.accent[b-6fld1t6jn1] { background: var(--d-accent-grad); }
.ftexpense-stat-dot.info[b-6fld1t6jn1] { background: #0ea5e9; }
.ftexpense-stat-dot.violet[b-6fld1t6jn1] { background: #8b5cf6; }
.ftexpense-stat-dot.good[b-6fld1t6jn1] { background: var(--d-good); }
.ftexpense-stat-val[b-6fld1t6jn1] {
    font-family: 'Inter Tight','Inter',sans-serif;
    font-size: 18px; font-weight: 600; color: var(--d-ink);
    letter-spacing: -0.025em; margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.ftexpense-stat-val.accent[b-6fld1t6jn1] { color: var(--d-accent); }
.ftexpense-stat-unit[b-6fld1t6jn1] { font-size: 10px; color: var(--d-ink-4); font-weight: 500; margin-left: 2px; }

.ftexpense-input[b-6fld1t6jn1], .ftexpense-select[b-6fld1t6jn1] {
    height: 32px; padding: 0 10px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 12px; color: var(--d-ink); transition: border-color .12s, box-shadow .12s;
}
.ftexpense-input:focus[b-6fld1t6jn1], .ftexpense-select:focus[b-6fld1t6jn1] {
    outline: none; border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,0.12);
}

.ftexpense-tbl-link[b-6fld1t6jn1] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-accent); font-weight: 500; text-decoration: none;
}
.ftexpense-tbl-link:hover[b-6fld1t6jn1] { text-decoration: underline; color: var(--d-accent); }

.ftexpense-error[b-6fld1t6jn1] {
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    color: var(--d-danger); border-radius: var(--d-r);
    padding: 8px 12px; font-size: 12.5px;
    display: flex; align-items: flex-start; gap: 8px;
}
/* /src/Features/Flights/Pages/Ca/CaFlightConfirmation.razor.rz.scp.css */
.cafc-root[b-d7xyiavx3h] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: calc(100vh - 64px);
}

/* Header dùng component <FlightHeader> (Features/_Shared/Flight). */

.cafc-card[b-d7xyiavx3h] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}
/* /src/Features/Flights/Pages/Ca/CaFlightPassengers.razor.rz.scp.css */
.cafpax-root[b-uzkyqsrvsb] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: calc(100vh - 64px);
}

/* Header dùng component <FlightHeader> (Features/_Shared/Flight). */

.cafpax-card[b-uzkyqsrvsb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}
/* /src/Features/Flights/Pages/Ca/CaFlightPayment.razor.rz.scp.css */
.cafpay-root[b-id1vkn8lqy] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: calc(100vh - 64px);
}

/* Header dùng component <FlightHeader> (Features/_Shared/Flight). */

.cafpay-card[b-id1vkn8lqy] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}
/* /src/Features/Flights/Pages/Ca/CaFlightResults.razor.rz.scp.css */
.cafr-root[b-vhfpm1kyc4] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: calc(100vh - 64px);
}

/* Header dùng component <FlightHeader> (Features/_Shared/Flight). */

.cafr-card[b-vhfpm1kyc4] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

.cafr-loading[b-vhfpm1kyc4] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.cafr-spinner[b-vhfpm1kyc4] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cafr-spin-b-vhfpm1kyc4 0.8s linear infinite;
}

@keyframes cafr-spin-b-vhfpm1kyc4 {
    to { transform: rotate(360deg); }
}
/* /src/Features/Flights/Pages/Ca/CaFlightsPage.razor.rz.scp.css */
.cafp-root[b-k83m0e4cj7] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

/* Header dùng component <FlightHeader>; wrapper tạo lề trong layout full-height */
.cafp-hero-wrap[b-k83m0e4cj7] {
    flex-shrink: 0;
    padding: 12px 16px 0;
}

@media (min-width: 768px) {
    .cafp-hero-wrap[b-k83m0e4cj7] {
        padding: 16px 28px 0;
    }
}

/* Tabs */
.cafp-tabs[b-k83m0e4cj7] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.cafp-tab[b-k83m0e4cj7] {
    appearance: none;
    border: 0;
    background: transparent;
    height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.cafp-tab:hover[b-k83m0e4cj7] {
    background: var(--d-surface-2);
    color: var(--d-ink);
}

.cafp-tab.is-active[b-k83m0e4cj7] {
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
}

.cafp-tab-count[b-k83m0e4cj7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

.cafp-tab:not(.is-active) .cafp-tab-count[b-k83m0e4cj7] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
}

/* Filter row */
.cafp-filters[b-k83m0e4cj7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .cafp-filters[b-k83m0e4cj7] {
        gap: 12px;
        padding: 12px 28px;
    }
}

.cafp-search[b-k83m0e4cj7] {
    position: relative;
}

.cafp-search svg[b-k83m0e4cj7] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.cafp-search input[b-k83m0e4cj7] {
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    width: 240px;
    transition: border-color .12s, box-shadow .12s;
}

.cafp-search input:focus[b-k83m0e4cj7] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

/* Card primitive */
.cafp-card[b-k83m0e4cj7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.cafp-card-pad[b-k83m0e4cj7] {
    padding: 12px;
}

@media (min-width: 768px) {
    .cafp-card-pad[b-k83m0e4cj7] {
        padding: 16px;
    }
}

/* Body region */
.cafp-body[b-k83m0e4cj7] {
    flex: 1;
    min-height: 0;
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cafp-body[b-k83m0e4cj7] {
        padding: 0 28px 16px;
    }
}

.cafp-body-scroll[b-k83m0e4cj7] {
    flex: 1;
    overflow: auto;
}

.cafp-search-region[b-k83m0e4cj7] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
}

@media (min-width: 768px) {
    .cafp-search-region[b-k83m0e4cj7] {
        padding: 16px 28px 20px;
    }
}

.cafp-search-region > * + *[b-k83m0e4cj7] {
    margin-top: 12px;
}

@media (min-width: 768px) {
    .cafp-search-region > * + *[b-k83m0e4cj7] {
        margin-top: 16px;
    }
}

/* Table */
.cafp-tbl[b-k83m0e4cj7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cafp-tbl thead th[b-k83m0e4cj7] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cafp-tbl thead th.right[b-k83m0e4cj7] { text-align: right; }
.cafp-tbl thead th.center[b-k83m0e4cj7] { text-align: center; }

.cafp-tbl tbody td[b-k83m0e4cj7] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}

.cafp-tbl tbody tr:last-child td[b-k83m0e4cj7] { border-bottom: 0; }
.cafp-tbl tbody tr:hover[b-k83m0e4cj7] { background: var(--d-surface-2); }

.cafp-tbl td.right[b-k83m0e4cj7] { text-align: right; }
.cafp-tbl td.center[b-k83m0e4cj7] { text-align: center; }

.cafp-num[b-k83m0e4cj7] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cafp-mono[b-k83m0e4cj7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
}

.cafp-mono:hover[b-k83m0e4cj7] {
    text-decoration: underline;
    color: var(--d-accent);
}

.cafp-name[b-k83m0e4cj7] {
    font-weight: 500;
    color: var(--d-ink);
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cafp-sub[b-k83m0e4cj7] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* B2B mini badge */
.cafp-b2b[b-k83m0e4cj7] {
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 9.5px;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* Status pill */
.cafp-status[b-k83m0e4cj7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

.cafp-status .d[b-k83m0e4cj7] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.cafp-status.warn[b-k83m0e4cj7] { background: var(--d-warn-soft); color: #92400e; }
.cafp-status.good[b-k83m0e4cj7] { background: var(--d-good-soft); color: #166534; }
.cafp-status.info[b-k83m0e4cj7] { background: #dbeafe; color: #1d4ed8; }
.cafp-status.danger[b-k83m0e4cj7] { background: #fee2e2; color: #b91c1c; }
.cafp-status.muted[b-k83m0e4cj7] { background: var(--d-surface-2); color: var(--d-ink-3); }
.cafp-status.purple[b-k83m0e4cj7] { background: #ede9fe; color: #6d28d9; }
.cafp-status.accent[b-k83m0e4cj7] { background: var(--d-accent-soft); color: var(--d-accent); }

.cafp-icon-btn[b-k83m0e4cj7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    text-decoration: none;
}

.cafp-icon-btn:hover[b-k83m0e4cj7] {
    background: var(--d-surface-2);
    color: var(--d-accent);
    border-color: var(--d-accent);
}

/* Empty + loading */
.cafp-empty[b-k83m0e4cj7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

.cafp-empty b[b-k83m0e4cj7] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}

.cafp-empty small[b-k83m0e4cj7] {
    font-size: 12px;
}

.cafp-empty svg[b-k83m0e4cj7] {
    margin-bottom: 6px;
    color: var(--d-ink-4);
}

.cafp-loading[b-k83m0e4cj7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    flex-direction: column;
    gap: 10px;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.cafp-trip-banner[b-k83m0e4cj7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-left: 3px solid var(--d-accent);
    border-radius: var(--d-r);
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cafp-trip-banner svg[b-k83m0e4cj7] {
    width: 18px;
    height: 18px;
    color: var(--d-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

.cafp-trip-banner b[b-k83m0e4cj7] {
    color: var(--d-ink);
    font-weight: 600;
    font-size: 14px;
}

.cafp-page[b-k83m0e4cj7] {
    padding: 0 16px 14px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .cafp-page[b-k83m0e4cj7] {
        padding: 0 28px 14px;
    }
}

.cafp-arrow[b-k83m0e4cj7] {
    color: var(--d-accent);
    margin: 0 6px;
}

/* ── Bottom panels (recent / services / tips) ── */
.cafp-panels[b-k83m0e4cj7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .cafp-panels[b-k83m0e4cj7] {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }
}

.cafp-panel-stack[b-k83m0e4cj7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cafp-panel[b-k83m0e4cj7] {
    padding: 14px 16px 16px;
}

.cafp-panel-hd[b-k83m0e4cj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cafp-panel-hd b[b-k83m0e4cj7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.005em;
}

.cafp-link-btn[b-k83m0e4cj7] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--d-accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background .12s;
}

.cafp-link-btn:hover[b-k83m0e4cj7] {
    background: var(--d-accent-soft);
}

/* Recent booking cards */
.cafp-recent-list[b-k83m0e4cj7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 640px) {
    .cafp-recent-list[b-k83m0e4cj7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cafp-recent[b-k83m0e4cj7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--d-line);
    border-radius: 10px;
    background: var(--d-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s, transform .12s;
    min-width: 0;
}

.cafp-recent:hover[b-k83m0e4cj7] {
    border-color: var(--d-accent);
    box-shadow: 0 4px 12px -4px rgba(255, 107, 0, 0.18);
    transform: translateY(-1px);
}

.cafp-recent .route[b-k83m0e4cj7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: 0.02em;
}

.cafp-recent .route svg[b-k83m0e4cj7] {
    color: var(--d-accent);
    flex-shrink: 0;
}

.cafp-recent .route .iata.muted[b-k83m0e4cj7] {
    color: var(--d-ink-4);
    font-weight: 500;
}

.cafp-recent .meta[b-k83m0e4cj7] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.cafp-recent .meta .dot[b-k83m0e4cj7] {
    color: var(--d-ink-4);
}

.cafp-recent .foot[b-k83m0e4cj7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
}

.cafp-recent .amount[b-k83m0e4cj7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.cafp-recent-empty[b-k83m0e4cj7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    color: var(--d-ink-3);
    font-size: 12.5px;
    text-align: center;
    border: 1px dashed var(--d-line);
    border-radius: 10px;
    background: var(--d-surface-2);
}

.cafp-recent-empty svg[b-k83m0e4cj7] {
    color: var(--d-ink-4);
}

/* Tips */
.cafp-tips-card[b-k83m0e4cj7] {
    background: linear-gradient(180deg, var(--d-surface) 0%, var(--d-accent-soft) 200%);
}

.cafp-tips[b-k83m0e4cj7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cafp-tips li[b-k83m0e4cj7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--d-ink-2);
    line-height: 1.45;
}

.cafp-tips .num[b-k83m0e4cj7] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-top: 1px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* /src/Features/Flights/Pages/Manager/FlightSearch.razor.rz.scp.css */
/* FlightSearch (Manager) — Manager Dashboard v4 — prefix: mfsold- */
.mfsold-root[b-p8cn7b68pb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-info: #2563eb;
    --d-violet: #8b5cf6;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

.mfsold-hero[b-p8cn7b68pb] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 14px 28px 12px; border-bottom: 1px solid var(--d-line); flex-shrink: 0; }
.mfsold-hero h1[b-p8cn7b68pb] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.mfsold-hero h1 em[b-p8cn7b68pb] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.mfsold-hero-meta[b-p8cn7b68pb] { margin-top: 4px; font-size: 12.5px; color: var(--d-ink-3); }

.mfsold-tabs[b-p8cn7b68pb] { display: inline-flex; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 3px; gap: 2px; }
.mfsold-tab[b-p8cn7b68pb] { padding: 6px 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--d-ink-2); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mfsold-tab:hover[b-p8cn7b68pb] { color: var(--d-ink); background: var(--d-surface-2); }
.mfsold-tab.is-active[b-p8cn7b68pb] { background: var(--d-accent-grad); color: #fff; }
.mfsold-tab-count[b-p8cn7b68pb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent); }
.mfsold-tab.is-active .mfsold-tab-count[b-p8cn7b68pb] { background: rgba(255,255,255,0.25); color: #fff; }

.mfsold-toolbar[b-p8cn7b68pb] { display: flex; align-items: center; gap: 8px; padding: 10px 28px; flex-wrap: wrap; flex-shrink: 0; }
.mfsold-search[b-p8cn7b68pb] { position: relative; width: 260px; }
.mfsold-search svg[b-p8cn7b68pb] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--d-ink-4); pointer-events: none; }
.mfsold-search input[b-p8cn7b68pb] { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; outline: none; }
.mfsold-search input:focus[b-p8cn7b68pb] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(255,107,0,0.12); }

.mfsold-content[b-p8cn7b68pb] { flex: 1; min-height: 0; padding: 0 28px 12px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.mfsold-card[b-p8cn7b68pb] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.mfsold-card-pad[b-p8cn7b68pb] { padding: 16px; }
.mfsold-tbl-wrap[b-p8cn7b68pb] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: auto; flex: 1; min-height: 0; }

.mfsold-tbl[b-p8cn7b68pb] { width: 100%; border-collapse: collapse; font-size: 14px; }
.mfsold-tbl thead th[b-p8cn7b68pb] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.mfsold-tbl thead th.center[b-p8cn7b68pb] { text-align: center; }
.mfsold-tbl thead th.right[b-p8cn7b68pb] { text-align: right; }
.mfsold-tbl tbody td[b-p8cn7b68pb] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.mfsold-tbl tbody tr:hover[b-p8cn7b68pb] { background: var(--d-surface-2); }
.mfsold-tbl td.center[b-p8cn7b68pb] { text-align: center; }
.mfsold-tbl td.right[b-p8cn7b68pb] { text-align: right; }
.mfsold-tbl-num[b-p8cn7b68pb] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mfsold-tbl-link[b-p8cn7b68pb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--d-accent); font-weight: 500; text-decoration: none; }
.mfsold-tbl-link:hover[b-p8cn7b68pb] { text-decoration: underline; }
.mfsold-cell-name[b-p8cn7b68pb] { font-size: 14px; font-weight: 500; color: var(--d-ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfsold-cell-sub[b-p8cn7b68pb] { font-size: 11.5px; color: var(--d-ink-4); margin-top: 2px; }
.mfsold-amount[b-p8cn7b68pb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: 12.5px; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.mfsold-arrow[b-p8cn7b68pb] { color: var(--d-accent); margin: 0 4px; }
.mfsold-tag-b2b[b-p8cn7b68pb] { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--d-info) 10%, #fff); color: var(--d-info); font-size: 9.5px; font-weight: 700; margin-left: 4px; }
.mfsold-pnr-mono[b-p8cn7b68pb] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 12px; color: var(--d-ink-2); }
.mfsold-ticket[b-p8cn7b68pb] { font-size: 11.5px; color: var(--d-good); margin-top: 2px; }

.mfsold-status[b-p8cn7b68pb] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.mfsold-status .d[b-p8cn7b68pb] { width: 5px; height: 5px; border-radius: 50%; }
.mfsold-status.warn[b-p8cn7b68pb] { background: color-mix(in srgb, var(--d-warn) 12%, #fff); color: color-mix(in srgb, var(--d-warn) 80%, #000); border-color: color-mix(in srgb, var(--d-warn) 30%, #fff); }
.mfsold-status.warn .d[b-p8cn7b68pb] { background: var(--d-warn); }
.mfsold-status.good[b-p8cn7b68pb] { background: color-mix(in srgb, var(--d-good) 12%, #fff); color: color-mix(in srgb, var(--d-good) 80%, #000); border-color: color-mix(in srgb, var(--d-good) 30%, #fff); }
.mfsold-status.good .d[b-p8cn7b68pb] { background: var(--d-good); }
.mfsold-status.info[b-p8cn7b68pb] { background: color-mix(in srgb, var(--d-info) 12%, #fff); color: color-mix(in srgb, var(--d-info) 80%, #000); border-color: color-mix(in srgb, var(--d-info) 30%, #fff); }
.mfsold-status.info .d[b-p8cn7b68pb] { background: var(--d-info); }
.mfsold-status.muted[b-p8cn7b68pb] { background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line); }
.mfsold-status.muted .d[b-p8cn7b68pb] { background: var(--d-ink-4); }
.mfsold-status.danger[b-p8cn7b68pb] { background: color-mix(in srgb, var(--d-danger) 12%, #fff); color: color-mix(in srgb, var(--d-danger) 80%, #000); border-color: color-mix(in srgb, var(--d-danger) 30%, #fff); }
.mfsold-status.danger .d[b-p8cn7b68pb] { background: var(--d-danger); }
.mfsold-status.violet[b-p8cn7b68pb] { background: color-mix(in srgb, var(--d-violet) 12%, #fff); color: color-mix(in srgb, var(--d-violet) 80%, #000); border-color: color-mix(in srgb, var(--d-violet) 30%, #fff); }
.mfsold-status.violet .d[b-p8cn7b68pb] { background: var(--d-violet); }
.mfsold-status.accent[b-p8cn7b68pb] { background: var(--d-accent-soft); color: var(--d-accent); border-color: color-mix(in srgb, var(--d-accent) 25%, #fff); }
.mfsold-status.accent .d[b-p8cn7b68pb] { background: var(--d-accent); }

.mfsold-icon-btn[b-p8cn7b68pb] { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 7px; color: var(--d-ink-3); cursor: pointer; }
.mfsold-icon-btn:hover[b-p8cn7b68pb] { background: var(--d-surface-2); color: var(--d-info); }

.mfsold-empty[b-p8cn7b68pb] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.mfsold-empty b[b-p8cn7b68pb] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.mfsold-empty small[b-p8cn7b68pb] { font-size: 12px; }
.mfsold-empty svg[b-p8cn7b68pb] { color: var(--d-ink-4); margin-bottom: 6px; }
.mfsold-loading[b-p8cn7b68pb] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.mfsold-spinner[b-p8cn7b68pb] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: mfsold-spin-b-p8cn7b68pb .7s linear infinite; }
@keyframes mfsold-spin-b-p8cn7b68pb { to { transform: rotate(360deg); } }

.mfsold-pagination[b-p8cn7b68pb] { padding: 0 28px 12px; flex-shrink: 0; }
/* /src/Features/Flights/Pages/Manager/ManagerFlightConfirmation.razor.rz.scp.css */
/* Manager Flight Confirmation — theme Manager Dashboard v4 */
.mfc-root[b-5xeksj9afp] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 10px;
    color: var(--d-ink);
}

.mfc-hero[b-5xeksj9afp] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .mfc-hero h1[b-5xeksj9afp] {
        margin: 0;
        font-family: 'Inter Tight','Inter',sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

        .mfc-hero h1 em[b-5xeksj9afp] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.mfc-hero-meta[b-5xeksj9afp] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.mfc-hero-ico[b-5xeksj9afp] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(255,107,0,0.18), 0 4px 12px -2px rgba(255,107,0,0.22);
    flex-shrink: 0;
}

    .mfc-hero-ico svg[b-5xeksj9afp] {
        width: 18px;
        height: 18px;
    }

.mfc-hero-block[b-5xeksj9afp] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mfc-hero-actions[b-5xeksj9afp] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfc-btn[b-5xeksj9afp] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .mfc-btn:hover[b-5xeksj9afp] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .mfc-btn svg[b-5xeksj9afp] {
        width: 14px;
        height: 14px;
    }

.mfc-card[b-5xeksj9afp] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

@media (max-width: 768px) {
    .mfc-hero[b-5xeksj9afp] {
        grid-template-columns: 1fr;
    }
}
/* /src/Features/Flights/Pages/Manager/ManagerFlightPassengers.razor.rz.scp.css */
/* Manager Flight Passengers — theme Manager Dashboard v4 */
.mfp-root[b-midrwjroz3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 10px;
    color: var(--d-ink);
}

.mfp-hero[b-midrwjroz3] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .mfp-hero h1[b-midrwjroz3] {
        margin: 0;
        font-family: 'Inter Tight','Inter',sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

        .mfp-hero h1 em[b-midrwjroz3] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.mfp-hero-meta[b-midrwjroz3] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.mfp-hero-ico[b-midrwjroz3] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(255,107,0,0.18), 0 4px 12px -2px rgba(255,107,0,0.22);
    flex-shrink: 0;
}

    .mfp-hero-ico svg[b-midrwjroz3] {
        width: 18px;
        height: 18px;
    }

.mfp-hero-block[b-midrwjroz3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mfp-hero-actions[b-midrwjroz3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfp-btn[b-midrwjroz3] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .mfp-btn:hover[b-midrwjroz3] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .mfp-btn svg[b-midrwjroz3] {
        width: 14px;
        height: 14px;
    }

.mfp-card[b-midrwjroz3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

@media (max-width: 768px) {
    .mfp-hero[b-midrwjroz3] {
        grid-template-columns: 1fr;
    }
}
/* /src/Features/Flights/Pages/Manager/ManagerFlightPayment.razor.rz.scp.css */
/* Manager Flight Payment — theme Manager Dashboard v4 */
.mfpay-root[b-rmhpaw97du] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 10px;
    color: var(--d-ink);
}

.mfpay-hero[b-rmhpaw97du] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .mfpay-hero h1[b-rmhpaw97du] {
        margin: 0;
        font-family: 'Inter Tight','Inter',sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

        .mfpay-hero h1 em[b-rmhpaw97du] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.mfpay-hero-meta[b-rmhpaw97du] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.mfpay-hero-ico[b-rmhpaw97du] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(255,107,0,0.18), 0 4px 12px -2px rgba(255,107,0,0.22);
    flex-shrink: 0;
}

    .mfpay-hero-ico svg[b-rmhpaw97du] {
        width: 18px;
        height: 18px;
    }

.mfpay-hero-block[b-rmhpaw97du] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mfpay-hero-actions[b-rmhpaw97du] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfpay-btn[b-rmhpaw97du] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .mfpay-btn:hover[b-rmhpaw97du] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .mfpay-btn svg[b-rmhpaw97du] {
        width: 14px;
        height: 14px;
    }

.mfpay-card[b-rmhpaw97du] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

@media (max-width: 768px) {
    .mfpay-hero[b-rmhpaw97du] {
        grid-template-columns: 1fr;
    }
}
/* /src/Features/Flights/Pages/Manager/ManagerFlightResults.razor.rz.scp.css */
/* Manager Flight Results — theme Manager Dashboard v4 */
.mfr-root[b-nhyjzil3cm] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe4cc 100%);
    --d-r: 10px;
    color: var(--d-ink);
}

.mfr-hero[b-nhyjzil3cm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .mfr-hero h1[b-nhyjzil3cm] {
        margin: 0;
        font-family: 'Inter Tight','Inter',sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

        .mfr-hero h1 em[b-nhyjzil3cm] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.mfr-hero-meta[b-nhyjzil3cm] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.mfr-hero-ico[b-nhyjzil3cm] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(255,107,0,0.18), 0 4px 12px -2px rgba(255,107,0,0.22);
    flex-shrink: 0;
}

    .mfr-hero-ico svg[b-nhyjzil3cm] {
        width: 18px;
        height: 18px;
    }

.mfr-hero-block[b-nhyjzil3cm] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mfr-hero-actions[b-nhyjzil3cm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfr-btn[b-nhyjzil3cm] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .mfr-btn:hover[b-nhyjzil3cm] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .mfr-btn svg[b-nhyjzil3cm] {
        width: 14px;
        height: 14px;
    }

.mfr-card[b-nhyjzil3cm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

.mfr-loading[b-nhyjzil3cm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.mfr-spin[b-nhyjzil3cm] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: mfr-spin-b-nhyjzil3cm .8s linear infinite;
}

@keyframes mfr-spin-b-nhyjzil3cm {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .mfr-hero[b-nhyjzil3cm] {
        grid-template-columns: 1fr;
    }
}
/* /src/Features/Flights/Pages/Manager/ManagerFlightSearch.razor.rz.scp.css */
/* Manager Flight Search — theme Manager Dashboard v4 */
.mfs-root[b-kmhlziyve3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe4cc 100%);
    --d-r: 10px;
    color: var(--d-ink);
}

.mfs-hero[b-kmhlziyve3] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .mfs-hero h1[b-kmhlziyve3] {
        margin: 0;
        font-family: 'Inter Tight','Inter',ui-sans-serif,sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .mfs-hero h1 em[b-kmhlziyve3] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.mfs-hero-meta[b-kmhlziyve3] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

.mfs-hero-ico[b-kmhlziyve3] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(255,107,0,0.18), 0 4px 12px -2px rgba(255,107,0,0.22);
    flex-shrink: 0;
}

    .mfs-hero-ico svg[b-kmhlziyve3] {
        width: 18px;
        height: 18px;
    }

.mfs-hero-block[b-kmhlziyve3] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mfs-card[b-kmhlziyve3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

.mfs-banner[b-kmhlziyve3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    border-radius: var(--d-r);
    color: var(--d-ink-2);
    font-size: 14px;
}

    .mfs-banner svg[b-kmhlziyve3] {
        width: 18px;
        height: 18px;
        color: var(--d-accent);
        flex-shrink: 0;
        margin-top: 1px;
    }

    .mfs-banner b[b-kmhlziyve3] {
        color: var(--d-ink);
        font-weight: 600;
    }

    .mfs-banner small[b-kmhlziyve3] {
        display: block;
        margin-top: 3px;
        color: var(--d-ink-3);
        font-size: 12px;
    }

.mfs-skel[b-kmhlziyve3] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mfs-skel-line[b-kmhlziyve3] {
    height: 14px;
    border-radius: 6px;
    background: var(--d-surface-2);
    animation: mfs-pulse-b-kmhlziyve3 1.4s ease-in-out infinite;
}

    .mfs-skel-line.w-48[b-kmhlziyve3] {
        width: 200px;
    }

    .mfs-skel-line.w-64[b-kmhlziyve3] {
        width: 280px;
        height: 12px;
    }

.mfs-skel-card[b-kmhlziyve3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mfs-skel-grid[b-kmhlziyve3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .mfs-skel-grid[b-kmhlziyve3] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mfs-skel-block[b-kmhlziyve3] {
    height: 38px;
    border-radius: 8px;
    background: var(--d-surface-2);
    animation: mfs-pulse-b-kmhlziyve3 1.4s ease-in-out infinite;
}

    .mfs-skel-block.tall[b-kmhlziyve3] {
        height: 44px;
    }

@keyframes mfs-pulse-b-kmhlziyve3 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@media (max-width: 768px) {
    .mfs-hero[b-kmhlziyve3] {
        grid-template-columns: 1fr;
    }
}
/* /src/Features/Flights/Pages/Manager/PopularRoutes.razor.rz.scp.css */
/* /manager/popular-routes — chuẩn nm-list: shell trang + dải số liệu + toolbar + cell + form.
   Chrome (card/grid/modal/field/input/switch/badge) do primitive Nm* lo. Token-only var(--nm-*).
   Class khung (.nm-list-*, .cell-*, .tb-*) trùng tên với các màn quản trị khác là CỐ Ý — mỗi trang
   tự khai trong scope của mình, để các màn nhìn như một hệ. */

.nm-list-page[b-vkpzyopikq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-vkpzyopikq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-vkpzyopikq] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-vkpzyopikq] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-vkpzyopikq] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải số liệu — mỗi mục là 1 lát cắt, bấm để lọc ── */
.pr-stats[b-vkpzyopikq] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.pr-stats[b-vkpzyopikq]::-webkit-scrollbar { display: none; }

.pr-stat[b-vkpzyopikq] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.pr-stats > .pr-stat:first-child[b-vkpzyopikq] { border-left: 0; }
.pr-stat:hover .pr-stat__lbl[b-vkpzyopikq] { color: var(--nm-ink); }
.pr-stat.is-on .pr-stat__lbl[b-vkpzyopikq] { color: var(--nm-brand-700); font-weight: 700; }
.pr-stat.is-on .pr-stat__val[b-vkpzyopikq] { color: var(--nm-brand-700); }

.pr-stat__dot[b-vkpzyopikq] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.pr-stat__dot--accent[b-vkpzyopikq] { background: var(--nm-brand-500); }
.pr-stat__dot--brand[b-vkpzyopikq]  { background: var(--nm-brand-700); }
.pr-stat__dot--good[b-vkpzyopikq]   { background: var(--nm-ok); }
.pr-stat__dot--info[b-vkpzyopikq]   { background: var(--nm-info); }
.pr-stat__dot--warn[b-vkpzyopikq]   { background: var(--nm-warn); }
.pr-stat__dot--bad[b-vkpzyopikq]    { background: var(--nm-bad); }
.pr-stat__dot--violet[b-vkpzyopikq] { background: var(--nm-violet); }

.pr-stat__lbl[b-vkpzyopikq] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.pr-stat__val[b-vkpzyopikq] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-vkpzyopikq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-vkpzyopikq] { width: 320px; max-width: 100%; }
.tb-select--sort[b-vkpzyopikq] { min-width: 190px; }
[b-vkpzyopikq] .tb-clear { margin-left: auto; }

.pr-active-tags[b-vkpzyopikq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* ── Cell ── */
.cell-2line[b-vkpzyopikq] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-vkpzyopikq] {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 340px;
}
.cell-2line__sub[b-vkpzyopikq] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 340px;
}
.cell-muted[b-vkpzyopikq] { color: var(--nm-muted); }
.cell-amount[b-vkpzyopikq] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600; font-size: 12.5px; color: var(--nm-ink); white-space: nowrap;
}

.pr-code[b-vkpzyopikq] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.pr-code i[b-vkpzyopikq] { font-size: 10px; opacity: .7; }

/* Nhãn "đang lên trang chủ" — thông tin đắt giá nhất của màn này nên để nổi */
.pr-home[b-vkpzyopikq] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10.5px; font-weight: 700;
    white-space: nowrap;
    cursor: help;
}
.pr-home i[b-vkpzyopikq] { font-size: 9px; }

.pr-tags[b-vkpzyopikq] { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pr-num[b-vkpzyopikq] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 600; font-size: 12.5px; }
.pr-price[b-vkpzyopikq] { align-items: flex-end; }

.pr-pin[b-vkpzyopikq] { display: inline-flex; align-items: center; gap: 4px; }
.pr-pin-val[b-vkpzyopikq] {
    min-width: 18px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px; color: var(--nm-muted); font-variant-numeric: tabular-nums;
}
[b-vkpzyopikq] .pr-pin-on { color: var(--nm-brand-700); }

/* Hàng đang ẩn — mờ + vạch trái, quét mắt là thấy nó không ra trang chủ */
[b-vkpzyopikq] .pr-row-off { opacity: .62; }
[b-vkpzyopikq] .pr-row-off .nm-grid__td:first-child { box-shadow: inset 2px 0 0 var(--nm-bad); }

.nm-row-actions[b-vkpzyopikq] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Ảnh trong bảng ── */
.pr-thumb-wrap[b-vkpzyopikq] { position: relative; display: inline-block; }
.pr-thumb[b-vkpzyopikq] {
    width: 52px; height: 36px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--nm-border); background: var(--nm-surface-2); display: block;
}
/* Ảnh đang mượn của sân bay điểm đến, không phải ảnh riêng của hành trình */
.pr-thumb-auto[b-vkpzyopikq] {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 3px;
    border-radius: 0 0 6px 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 8.5px; font-weight: 700; text-align: center;
    text-transform: uppercase; letter-spacing: .04em;
}
.pr-thumb-ph[b-vkpzyopikq] {
    width: 52px; height: 36px; border-radius: 6px;
    border: 1px dashed var(--nm-border); background: var(--nm-surface-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--nm-muted); font-size: 14px;
}
/* Lọt top 8 mà thiếu ảnh = băng chuyền trang chủ bỏ qua → cảnh báo */
.pr-thumb-ph.is-warn[b-vkpzyopikq] {
    border-color: var(--nm-warn); border-style: solid;
    background: var(--nm-warn-soft); color: var(--nm-warn);
    cursor: help;
}

/* ── Footer ── */
.pr-foot[b-vkpzyopikq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pr-total[b-vkpzyopikq] { font-size: 12.5px; color: var(--nm-muted); }
.pr-total strong[b-vkpzyopikq] { color: var(--nm-ink); font-weight: 700; }

/* ── Form trong modal ── */
.nm-form-stack[b-vkpzyopikq] { display: flex; flex-direction: column; gap: 14px; }
.nm-form-grid[b-vkpzyopikq] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) {
    .nm-form-grid[b-vkpzyopikq] { grid-template-columns: 1fr; }
}

.pr-sec-hd[b-vkpzyopikq] {
    font-size: 11.5px; font-weight: 700; color: var(--nm-muted);
    text-transform: uppercase; letter-spacing: .08em;
}
.nm-form-stack > .pr-sec-hd[b-vkpzyopikq] { margin-top: 2px; }

.nm-form-error[b-vkpzyopikq] {
    padding: 9px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-bad-soft);
    color: var(--nm-bad);
    font-size: 14px;
}
.pr-field-error[b-vkpzyopikq] { margin-top: 6px; font-size: 12px; color: var(--nm-bad); }

.pr-note[b-vkpzyopikq] {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--nm-r-input);
    background: var(--nm-info-soft); color: var(--nm-info); font-size: 12.5px;
}

/* Chặng bay khi SỬA — mã chặng không đổi được nên hiện dạng nhãn, không phải ô nhập */
.pr-route-head[b-vkpzyopikq] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-route-code[b-vkpzyopikq] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 700; font-size: 15px; letter-spacing: .04em;
}

/* Ô nhập mã sân bay — mono + tự hoa. <input> do NmInput render nên phải ::deep. */
.nm-form-stack[b-vkpzyopikq]  .nm-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pr-fallback[b-vkpzyopikq] {
    display: flex; gap: 12px; align-items: center;
    padding: 10px; margin-bottom: 10px;
    border: 1px dashed var(--nm-border); border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
}
.pr-fallback img[b-vkpzyopikq] { width: 72px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.pr-fallback div[b-vkpzyopikq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-fallback b[b-vkpzyopikq] { font-size: 12.5px; color: var(--nm-ink); }
.pr-fallback span[b-vkpzyopikq] { font-size: 11.5px; color: var(--nm-muted); }

.pr-preview[b-vkpzyopikq] { position: relative; display: inline-block; }
.pr-preview img[b-vkpzyopikq] {
    width: 220px; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--nm-r-input); border: 1px solid var(--nm-border); display: block;
}
.pr-preview[b-vkpzyopikq]  .pr-preview-x {
    position: absolute; top: 6px; right: 6px;
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow-sm);
}

@media (max-width: 640px) {
    .nm-list-page[b-vkpzyopikq] { padding: 16px 14px 22px; }
    .tb-search[b-vkpzyopikq] { flex: 1; width: auto; }
    .tb-select--sort[b-vkpzyopikq] { flex: 1 1 100%; min-width: 0; }
    .tb-select--sort[b-vkpzyopikq]  .nm-select-wrap,
    .tb-select--sort[b-vkpzyopikq]  .nm-select { width: 100%; }
}
/* /src/Features/Flights/Pages/Public/Flight.razor.rz.scp.css */
/* Flight redirect page — Manager Dashboard v4 theme tokens (no UI rendered) */
.pubflight-root[b-qrobfvuzp4] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 10px;
    color: var(--d-ink);
    display: none;
}
/* /src/Features/Flights/Pages/Public/FlightConfirmationPage.razor.rz.scp.css */
/* FlightConfirmationPage — Manager Dashboard v4 theme */
.defc-root[b-fdll03rl0d] {
    /* Đồng bộ palette cool-slate + accent cam với vùng nội dung vé (PassengerForm/PaymentStep/
       Confirmation/Results) để toàn luồng đặt vé nhất quán một tông. */
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-good: #16a34a;
    --d-r: 12px;
    color: var(--d-ink);
    max-width: 1280px;
    margin: 0 auto;
    padding: 6rem 1rem 1.25rem;
}

@media (min-width: 640px) {
    .defc-root[b-fdll03rl0d] {
        padding: 7rem 1.75rem 1.25rem;
    }
}

.defc-stack[b-fdll03rl0d] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.defc-hero[b-fdll03rl0d] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

.defc-hero-title[b-fdll03rl0d] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.defc-hero-ico[b-fdll03rl0d] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(255,107,0, 0.18), 0 4px 12px -2px rgba(255,107,0, 0.22);
}

    .defc-hero-ico svg[b-fdll03rl0d] {
        width: 20px;
        height: 20px;
    }

.defc-hero h1[b-fdll03rl0d] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
}

.defc-hero-sub[b-fdll03rl0d] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.defc-card[b-fdll03rl0d] {
    /* Wrapper trong suốt — FlightConfirmation tự có banner/thẻ riêng (giãn cách gap 20px) */
    background: transparent;
    padding: 0;
}
/* /src/Features/Flights/Pages/Public/FlightPassengers.razor.rz.scp.css */
/* FlightPassengers — Manager Dashboard v4 theme */
.defp-root[b-qcvit6ofjp] {
    /* Đồng bộ palette cool-slate + accent cam với vùng nội dung vé (PassengerForm/PaymentStep/
       Confirmation/Results) để toàn luồng đặt vé nhất quán một tông. */
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;
    color: var(--d-ink);
    max-width: 1280px;
    margin: 0 auto;
    padding: 5.25rem 1rem 1rem;
    position: relative;
}

@media (min-width: 640px) {
    .defp-root[b-qcvit6ofjp] {
        padding: 6rem 1.75rem 1rem;
    }
}

.defp-stack[b-qcvit6ofjp] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Header nổi: gom hero + stepper thành 1 thẻ — đồng bộ với trang /flight/results */
.defp-head[b-qcvit6ofjp] {
    position: relative;
    background: var(--d-surface);
    /* Bỏ viền — chỉ dùng shadow để nổi (đồng bộ .defr-head ở trang kết quả) */
    border-radius: var(--d-r);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -12px rgba(16, 24, 40, 0.16);
    padding: 11px 16px 12px;
}

.defp-stepper-wrap[b-qcvit6ofjp] {
    margin: 9px 0 0;
}

.defp-hero[b-qcvit6ofjp] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d-line);
}

.defp-hero-actions[b-qcvit6ofjp] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.defp-btn[b-qcvit6ofjp] {
    height: 34px;
    padding: 0 13px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .defp-btn:hover[b-qcvit6ofjp] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .defp-btn svg[b-qcvit6ofjp] {
        width: 16px;
        height: 16px;
    }

.defp-hero-title[b-qcvit6ofjp] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.defp-hero-ico[b-qcvit6ofjp] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(255,107,0, 0.18), 0 4px 12px -2px rgba(255,107,0, 0.22);
}

    .defp-hero-ico svg[b-qcvit6ofjp] {
        width: 16px;
        height: 16px;
    }

.defp-hero h1[b-qcvit6ofjp] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    line-height: 1.2;
}

.defp-hero-sub[b-qcvit6ofjp] {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

@media (max-width: 639px) {
    .defp-hero-sub[b-qcvit6ofjp] {
        display: none;
    }

    /* Tiêu đề gọn lại để vừa đúng 1 dòng trên điện thoại (không xuống hàng) */
    .defp-hero h1[b-qcvit6ofjp] {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Thu gọn icon + khoảng cách + nút để nhường chỗ cho tiêu đề hiện đủ 1 dòng */
    .defp-hero[b-qcvit6ofjp] { gap: 8px; }
    .defp-hero-title[b-qcvit6ofjp] { gap: 8px; }
    .defp-hero-ico[b-qcvit6ofjp] { width: 28px; height: 28px; }
    .defp-hero-ico svg[b-qcvit6ofjp] { width: 14px; height: 14px; }
    .defp-btn[b-qcvit6ofjp] { height: 32px; padding: 0 10px; gap: 6px; }
}

.defp-card[b-qcvit6ofjp] {
    /* Wrapper trong suốt — FlightPassengerForm tự có thẻ .fpf-card nổi riêng (giãn cách bằng
       space-y-4), nên bỏ nền/viền/padding để tránh thẻ-trong-thẻ. Không overflow:hidden (giữ
       sticky của sidebar bên trong hoạt động). */
    background: transparent;
    padding: 0;
}
/* /src/Features/Flights/Pages/Public/FlightPaymentPage.razor.rz.scp.css */
/* FlightPaymentPage — Manager Dashboard v4 theme */
.defpay-root[b-xie1c20bgk] {
    /* Đồng bộ palette cool-slate + accent cam với vùng nội dung vé (PassengerForm/PaymentStep/
       Confirmation/Results) để toàn luồng đặt vé nhất quán một tông. */
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;
    color: var(--d-ink);
    max-width: 1280px;
    margin: 0 auto;
    padding: 6rem 1rem 1.25rem;
}

@media (min-width: 640px) {
    .defpay-root[b-xie1c20bgk] {
        padding: 7rem 1.75rem 1.25rem;
    }
}

.defpay-stack[b-xie1c20bgk] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.defpay-hero[b-xie1c20bgk] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

.defpay-hero-title[b-xie1c20bgk] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.defpay-hero-ico[b-xie1c20bgk] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(255,107,0, 0.18), 0 4px 12px -2px rgba(255,107,0, 0.22);
}

    .defpay-hero-ico svg[b-xie1c20bgk] {
        width: 20px;
        height: 20px;
    }

.defpay-hero h1[b-xie1c20bgk] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
}

.defpay-hero-sub[b-xie1c20bgk] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.defpay-card[b-xie1c20bgk] {
    /* Wrapper trong suốt — FlightPaymentStep tự có panel/thẻ riêng (gồm thẻ tổng sticky bên phải).
       KHÔNG overflow:hidden để không phá position:sticky của .fps-total-card. */
    background: transparent;
    padding: 0;
}
/* /src/Features/Flights/Pages/Public/FlightResults.razor.rz.scp.css */
/* FlightResults — Manager Dashboard v4 theme */
.defr-root[b-4bwenxq6dh] {
    /* Đồng bộ palette với FlightSearchResults (cool-slate + accent cam) và bo góc 12px để
       thẻ header trang hài hòa cùng tông với vùng kết quả bên dưới — trước đây header dùng
       tông ấm (stone) + bo 10px, lệch nhiệt độ màu & bán kính so với nội dung. */
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-r: 12px;
    color: var(--d-ink);
    max-width: 1280px;
    margin: 0 auto;
    /* Mobile: padding ngang nhỏ (0.625rem) để nhường tối đa bề ngang cho thẻ chuyến bay */
    padding: 5.25rem 0.625rem 1rem;
    position: relative;
}

@media (min-width: 640px) {
    .defr-root[b-4bwenxq6dh] {
        padding: 6rem 1.75rem 1rem;
    }
}

.defr-stack[b-4bwenxq6dh] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Header nổi: gom hero + stepper thành 1 thẻ — tách khỏi nền, tạo điểm nhấn,
   nền cam nhạt chuyển trắng + viền + bóng, đồng bộ với thẻ kết quả bên dưới */
.defr-head[b-4bwenxq6dh] {
    position: relative;
    background: var(--d-surface);
    border-radius: var(--d-r);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -12px rgba(16, 24, 40, 0.16);
    padding: 11px 16px 12px;
}

.defr-stepper-wrap[b-4bwenxq6dh] {
    margin: 9px 0 0;
}

.defr-hero[b-4bwenxq6dh] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d-line);
}

.defr-hero-title[b-4bwenxq6dh] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.defr-hero-ico[b-4bwenxq6dh] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 10px -3px rgba(255, 107, 0, 0.22);
}

    .defr-hero-ico svg[b-4bwenxq6dh] {
        width: 16px;
        height: 16px;
    }

.defr-hero h1[b-4bwenxq6dh] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    line-height: 1.2;
}

.defr-hero-sub[b-4bwenxq6dh] {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

@media (max-width: 639px) {
    .defr-hero-sub[b-4bwenxq6dh] {
        display: none;
    }
}

.defr-hero-actions[b-4bwenxq6dh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.defr-btn[b-4bwenxq6dh] {
    height: 34px;
    padding: 0 13px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .defr-btn:hover[b-4bwenxq6dh] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .defr-btn svg[b-4bwenxq6dh] {
        width: 14px;
        height: 14px;
    }

/* Khung kết quả là wrapper trong suốt: full-width, không padding, không bóng/viền bao ngoài.
   Mỗi thành phần con (day-bar, route summary, từng chuyến bay) tự nổi trên nền web bằng
   shadow riêng của nó. */
.defr-card[b-4bwenxq6dh] {
    background: transparent;
    /* KHÔNG dùng overflow: hidden — sẽ phá position: sticky của .fsr-sidebar bên trong */
}

.defr-card-pad[b-4bwenxq6dh] {
    padding: 0;
}

.defr-loading[b-4bwenxq6dh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.defr-spinner[b-4bwenxq6dh] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-accent-soft);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: defrSpin-b-4bwenxq6dh .8s linear infinite;
}

@keyframes defrSpin-b-4bwenxq6dh {
    to {
        transform: rotate(360deg);
    }
}
/* /src/Features/Hotels/Pages/Ca/CaHotelBookingDetail.razor.rz.scp.css */
/* CSS for CaHotelBookingDetail component */
/* Container Layout */
.cabd-wrapper[b-hotshicx1o] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #374151;
    padding: 24px;
}

@media (max-width: 991px) {
    .cabd-wrapper[b-hotshicx1o] {
        grid-template-columns: 1fr;
    }
}

/* Utils */
.cabd-mb-4[b-hotshicx1o] {
    margin-bottom: 16px;
}

.cabd-text-blue[b-hotshicx1o] {
    color: #f97316;
    font-weight: 500;
}

.cabd-text-blue-dark[b-hotshicx1o] {
    color: #9a3412;
}

.cabd-link-blue[b-hotshicx1o] {
    color: #f97316;
    text-decoration: none;
    display: inline-block;
    margin-top: 12px;
    font-size: 0.875rem;
}

    .cabd-link-blue:hover[b-hotshicx1o] {
        text-decoration: underline;
    }

/* Cards */
.cabd-card[b-hotshicx1o] {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.cabd-card-header[b-hotshicx1o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cabd-card-title[b-hotshicx1o] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.cabd-action-text-btn[b-hotshicx1o] {
    background: transparent;
    border: none;
    color: #f97316;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Action Buttons */
.cabd-action-buttons[b-hotshicx1o] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e5e7eb;
}

.cabd-btn[b-hotshicx1o] {
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.cabd-btn-outline[b-hotshicx1o] {
    background: #ffffff;
    border: 1px solid #f97316;
    color: #f97316;
}

    .cabd-btn-outline:hover[b-hotshicx1o] {
        background: #fff7ed;
    }

/* Detail List (Tình trạng đơn) */
.cabd-detail-list[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cabd-detail-item[b-hotshicx1o] {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
}

.cabd-detail-label[b-hotshicx1o] {
    width: 200px;
    color: #4b5563;
    flex-shrink: 0;
}

.cabd-detail-value[b-hotshicx1o] {
    font-weight: 500;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cabd-status-badge[b-hotshicx1o] {
    background: #ffffff;
    color: #16a34a;
    border: 1px solid #16a34a;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}

.cabd-copy-icon[b-hotshicx1o] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #f97316;
}

/* Hotel Summary Block */
.cabd-hotel-summary[b-hotshicx1o] {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.cabd-hotel-images[b-hotshicx1o] {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cabd-hotel-img-main[b-hotshicx1o] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}

.cabd-hotel-img-thumbs[b-hotshicx1o] {
    display: flex;
    gap: 4px;
}

.cabd-hotel-img-thumb[b-hotshicx1o] {
    width: 32%;
    height: 34px;
    object-fit: cover;
    border-radius: 4px;
}

.cabd-hotel-img-more[b-hotshicx1o] {
    width: 32%;
    height: 34px;
    background: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
}

.cabd-hotel-info[b-hotshicx1o] {
    flex: 1;
}

.cabd-hotel-name[b-hotshicx1o] {
    font-size: .9rem;
    font-weight: 500;
    margin: 0 0 6px 0;
    color: #111827;
}

.cabd-hotel-meta[b-hotshicx1o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.cabd-hotel-type[b-hotshicx1o] {
    font-size: 0.55rem;
    background: #ffedd5;
    color: #ea580c;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.cabd-stars[b-hotshicx1o] {
    color: #fbbf24;
    display: flex;
    gap: 2px;
}

.cabd-address[b-hotshicx1o] {
    color: #6b7280;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

/* Info Box */
.cabd-info-box[b-hotshicx1o] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cabd-info-box-item[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cabd-info-box-label[b-hotshicx1o] {
    font-size: 0.6rem;
    color: #64748b;
}

.cabd-info-box-val[b-hotshicx1o] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

/* Section Header (Blue background title) */
.cabd-section-header[b-hotshicx1o] {
    background: #fff7ed;
    color: #9a3412;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 6px;
    margin-bottom: 16px;
}

/* Contact Hotel */
.cabd-contact-hotel[b-hotshicx1o] {
    display: flex;
    gap: 40px;
    margin-bottom: 24px;
    padding: 0 8px;
}

.cabd-contact-item[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.65rem;
}

    .cabd-contact-item span:first-child[b-hotshicx1o] {
        color: #4b5563;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .cabd-contact-item span:last-child[b-hotshicx1o] {
        font-weight: 600;
        color: #f97316;
    }

/* Room Breakdown */
.cabd-room-breakdown[b-hotshicx1o] {
    margin-bottom: 24px;
    padding: 0 8px;
}

.cabd-room-breakdown-title[b-hotshicx1o] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}

.cabd-room-list[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cabd-room-item[b-hotshicx1o] {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: #4b5563;
}

/* Amenities */
.cabd-amenities-title[b-hotshicx1o] {
    font-weight: 700;
    margin-bottom: 12px;
    color: #9a3412;
    padding: 0 8px;
}

.cabd-amenities-list[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.65rem;
    color: #4b5563;
    padding: 0 8px;
}

.cabd-amenities-item[b-hotshicx1o] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cabd-free-cancel[b-hotshicx1o] {
    color: #16a34a;
    font-weight: 600;
    margin-top: 16px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
}

/* Warning Box (Yêu cầu đặc biệt) */
.cabd-warning-box[b-hotshicx1o] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.cabd-warning-title[b-hotshicx1o] {
    color: #dc2626;
    font-weight: 700;
    font-size: 0.5rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.cabd-warning-desc[b-hotshicx1o] {
    color: #7f1d1d;
    font-size: 0.65rem;
    margin: 0;
    line-height: 1.5;
}

.cabd-request-list[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cabd-request-item[b-hotshicx1o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    color: #374151;
}

/* Passenger Grid */
.cabd-passenger-grid[b-hotshicx1o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 0.65rem;
    padding: 0 8px;
}

.cabd-passenger-item[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cabd-passenger-label[b-hotshicx1o] {
    color: #6b7280;
}

.cabd-passenger-value[b-hotshicx1o] {
    font-weight: 600;
    color: #111827;
}

/* Right Sidebar: Price Info */
.cabd-price-table[b-hotshicx1o] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.8rem;
}

.cabd-price-row[b-hotshicx1o] {
    display: flex;
    justify-content: space-between;
    color: #4b5563;
}

    .cabd-price-row.strong[b-hotshicx1o] {
        font-weight: 700;
        color: #111827;
    }

.cabd-price-indent[b-hotshicx1o] {
    padding-left: 10px;
    border-left: 2px solid #fdba74;
    font-size: 0.6rem;
    color: #64748b;
}

.cabd-price-discount[b-hotshicx1o] {
    color: #16a34a;
    font-weight: 600;
}

.cabd-price-total[b-hotshicx1o] {
    font-size: .9rem;
    font-weight: 800;
    color: #ea580c;
    border-top: 1px dashed #e5e7eb;
    padding-top: 16px;
    margin-top: 4px;
}

.cabd-price-paid[b-hotshicx1o] {
    font-weight: 700;
    color: #374151;
}

.cabd-price-due[b-hotshicx1o] {
    color: #dc2626;
    font-weight: 800;
    font-size: 0.95rem;
}

.cabd-price-hint[b-hotshicx1o] {
    font-size: 0.55rem;
    color: #9ca3af;
    margin-top: 8px;
}

/* Right Sidebar: Timeline */
.cabd-timeline[b-hotshicx1o] {
    margin-top: 16px;
    margin-bottom: 24px;
}

.cabd-timeline-date[b-hotshicx1o] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #ea580c;
    margin-bottom: 16px;
}

.cabd-timeline-item[b-hotshicx1o] {
    display: flex;
    gap: 12px;
}

.cabd-timeline-dot[b-hotshicx1o] {
    width: 6px;
    height: 6px;
    background: #fed7aa;
    border-radius: 50%;
    margin-top: 6px;
    box-shadow: 0 0 0 4px #fff7ed;
}

.cabd-timeline-content[b-hotshicx1o] {
    font-size: 0.65rem;
    color: #4b5563;
}

    .cabd-timeline-content strong[b-hotshicx1o] {
        color: #111827;
        font-weight: 600;
    }

.cabd-timeline-time[b-hotshicx1o] {
    font-size: 0.55rem;
    color: #9ca3af;
    margin-top: 4px;
}

.cabd-note-input-wrap[b-hotshicx1o] {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 12px;
    background: #fff;
}

.cabd-note-input[b-hotshicx1o] {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.65rem;
    padding: 4px 0;
}

.cabd-note-send[b-hotshicx1o] {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

    .cabd-note-send:hover[b-hotshicx1o] {
        color: #f97316;
    }

@keyframes slideDown-b-hotshicx1o {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /src/Features/Hotels/Pages/Ca/CaHotelBookingList.razor.rz.scp.css */
.cabl-filters[b-7f93henavs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .cabl-filters[b-7f93henavs] {
        gap: 12px;
        padding: 12px 28px;
    }
}

.cabl-tabs[b-7f93henavs] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.cabl-tab[b-7f93henavs] {
    appearance: none;
    border: 0;
    background: transparent;
    height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.cabl-tab:hover[b-7f93henavs] {
    background: var(--d-surface-2);
    color: var(--d-ink);
}

.cabl-tab.is-active[b-7f93henavs] {
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
}

.cabl-search[b-7f93henavs] {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
}

.cabl-search svg[b-7f93henavs] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.cabl-search input[type="text"][b-7f93henavs] {
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    width: 240px;
    transition: border-color .12s, box-shadow .12s;
}
.cabl-search input[type="date"][b-7f93henavs] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

.cabl-search input:focus[b-7f93henavs] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.cabl-card[b-7f93henavs] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.cabl-date-group[b-7f93henavs] {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    height: 38px;
    transition: border-color .12s, box-shadow .12s;
    overflow: hidden;
}

.cabl-date-group:focus-within[b-7f93henavs] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.cabl-select-group[b-7f93henavs] {
    border: none;
    background: var(--d-surface-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink);
    padding: 0 8px 0 12px;
    outline: none;
    cursor: pointer;
    border-right: 1px solid var(--d-line);
    border-radius: var(--d-r) 0 0 var(--d-r);
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%237b8190" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    height: 100%;
}

.cabl-datepicker-group[b-7f93henavs] {
    width: 230px;
    display: flex;
    align-items: center;
    background: var(--d-surface);
}

.cabl-datepicker-group[b-7f93henavs]  .date-field {
    min-height: 0 !important;
    height: 38px !important;
    padding: 0 10px !important;
    justify-content: center !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
    background: transparent !important;
    border-radius: 0 !important;
}

.cabl-datepicker-group[b-7f93henavs]  .dp-label {
    display: none !important;
}

.cabl-datepicker-group[b-7f93henavs]  .dp-value {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.cabl-datepicker-group[b-7f93henavs]  .w-px {
    height: 16px !important;
}

.cabl-datepicker-group[b-7f93henavs]  .range-trigger {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cabl-body[b-7f93henavs] {
    flex: 1;
    min-height: 0;
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cabl-body[b-7f93henavs] {
        padding: 0 28px 16px;
    }
}

.cabl-body-scroll[b-7f93henavs] {
    flex: 1;
    overflow: auto;
}

.cabl-tbl[b-7f93henavs] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cabl-tbl thead th[b-7f93henavs] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cabl-tbl thead th.right[b-7f93henavs] { text-align: right; }
.cabl-tbl thead th.center[b-7f93henavs] { text-align: center; }

.cabl-tbl tbody td[b-7f93henavs] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}

.cabl-tbl tbody tr:last-child td[b-7f93henavs] { border-bottom: 0; }
.cabl-tbl tbody tr:hover[b-7f93henavs] { background: var(--d-surface-2); }

.cabl-tbl td.right[b-7f93henavs] { text-align: right; }
.cabl-tbl td.center[b-7f93henavs] { text-align: center; }

.cabl-num[b-7f93henavs] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.cabl-mono[b-7f93henavs] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
}

.cabl-mono:hover[b-7f93henavs] {
    text-decoration: underline;
    color: var(--d-accent);
}

.cabl-name[b-7f93henavs] {
    font-weight: 500;
    color: var(--d-ink);
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cabl-sub[b-7f93henavs] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.cabl-status[b-7f93henavs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

.cabl-status .d[b-7f93henavs] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.cabl-status.warn[b-7f93henavs] { background: #fef3c7; color: #92400e; }
.cabl-status.good[b-7f93henavs] { background: #dcfce7; color: #166534; }
.cabl-status.info[b-7f93henavs] { background: #dbeafe; color: #1d4ed8; }
.cabl-status.danger[b-7f93henavs] { background: #fee2e2; color: #b91c1c; }
.cabl-status.muted[b-7f93henavs] { background: var(--d-surface-2); color: var(--d-ink-3); }

.cabl-icon-btn[b-7f93henavs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    text-decoration: none;
}

.cabl-icon-btn:hover[b-7f93henavs] {
    background: var(--d-surface-2);
    color: var(--d-accent);
    border-color: var(--d-accent);
}

.cabl-empty[b-7f93henavs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

.cabl-empty b[b-7f93henavs] {
    color: var(--d-ink);
    font-weight: 500;
    font-size: 14px;
}

.cabl-empty small[b-7f93henavs] {
    font-size: 12px;
}

.cabl-empty svg[b-7f93henavs] {
    margin-bottom: 6px;
    color: var(--d-ink-4);
}

.cabl-loading[b-7f93henavs] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    flex-direction: column;
    gap: 10px;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.cabl-foot[b-7f93henavs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 16px 14px;
    flex-shrink: 0;
}

.cabl-total[b-7f93henavs] {
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.cabl-total strong[b-7f93henavs] {
    color: var(--d-ink);
    font-weight: 700;
}

@media (min-width: 768px) {
    .cabl-foot[b-7f93henavs] {
        padding: 0 28px 14px;
    }
}
/* /src/Features/Hotels/Pages/Ca/CaHotelDetail.razor.rz.scp.css */
/* CaHotelDetail Stylesheet */

.cahd-root[b-o012m6zmwd] {
    --ca-bg: #f8fafc;
    --ca-surface: #ffffff;
    --ca-surface-alt: #f5f3ef;
    --ca-line: #e2e8f0;
    --ca-text-primary: #1e293b;
    --ca-text-secondary: #475569;
    --ca-text-muted: #64748b;
    --ca-accent: #ea580c;
    --ca-accent-light: #fff7ed;
    --ca-accent-border: #fed7aa;
    --ca-accent-gradient: linear-gradient(135deg, #ea580c 0%, #f97316 60%, #fb923c 100%);
    --ca-accent-gradient-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 60%, #f97316 100%);
    --ca-r: 16px;
    --ca-r-inner: 12px;

    font-family: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
    color: var(--ca-text-primary);
    background: var(--ca-bg);
    min-height: calc(100vh - 64px);
}

/* Spinner loader */
.cahd-spinner[b-o012m6zmwd] {
    width: 38px;
    height: 38px;
    border: 3.5px solid var(--ca-line);
    border-top-color: var(--ca-accent);
    border-radius: 50%;
    animation: cahd-spin-b-o012m6zmwd 0.8s linear infinite;
}

@keyframes cahd-spin-b-o012m6zmwd {
    to { transform: rotate(360deg); }
}

/* Image gallery grid borders */
.cahd-gallery-grid[b-o012m6zmwd] {
    border: 1px solid var(--ca-line);
}

.cahd-gallery-grid img[b-o012m6zmwd] {
    width: 100%;
    height: 100%;
    object-cover: cover;
    transition: transform 0.3s ease;
}

/* Primary buttons with gradient */
.cahd-btn-primary[b-o012m6zmwd] {
    background: var(--ca-accent-gradient) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px -2px rgba(234, 88, 12, 0.22), 0 1px 2px rgba(234, 88, 12, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
    outline: none;
}

.cahd-btn-primary:hover[b-o012m6zmwd] {
    background: var(--ca-accent-gradient-hover) !important;
    box-shadow: 0 6px 14px -2px rgba(234, 88, 12, 0.3), 0 2px 4px rgba(234, 88, 12, 0.18);
    transform: translateY(-0.5px);
}

.cahd-btn-primary:active[b-o012m6zmwd] {
    transform: translateY(0.5px);
}

.cahd-btn-primary:disabled[b-o012m6zmwd] {
    background: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important;
}

/* Map Button overlay styling */
.cahd-btn-map[b-o012m6zmwd] {
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.cahd-btn-map:hover[b-o012m6zmwd] {
    background: rgba(15, 23, 42, 0.9) !important;
    transform: scale(1.015);
}

/* Accordion Tab Styles */
.cahd-tab-btn[b-o012m6zmwd] {
    position: relative;
    padding: 12px 2px 14px 2px;
    background: transparent;
    border: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ca-text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
    outline: none;
}

.cahd-tab-btn[b-o012m6zmwd]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2.5px;
    background: transparent;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.cahd-tab-btn:hover[b-o012m6zmwd] {
    color: var(--ca-text-primary);
}

.cahd-tab-btn.is-active[b-o012m6zmwd] {
    color: var(--ca-accent);
}

.cahd-tab-btn.is-active[b-o012m6zmwd]::after {
    background: var(--ca-accent);
}

/* Custom Checkbox styles for Room Filter Grid */
.cahd-checkbox-lbl[b-o012m6zmwd] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cahd-checkbox-lbl input[type="checkbox"][b-o012m6zmwd] {
    display: none;
}

.cahd-checkbox-lbl .chk-custom[b-o012m6zmwd] {
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--ca-line);
    border-radius: 5px;
    background: #ffffff;
    position: relative;
    transition: border-color 0.15s, background-color 0.15s;
    flex-shrink: 0;
}

.cahd-checkbox-lbl input[type="checkbox"]:checked + .chk-custom[b-o012m6zmwd] {
    border-color: var(--ca-accent);
    background-color: var(--ca-accent);
}

.cahd-checkbox-lbl .chk-custom[b-o012m6zmwd]::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}

.cahd-checkbox-lbl input[type="checkbox"]:checked + .chk-custom[b-o012m6zmwd]::after {
    display: block;
}

.cahd-checkbox-lbl .chk-text[b-o012m6zmwd] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ca-text-secondary);
    user-select: none;
    transition: color 0.15s;
}

.cahd-checkbox-lbl:hover .chk-text[b-o012m6zmwd] {
    color: var(--ca-text-primary);
}

.cahd-checkbox-lbl input[type="checkbox"]:checked ~ .chk-text[b-o012m6zmwd] {
    color: var(--ca-accent);
    font-weight: 700;
}

/* Leaflet Map details styles */
#hotel-map[b-o012m6zmwd] {
    width: 100%;
    height: 100%;
    border-radius: var(--ca-r);
    z-index: 0;
}

#hotel-map .leaflet-control-container .leaflet-top[b-o012m6zmwd],
#hotel-map .leaflet-control-container .leaflet-bottom[b-o012m6zmwd] {
    z-index: 1;
}

#detail-hotel-map[b-o012m6zmwd] {
    width: 100%;
    height: 100%;
    background-color: #f1f5f9;
    z-index: 0;
}

#detail-hotel-map .leaflet-control-container .leaflet-top[b-o012m6zmwd],
#detail-hotel-map .leaflet-control-container .leaflet-bottom[b-o012m6zmwd] {
    z-index: 1;
}

/* Hide scrollbar utility */
.no-scrollbar[b-o012m6zmwd]::-webkit-scrollbar {
    display: none;
}
.no-scrollbar[b-o012m6zmwd] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Skeleton shimmer cho phần rooms đang tải ─────────────────────────── */
@keyframes cahd-shimmer-b-o012m6zmwd {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.cahd-rooms-skeleton > div[b-o012m6zmwd] {
    animation: cahd-shimmer-b-o012m6zmwd 1.5s infinite linear;
    background: linear-gradient(90deg,
        #f1f5f9 25%,
        #e2e8f0 50%,
        #f1f5f9 75%
    );
    background-size: 800px 100%;
    /* Override internal bg-stone-200 / bg-stone-100 so shimmer shows through */
}

.cahd-rooms-skeleton .bg-stone-200[b-o012m6zmwd],
.cahd-rooms-skeleton .bg-stone-100[b-o012m6zmwd],
.cahd-rooms-skeleton .bg-stone-50[b-o012m6zmwd] {
    background: transparent !important;
    border-color: rgba(203, 213, 225, 0.5) !important;
}

/* Fade-in khi rooms thực xuất hiện sau skeleton */
@keyframes cahd-rooms-fade-in-b-o012m6zmwd {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Áp dụng fade-in cho từng room card khi data đến */
.cahd-room-card[b-o012m6zmwd] {
    animation: cahd-rooms-fade-in-b-o012m6zmwd 0.35s ease both;
}

.cahd-room-imgs[b-o012m6zmwd]::-webkit-scrollbar { display: none; }
/* /src/Features/Hotels/Pages/Ca/CaHotelGuestInfo.razor.rz.scp.css */
.cagi-input-wrapper[b-esta30m5st] {
    border: 1px solid #e7e5e4;
    transition: all 0.2s;
}
.cagi-input-wrapper:hover[b-esta30m5st] {
    background-color: #fff7ed;
}
.cagi-input-wrapper:focus-within[b-esta30m5st] {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}
.cagi-input[b-esta30m5st] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.cagi-input-invalid[b-esta30m5st] {
    border-color: #ea580c !important;
}
.cagi-btn[b-esta30m5st] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

.cagi-btn-accent[b-esta30m5st] {
    background-color: #ea580c;
    color: white;
}
.cagi-btn-accent:hover[b-esta30m5st] {
    background-color: #c2410c;
}

.cagi-empty-wrap[b-esta30m5st] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    text-align: center;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    border: 1px solid #f5f5f4;
}

.cagi-empty-wrap img[b-esta30m5st] {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    opacity: 0.4;
}

.cagi-empty-wrap p[b-esta30m5st] {
    color: #57534e;
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 0.95rem;
}

.cagi-loading-wrap[b-esta30m5st] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem;
}

.cagi-spinner[b-esta30m5st], .cagi-btn-spinner[b-esta30m5st] {
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #ea580c;
    border-radius: 50%;
    animation: cagi-spin-b-esta30m5st 1s linear infinite;
}

.cagi-spinner[b-esta30m5st] {
    width: 2.5rem;
    height: 2.5rem;
}

.cagi-btn-spinner[b-esta30m5st] {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    border-top-color: white;
}

@keyframes cagi-spin-b-esta30m5st {
    to {
        transform: rotate(360deg);
    }
}
.cagi-btn-ghost[b-esta30m5st] {
    background-color: transparent;
    color: #57534e;
    border: 1px solid #e7e5e4;
    padding: 0.5rem 1rem;
}
.cagi-btn-ghost:hover[b-esta30m5st] {
    background-color: #f5f5f4;
    color: #292524;
}
/* /src/Features/Hotels/Pages/Ca/CaHotels.razor.rz.scp.css */
.cahp-root[b-9e8h02iowa] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

[b-9e8h02iowa] .cahp-root {
    height: calc(100vh) !important;
}

.cahp-hero-wrap[b-9e8h02iowa] {
    flex-shrink: 0;
    padding: 12px 16px 0;
}

@media (min-width: 768px) {
    .cahp-hero-wrap[b-9e8h02iowa] {
        padding: 16px 28px 0;
    }
}

.cahp-tabs[b-9e8h02iowa] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.cahp-tab[b-9e8h02iowa] {
    appearance: none;
    border: 0;
    background: transparent;
    height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

.cahp-tab:hover[b-9e8h02iowa] {
    background: var(--d-surface-2);
    color: var(--d-ink);
}

.cahp-tab.is-active[b-9e8h02iowa] {
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
}

.cahp-body-area[b-9e8h02iowa] {
    flex: 1;
    min-height: 0;
    padding: 0 0 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .cahp-body-area[b-9e8h02iowa] {
        padding: 0 0 16px;
    }
}
/* /src/Features/Hotels/Pages/Ca/CaHotelSearch.razor.rz.scp.css */
[b-6zoeigp29q] .loading-dots-inline span {
    animation: blink-dot-b-6zoeigp29q 1.4s infinite both;
    font-size: 1.2em;
    line-height: 1;
    font-weight: bold;
}
[b-6zoeigp29q] .loading-dots-inline span:nth-child(2) { animation-delay: 0.2s; }
[b-6zoeigp29q] .loading-dots-inline span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink-dot-b-6zoeigp29q {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

[b-6zoeigp29q] .cahsb-promotions-section .overflow-x-auto::-webkit-scrollbar { display: none; }

/* ==================== 3. Date Rates Slider ==================== */
.cahsb-date-slider[b-6zoeigp29q] {
    background-color: #ffffff;
}

.slider-nav-btn[b-6zoeigp29q] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.slider-nav-btn:hover[b-6zoeigp29q] {
    background: #f8fafc;
    color: var(--cahsb-accent, #ea580c);
    border-color: var(--cahsb-accent-border, #fed7aa);
}

.slider-day[b-6zoeigp29q] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    min-width: 64px;
    padding: 6px 4px;
}

.slider-day:hover[b-6zoeigp29q] {
    border-color: #fed7aa;
    background-color: #fff7ed;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px -1px rgba(234, 88, 12, 0.1);
}

.slider-day.is-active[b-6zoeigp29q] {
    background-color: #ea580c;
    border-color: #ea580c;
    box-shadow: 0 4px 6px -1px rgba(234, 88, 12, 0.3);
    transform: translateY(-1px);
}

.slider-day.is-active .day-lbl[b-6zoeigp29q],
.slider-day.is-active .day-date[b-6zoeigp29q] {
    color: #ffffff !important;
}

.slider-day .day-lbl[b-6zoeigp29q] {
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
}

.slider-day .day-date[b-6zoeigp29q] {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}

/* ==================== 4. Checkbox & Radio Buttons ==================== */
.cahsb-sidebar-checkbox[b-6zoeigp29q] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.cahsb-sidebar-checkbox input[b-6zoeigp29q] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cahsb-sidebar-checkbox .checkbox-custom[b-6zoeigp29q] {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #d6d3d1; /* stone-300 */
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cahsb-sidebar-checkbox:hover input ~ .checkbox-custom[b-6zoeigp29q] {
    border-color: #ea580c; /* orange-600 */
}

.cahsb-sidebar-checkbox input:checked ~ .checkbox-custom[b-6zoeigp29q] {
    background-color: #ea580c;
    border-color: #ea580c;
}

.cahsb-sidebar-checkbox .checkbox-custom[b-6zoeigp29q]:after {
    content: "";
    display: none;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.cahsb-sidebar-checkbox input:checked ~ .checkbox-custom[b-6zoeigp29q]:after {
    display: block;
}

.cahsb-sidebar-checkbox .checkbox-text[b-6zoeigp29q] {
    font-size: 13px;
    font-weight: 500;
}

.cahsb-sidebar-radio[b-6zoeigp29q] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.cahsb-sidebar-radio input[b-6zoeigp29q] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cahsb-sidebar-radio .radio-custom[b-6zoeigp29q] {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #d6d3d1;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cahsb-sidebar-radio:hover input ~ .radio-custom[b-6zoeigp29q] {
    border-color: #ea580c;
}

.cahsb-sidebar-radio input:checked ~ .radio-custom[b-6zoeigp29q] {
    border-color: #ea580c;
    border-width: 5px;
}

.cahsb-sidebar-radio .radio-text[b-6zoeigp29q] {
    font-size: 13px;
    font-weight: 500;
}
/* /src/Features/Hotels/Pages/Ca/Components/CaHotelPrintConfirm.razor.rz.scp.css */
.print-confirm-modal[b-eqtdrkm6mq] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.print-confirm-overlay[b-eqtdrkm6mq] {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.print-confirm-content[b-eqtdrkm6mq] {
    position: relative;
    background: #fff;
    border-radius: 8px;
    width: 800px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.print-header[b-eqtdrkm6mq] {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.print-footer[b-eqtdrkm6mq] {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.print-header h2[b-eqtdrkm6mq] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}
.btn-download[b-eqtdrkm6mq] {
    background: #f97316;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.btn-download:hover[b-eqtdrkm6mq] {
    background: #ea580c;
}
.btn-close[b-eqtdrkm6mq] {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #6b7280;
}
.print-body[b-eqtdrkm6mq] {
    padding: 24px;
    overflow-y: auto;
    background: #f3f4f6; /* Gray background for contrast, inner is white */
}
.print-capture-area[b-eqtdrkm6mq] {
    background: #ffffff;
    padding: 32px;
    color: #374151;
    font-family: 'Inter', sans-serif;
}

.confirm-title[b-eqtdrkm6mq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    text-align:center
}
.hotel-title[b-eqtdrkm6mq] {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}
.hotel-category[b-eqtdrkm6mq] {
    color: #f97316;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
}
.hotel-category .stars[b-eqtdrkm6mq] {
    margin-left: 8px;
}
.hotel-address[b-eqtdrkm6mq] {
    color: #4b5563;
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.contact-grid[b-eqtdrkm6mq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.contact-label[b-eqtdrkm6mq] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 4px;
}
.contact-value[b-eqtdrkm6mq] {
    font-weight: 500;
}
.text-primary[b-eqtdrkm6mq] { color: #0284c7; }
.text-danger[b-eqtdrkm6mq] { color: #ef4444; }
.text-success[b-eqtdrkm6mq] { color: #10b981; }
.text-warning[b-eqtdrkm6mq] { color: #f59e0b; }
.font-bold[b-eqtdrkm6mq] { font-weight: 700; }
.text-right[b-eqtdrkm6mq] { text-align: right; }
.text-sm[b-eqtdrkm6mq] { font-size: 0.875rem; }
.mt-3[b-eqtdrkm6mq] { margin-top: 12px; }
.mt-4[b-eqtdrkm6mq] { margin-top: 16px; }

.booking-info-box[b-eqtdrkm6mq] {
    background: #f0f9ff;
    border-radius: 8px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.info-label[b-eqtdrkm6mq] {
    font-size: 0.85rem;
    color: #6b7280;
}
.info-date[b-eqtdrkm6mq] {
    font-weight: 600;
    color: #111827;
}
.info-time[b-eqtdrkm6mq] {
    font-size: 0.9rem;
}
.info-value[b-eqtdrkm6mq] {
    font-weight: 600;
    color: #111827;
}

.section-title[b-eqtdrkm6mq] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 24px 0 12px 0;
}

.contact-person-grid[b-eqtdrkm6mq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.print-table[b-eqtdrkm6mq] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
.print-table th[b-eqtdrkm6mq] {
    background: #f0f9ff;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.print-table td[b-eqtdrkm6mq] {
    padding: 12px;
    font-size: 0.9rem;
    border: 1px solid #e5e7eb;
    vertical-align: top;
}
.print-table tfoot td[b-eqtdrkm6mq] {
    border: none;
    border-top: 1px solid #e5e7eb;
}

.amenities-box[b-eqtdrkm6mq] {
    background: #f0f9ff;
    border-radius: 4px;
    padding: 16px;
}
.amenity-item[b-eqtdrkm6mq] {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #4b5563;
}

.special-requests[b-eqtdrkm6mq] {
    background: #f0f9ff;
    border-radius: 4px;
    padding: 16px;
}
.request-item[b-eqtdrkm6mq] {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #4b5563;
}
/* /src/Features/Hotels/Pages/Ca/Components/HotelResultCard.razor.rz.scp.css */
/* CaHotelSearchBox Stylesheet */

.cahsb-root[b-otfcoq3u4u] {
    --cahsb-bg: transparent;
    --cahsb-border: #fed7aa;
    --cahsb-border-focus: #ea580c;
    --cahsb-text-primary: #1e293b;
    --cahsb-text-secondary: #64748b;
    --cahsb-text-placeholder: #94a3b8;
    --cahsb-accent: #ea580c;
    --cahsb-accent-light: #fff7ed;
    --cahsb-accent-border: #fed7aa;
    --cahsb-r: 12px;
    --cahsb-field-r: 12px;

    width: 100%;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--cahsb-text-primary);
}

.cahsb-container[b-otfcoq3u4u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

@media (min-width: 1024px) {
    .cahsb-container[b-otfcoq3u4u] {
        flex-wrap: nowrap;
        gap: 16px;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }
}

.cahsb-field[b-otfcoq3u4u] {
    position: relative;
    flex: 1;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--cahsb-border) !important;
    border-radius: var(--cahsb-field-r) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .cahsb-field[b-otfcoq3u4u] {
        border: 1px solid var(--cahsb-border) !important;
        border-radius: var(--cahsb-field-r) !important;
    }
}

.cahsb-field:not(:last-child)[b-otfcoq3u4u] {
    /* Mobile standard borders */
    border: 1px solid var(--cahsb-border) !important;
    border-radius: var(--cahsb-field-r) !important;
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .cahsb-field:not(:last-child)[b-otfcoq3u4u] {
        border: 1px solid var(--cahsb-border) !important;
        border-radius: var(--cahsb-field-r) !important;
        margin-bottom: 0;
    }
}

.cahsb-field.is-open[b-otfcoq3u4u] {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
    z-index: 50 !important;
    overflow: visible !important;
}

.cahsb-field:hover[b-otfcoq3u4u] {
    background-color: var(--cahsb-accent-light) !important;
}

@media (min-width: 1024px) {
    .cahsb-field.is-open[b-otfcoq3u4u] {
        box-shadow: none;
        background: var(--cahsb-accent-light);
    }
}

/* Date input group */
.cahsb-date-group[b-otfcoq3u4u] {
    position: relative;
    flex: 1 !important;
    min-width: 270px !important;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cahsb-border) !important;
    border-radius: var(--cahsb-field-r) !important;
    margin-bottom: 0;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

@media (min-width: 1024px) {
    .cahsb-date-group[b-otfcoq3u4u] {
        border: 1px solid var(--cahsb-border) !important;
        border-radius: var(--cahsb-field-r) !important;
        margin-bottom: 0;
    }
}

.cahsb-date-group:hover[b-otfcoq3u4u] {
    background-color: var(--cahsb-accent-light) !important;
}

.cahsb-date-group:has(.dp-open)[b-otfcoq3u4u] {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}

@media (min-width: 1024px) {
    .cahsb-date-group:has(.dp-open)[b-otfcoq3u4u] {
        box-shadow: none;
        background: var(--cahsb-accent-light);
    }
}

/* Triggers & inputs */
.cahsb-trigger[b-otfcoq3u4u] {
    width: 100%;
    min-height: 48px !important;
    padding: 0 16px !important;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer;
    text-align: left;
    outline: none;
    border-radius: var(--cahsb-field-r);
}

.cahsb-icon[b-otfcoq3u4u] {
    width: 20px !important;
    height: 20px !important;
    color: var(--cahsb-accent) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cahsb-icon svg[b-otfcoq3u4u] {
    width: 100%;
    height: 100%;
}

.cahsb-meta[b-otfcoq3u4u] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.cahsb-lbl[b-otfcoq3u4u] {
    display: none !important;
}

.cahsb-val[b-otfcoq3u4u] {
    font-size: 14px;
    font-weight: 550;
    color: var(--cahsb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cahsb-val.is-placeholder[b-otfcoq3u4u] {
    color: var(--cahsb-text-placeholder);
    font-weight: 400;
}

.cahsb-input[b-otfcoq3u4u] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 550;
    color: var(--cahsb-text-primary);
    padding: 0;
    line-height: 1.2;
}

.cahsb-input[b-otfcoq3u4u]::placeholder {
    color: var(--cahsb-text-placeholder);
    font-weight: 400;
}

.cahsb-caret[b-otfcoq3u4u] {
    display: none !important;
}

.cahsb-clear-btn[b-otfcoq3u4u] {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--cahsb-text-secondary);
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 10;
}

.cahsb-clear-btn:hover[b-otfcoq3u4u] {
    background: #fee2e2;
    color: #ef4444;
}

.cahsb-clear-btn svg[b-otfcoq3u4u] {
    width: 12px;
    height: 12px;
}

/* Nights circle in the middle */
.cahsb-nights-badge[b-otfcoq3u4u] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}

.cahsb-nights-circle[b-otfcoq3u4u] {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 1px solid var(--cahsb-accent-border);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.12);
    cursor: default;
    transition: transform 0.2s, background-color 0.2s;
    line-height: 1.15;
}

.cahsb-nights-circle:hover[b-otfcoq3u4u] {
    transform: scale(1.08);
    background: var(--cahsb-accent-light);
}

.cahsb-nights-num[b-otfcoq3u4u] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cahsb-accent);
}

.cahsb-nights-text[b-otfcoq3u4u] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
    text-transform: lowercase;
}

/* Popover dropdowns */
.cahsb-overlay[b-otfcoq3u4u] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.cahsb-dropdown[b-otfcoq3u4u] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    background: #ffffff;
    border: 1px solid var(--cahsb-border);
    border-radius: var(--cahsb-field-r);
    box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.15), 0 5px 15px -3px rgba(15, 23, 42, 0.05);
    padding: 16px;
    animation: cahsb-pop-in-b-otfcoq3u4u 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 480px;
    overflow-y: auto;
}

@keyframes cahsb-pop-in-b-otfcoq3u4u {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cahsb-pop-city[b-otfcoq3u4u] {
    width: 100%;
    min-width: 320px;
}

@media (min-width: 768px) {
    .cahsb-pop-city[b-otfcoq3u4u] {
        width: 400px;
    }
}

.cahsb-pop-hd p[b-otfcoq3u4u] {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cahsb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cahsb-city-item[b-otfcoq3u4u] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.cahsb-city-item:hover[b-otfcoq3u4u] {
    background: #fff7ed;
}

.cahsb-city-icon-wrap[b-otfcoq3u4u] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cahsb-city-icon-wrap.custom-search[b-otfcoq3u4u] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.cahsb-city-badge[b-otfcoq3u4u] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.cahsb-city-badge.is-city[b-otfcoq3u4u] {
    background: #fff7ed;
    color: #ea580c;
}

.cahsb-city-badge.is-hotel[b-otfcoq3u4u] {
    background: #fff7ed;
    color: #ea580c;
}

.cahsb-city-info[b-otfcoq3u4u] {
    min-width: 0;
    flex: 1;
}

.cahsb-city-info p[b-otfcoq3u4u] {
    margin: 0;
}

.cahsb-city-name[b-otfcoq3u4u] {
    font-size: 14px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
}

.cahsb-city-name.custom-highlight[b-otfcoq3u4u] {
    color: var(--cahsb-accent);
}

.cahsb-city-region[b-otfcoq3u4u] {
    font-size: 12px;
    color: var(--cahsb-text-secondary);
    margin-top: 2px;
}

.cahsb-city-count[b-otfcoq3u4u] {
    font-size: 11px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}

.cahsb-city-empty[b-otfcoq3u4u] {
    text-align: center;
    color: var(--cahsb-text-secondary);
    font-size: 13.5px;
    padding: 20px 0;
}

.cahsb-city-custom[b-otfcoq3u4u] {
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
    padding-top: 8px;
}

/* Guests & Rooms popover */
.cahsb-pop-guests[b-otfcoq3u4u] {
    width: 100%;
    left: 0;
}

@media (min-width: 768px) {
    .cahsb-pop-guests[b-otfcoq3u4u] {
        width: 360px;
        left: auto;
        right: 0;
    }
}

.cahsb-stepper-row[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
}

.cahsb-stepper-row+.cahsb-stepper-row[b-otfcoq3u4u] {
    border-top: 1px solid #f1f5f9;
}

.cahsb-stepper-info[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cahsb-stepper-icon[b-otfcoq3u4u] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cahsb-accent-light);
    color: var(--cahsb-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cahsb-stepper-icon svg[b-otfcoq3u4u] {
    width: 18px;
    height: 18px;
}

.cahsb-stepper-text[b-otfcoq3u4u] {
    min-width: 0;
}

.cahsb-stepper-text p[b-otfcoq3u4u] {
    margin: 0;
}

.cahsb-stepper-name[b-otfcoq3u4u] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
}

.cahsb-stepper-desc[b-otfcoq3u4u] {
    font-size: 11.5px;
    color: var(--cahsb-text-secondary);
    margin-top: 2px;
}

.cahsb-stepper-ctrl[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cahsb-step-btn[b-otfcoq3u4u] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--cahsb-accent-border);
    background: #ffffff;
    color: var(--cahsb-accent);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s;
}

.cahsb-step-btn:hover:not(:disabled)[b-otfcoq3u4u] {
    background: var(--cahsb-accent);
    color: #ffffff;
    border-color: var(--cahsb-accent);
}

.cahsb-step-btn:disabled[b-otfcoq3u4u] {
    border-color: #e2e8f0;
    color: var(--cahsb-text-placeholder);
    cursor: not-allowed;
    opacity: 0.6;
}

.cahsb-step-btn svg[b-otfcoq3u4u] {
    width: 14px;
    height: 14px;
}

.cahsb-step-val[b-otfcoq3u4u] {
    width: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
}

/* Children details nested container */
.cahsb-children-container[b-otfcoq3u4u] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.cahsb-note-block[b-otfcoq3u4u] {
    background: var(--cahsb-accent-light);
    border-left: 3px solid var(--cahsb-accent);
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
}

.cahsb-note-text[b-otfcoq3u4u] {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cahsb-accent);
    margin: 0;
}

.cahsb-child-ages-grid[b-otfcoq3u4u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cahsb-child-age-row[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cahsb-child-label[b-otfcoq3u4u] {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--cahsb-text-primary);
}

.cahsb-select-wrapper[b-otfcoq3u4u] {
    position: relative;
    width: 120px;
}

.cahsb-select-age[b-otfcoq3u4u] {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--cahsb-accent-border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: var(--cahsb-text-primary);
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: border-color 0.15s;
}

.cahsb-select-age:focus[b-otfcoq3u4u] {
    border-color: var(--cahsb-border-focus);
}

.cahsb-select-caret[b-otfcoq3u4u] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--cahsb-text-secondary);
    pointer-events: none;
}

/* Submit button */
.cahsb-submit-btn[b-otfcoq3u4u] {
    flex-shrink: 0;
    height: 60px;
    padding: 0 32px;
    border-radius: var(--cahsb-field-r);
    border: 0;
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.25);
    transition: transform 0.1s, opacity 0.2s;
    width: 100%;
}

@media (min-width: 1024px) {
    .cahsb-submit-btn[b-otfcoq3u4u] {
        width: auto;
    }
}

.cahsb-submit-btn:hover[b-otfcoq3u4u] {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    opacity: 0.95;
}

.cahsb-submit-btn:active[b-otfcoq3u4u] {
    transform: scale(0.98);
}

.cahsb-submit-icon[b-otfcoq3u4u] {
    width: 18px;
    height: 18px;
}

/* Bottom row for filters */
.cahsb-bottom-row[b-otfcoq3u4u] {
    margin-top: 14px;
    display: flex;
    align-items: center;
}

.cahsb-checkbox-label[b-otfcoq3u4u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.cahsb-checkbox-input[b-otfcoq3u4u] {
    display: none;
}

.cahsb-checkbox-custom[b-otfcoq3u4u] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--cahsb-accent-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.15s;
}

.cahsb-checkbox-input:checked+.cahsb-checkbox-custom[b-otfcoq3u4u] {
    background: var(--cahsb-accent);
    border-color: var(--cahsb-accent);
}

.cahsb-check-icon[b-otfcoq3u4u] {
    width: 14px;
    height: 14px;
    color: #ffffff;
}

.cahsb-checkbox-text[b-otfcoq3u4u] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cahsb-text-secondary);
}

.cahsb-checkbox-input:checked~.cahsb-checkbox-text[b-otfcoq3u4u] {
    color: var(--cahsb-text-primary);
}

/* Date picker customization override */
[b-otfcoq3u4u] .nm-datepicker .range-trigger {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 !important;
}

[b-otfcoq3u4u] .nm-datepicker .date-field {
    min-height: 48px !important;
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
}

[b-otfcoq3u4u] .nm-datepicker .date-field .dp-label {
    display: none !important;
}

[b-otfcoq3u4u] .nm-datepicker .date-field .dp-value {
    font-size: 14px !important;
    font-weight: 550 !important;
    color: var(--cahsb-text-primary) !important;
}

[b-otfcoq3u4u] .nm-datepicker .dp-field-icon {
    color: #ea580c !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

[b-otfcoq3u4u] .nm-datepicker .dp-field-icon svg {
    width: 20px !important;
    height: 20px !important;
}

/* ==================== 1. Top Steps Progress Bar ==================== */
.cahsb-steps[b-otfcoq3u4u] {
    background-color: #fcfcfd;
    border-bottom: 1px solid #e5e7eb;
}

/* ==================== Outer Search Wrapper Overrides ==================== */
.cahsb-search-wrap[b-otfcoq3u4u] {
    background-color: #f3f8fc !important;
    /* Soft blue-gray background in screenshot */
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 28px !important;
}

/* ==================== 2. Orange Search Submit Button ==================== */
.cahsb-submit-btn-orange[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--cahsb-field-r);
    border: none;
    background: #ea580c;
    /* Orange branding */
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
    transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.cahsb-submit-btn-orange:hover[b-otfcoq3u4u] {
    background: #c2410c;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
}

.cahsb-submit-btn-orange:active[b-otfcoq3u4u] {
    transform: scale(0.95);
}

/* ==================== 3. Date Rates Slider ==================== */
.cahsb-date-slider[b-otfcoq3u4u] {
    background-color: #ffffff;
}

.slider-nav-btn[b-otfcoq3u4u] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.slider-nav-btn:hover[b-otfcoq3u4u] {
    background: #f8fafc;
    color: var(--cahsb-accent);
    border-color: var(--cahsb-accent-border);
}

.slider-day[b-otfcoq3u4u] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.2s ease;
}

.slider-day:hover[b-otfcoq3u4u] {
    border-color: var(--cahsb-accent-border);
    background-color: var(--cahsb-accent-light);
}

.slider-day.is-active[b-otfcoq3u4u] {
    background-color: #ffffff;
    border: 2px solid #ea580c;
    /* Orange border for selected day */
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
}

.slider-day.is-active .day-lbl[b-otfcoq3u4u] {
    color: #ea580c;
    font-weight: 750 !important;
}

.slider-day.is-active .day-price[b-otfcoq3u4u] {
    color: #ea580c;
}

.slider-day .day-lbl[b-otfcoq3u4u] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.slider-day .day-price[b-otfcoq3u4u] {
    font-size: 11px;
    font-weight: 700;
    color: #ea580c;
    /* Price text orange as in project format */
}

/* ==================== 4. Hotel Cards Layout ==================== */
.cahsb-hotel-card[b-otfcoq3u4u] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cahsb-hotel-card:hover[b-otfcoq3u4u] {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -3px rgba(0, 0, 0, 0.04);
}

.cahsb-card-banner[b-otfcoq3u4u] {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.cahsb-card-media[b-otfcoq3u4u] {
    width: 100%;
}

.cahsb-card-cover[b-otfcoq3u4u] {
    width: 100%;
    height: 180px;
}

.cahsb-card-cover img[b-otfcoq3u4u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cahsb-card-thumbs[b-otfcoq3u4u] {
    width: 100%;
}

@media (min-width: 640px) {
    .cahsb-card-media[b-otfcoq3u4u] {
        width: 280px;
    }

    .cahsb-card-cover[b-otfcoq3u4u] {
        width: 280px;
        height: 180px;
    }

    .cahsb-card-thumbs[b-otfcoq3u4u] {
        width: 280px;
    }

    .thumb-img[b-otfcoq3u4u] {
        height: 52px !important;
    }
}

.thumb-img[b-otfcoq3u4u] {
    height: 38px;
    position: relative;
    cursor: pointer;
}

.thumb-img img[b-otfcoq3u4u] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-img.active[b-otfcoq3u4u] {
    border-color: var(--cahsb-accent);
}

.thumb-img.more-overlay[b-otfcoq3u4u] {
    position: relative;
}

.thumb-img.more-overlay[b-otfcoq3u4u]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.thumb-img.more-overlay span[b-otfcoq3u4u] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}

.cahsb-tag-badge[b-otfcoq3u4u] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.amenity-chip[b-otfcoq3u4u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.amenity-chip.is-active[b-otfcoq3u4u] {
    background-color: rgba(254, 215, 170, 0.08);
    /* light orange tint */
    border: 1.2px solid rgba(253, 186, 116, 0.6);
    /* border-orange-300 */
    color: #ea580c;
    /* orange-600 */
}

.amenity-chip.is-active:hover[b-otfcoq3u4u] {
    background-color: rgba(254, 215, 170, 0.2);
    border-color: rgba(249, 115, 22, 0.7);
}

.amenity-chip.is-dimmed[b-otfcoq3u4u] {
    background-color: rgba(244, 244, 245, 0.4);
    /* light gray */
    border: 1.2px solid rgba(228, 228, 231, 0.5);
    /* border-gray-200 */
    color: #a1a1aa;
    /* gray-400 */
    opacity: 0.5;
}

.amenity-chip.is-dimmed:hover[b-otfcoq3u4u] {
    background-color: rgba(244, 244, 245, 0.8);
    opacity: 0.7;
}


/* Right Section Price & Review */
.rating-num[b-otfcoq3u4u] {
    background-color: #fed7aa59;
    color: #ea580c;
    font-size: 13px;
    font-weight: 800;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    /* Rectangular Tag/Badge shape */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.2);
}

.cahsb-btn-select[b-otfcoq3u4u] {
    background-color: #ff6b00;
    /* Orange matching project format */
    border: none;
    transition: background-color 0.15s ease;
}

.cahsb-btn-select:hover[b-otfcoq3u4u] {
    background-color: #c2410c;
}

/* ==================== 5. Sidebar Styles ==================== */
.cahsb-sidebar-map[b-otfcoq3u4u] {
    height: 110px;
    background-color: #e2e8f0;
    position: relative;
}

.map-bg[b-otfcoq3u4u] {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f1f5f9"/><path d="M10 0v100M30 0v100M50 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 50h100M0 70h100M0 90h100" stroke="%23cbd5e1" stroke-width="0.5"/><circle cx="50" cy="50" r="4" fill="%23ea580c" opacity="0.8"/></svg>');
    background-size: cover;
    filter: grayscale(20%) contrast(90%);
}

.cahsb-sidebar-card[b-otfcoq3u4u] {
    background-color: #ffffff;
}

/* Custom Radios in Sidebar */
.cahsb-sidebar-radio[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    padding: 4px 0;
}

.cahsb-sidebar-radio input[type="radio"][b-otfcoq3u4u] {
    display: none;
}

.radio-custom[b-otfcoq3u4u] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.cahsb-sidebar-radio input[type="radio"]:checked+.radio-custom[b-otfcoq3u4u] {
    border-color: #ea580c;
    background-color: #ea580c;
}

.cahsb-sidebar-radio input[type="radio"]:checked+.radio-custom[b-otfcoq3u4u]::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-text[b-otfcoq3u4u] {
    user-select: none;
}

/* Custom Checkboxes in Sidebar */
.cahsb-sidebar-checkbox[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    padding: 4px 0;
}

.cahsb-sidebar-checkbox input[type="checkbox"][b-otfcoq3u4u] {
    display: none;
}

.checkbox-custom[b-otfcoq3u4u] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.cahsb-sidebar-checkbox input[type="checkbox"]:checked+.checkbox-custom[b-otfcoq3u4u] {
    border-color: #ea580c;
    background-color: #ea580c;
}

.cahsb-sidebar-checkbox input[type="checkbox"]:checked+.checkbox-custom[b-otfcoq3u4u]::after {
    content: "✓";
    position: absolute;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
}

.checkbox-text[b-otfcoq3u4u] {
    user-select: none;
}

/* ==================== Datepicker Nights Inline Middle Section ==================== */
.cahsb-datepicker-nights[b-otfcoq3u4u] {
    border-left: 1px solid var(--cahsb-border) !important;
    border-right: 1px solid var(--cahsb-border) !important;
    height: 48px !important;
    background-color: #ffffff;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
}

/* ==================== First Load / Large Search Layout ==================== */
.cahsb-page-root[b-otfcoq3u4u] {
    padding-top: 20px !important;
}

.cahsb-first-load[b-otfcoq3u4u] {
    background-color: #f8fafc !important;
    /* Premium light slate background */
}

.cahsb-large-container[b-otfcoq3u4u] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: 24px;
}

.cahsb-large-card[b-otfcoq3u4u] {
    background: #ffffff;
    border: 1px solid #fed7aa !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -15px rgba(234, 88, 12, 0.08) !important;
}

.cahsb-large-field[b-otfcoq3u4u] {
    position: relative;
    border-bottom: 2px solid #fed7aa !important;
    transition: border-color 0.2s ease;
    padding-bottom: 6px;
}

.cahsb-large-field:hover[b-otfcoq3u4u],
.cahsb-large-field.is-open[b-otfcoq3u4u] {
    border-bottom-color: #ea580c !important;
}

.cahsb-large-field.is-open[b-otfcoq3u4u] {
    z-index: 50 !important;
}

.cahsb-large-trigger[b-otfcoq3u4u] {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
}

.cahsb-large-icon[b-otfcoq3u4u] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cahsb-large-val[b-otfcoq3u4u] {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.cahsb-large-val.is-placeholder[b-otfcoq3u4u] {
    color: #94a3b8;
    font-weight: 500;
}

.cahsb-large-input[b-otfcoq3u4u] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    padding: 0;
}

/* Underline Date Picker styling inside large search card */
.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .range-trigger {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 !important;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    border-bottom: 2px solid #fed7aa !important;
    padding-bottom: 6px !important;
    background: transparent !important;
    flex: 1 !important;
    transition: border-color 0.2s ease;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field:hover,
.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field:has(.dp-open) {
    border-bottom-color: #ea580c !important;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field .dp-field-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin-right: 0 !important;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field .dp-label {
    display: block !important;
    grid-row: 1;
    grid-column: 2;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
    text-align: left;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field .dp-value {
    grid-row: 2;
    grid-column: 2;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    text-align: left;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .date-field .dp-value.is-placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.cahsb-large-datepicker-wrap[b-otfcoq3u4u]  .nm-datepicker .cahsb-datepicker-nights-large {
    align-self: center;
    padding: 0 8px;
    z-index: 10;
}

/* Promotions styling */
.cahsb-promo-card[b-otfcoq3u4u] {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    background: #ffffff;
}

.cahsb-promo-card:hover[b-otfcoq3u4u] {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 8px -5px rgba(0, 0, 0, 0.04);
}


/* Validation error styles */
.cahsb-field.has-error[b-otfcoq3u4u],
.cahsb-date-group.has-error[b-otfcoq3u4u] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.cahsb-large-field.has-error[b-otfcoq3u4u],
.cahsb-large-field.has-error:hover[b-otfcoq3u4u],
.cahsb-large-field.has-error.is-open[b-otfcoq3u4u] {
    border-bottom-color: #ef4444 !important;
}

.cahsb-large-datepicker-wrap.has-error[b-otfcoq3u4u]  .nm-datepicker .date-field,
.cahsb-large-datepicker-wrap.has-error[b-otfcoq3u4u]  .nm-datepicker .date-field:hover {
    border-bottom-color: #ef4444 !important;
}

/* Sidebar redesign animations & transitions */
.animate-fade-in[b-otfcoq3u4u] {
    animation: fadeIn-b-otfcoq3u4u 0.25s ease-out forwards;
}

@keyframes fadeIn-b-otfcoq3u4u {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-hover-spin:hover[b-otfcoq3u4u] {
    animation: spin-b-otfcoq3u4u 0.8s ease-in-out;
}

@keyframes spin-b-otfcoq3u4u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Redesigned Map Button Card */
.cahsb-sidebar-map[b-otfcoq3u4u] {
    height: 110px;
    background-color: #f1f5f9;
}

.cahsb-sidebar-map .map-bg[b-otfcoq3u4u] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f8fafc"/><path d="M10 0v100M30 0v100M50 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 50h100M0 70h100M0 90h100" stroke="%23e2e8f0" stroke-width="0.6"/><circle cx="50" cy="50" r="5" fill="%23ea580c" opacity="0.9"/></svg>');
    background-size: cover;
    filter: brightness(97%) contrast(95%);
    transition: transform 0.4s ease;
}

.cahsb-sidebar-map:hover .map-bg[b-otfcoq3u4u] {
    transform: scale(1.05);
}

/* Custom styles for Orange theme radios & checkboxes */
.cahsb-sidebar-radio input[type="radio"]:checked+.radio-custom[b-otfcoq3u4u] {
    border-color: #ea580c;
    background-color: #ea580c;
}

.cahsb-sidebar-checkbox input[type="checkbox"]:checked+.checkbox-custom[b-otfcoq3u4u] {
    border-color: #ea580c;
    background-color: #ea580c;
}

.checkbox-custom[b-otfcoq3u4u]::after {
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
}

.radio-custom[b-otfcoq3u4u]::after {
    background-color: #ffffff;
}

.radio-text[b-otfcoq3u4u],
.checkbox-text[b-otfcoq3u4u] {
    font-size: 13.5px;
    font-weight: 500;
    color: #475569;
}

/* Settings popover (Language & Currency) */
.cahsb-pop-settings[b-otfcoq3u4u] {
    width: 100%;
    left: 0;
}

@media (min-width: 768px) {
    .cahsb-pop-settings[b-otfcoq3u4u] {
        width: 320px;
        left: auto;
        right: 0;
    }
}

.cahsb-settings-row[b-otfcoq3u4u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px;
}

.cahsb-settings-row+.cahsb-settings-row[b-otfcoq3u4u] {
    border-top: 1px solid #f1f5f9;
}

.cahsb-settings-label[b-otfcoq3u4u] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
}

.cahsb-settings-select[b-otfcoq3u4u] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--cahsb-border);
    font-size: 13.5px;
    font-weight: 550;
    color: var(--cahsb-text-primary);
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.cahsb-settings-select:focus[b-otfcoq3u4u] {
    border-color: var(--cahsb-accent);
}

.cahsb-field-settings[b-otfcoq3u4u] {
    min-width: 180px !important;
}
/* /src/Features/Hotels/Pages/Ca/Components/HotelSearchForm.razor.rz.scp.css */
/* CaHotelSearchBox Stylesheet */

.cahsb-root[b-7b6zh1igav] {
    --cahsb-bg: transparent;
    --cahsb-border: #fed7aa;
    --cahsb-border-focus: #ff6b00;
    --cahsb-text-primary: #1e293b;
    --cahsb-text-secondary: #64748b;
    --cahsb-text-placeholder: #94a3b8;
    --cahsb-accent: #ff6b00;
    --cahsb-accent-light: #fff7ed;
    --cahsb-accent-border: #fed7aa;
    --cahsb-r: 12px;
    --cahsb-field-r: 12px;

    width: 100%;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--cahsb-text-primary);
}

.cahsb-container[b-7b6zh1igav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

@media (min-width: 1024px) {
    .cahsb-container[b-7b6zh1igav] {
        flex-wrap: nowrap;
        gap: 16px;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 0 !important;
    }
}

.cahsb-field[b-7b6zh1igav] {
    position: relative;
    flex: 1;
    min-width: 240px;
    background: #ffffff;
    border: 1px solid var(--cahsb-border) !important;
    border-radius: var(--cahsb-field-r) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .cahsb-field[b-7b6zh1igav] {
        border: 1px solid var(--cahsb-border) !important;
        border-radius: var(--cahsb-field-r) !important;
    }
}

.cahsb-field:not(:last-child)[b-7b6zh1igav] {
    /* Mobile standard borders */
    border: 1px solid var(--cahsb-border) !important;
    border-radius: var(--cahsb-field-r) !important;
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .cahsb-field:not(:last-child)[b-7b6zh1igav] {
        border: 1px solid var(--cahsb-border) !important;
        border-radius: var(--cahsb-field-r) !important;
        margin-bottom: 0;
    }
}

.cahsb-field.is-open[b-7b6zh1igav] {
    border-color: #ff6b00 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important;
    z-index: 50 !important;
    overflow: visible !important;
}

.cahsb-field:hover[b-7b6zh1igav] {
    background-color: var(--cahsb-accent-light) !important;
}

@media (min-width: 1024px) {
    .cahsb-field.is-open[b-7b6zh1igav] {
        box-shadow: none;
        background: var(--cahsb-accent-light);
    }
}

/* Date input group */
.cahsb-date-group[b-7b6zh1igav] {
    position: relative;
    flex: 1 !important;
    min-width: 270px !important;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cahsb-border) !important;
    border-radius: var(--cahsb-field-r) !important;
    margin-bottom: 0;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

@media (min-width: 1024px) {
    .cahsb-date-group[b-7b6zh1igav] {
        border: 1px solid var(--cahsb-border) !important;
        border-radius: var(--cahsb-field-r) !important;
        margin-bottom: 0;
    }
}

.cahsb-date-group:hover[b-7b6zh1igav] {
    background-color: var(--cahsb-accent-light) !important;
}

.cahsb-date-group:has(.dp-open)[b-7b6zh1igav] {
    border-color: #ff6b00 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important;
}

@media (min-width: 1024px) {
    .cahsb-date-group:has(.dp-open)[b-7b6zh1igav] {
        box-shadow: none;
        background: var(--cahsb-accent-light);
    }
}

/* Triggers & inputs */
.cahsb-trigger[b-7b6zh1igav] {
    width: 100%;
    min-height: 48px !important;
    padding: 0 16px !important;
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer;
    text-align: left;
    outline: none;
    border-radius: var(--cahsb-field-r);
}

.cahsb-icon[b-7b6zh1igav] {
    width: 20px !important;
    height: 20px !important;
    color: var(--cahsb-accent) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cahsb-icon svg[b-7b6zh1igav] {
    width: 100%;
    height: 100%;
}

.cahsb-meta[b-7b6zh1igav] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.cahsb-lbl[b-7b6zh1igav] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.cahsb-val[b-7b6zh1igav] {
    font-size: 14px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cahsb-val.is-placeholder[b-7b6zh1igav] {
    color: var(--cahsb-text-placeholder);
    font-weight: 400;
}

.cahsb-input[b-7b6zh1igav] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
    padding: 0;
    line-height: 1.2;
}

.cahsb-input[b-7b6zh1igav]::placeholder {
    color: var(--cahsb-text-placeholder);
    font-weight: 400;
}

.cahsb-caret[b-7b6zh1igav] {
    display: none !important;
}

.cahsb-clear-btn[b-7b6zh1igav] {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f1f5f9;
    color: var(--cahsb-text-secondary);
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 10;
}

.cahsb-clear-btn:hover[b-7b6zh1igav] {
    background: #fee2e2;
    color: #ef4444;
}

.cahsb-clear-btn svg[b-7b6zh1igav] {
    width: 12px;
    height: 12px;
}

/* Nights circle in the middle */
.cahsb-nights-badge[b-7b6zh1igav] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}

.cahsb-nights-circle[b-7b6zh1igav] {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 1px solid var(--cahsb-accent-border);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.12);
    cursor: default;
    transition: transform 0.2s, background-color 0.2s;
    line-height: 1.15;
}

.cahsb-nights-circle:hover[b-7b6zh1igav] {
    transform: scale(1.08);
    background: var(--cahsb-accent-light);
}

.cahsb-nights-num[b-7b6zh1igav] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cahsb-accent);
}

.cahsb-nights-text[b-7b6zh1igav] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
    text-transform: lowercase;
}

/* Popover dropdowns */
.cahsb-overlay[b-7b6zh1igav] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.cahsb-dropdown[b-7b6zh1igav] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    background: #ffffff;
    border: 1px solid var(--cahsb-border);
    border-radius: var(--cahsb-field-r);
    box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.15), 0 5px 15px -3px rgba(15, 23, 42, 0.05);
    padding: 16px;
    animation: cahsb-pop-in-b-7b6zh1igav 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 480px;
    overflow-y: auto;
}

@keyframes cahsb-pop-in-b-7b6zh1igav {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cahsb-pop-city[b-7b6zh1igav] {
    width: 100%;
    min-width: 320px;
}

@media (min-width: 768px) {
    .cahsb-pop-city[b-7b6zh1igav] {
        width: 400px;
    }
}

.cahsb-pop-hd p[b-7b6zh1igav] {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cahsb-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cahsb-city-item[b-7b6zh1igav] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.cahsb-city-item:hover[b-7b6zh1igav] {
    background: #fff7ed;
}

.cahsb-city-icon-wrap[b-7b6zh1igav] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cahsb-city-icon-wrap.custom-search[b-7b6zh1igav] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.cahsb-city-badge[b-7b6zh1igav] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid #fed7aa;
}

.cahsb-city-badge.is-city[b-7b6zh1igav] {
    background: #fff7ed;
    color: #ff6b00;
}

.cahsb-city-badge.is-hotel[b-7b6zh1igav] {
    background: #fff7ed;
    color: #ff6b00;
}

.cahsb-city-info[b-7b6zh1igav] {
    min-width: 0;
    flex: 1;
}

.cahsb-city-info p[b-7b6zh1igav] {
    margin: 0;
}

.cahsb-city-name[b-7b6zh1igav] {
    font-size: 14px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
}

.cahsb-city-name.custom-highlight[b-7b6zh1igav] {
    color: var(--cahsb-accent);
}

.cahsb-city-region[b-7b6zh1igav] {
    font-size: 12px;
    color: var(--cahsb-text-secondary);
    margin-top: 2px;
}

.cahsb-city-count[b-7b6zh1igav] {
    font-size: 11px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}

.cahsb-city-empty[b-7b6zh1igav] {
    text-align: center;
    color: var(--cahsb-text-secondary);
    font-size: 13.5px;
    padding: 20px 0;
}

.cahsb-city-custom[b-7b6zh1igav] {
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
    padding-top: 8px;
}

/* Guests & Rooms popover */
.cahsb-pop-guests[b-7b6zh1igav] {
    width: 100%;
    left: 0;
}

@media (min-width: 768px) {
    .cahsb-pop-guests[b-7b6zh1igav] {
        width: 360px;
        left: auto;
        right: 0;
    }
}

.cahsb-stepper-row[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
}

.cahsb-stepper-row+.cahsb-stepper-row[b-7b6zh1igav] {
    border-top: 1px solid #f1f5f9;
}

.cahsb-stepper-info[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.cahsb-stepper-icon[b-7b6zh1igav] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cahsb-accent-light);
    color: var(--cahsb-accent);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.cahsb-stepper-icon svg[b-7b6zh1igav] {
    width: 18px;
    height: 18px;
}

.cahsb-stepper-text[b-7b6zh1igav] {
    min-width: 0;
}

.cahsb-stepper-text p[b-7b6zh1igav] {
    margin: 0;
}

.cahsb-stepper-name[b-7b6zh1igav] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
}

.cahsb-stepper-desc[b-7b6zh1igav] {
    font-size: 11.5px;
    color: var(--cahsb-text-secondary);
    margin-top: 2px;
}

.cahsb-stepper-ctrl[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.cahsb-step-btn[b-7b6zh1igav] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--cahsb-accent-border);
    background: #ffffff;
    color: var(--cahsb-accent);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s;
}

.cahsb-step-btn:hover:not(:disabled)[b-7b6zh1igav] {
    background: var(--cahsb-accent);
    color: #ffffff;
    border-color: var(--cahsb-accent);
}

.cahsb-step-btn:disabled[b-7b6zh1igav] {
    border-color: #e2e8f0;
    color: var(--cahsb-text-placeholder);
    cursor: not-allowed;
    opacity: 0.6;
}

.cahsb-step-btn svg[b-7b6zh1igav] {
    width: 14px;
    height: 14px;
}

.cahsb-step-val[b-7b6zh1igav] {
    width: 24px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--cahsb-text-primary);
}

/* Children details nested container */
.cahsb-children-container[b-7b6zh1igav] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.cahsb-note-block[b-7b6zh1igav] {
    background: var(--cahsb-accent-light);
    border-left: 3px solid var(--cahsb-accent);
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
}

.cahsb-note-text[b-7b6zh1igav] {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--cahsb-accent);
    margin: 0;
}

.cahsb-child-ages-grid[b-7b6zh1igav] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cahsb-child-age-row[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cahsb-child-label[b-7b6zh1igav] {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--cahsb-text-primary);
}

.cahsb-select-wrapper[b-7b6zh1igav] {
    position: relative;
    width: 120px;
}

.cahsb-select-age[b-7b6zh1igav] {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--cahsb-accent-border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 500;
    color: var(--cahsb-text-primary);
    cursor: pointer;
    appearance: none;
    outline: none;
    transition: border-color 0.15s;
}

.cahsb-select-age:focus[b-7b6zh1igav] {
    border-color: var(--cahsb-border-focus);
}

.cahsb-select-caret[b-7b6zh1igav] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--cahsb-text-secondary);
    pointer-events: none;
}

/* Submit button */
.cahsb-submit-btn[b-7b6zh1igav] {
    flex-shrink: 0;
    height: 60px;
    padding: 0 32px;
    border-radius: var(--cahsb-field-r);
    border: 0;
    background: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 107, 0, 0.25);
    transition: transform 0.1s, opacity 0.2s;
    width: 100%;
}

@media (min-width: 1024px) {
    .cahsb-submit-btn[b-7b6zh1igav] {
        width: auto;
    }
}

.cahsb-submit-btn:hover[b-7b6zh1igav] {
    background: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    opacity: 0.95;
}

.cahsb-submit-btn:active[b-7b6zh1igav] {
    transform: scale(0.98);
}

.cahsb-submit-icon[b-7b6zh1igav] {
    width: 18px;
    height: 18px;
}

/* Bottom row for filters */
.cahsb-bottom-row[b-7b6zh1igav] {
    margin-top: 14px;
    display: flex;
    align-items: center;
}

.cahsb-checkbox-label[b-7b6zh1igav] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.cahsb-checkbox-input[b-7b6zh1igav] {
    display: none;
}

.cahsb-checkbox-custom[b-7b6zh1igav] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--cahsb-accent-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: all 0.15s;
}

.cahsb-checkbox-input:checked+.cahsb-checkbox-custom[b-7b6zh1igav] {
    background: var(--cahsb-accent);
    border-color: var(--cahsb-accent);
}

.cahsb-check-icon[b-7b6zh1igav] {
    width: 14px;
    height: 14px;
    color: #ffffff;
}

.cahsb-checkbox-text[b-7b6zh1igav] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cahsb-text-secondary);
}

.cahsb-checkbox-input:checked~.cahsb-checkbox-text[b-7b6zh1igav] {
    color: var(--cahsb-text-primary);
}

/* Date picker customization override */
[b-7b6zh1igav] .nm-datepicker .range-trigger {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 !important;
}

[b-7b6zh1igav] .nm-datepicker .date-field {
    min-height: 48px !important;
    padding: 0 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
}

[b-7b6zh1igav] .nm-datepicker .date-field .dp-label {
    display: none !important;
}

[b-7b6zh1igav] .nm-datepicker .date-field .dp-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cahsb-text-primary) !important;
}

[b-7b6zh1igav] .nm-datepicker .dp-field-icon {
    color: #ff6b00 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

[b-7b6zh1igav] .nm-datepicker .dp-field-icon svg {
    width: 20px !important;
    height: 20px !important;
}

/* ==================== 1. Top Steps Progress Bar ==================== */
.cahsb-steps[b-7b6zh1igav] {
    background-color: #fcfcfd;
    border-bottom: 1px solid #e5e7eb;
}

/* ==================== Outer Search Wrapper Overrides ==================== */
.cahsb-search-wrap[b-7b6zh1igav] {
    background-color: #f3f8fc !important;
    /* Soft blue-gray background in screenshot */
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 28px !important;
}

/* ==================== 2. Orange Search Submit Button ==================== */
.cahsb-submit-btn-orange[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--cahsb-field-r);
    border: none;
    background: #ff6b00;
    /* Orange branding */
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
    transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.cahsb-submit-btn-orange:hover[b-7b6zh1igav] {
    background: #e85f00;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}

.cahsb-submit-btn-orange:active[b-7b6zh1igav] {
    transform: scale(0.95);
}

/* ==================== 3. Date Rates Slider ==================== */
.cahsb-date-slider[b-7b6zh1igav] {
    background-color: #ffffff;
}

.slider-nav-btn[b-7b6zh1igav] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.slider-nav-btn:hover[b-7b6zh1igav] {
    background: #f8fafc;
    color: var(--cahsb-accent);
    border-color: var(--cahsb-accent-border);
}

.slider-day[b-7b6zh1igav] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.2s ease;
}

.slider-day:hover[b-7b6zh1igav] {
    border-color: var(--cahsb-accent-border);
    background-color: var(--cahsb-accent-light);
}

.slider-day.is-active[b-7b6zh1igav] {
    background-color: #ffffff;
    border: 2px solid #ff6b00;
    /* Orange border for selected day */
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.15);
}

.slider-day.is-active .day-lbl[b-7b6zh1igav] {
    color: #ff6b00;
    font-weight: 750 !important;
}

.slider-day.is-active .day-price[b-7b6zh1igav] {
    color: #ff6b00;
}

.slider-day .day-lbl[b-7b6zh1igav] {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.slider-day .day-price[b-7b6zh1igav] {
    font-size: 11px;
    font-weight: 700;
    color: #ff6b00;
    /* Price text orange as in project format */
}

/* ==================== 4. Hotel Cards Layout ==================== */
.cahsb-hotel-card[b-7b6zh1igav] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cahsb-hotel-card:hover[b-7b6zh1igav] {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -3px rgba(0, 0, 0, 0.04);
}

.cahsb-card-banner[b-7b6zh1igav] {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.cahsb-card-media[b-7b6zh1igav] {
    width: 100%;
}

.cahsb-card-cover[b-7b6zh1igav] {
    width: 100%;
    height: 180px;
}

.cahsb-card-cover img[b-7b6zh1igav] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cahsb-card-thumbs[b-7b6zh1igav] {
    width: 100%;
}

@media (min-width: 640px) {
    .cahsb-card-media[b-7b6zh1igav] {
        width: 280px;
    }

    .cahsb-card-cover[b-7b6zh1igav] {
        width: 280px;
        height: 180px;
    }

    .cahsb-card-thumbs[b-7b6zh1igav] {
        width: 280px;
    }

    .thumb-img[b-7b6zh1igav] {
        height: 52px !important;
    }
}

.thumb-img[b-7b6zh1igav] {
    height: 38px;
    position: relative;
    cursor: pointer;
}

.thumb-img img[b-7b6zh1igav] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-img.active[b-7b6zh1igav] {
    border-color: var(--cahsb-accent);
}

.thumb-img.more-overlay[b-7b6zh1igav] {
    position: relative;
}

.thumb-img.more-overlay[b-7b6zh1igav]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.thumb-img.more-overlay span[b-7b6zh1igav] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}

.cahsb-tag-badge[b-7b6zh1igav] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.amenity-chip[b-7b6zh1igav] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.amenity-chip.is-active[b-7b6zh1igav] {
    background-color: rgba(254, 215, 170, 0.08);
    /* light orange tint */
    border: 1.2px solid rgba(253, 186, 116, 0.6);
    /* border-orange-300 */
    color: #ff6b00;
    /* orange-600 */
}

.amenity-chip.is-active:hover[b-7b6zh1igav] {
    background-color: rgba(254, 215, 170, 0.2);
    border-color: rgba(249, 115, 22, 0.7);
}

.amenity-chip.is-dimmed[b-7b6zh1igav] {
    background-color: rgba(244, 244, 245, 0.4);
    /* light gray */
    border: 1.2px solid rgba(228, 228, 231, 0.5);
    /* border-gray-200 */
    color: #a1a1aa;
    /* gray-400 */
    opacity: 0.5;
}

.amenity-chip.is-dimmed:hover[b-7b6zh1igav] {
    background-color: rgba(244, 244, 245, 0.8);
    opacity: 0.7;
}


/* Right Section Price & Review */
.
/* ==================== 5. Sidebar Styles ==================== */
.cahsb-sidebar-map[b-7b6zh1igav] {
    height: 110px;
    background-color: #e2e8f0;
    position: relative;
}

.map-bg[b-7b6zh1igav] {
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f1f5f9"/><path d="M10 0v100M30 0v100M50 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 50h100M0 70h100M0 90h100" stroke="%23cbd5e1" stroke-width="0.5"/><circle cx="50" cy="50" r="4" fill="%23ff6b00" opacity="0.8"/></svg>');
    background-size: cover;
    filter: grayscale(20%) contrast(90%);
}

.cahsb-sidebar-card[b-7b6zh1igav] {
    background-color: #ffffff;
}

/* Custom Radios in Sidebar */
.cahsb-sidebar-radio[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    padding: 4px 0;
}

.cahsb-sidebar-radio input[type="radio"][b-7b6zh1igav] {
    display: none;
}

.radio-custom[b-7b6zh1igav] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.cahsb-sidebar-radio input[type="radio"]:checked+.radio-custom[b-7b6zh1igav] {
    border-color: #ff6b00;
    background-color: #ff6b00;
}

.cahsb-sidebar-radio input[type="radio"]:checked+.radio-custom[b-7b6zh1igav]::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-text[b-7b6zh1igav] {
    user-select: none;
}

/* Custom Checkboxes in Sidebar */
.cahsb-sidebar-checkbox[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    padding: 4px 0;
}

.cahsb-sidebar-checkbox input[type="checkbox"][b-7b6zh1igav] {
    display: none;
}

.checkbox-custom[b-7b6zh1igav] {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    transition: all 0.15s ease;
}

.cahsb-sidebar-checkbox input[type="checkbox"]:checked+.checkbox-custom[b-7b6zh1igav] {
    border-color: #ff6b00;
    background-color: #ff6b00;
}

.cahsb-sidebar-checkbox input[type="checkbox"]:checked+.checkbox-custom[b-7b6zh1igav]::after {
    content: "✓";
    position: absolute;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
}

.checkbox-text[b-7b6zh1igav] {
    user-select: none;
}

/* ==================== Datepicker Nights Inline Middle Section ==================== */
.cahsb-datepicker-nights[b-7b6zh1igav] {
    border-left: 1px solid var(--cahsb-border) !important;
    border-right: 1px solid var(--cahsb-border) !important;
    height: 48px !important;
    background-color: #ffffff;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
}

/* ==================== First Load / Large Search Layout ==================== */
.cahsb-page-root[b-7b6zh1igav] {
    padding-top: 20px !important;
}

.cahsb-first-load[b-7b6zh1igav] {
    background-color: #f8fafc !important;
    /* Premium light slate background */
}

.cahsb-large-container[b-7b6zh1igav] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: 24px;
}

.cahsb-large-card[b-7b6zh1igav] {
    background: #ffffff;
    border: 1px solid #fed7aa !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -15px rgba(234, 88, 12, 0.08) !important;
}

.cahsb-large-field[b-7b6zh1igav] {
    position: relative;
    border-bottom: 2px solid #fed7aa !important;
    transition: border-color 0.2s ease;
    padding-bottom: 6px;
}

.cahsb-large-field:hover[b-7b6zh1igav],
.cahsb-large-field.is-open[b-7b6zh1igav],
.cahsb-large-field:focus-within[b-7b6zh1igav] {
    border-bottom-color: #ff6b00 !important;
    border-bottom-width: 2px !important;
}

.cahsb-large-field.is-open[b-7b6zh1igav] {
    z-index: 50 !important;
}

.cahsb-large-trigger[b-7b6zh1igav] {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
}

.cahsb-large-icon[b-7b6zh1igav] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cahsb-large-val.is-placeholder[b-7b6zh1igav] {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.cahsb-large-input[b-7b6zh1igav] {
    width: 100%;
    background: transparent;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    padding: 0;
}

.cahsb-large-input:focus[b-7b6zh1igav] {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Underline Date Picker styling inside large search card */
.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker {
    margin-bottom: 0 !important;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .range-trigger {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    min-height: auto !important;
    padding: 0 !important;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: end !important;
    align-items: end !important;
    height: auto !important;
    column-gap: 12px;
    border-bottom: 2px solid #fed7aa !important;
    padding-bottom: 6px !important;
    background: transparent !important;
    flex: 1 !important;
    transition: border-color 0.2s ease;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.cahsb-large-field label[b-7b6zh1igav] {
    display: block;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
}

.cahsb-large-val[b-7b6zh1igav] {
    display: block;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field:hover,
.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field:has(.dp-open),
.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field:focus-within {
    border-bottom-color: #ff6b00 !important;
    border-bottom-width: 2px !important;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field .dp-field-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    margin-right: 0 !important;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field .dp-label {
    display: block !important;
    grid-row: 1;
    grid-column: 2;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    text-align: left;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field .dp-value {
    grid-row: 2;
    grid-column: 2;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .date-field .dp-value.is-placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.cahsb-large-datepicker-wrap[b-7b6zh1igav]  .nm-datepicker .cahsb-datepicker-nights-large {
    align-self: center;
    padding: 0 8px;
    z-index: 10;
}

/* Promotions styling */
.cahsb-promo-card[b-7b6zh1igav] {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    background: #ffffff;
}

.cahsb-promo-card:hover[b-7b6zh1igav] {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 8px -5px rgba(0, 0, 0, 0.04);
}


/* Validation error styles */
.cahsb-field.has-error[b-7b6zh1igav],
.cahsb-date-group.has-error[b-7b6zh1igav] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.cahsb-large-field.has-error[b-7b6zh1igav],
.cahsb-large-field.has-error:hover[b-7b6zh1igav],
.cahsb-large-field.has-error.is-open[b-7b6zh1igav] {
    border-bottom-color: #ef4444 !important;
}

.cahsb-large-datepicker-wrap.has-error[b-7b6zh1igav]  .nm-datepicker .date-field,
.cahsb-large-datepicker-wrap.has-error[b-7b6zh1igav]  .nm-datepicker .date-field:hover {
    border-bottom-color: #ef4444 !important;
}

/* Sidebar redesign animations & transitions */
.animate-fade-in[b-7b6zh1igav] {
    animation: fadeIn-b-7b6zh1igav 0.25s ease-out forwards;
}

@keyframes fadeIn-b-7b6zh1igav {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-hover-spin:hover[b-7b6zh1igav] {
    animation: spin-b-7b6zh1igav 0.8s ease-in-out;
}

@keyframes spin-b-7b6zh1igav {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Redesigned Map Button Card */
.cahsb-sidebar-map[b-7b6zh1igav] {
    height: 110px;
    background-color: #f1f5f9;
}

.cahsb-sidebar-map .map-bg[b-7b6zh1igav] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f8fafc"/><path d="M10 0v100M30 0v100M50 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 50h100M0 70h100M0 90h100" stroke="%23e2e8f0" stroke-width="0.6"/><circle cx="50" cy="50" r="5" fill="%23ff6b00" opacity="0.9"/></svg>');
    background-size: cover;
    filter: brightness(97%) contrast(95%);
    transition: transform 0.4s ease;
}

.cahsb-sidebar-map:hover .map-bg[b-7b6zh1igav] {
    transform: scale(1.05);
}

/* Custom styles for Orange theme radios & checkboxes */
.cahsb-sidebar-radio input[type="radio"]:checked+.radio-custom[b-7b6zh1igav] {
    border-color: #ff6b00;
    background-color: #ff6b00;
}

.cahsb-sidebar-checkbox input[type="checkbox"]:checked+.checkbox-custom[b-7b6zh1igav] {
    border-color: #ff6b00;
    background-color: #ff6b00;
}

.checkbox-custom[b-7b6zh1igav]::after {
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
}

.radio-custom[b-7b6zh1igav]::after {
    background-color: #ffffff;
}

.radio-text[b-7b6zh1igav],
.checkbox-text[b-7b6zh1igav] {
    font-size: 13.5px;
    font-weight: 500;
    color: #475569;
}

/* Settings popover (Language & Currency) */
.cahsb-pop-settings[b-7b6zh1igav] {
    width: 100%;
    left: 0;
}

@media (min-width: 768px) {
    .cahsb-pop-settings[b-7b6zh1igav] {
        width: 320px;
        left: auto;
        right: 0;
    }
}

.cahsb-settings-row[b-7b6zh1igav] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px;
}

.cahsb-settings-row+.cahsb-settings-row[b-7b6zh1igav] {
    border-top: 1px solid #f1f5f9;
}

.cahsb-settings-label[b-7b6zh1igav] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cahsb-text-secondary);
}

.cahsb-settings-select[b-7b6zh1igav] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--cahsb-border);
    font-size: 13.5px;
    font-weight: 550;
    color: var(--cahsb-text-primary);
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.cahsb-settings-select:focus[b-7b6zh1igav] {
    border-color: var(--cahsb-accent);
}

.cahsb-field-settings[b-7b6zh1igav] {
    min-width: 180px !important;
}
/* /src/Features/Hotels/Pages/Ca/Components/HotelStepBar.razor.rz.scp.css */
/* Stepper */
.cagi-stepper-bar[b-ud3nem6tly] { background:var(--c-surface, #ffffff); border-bottom:1px solid var(--c-border, #e2e8f0); position:relative; }
.cagi-stepper-inner[b-ud3nem6tly] {
    max-width:960px; margin:0 auto;
    padding:13px 20px;
    display:flex; align-items:center; justify-content:center; gap:0;
}
.cagi-step-item[b-ud3nem6tly] { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.cagi-step-connector[b-ud3nem6tly] {
    height:2px; width:44px; background:var(--c-border, #e2e8f0);
    border-radius:2px; margin:0 6px; transition:background .3s;
}
.cagi-step-connector.done[b-ud3nem6tly] { background:var(--c-brand-grad, linear-gradient(135deg, #ff6b00 0%, #ff8c33 55%, #ffaa66 100%)); }

.cagi-step-circle[b-ud3nem6tly] {
    width:28px; height:28px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700;
    border:2px solid var(--c-border-2, #cbd5e1); background:var(--c-surface-2, #f8fafc);
    color:var(--c-ink-3, #64748b); flex-shrink:0; transition:all .22s;
}
.cagi-step-circle.active[b-ud3nem6tly] {
    background:var(--c-brand-grad, linear-gradient(135deg, #ff6b00 0%, #ff8c33 55%, #ffaa66 100%)); border-color:transparent; color:#fff;
    box-shadow:0 0 0 4px rgba(255,107,0,.18);
}
.cagi-step-circle.done[b-ud3nem6tly] { background:var(--c-ok, #16a34a); border-color:transparent; color:#fff; }

.cagi-step-label[b-ud3nem6tly] { font-size:11.5px; font-weight:500; color:var(--c-ink-4, #94a3b8); display:none; white-space:nowrap; }
.cagi-step-label.active[b-ud3nem6tly] { color:var(--c-ink, #0f172a); font-weight:600; }
.cagi-step-label.done[b-ud3nem6tly]   { color:var(--c-ok, #16a34a); }

/* Change Search Button on Stepper Bar */
.cagi-stepper-btn-wrap[b-ud3nem6tly] {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}
.cagi-change-search-btn[b-ud3nem6tly] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #ff6b00;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.05);
}
.cagi-change-search-btn:hover[b-ud3nem6tly] {
    background: #ffedd5;
    border-color: #fb923c;
    color: #ea580c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.15);
}
.cagi-change-search-btn:active[b-ud3nem6tly] {
    transform: translateY(0);
}
.cagi-change-search-btn.is-open[b-ud3nem6tly] {
    color: #64748b;
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
}
.cagi-change-search-btn.is-open:hover[b-ud3nem6tly] {
    background: #e2e8f0;
    color: #475569;
}
.cagi-change-search-btn .btn-icon[b-ud3nem6tly] {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.cagi-change-search-btn:hover .btn-icon[b-ud3nem6tly] {
    transform: scale(1.1);
}
.cagi-change-search-btn.is-open:hover .btn-icon[b-ud3nem6tly] {
    transform: rotate(90deg);
}

@media (max-width: 640px) {
    .cagi-stepper-btn-wrap[b-ud3nem6tly] {
        right: 12px;
    }
    .cagi-change-search-btn[b-ud3nem6tly] {
        padding: 6px 10px;
        font-size: 12px;
        gap: 5px;
    }
}
@media (max-width: 768px) {
    .cagi-change-search-btn .btn-text[b-ud3nem6tly] {
        display: none;
    }
    .cagi-change-search-btn[b-ud3nem6tly] {
        padding: 7px;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        justify-content: center;
    }
}

@media (min-width:540px) {
    .cagi-step-label[b-ud3nem6tly] { display:inline; }
    .cagi-step-connector[b-ud3nem6tly] { width:58px; }
}
/* /src/Features/Insurance/Pages/Manager/CatalogIndex.razor.rz.scp.css */
/* /manager/services/insurance/catalog — chuẩn nm-list: shell trang + dải thống kê + card bảng.
   Các class .nm-list-* KHÔNG phải global, mỗi trang tự khai — copy khung từ BookingsIndex. */

.nm-list-page[b-u3pdna3uq5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-u3pdna3uq5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-u3pdna3uq5] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-u3pdna3uq5] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 72ch; }
.nm-list-actions[b-u3pdna3uq5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng — 1 hàng ── */
.inscat-stats[b-u3pdna3uq5] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.inscat-stats[b-u3pdna3uq5]::-webkit-scrollbar { display: none; }

.inscat-stat[b-u3pdna3uq5] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.inscat-stat + .inscat-stat[b-u3pdna3uq5] { border-left: 1px solid var(--nm-border); }

.inscat-stat__dot[b-u3pdna3uq5] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.inscat-stat__lbl[b-u3pdna3uq5] { font-size: 12.5px; color: var(--nm-muted); }
.inscat-stat__num[b-u3pdna3uq5] { font-size: 15px; font-weight: 800; color: var(--nm-ink); margin-left: auto; }

/* ── Card bảng ── */
.inscat-card-ico[b-u3pdna3uq5] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50, #fff7ed);
    color: var(--nm-brand-700, #c2410c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.inscat-card-title[b-u3pdna3uq5] { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--nm-ink); }

/* Câu giải thích cách khớp: đẩy sang phải, thu nhỏ — là chú thích chứ không phải cảnh báo,
   để ở NmAlert full-width như trước thì nó át cả bảng. */
.inscat-card-hint[b-u3pdna3uq5] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--nm-muted);
    text-align: right;
    max-width: 58ch;
    line-height: 1.45;
}

.inscat-row-inactive[b-u3pdna3uq5] { opacity: .55; }

/* ── Cell ── */
.inscat-name[b-u3pdna3uq5] { font-weight: 600; color: var(--nm-ink); }
.inscat-name-alt[b-u3pdna3uq5] { font-size: 11.5px; color: var(--nm-muted); margin-top: 1px; }

.inscat-key[b-u3pdna3uq5] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
}

/* Gói chưa học được mã Saladin — nhấn nhẹ bằng màu cảnh báo để lọc mắt được ngay */
.inscat-key--none[b-u3pdna3uq5] {
    font-family: var(--nm-font);
    font-weight: 500;
    color: var(--nm-warn, #b45309);
}

.inscat-key-alt[b-u3pdna3uq5] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--nm-muted);
    margin-top: 1px;
    word-break: break-all;
}

/* Số đếm quyền lợi / link — chip tròn để so sánh nhanh giữa các dòng */
.inscat-count[b-u3pdna3uq5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50, #fff7ed);
    color: var(--nm-brand-700, #c2410c);
    font-size: 12px;
    font-weight: 700;
}

/* 0 quyền lợi / thiếu link = chưa biên xong nội dung → xám đi, đừng khoe như đã đủ */
.inscat-count--muted[b-u3pdna3uq5] {
    background: var(--nm-surface-2, #f5f5f4);
    color: var(--nm-muted);
}

.inscat-actions[b-u3pdna3uq5] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

/* ── Form trong modal ── */
.inscat-form[b-u3pdna3uq5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inscat-sec[b-u3pdna3uq5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inscat-sec-hd[b-u3pdna3uq5] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--nm-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--nm-muted);
}

.inscat-sec-hd i[b-u3pdna3uq5] { font-size: 13px; }

.inscat-sec-hd small[b-u3pdna3uq5] {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 11.5px;
}

/* Panel nội dung của 1 ngôn ngữ */
.inscat-lang[b-u3pdna3uq5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
}

@media (max-width: 720px) {
    .nm-list-page[b-u3pdna3uq5] { padding: 16px 14px 22px; }
    .inscat-card-hint[b-u3pdna3uq5] { display: none; }
}
/* /src/Features/Insurance/Pages/Manager/PoliciesIndex.razor.rz.scp.css */
/* /manager/services/insurance — chuẩn nm-list: shell trang + dải thống kê + toolbar + cell helpers.
   Các class .nm-list-* KHÔNG global, mỗi trang tự khai — khung copy từ BookingsIndex để 2 màn
   quản trị nhìn như một hệ. */

.nm-list-page[b-af4n99h010] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-af4n99h010] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-af4n99h010] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-af4n99h010] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-af4n99h010] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng — 1 hàng, 4 mục đầu bấm được để lọc theo trạng thái ── */
.inspol-stats[b-af4n99h010] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.inspol-stats[b-af4n99h010]::-webkit-scrollbar { display: none; }

.inspol-stat[b-af4n99h010] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.inspol-stat + .inspol-stat[b-af4n99h010] { border-left: 1px solid var(--nm-border); }

.inspol-stat--btn[b-af4n99h010] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.inspol-stats > .inspol-stat--btn:first-child[b-af4n99h010] { border-left: 0; }
.inspol-stat--btn:hover .inspol-stat__lbl[b-af4n99h010] { color: var(--nm-ink); }
/* Tab đang mở — gạch chân mảnh thay vì đổi nền, để dải vẫn đọc như một hàng số liệu */
.inspol-stat--btn.is-on .inspol-stat__lbl[b-af4n99h010] { color: var(--nm-brand-700); font-weight: 700; }
.inspol-stat--btn.is-on .inspol-stat__val[b-af4n99h010] { color: var(--nm-brand-700); }

.inspol-stat__dot[b-af4n99h010] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.inspol-stat__dot--accent[b-af4n99h010] { background: var(--nm-brand-500); }
.inspol-stat__dot--good[b-af4n99h010]   { background: var(--nm-ok); }
.inspol-stat__dot--warn[b-af4n99h010]   { background: var(--nm-warn); }
.inspol-stat__dot--bad[b-af4n99h010]    { background: var(--nm-bad); }

.inspol-stat__lbl[b-af4n99h010] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.inspol-stat__val[b-af4n99h010] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* 2 mục tiền: số dài hơn nên cỡ chữ nhỏ lại, không có chấm màu (không lọc được) */
.inspol-stat--money .inspol-stat__val[b-af4n99h010] { font-size: 13px; font-weight: 700; }

/* ── Toolbar ── */
.nm-list-toolbar[b-af4n99h010] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-af4n99h010] { width: 320px; max-width: 100%; }
.tb-select[b-af4n99h010] { min-width: 130px; }
.tb-select--date[b-af4n99h010] { min-width: 150px; }
.tb-select--sort[b-af4n99h010] { min-width: 160px; }
.tb-filters[b-af4n99h010] { display: contents; }
[b-af4n99h010] .tb-clear { margin-left: auto; }

.tb-daterange[b-af4n99h010] { display: inline-flex; align-items: center; gap: 6px; }
.tb-daterange__sep[b-af4n99h010] { color: var(--nm-muted); flex-shrink: 0; }
.tb-daterange[b-af4n99h010]  .nm-dateinput { width: 142px; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-af4n99h010] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-af4n99h010] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Chip trạng thái ── */
.tb-status[b-af4n99h010] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-af4n99h010] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

.inspol-active-tags[b-af4n99h010] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* ── Cell ── */
.cell-2line[b-af4n99h010] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-af4n99h010] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}
.cell-2line__sub[b-af4n99h010] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}
.cell-muted[b-af4n99h010] { color: var(--nm-muted); }
.cell-date[b-af4n99h010] { font-variant-numeric: tabular-nums; }
.cell-mono[b-af4n99h010] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; }

.inspol-code[b-af4n99h010] { display: inline-flex; align-items: center; gap: 6px; }
.nm-code-pill[b-af4n99h010] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
}
a.nm-code-pill:hover[b-af4n99h010] { background: var(--nm-brand-100, var(--nm-brand-50)); text-decoration: underline; }

.inspol-booking-link[b-af4n99h010] { color: var(--nm-muted); font-size: 11px; text-decoration: none; line-height: 1; }
.inspol-booking-link:hover[b-af4n99h010] { color: var(--nm-brand-600, var(--nm-brand-500)); }

.inspol-fee[b-af4n99h010] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cell-amount[b-af4n99h010] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* Đã cập nhật giá theo lịch bay mới — nhãn nhỏ, không phải lỗi nên dùng tông info */
.inspol-repriced[b-af4n99h010] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-info-50, #eff6ff);
    color: var(--nm-info);
    cursor: help;
}

.inspol-status[b-af4n99h010] { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.inspol-fail[b-af4n99h010] {
    font-size: 10.5px;
    color: var(--nm-bad);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

/* Hàng FAILED — viền trái đỏ mảnh, đủ để quét mắt mà không nhuộm cả bảng */
[b-af4n99h010] .inspol-row-bad .nm-grid__td:first-child { box-shadow: inset 2px 0 0 var(--nm-bad); }

.nm-row-actions[b-af4n99h010] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer ── */
.inspol-foot[b-af4n99h010] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.inspol-total[b-af4n99h010] { font-size: 12.5px; color: var(--nm-muted); }
.inspol-total strong[b-af4n99h010] { color: var(--nm-ink); font-weight: 700; }

@media (max-width: 640px) {
    .nm-list-page[b-af4n99h010] { padding: 16px 14px 22px; }
    .tb-search[b-af4n99h010] { flex: 1; width: auto; }
    [b-af4n99h010] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-af4n99h010] { display: none; }
    .tb-filters.is-open[b-af4n99h010] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-af4n99h010] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-af4n99h010]  .nm-select-wrap,
    .tb-select[b-af4n99h010]  .nm-select { width: 100%; }
    .tb-filters.is-open .tb-daterange[b-af4n99h010] { flex: 1 1 100%; }
    .tb-daterange[b-af4n99h010]  .nm-dateinput-wrap { flex: 1; min-width: 0; }
    .tb-daterange[b-af4n99h010]  .nm-dateinput { width: 100%; }

    .tb-status[b-af4n99h010] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tb-status[b-af4n99h010]::-webkit-scrollbar { display: none; }
    .tb-status[b-af4n99h010]  .nm-chip { flex-shrink: 0; }
}
/* /src/Features/Insurance/Pages/Manager/PolicyDetail.razor.rz.scp.css */
/* /manager/services/insurance/{id} — chuẩn nm token-only: head + shell 2 cột (main | side).
   Cùng khung với /manager/booking/{id} để 2 màn tra cứu đọc như một hệ. */

.nm-list-page[b-czq1pgpsga] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-czq1pgpsga] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-czq1pgpsga] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.inspd-title[b-czq1pgpsga] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-czq1pgpsga] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-czq1pgpsga] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.inspd-crumb[b-czq1pgpsga] { color: var(--nm-muted); text-decoration: none; }
.inspd-crumb:hover[b-czq1pgpsga] { color: var(--nm-brand-700); text-decoration: underline; }
.inspd-crumb-sep[b-czq1pgpsga] { margin: 0 4px; color: var(--nm-muted); }

.nm-code-pill[b-czq1pgpsga] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.inspd-loading[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 12px; }

/* ── Shell 2 cột ── */
.inspd-shell[b-czq1pgpsga] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .inspd-shell[b-czq1pgpsga] { grid-template-columns: minmax(0, 1fr); }
}

.inspd-main[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inspd-side[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Card ── */
[b-czq1pgpsga] .inspd-card .nm-card__head { display: flex; align-items: center; gap: 8px; }
.inspd-card-ico[b-czq1pgpsga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.inspd-card-title[b-czq1pgpsga] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.inspd-card-body[b-czq1pgpsga] { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

.inspd-muted[b-czq1pgpsga] { color: var(--nm-muted); }
.inspd-bad[b-czq1pgpsga] { color: var(--nm-bad); }
.inspd-mono[b-czq1pgpsga] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; }
.inspd-hint[b-czq1pgpsga] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }

/* ── Khối phí (sidebar) ── */
.inspd-fee-row[b-czq1pgpsga] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--nm-muted);
}
.inspd-fee-row b[b-czq1pgpsga] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
}
.inspd-fee-row--total[b-czq1pgpsga] {
    padding-top: 9px;
    margin-top: 2px;
    border-top: 1px solid var(--nm-border);
    font-weight: 700;
    color: var(--nm-ink);
}
.inspd-fee-row--total b[b-czq1pgpsga] { font-size: 15px; color: var(--nm-brand-700); }
.inspd-fee-row--sub b[b-czq1pgpsga] { color: var(--nm-muted); font-weight: 500; }

.inspd-fee-note[b-czq1pgpsga] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px;
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}

/* ── Tài liệu ── */
.inspd-links[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 2px; }
.inspd-link[b-czq1pgpsga] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nm-ink);
    text-decoration: none;
}
.inspd-link i[b-czq1pgpsga] { color: var(--nm-brand-600, var(--nm-brand-500)); font-size: 14px; }
.inspd-link:hover[b-czq1pgpsga] { background: var(--nm-surface-2); color: var(--nm-brand-700); }

/* ── Mã & định danh: nhãn trên, mã mono xuống dòng (GUID quá dài để nằm cùng hàng) ── */
.inspd-id-row[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 1px; }
.inspd-id-row + .inspd-id-row[b-czq1pgpsga] { padding-top: 8px; border-top: 1px dashed var(--nm-border); }
.inspd-id-lbl[b-czq1pgpsga] { font-size: 11px; font-weight: 700; color: var(--nm-muted); text-transform: uppercase; letter-spacing: .03em; }
.inspd-id-val[b-czq1pgpsga] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink);
    word-break: break-all;
    user-select: all;
}

/* ── Tab nhật ký ── */
.inspd-tabs[b-czq1pgpsga] { padding: 4px 16px 14px; }
.inspd-tab-body[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.inspd-tab-head[b-czq1pgpsga] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inspd-tab-hint[b-czq1pgpsga] { margin: 0; flex: 1 1 240px; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }
.inspd-expand[b-czq1pgpsga] { font-size: 11.5px; color: var(--nm-brand-700); text-decoration: none; white-space: nowrap; }
.inspd-expand:hover[b-czq1pgpsga] { text-decoration: underline; }

.inspd-2line[b-czq1pgpsga] { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.inspd-2line__main[b-czq1pgpsga] { font-weight: 500; color: var(--nm-ink); }
.inspd-2line__sub[b-czq1pgpsga] { font-size: 10.5px; color: var(--nm-muted); }

/* Lệnh gọi lỗi — viền trái đỏ mảnh */
[b-czq1pgpsga] .inspd-row-bad .nm-grid__td:first-child { box-shadow: inset 2px 0 0 var(--nm-bad); }

.nm-row-actions[b-czq1pgpsga] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Modal JSON ── */

/* Toàn màn hình: JSON của Saladin dài hàng trăm dòng, khổ Lg (820px) không đủ để soi.
   Class truyền qua tham số Class của NmModal KHÔNG mang scope của trang ⇒ phải ::deep từ wrapper.
   Selector 2 cấp nên thắng .nm-modal-panel--lg mà không cần !important. */
.inspd-modal-host[b-czq1pgpsga]  .inspd-modal-full {
    max-width: none;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
}
/* Overlay chừa 7vh phía trên cho modal thường; toàn màn hình thì lấy lại chỗ đó. */
.inspd-modal-host[b-czq1pgpsga]  .nm-modal-overlay:has(.inspd-modal-full) { padding: 16px; }

.inspd-modal-title[b-czq1pgpsga] { margin: 0; font-size: 16px; font-weight: 700; color: var(--nm-ink); }
/* Nút phóng to nằm sát tiêu đề, đẩy nút đóng của NmModal về cuối hàng */
.inspd-modal-host[b-czq1pgpsga]  .nm-modal__head > .nm-iconbtn { margin-right: auto; }

.inspd-json[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 10px; }
.inspd-pane[b-czq1pgpsga] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* Flex chứ KHÔNG grid: cột đều nhau làm ô hẹp hơn nội dung, dấu thời gian bị bẻ giữa chừng
   ("13:49:" / "53"). Để từng mục co theo nội dung và tự xuống hàng khi hết chỗ. */
.inspd-json-meta[b-czq1pgpsga] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 10px 12px;
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    font-size: 11.5px;
    color: var(--nm-ink);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    /* anywhere: chỉ bẻ khi một token dài hơn cả dòng (URL), không bẻ chuỗi ngắn */
    overflow-wrap: anywhere;
}
.inspd-json-meta em[b-czq1pgpsga] { font-style: normal; color: var(--nm-muted); font-family: var(--nm-font); }
/* URL luôn chiếm trọn một hàng riêng */
.inspd-json-meta__wide[b-czq1pgpsga] { flex: 1 0 100%; min-width: 0; }

.inspd-json-sec[b-czq1pgpsga] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.inspd-json-sec small[b-czq1pgpsga] { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Nút chép đẩy về cuối hàng nhãn */
.inspd-json-sec[b-czq1pgpsga]  .nm-iconbtn { margin-left: auto; }

.inspd-pre[b-czq1pgpsga] {
    margin: 0;
    padding: 12px;
    max-height: 46vh;
    overflow: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--nm-ink);
    /* JSON đã thụt lề sẵn → GIỮ thụt lề, chỉ cho ngắt dòng khi quá dài.
       break-word (không phải break-all) để không cắt giữa chừng một mã/URL. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 2;
}

/* Request | Response xếp DỌC ở khổ thường (mỗi cột chỉ ~380px thì JSON gãy dòng liên tục),
   chỉ tách 2 cột khi đã phóng to đủ rộng để so sánh. */
.inspd-json-split[b-czq1pgpsga] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.inspd-modal-host[b-czq1pgpsga]  .inspd-modal-full .inspd-json-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Toàn màn hình: khung JSON ăn hết chiều cao còn lại thay vì đóng khung 46vh giữa vùng trống */
.inspd-modal-host[b-czq1pgpsga]  .inspd-modal-full .inspd-pre { max-height: calc(100vh - 290px); }

@media (max-width: 900px) {
    .inspd-modal-host[b-czq1pgpsga]  .inspd-modal-full .inspd-json-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .nm-list-page[b-czq1pgpsga] { padding: 16px 14px 22px; }
    .inspd-tabs[b-czq1pgpsga] { padding: 4px 10px 12px; }
}
/* /src/Features/LuckyDraw/LuckyDrawImageSlot.razor.rz.scp.css */
/* Ô ảnh của khu bốc thăm. Chiều cao KHÔNG phụ thuộc vào việc đã có ảnh hay chưa — khung giữ tỉ lệ
   cố định — nên nhiều ô đứng cạnh nhau luôn thẳng hàng. */
.lds-slot[b-d9w5x05pme] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

/* ── Đầu thẻ: chip số pha · nhãn · nút gỡ ─────────────────────────────────── */
.lds-slot__head[b-d9w5x05pme] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
}

.lds-slot__step[b-d9w5x05pme] {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lds-slot__label[b-d9w5x05pme] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nút gỡ nằm ngay trên đầu thẻ, không phải chữ "Xoá" trôi nổi dưới đáy như bản cũ. */
.lds-slot__remove[b-d9w5x05pme] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--nm-muted);
    border-radius: var(--nm-r-pill);
    font-size: 13px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.lds-slot__remove:hover[b-d9w5x05pme] { background: var(--nm-bad-soft); color: var(--nm-bad); }

/* ── Khung ảnh ────────────────────────────────────────────────────────────── */
.lds-slot__frame[b-d9w5x05pme] {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
    background: var(--nm-surface-2);
}

.lds-slot__img[b-d9w5x05pme] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Class truyền vào NmFileUpload nằm trên gốc CỦA NÓ — không mang scope của tệp này, nên bắt buộc
   phải qua ::deep. Viết thẳng .lds-slot__drop là luật chết. */
[b-d9w5x05pme] .lds-slot__drop {
    position: absolute;
    inset: 0;
    gap: 0;
}

[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__drop {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
}

/* Chữ trong khung phải nhỏ lại: mặc định của NmFileUpload đệm 26px, tràn khỏi khung 16:10. */
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__label { padding: 10px; gap: 2px; }
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__icon { font-size: 22px; margin-bottom: 0; }
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__title { font-size: 12.5px; line-height: 1.35; }

/* Cỡ tệp tối đa đã in ở chú thích dưới thẻ — in lần nữa trong khung chỉ làm chật. */
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__hint { display: none; }

/* Danh sách tệp vừa chọn cũng thừa: ảnh xem trước chính là xác nhận đã tải lên xong. */
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__list { display: none; }

/* Lỗi (quá dung lượng) phải thấy được — dán vào đáy khung thay vì đẩy bố cục giãn ra. */
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__errors {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 8px;
    background: var(--nm-bad-soft);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
[b-d9w5x05pme] .lds-slot__drop .nm-fileupload__error { font-size: 11.5px; }

/* ── Trạng thái đã có ảnh ─────────────────────────────────────────────────── */
/* Vùng thả vẫn phủ kín (kéo thả đè ảnh vẫn chạy) nhưng trong suốt, nhường chỗ cho ảnh. */
.has-image[b-d9w5x05pme]  .lds-slot__drop .nm-fileupload__drop { border-color: transparent; }
.has-image[b-d9w5x05pme]  .lds-slot__drop .nm-fileupload__label { opacity: 0; }
.has-image .lds-slot__frame:hover[b-d9w5x05pme]  .lds-slot__drop .nm-fileupload__drop {
    background: rgb(0 0 0 / .42);
}

/* Lớp phủ "Đổi ảnh" — chỉ hiện khi rê chuột, không chắn ảnh lúc xem. */
.lds-slot__swap[b-d9w5x05pme] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;   /* click phải rơi xuống input tệp bên dưới */
}
.lds-slot__frame:hover .lds-slot__swap[b-d9w5x05pme] { opacity: 1; }

/* ── Chú thích ────────────────────────────────────────────────────────────── */
/* min-height giữ cho thẻ có chú thích 1 dòng và 2 dòng vẫn cao bằng nhau. */
.lds-slot__hint[b-d9w5x05pme] {
    margin: 0;
    min-height: 30px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--nm-muted);
}

.lds-slot__meta[b-d9w5x05pme] { opacity: .85; }

/* Thiết bị cảm ứng không có "rê chuột": luôn hiện nhãn đổi ảnh mờ ở góc. */
@media (hover: none) {
    .lds-slot__swap[b-d9w5x05pme] {
        opacity: 1;
        inset: auto 6px 6px auto;
        padding: 3px 8px;
        border-radius: var(--nm-r-pill);
        background: rgb(0 0 0 / .55);
    }
}
/* /src/Features/LuckyDraw/Pages/Manager/LuckyDrawDetail.razor.rz.scp.css */
/* Bốc thăm may mắn — chi tiết sự kiện.
   Bố cục, control, thẻ số liệu, phân trang, bước nạp tệp… đều là primitive Nm*. File này chỉ giữ
   phần RIÊNG của trang: dải meta ở đầu trang, thẻ giải/nhà tài trợ, ô ảnh nền, bảng ánh xạ cột.
   Token --nm-* only. */

/* ★ Padding của trang do CHÍNH TRANG cấp — ManagerLayout chỉ đặt @Body vào khung, không chừa lề.
   Đây là quy ước chung của mọi màn /manager (xem .nm-list-page ở các trang khác: 22px 28px 28px).
   Thiếu dòng padding này là nội dung dính sát viền khung, đúng lỗi đã gặp. */
.ld-page[b-cn48clzu09] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

@media (max-width: 768px) {
    .ld-page[b-cn48clzu09] { padding: 16px 14px 22px; }
}

/* Dải thông tin dưới tiêu đề: trạng thái · mã · thời gian · địa điểm. */
.ld-headmeta[b-cn48clzu09] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nm-muted);
}

.ld-headmeta i[b-cn48clzu09] { margin-right: 4px; }

/* Nội dung mỗi tab: các thẻ NmCard xếp dọc. */
.ld-panel[b-cn48clzu09] { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }

.ld-cardtitle[b-cn48clzu09] { margin: 0; font-size: 15px; font-weight: 800; color: var(--nm-ink); }

.ld-subsection[b-cn48clzu09] {
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}

.ld-hint[b-cn48clzu09] { margin: 0; font-size: 12px; color: var(--nm-muted); }

/* Thân modal: các trường xếp dọc; cặp/bộ trường nằm ngang do NmFormGrid lo. */
.ld-form[b-cn48clzu09] { display: flex; flex-direction: column; gap: 12px; }
.ld-switches[b-cn48clzu09] { display: flex; flex-direction: column; gap: 10px; }

/* Số suất: công tắc "không giới hạn" đứng trên, ô nhập chỉ hiện khi giải CÓ giới hạn. */
.ld-qty[b-cn48clzu09] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ── Tab Tổng quan: lưới thẻ + thanh lưu dính ────────────────────────────── */
/* Bản cũ xếp cả ba thẻ cấu hình chồng dọc trong .ld-panel ⇒ tab dài gần ba màn hình.
   Hai thẻ ngắn (luật quay · màn chiếu) nay đứng cạnh nhau; thẻ thông tin và thẻ hình ảnh
   vẫn trải hết bề ngang vì ô nhập/ô ảnh cần chỗ. */
/* Số cột đo theo BỀ NGANG CÒN LẠI của khung nội dung, không theo @media bề ngang cửa sổ: cùng một
   màn 1440px, sidebar mở hay thu lại cho ra hai bề ngang khác hẳn nhau. max(420px, 50% - nửa gap)
   chốt trần đúng 2 cột — để auto-fit tự do thì màn siêu rộng đẻ ra cột thứ ba bỏ trống. */
.ld-ovgrid[b-cn48clzu09] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(420px, calc(50% - 7px)), 1fr));
    gap: 14px;
    align-items: start;
}

.ld-ovcell--full[b-cn48clzu09] { grid-column: 1 / -1; }

.ld-imgs[b-cn48clzu09] { display: flex; flex-direction: column; gap: 10px; }
.ld-imgs > .ld-subsection:first-child[b-cn48clzu09] { margin-top: 0; }

/* ── Thanh lưu dính ──────────────────────────────────────────────────────── */
/* DÍNH ĐÁY khung cuộn, không phải nằm cuối trang như bản cũ: sửa một ô ở thẻ đầu mà nút Lưu
   ở đáy trang thì mỗi lần lưu là một vòng cuộn xuống — cuộn lên. Thanh này kiêm luôn việc báo
   "còn thay đổi chưa lưu" (trước đây không có gì cho biết, đóng tab là mất trắng mà không hay).
   sticky ăn theo khung cuộn của ManagerLayout (div.overflow-y-auto), KHÔNG cần thêm gì ở layout. */
.ld-savebar[b-cn48clzu09] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    /* Bóng hắt LÊN — --nm-shadow đổ xuống dưới nên thanh dán đáy trông như bị dán ngược. */
    box-shadow: 0 -6px 20px -12px rgba(16, 24, 40, .18);
}

/* Còn thay đổi chưa lưu → đổi nền sang tông thương hiệu: nhìn lướt cũng thấy, khỏi đọc chữ. */
.ld-savebar.is-dirty[b-cn48clzu09] {
    border-color: var(--nm-brand-300);
    background: var(--nm-brand-50);
}

.ld-savebar__state[b-cn48clzu09] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--nm-ink-2);
}

.ld-savebar__text[b-cn48clzu09] { min-width: 0; }
.ld-savebar__muted[b-cn48clzu09] { color: var(--nm-muted); }
.ld-savebar__ok[b-cn48clzu09] { color: var(--nm-ok); }

.ld-savebar__dot[b-cn48clzu09] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    animation: ld-savebar-pulse-b-cn48clzu09 1.8s ease-in-out infinite;
}

@keyframes ld-savebar-pulse-b-cn48clzu09 {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .ld-savebar__dot[b-cn48clzu09] { animation: none; }
}

/* Gợi ý phím tắt — bỏ hẳn ở màn hẹp: máy cảm ứng không có Ctrl, in ra chỉ tốn chỗ. */
.ld-savebar__hint[b-cn48clzu09] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    padding-left: 10px;
    border-left: 1px solid var(--nm-border-strong);
    color: var(--nm-muted);
    font-size: 12px;
}

.ld-savebar__kbd[b-cn48clzu09] {
    padding: 1px 6px;
    border: 1px solid var(--nm-border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--nm-surface);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-ink-2);
}

.ld-savebar__acts[b-cn48clzu09] { display: flex; align-items: center; gap: 8px; margin-left: auto; }

@media (max-width: 900px) {
    .ld-savebar__hint[b-cn48clzu09] { display: none; }
}

/* Nhãn + control nằm ngang trong thanh công cụ (chọn sheet, chế độ phiếu). */
.ld-inlinefield[b-cn48clzu09] { display: flex; align-items: center; gap: 8px; margin: 0; }
.ld-inlinefield[b-cn48clzu09]  .nm-field__label { margin: 0; white-space: nowrap; }

/* ── Lưới ô ảnh nền / logo ───────────────────────────────────────────────── */
/* Bản thân mỗi ô là <LuckyDrawImageSlot/> và tự lo phần nhìn của nó; ở đây chỉ xếp lưới.
   Bộ .ld-bg* cũ đã GỠ: nó dựng bằng RenderTreeBuilder trong code-behind nên phần tử không mang
   scope-id của tệp .razor ⇒ chưa từng có luật nào ăn (xem chú thích trong LuckyDrawImageSlot). */
.ld-bgs[b-cn48clzu09] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ld-bgs--single[b-cn48clzu09] { grid-template-columns: minmax(210px, 300px); }

/* ── Thẻ giải thưởng ─────────────────────────────────────────────────────── */
.ld-prizes[b-cn48clzu09] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.ld-prize[b-cn48clzu09] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.ld-prize.is-off[b-cn48clzu09] { opacity: .6; }
.ld-prize.is-special[b-cn48clzu09] { border-color: var(--nm-brand-300); box-shadow: 0 0 0 3px var(--nm-brand-100); }

.ld-prize__img[b-cn48clzu09] {
    flex: 0 0 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 24px;
}

.ld-prize__img img[b-cn48clzu09] { width: 100%; height: 100%; object-fit: cover; }
.ld-prize__body[b-cn48clzu09] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ld-prize__title[b-cn48clzu09] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ld-prize__meta[b-cn48clzu09] { font-size: 12px; color: var(--nm-muted); }
.ld-prize__acts[b-cn48clzu09] { display: flex; gap: 4px; }

/* ── Thẻ nhà tài trợ ─────────────────────────────────────────────────────── */
.ld-sponsors[b-cn48clzu09] { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.ld-sponsor[b-cn48clzu09] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.ld-sponsor.is-off[b-cn48clzu09] { opacity: .6; }

/* Số thứ tự hiển thị — nhỏ, nằm ngoài khung logo để không đè lên hình hãng. */
.ld-sponsor__order[b-cn48clzu09] {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    color: var(--nm-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ld-sponsor__logo[b-cn48clzu09] {
    flex: 0 0 88px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--nm-surface-2);
    font-size: 12px;
    color: var(--nm-muted);
    text-align: center;
}

.ld-sponsor__logo img[b-cn48clzu09] { max-width: 100%; max-height: 100%; object-fit: contain; }
.ld-sponsor__body[b-cn48clzu09] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* ── Lô nạp ──────────────────────────────────────────────────────────────── */
.ld-batches[b-cn48clzu09] { display: flex; flex-direction: column; gap: 8px; }

/* Nhiều lô thì xếp lưới — danh sách dọc dài làm thẻ dưới cùng nặng hơn hẳn phần bảng phía trên. */
.ld-batches--grid[b-cn48clzu09] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.ld-batch[b-cn48clzu09] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: 12px;
    background: var(--nm-surface);
}

.ld-batch__icon[b-cn48clzu09] { font-size: 20px; color: var(--nm-ok); }
.ld-batch__main[b-cn48clzu09] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-batch__meta[b-cn48clzu09] { font-size: 12px; color: var(--nm-muted); }

/* ── Lưới ────────────────────────────────────────────────────────────────── */
.ld-name[b-cn48clzu09] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-name__meta[b-cn48clzu09] { font-size: 12px; color: var(--nm-muted); }
.ld-rowacts[b-cn48clzu09] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Số phiếu: chỉ ai có NHIỀU hơn một phiếu mới đáng chú ý — số 1 để mờ cho khỏi nhiễu. */
.ld-weight[b-cn48clzu09] { font-variant-numeric: tabular-nums; color: var(--nm-muted); }
.ld-weight.is-many[b-cn48clzu09] { font-weight: 800; color: var(--nm-brand-700); }

/* Bảng trong thẻ: nhả viền riêng của DataGrid để không thành hai đường 1px cạnh nhau. */
.ld-listcard[b-cn48clzu09]  .nm-card__body { padding: 0; }

.ld-listcard[b-cn48clzu09]  .nm-grid-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ld-toolbar[b-cn48clzu09] { padding: 12px 14px; }

/* Tầng lọc: nền chìm + viền dưới để tách rõ "làm gì" (tầng trên) với "xem gì" (tầng này).
   Gộp cả hai vào một hàng thì 10 control tự xuống dòng lộn xộn theo từng cỡ màn. */
.ld-filterbar[b-cn48clzu09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--nm-surface-2);
    border-top: 1px solid var(--nm-border);
    border-bottom: 1px solid var(--nm-border);
}
.ld-search[b-cn48clzu09] { flex: 1 1 240px; max-width: 340px; }
.ld-batchpick[b-cn48clzu09] { flex: 0 1 220px; min-width: 160px; }
.ld-chips[b-cn48clzu09] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ld-foot[b-cn48clzu09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
    font-size: 13px;
    color: var(--nm-muted);
}
.ld-row-off[b-cn48clzu09] { opacity: .55; }

/* ── Trợ lý nạp Excel ────────────────────────────────────────────────────── */
.ld-import[b-cn48clzu09] { display: flex; flex-direction: column; gap: 14px; }
.ld-preview[b-cn48clzu09] { display: flex; flex-direction: column; gap: 12px; }

.ld-table-wrap[b-cn48clzu09] { overflow-x: auto; border: 1px solid var(--nm-border); border-radius: 12px; }

.ld-table[b-cn48clzu09] { width: 100%; border-collapse: collapse; font-size: 13px; }
.ld-table th[b-cn48clzu09], .ld-table td[b-cn48clzu09] { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--nm-border); }

.ld-table th[b-cn48clzu09] {
    background: var(--nm-surface-2);
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-ink-2);
    white-space: nowrap;
}

.ld-table tbody tr:last-child td[b-cn48clzu09] { border-bottom: 0; }
.ld-table code[b-cn48clzu09] {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--nm-surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ld-num[b-cn48clzu09] { text-align: right; font-variant-numeric: tabular-nums; }
.ld-sample[b-cn48clzu09] { color: var(--nm-muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-row-dup[b-cn48clzu09] { background: var(--nm-warn-soft); }

.ld-skipped[b-cn48clzu09] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--nm-muted);
}

.ld-skipped li[b-cn48clzu09] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-skipped__why[b-cn48clzu09] { color: var(--nm-ink-2); }
.ld-skipped__data[b-cn48clzu09] { opacity: .8; }
/* /src/Features/LuckyDraw/Pages/Manager/LuckyDrawIndex.razor.rz.scp.css */
/* Bốc thăm may mắn — danh sách sự kiện.
   Bố cục và mọi control đều là primitive Nm* (NmPageHeader / NmStatGrid / NmToolbar / NmChip /
   NmBadge / DataGrid). File này chỉ còn phần RIÊNG của trang: màn hướng dẫn lúc chưa có sự kiện,
   ô tên 2 dòng, thanh tiến độ trao giải, dòng "đang diễn ra".
   Token --nm-* only, không hex rời. */

/* ★ Padding của trang do CHÍNH TRANG cấp — ManagerLayout chỉ đặt @Body vào khung, không chừa lề.
   Đây là quy ước chung của mọi màn /manager (xem .nm-list-page ở các trang khác: 22px 28px 28px).
   Thiếu dòng padding này là nội dung dính sát viền khung, đúng lỗi đã gặp. */
.ld-page[b-7p7cycwstn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

@media (max-width: 768px) {
    .ld-page[b-7p7cycwstn] { padding: 16px 14px 22px; }
}

/* ── Màn hướng dẫn khi chưa có sự kiện nào ───────────────────────────────────
   Thay cho dải KPI toàn số 0 + năm chip lọc rỗng: người dùng lần đầu cần biết bắt đầu từ đâu,
   không cần biết "0 sự kiện · 0 người tham gia". */
.ld-onboard[b-7p7cycwstn] { max-width: 860px; margin: 8px auto 0; }

.ld-onboard__head[b-7p7cycwstn] { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

.ld-onboard__icon[b-7p7cycwstn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 18px;
    background: var(--nm-brand-100);
    color: var(--nm-brand-700);
    font-size: 26px;
}

.ld-onboard__title[b-7p7cycwstn] { margin: 0; font-size: 18px; font-weight: 800; }
.ld-onboard__sub[b-7p7cycwstn] { margin: 0; font-size: 14px; color: var(--nm-muted); max-width: 52ch; }

.ld-steps3[b-7p7cycwstn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ld-steps3 li[b-7p7cycwstn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}

.ld-steps3 li div[b-7p7cycwstn] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-steps3 strong[b-7p7cycwstn] { font-size: 14px; font-weight: 700; }
.ld-steps3 span:not(.ld-steps3__no)[b-7p7cycwstn] { font-size: 12px; color: var(--nm-muted); }

.ld-steps3__no[b-7p7cycwstn] {
    flex: 0 0 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nm-brand-500);
    color: #fff; /* chữ trên nền cam đặc — token ink sẽ chìm */
    font-size: 13px;
    font-weight: 800;
}

.ld-onboard__cta[b-7p7cycwstn] { display: flex; justify-content: center; margin-top: 20px; }

/* ── Thẻ danh sách ─────────────────────────────────────────────────────────
   Toolbar + bảng + chân bảng là MỘT khối trong card, nên card bỏ padding thân.
   ★ DataGrid tự mang viền + bo góc + nền riêng (.nm-grid-wrap). Để nguyên thì viền bảng dính sát
   viền card thành hai đường 1px cạnh nhau — phải nhả viền của bảng và để card lo phần khung. */
.ld-listcard[b-7p7cycwstn]  .nm-card__body { padding: 0; }

.ld-listcard[b-7p7cycwstn]  .nm-grid-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ld-toolbar[b-7p7cycwstn] { padding: 12px 14px; border-bottom: 1px solid var(--nm-border); }
.ld-search[b-7p7cycwstn] { flex: 1 1 260px; max-width: 380px; }

.ld-chips[b-7p7cycwstn] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Ô tên sự kiện: tên đậm + dòng phụ mờ (phụ đề, hoặc mã khi không có phụ đề). */
.ld-name[b-7p7cycwstn] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-name__meta[b-7p7cycwstn] { font-size: 12px; color: var(--nm-muted); }
.ld-when[b-7p7cycwstn] { display: flex; flex-direction: column; gap: 2px; }

/* Sự kiện ĐANG DIỄN RA là việc cần làm ngay — nhấn nhẹ bằng vạch trái, không đổi nền cả dòng
   (nền màu làm chữ trong lưới khó đọc và cạnh tranh với badge trạng thái). */
.ld-row-live[b-7p7cycwstn]  td:first-child { box-shadow: inset 3px 0 0 var(--nm-ok); }

/* Tiến độ trao giải — con số đi kèm thanh, đọc được cả khi liếc nhanh. */
.ld-progress[b-7p7cycwstn] { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ld-progress__text[b-7p7cycwstn] { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.ld-progress__track[b-7p7cycwstn] {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--nm-surface-2);
    overflow: hidden;
}

.ld-progress__fill[b-7p7cycwstn] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--nm-brand-500);
}

.ld-rowacts[b-7p7cycwstn] { display: inline-flex; gap: 4px; justify-content: flex-end; }

.ld-foot[b-7p7cycwstn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
    font-size: 13px;
    color: var(--nm-muted);
}

.ld-foot__hint[b-7p7cycwstn] { display: inline-flex; align-items: center; gap: 6px; }

/* Form trong modal: các trường xếp dọc, cặp ngày+địa điểm do NmFormGrid lo. */
.ld-form[b-7p7cycwstn] { display: flex; flex-direction: column; gap: 12px; }
/* /src/Features/LuckyDraw/Pages/Manager/LuckyDrawStage.razor.rz.scp.css */
/* MÀN CHIẾU bốc thăm — toàn màn hình, chiếu lên máy chiếu hội trường.

   NGÔN NGỮ THIẾT KẾ: "lễ sáng" (chủ dự án chốt 18/08/2026: giao diện phải SÁNG, không tông tối).
   Ảnh nền do marketing tải lên vẫn là nhân vật chính; mọi lớp phủ là KÍNH TRẮNG mờ (frosted),
   chữ mực sẫm trên kính; lớp scrim là MÀN SƯƠNG TRẮNG làm ảnh sáng dịu đi thay vì tối đi.
   Điểm nhấn duy nhất được phép rực: KHUNG TÊN (odometer) 4 góc khung phim màu sự kiện, vệt
   sáng quét khi quay; và nút QUAY màu nhấn.

   ★ Vì sao màn này KHÔNG dùng thẳng token nền/chữ của design system như các màn quản trị:
   nền ở đây là ẢNH bất kỳ, chữ phải đọc được trên mọi ảnh. Bảng màu riêng khai báo ngay
   dưới; màu nhấn lấy từ --lds-accent do trang đặt theo ThemeColor của sự kiện.

   ★ Hộp chúc mừng PHẢI render TRONG .lds — biến --lds-* khai báo ở đây, đặt overlay ra
   ngoài là biến không phân giải, màu chết nguyên mảng (bẫy css-tokens-modal-outside-root). */

.lds[b-ipb027hw1u] {
    /* Bảng màu riêng của lớp phủ trên ảnh nền — khai báo một chỗ, không rải hex khắp file. */
    --lds-ink: #1f2937;                          /* chữ mực trên kính trắng */
    --lds-ink-soft: rgba(31, 41, 55, .62);       /* chữ phụ */
    --lds-on-photo: #ffffff;                     /* chữ đặt THẲNG trên ảnh (đổ bóng đậm đi kèm) */
    --lds-glass: rgba(255, 255, 255, .78);       /* kính trắng — panel, thẻ, hộp */
    --lds-glass-strong: rgba(255, 255, 255, .94);/* kính trắng đặc — hộp chúc mừng, thead dính */
    --lds-veil: rgba(31, 41, 55, .06);           /* lớp sẫm mỏng trên kính (hover, viên nang) */
    --lds-veil-strong: rgba(31, 41, 55, .12);
    --lds-line: rgba(31, 41, 55, .14);           /* viền kính */
    --lds-line-strong: rgba(31, 41, 55, .26);
    --lds-shadow: 0 14px 44px rgba(31, 41, 55, .18);
    --lds-special: #f59e0b;                      /* hổ phách giải đặc biệt — cố ý khác màu thương hiệu */
    --lds-special-ink: #b45309;                  /* chữ hổ phách đọc được trên nền trắng */
    --lds-stage-bg: #f7f5f0;                     /* nền kem khi sự kiện chưa đặt ảnh */
    --lds-scrim: #ffffff;                        /* màn sương TRẮNG làm dịu ảnh, độ mờ do BackgroundScrim */

    /* Màu nhấn MẶC ĐỊNH lấy thẳng token thương hiệu. Sự kiện có ThemeColor riêng thì trang
       ghi đè biến này bằng inline style — không hard-code màu cam ở đây. */
    --lds-accent: var(--nm-brand-500);
    /* Bản mờ của màu nhấn cho quầng sáng — color-mix để ăn theo ThemeColor bất kỳ. */
    --lds-accent-glow: color-mix(in srgb, var(--lds-accent) 40%, transparent);
    --lds-accent-faint: color-mix(in srgb, var(--lds-accent) 14%, transparent);
}

.lds-boot[b-ipb027hw1u] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 100vh;
    padding: 24px;
    font-family: var(--nm-font);
}

.lds[b-ipb027hw1u] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    font-family: var(--nm-font);
    color: var(--lds-ink);
    background: var(--lds-stage-bg);
}

/* Nền chưa đặt ảnh vẫn phải "có hội": hai quầng màu sự kiện thở chậm trên nền kem,
   thay vì một mặt phẳng trắng trống trơn. Ảnh nền (nếu có) nằm đè lên nên không ảnh hưởng. */
.lds[b-ipb027hw1u]::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(42% 55% at 18% 8%, var(--lds-accent-faint), transparent 70%),
        radial-gradient(48% 60% at 85% 92%, var(--lds-accent-faint), transparent 70%);
    animation: lds-breathe-b-ipb027hw1u 14s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes lds-breathe-b-ipb027hw1u {
    from { opacity: .55; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.06); }
}

/* Hai lớp nền chồng nhau — cross-fade khi đổi pha (chờ → quay → công bố). */
.lds__bg[b-ipb027hw1u] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity .4s ease;
}

.lds__bg--a[b-ipb027hw1u] { opacity: 1; }
.lds__bg--b[b-ipb027hw1u] { opacity: 0; }
.lds__bg--b.is-on[b-ipb027hw1u] { opacity: 1; }

.lds__scrim[b-ipb027hw1u] {
    position: absolute;
    inset: 0;
    background: var(--lds-scrim);
    transition: opacity .4s ease;
    pointer-events: none;
}

/* Sương trắng cố định NGOÀI scrim cấu hình: sáng nhẹ mép trên–dưới để chữ ở rìa luôn đọc
   được, kể cả khi marketing đặt scrim 0 trên một tấm ảnh sẫm màu. */
.lds__inner[b-ipb027hw1u]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 22%),
        linear-gradient(0deg, rgba(255, 255, 255, .65), transparent 26%);
    pointer-events: none;
    z-index: -1;
}

.lds__inner[b-ipb027hw1u] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 20px 26px 24px;
}

/* ── Đầu màn ─────────────────────────────────────────────────────────────── */
.lds__head[b-ipb027hw1u] { position: relative; text-align: center; }

.lds__sponsors[b-ipb027hw1u] {
    display: flex; align-items: center; justify-content: center; gap: 26px;
    flex-wrap: wrap;
    width: fit-content;
    margin: 0 auto 10px;
    padding: 8px 22px;
    border-radius: 999px;
    border: 1px solid var(--lds-line);
    background: var(--lds-glass);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(31, 41, 55, .08);
}

.lds__logo[b-ipb027hw1u] {
    display: block;
    max-height: 58px;
    max-width: 240px;
    margin: 0 auto 8px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(255, 255, 255, .6));
}

.lds__sponsors img[b-ipb027hw1u] { max-height: 42px; max-width: 180px; object-fit: contain; }
.lds__sponsor-name[b-ipb027hw1u] { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lds-ink); }

/* Tiêu đề màu sự kiện trên quầng sương trắng, kẹp giữa hai nét sáng thon — dây đèn ban ngày. */
.lds__title[b-ipb027hw1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    font-size: clamp(20px, 2.3vw, 34px);
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lds-accent);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .9),
        0 2px 22px rgba(255, 255, 255, .95),
        0 0 46px rgba(255, 255, 255, .8);
}

.lds__title[b-ipb027hw1u]::before,
.lds__title[b-ipb027hw1u]::after {
    content: "";
    flex: 0 1 180px;
    height: 2px;
    border-radius: 2px;
}

.lds__title[b-ipb027hw1u]::before { background: linear-gradient(90deg, transparent, var(--lds-accent)); }
.lds__title[b-ipb027hw1u]::after  { background: linear-gradient(270deg, transparent, var(--lds-accent)); }

.lds__sub[b-ipb027hw1u] {
    margin: 6px 0 0;
    font-size: clamp(12px, 1.2vw, 17px);
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--lds-ink);
    text-shadow: 0 1px 12px rgba(255, 255, 255, .9);
}

.lds__exit[b-ipb027hw1u] {
    position: absolute; top: 0; right: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--lds-line);
    border-radius: 10px;
    background: var(--lds-glass);
    color: var(--lds-ink-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.lds__exit:hover[b-ipb027hw1u] { background: var(--lds-glass-strong); color: var(--lds-ink); }

/* Nút bật/tắt hiệu ứng — cùng họ với nút thoát, nằm ngay bên trái nó. Để mờ hơn một chút vì đây
   là công tắc của NGƯỜI VẬN HÀNH, không phải thứ khán giả cần chú ý. */
.lds__motion[b-ipb027hw1u] {
    position: absolute; top: 0; right: 44px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--lds-line);
    border-radius: 10px;
    background: var(--lds-glass);
    color: var(--lds-accent);
    cursor: pointer;
    opacity: .7;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.lds__motion:hover[b-ipb027hw1u] { background: var(--lds-glass-strong); opacity: 1; }
.lds__motion.is-off[b-ipb027hw1u] { color: var(--lds-ink-soft); }

/* ── Thân: hai cột ───────────────────────────────────────────────────────── */
.lds__body[b-ipb027hw1u] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 16px;
}

.lds__panel[b-ipb027hw1u] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .8);
    background: var(--lds-glass);
    backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: var(--lds-shadow);
}

/* Sự kiện tắt danh sách khách ⇒ khu giải là panel duy nhất: trải hết chiều ngang,
   thẻ giải nở theo, không bỏ trống nửa màn phải. */
.lds__panel--prizes:only-child[b-ipb027hw1u] { grid-column: 1 / -1; }
.lds__panel--prizes:only-child .lds__prizes.is-few[b-ipb027hw1u]  { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; }
.lds__panel--prizes:only-child .lds__prizes.is-some[b-ipb027hw1u] { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: center; }

/* Khu chọn giải để trong suốt — giải nằm thẳng trên nền, đúng bố cục MC đã quen. */
.lds__panel--prizes[b-ipb027hw1u] {
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
}

/* Tiêu đề khu = NHÃN nổi hẳn: viên nang trắng, chữ màu sự kiện, hai nét đèn ngắn hai bên —
   chữ trần trên ảnh/kính bị chìm, người cuối hội trường không thấy khu nào là khu nào. */
.lds__panel-title[b-ipb027hw1u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--lds-accent) 35%, transparent);
    background: #fff;
    box-shadow: 0 4px 16px rgba(31, 41, 55, .12);
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lds-accent);
    white-space: nowrap;
}

.lds__panel-title[b-ipb027hw1u]::before,
.lds__panel-title[b-ipb027hw1u]::after {
    content: "";
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--lds-accent);
}

/* ── Thẻ giải ────────────────────────────────────────────────────────────── */
.lds__prizes[b-ipb027hw1u] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding: 6px;
    /* "safe": ít giải thì cụm thẻ nằm giữa cột; NHIỀU giải tràn khung thì neo về đầu
       để còn cuộn — center trần sẽ cắt cụt mép trên không cuộn tới được. */
    align-content: safe center;
    scrollbar-width: thin;
    scrollbar-color: var(--lds-line-strong) transparent;
}

/* Mật độ theo SỐ giải — lớp do PrizeDensityClass quyết định.
   Một giải mà vẫn dùng ô 150px thì thẻ lọt thỏm giữa màn chiếu; mười hai giải cỡ lớn thì tràn khung. */

/* MỘT giải: thẻ cỡ VỪA nằm giữa cột — to đủ nhìn từ xa nhưng không choán cả màn
   (stretch trọn cột từng bị chê "quá to"). */
.lds__prizes.is-solo[b-ipb027hw1u] {
    grid-template-columns: minmax(0, min(26vw, 340px));
    justify-content: center;
}

.lds__prizes.is-solo .lds__prize[b-ipb027hw1u] { padding: 14px; gap: 10px; }

.lds__prizes.is-few[b-ipb027hw1u]  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lds__prizes.is-some[b-ipb027hw1u] { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.lds__prizes.is-many[b-ipb027hw1u] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

/* Thẻ đơn lẻ: ảnh khung 16/10 hiện trọn (contain), chữ to hơn — cả hội trường nhìn từ xa. */
.lds__prizes.is-solo .lds__prize-img[b-ipb027hw1u] { aspect-ratio: 4 / 3;
    max-height: 200px;
}
.lds__prizes.is-solo .lds__prize-name[b-ipb027hw1u] { font-size: clamp(16px, 1.7vw, 22px); }
.lds__prizes.is-solo .lds__prize-left[b-ipb027hw1u] { font-size: 14px; padding: 4px 14px; }

.lds__prizes.is-many .lds__prize[b-ipb027hw1u] { padding: 8px; gap: 4px; }
.lds__prizes.is-many .lds__prize-name[b-ipb027hw1u] { font-size: 13px; }

.lds__prize[b-ipb027hw1u] {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px;
    background: var(--lds-glass);
    backdrop-filter: blur(10px);
    color: var(--lds-ink);
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(31, 41, 55, .12);
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .2s ease;
}

.lds__prize:hover:not(:disabled)[b-ipb027hw1u] { transform: translateY(-3px); background: var(--lds-glass-strong); box-shadow: 0 10px 30px rgba(31, 41, 55, .18); }

/* Thẻ đang chọn: viền + quầng sáng màu sự kiện — nhìn từ cuối hội trường vẫn biết sắp quay giải nào. */
.lds__prize.is-picked[b-ipb027hw1u] {
    border-color: var(--lds-accent);
    background: var(--lds-glass-strong);
    box-shadow: 0 0 0 1px var(--lds-accent), 0 0 32px var(--lds-accent-glow);
}

.lds__prize.is-special[b-ipb027hw1u] { border-color: color-mix(in srgb, var(--lds-special) 70%, transparent); }

.lds__prize.is-special.is-picked[b-ipb027hw1u] {
    border-color: var(--lds-special);
    box-shadow: 0 0 0 1px var(--lds-special), 0 0 32px rgba(245, 158, 11, .35);
}

.lds__prize.is-out[b-ipb027hw1u] { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.lds__prize:disabled[b-ipb027hw1u] { cursor: not-allowed; }

.lds__prize-img[b-ipb027hw1u] {
    width: 100%; aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border-radius: 10px;
    /* Nền TRẮNG + contain: ảnh giải (nhất là logo hãng) phải hiện TRỌN VẸN,
       cover sẽ cắt cụt logo — người xem không biết mình sắp trúng cái gì. */
    background: #fff;
    padding: 6px;
    font-size: 26px;
    color: var(--lds-ink-soft);
}

.lds__prize-img img[b-ipb027hw1u] { width: 100%; height: 100%; object-fit: contain; }
.lds__prize-name[b-ipb027hw1u] { font-size: 14px; font-weight: 800; text-align: center; }

/* Số suất còn lại: viên nang nhỏ thay vì dòng chữ trôi nổi. */
.lds__prize-left[b-ipb027hw1u] {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--lds-veil);
    color: var(--lds-ink-soft);
}

.lds__prize.is-picked .lds__prize-left[b-ipb027hw1u] { background: var(--lds-accent-faint); color: var(--lds-ink); }

/* ── Bảng danh sách ──────────────────────────────────────────────────────── */
.lds__guests[b-ipb027hw1u] {
    flex: 1; min-height: 0; overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lds-line-strong) transparent;
}

.lds__guests table[b-ipb027hw1u] { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.lds__guests th[b-ipb027hw1u], .lds__guests td[b-ipb027hw1u] {
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid var(--lds-line);
}

.lds__guests tbody tr:hover td[b-ipb027hw1u] { background: var(--lds-veil); }

/* thead dính phải có nền ĐẶC 100% — kính .94 vẫn để chữ hàng cuộn phía dưới hiện ma mờ mờ. */
.lds__guests thead th[b-ipb027hw1u] {
    position: sticky; top: 0;
    background: #ffffff;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--lds-ink-soft);
}

.lds__no[b-ipb027hw1u] { width: 34px; color: var(--lds-ink-soft); text-align: center; }

/* ── Chân màn: khung tên + nút quay ──────────────────────────────────────── */
.lds__foot[b-ipb027hw1u] {
    display: flex; align-items: center; justify-content: center; gap: 18px;
    flex-wrap: wrap;
}

/* KHUNG TÊN — chữ ký của màn này. Kính trắng đặc, 4 góc khung phim màu sự kiện
   (vẽ bằng gradient nền, không tốn markup), vệt sáng quét khi quay. */
.lds__odometer[b-ipb027hw1u] {
    position: relative;
    flex: 1 1 380px;
    max-width: 820px;
    padding: 12px 26px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .9);
    background:
        /* 4 góc khung phim: hai nét vuông góc mỗi góc, màu nhấn */
        linear-gradient(var(--lds-accent), var(--lds-accent)) 10px 10px / 18px 2px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) 10px 10px / 2px 18px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) calc(100% - 10px) 10px / 18px 2px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) calc(100% - 10px) 10px / 2px 18px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) 10px calc(100% - 10px) / 18px 2px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) 10px calc(100% - 10px) / 2px 18px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) calc(100% - 10px) calc(100% - 10px) / 18px 2px,
        linear-gradient(var(--lds-accent), var(--lds-accent)) calc(100% - 10px) calc(100% - 10px) / 2px 18px,
        var(--lds-glass-strong);
    background-repeat: no-repeat;
    backdrop-filter: blur(14px);
    overflow: hidden;
    text-align: center;
    box-shadow: var(--lds-shadow);
    transition: border-color .3s ease, box-shadow .3s ease;
    font-size: clamp(18px, 2.3vw, 32px);
}

.lds__odometer.is-spinning[b-ipb027hw1u] {
    border-color: var(--lds-accent);
    box-shadow: 0 0 0 1px var(--lds-accent), 0 0 48px var(--lds-accent-glow), var(--lds-shadow);
}

.lds__odo-name[b-ipb027hw1u] {
    display: block;
    font-size: clamp(22px, 3.4vw, 52px);
    font-weight: 900;
    letter-spacing: .02em;
    color: var(--lds-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lúc quay: tên đổi 60ms/nhịp (Blazor chỉ thay text nên animation không restart theo nhịp);
   thay vào đó một nhịp rung sáng liên tục tạo cảm giác chuyển động. */
.lds__odometer.is-spinning .lds__odo-name[b-ipb027hw1u] {
    color: var(--lds-accent);
    animation: lds-flicker-b-ipb027hw1u .14s linear infinite alternate;
}

@keyframes lds-flicker-b-ipb027hw1u {
    from { opacity: 1;   filter: blur(0); }
    to   { opacity: .78; filter: blur(.6px); }
}

/* Vệt sáng quét ngang khung khi quay — trên nền trắng thì vệt mang màu nhấn. */
.lds__odo-beam[b-ipb027hw1u] {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, var(--lds-accent-faint) 48%, color-mix(in srgb, var(--lds-accent) 26%, transparent) 52%, transparent 68%);
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.lds__odometer.is-spinning .lds__odo-beam[b-ipb027hw1u] {
    opacity: 1;
    animation: lds-beam-b-ipb027hw1u 1.1s linear infinite;
}

@keyframes lds-beam-b-ipb027hw1u {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.lds__preload[b-ipb027hw1u] { font-size: 12px; color: var(--lds-ink-soft); text-shadow: 0 1px 8px rgba(255, 255, 255, .9); }

/* Nút QUAY: viên nang gradient màu sự kiện, thở sáng khi sẵn sàng — bấm từ xa, nổi trên mọi ảnh. */
.lds__spin[b-ipb027hw1u] {
    flex: 0 0 auto;
    min-width: 184px;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    background: var(--lds-accent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lds-accent) 88%, #fff),
        var(--lds-accent) 55%,
        color-mix(in srgb, var(--lds-accent) 82%, #000));
    color: #fff;
    font-family: var(--nm-font);
    font-size: clamp(15px, 1.4vw, 20px);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(31, 41, 55, .22), 0 0 0 0 var(--lds-accent-glow);
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
    animation: lds-ready-b-ipb027hw1u 2.4s ease-in-out infinite;
}

.lds__spin i[b-ipb027hw1u] { margin-right: 8px; }

@keyframes lds-ready-b-ipb027hw1u {
    0%, 100% { box-shadow: 0 10px 26px rgba(31, 41, 55, .22), 0 0 0 0 var(--lds-accent-glow); }
    50%      { box-shadow: 0 10px 26px rgba(31, 41, 55, .22), 0 0 34px 4px var(--lds-accent-glow); }
}

.lds__spin:hover:not(:disabled)[b-ipb027hw1u] { transform: translateY(-2px) scale(1.02); }
.lds__spin:active:not(:disabled)[b-ipb027hw1u] { transform: translateY(0) scale(.99); }

.lds__spin:disabled[b-ipb027hw1u] {
    cursor: not-allowed;
    opacity: .55;
    animation: none;
    filter: saturate(.4);
}

.lds__spin:focus-visible[b-ipb027hw1u],
.lds__prize:focus-visible[b-ipb027hw1u],
.lds__exit:focus-visible[b-ipb027hw1u] {
    outline: 2px solid var(--lds-ink);
    outline-offset: 2px;
}

/* ── Màn công bố người trúng ─────────────────────────────────────────────── */
/* Cột dọc chứ không phải căn giữa đơn thuần: dải thương hiệu bám mép trên, hộp chúc mừng lấy
   `margin: auto 0` để tự căn giữa phần còn lại — hộp vẫn ở giữa dù dải cao thấp bao nhiêu. */
.lds-win[b-ipb027hw1u] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(6px);
}

/* ── Dải thương hiệu trên lớp công bố ─────────────────────────────────────── */
/* Lớp phủ che kín màn nên logo hãng tài trợ + tên hội thảo ở đầu màn biến mất đúng lúc cả hội
   trường đang nhìn. Vẽ lại ở đây, và ★ CỐ Ý dùng lại nguyên các class của đầu màn
   (.lds__logo / .lds__sponsors / .lds__title) nên kích thước, viên thuốc kính, quầng sáng và hai
   nét sáng hai bên tiêu đề GIỐNG HỆT lúc đang quay. Khối này chỉ lo chỗ đứng, KHÔNG định cỡ. */
.lds-win__brand[b-ipb027hw1u] {
    flex: none;
    position: relative;
    z-index: 1;                    /* trên tia sáng xoay và pháo giấy */
    width: 100%;
    max-width: min(1100px, 94vw);
    text-align: center;
    pointer-events: none;
}

/* Máy chiếu tỉ lệ thấp: thu gọn đôi chút để hộp tên người trúng còn đủ chỗ, nhưng KHÔNG ẩn gì —
   đúng lúc công bố là lúc nhà tài trợ cần được thấy nhất. */
@media (max-height: 720px) {
    .lds-win__brand .lds__logo[b-ipb027hw1u] { max-height: 44px; margin-bottom: 6px; }
    .lds-win__brand .lds__sponsors[b-ipb027hw1u] { gap: 18px; padding: 6px 18px; margin-bottom: 8px; }
    .lds-win__brand .lds__sponsors img[b-ipb027hw1u] { max-height: 34px; }
}

/* Tia sáng xoay chậm QUANH hộp — như nắng xòe sau tấm thiệp lúc trao giải.
   Mask hình vành khuyên: rỗng ở tâm (sau lưng hộp) để không đục chữ, sáng thành vòng
   quanh hộp rồi tắt dần về mép màn. */
.lds-win__burst[b-ipb027hw1u] {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 160vmax; height: 160vmax;
    translate: -50% -50%;
    background: repeating-conic-gradient(
        color-mix(in srgb, var(--lds-accent) 14%, transparent) 0deg 8deg,
        transparent 8deg 24deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 15%, #000 30% 38%, transparent 60%);
    mask-image: radial-gradient(circle, transparent 0 15%, #000 30% 38%, transparent 60%);
    animation: lds-burst-b-ipb027hw1u 36s linear infinite;
    /* Lớp quay liên tục và rất to (160vmax) — báo trước cho trình duyệt dồn nó thành lớp riêng,
       không thì máy chiếu yếu phải vẽ lại cả mảng conic-gradient mỗi khung hình. */
    will-change: transform;
    pointer-events: none;
}

.lds-win.is-special .lds-win__burst[b-ipb027hw1u] {
    background: repeating-conic-gradient(
        rgba(245, 158, 11, .16) 0deg 8deg,
        transparent 8deg 24deg);
}

@keyframes lds-burst-b-ipb027hw1u { to { rotate: 360deg; } }

/* Pháo giấy: 16 mảnh rơi, lệch nhau vị trí/màu/nhịp bằng nth-child — thuần CSS.
   Trên nền sáng nên mảnh trắng đổi thành xanh da trời cho khỏi tàng hình. */
.lds-win__confetti[b-ipb027hw1u] { position: absolute; inset: 0; pointer-events: none; }

.lds-win__confetti i[b-ipb027hw1u] {
    position: absolute;
    top: -4vh;
    width: 10px; height: 16px;
    border-radius: 2px;
    background: var(--lds-accent);
    opacity: 0;
    animation: lds-confetti-b-ipb027hw1u 3.4s linear infinite;
    will-change: transform, opacity;
}

@keyframes lds-confetti-b-ipb027hw1u {
    0%   { opacity: 0; transform: translateY(0) rotate(0) skewX(0); }
    6%   { opacity: 1; }
    100% { opacity: .9; transform: translateY(108vh) rotate(660deg) skewX(28deg); }
}

.lds-win__confetti i:nth-child(4n + 1)[b-ipb027hw1u] { background: var(--lds-special); }
.lds-win__confetti i:nth-child(4n + 2)[b-ipb027hw1u] { background: #0ea5e9; width: 7px; height: 12px; }
.lds-win__confetti i:nth-child(4n + 3)[b-ipb027hw1u] { background: var(--lds-accent); }
.lds-win__confetti i:nth-child(4n)[b-ipb027hw1u]     { background: color-mix(in srgb, var(--lds-accent) 55%, #fff); }

.lds-win__confetti i:nth-child(1)[b-ipb027hw1u]  { left: 4%;  animation-delay: 0s;    animation-duration: 3.1s; }
.lds-win__confetti i:nth-child(2)[b-ipb027hw1u]  { left: 11%; animation-delay: 1.2s;  animation-duration: 3.8s; }
.lds-win__confetti i:nth-child(3)[b-ipb027hw1u]  { left: 18%; animation-delay: .5s;   animation-duration: 2.9s; }
.lds-win__confetti i:nth-child(4)[b-ipb027hw1u]  { left: 26%; animation-delay: 1.9s;  animation-duration: 3.5s; }
.lds-win__confetti i:nth-child(5)[b-ipb027hw1u]  { left: 33%; animation-delay: .2s;   animation-duration: 4.1s; }
.lds-win__confetti i:nth-child(6)[b-ipb027hw1u]  { left: 41%; animation-delay: 1.5s;  animation-duration: 3s;   }
.lds-win__confetti i:nth-child(7)[b-ipb027hw1u]  { left: 48%; animation-delay: .8s;   animation-duration: 3.6s; }
.lds-win__confetti i:nth-child(8)[b-ipb027hw1u]  { left: 55%; animation-delay: 2.2s;  animation-duration: 3.2s; }
.lds-win__confetti i:nth-child(9)[b-ipb027hw1u]  { left: 62%; animation-delay: .4s;   animation-duration: 3.9s; }
.lds-win__confetti i:nth-child(10)[b-ipb027hw1u] { left: 69%; animation-delay: 1.7s;  animation-duration: 2.8s; }
.lds-win__confetti i:nth-child(11)[b-ipb027hw1u] { left: 76%; animation-delay: 1s;    animation-duration: 3.4s; }
.lds-win__confetti i:nth-child(12)[b-ipb027hw1u] { left: 83%; animation-delay: 2.5s;  animation-duration: 3.7s; }
.lds-win__confetti i:nth-child(13)[b-ipb027hw1u] { left: 90%; animation-delay: .6s;   animation-duration: 3.1s; }
.lds-win__confetti i:nth-child(14)[b-ipb027hw1u] { left: 96%; animation-delay: 1.4s;  animation-duration: 4s;   }
.lds-win__confetti i:nth-child(15)[b-ipb027hw1u] { left: 22%; animation-delay: 2.8s;  animation-duration: 3.3s; }
.lds-win__confetti i:nth-child(16)[b-ipb027hw1u] { left: 58%; animation-delay: 3.1s;  animation-duration: 3.5s; }

/* Hộp chúc mừng: tấm thiệp trắng — NƠI ĐỌC TÊN, mọi thứ sau lưng không được lẫn vào chữ. */
.lds-win__box[b-ipb027hw1u] {
    position: relative;
    z-index: 1;
    /* `margin: auto 0` căn giữa theo phần cao còn lại sau dải thương hiệu; `min-height: 0` cho phép
       hộp co lại trong flex-column, nếu không nó tràn xuống dưới mép màn khi giải có nhiều người. */
    margin: auto 0;
    min-height: 0;
    width: min(780px, 92vw);
    max-height: 100%;
    overflow-y: auto;
    padding: 30px 34px 34px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .9);
    background: #ffffff;
    color: var(--lds-ink);
    text-align: center;
    box-shadow:
        0 0 0 1px var(--lds-accent-faint),
        0 0 80px var(--lds-accent-glow),
        0 24px 70px rgba(31, 41, 55, .28);
    animation: lds-pop-b-ipb027hw1u .5s cubic-bezier(.18, 1.25, .4, 1) backwards;
}

@keyframes lds-pop-b-ipb027hw1u {
    from { opacity: 0; transform: translateY(26px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lds-win.is-special .lds-win__box[b-ipb027hw1u] {
    border-color: var(--lds-special);
    box-shadow:
        0 0 0 1px var(--lds-special),
        0 0 90px rgba(245, 158, 11, .32),
        0 24px 70px rgba(31, 41, 55, .28);
}

.lds-win__close[b-ipb027hw1u] {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--lds-line);
    border-radius: 10px;
    background: var(--lds-veil);
    color: var(--lds-ink-soft);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.lds-win__close:hover[b-ipb027hw1u] { background: var(--lds-veil-strong); color: var(--lds-ink); }

.lds-win__label[b-ipb027hw1u] {
    margin: 0;
    font-size: clamp(18px, 1.9vw, 25px); font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--nm-info);
    animation: lds-rise-b-ipb027hw1u .45s ease .1s backwards;
}

.lds-win.is-special .lds-win__label[b-ipb027hw1u] { color: var(--lds-special-ink); }

/* Nhãn loại người trúng: "Khách mời may mắn" / "Đại lý may mắn" / "Vé may mắn". */
.lds-win__kind[b-ipb027hw1u] {
    margin: 6px 0 18px;
    font-size: clamp(14px, 1.35vw, 18px);
    color: var(--lds-ink-soft);
    animation: lds-rise-b-ipb027hw1u .45s ease .18s backwards;
}

@keyframes lds-rise-b-ipb027hw1u {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lds-win__list[b-ipb027hw1u] { display: flex; flex-direction: column; gap: 12px; }
.lds-win__list.is-many[b-ipb027hw1u] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Rút nhiều người một lượt: tên thu về cỡ vừa, nếu không 5–10 tên cỡ 52px sẽ tràn khỏi hộp. */
.lds-win__list.is-many .lds-win__item strong[b-ipb027hw1u] { font-size: clamp(20px, 2vw, 28px); }
.lds-win__list.is-many .lds-win__org[b-ipb027hw1u] { font-size: clamp(14px, 1.3vw, 17px) !important; }

/* Tên hiện lần lượt — MC đọc đến đâu, mắt cả hội trường theo đến đó. */
.lds-win__item[b-ipb027hw1u] {
    display: flex; flex-direction: column; gap: 6px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--lds-line);
    background: transparent;
    animation: lds-rise-b-ipb027hw1u .45s ease backwards;
}

.lds-win.is-special .lds-win__item[b-ipb027hw1u] {
    border-color: color-mix(in srgb, var(--lds-special) 45%, transparent);
    background: #fffbeb;
}

.lds-win__item:nth-child(1)[b-ipb027hw1u] { animation-delay: .26s; }
.lds-win__item:nth-child(2)[b-ipb027hw1u] { animation-delay: .38s; }
.lds-win__item:nth-child(3)[b-ipb027hw1u] { animation-delay: .5s; }
.lds-win__item:nth-child(4)[b-ipb027hw1u] { animation-delay: .62s; }
.lds-win__item:nth-child(5)[b-ipb027hw1u] { animation-delay: .74s; }
.lds-win__item:nth-child(n + 6)[b-ipb027hw1u] { animation-delay: .86s; }

.lds-win__item strong[b-ipb027hw1u] {
    font-size: clamp(30px, 3.6vw, 52px);
    font-weight: 900;
    color: var(--lds-accent);
    line-height: 1.12;
}

.lds-win.is-special .lds-win__item strong[b-ipb027hw1u] { color: var(--lds-special-ink); }

.lds-win__item span[b-ipb027hw1u] { font-size: 14px; color: var(--lds-ink-soft); }
.lds-win__org[b-ipb027hw1u] { font-size: clamp(17px, 1.7vw, 23px) !important; font-weight: 800; color: var(--nm-info) !important;   /* xanh — mẫu của công ty tách đơn vị khỏi tên bằng màu, không bằng cỡ chữ */ opacity: .85; }
.lds-win__code[b-ipb027hw1u] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--lds-ink-soft) !important;
    font-size: clamp(14px, 1.3vw, 17px) !important;
}

/* Câu công bố kèm tên giải — MC đọc thẳng được. */
.lds-win__prize[b-ipb027hw1u] {
    margin: 20px 0 0;
    font-size: clamp(16px, 1.6vw, 21px);
    font-weight: 700;
    color: var(--nm-info);
    animation: lds-rise-b-ipb027hw1u .45s ease .55s backwards;
}

.lds-win.is-special .lds-win__prize[b-ipb027hw1u] { color: var(--lds-special-ink); }

/* Ảnh phần quà: cả hội trường nhìn thấy mình vừa trúng cái gì. */
.lds-win__img[b-ipb027hw1u] {
    display: block;
    max-height: 120px;
    max-width: min(100%, 360px);
    margin: 16px auto 0;
    object-fit: contain;
    filter: drop-shadow(0 8px 22px rgba(31, 41, 55, .28));
    animation: lds-rise-b-ipb027hw1u .45s ease .65s backwards;
}

/* Ảnh nạp trước: phải nằm trong luồng render để trình duyệt thật sự tải, nhưng không được chiếm
   một pixel nào trên màn chiếu. display:none sẽ khiến một số trình duyệt hoãn tải. */
.lds__preloader[b-ipb027hw1u] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .lds__body[b-ipb027hw1u] { grid-template-columns: 1fr; }
    .lds__panel--guests[b-ipb027hw1u] { display: none; }
    .lds__title[b-ipb027hw1u] { gap: 12px; }
    .lds__title[b-ipb027hw1u]::before, .lds__title[b-ipb027hw1u]::after { flex-basis: 48px; }
    .lds__inner[b-ipb027hw1u] { padding: 14px 14px 16px; }
}

/* Máy chiếu tỉ lệ thấp (laptop 1366×768 phóng lên): bớt đệm dọc để chân màn không tràn. */
@media (max-height: 720px) {
    .lds__inner[b-ipb027hw1u] { gap: 10px; padding-top: 12px; }
    .lds__logo[b-ipb027hw1u] { max-height: 52px; }
    .lds__odometer[b-ipb027hw1u] { padding: 10px 26px; }
}

/* ── Tắt hiệu ứng trang trí ─────────────────────────────────────────────────
   ★★ Màn CHIẾU cố ý KHÔNG còn tự tắt theo `prefers-reduced-motion` như các màn quản trị.
   Cờ đó phản ánh cài đặt của CHÍNH cái laptop cắm máy chiếu, mà laptop văn phòng rất hay bị đặt
   "Adjust for best performance" (System Properties → Performance) hoặc tắt "Show animations in
   Windows" → Chrome báo reduce → cả hội trường mất pháo giấy và tia sáng dù không ai yêu cầu.
   Ca thật 19/08/2026: Chrome 151 / Win10 21H2 — hộp chúc mừng, chữ và odometer chạy bình thường
   nhưng đúng hai hiệu ứng CHẠY LIÊN TỤC (pháo giấy rơi, tia sáng xoay) đứng im, vì cả hai nằm
   trong danh sách của khối @media cũ.
   Ai thật sự cần tắt thì bấm nút "Hiệu ứng" ở góc màn (nhớ trong localStorage của máy đó). */
.lds.is-motion-off[b-ipb027hw1u]::before,
.lds.is-motion-off .lds__odo-beam[b-ipb027hw1u],
.lds.is-motion-off .lds__spin[b-ipb027hw1u],
.lds.is-motion-off .lds-win__box[b-ipb027hw1u],
.lds.is-motion-off .lds-win__label[b-ipb027hw1u],
.lds.is-motion-off .lds-win__kind[b-ipb027hw1u],
.lds.is-motion-off .lds-win__item[b-ipb027hw1u],
.lds.is-motion-off .lds-win__prize[b-ipb027hw1u],
.lds.is-motion-off .lds-win__img[b-ipb027hw1u],
.lds.is-motion-off .lds__odometer.is-spinning .lds__odo-name[b-ipb027hw1u] {
    animation: none;
}

/* Tắt thì GIẤU HẲN hai lớp trang trí, đừng để chúng đứng hình: pháo giấy không chạy animation
   thì `opacity: 0` giữ nguyên (vô hình), còn tia sáng thành một hình sao bất động — nhìn như lỗi
   render chứ không ra "đã tắt hiệu ứng". */
.lds.is-motion-off .lds-win__burst[b-ipb027hw1u],
.lds.is-motion-off .lds-win__confetti[b-ipb027hw1u] { display: none; }
/* /src/Features/MasterData/Pages/Manager/AirlinesIndex.razor.rz.scp.css */
/* /manager/master/airlines — chuẩn nm-list: shell trang + dải số liệu + toolbar + cell helpers.
   Các class .nm-list-* KHÔNG global, mỗi trang tự khai — khung giữ chung với PoliciesIndex/BookingsIndex
   để các màn quản trị nhìn như một hệ. Chrome (card/grid/modal/field/input/badge/kpi) do primitive Nm* lo. */

.nm-list-page[b-ptxqpnnf4a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-ptxqpnnf4a] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-ptxqpnnf4a] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-ptxqpnnf4a] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-ptxqpnnf4a] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải số liệu — 1 hàng; 3 ô đầu bấm được để lọc theo loại hãng ── */
.airl-stats[b-ptxqpnnf4a] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.airl-stats[b-ptxqpnnf4a]::-webkit-scrollbar { display: none; }

.airl-stat[b-ptxqpnnf4a] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.airl-stat + .airl-stat[b-ptxqpnnf4a] { border-left: 1px solid var(--nm-border); }

.airl-stat--btn[b-ptxqpnnf4a] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.airl-stats > .airl-stat--btn:first-child[b-ptxqpnnf4a] { border-left: 0; }
.airl-stat--btn:hover .airl-stat__lbl[b-ptxqpnnf4a] { color: var(--nm-ink); }
/* Ô đang lọc — đổi màu chữ chứ không đổi nền, để dải vẫn đọc như một hàng số liệu */
.airl-stat--btn.is-on .airl-stat__lbl[b-ptxqpnnf4a] { color: var(--nm-brand-700); font-weight: 700; }
.airl-stat--btn.is-on .airl-stat__val[b-ptxqpnnf4a] { color: var(--nm-brand-700); }

.airl-stat__dot[b-ptxqpnnf4a] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.airl-stat__dot--accent[b-ptxqpnnf4a] { background: var(--nm-brand-500); }
.airl-stat__dot--info[b-ptxqpnnf4a] { background: var(--nm-info); }
.airl-stat__dot--warn[b-ptxqpnnf4a] { background: var(--nm-warn); }

.airl-stat__lbl[b-ptxqpnnf4a] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.airl-stat__val[b-ptxqpnnf4a] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-ptxqpnnf4a] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-ptxqpnnf4a] { width: 320px; max-width: 100%; }
.tb-select[b-ptxqpnnf4a] { min-width: 140px; }
.tb-select--sort[b-ptxqpnnf4a] { min-width: 160px; }
.tb-filters[b-ptxqpnnf4a] { display: contents; }
[b-ptxqpnnf4a] .tb-clear { margin-left: auto; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-ptxqpnnf4a] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-ptxqpnnf4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Cell ── */
.cell-2line[b-ptxqpnnf4a] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cell-2line__main[b-ptxqpnnf4a] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.cell-2line__sub[b-ptxqpnnf4a] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.cell-muted[b-ptxqpnnf4a] { color: var(--nm-muted); }
.cell-mono[b-ptxqpnnf4a] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .02em; }

.nm-code-pill[b-ptxqpnnf4a] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Ô tên hãng: khung logo cố định để các dòng thẳng hàng dù logo thiếu/khác tỉ lệ */
.airl-cell[b-ptxqpnnf4a] { display: flex; align-items: center; gap: 10px; min-width: 0; }

.airl-logo[b-ptxqpnnf4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    overflow: hidden;
}
.airl-logo img[b-ptxqpnnf4a] { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Thiếu logo → mã IATA làm placeholder, vẫn nhận ra hãng ngay */
.airl-logo__ph[b-ptxqpnnf4a] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
    letter-spacing: .02em;
}
.airl-logo--lg[b-ptxqpnnf4a] { width: 64px; height: 64px; }
.airl-logo--lg .airl-logo__ph[b-ptxqpnnf4a] { font-size: 17px; }

.nm-row-actions[b-ptxqpnnf4a] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer ── */
.airl-foot[b-ptxqpnnf4a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.airl-total[b-ptxqpnnf4a] { font-size: 12.5px; color: var(--nm-muted); }
.airl-total strong[b-ptxqpnnf4a] { color: var(--nm-ink); font-weight: 700; }

/* ── Form trong modal ── */
.airl-form[b-ptxqpnnf4a] { display: flex; flex-direction: column; gap: 14px; }

/* Logo xem trước đứng cạnh 2 ô mã — nhìn phát biết gắn đúng hãng chưa */
.airl-form-ident[b-ptxqpnnf4a] { display: flex; align-items: flex-start; gap: 14px; }
.airl-form-ident__codes[b-ptxqpnnf4a] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-width: 0;
}

.airl-form-switches[b-ptxqpnnf4a] { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
    .nm-list-page[b-ptxqpnnf4a] { padding: 16px 14px 22px; }
    .nm-list-head[b-ptxqpnnf4a] { align-items: flex-start; }
    .tb-search[b-ptxqpnnf4a] { flex: 1; width: auto; }
    [b-ptxqpnnf4a] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-ptxqpnnf4a] { display: none; }
    .tb-filters.is-open[b-ptxqpnnf4a] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-ptxqpnnf4a] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-ptxqpnnf4a]  .nm-select-wrap,
    .tb-select[b-ptxqpnnf4a]  .nm-select { width: 100%; }
    [b-ptxqpnnf4a] .tb-clear { margin-left: 0; }

    .airl-form-ident[b-ptxqpnnf4a] { flex-direction: column; align-items: center; }
    .airl-form-ident__codes[b-ptxqpnnf4a] { width: 100%; }
}
/* /src/Features/MasterData/Pages/Manager/AirportsIndex.razor.rz.scp.css */
/* /manager/master/airports — chuẩn nm-list: shell trang + dải số liệu + toolbar + cell + form.
   Chrome (card/grid/modal/field/input/button/badge) do primitive Nm* lo; file này chỉ style phần
   riêng của màn. Token-only (var(--nm-*)), không hex. Khung giữ trùng tên class với các màn
   quản trị khác (.nm-list-*, .cell-*, .tb-*) để 3 màn nhìn như một hệ. */

.nm-list-page[b-11bgz15cgr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-11bgz15cgr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-11bgz15cgr] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-11bgz15cgr] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-11bgz15cgr] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải số liệu — 1 hàng, mỗi mục là 1 nút lọc nhanh ── */
.mapt-stats[b-11bgz15cgr] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.mapt-stats[b-11bgz15cgr]::-webkit-scrollbar { display: none; }

.mapt-stat[b-11bgz15cgr] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.mapt-stat + .mapt-stat[b-11bgz15cgr] { border-left: 1px solid var(--nm-border); }

.mapt-stat--btn[b-11bgz15cgr] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.mapt-stats > .mapt-stat--btn:first-child[b-11bgz15cgr] { border-left: 0; }
.mapt-stat--btn:hover .mapt-stat__lbl[b-11bgz15cgr] { color: var(--nm-ink); }
/* Mục đang mở — đổi màu chữ chứ không đổi nền, để dải vẫn đọc như một hàng số liệu */
.mapt-stat--btn.is-on .mapt-stat__lbl[b-11bgz15cgr] { color: var(--nm-brand-700); font-weight: 700; }
.mapt-stat--btn.is-on .mapt-stat__val[b-11bgz15cgr] { color: var(--nm-brand-700); }

.mapt-stat__dot[b-11bgz15cgr] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.mapt-stat__dot--accent[b-11bgz15cgr] { background: var(--nm-brand-500); }
.mapt-stat__dot--good[b-11bgz15cgr]   { background: var(--nm-ok); }
.mapt-stat__dot--info[b-11bgz15cgr]   { background: var(--nm-info); }
.mapt-stat__dot--warn[b-11bgz15cgr]   { background: var(--nm-warn); }
.mapt-stat__dot--bad[b-11bgz15cgr]    { background: var(--nm-bad); }
.mapt-stat__dot--muted[b-11bgz15cgr]  { background: var(--nm-border-strong); }

.mapt-stat__lbl[b-11bgz15cgr] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.mapt-stat__val[b-11bgz15cgr] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* Mục chỉ để xem (không lọc được) — nhạt hơn để khỏi mời bấm */
.mapt-stat--plain .mapt-stat__val[b-11bgz15cgr] { font-weight: 700; color: var(--nm-ink-2); }

/* ── Toolbar ── */
.nm-list-toolbar[b-11bgz15cgr] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-11bgz15cgr] { width: 320px; max-width: 100%; }
.tb-country[b-11bgz15cgr] { min-width: 220px; }
.tb-select[b-11bgz15cgr] { min-width: 130px; }
.tb-select--sort[b-11bgz15cgr] { min-width: 180px; }
.tb-filters[b-11bgz15cgr] { display: contents; }
[b-11bgz15cgr] .tb-clear { margin-left: auto; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-11bgz15cgr] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-11bgz15cgr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

.mapt-active-tags[b-11bgz15cgr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* ── Cell ── */
.cell-2line[b-11bgz15cgr] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-11bgz15cgr] {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.cell-2line__sub[b-11bgz15cgr] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 320px;
}
.cell-mono[b-11bgz15cgr] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; }

.nm-code-pill[b-11bgz15cgr] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.mapt-country[b-11bgz15cgr] { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mapt-flag[b-11bgz15cgr] { font-size: 16px; line-height: 1; flex-shrink: 0; }

.mapt-rank[b-11bgz15cgr] { align-items: flex-end; }

/* Hàng đã ẩn — mờ đi + vạch trái, quét mắt là thấy ngay nó không còn dùng */
[b-11bgz15cgr] .mapt-row-off { opacity: .62; }
[b-11bgz15cgr] .mapt-row-off .nm-grid__td:first-child { box-shadow: inset 2px 0 0 var(--nm-bad); }
[b-11bgz15cgr] .mapt-off-badge { flex-shrink: 0; }

.nm-row-actions[b-11bgz15cgr] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Ảnh trong bảng ── */
.mapt-thumb-wrap[b-11bgz15cgr] { position: relative; display: inline-block; }
.mapt-thumb[b-11bgz15cgr] {
    width: 46px; height: 32px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--nm-border); background: var(--nm-surface-2); display: block;
}
/* Số ảnh còn lại — nhắc sân bay này có bộ ảnh chứ không chỉ 1 tấm */
.mapt-thumb-more[b-11bgz15cgr] {
    position: absolute; right: -5px; bottom: -5px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--nm-r-pill);
    background: var(--nm-ink); color: var(--nm-surface);
    font-size: 10px; font-weight: 700;
}
.mapt-thumb-ph[b-11bgz15cgr] {
    width: 46px; height: 32px; border-radius: 6px;
    border: 1px dashed var(--nm-border); background: var(--nm-surface-2);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--nm-muted); font-size: 13px;
}

/* ── Footer ── */
.mapt-foot[b-11bgz15cgr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.mapt-total[b-11bgz15cgr] { font-size: 12.5px; color: var(--nm-muted); }
.mapt-total strong[b-11bgz15cgr] { color: var(--nm-ink); font-weight: 700; }

/* ── Form trong modal ── */
.nm-form-stack[b-11bgz15cgr] { display: flex; flex-direction: column; gap: 14px; }
.nm-form-grid[b-11bgz15cgr] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nm-form-grid--3[b-11bgz15cgr] { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
    .nm-form-grid[b-11bgz15cgr], .nm-form-grid--3[b-11bgz15cgr] { grid-template-columns: 1fr; }
}

/* Tiêu đề nhóm field — chia form dài thành 3 khối đọc được */
.mapt-sec-hd[b-11bgz15cgr] {
    font-size: 11.5px; font-weight: 700; color: var(--nm-muted);
    text-transform: uppercase; letter-spacing: .08em;
}
.nm-form-stack > .mapt-sec-hd[b-11bgz15cgr] { margin-top: 2px; }

.nm-form-error[b-11bgz15cgr] {
    padding: 9px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-bad-soft);
    color: var(--nm-bad);
    font-size: 14px;
}

.mapt-note[b-11bgz15cgr] {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--nm-r-input);
    background: var(--nm-info-soft); color: var(--nm-info); font-size: 12.5px;
}

/* Ô mã (IATA/ICAO/Ident/múi giờ) — chữ mono, gõ thường vẫn ra HOA.
   Phải qua ::deep: <input> do NmInput render nên không mang scope-id của trang. */
.nm-form-stack[b-11bgz15cgr]  .nm-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    text-transform: uppercase;
}
/* Múi giờ là chuỗi IANA phân biệt hoa/thường (Asia/Ho_Chi_Minh) — mono nhưng KHÔNG ép HOA */
.nm-form-stack[b-11bgz15cgr]  .nm-mono--raw { text-transform: none; }

/* ── Thư viện ảnh trong modal ── */
.mapt-img-sec[b-11bgz15cgr] {
    border-top: 1px solid var(--nm-border);
    padding-top: 14px;
    display: flex; flex-direction: column; gap: 12px;
}
.mapt-img-hd[b-11bgz15cgr] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mapt-img-count[b-11bgz15cgr] { font-size: 11.5px; color: var(--nm-muted); }
.mapt-img-loading[b-11bgz15cgr] { padding: 18px; }

.mapt-gallery[b-11bgz15cgr] { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mapt-img-card[b-11bgz15cgr] {
    position: relative; border-radius: var(--nm-r-input); overflow: hidden;
    border: 1px solid var(--nm-border); background: var(--nm-surface-2); aspect-ratio: 4 / 3;
}
.mapt-img-card.is-primary[b-11bgz15cgr] { border-color: var(--nm-brand-500); box-shadow: 0 0 0 2px var(--nm-brand-50); }
.mapt-img-card img[b-11bgz15cgr] { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapt-img-badge[b-11bgz15cgr] {
    position: absolute; top: 6px; left: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--nm-r-pill);
    font-size: 10.5px; font-weight: 700;
    background: var(--nm-brand-500); color: var(--nm-on-brand);
    box-shadow: var(--nm-shadow-sm);
}
.mapt-img-ovl[b-11bgz15cgr] {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: flex-end;
    gap: 6px; padding: 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, transparent 55%);
    opacity: 0; transition: opacity .14s;
}
.mapt-img-card:hover .mapt-img-ovl[b-11bgz15cgr],
.mapt-img-card:focus-within .mapt-img-ovl[b-11bgz15cgr] { opacity: 1; }
/* Nút thao tác nổi trên ảnh — nền đặc để đọc được trên mọi tấm */
.mapt-img-ovl[b-11bgz15cgr]  .mapt-img-act {
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow-sm);
}

@media (max-width: 640px) {
    .nm-list-page[b-11bgz15cgr] { padding: 16px 14px 22px; }
    .tb-search[b-11bgz15cgr] { flex: 1; width: auto; }
    [b-11bgz15cgr] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-11bgz15cgr] { display: none; }
    .tb-filters.is-open[b-11bgz15cgr] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-country[b-11bgz15cgr],
    .tb-filters.is-open .tb-select[b-11bgz15cgr] { flex: 1 1 100%; min-width: 0; }
    .tb-select[b-11bgz15cgr]  .nm-select-wrap,
    .tb-select[b-11bgz15cgr]  .nm-select { width: 100%; }
}
/* /src/Features/MasterData/Pages/Manager/CabinClassesIndex.razor.rz.scp.css */
/* /manager/master/cabin-classes — chuẩn nm-list token-only:
   head + NmToolbar lọc + NmCard/DataGrid + NmModal. Không hard-code màu. */
.nm-list-page[b-li7o53fuxv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-li7o53fuxv] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-li7o53fuxv] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-li7o53fuxv] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-li7o53fuxv] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Toolbar ── */
/* NmInput mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-li7o53fuxv] .mcab-toolbar .nm-input-wrap { width: 320px; flex: 0 0 auto; }

.mcab-chips[b-li7o53fuxv] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Số đếm trong chip: tách khỏi nhãn bằng nền mờ để đọc lướt được */
[b-li7o53fuxv] .mcab-chips .nm-chip b {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
[b-li7o53fuxv] .mcab-chips .nm-chip--active b { background: var(--nm-surface); }

/* ── Card danh sách ── */
[b-li7o53fuxv] .mcab-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcab-card-ico[b-li7o53fuxv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.mcab-card-title[b-li7o53fuxv] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.mcab-card-count[b-li7o53fuxv] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.mcab-card-hint[b-li7o53fuxv] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.mcab-order[b-li7o53fuxv] {
    display: inline-block;
    min-width: 26px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

.nm-code-pill[b-li7o53fuxv] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cell-2line[b-li7o53fuxv] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-li7o53fuxv] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cell-2line__sub[b-li7o53fuxv] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Từ khóa CSV render thành tag — thiếu từ khóa là lỗi cấu hình nên tô cảnh báo */
.mcab-kws[b-li7o53fuxv] { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mcab-kw-empty[b-li7o53fuxv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--nm-warn);
}

.nm-row-actions[b-li7o53fuxv] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-li7o53fuxv] .mcab-row-off .nm-grid__td { opacity: .6; }

/* ── Footer phân trang ── */
.mcab-foot[b-li7o53fuxv] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.mcab-form[b-li7o53fuxv] { display: flex; flex-direction: column; gap: 14px; }

[b-li7o53fuxv] .mcab-mono input,
[b-li7o53fuxv] input.mcab-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .02em;
}

.mcab-kw-preview[b-li7o53fuxv] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: -8px;
    min-height: 22px;
}
.mcab-kw-label[b-li7o53fuxv] { font-size: 11.5px; color: var(--nm-muted); }

.mcab-form-switch[b-li7o53fuxv] { display: flex; flex-direction: column; gap: 4px; }
.mcab-form-hint[b-li7o53fuxv] { font-size: 11.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-li7o53fuxv] { padding: 16px 14px 22px; }
    [b-li7o53fuxv] .mcab-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
    .mcab-card-hint[b-li7o53fuxv] { margin-left: 0; flex-basis: 100%; }
}
/* /src/Features/MasterData/Pages/Manager/CountriesIndex.razor.rz.scp.css */
/* /manager/master/countries — chuẩn nm-list token-only:
   head + NmToolbar lọc + NmCard/DataGrid + NmModal. Không hard-code màu. */
.nm-list-page[b-gl95dh8mdx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-gl95dh8mdx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-gl95dh8mdx] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-gl95dh8mdx] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-gl95dh8mdx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Toolbar ── */
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-gl95dh8mdx] .mcty-toolbar .nm-input-wrap { width: 300px; flex: 0 0 auto; }
[b-gl95dh8mdx] .mcty-toolbar .nm-select-wrap { width: 210px; flex: 0 0 auto; }

.mcty-stat[b-gl95dh8mdx] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.mcty-stat b[b-gl95dh8mdx] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.mcty-stat + .mcty-stat[b-gl95dh8mdx] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card danh sách ── */
[b-gl95dh8mdx] .mcty-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mcty-card-ico[b-gl95dh8mdx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.mcty-card-title[b-gl95dh8mdx] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.mcty-card-count[b-gl95dh8mdx] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.mcty-card-hint[b-gl95dh8mdx] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.mcty-flag[b-gl95dh8mdx] { font-size: 19px; line-height: 1; }

.cell-2line[b-gl95dh8mdx] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-gl95dh8mdx] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cell-2line__sub[b-gl95dh8mdx] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.mcty-codes[b-gl95dh8mdx] { display: inline-flex; align-items: center; gap: 6px; }
.nm-code-pill[b-gl95dh8mdx] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.mcty-alpha3[b-gl95dh8mdx] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-muted);
    letter-spacing: .02em;
}

/* Châu lục — chấm màu phân biệt nhanh, chữ vẫn là nguồn thông tin chính */
.mcty-cont[b-gl95dh8mdx] { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mcty-cont-dot[b-gl95dh8mdx] { width: 8px; height: 8px; border-radius: var(--nm-r-pill); flex-shrink: 0; background: var(--nm-muted); }
.mcty-cont-dot.is-asia[b-gl95dh8mdx] { background: var(--nm-brand-500); }
.mcty-cont-dot.is-europe[b-gl95dh8mdx] { background: var(--nm-info); }
.mcty-cont-dot.is-americas[b-gl95dh8mdx] { background: var(--nm-violet); }
.mcty-cont-dot.is-africa[b-gl95dh8mdx] { background: var(--nm-warn); }
.mcty-cont-dot.is-oceania[b-gl95dh8mdx] { background: var(--nm-ok); }
.mcty-cont-dot.is-antarctica[b-gl95dh8mdx] { background: var(--nm-pending); }

.mcty-phone[b-gl95dh8mdx] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.mcty-dash[b-gl95dh8mdx] { color: var(--nm-muted); }

.nm-row-actions[b-gl95dh8mdx] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer phân trang ── */
.mcty-foot[b-gl95dh8mdx] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.mcty-form[b-gl95dh8mdx] { display: flex; flex-direction: column; gap: 14px; }

/* Khối định danh: xem trước cờ bám cạnh 3 ô mã */
.mcty-ident[b-gl95dh8mdx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.mcty-ident-grid[b-gl95dh8mdx] { flex: 1; min-width: 0; }
.mcty-flag-preview[b-gl95dh8mdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    font-size: 32px;
    line-height: 1;
}

[b-gl95dh8mdx] .mcty-mono input,
[b-gl95dh8mdx] input.mcty-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mcty-form-switch[b-gl95dh8mdx] { display: flex; flex-direction: column; gap: 4px; }
.mcty-form-hint[b-gl95dh8mdx] { font-size: 11.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-gl95dh8mdx] { padding: 16px 14px 22px; }
    [b-gl95dh8mdx] .mcty-toolbar .nm-input-wrap,
    [b-gl95dh8mdx] .mcty-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
    .mcty-ident[b-gl95dh8mdx] { flex-direction: column; align-items: stretch; }
    .mcty-flag-preview[b-gl95dh8mdx] { width: 100%; height: 52px; }
}
/* /src/Features/MasterData/Pages/Manager/ExchangeRatesIndex.razor.rz.scp.css */
/* /manager/master/exchange-rates — chuẩn nm-list token-only:
   head + NmToolbar lọc + NmCard/DataGrid + 2 NmModal. Không hard-code màu.
   Khung copy từ CountriesIndex để các màn danh mục nhìn như một hệ. */
.nm-list-page[b-y0kzwq54ml] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-y0kzwq54ml] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-y0kzwq54ml] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-y0kzwq54ml] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-y0kzwq54ml] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Toolbar ── */
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-y0kzwq54ml] .mxr-toolbar .nm-input-wrap { width: 260px; flex: 0 0 auto; }
[b-y0kzwq54ml] .mxr-toolbar .nm-select-wrap { width: 160px; flex: 0 0 auto; }

.mxr-stat[b-y0kzwq54ml] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.mxr-stat b[b-y0kzwq54ml] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.mxr-stat + .mxr-stat[b-y0kzwq54ml] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card danh sách ── */
[b-y0kzwq54ml] .mxr-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mxr-card-ico[b-y0kzwq54ml] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.mxr-card-title[b-y0kzwq54ml] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.mxr-card-count[b-y0kzwq54ml] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.mxr-card-hint[b-y0kzwq54ml] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.nm-code-pill[b-y0kzwq54ml] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* GLOBAL là tỷ giá NỀN cho mọi dịch vụ — tô thương hiệu để tách khỏi override từng dịch vụ */
.nm-code-pill.is-global[b-y0kzwq54ml] { background: var(--nm-brand-50); color: var(--nm-brand-700); cursor: help; }

.cell-2line[b-y0kzwq54ml] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line--right[b-y0kzwq54ml] { align-items: flex-end; }
.cell-2line__sub[b-y0kzwq54ml] {
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.mxr-rate[b-y0kzwq54ml] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Trung bình chỉ dùng để HIỂN THỊ quy đổi, không phải giá thu — nhạt hơn 2 cột kia */
.mxr-rate--mid[b-y0kzwq54ml] { font-weight: 500; color: var(--nm-ink-2); }

.mxr-spread-val[b-y0kzwq54ml] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

.mxr-symbol[b-y0kzwq54ml] { font-size: 14px; color: var(--nm-ink); }
.mxr-dash[b-y0kzwq54ml] { color: var(--nm-muted); }

.nm-row-actions[b-y0kzwq54ml] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Dòng đang thực sự dùng để quy đổi — viền trái mảnh, đủ để quét mắt mà không nhuộm cả bảng */
[b-y0kzwq54ml] .mxr-row-live .nm-grid__td:first-child { box-shadow: inset 2px 0 0 var(--nm-ok); }

/* ── Footer phân trang ── */
.mxr-foot[b-y0kzwq54ml] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.mxr-form[b-y0kzwq54ml] { display: flex; flex-direction: column; gap: 14px; }

.mxr-note[b-y0kzwq54ml] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-info-soft);
    color: var(--nm-info);
    font-size: 12px;
    line-height: 1.5;
}

/* Phản hồi sống về chênh lệch / vi phạm quy tắc, ngay dưới 3 ô tỷ giá */
.mxr-spread[b-y0kzwq54ml] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 26px;
    margin-top: -4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
}
.mxr-spread.is-bad[b-y0kzwq54ml] { color: var(--nm-bad); }

/* Tỷ giá đọc theo cột số → canh phải + chữ số đều bề ngang.
   Phải kèm `input` trong selector: `.nm-input` của NmInput cũng đặt font-family, cùng độ ưu tiên
   thì thứ tự trong bundle quyết định — thêm tên thẻ để chắc chắn thắng. */
[b-y0kzwq54ml] input.mxr-num {
    text-align: right;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}
[b-y0kzwq54ml] input.mxr-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mxr-divider[b-y0kzwq54ml] {
    padding-top: 8px;
    border-top: 1px dashed var(--nm-border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--nm-muted);
}

.mxr-cur-actions[b-y0kzwq54ml] { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.mxr-form-switch[b-y0kzwq54ml] { display: flex; flex-direction: column; gap: 4px; }
.mxr-form-hint[b-y0kzwq54ml] { font-size: 11.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-y0kzwq54ml] { padding: 16px 14px 22px; }
    [b-y0kzwq54ml] .mxr-toolbar .nm-input-wrap,
    [b-y0kzwq54ml] .mxr-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/MasterData/Pages/Manager/FlightConditionsEdit.razor.rz.scp.css */
/* /manager/master/flight-conditions/{id} — token-only, chuẩn Nm*.
   head + NmTabs (Tổng quan / Ma trận / Cấu trúc). Prefix fce-. */
.nm-list-page[b-hs4n4eku9a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-hs4n4eku9a] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.fce-head-left[b-hs4n4eku9a] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nm-list-title[b-hs4n4eku9a] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
}
.nm-list-sub[b-hs4n4eku9a] { margin: 3px 0 0; font-size: 13px; color: var(--nm-muted); }

.fce-logo[b-hs4n4eku9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--nm-border);
    border-radius: 10px;
    background: var(--nm-surface);
    overflow: hidden;
}
.fce-logo img[b-hs4n4eku9a] { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fce-logo-fb[b-hs4n4eku9a] {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-muted);
}
.nm-code-pill[b-hs4n4eku9a] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
}

/* ── Card chung ── */
[b-hs4n4eku9a] .fce-card .nm-card__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fce-card-title[b-hs4n4eku9a] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.fce-card-count[b-hs4n4eku9a] {
    font-size: 11.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.fce-card-hint[b-hs4n4eku9a] { font-size: 11.5px; color: var(--nm-muted); }
.fce-card-actions[b-hs4n4eku9a] { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.fce-stack[b-hs4n4eku9a] { display: flex; flex-direction: column; gap: 14px; }
.fce-two-col[b-hs4n4eku9a] { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }

/* ── Tab: Tổng quan ── */
.fce-form[b-hs4n4eku9a] { display: flex; flex-direction: column; gap: 14px; }
.fce-save-row[b-hs4n4eku9a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
}
.fce-switch-block[b-hs4n4eku9a] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fce-hint[b-hs4n4eku9a] { font-size: 11.5px; color: var(--nm-muted); }

.fce-preview[b-hs4n4eku9a] { padding: 14px; background: var(--nm-surface-2); }

/* ── Tab: Ma trận ── */
.fce-matrix-wrap[b-hs4n4eku9a] { overflow: auto; max-height: calc(100vh - 340px); }
.fce-matrix[b-hs4n4eku9a] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.fce-matrix th[b-hs4n4eku9a],
.fce-matrix td[b-hs4n4eku9a] { border-bottom: 1px solid var(--nm-border); border-right: 1px solid var(--nm-border); }
.fce-matrix th:last-child[b-hs4n4eku9a],
.fce-matrix td:last-child[b-hs4n4eku9a] { border-right: 0; }

.fce-matrix thead th[b-hs4n4eku9a] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    background: var(--nm-surface-2);
    text-align: center;
    font-weight: 700;
    color: var(--nm-ink-2);
}
.fce-matrix-grouprow th[b-hs4n4eku9a] { top: 0; }
.fce-matrix-group[b-hs4n4eku9a] { background: var(--nm-brand-50); color: var(--nm-brand-700); font-size: 11.5px; letter-spacing: .02em; }
.fce-matrix-colhead[b-hs4n4eku9a] { min-width: 150px; }
.fce-matrix-collabel[b-hs4n4eku9a] { display: block; }
.fce-matrix-colcode[b-hs4n4eku9a] {
    display: block;
    margin-top: 2px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--nm-muted);
}
.fce-matrix-corner[b-hs4n4eku9a] {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 190px;
    min-width: 190px;
    background: var(--nm-surface-2);
}

.fce-matrix-bodygroup td[b-hs4n4eku9a] {
    padding: 6px 12px;
    background: var(--nm-surface-2);
    font-weight: 700;
    font-size: 11.5px;
    color: var(--nm-brand-700);
    letter-spacing: .02em;
}
.fce-matrix-rowlabel[b-hs4n4eku9a] {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 190px;
    min-width: 190px;
    padding: 6px 12px;
    background: var(--nm-surface);
    font-weight: 500;
    color: var(--nm-ink);
}

.fce-matrix-cell[b-hs4n4eku9a] { padding: 3px; background: var(--nm-surface); vertical-align: top; }
.fce-matrix-cell textarea[b-hs4n4eku9a] {
    width: 100%;
    min-width: 140px;
    padding: 5px 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--nm-ink);
    font-family: var(--nm-font);
    font-size: 12.5px;
    line-height: 1.4;
    resize: vertical;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.fce-matrix-cell textarea:hover[b-hs4n4eku9a] { border-color: var(--nm-border); }
.fce-matrix-cell textarea:focus[b-hs4n4eku9a] { border-color: var(--nm-brand-500); box-shadow: 0 0 0 3px var(--nm-brand-50); background: var(--nm-surface); }
.fce-matrix-cell.is-dirty[b-hs4n4eku9a] { background: var(--nm-warn-soft); }

.fce-dirty[b-hs4n4eku9a] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--nm-warn); }
.fce-dirty-dot[b-hs4n4eku9a] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); background: var(--nm-warn); }

.fce-legend[b-hs4n4eku9a] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-top: 1px solid var(--nm-border);
    font-size: 11.5px;
    color: var(--nm-muted);
}
.fce-legend-box[b-hs4n4eku9a] {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    vertical-align: -1px;
    border: 1px solid var(--nm-border);
    border-radius: 3px;
    background: var(--nm-warn-soft);
}
.fce-legend-sep[b-hs4n4eku9a] { width: 3px; height: 3px; border-radius: var(--nm-r-pill); background: var(--nm-border-strong); }

/* ── Tab: Cấu trúc ── */
.fce-struct-wrap[b-hs4n4eku9a] { overflow-x: auto; }
.fce-struct[b-hs4n4eku9a] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fce-struct thead th[b-hs4n4eku9a] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    text-align: left;
    font-weight: 700;
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.fce-struct tbody td[b-hs4n4eku9a] { padding: 5px 8px; border-bottom: 1px solid var(--nm-border); vertical-align: middle; }
.fce-struct tbody tr:last-child td[b-hs4n4eku9a] { border-bottom: 0; }
.fce-struct-idx[b-hs4n4eku9a] {
    width: 38px;
    text-align: center;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}
.fce-struct-act[b-hs4n4eku9a] { width: 74px; text-align: right; white-space: nowrap; }

[b-hs4n4eku9a] .fce-mono { font-family: ui-monospace, 'JetBrains Mono', monospace; }

@media (max-width: 1100px) {
    .fce-two-col[b-hs4n4eku9a] { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .nm-list-page[b-hs4n4eku9a] { padding: 16px 14px 22px; }
    .fce-matrix-wrap[b-hs4n4eku9a] { max-height: none; }
    .fce-matrix-corner[b-hs4n4eku9a],
    .fce-matrix-rowlabel[b-hs4n4eku9a] { position: static; width: auto; min-width: 130px; }
}
/* /src/Features/MasterData/Pages/Manager/FlightConditionsIndex.razor.rz.scp.css */
/* /manager/master/flight-conditions — chuẩn nm-list token-only.
   head + thẻ chế độ hiển thị + dải số liệu bấm-để-lọc + NmCard/DataGrid. Prefix fcd-. */
.nm-list-page[b-sjgni55twr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-sjgni55twr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-sjgni55twr] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-sjgni55twr] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-sjgni55twr] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Thẻ chế độ hiển thị cho khách ── */
.fcd-mode[b-sjgni55twr] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fcd-mode-ico[b-sjgni55twr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 15px;
}
.fcd-mode-ico.is-off[b-sjgni55twr] { background: var(--nm-bad-soft); color: var(--nm-bad); }
.fcd-mode-text[b-sjgni55twr] { flex: 1; min-width: 220px; }
.fcd-mode-title[b-sjgni55twr] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.fcd-mode-sub[b-sjgni55twr] { margin-top: 2px; font-size: 12px; color: var(--nm-muted); }
.fcd-mode-actions[b-sjgni55twr] { display: flex; align-items: center; gap: 10px; }

/* ── Dải số liệu (3 mục đầu bấm được để lọc) ── */
.fcd-stats[b-sjgni55twr] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fcd-stat[b-sjgni55twr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 11px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    font-family: var(--nm-font);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
.fcd-stat.is-static[b-sjgni55twr] { cursor: default; background: var(--nm-surface-2); }
button.fcd-stat:hover[b-sjgni55twr] { border-color: var(--nm-border-strong); }
.fcd-stat.is-on[b-sjgni55twr] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}
.fcd-stat-lbl[b-sjgni55twr] { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.fcd-stat-val[b-sjgni55twr] { font-size: 21px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fcd-dot[b-sjgni55twr] { width: 8px; height: 8px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.fcd-dot.accent[b-sjgni55twr] { background: var(--nm-brand-500); }
.fcd-dot.good[b-sjgni55twr] { background: var(--nm-ok); }
.fcd-dot.info[b-sjgni55twr] { background: var(--nm-info); }
.fcd-dot.muted[b-sjgni55twr] { background: var(--nm-muted); }

/* ── Card danh sách ── */
[b-sjgni55twr] .fcd-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fcd-card-ico[b-sjgni55twr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.fcd-card-title[b-sjgni55twr] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.fcd-card-count[b-sjgni55twr] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.fcd-card-hint[b-sjgni55twr] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

.fcd-toolbar[b-sjgni55twr] { padding: 12px 14px; border-bottom: 1px solid var(--nm-border); }
[b-sjgni55twr] .fcd-toolbar-inner .nm-input-wrap { width: 340px; flex: 0 0 auto; }

/* ── Cell trong DataGrid ── */
.fcd-airline[b-sjgni55twr] { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.fcd-airline:hover .fcd-airline-name[b-sjgni55twr] { color: var(--nm-brand-700); }
.fcd-logo[b-sjgni55twr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--nm-border);
    border-radius: 8px;
    background: var(--nm-surface);
    overflow: hidden;
}
.fcd-logo img[b-sjgni55twr] { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.fcd-logo-fb[b-sjgni55twr] {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
}
.fcd-airline-text[b-sjgni55twr] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcd-airline-name[b-sjgni55twr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
}
.fcd-airline-sub[b-sjgni55twr] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.nm-code-pill[b-sjgni55twr] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .02em;
}

.fcd-size[b-sjgni55twr] { display: inline-flex; flex-direction: column; gap: 1px; }
.fcd-size-main[b-sjgni55twr] { font-weight: 600; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.fcd-size-sub[b-sjgni55twr] { font-size: 11px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

.fcd-date[b-sjgni55twr] { font-size: 12.5px; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcd-date.is-dim[b-sjgni55twr] { color: var(--nm-muted); }

.fcd-toggle[b-sjgni55twr] { display: inline-flex; align-items: center; gap: 9px; }
.fcd-toggle-lbl[b-sjgni55twr] { font-size: 12px; color: var(--nm-muted); white-space: nowrap; }
.fcd-toggle-lbl.is-on[b-sjgni55twr] { color: var(--nm-ok); font-weight: 600; }

.nm-row-actions[b-sjgni55twr] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-sjgni55twr] .fcd-row-off .nm-grid__td { opacity: .62; }

@media (max-width: 900px) {
    .fcd-stats[b-sjgni55twr] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .nm-list-page[b-sjgni55twr] { padding: 16px 14px 22px; }
    [b-sjgni55twr] .fcd-toolbar-inner .nm-input-wrap { width: 100%; flex: 1 1 100%; }
    .fcd-mode-actions[b-sjgni55twr] { width: 100%; }
}
/* /src/Features/MasterData/Pages/Manager/GdsIndex.razor.rz.scp.css */
/* /manager/master/gds — chuẩn nm-list token-only, khung dựng theo CountriesIndex để cụm
   Dữ liệu gốc nhìn như một hệ. Chrome (card/grid/modal/field/switch) do primitive Nm* lo;
   file này chỉ style shell trang + cell tuỳ biến. Prefix riêng: mgds- */
.nm-list-page[b-fa71mo22lu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-fa71mo22lu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-fa71mo22lu] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-fa71mo22lu] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-fa71mo22lu] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải trạng thái áp dụng — mỗi mục là nút lọc ── */
.mgds-stats[b-fa71mo22lu] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.mgds-stats[b-fa71mo22lu]::-webkit-scrollbar { display: none; }

.mgds-stat[b-fa71mo22lu] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.mgds-stats > .mgds-stat:first-child[b-fa71mo22lu] { border-left: 0; }
.mgds-stat:hover .mgds-stat__lbl[b-fa71mo22lu] { color: var(--nm-ink); }
.mgds-stat.is-on .mgds-stat__lbl[b-fa71mo22lu] { color: var(--nm-brand-700); font-weight: 700; }
.mgds-stat.is-on .mgds-stat__val[b-fa71mo22lu] { color: var(--nm-brand-700); }

.mgds-stat__dot[b-fa71mo22lu] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.mgds-stat__dot--accent[b-fa71mo22lu] { background: var(--nm-brand-500); }
.mgds-stat__dot--good[b-fa71mo22lu]   { background: var(--nm-ok); }
.mgds-stat__dot--warn[b-fa71mo22lu]   { background: var(--nm-warn); }
.mgds-stat__dot--muted[b-fa71mo22lu]  { background: var(--nm-muted); }

.mgds-stat__lbl[b-fa71mo22lu] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.mgds-stat__val[b-fa71mo22lu] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Tuyến mẫu: kênh sẽ chạy thật cho quốc nội / quốc tế ── */
.mgds-preview[b-fa71mo22lu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.mgds-preview__item[b-fa71mo22lu] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.mgds-preview__lbl[b-fa71mo22lu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-muted);
    margin-right: 2px;
}
.mgds-preview__lbl i[b-fa71mo22lu] { color: var(--nm-brand-500); font-size: 12px; }
/* Không kênh nào = trang tìm vé sẽ chạy danh sách dự phòng → phải nổi lên như cảnh báo */
.mgds-preview__empty[b-fa71mo22lu] {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-warn-soft);
    color: var(--nm-warn);
}

/* ── Toolbar ── */
/* NmInput mặc định giãn 100% → khoá bề rộng để nằm gọn trong hàng toolbar */
[b-fa71mo22lu] .mgds-toolbar .nm-input-wrap { width: 320px; flex: 0 0 auto; }
.mgds-scope-filter[b-fa71mo22lu] { width: 190px; flex: 0 0 auto; }

.mgds-note[b-fa71mo22lu] {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    color: var(--nm-muted);
    max-width: 46ch;
    line-height: 1.35;
}
.mgds-note i[b-fa71mo22lu] { color: var(--nm-info); flex-shrink: 0; margin-top: 1px; }

/* ── Card danh sách ── */
[b-fa71mo22lu] .mgds-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mgds-card-ico[b-fa71mo22lu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.mgds-card-title[b-fa71mo22lu] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.mgds-card-count[b-fa71mo22lu] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.mgds-card-hint[b-fa71mo22lu] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell ── */
.nm-code-pill[b-fa71mo22lu] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cell-2line[b-fa71mo22lu] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-fa71mo22lu] { font-weight: 500; color: var(--nm-ink); }
.cell-2line__sub[b-fa71mo22lu] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

/* Phạm vi tìm kiếm — chip tông khác nhau để quét cả cột ra ngay kênh nào phục vụ chiều nào */
.mgds-scope[b-fa71mo22lu] { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.mgds-scope__chip[b-fa71mo22lu] {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    white-space: nowrap;
}
.mgds-scope__chip--both[b-fa71mo22lu] { background: var(--nm-brand-50); color: var(--nm-brand-700); }
.mgds-scope__chip--dom[b-fa71mo22lu]  { background: var(--nm-ok-soft); color: var(--nm-ok); }
.mgds-scope__chip--intl[b-fa71mo22lu] { background: var(--nm-info-soft); color: var(--nm-info); }
/* "Không tìm" là lựa chọn hợp lệ (vd 1A chỉ giữ để tra cutoff) nên xám, không cảnh báo */
.mgds-scope__chip--off[b-fa71mo22lu]  { background: var(--nm-surface-2); color: var(--nm-muted); }
.mgds-scope__ord[b-fa71mo22lu] { font-size: 10.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

/* Cutoff — số phút là con số nghiệp vụ, dòng dưới chỉ quy đổi giờ cho dễ đọc */
.mgds-cutoff[b-fa71mo22lu] { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mgds-cutoff__main[b-fa71mo22lu] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mgds-cutoff__sub[b-fa71mo22lu] { font-size: 11px; color: var(--nm-muted); white-space: nowrap; }
/* 0 phút = không chặn — phải nhìn ra ngay chứ không để admin đọc số 0 rồi tự suy */
.mgds-cutoff__none[b-fa71mo22lu] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-warn-soft);
    color: var(--nm-warn);
    white-space: nowrap;
}

.mgds-status[b-fa71mo22lu] { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }

.nm-row-actions[b-fa71mo22lu] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Hàng đã tắt — làm nhạt để quét mắt ra ngay GDS không còn hiệu lực */
[b-fa71mo22lu] .mgds-row-off .nm-grid__td { opacity: .6; }

/* ── Footer phân trang ── */
.mgds-foot[b-fa71mo22lu] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.mgds-form[b-fa71mo22lu] { display: flex; flex-direction: column; gap: 14px; }

[b-fa71mo22lu] .mgds-mono input,
[b-fa71mo22lu] input.mgds-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mgds-form-switch[b-fa71mo22lu] { display: flex; flex-direction: column; gap: 4px; }
.mgds-form-hint[b-fa71mo22lu] { font-size: 11.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-fa71mo22lu] { padding: 16px 14px 22px; }
    [b-fa71mo22lu] .mgds-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
    .mgds-scope-filter[b-fa71mo22lu] { width: 100%; flex: 1 1 100%; }
    .mgds-note[b-fa71mo22lu] { max-width: none; }
}
/* /src/Features/Notifications/Pages/Ca/CaNotifications.razor.rz.scp.css */
/* /ca/notifications — trung tâm thông báo, chuẩn nm-list (token --nm-* only).
   Prefix riêng của trang: cn-. Chrome nút/chip/card/empty do Nm* lo. */

/* ── Shell nm-list (mỗi trang tự khai, không có file dùng chung) ── */
.nm-list-page[b-dxfgv54dns] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-dxfgv54dns] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-dxfgv54dns] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-dxfgv54dns] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-dxfgv54dns] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng ── */
.cn-stats[b-dxfgv54dns] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.cn-stats[b-dxfgv54dns]::-webkit-scrollbar { display: none; }

.cn-stat[b-dxfgv54dns] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.cn-stat + .cn-stat[b-dxfgv54dns] { border-left: 1px solid var(--nm-border); }

.cn-stat__dot[b-dxfgv54dns] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.cn-stat__dot--accent[b-dxfgv54dns] { background: var(--nm-brand-500); }
.cn-stat__dot--good[b-dxfgv54dns] { background: var(--nm-ok); }
.cn-stat__dot--info[b-dxfgv54dns] { background: var(--nm-info); }

.cn-stat__lbl[b-dxfgv54dns] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.cn-stat__val[b-dxfgv54dns] {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.cn-chips[b-dxfgv54dns] { display: inline-flex; align-items: center; gap: 6px; }
.cn-chip-count[b-dxfgv54dns] {
    margin-left: 5px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}
.cn-search[b-dxfgv54dns] { width: 280px; max-width: 100%; }
.cn-cat[b-dxfgv54dns] { min-width: 168px; }

/* Dòng phạm vi lọc (đang kéo nốt / đã chạm trần) — nằm giữa toolbar và danh sách */
.cn-scope[b-dxfgv54dns] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 0;
    padding: 0 2px;
    font-size: 12px;
    color: var(--nm-muted);
}
.cn-scope--warn[b-dxfgv54dns] { color: var(--nm-warn); }

/* ── Danh sách ── */
.cn-group-label[b-dxfgv54dns] {
    padding: 10px 18px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nm-muted);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}
.cn-group-label:first-child[b-dxfgv54dns] { border-top: 0; }

.cn-list[b-dxfgv54dns] { display: flex; flex-direction: column; }

.cn-row[b-dxfgv54dns] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--nm-border);
    background: var(--nm-surface);
    transition: background .12s;
}
.cn-row:last-child[b-dxfgv54dns] { border-bottom: 0; }
.cn-row.is-link[b-dxfgv54dns] { cursor: pointer; }
.cn-row:hover[b-dxfgv54dns] { background: var(--nm-surface-2); }
.cn-row:focus-visible[b-dxfgv54dns] { outline: 2px solid var(--nm-brand-500); outline-offset: -2px; }
.cn-row.is-skeleton[b-dxfgv54dns] { align-items: center; }

/* Chưa đọc: nền cam rất nhạt + vạch cam bên trái (giữ nguyên khi hover) */
.cn-row.is-unread[b-dxfgv54dns] {
    background: var(--nm-brand-50);
    box-shadow: inset 3px 0 0 var(--nm-brand-500);
}
.cn-row.is-unread:hover[b-dxfgv54dns] { background: color-mix(in srgb, var(--nm-brand-500) 10%, var(--nm-surface)); }

.cn-ico[b-dxfgv54dns] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 15px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--tone, var(--nm-pending)) 13%, transparent);
    color: var(--tone, var(--nm-pending));
}
.cn-ico--success[b-dxfgv54dns] { --tone: var(--nm-ok); }
.cn-ico--error[b-dxfgv54dns] { --tone: var(--nm-bad); }
.cn-ico--warning[b-dxfgv54dns] { --tone: var(--nm-warn); }
.cn-ico--info[b-dxfgv54dns] { --tone: var(--nm-info); }
.cn-ico--default[b-dxfgv54dns] { --tone: var(--nm-brand-500); }

.cn-body[b-dxfgv54dns] { flex: 1; min-width: 0; }
.cn-skel-gap[b-dxfgv54dns] { margin-top: 6px; }

.cn-title[b-dxfgv54dns] {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-ink);
    line-height: 1.35;
}
.cn-row.is-unread .cn-title[b-dxfgv54dns] { font-weight: 700; }

.cn-msg[b-dxfgv54dns] {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--nm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-meta[b-dxfgv54dns] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--nm-muted);
}
.cn-tag[b-dxfgv54dns] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}
.cn-time[b-dxfgv54dns] { font-variant-numeric: tabular-nums; }

/* "Xem chi tiết" chỉ hiện khi hàng thật sự có đích đến — hàng không có link thì không gợi ý sai */
.cn-go[b-dxfgv54dns] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--nm-brand-600);
    font-weight: 600;
    opacity: 0;
    transition: opacity .12s;
}
.cn-row:hover .cn-go[b-dxfgv54dns], .cn-row:focus-visible .cn-go[b-dxfgv54dns] { opacity: 1; }

.cn-side[b-dxfgv54dns] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-top: 4px; }
.cn-dot[b-dxfgv54dns] { width: 8px; height: 8px; border-radius: 50%; background: var(--nm-brand-500); flex-shrink: 0; }

.cn-more[b-dxfgv54dns] { display: flex; justify-content: center; padding: 14px 0; }

/* ── Drawer cài đặt ── */
.cn-prefs-hint[b-dxfgv54dns] { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--nm-muted); }
.cn-prefs[b-dxfgv54dns] { display: flex; flex-direction: column; }
.cn-pref[b-dxfgv54dns] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--nm-border);
}
.cn-pref:last-child[b-dxfgv54dns] { border-bottom: 0; }
.cn-pref__text[b-dxfgv54dns] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-pref__label[b-dxfgv54dns] { font-size: 13.5px; font-weight: 600; color: var(--nm-ink); }
.cn-pref__hint[b-dxfgv54dns] { font-size: 11.5px; line-height: 1.4; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-dxfgv54dns] { padding: 16px 14px 22px; }
    /* Chip / ô tìm / bộ lọc mỗi thứ một hàng — nhét chung 1 hàng thì ô tìm còn ~120px, mất chữ */
    .cn-chips[b-dxfgv54dns] { flex: 1 1 100%; }
    .cn-search[b-dxfgv54dns] { flex: 1 1 100%; width: auto; }
    .cn-search[b-dxfgv54dns]  .nm-input-wrap { width: 100%; }
    .cn-cat[b-dxfgv54dns] { flex: 1 1 100%; }
    .cn-cat[b-dxfgv54dns]  .nm-select-wrap, .cn-cat[b-dxfgv54dns]  .nm-select { width: 100%; }
    .cn-row[b-dxfgv54dns] { padding: 12px 14px; }
    .cn-go[b-dxfgv54dns] { display: none; }          /* mobile không có hover — bỏ hẳn cho gọn */
    .cn-group-label[b-dxfgv54dns] { padding: 9px 14px 5px; }
}
/* /src/Features/Notifications/Pages/Manager/EmailTemplatesIndex.razor.rz.scp.css */
/* EmailTemplatesIndex — Manager Dashboard v4 theme. Prefix: email- */
.email-root[b-zwt6jp4wnv] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink); background: var(--d-bg);
}
.email-num[b-zwt6jp4wnv] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.email-hero[b-zwt6jp4wnv] {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    padding: 18px 28px 14px; border-bottom: 1px solid var(--d-line); flex-shrink: 0;
}
.email-hero h1[b-zwt6jp4wnv] {
    margin: 0; font-family: 'Inter Tight','Inter',sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15;
}
.email-hero h1 em[b-zwt6jp4wnv] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.email-hero-meta[b-zwt6jp4wnv] {
    margin-top: 6px; display: flex; align-items: center; gap: 12px;
    color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap;
}
.email-hero-meta .dot[b-zwt6jp4wnv] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.email-btn[b-zwt6jp4wnv] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    transition: background .12s;
}
.email-btn:hover[b-zwt6jp4wnv] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.email-btn-accent[b-zwt6jp4wnv] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.email-btn-accent:hover[b-zwt6jp4wnv] { background: var(--d-accent-grad-hover); color: #fff; }
.email-btn-good[b-zwt6jp4wnv] {
    background: color-mix(in srgb, var(--d-good) 12%, transparent);
    color: var(--d-good); border-color: color-mix(in srgb, var(--d-good) 30%, transparent);
}
.email-btn-good:hover[b-zwt6jp4wnv] { background: color-mix(in srgb, var(--d-good) 18%, transparent); color: var(--d-good); }
.email-btn-danger[b-zwt6jp4wnv] {
    background: var(--d-danger); color: #fff; border-color: transparent;
}
.email-btn-danger:hover[b-zwt6jp4wnv] { background: #b91c1c; color: #fff; }

.email-body[b-zwt6jp4wnv] { padding: 14px 28px; }
.email-card[b-zwt6jp4wnv] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); overflow: auto;
}

.email-tbl[b-zwt6jp4wnv] { width: 100%; border-collapse: collapse; font-size: 14px; }
.email-tbl thead th[b-zwt6jp4wnv] {
    font-size: 10.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: left; padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface); white-space: nowrap;
}
.email-tbl thead th.center[b-zwt6jp4wnv] { text-align: center; }
.email-tbl tbody td[b-zwt6jp4wnv] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.email-tbl tbody tr:hover[b-zwt6jp4wnv] { background: var(--d-surface-2); }

.email-code[b-zwt6jp4wnv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px; color: var(--d-ink-2);
    background: var(--d-surface-2); padding: 2px 8px; border-radius: 6px;
}
.email-tag[b-zwt6jp4wnv] {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
    border-radius: 999px; font-size: 11.5px; font-weight: 500;
}
.email-tag.good[b-zwt6jp4wnv] { background: color-mix(in srgb, var(--d-good) 12%, transparent); color: var(--d-good); }
.email-tag.draft[b-zwt6jp4wnv] { background: var(--d-surface-2); color: var(--d-ink-3); }

.email-icon-btn[b-zwt6jp4wnv] {
    width: 30px; height: 30px; border: 0; background: transparent;
    border-radius: 7px; color: var(--d-ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s;
}
.email-icon-btn:hover[b-zwt6jp4wnv] { background: var(--d-surface-2); color: var(--d-ink); }
.email-icon-btn.edit:hover[b-zwt6jp4wnv] { background: color-mix(in srgb, #2563eb 10%, transparent); color: #2563eb; }
.email-icon-btn.good:hover[b-zwt6jp4wnv] { background: color-mix(in srgb, var(--d-good) 12%, transparent); color: var(--d-good); }

.email-banner[b-zwt6jp4wnv] {
    margin: 12px 28px 0; padding: 10px 14px; border-radius: var(--d-r); font-size: 14px;
}
.email-banner.success[b-zwt6jp4wnv] { background: color-mix(in srgb, var(--d-good) 10%, transparent); color: var(--d-good); border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent); }
.email-banner.error[b-zwt6jp4wnv] { background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); }

.email-loading[b-zwt6jp4wnv] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.email-spinner[b-zwt6jp4wnv] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: email-spin-b-zwt6jp4wnv 0.7s linear infinite; }
@keyframes email-spin-b-zwt6jp4wnv { to { transform: rotate(360deg); } }

.email-empty[b-zwt6jp4wnv] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 64px 16px; color: var(--d-ink-3); text-align: center; }
.email-empty b[b-zwt6jp4wnv] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.email-empty small[b-zwt6jp4wnv] { font-size: 12px; }

.email-vars[b-zwt6jp4wnv] {
    background: var(--d-surface-2); border: 1px solid var(--d-line);
    border-radius: var(--d-r); padding: 14px; margin-top: 14px;
}
.email-vars h3[b-zwt6jp4wnv] { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.email-var-pill[b-zwt6jp4wnv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
    background: var(--d-surface); border: 1px solid var(--d-line);
    color: var(--d-ink-2); padding: 3px 8px; border-radius: 6px;
}

/* Modal — same idiom as news- */
.email-modal-bd[b-zwt6jp4wnv] {
    position: fixed; inset: 0; z-index: 9999; background: rgba(28,25,23,0.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.email-modal[b-zwt6jp4wnv] {
    width: 100%; max-width: 720px; max-height: 90vh; background: var(--d-surface);
    border-radius: var(--d-r); border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28,25,23,0.35);
    display: flex; flex-direction: column; overflow: hidden;
}
.email-modal-hd[b-zwt6jp4wnv] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--d-line); }
.email-modal-hd h2[b-zwt6jp4wnv] { margin: 0; font-family: 'Inter Tight',sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.email-modal-hd .sub[b-zwt6jp4wnv] { font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
.email-modal-close[b-zwt6jp4wnv] { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 7px; color: var(--d-ink-3); cursor: pointer; }
.email-modal-close:hover[b-zwt6jp4wnv] { background: var(--d-surface-2); color: var(--d-ink); }
.email-modal-body[b-zwt6jp4wnv] { flex: 1; overflow-y: auto; padding: 18px; }
.email-modal-ft[b-zwt6jp4wnv] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); }

.email-field-label[b-zwt6jp4wnv] { display: block; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.email-input[b-zwt6jp4wnv], .email-textarea[b-zwt6jp4wnv] {
    width: 100%; padding: 8px 12px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; color: var(--d-ink); transition: border-color .12s, box-shadow .12s;
}
.email-input:focus[b-zwt6jp4wnv], .email-textarea:focus[b-zwt6jp4wnv] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.email-textarea[b-zwt6jp4wnv] { font-family: 'JetBrains Mono', ui-monospace, monospace; resize: vertical; }
/* /src/Features/Notifications/Pages/Manager/NotificationsIndex.razor.rz.scp.css */
/* NotificationsIndex — Manager Dashboard v4 theme. Prefix: notif- */
.notif-root[b-xy7c7n9bro] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink); background: var(--d-bg);
}

.notif-hero[b-xy7c7n9bro] {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    padding: 18px 28px 14px; border-bottom: 1px solid var(--d-line); flex-shrink: 0;
}
.notif-hero h1[b-xy7c7n9bro] {
    margin: 0; font-family: 'Inter Tight','Inter',sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15;
}
.notif-hero h1 em[b-xy7c7n9bro] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.notif-hero-meta[b-xy7c7n9bro] {
    margin-top: 6px; display: flex; align-items: center; gap: 12px;
    color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap;
}
.notif-hero-meta .dot[b-xy7c7n9bro] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.notif-num[b-xy7c7n9bro] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.notif-toolbar[b-xy7c7n9bro] { display: flex; align-items: center; gap: 12px; padding: 12px 28px; flex-wrap: wrap; flex-shrink: 0; }

.notif-tabs[b-xy7c7n9bro] {
    display: inline-flex; gap: 2px; background: var(--d-surface);
    border: 1px solid var(--d-line); padding: 3px; border-radius: var(--d-r);
}
.notif-tab[b-xy7c7n9bro] {
    padding: 6px 14px; border: 0; background: transparent; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--d-ink-3);
    border-radius: 7px; transition: background .12s, color .12s;
}
.notif-tab:hover[b-xy7c7n9bro] { color: var(--d-ink); }
.notif-tab.is-active[b-xy7c7n9bro] {
    background: var(--d-accent-grad); color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

.notif-btn[b-xy7c7n9bro] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    transition: background .12s;
}
.notif-btn:hover[b-xy7c7n9bro] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.notif-btn-accent[b-xy7c7n9bro] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.notif-btn-accent:hover[b-xy7c7n9bro] { background: var(--d-accent-grad-hover); color: #fff; }

.notif-prefs[b-xy7c7n9bro] {
    margin: 0 28px 12px; background: var(--d-surface);
    border: 1px solid var(--d-line); border-radius: var(--d-r);
    padding: 14px 16px; flex-shrink: 0;
}
.notif-prefs h2[b-xy7c7n9bro] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

.notif-toggle[b-xy7c7n9bro] {
    position: relative; display: inline-flex; align-items: center;
    height: 22px; width: 40px; border: 0; border-radius: 999px;
    background: var(--d-line); cursor: pointer; transition: background .12s;
}
.notif-toggle.on[b-xy7c7n9bro] { background: var(--d-accent); }
.notif-toggle .knob[b-xy7c7n9bro] {
    display: inline-block; height: 16px; width: 16px;
    border-radius: 50%; background: #fff; transform: translateX(3px);
    transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.notif-toggle.on .knob[b-xy7c7n9bro] { transform: translateX(21px); }

.notif-body[b-xy7c7n9bro] { flex: 1; min-height: 0; padding: 0 28px 16px; display: flex; }
.notif-card[b-xy7c7n9bro] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); overflow: auto; flex: 1;
}

.notif-list[b-xy7c7n9bro] { display: flex; flex-direction: column; }
.notif-row[b-xy7c7n9bro] {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2); cursor: pointer;
    transition: background .12s; text-decoration: none; color: var(--d-ink);
}
.notif-row:last-child[b-xy7c7n9bro] { border-bottom: 0; }
.notif-row:hover[b-xy7c7n9bro] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.notif-row.unread[b-xy7c7n9bro] { background: var(--d-accent-soft); }
.notif-row.unread:hover[b-xy7c7n9bro] { background: color-mix(in srgb, var(--d-accent) 8%, var(--d-surface)); }

.notif-ico[b-xy7c7n9bro] {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
}
.notif-ico.success[b-xy7c7n9bro] { background: color-mix(in srgb, var(--d-good) 14%, transparent); color: var(--d-good); }
.notif-ico.error[b-xy7c7n9bro] { background: color-mix(in srgb, var(--d-danger) 14%, transparent); color: var(--d-danger); }
.notif-ico.warning[b-xy7c7n9bro] { background: color-mix(in srgb, var(--d-warn) 16%, transparent); color: var(--d-warn); }
.notif-ico.info[b-xy7c7n9bro] { background: color-mix(in srgb, #2563eb 14%, transparent); color: #2563eb; }
.notif-ico.budget[b-xy7c7n9bro] { background: var(--d-accent-soft); color: var(--d-accent); }
.notif-ico.default[b-xy7c7n9bro] { background: var(--d-surface-2); color: var(--d-ink-3); }

.notif-text[b-xy7c7n9bro] { flex: 1; min-width: 0; }
.notif-text .title[b-xy7c7n9bro] { font-size: 14px; color: var(--d-ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-text .title.unread[b-xy7c7n9bro] { font-weight: 600; }
.notif-text .msg[b-xy7c7n9bro] { font-size: 12px; color: var(--d-ink-3); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.notif-meta[b-xy7c7n9bro] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.notif-meta-tag[b-xy7c7n9bro] {
    display: inline-flex; align-items: center; padding: 1px 8px;
    border-radius: 999px; font-size: 10.5px; color: var(--d-ink-3);
    background: var(--d-surface-2);
}
.notif-meta-time[b-xy7c7n9bro] { font-size: 11px; color: var(--d-ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notif-meta-dot[b-xy7c7n9bro] { width: 8px; height: 8px; border-radius: 50%; background: var(--d-accent); flex-shrink: 0; }

.notif-loading[b-xy7c7n9bro] { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.notif-spinner[b-xy7c7n9bro] { width: 26px; height: 26px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: notif-spin-b-xy7c7n9bro 0.7s linear infinite; }
@keyframes notif-spin-b-xy7c7n9bro { to { transform: rotate(360deg); } }

.notif-empty[b-xy7c7n9bro] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.notif-empty b[b-xy7c7n9bro] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.notif-empty small[b-xy7c7n9bro] { font-size: 12px; }
/* /src/Features/Org/Pages/Ca/CaCompany.razor.rz.scp.css */
/* /ca/company — chuẩn nm-list, ưu tiên primitive Nm*: NmCard + NmAvatar (logo) +
   NmDescriptionList + NmBadge/NmTag. CSS chỉ còn layout trang. */
.nm-list-page[b-pwc603quwx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-pwc603quwx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-pwc603quwx] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cacom-title[b-pwc603quwx] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-pwc603quwx] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-pwc603quwx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-pwc603quwx] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.cacom-loading[b-pwc603quwx] { display: flex; flex-direction: column; gap: 12px; }

/* ── Profile card ── */
.cacom-profile[b-pwc603quwx] { display: flex; align-items: center; gap: 16px; }
/* Logo công ty là ảnh chữ nhật → khung bo góc + object-fit:contain để hiện trọn logo,
   không cắt tròn như avatar người (mặc định NmAvatar là pill + cover). */
.cacom-profile[b-pwc603quwx]  .cacom-logo {
    box-shadow: 0 0 0 4px var(--nm-brand-50);
    border-radius: var(--nm-r-input);
}
.cacom-profile[b-pwc603quwx]  .cacom-logo .nm-avatar__img {
    border-radius: inherit;
    object-fit: contain;
    background: #fff;
    padding: 3px;
}
.cacom-profile-info[b-pwc603quwx] { flex: 1; min-width: 0; }
.cacom-profile-name[b-pwc603quwx] {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--nm-ink);
    line-height: 1.2;
}
.cacom-profile-meta[b-pwc603quwx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.cacom-sep[b-pwc603quwx] { width: 3px; height: 3px; border-radius: 50%; background: var(--nm-border-strong); flex-shrink: 0; }

.cacom-mono[b-pwc603quwx] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

/* ── 2 cột card ── */
.cacom-grid[b-pwc603quwx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
@media (max-width: 1024px) { .cacom-grid[b-pwc603quwx] { grid-template-columns: minmax(0, 1fr); } }

[b-pwc603quwx] .cacom-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cacom-card-ico[b-pwc603quwx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cacom-card-title[b-pwc603quwx] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cacom-card-sub[b-pwc603quwx] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }

.cacom-card-body[b-pwc603quwx] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Ô chiếm cả hàng trong NmDescriptionList 2 cột */
.cacom-card-body[b-pwc603quwx]  .cacom-col-full { grid-column: 1 / -1; }

.cacom-link[b-pwc603quwx] { color: var(--nm-brand-700); text-decoration: none; font-weight: 600; }
.cacom-link:hover[b-pwc603quwx] { text-decoration: underline; }

@media (max-width: 640px) {
    .nm-list-page[b-pwc603quwx] { padding: 16px 14px 22px; }
    .cacom-profile[b-pwc603quwx] { flex-direction: column; text-align: center; }
}
/* /src/Features/Org/Pages/Ca/CaEmployeesList.razor.rz.scp.css */
/* CaEmployeesList — chuẩn nm-list: toolbar + cell helpers; chrome bảng do DataGrid/Nm* lo. */
.cemp[b-3mfizpnd1g] { display: flex; flex-direction: column; gap: 14px; }

/* ── Topbar: mô tả + scope | actions ── */
.cemp-topbar[b-3mfizpnd1g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.cemp-topbar-info[b-3mfizpnd1g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.cemp-desc[b-3mfizpnd1g] { margin: 0; font-size: 13.5px; color: var(--nm-muted); }
.cemp-desc strong[b-3mfizpnd1g] { color: var(--nm-ink); font-weight: 600; }
.nm-list-actions[b-3mfizpnd1g] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Toolbar filter ── */
.nm-list-toolbar[b-3mfizpnd1g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-search[b-3mfizpnd1g] { width: 280px; max-width: 100%; }
.tb-chips[b-3mfizpnd1g] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-select[b-3mfizpnd1g] { min-width: 150px; }
.tb-filters[b-3mfizpnd1g] { display: contents; }
[b-3mfizpnd1g] .tb-clear { margin-left: auto; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-3mfizpnd1g] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-3mfizpnd1g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .tb-search[b-3mfizpnd1g] { flex: 1; width: auto; }
    [b-3mfizpnd1g] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-3mfizpnd1g] { display: none; }
    .tb-filters.is-open[b-3mfizpnd1g] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-3mfizpnd1g] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-3mfizpnd1g]  .nm-select-wrap,
    .tb-select[b-3mfizpnd1g]  .nm-select { width: 100%; }
}

/* ── Cell helpers ── */
.cell-2line[b-3mfizpnd1g] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-3mfizpnd1g] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-2line__sub[b-3mfizpnd1g] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-muted[b-3mfizpnd1g] { color: var(--nm-muted); }

/* cell 1 dòng — không wrap, cắt ellipsis khi quá dài (title hiện full) */
.cell-nowrap[b-3mfizpnd1g] {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    vertical-align: middle;
}

/* pill mã nhân viên */
.nm-code-pill[b-3mfizpnd1g] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* tag vai trò (màu động theo hash tên → inline style).
   max-width phải nằm gọn trong cột Mã NV (150px - padding) vì cột này bị GHIM: tràn ra là lệch offset. */
.cell-roles[b-3mfizpnd1g] { display: flex; flex-wrap: wrap; gap: 3px; max-width: 122px; }
.cell-role-tag[b-3mfizpnd1g] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* pill cấp bậc (màu động theo rank → --c inline) */
.cell-rank[b-3mfizpnd1g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--c, #6B7280);
    background: color-mix(in srgb, var(--c, #6B7280) 12%, transparent);
    white-space: nowrap;
}
.cell-rank__dot[b-3mfizpnd1g] { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #6B7280); }

/* trạng thái online / lần đăng nhập cuối */
.cell-online[b-3mfizpnd1g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--nm-ok);
    white-space: nowrap;
}
.cell-online__ping[b-3mfizpnd1g] { position: relative; display: inline-flex; width: 8px; height: 8px; }
.cell-online__ping > span:first-child[b-3mfizpnd1g] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--nm-ok);
    opacity: .6;
    animation: cemp-ping-b-3mfizpnd1g 1.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.cell-online__ping > span:last-child[b-3mfizpnd1g] {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--nm-ok);
}
@keyframes cemp-ping-b-3mfizpnd1g {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.cell-lastlogin[b-3mfizpnd1g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

/* hàng nhân viên ngừng hoạt động — làm mờ nhẹ */
[b-3mfizpnd1g] .cemp-row-inactive .nm-grid__td { opacity: .65; }

.nm-row-actions[b-3mfizpnd1g] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer: tổng + phân trang ── */
.cemp-foot[b-3mfizpnd1g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.cemp-total[b-3mfizpnd1g] { font-size: 12.5px; color: var(--nm-muted); }
.cemp-total strong[b-3mfizpnd1g] { color: var(--nm-ink); font-weight: 700; }
/* /src/Features/Org/Pages/Ca/Index.razor.rz.scp.css */
/* /ca/employees — chuẩn nm-list (shell trang + KPI + distribution); chrome do primitive Nm* lo. */
.nm-list-page[b-vvsk5g4wax] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-vvsk5g4wax] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-vvsk5g4wax] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-vvsk5g4wax] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-sub strong[b-vvsk5g4wax] { color: var(--nm-ink); font-weight: 600; }
.nm-list-actions[b-vvsk5g4wax] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head-btn-txt[b-vvsk5g4wax] { margin: 0 2px; }

/* Sub-line nhỏ trong ô giá trị NmKpi */
.kpi-sub[b-vvsk5g4wax] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--nm-muted);
    letter-spacing: 0;
}

/* ── Distribution row ─────────────────────────────────────────── */
.dist-row[b-vvsk5g4wax] {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
}
@media (max-width: 900px) { .dist-row[b-vvsk5g4wax] { grid-template-columns: 1fr; } }

.dist-hd[b-vvsk5g4wax] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.dist-hd h3[b-vvsk5g4wax] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.dist-meta[b-vvsk5g4wax] {
    font-size: 11px;
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.dist-empty[b-vvsk5g4wax] {
    margin: 0;
    padding: 14px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--nm-muted);
}

/* Bar list theo phòng ban */
.dist-bars[b-vvsk5g4wax] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dist-bar-row[b-vvsk5g4wax] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.dist-bar-name[b-vvsk5g4wax] {
    font-size: 12.5px;
    color: var(--nm-ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.dist-bar-num[b-vvsk5g4wax] {
    font-size: 11.5px;
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    flex-shrink: 0;
}
.dist-bar-num em[b-vvsk5g4wax] { font-style: normal; opacity: .75; }
.dist-bar-track[b-vvsk5g4wax] {
    height: 6px;
    background: var(--nm-surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.dist-bar-fill[b-vvsk5g4wax] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--nm-brand-300), var(--nm-brand-500));
    border-radius: 3px;
    transition: width .4s ease;
}

/* Chips theo cấp bậc (màu động theo rank → giữ inline --c) */
.dist-chips[b-vvsk5g4wax] { display: flex; flex-wrap: wrap; gap: 6px; }
.dist-chip[b-vvsk5g4wax] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, var(--c, #6B7280) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, #6B7280) 25%, transparent);
    font-size: 12px;
    color: var(--nm-ink);
}
.dist-chip-dot[b-vvsk5g4wax] { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #6B7280); }
.dist-chip-name[b-vvsk5g4wax] { font-weight: 500; }
.dist-chip-num[b-vvsk5g4wax] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, #ffffff 70%, transparent);
    color: var(--nm-muted);
}
/* /src/Features/Org/Pages/Manager/Companies/AccountManagersIndex.razor.rz.scp.css */
/* /manager/org/account-managers — chuẩn nm token-only: head + dải thống kê + danh sách phụ trách. */
.nm-list-page[b-8xebrqhcy7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-8xebrqhcy7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-8xebrqhcy7] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-8xebrqhcy7] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }

/* ── Dải thống kê mỏng ── */
.am-stats[b-8xebrqhcy7] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.am-stats[b-8xebrqhcy7]::-webkit-scrollbar { display: none; }
.am-stat[b-8xebrqhcy7] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.am-stat + .am-stat[b-8xebrqhcy7] { border-left: 1px solid var(--nm-border); }
.am-stat__dot[b-8xebrqhcy7] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.am-stat__dot--accent[b-8xebrqhcy7] { background: var(--nm-brand-500); }
.am-stat__dot--info[b-8xebrqhcy7]   { background: var(--nm-info); }
.am-stat__dot--good[b-8xebrqhcy7]   { background: var(--nm-ok); }
.am-stat__lbl[b-8xebrqhcy7] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.am-stat__val[b-8xebrqhcy7] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.am-loading[b-8xebrqhcy7] { display: flex; flex-direction: column; gap: 10px; }

/* ── Danh sách ── */
.am-list[b-8xebrqhcy7] { display: flex; flex-direction: column; }
.am-row[b-8xebrqhcy7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
    padding: 12px 4px;
}
.am-row + .am-row[b-8xebrqhcy7] { border-top: 1px solid var(--nm-border); }

.am-row-main[b-8xebrqhcy7] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.am-avatar[b-8xebrqhcy7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.am-row-info[b-8xebrqhcy7] { min-width: 0; }
.am-name[b-8xebrqhcy7] {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-meta[b-8xebrqhcy7] {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-code[b-8xebrqhcy7] { font-family: ui-monospace, 'JetBrains Mono', monospace; }

.am-row-side[b-8xebrqhcy7] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.am-note[b-8xebrqhcy7] {
    max-width: 220px;
    font-size: 11.5px;
    color: var(--nm-muted);
    font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-date[b-8xebrqhcy7] { font-size: 11.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .nm-list-page[b-8xebrqhcy7] { padding: 16px 14px 22px; }
}
/* /src/Features/Org/Pages/Manager/Companies/CompaniesIndex.razor.rz.scp.css */
/* /manager/org/companies — chuẩn nm-list: shell + thanh phân loại + toolbar lọc + cell helpers. */
.nm-list-page[b-meszm90pgl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-meszm90pgl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-meszm90pgl] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-meszm90pgl] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-meszm90pgl] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Gợi ý "công ty mới" — chữ trong dòng phụ, bấm được để đưa chúng lên đầu bảng. */
.co-newhint[b-meszm90pgl] {
    margin-left: 8px;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, var(--nm-brand-500) 12%, transparent);
    color: var(--nm-brand-600, var(--nm-brand-500));
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.co-newhint:hover[b-meszm90pgl] { background: color-mix(in srgb, var(--nm-brand-500) 20%, transparent); }

/* ── Thanh phân loại: vừa là số liệu vừa là bộ lọc ── */
.co-stats[b-meszm90pgl] {
    display: flex;
    align-items: stretch;
    padding: 5px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.co-stats[b-meszm90pgl]::-webkit-scrollbar { display: none; }
.co-stat[b-meszm90pgl] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    white-space: nowrap;
    min-width: max-content;
    cursor: pointer;
    transition: background .12s ease;
}
.co-stat + .co-stat[b-meszm90pgl] { box-shadow: inset 1px 0 0 var(--nm-border); }
.co-stat:hover[b-meszm90pgl] { background: var(--nm-surface-2); }
.co-stat.is-on[b-meszm90pgl] { background: color-mix(in srgb, var(--nm-brand-500) 10%, transparent); }
.co-stat.is-on .co-stat__lbl[b-meszm90pgl] { color: var(--nm-brand-700); }
.co-stat__dot[b-meszm90pgl] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.co-stat__dot--accent[b-meszm90pgl] { background: var(--nm-brand-500); }
.co-stat__dot--good[b-meszm90pgl]   { background: var(--nm-ok); }
.co-stat__dot--bad[b-meszm90pgl]    { background: var(--nm-bad); }
.co-stat__dot--warn[b-meszm90pgl]   { background: var(--nm-warn); }
.co-stat__dot--muted[b-meszm90pgl]  { background: var(--nm-muted); }
.co-stat__lbl[b-meszm90pgl] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.co-stat__val[b-meszm90pgl] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-meszm90pgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-filters[b-meszm90pgl] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-search[b-meszm90pgl] { width: 300px; max-width: 100%; }
.tb-sel[b-meszm90pgl] { width: 165px; }
.tb-count[b-meszm90pgl] { font-size: 12.5px; color: var(--nm-muted); white-space: nowrap; }

.chipbar[b-meszm90pgl] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }

/* ── Thanh thao tác hàng loạt ── */
.bulkbar[b-meszm90pgl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--nm-brand-500) 35%, var(--nm-border));
    border-radius: var(--nm-r-card);
    background: color-mix(in srgb, var(--nm-brand-500) 7%, transparent);
}
.bulkbar__n[b-meszm90pgl] { font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.bulkbar__acts[b-meszm90pgl] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bulkbar__prog[b-meszm90pgl] { font-size: 12.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .tb-search[b-meszm90pgl] { flex: 1; width: auto; }
    .tb-sel[b-meszm90pgl] { flex: 1 1 140px; width: auto; }
    .nm-list-page[b-meszm90pgl] { padding: 16px 14px 22px; }
}

/* ── Cell helpers ── */
.co-name-cell[b-meszm90pgl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}
.co-logo[b-meszm90pgl] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    flex-shrink: 0;
}
.co-logo-fallback[b-meszm90pgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.co-name-main[b-meszm90pgl] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.co-name[b-meszm90pgl] {
    font-weight: 600; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.co-name-cell:hover .co-name[b-meszm90pgl] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: underline; }
.co-code[b-meszm90pgl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
/* Nhãn "Tôi phụ trách" — nhỏ, đứng cạnh mã công ty. Cố ý KHÔNG dùng NmBadge: đây là chú
   thích phụ, để nó nặng bằng badge trạng thái là kéo mắt sai chỗ. */
.co-mine[b-meszm90pgl] {
    flex: none;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--nm-brand-600, var(--nm-brand-500));
    background: color-mix(in srgb, var(--nm-brand-500) 12%, transparent);
}
.co-cell-plain[b-meszm90pgl] { color: var(--nm-ink-2); }
.co-mono[b-meszm90pgl] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--nm-ink-2); }
.co-date[b-meszm90pgl] { font-size: 12.5px; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; }

/* Quy mô: số nhân viên + phòng ban, bấm để đi thẳng tới tab nhân viên. */
.co-scale[b-meszm90pgl], .co-svc[b-meszm90pgl] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 6px;
    border: 0;
    border-radius: var(--nm-r-pill);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.co-scale:hover[b-meszm90pgl], .co-svc:hover[b-meszm90pgl] { background: var(--nm-surface-2); }
.co-scale__n[b-meszm90pgl] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.co-scale__u[b-meszm90pgl] { font-size: 11px; color: var(--nm-muted); }
.co-scale__sep[b-meszm90pgl] { color: var(--nm-border); }

.co-mgrs[b-meszm90pgl] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.co-mgr-name[b-meszm90pgl] {
    font-size: 12.5px; color: var(--nm-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.co-mgr-more[b-meszm90pgl] {
    font-size: 11px; font-weight: 700; color: var(--nm-muted);
    padding: 1px 5px; border-radius: 999px; background: var(--nm-surface-2);
}
/* Chưa ai phụ trách = việc cần làm, không phải ô trống → hiện như cảnh báo bấm được. */
.co-mgr-none[b-meszm90pgl] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px;
    border: 0; border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, var(--nm-warn) 14%, transparent);
    color: var(--nm-warn);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
}
.co-mgr-none:hover[b-meszm90pgl] { background: color-mix(in srgb, var(--nm-warn) 24%, transparent); }

.co-status[b-meszm90pgl] { display: inline-flex; justify-content: center; }

[b-meszm90pgl] .co-row-muted .nm-grid__td { opacity: .6; }
.nm-row-actions[b-meszm90pgl] { display: inline-flex; gap: 4px; justify-content: flex-end; }

.nm-code-pill[b-meszm90pgl] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

/* ── Footer ── */
.co-foot[b-meszm90pgl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.co-foot__left[b-meszm90pgl] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.co-total[b-meszm90pgl] { font-size: 12.5px; color: var(--nm-muted); }
.co-total strong[b-meszm90pgl] { color: var(--nm-ink); font-weight: 700; }
.pagesize[b-meszm90pgl] { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--nm-muted); }
.pagesize > span[b-meszm90pgl] { white-space: nowrap; }

/* ── Xem nhanh (drawer) ── */
.qv[b-meszm90pgl] { display: flex; flex-direction: column; gap: 16px; }
.qv-head[b-meszm90pgl] { display: flex; align-items: center; gap: 12px; }
.qv-logo[b-meszm90pgl] {
    width: 48px; height: 48px; border-radius: 10px; object-fit: contain;
    border: 1px solid var(--nm-border); background: var(--nm-surface); flex-shrink: 0;
}
.qv-logo--fb[b-meszm90pgl] {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nm-brand-50); color: var(--nm-brand-700);
    font-size: 18px; font-weight: 800; border-color: transparent;
}
.qv-head__main[b-meszm90pgl] { min-width: 0; }
.qv-name[b-meszm90pgl] { font-size: 16px; font-weight: 800; color: var(--nm-ink); }
.qv-meta[b-meszm90pgl] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

.qv-nums[b-meszm90pgl] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qv-num[b-meszm90pgl] {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px;
    border: 1px solid var(--nm-border); border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    font-family: inherit; cursor: pointer;
}
.qv-num:hover[b-meszm90pgl] { border-color: var(--nm-brand-500); }
.qv-num__v[b-meszm90pgl] { font-size: 17px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.qv-num__l[b-meszm90pgl] { font-size: 11.5px; color: var(--nm-muted); }

.qv-dl[b-meszm90pgl] { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.qv-dl dt[b-meszm90pgl] { font-size: 12px; color: var(--nm-muted); }
.qv-dl dd[b-meszm90pgl] { margin: 0; font-size: 13px; color: var(--nm-ink); word-break: break-word; }
.qv-dl a[b-meszm90pgl] { color: var(--nm-brand-600, var(--nm-brand-500)); text-decoration: none; }
.qv-dl a:hover[b-meszm90pgl] { text-decoration: underline; }

.qv-sec__t[b-meszm90pgl] { font-size: 12px; font-weight: 700; color: var(--nm-muted); margin-bottom: 7px; }
.qv-mgrs[b-meszm90pgl] { display: flex; flex-wrap: wrap; gap: 6px; }
.qv-warn[b-meszm90pgl] {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: var(--nm-r-card);
    background: color-mix(in srgb, var(--nm-warn) 12%, transparent);
    color: var(--nm-warn);
    font-size: 12.5px;
}
.qv-link[b-meszm90pgl] {
    border: 0; background: transparent; padding: 0;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--nm-brand-600, var(--nm-brand-500));
    text-decoration: underline; cursor: pointer;
}

/* ── Form trong modal ── */
.co-form[b-meszm90pgl] { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.co-form-grid[b-meszm90pgl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 560px) { .co-form-grid[b-meszm90pgl] { grid-template-columns: minmax(0, 1fr); } }
.co-toggle-row[b-meszm90pgl] { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.co-modal-sub[b-meszm90pgl] { margin: 0 0 10px; font-size: 13px; color: var(--nm-muted); }
/* /src/Features/Org/Pages/Manager/Companies/CompanyDetail.razor.rz.scp.css */
/* /manager/org/companies/{id} — chuẩn nm token-only: head + thanh tab + card info.
   Nội dung từng tab do component Tabs/* tự style. */
.nm-list-page[b-xp3icb9p30] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-xp3icb9p30] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-xp3icb9p30] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cdet-title[b-xp3icb9p30] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-xp3icb9p30] {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: var(--nm-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cdet-loading[b-xp3icb9p30] { display: flex; flex-direction: column; gap: 12px; }

.cdet-crumb[b-xp3icb9p30] { color: var(--nm-muted); text-decoration: none; }
.cdet-crumb:hover[b-xp3icb9p30] { color: var(--nm-brand-700); text-decoration: underline; }
.cdet-crumb-sep[b-xp3icb9p30] { color: var(--nm-muted); }
.cdet-meta-item[b-xp3icb9p30] { color: var(--nm-muted); }
.cdet-mono[b-xp3icb9p30] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .95em; }

.nm-code-pill[b-xp3icb9p30] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

/* head: logo + tên */
.cdet-head-main[b-xp3icb9p30] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cdet-logo[b-xp3icb9p30] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: contain;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    flex-shrink: 0;
}
.cdet-logo-fallback[b-xp3icb9p30] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
}

/* head: cặp số liệu phòng ban / nhân viên */
.cdet-stats[b-xp3icb9p30] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdet-stat[b-xp3icb9p30] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cdet-stat i[b-xp3icb9p30] { color: var(--nm-brand-600, var(--nm-brand-500)); font-size: 14px; }
.cdet-stat b[b-xp3icb9p30] { font-size: 15px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }

/* ── Thanh tab ── */
.cdet-tabbar[b-xp3icb9p30] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.cdet-tab[b-xp3icb9p30] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--nm-r-pill);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.cdet-tab i[b-xp3icb9p30] { font-size: 12px; color: var(--nm-muted); }
.cdet-tab:hover[b-xp3icb9p30] { background: var(--nm-surface-2); color: var(--nm-ink); }
.cdet-tab.is-active[b-xp3icb9p30] {
    background: var(--nm-brand-50);
    border-color: color-mix(in srgb, var(--nm-brand-500) 35%, transparent);
    color: var(--nm-brand-700);
}
.cdet-tab.is-active i[b-xp3icb9p30] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.cdet-tab-divider[b-xp3icb9p30] { width: 1px; height: 20px; background: var(--nm-border); flex-shrink: 0; margin: 0 2px; }

@media (max-width: 760px) {
    .cdet-tabbar[b-xp3icb9p30] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cdet-tabbar[b-xp3icb9p30]::-webkit-scrollbar { display: none; }
    .nm-list-page[b-xp3icb9p30] { padding: 16px 14px 22px; }
}

/* ── Card info ── */
[b-xp3icb9p30] .cdet-card .nm-card__head { display: flex; align-items: center; gap: 8px; }
.cdet-card-ico[b-xp3icb9p30] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cdet-card-title[b-xp3icb9p30] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cdet-card-body[b-xp3icb9p30] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

.cdet-dl[b-xp3icb9p30] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
}
@media (max-width: 900px) { .cdet-dl[b-xp3icb9p30] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cdet-dl[b-xp3icb9p30] { grid-template-columns: minmax(0, 1fr); } }
.cdet-dl-row[b-xp3icb9p30] { display: flex; flex-direction: column; gap: 2px; }
.cdet-dl-full[b-xp3icb9p30] { grid-column: 1 / -1; }
.cdet-dl-row dt[b-xp3icb9p30] { font-size: 11.5px; color: var(--nm-muted); font-weight: 600; }
.cdet-dl-row dd[b-xp3icb9p30] { margin: 0; font-size: 13.5px; color: var(--nm-ink); font-weight: 500; }

/* ── Logo upload ── */
.cdet-logo-upload[b-xp3icb9p30] { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cdet-logo-preview[b-xp3icb9p30] {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: contain;
    border: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
}
.cdet-logo-preview-empty[b-xp3icb9p30] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    border: 1px dashed var(--nm-border);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 11.5px;
    text-align: center;
    padding: 6px;
}
.cdet-upload-actions[b-xp3icb9p30] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cdet-upload-btn[b-xp3icb9p30] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink);
    cursor: pointer;
    overflow: hidden;
}
.cdet-upload-btn:hover[b-xp3icb9p30] { background: var(--nm-surface-2); }
.cdet-upload-input[b-xp3icb9p30] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.cdet-upload-hint[b-xp3icb9p30] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }
.cdet-upload-error[b-xp3icb9p30] { margin: 0; font-size: 12px; color: var(--nm-bad); }
/* /src/Features/Org/Pages/Manager/Companies/MyCompanies.razor.rz.scp.css */
/* /manager/my-companies — chuẩn nm token-only: head + dải thống kê + lưới card công ty. */
.nm-list-page[b-40ltlgc0s0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-40ltlgc0s0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-40ltlgc0s0] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-40ltlgc0s0] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }

/* ── Dải thống kê mỏng ── */
.mco-stats[b-40ltlgc0s0] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.mco-stats[b-40ltlgc0s0]::-webkit-scrollbar { display: none; }
.mco-stat[b-40ltlgc0s0] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.mco-stat + .mco-stat[b-40ltlgc0s0] { border-left: 1px solid var(--nm-border); }
.mco-stat__dot[b-40ltlgc0s0] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.mco-stat__dot--accent[b-40ltlgc0s0] { background: var(--nm-brand-500); }
.mco-stat__dot--info[b-40ltlgc0s0]   { background: var(--nm-info); }
.mco-stat__dot--good[b-40ltlgc0s0]   { background: var(--nm-ok); }
.mco-stat__lbl[b-40ltlgc0s0] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.mco-stat__val[b-40ltlgc0s0] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Lưới card công ty ── */
.mco-grid[b-40ltlgc0s0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.mco-card[b-40ltlgc0s0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.mco-card:hover[b-40ltlgc0s0] {
    border-color: color-mix(in srgb, var(--nm-brand-500) 45%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--nm-brand-500) 10%, transparent);
    transform: translateY(-1px);
}

.mco-card-hd[b-40ltlgc0s0] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mco-logo[b-40ltlgc0s0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
}

.mco-card-main[b-40ltlgc0s0] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mco-name[b-40ltlgc0s0] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mco-card:hover .mco-name[b-40ltlgc0s0] { color: var(--nm-brand-700); }
.mco-code[b-40ltlgc0s0] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}

.mco-card-ft[b-40ltlgc0s0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--nm-border);
    font-size: 11.5px;
    color: var(--nm-muted);
}
.mco-card-ft b[b-40ltlgc0s0] { color: var(--nm-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mco-card-ft i[b-40ltlgc0s0] { color: var(--nm-brand-600, var(--nm-brand-500)); }

@media (max-width: 640px) {
    .nm-list-page[b-40ltlgc0s0] { padding: 16px 14px 22px; }
}
/* /src/Features/Org/Pages/Manager/Companies/Tabs/AccountManagersTab.razor.rz.scp.css */
/* ===== AccountManagersTab — nm-list token-only | prefix am- ===== */

.nm-tab-stack[b-w1818v6ri7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.am-toolbar[b-w1818v6ri7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.am-toolbar-info[b-w1818v6ri7] { margin: 0; font-size: 13px; color: var(--nm-muted); }
.am-toolbar-info b[b-w1818v6ri7] { color: var(--nm-ink); font-weight: 600; }

/* ── Cell helpers (DataGrid templates) ── */
.am-mono[b-w1818v6ri7] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
}
.am-name[b-w1818v6ri7] { font-weight: 500; color: var(--nm-ink); }
.am-notes[b-w1818v6ri7] {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--nm-muted);
    vertical-align: middle;
}
.am-date[b-w1818v6ri7] {
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nm-row-actions[b-w1818v6ri7] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Form trong modal ── */
.am-form[b-w1818v6ri7] { display: flex; flex-direction: column; gap: 14px; }

/* Ô tìm nhân viên (input thô: cần focus ref + phím tắt) */
.am-search[b-w1818v6ri7] { position: relative; }
.am-input[b-w1818v6ri7] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    padding: 0 34px 0 34px;
    font-size: 13.5px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
    background: var(--nm-surface);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.am-input:focus[b-w1818v6ri7] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-brand-500) 14%, transparent);
}
.am-search-ico[b-w1818v6ri7] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 13px;
}
.am-search-clear[b-w1818v6ri7] {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--nm-muted);
    cursor: pointer;
    padding: 2px;
    display: grid;
    place-items: center;
    font-size: 12px;
}
.am-search-clear:hover[b-w1818v6ri7] { color: var(--nm-ink); }
.am-spinner-sm[b-w1818v6ri7] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--nm-border);
    border-top-color: var(--nm-brand-500);
    border-radius: 50%;
    animation: am-spin-b-w1818v6ri7 .7s linear infinite;
    display: inline-block;
}
@keyframes am-spin-b-w1818v6ri7 { to { transform: rotate(360deg); } }

/* ── Danh sách kết quả ── */
.am-results[b-w1818v6ri7] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.am-result[b-w1818v6ri7] {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--nm-surface);
    border: 0;
    border-bottom: 1px solid var(--nm-border);
    padding: 9px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s;
}
.am-result:last-child[b-w1818v6ri7] { border-bottom: 0; }
.am-result:hover[b-w1818v6ri7] { background: var(--nm-surface-2); }
.am-result.is-highlighted[b-w1818v6ri7] { background: var(--nm-surface-2); }
.am-result.is-selected[b-w1818v6ri7] { background: var(--nm-brand-50); }
.am-result.is-disabled[b-w1818v6ri7] { opacity: .55; cursor: not-allowed; }
.am-result-row[b-w1818v6ri7] { display: flex; align-items: center; gap: 8px; }
.am-result-main[b-w1818v6ri7] { flex: 1; min-width: 0; }
.am-result-name[b-w1818v6ri7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--nm-ink);
}
.am-result-name b[b-w1818v6ri7] { font-weight: 600; }
.am-code-chip[b-w1818v6ri7] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.am-result-sub[b-w1818v6ri7] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--nm-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-result-sub .sep[b-w1818v6ri7] { opacity: .6; }
.am-check[b-w1818v6ri7] { color: var(--nm-brand-600); font-size: 16px; flex-shrink: 0; }

.am-results-empty[b-w1818v6ri7] {
    padding: 16px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--nm-muted);
    border: 1.5px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
}

/* ── Confirm thu hồi ── */
.am-confirm-text[b-w1818v6ri7] { margin: 0; font-size: 13.5px; color: var(--nm-ink-2); line-height: 1.5; }
.am-confirm-text b[b-w1818v6ri7] { color: var(--nm-ink); font-weight: 600; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/ApiKeysTab.razor.rz.scp.css */
/* ApiKeysTab — chuẩn nm-list: token-only, chrome bảng do DataGrid/Nm* lo */
.nm-tab-stack[b-kl4vvf8w3e] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.ak-stack[b-kl4vvf8w3e] { display: flex; flex-direction: column; gap: 16px; }

/* ── Header card ── */
.ak-hd[b-kl4vvf8w3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}
.ak-hd-title[b-kl4vvf8w3e] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
}
.ak-hd-title i[b-kl4vvf8w3e] { color: var(--nm-brand-600); }

/* ── Secret 1 lần (trong NmAlert warn) ── */
.ak-secret-stack[b-kl4vvf8w3e] { display: flex; flex-direction: column; gap: 10px; }
.ak-label[b-kl4vvf8w3e] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-ink-2);
    margin-bottom: 6px;
}
.ak-secret-box[b-kl4vvf8w3e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
}
.ak-secret-val[b-kl4vvf8w3e] {
    flex: 1;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--nm-ink);
}
.ak-hint[b-kl4vvf8w3e] { margin: 6px 0 0; font-size: 12px; color: var(--nm-muted); }

/* ── Form tạo/sửa key ── */
.ak-form[b-kl4vvf8w3e] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}
.ak-form-hd[b-kl4vvf8w3e] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}
.ak-form-bd[b-kl4vvf8w3e] { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ak-grid[b-kl4vvf8w3e] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ak-field .ak-hint[b-kl4vvf8w3e] { margin-top: 4px; }
.ak-form-ft[b-kl4vvf8w3e] { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) {
    .ak-grid[b-kl4vvf8w3e] { grid-template-columns: 1fr; }
}

/* ── Cell helpers ── */
.ak-2line[b-kl4vvf8w3e] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-name[b-kl4vvf8w3e] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.ak-meta[b-kl4vvf8w3e] { font-size: 11.5px; color: var(--nm-muted); }
.ak-num[b-kl4vvf8w3e] { font-variant-numeric: tabular-nums; }
.ak-strong[b-kl4vvf8w3e] { font-weight: 700; color: var(--nm-ink); }
.ak-code[b-kl4vvf8w3e] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    white-space: nowrap;
}
.ak-domains[b-kl4vvf8w3e] { display: flex; flex-wrap: wrap; gap: 4px; }
.ak-usage-cell[b-kl4vvf8w3e] { display: flex; flex-direction: column; gap: 4px; align-items: stretch; font-size: 12.5px; }
.ak-usage-key[b-kl4vvf8w3e] { display: inline-flex; align-items: center; gap: 6px; }

.nm-row-actions[b-kl4vvf8w3e] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* hàng đã thu hồi — làm mờ nhẹ */
[b-kl4vvf8w3e] .ak-row-muted .nm-grid__td { opacity: .55; }

/* ── Dải thống kê mỏng ── */
.ak-stats[b-kl4vvf8w3e] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.ak-stats[b-kl4vvf8w3e]::-webkit-scrollbar { display: none; }
.ak-stat[b-kl4vvf8w3e] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.ak-stat + .ak-stat[b-kl4vvf8w3e] { border-left: 1px solid var(--nm-border); }
.ak-stat__dot[b-kl4vvf8w3e] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.ak-stat__dot--accent[b-kl4vvf8w3e] { background: var(--nm-brand-500); }
.ak-stat__dot--good[b-kl4vvf8w3e]   { background: var(--nm-ok); }
.ak-stat__dot--info[b-kl4vvf8w3e]   { background: var(--nm-info); }
.ak-stat__dot--bad[b-kl4vvf8w3e]    { background: var(--nm-bad); }
.ak-stat__lbl[b-kl4vvf8w3e] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.ak-stat__val[b-kl4vvf8w3e] {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Thống kê sử dụng ── */
.ak-sec-hd[b-kl4vvf8w3e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ak-sec-title[b-kl4vvf8w3e] {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}
.ak-sec-title i[b-kl4vvf8w3e] { color: var(--nm-brand-600); }
.ak-sec-filters[b-kl4vvf8w3e] { display: flex; gap: 6px; }

.ak-usage-list[b-kl4vvf8w3e] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ak-usage-row[b-kl4vvf8w3e] {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: center;
    gap: 10px;
}
.ak-usage-name[b-kl4vvf8w3e] { display: flex; flex-direction: column; min-width: 0; }
.ak-usage-name span[b-kl4vvf8w3e] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ak-usage-name small[b-kl4vvf8w3e] { font-size: 11px; color: var(--nm-muted); }
.ak-usage-bar[b-kl4vvf8w3e] { min-width: 0; }
.ak-usage-count[b-kl4vvf8w3e] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ak-usage-total[b-kl4vvf8w3e] {
    margin-top: 10px;
    text-align: right;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.ak-usage-total b[b-kl4vvf8w3e] { color: var(--nm-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
    .ak-usage-row[b-kl4vvf8w3e] { grid-template-columns: 1fr; gap: 4px; }
}
/* /src/Features/Org/Pages/Manager/Companies/Tabs/ApprovalRulesTab.razor.rz.scp.css */
/* ===== ApprovalRulesTab — nm token-only | Prefix: arul- ===== */

.arul-root[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 14px; font-family: var(--nm-font); color: var(--nm-ink); }
.arul-hint[b-bs48iumb2f] { margin: 0; font-size: 12px; color: var(--nm-muted); }

/* ── Collapsible config panel ─────────────────────────────── */
.arul-collapse-hd[b-bs48iumb2f] {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: transparent; border: 0; cursor: pointer;
    text-align: left; transition: background .12s; border-radius: var(--nm-r-card);
}
.arul-collapse-hd:hover[b-bs48iumb2f] { background: var(--nm-surface-2); }
.arul-collapse-ico[b-bs48iumb2f] { color: var(--nm-brand-600); font-size: 18px; display: inline-flex; }
.arul-collapse-txt[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.arul-collapse-txt .t[b-bs48iumb2f] { font-size: 14px; font-weight: 600; color: var(--nm-ink); }
.arul-collapse-txt .d[b-bs48iumb2f] { font-size: 12px; color: var(--nm-muted); }
.arul-collapse-caret[b-bs48iumb2f] { color: var(--nm-muted); transition: transform .2s; }
.arul-collapse-caret.is-open[b-bs48iumb2f] { transform: rotate(180deg); }
.arul-collapse-body[b-bs48iumb2f] {
    padding: 14px 16px 16px; border-top: 1px solid var(--nm-border);
    display: flex; flex-direction: column; gap: 12px;
}

.arul-cfg-box[b-bs48iumb2f] {
    border: 1px solid var(--nm-border); border-radius: var(--nm-r-card);
    padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--nm-surface);
}
.arul-cfg-box.is-bad[b-bs48iumb2f]  { border-color: color-mix(in srgb, var(--nm-bad) 25%, var(--nm-border)); background: color-mix(in srgb, var(--nm-bad) 4%, var(--nm-surface)); }
.arul-cfg-box.is-info[b-bs48iumb2f] { border-color: color-mix(in srgb, var(--nm-info) 25%, var(--nm-border)); background: color-mix(in srgb, var(--nm-info) 4%, var(--nm-surface)); }
.arul-cfg-lbl[b-bs48iumb2f] { display: block; font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.arul-cfg-desc[b-bs48iumb2f] { display: block; font-size: 12px; color: var(--nm-muted); margin-top: 2px; font-weight: 400; }
.arul-cfg-save[b-bs48iumb2f] { display: flex; justify-content: flex-end; }

/* ── Module tabs ───────────────────────────────────────────── */
.arul-module-tabs[b-bs48iumb2f] { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Section header + workflow cards ───────────────────────── */
.arul-wf-section[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 10px; }
.arul-section-hd[b-bs48iumb2f] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arul-section-hd h3[b-bs48iumb2f] {
    margin: 0; font-size: 13px; font-weight: 600; color: var(--nm-ink-2);
    display: flex; align-items: center; gap: 8px;
}
.arul-empty-dashed[b-bs48iumb2f] { border: 1.5px dashed var(--nm-border); border-radius: var(--nm-r-card); background: var(--nm-surface-2); }

.arul-wf-list[b-bs48iumb2f] { display: flex; flex-wrap: wrap; gap: 8px; }
.arul-wf-card[b-bs48iumb2f] {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
    border-radius: var(--nm-r-card); border: 1px solid var(--nm-border);
    background: var(--nm-surface); cursor: pointer; font-size: 13px;
    transition: border-color .12s, background .12s;
}
.arul-wf-card:hover[b-bs48iumb2f] { border-color: var(--nm-brand-500); }
.arul-wf-card.is-active[b-bs48iumb2f] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.arul-wf-card .name[b-bs48iumb2f] { font-weight: 500; color: var(--nm-ink); }
.arul-wf-card.is-active .name[b-bs48iumb2f] { color: var(--nm-brand-700); }
.arul-wf-card .code[b-bs48iumb2f] { font-family: ui-monospace, monospace; font-size: 11px; color: var(--nm-muted); }
.arul-wf-actions[b-bs48iumb2f] { display: inline-flex; gap: 2px; margin-left: 2px; }

/* ── Scope bar ─────────────────────────────────────────────── */
.arul-scope-bar[b-bs48iumb2f] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--nm-border);
}
.arul-scope-lbl[b-bs48iumb2f] {
    font-size: 11px; font-weight: 600; color: var(--nm-muted);
    text-transform: uppercase; letter-spacing: .07em;
}
.arul-scope-tab[b-bs48iumb2f] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: var(--nm-r-pill); border: 0; cursor: pointer;
    font-size: 12px; font-weight: 500; font-family: var(--nm-font);
    background: var(--nm-surface-2); color: var(--nm-ink-2);
    transition: background .12s, color .12s;
}
.arul-scope-tab.is-active[b-bs48iumb2f] { background: var(--nm-brand-50); color: var(--nm-brand-700); }
.arul-scope-tab .cnt[b-bs48iumb2f] { font-size: 10px; opacity: .65; }
.arul-scope-none[b-bs48iumb2f] { font-size: 12px; color: var(--nm-muted); font-style: italic; }
.arul-scope-actions[b-bs48iumb2f] { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ── Scope condition detail ────────────────────────────────── */
.arul-scope-detail[b-bs48iumb2f] {
    display: grid; grid-template-columns: repeat(1, 1fr); gap: 12px;
    padding: 12px 16px; background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border); font-size: 12px;
}
@media (min-width: 640px)  { .arul-scope-detail[b-bs48iumb2f] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .arul-scope-detail[b-bs48iumb2f] { grid-template-columns: repeat(4, 1fr); } }
.arul-scope-detail .lbl[b-bs48iumb2f] {
    display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 600;
    color: var(--nm-muted); text-transform: uppercase; letter-spacing: .07em;
}
.arul-scope-detail .val[b-bs48iumb2f] { color: var(--nm-ink); font-weight: 500; }
.arul-scope-detail .val.is-bad[b-bs48iumb2f] { color: var(--nm-bad); }

/* ── Step list ─────────────────────────────────────────────── */
.arul-step-area[b-bs48iumb2f] { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.arul-step-list[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 6px; }
.arul-step[b-bs48iumb2f] {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
    border: 1px solid var(--nm-border); border-radius: var(--nm-r-card); background: var(--nm-surface);
}
.arul-step-num[b-bs48iumb2f] {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
    background: var(--nm-brand-600); color: var(--nm-on-brand);
    font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.arul-step-num.is-auto[b-bs48iumb2f] { background: var(--nm-muted); }
.arul-step-info[b-bs48iumb2f] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.arul-step-info .name[b-bs48iumb2f] { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); }
.arul-step-tags[b-bs48iumb2f] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.arul-step-tags .summary[b-bs48iumb2f] { font-size: 12px; color: var(--nm-ink-2); display: inline-flex; align-items: center; }
.arul-mode-pill[b-bs48iumb2f] {
    display: inline-flex; align-items: center; padding: 2px 8px;
    border-radius: var(--nm-r-pill); font-size: 11px; font-weight: 600;
    background: var(--nm-brand-50); color: var(--nm-brand-700);
}
.arul-mode-pill.is-auto[b-bs48iumb2f] { background: var(--nm-surface-2); color: var(--nm-muted); }
.arul-step-meta[b-bs48iumb2f] { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--nm-muted); }
.arul-step-meta .sep[b-bs48iumb2f] { opacity: .5; }
.arul-step-meta .req[b-bs48iumb2f] { color: var(--nm-info); font-weight: 600; }
.arul-step-meta .auto[b-bs48iumb2f] { color: var(--nm-ok); font-weight: 600; }
.arul-step-actions[b-bs48iumb2f] { display: flex; gap: 2px; flex-shrink: 0; }
.arul-step-arrow[b-bs48iumb2f] { display: flex; padding-left: 8px; color: var(--nm-muted); font-size: 13px; }
.arul-step-foot[b-bs48iumb2f] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

/* ── Modal internals ───────────────────────────────────────── */
.arul-modal-hd[b-bs48iumb2f] { flex: 1; min-width: 0; }
.arul-modal-title[b-bs48iumb2f] { margin: 0; font-size: 15px; font-weight: 600; color: var(--nm-ink); }
.arul-modal-sub[b-bs48iumb2f] { margin: 2px 0 0; font-size: 12px; color: var(--nm-muted); }
.arul-modal-sub b[b-bs48iumb2f] { color: var(--nm-brand-600); font-weight: 600; }
.arul-form[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 14px; }
.arul-grid-2[b-bs48iumb2f] { display: grid; grid-template-columns: repeat(1, 1fr); gap: 12px; }
@media (min-width: 640px) { .arul-grid-2[b-bs48iumb2f] { grid-template-columns: repeat(2, 1fr); } }
.arul-mono-input[b-bs48iumb2f]  .nm-input { font-family: ui-monospace, monospace; }

/* Section boxes trong modal scope */
.arul-box[b-bs48iumb2f] {
    border: 1px solid var(--nm-border); border-radius: var(--nm-r-card);
    padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--nm-surface);
}
.arul-box .ttl[b-bs48iumb2f] {
    margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    display: inline-flex; align-items: center; gap: 6px;
}
.arul-box.is-info[b-bs48iumb2f]   { border-color: color-mix(in srgb, var(--nm-info) 25%, var(--nm-border)); background: color-mix(in srgb, var(--nm-info) 4%, var(--nm-surface)); }
.arul-box.is-info .ttl[b-bs48iumb2f]   { color: var(--nm-info); }
.arul-box.is-accent[b-bs48iumb2f] { border-color: color-mix(in srgb, var(--nm-brand-500) 30%, var(--nm-border)); background: var(--nm-brand-50); }
.arul-box.is-accent .ttl[b-bs48iumb2f] { color: var(--nm-brand-700); }
.arul-box.is-bad[b-bs48iumb2f]    { border-color: color-mix(in srgb, var(--nm-bad) 25%, var(--nm-border)); background: color-mix(in srgb, var(--nm-bad) 4%, var(--nm-surface)); }
.arul-box.is-bad .ttl[b-bs48iumb2f]    { color: var(--nm-bad); }
.arul-box-hint[b-bs48iumb2f] { margin: 0; font-size: 11px; color: var(--nm-muted); }
.arul-check-row[b-bs48iumb2f] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Approve mode picker */
.arul-mode-list[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 6px; }
.arul-mode-opt[b-bs48iumb2f] {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--nm-border); border-radius: var(--nm-r-card);
    background: var(--nm-surface); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.arul-mode-opt:hover[b-bs48iumb2f] { border-color: var(--nm-brand-500); }
.arul-mode-opt.is-active[b-bs48iumb2f] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.arul-mode-txt[b-bs48iumb2f] { flex: 1; min-width: 0; }
.arul-mode-txt p[b-bs48iumb2f] { margin: 0; }
.arul-mode-txt .t[b-bs48iumb2f] { font-size: 13px; font-weight: 500; color: var(--nm-ink); }
.arul-mode-txt .d[b-bs48iumb2f] { font-size: 11.5px; color: var(--nm-muted); margin-top: 2px; }
.arul-mode-opt .c[b-bs48iumb2f] { color: var(--nm-brand-600); font-size: 16px; }

/* Manager level */
.arul-manager-box[b-bs48iumb2f] {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--nm-info) 25%, var(--nm-border));
    background: color-mix(in srgb, var(--nm-info) 4%, var(--nm-surface));
    border-radius: var(--nm-r-card);
}
.arul-manager-txt[b-bs48iumb2f] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arul-manager-txt .t[b-bs48iumb2f] { font-size: 13px; font-weight: 500; color: var(--nm-ink); }
.arul-manager-txt .d[b-bs48iumb2f] { font-size: 12px; color: var(--nm-muted); }

/* Approvers */
.arul-approver-section[b-bs48iumb2f] {
    border: 1.5px dashed color-mix(in srgb, var(--nm-brand-500) 35%, var(--nm-border));
    background: var(--nm-brand-50); border-radius: var(--nm-r-card);
    padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.arul-approver-hd[b-bs48iumb2f] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.arul-approver-hd h4[b-bs48iumb2f] {
    margin: 0; font-size: 11px; font-weight: 600; color: var(--nm-brand-700);
    text-transform: uppercase; letter-spacing: .07em;
}
.arul-approver-empty[b-bs48iumb2f] { margin: 0; font-size: 12px; text-align: center; color: var(--nm-muted); padding: 6px 0; }
.arul-approver-list[b-bs48iumb2f] { display: flex; flex-direction: column; gap: 8px; }
.arul-approver-row[b-bs48iumb2f] {
    display: flex; align-items: center; gap: 8px;
    background: var(--nm-surface); border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card); padding: 8px 10px;
}
.arul-approver-user[b-bs48iumb2f] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.arul-approver-user.is-found[b-bs48iumb2f]  .nm-input { border-color: var(--nm-ok); }
.arul-approver-user .st[b-bs48iumb2f] { margin: 0; font-size: 11px; color: var(--nm-muted); }
.arul-approver-user .st.is-ok[b-bs48iumb2f] { color: var(--nm-ok); }
.arul-approver-user .st.is-bad[b-bs48iumb2f] { color: var(--nm-bad); }
.arul-approver-pick[b-bs48iumb2f] { flex: 1; min-width: 0; }

/* Step settings */
.arul-step-settings[b-bs48iumb2f] { border-top: 1px solid var(--nm-border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.arul-step-settings h4[b-bs48iumb2f] {
    margin: 0; font-size: 11px; font-weight: 600; color: var(--nm-muted);
    text-transform: uppercase; letter-spacing: .07em;
}
.arul-num-row[b-bs48iumb2f] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.arul-num-item[b-bs48iumb2f] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--nm-muted); }
.arul-num-item label[b-bs48iumb2f] { font-size: 12px; color: var(--nm-ink-2); }
.arul-num-input[b-bs48iumb2f] { width: 76px; }
.arul-num-input[b-bs48iumb2f]  .nm-input { text-align: center; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/CompanyRolesTab.razor.rz.scp.css */
/* ===== CompanyRolesTab — nm-list token-only | prefix crole- ===== */

.nm-tab-stack[b-4wl22ewqc4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.crole-head[b-4wl22ewqc4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.crole-head h3[b-4wl22ewqc4] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }

.crole-skels[b-4wl22ewqc4] { display: flex; flex-direction: column; gap: 8px; }
.crole-hint[b-4wl22ewqc4] { margin: 0 0 10px; font-size: 12.5px; color: var(--nm-muted); }

/* ── Lưới card vai trò ── */
.crole-grid[b-4wl22ewqc4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}
.crole-card[b-4wl22ewqc4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    padding: 12px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.crole-card:hover[b-4wl22ewqc4] { border-color: var(--nm-brand-500); }
.crole-card.is-granted[b-4wl22ewqc4] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.crole-card.is-readonly[b-4wl22ewqc4] { cursor: default; }
.crole-card.is-readonly:hover[b-4wl22ewqc4] { border-color: var(--nm-border); }

/* Checkbox chỉ hiển thị — click do card xử lý */
.crole-cb[b-4wl22ewqc4] { pointer-events: none; flex-shrink: 0; margin-top: 2px; }

.crole-main[b-4wl22ewqc4] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.crole-name[b-4wl22ewqc4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
}
.crole-check[b-4wl22ewqc4] { color: var(--nm-ok); font-size: 14px; }
.crole-desc[b-4wl22ewqc4] { font-size: 12px; color: var(--nm-muted); line-height: 1.45; }
.crole-meta-row[b-4wl22ewqc4] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crole-meta[b-4wl22ewqc4] { font-size: 11.5px; color: var(--nm-muted); }
.crole-meta.is-italic[b-4wl22ewqc4] { font-style: italic; }

/* ── Avatar chồng ── */
.crole-avatars[b-4wl22ewqc4] { display: flex; align-items: center; gap: 8px; }
.crole-avatars-stack[b-4wl22ewqc4] { display: flex; align-items: center; }
.crole-avatar[b-4wl22ewqc4] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--nm-surface);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    flex-shrink: 0;
}
.crole-avatars-stack .crole-avatar + .crole-avatar[b-4wl22ewqc4] { margin-left: -8px; }
.crole-avatar.is-more[b-4wl22ewqc4] { background: var(--nm-brand-50); color: var(--nm-brand-700); }

/* ── Hàng nút lưu ── */
.crole-actions[b-4wl22ewqc4] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.crole-msg[b-4wl22ewqc4] { margin-top: 12px; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/CostCentersTab.razor.rz.scp.css */
/* CostCentersTab — chuẩn nm-list: toolbar + DataGrid + NmModal; chrome do Nm* lo. */
.nm-tab-stack[b-vpuobewg7l] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.nm-list-toolbar[b-vpuobewg7l] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-vpuobewg7l] { width: 300px; max-width: 100%; }
.tb-total[b-vpuobewg7l] { font-size: 12.5px; color: var(--nm-muted); }
.tb-total strong[b-vpuobewg7l] { color: var(--nm-ink); font-weight: 700; }
.tb-actions[b-vpuobewg7l] { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 640px) {
    .tb-search[b-vpuobewg7l] { flex: 1; width: auto; }
}

/* ── Cell helpers ── */
.cell-name[b-vpuobewg7l] { font-weight: 600; color: var(--nm-ink); }
.cell-muted[b-vpuobewg7l] { color: var(--nm-muted); }
.cell-amount[b-vpuobewg7l] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* Thanh mức dùng ngân sách: progress + % */
.cell-util[b-vpuobewg7l] { display: flex; align-items: center; gap: 8px; }
.cell-util[b-vpuobewg7l]  .cell-util__bar { flex: 1; min-width: 70px; }
.cell-util__pct[b-vpuobewg7l] {
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.nm-row-actions[b-vpuobewg7l] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer phân trang ── */
.tab-foot[b-vpuobewg7l] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ── Form trong modal ── */
.modal-form[b-vpuobewg7l] { display: flex; flex-direction: column; gap: 12px; }
.form-grid-2[b-vpuobewg7l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 560px) {
    .form-grid-2[b-vpuobewg7l] { grid-template-columns: 1fr; }
}
/* /src/Features/Org/Pages/Manager/Companies/Tabs/DepartmentsTab.razor.rz.scp.css */
/* DepartmentsTab — chuẩn nm-list: toolbar + DataGrid + NmModal; chrome do Nm* lo. */
.nm-tab-stack[b-nrkxhnv4ti] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.nm-list-toolbar[b-nrkxhnv4ti] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-nrkxhnv4ti] { width: 300px; max-width: 100%; }
.tb-total[b-nrkxhnv4ti] { font-size: 12.5px; color: var(--nm-muted); }
.tb-total strong[b-nrkxhnv4ti] { color: var(--nm-ink); font-weight: 700; }
.tb-actions[b-nrkxhnv4ti] { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 640px) {
    .tb-search[b-nrkxhnv4ti] { flex: 1; width: auto; }
}

/* ── Cell helpers ── */
.nm-code-pill[b-nrkxhnv4ti] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.cell-name[b-nrkxhnv4ti] { font-weight: 600; color: var(--nm-ink); }
.cell-muted[b-nrkxhnv4ti] { color: var(--nm-muted); }
.cell-desc[b-nrkxhnv4ti] {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nm-muted);
}
.nm-row-actions[b-nrkxhnv4ti] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer phân trang ── */
.tab-foot[b-nrkxhnv4ti] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ── Form trong modal ── */
.modal-form[b-nrkxhnv4ti] { display: flex; flex-direction: column; gap: 12px; }
.form-grid-2[b-nrkxhnv4ti] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 560px) {
    .form-grid-2[b-nrkxhnv4ti] { grid-template-columns: 1fr; }
}
.form-hint[b-nrkxhnv4ti] { margin: -4px 0 0; font-size: 12px; color: var(--nm-muted); }

/* Khối tuỳ chọn tạo cost center kèm phòng ban */
.cc-box[b-nrkxhnv4ti] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
/* /src/Features/Org/Pages/Manager/Companies/Tabs/DomainsTab.razor.rz.scp.css */
/* DomainsTab — chuẩn nm-list: toolbar + DataGrid + NmModal; chrome do Nm* lo. */
.nm-tab-stack[b-pijoyfawca] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.nm-list-toolbar[b-pijoyfawca] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-desc[b-pijoyfawca] { margin: 0; font-size: 13px; color: var(--nm-muted); flex: 1; min-width: 200px; }
.tb-actions[b-pijoyfawca] { margin-left: auto; display: flex; gap: 8px; }

/* ── Cell helpers ── */
.nm-code-pill[b-pijoyfawca] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.cell-desc[b-pijoyfawca] {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nm-muted);
}
.cell-date[b-pijoyfawca] { color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.nm-row-actions[b-pijoyfawca] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer phân trang ── */
.tab-foot[b-pijoyfawca] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ── Form trong modal ── */
.modal-form[b-pijoyfawca] { display: flex; flex-direction: column; gap: 12px; }
.modal-form[b-pijoyfawca]  .input-mono { font-family: ui-monospace, 'JetBrains Mono', monospace; }
.check-row[b-pijoyfawca] { display: flex; gap: 18px; flex-wrap: wrap; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/EmployeesTab.razor.rz.scp.css */
/* EmployeesTab — chuẩn nm-list, token-only (--nm-*) */
.nm-tab-stack[b-upp7p9zge2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head: mô tả + nút import/thêm ── */
.emp-head[b-upp7p9zge2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.emp-desc[b-upp7p9zge2] { margin: 0; font-size: 13px; color: var(--nm-muted); }
.emp-desc strong[b-upp7p9zge2] { color: var(--nm-ink-2); font-weight: 600; }
.emp-head-actions[b-upp7p9zge2] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Toolbar filter ── */
.nm-list-toolbar[b-upp7p9zge2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.tb-search[b-upp7p9zge2] { width: 280px; max-width: 100%; }
.tb-select[b-upp7p9zge2] { min-width: 170px; }
.tb-select[b-upp7p9zge2]  .nm-select-wrap,
.tb-select[b-upp7p9zge2]  .nm-select { width: 100%; }
.tb-chips[b-upp7p9zge2] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-filters[b-upp7p9zge2] { display: contents; }
[b-upp7p9zge2] .nm-btn.tb-clear { margin-left: auto; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-upp7p9zge2] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-upp7p9zge2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .tb-search[b-upp7p9zge2] { flex: 1; width: auto; }
    [b-upp7p9zge2] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-upp7p9zge2] { display: none; }
    .tb-filters.is-open[b-upp7p9zge2] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-upp7p9zge2] { flex: 1 1 45%; min-width: 0; }
}

/* ── Cell helpers ── */
.cell-2line[b-upp7p9zge2] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-upp7p9zge2] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub[b-upp7p9zge2] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.cell-date[b-upp7p9zge2] { font-variant-numeric: tabular-nums; color: var(--nm-ink-2); }
.emp-muted[b-upp7p9zge2] { color: var(--nm-muted); }

/* cell 1 dòng — không wrap, cắt ellipsis khi quá dài (title hiện full) */
.cell-nowrap[b-upp7p9zge2] {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    vertical-align: middle;
}

/* tag vai trò (màu động theo hash tên → inline style) */
.cell-roles[b-upp7p9zge2] { display: flex; flex-wrap: wrap; gap: 3px; max-width: 190px; }
.cell-role-tag[b-upp7p9zge2] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* trạng thái online / lần đăng nhập cuối */
.cell-online[b-upp7p9zge2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--nm-ok);
    white-space: nowrap;
}
.cell-online__ping[b-upp7p9zge2] { position: relative; display: inline-flex; width: 8px; height: 8px; }
.cell-online__ping > span:first-child[b-upp7p9zge2] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--nm-ok);
    opacity: .6;
    animation: emp-ping-b-upp7p9zge2 1.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.cell-online__ping > span:last-child[b-upp7p9zge2] {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--nm-ok);
}
@keyframes emp-ping-b-upp7p9zge2 {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.cell-lastlogin[b-upp7p9zge2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

/* hàng nhân viên ngừng hoạt động — làm mờ nhẹ */
[b-upp7p9zge2] .emp-row-inactive .nm-grid__td { opacity: .65; }

.nm-code-pill[b-upp7p9zge2] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* pill cấp bậc — màu động theo rank (inline --rank) */
.emp-rank[b-upp7p9zge2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    background: color-mix(in srgb, var(--rank, #6B7280) 13%, transparent);
    color: var(--rank, #6B7280);
}
.emp-rank__dot[b-upp7p9zge2] { width: 6px; height: 6px; border-radius: 50%; background: var(--rank, #6B7280); flex-shrink: 0; }

.nm-row-actions[b-upp7p9zge2] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer: tổng + phân trang ── */
.emp-foot[b-upp7p9zge2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.emp-total[b-upp7p9zge2] { font-size: 12.5px; color: var(--nm-muted); }
.emp-total strong[b-upp7p9zge2] { color: var(--nm-ink); font-weight: 700; }

/* ── Modal: sub header ── */
.emp-modal-sub[b-upp7p9zge2] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}

/* ── Form ── */
.emp-form[b-upp7p9zge2] { display: flex; flex-direction: column; gap: 14px; }

.emp-sect[b-upp7p9zge2] { border-bottom: 1px solid var(--nm-border); padding-bottom: 6px; }
.emp-sect__title[b-upp7p9zge2] {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.emp-sect__title small[b-upp7p9zge2] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 11px;
    color: var(--nm-muted);
    margin-left: 4px;
}
.emp-sect__desc[b-upp7p9zge2] { margin: 3px 0 0; font-size: 12px; color: var(--nm-muted); }

.emp-hint[b-upp7p9zge2] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }

/* ── Card chọn vai trò / phạm vi tìm kiếm ── */
.emp-roles[b-upp7p9zge2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 640px) {
    .emp-roles[b-upp7p9zge2] { grid-template-columns: 1fr; }
}
.emp-role-card[b-upp7p9zge2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.emp-role-card:hover[b-upp7p9zge2] { border-color: var(--nm-brand-500); }
.emp-role-card.is-on[b-upp7p9zge2] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.emp-role-card.is-locked[b-upp7p9zge2] { opacity: .55; pointer-events: none; cursor: not-allowed; }
.emp-role-card input[type="checkbox"][b-upp7p9zge2],
.emp-role-card input[type="radio"][b-upp7p9zge2] {
    width: 16px; height: 16px;
    accent-color: var(--nm-brand-600);
    margin-top: 2px;
    flex-shrink: 0;
}
.emp-role-card__body[b-upp7p9zge2] { min-width: 0; flex: 1; display: block; }
.emp-role-card__name[b-upp7p9zge2] { display: block; font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.emp-role-card__desc[b-upp7p9zge2] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--nm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emp-role-card__meta[b-upp7p9zge2] { display: block; margin-top: 2px; font-size: 11px; color: var(--nm-muted); }

.emp-roles-loading[b-upp7p9zge2] { display: flex; flex-direction: column; gap: 6px; }

/* ── Edit header card ── */
.emp-edit-head[b-upp7p9zge2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    flex-wrap: wrap;
}
.emp-avatar[b-upp7p9zge2] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--nm-brand-50);
    color: var(--nm-brand-600);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.emp-edit-head__info[b-upp7p9zge2] { flex: 1; min-width: 0; }
.emp-edit-head__name[b-upp7p9zge2] { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--nm-ink); }
.emp-edit-head__sub[b-upp7p9zge2] {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--nm-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.emp-edit-head__status[b-upp7p9zge2] { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.emp-edit-head__status-lbl[b-upp7p9zge2] { font-size: 11.5px; color: var(--nm-muted); }

/* ── Thông điệp trạng thái search-scope ── */
.emp-scope-msg[b-upp7p9zge2] {
    margin: 4px 0 0;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.emp-scope-msg--warn[b-upp7p9zge2] { color: var(--nm-warn); }
.emp-scope-msg--bad[b-upp7p9zge2] { color: var(--nm-bad); }
.emp-scope-msg--ok[b-upp7p9zge2] { color: var(--nm-ok); }
.emp-scope-msg--muted[b-upp7p9zge2] { color: var(--nm-muted); }

.emp-spin[b-upp7p9zge2] { display: inline-block; animation: emp-spin-b-upp7p9zge2 .8s linear infinite; }
@keyframes emp-spin-b-upp7p9zge2 { to { transform: rotate(360deg); } }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/FeeSettingsTab.razor.rz.scp.css */
/* Manager Dashboard v4 theme — Prefix: feetab- */
.feetab-root[b-jwtqolqo20] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feetab-num[b-jwtqolqo20] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; font-feature-settings: 'tnum'; }

/* ── Toolbar ── */
.feetab-toolbar[b-jwtqolqo20] {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.feetab-toolbar-left[b-jwtqolqo20] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feetab-desc[b-jwtqolqo20] { font-size: 14px; color: var(--d-ink-3); margin: 0; }
.feetab-desc strong[b-jwtqolqo20] { color: var(--d-ink-2); font-weight: 500; }

.feetab-search[b-jwtqolqo20] { position: relative; width: 280px; max-width: 100%; }
.feetab-search svg[b-jwtqolqo20] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--d-ink-4); pointer-events: none; }
.feetab-search input[b-jwtqolqo20] {
    width: 100%; height: 36px; padding: 0 12px 0 34px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.feetab-search input:focus[b-jwtqolqo20] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

/* ── Buttons ── */
.feetab-btn[b-jwtqolqo20] {
    height: 36px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line);
    background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s;
}
.feetab-btn:hover[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.feetab-btn:disabled[b-jwtqolqo20] { opacity: 0.55; cursor: not-allowed; }
.feetab-btn-accent[b-jwtqolqo20] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.feetab-btn-accent:hover[b-jwtqolqo20] { background: var(--d-accent-grad-hover); color: #fff; }
.feetab-btn-ghost[b-jwtqolqo20] { background: transparent; border-color: transparent; color: var(--d-ink-2); }
.feetab-btn-ghost:hover[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink); }
.feetab-btn-danger[b-jwtqolqo20] { background: var(--d-danger); color: #fff; border-color: transparent; }
.feetab-btn-danger:hover[b-jwtqolqo20] { background: #b91c1c; color: #fff; }
.feetab-btn-sm[b-jwtqolqo20] { height: 30px; padding: 0 10px; font-size: 12px; }

/* ── Card ── */
.feetab-card[b-jwtqolqo20] {
    background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden;
}
.feetab-card-overflow[b-jwtqolqo20] { overflow: visible; }
.feetab-card-hd[b-jwtqolqo20] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); flex-wrap: wrap;
}
.feetab-card-hd h3[b-jwtqolqo20] {
    margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Tabs / Segmented (filter pills) ── */
.feetab-seg[b-jwtqolqo20] {
    display: inline-flex; align-items: center; gap: 2px; padding: 4px;
    background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r);
}
.feetab-seg button[b-jwtqolqo20] {
    height: 28px; padding: 0 12px; border-radius: 7px; border: 0; background: transparent;
    font-size: 12.5px; font-weight: 500; color: var(--d-ink-3); cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s;
}
.feetab-seg button:hover[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink); }
.feetab-seg button.is-active[b-jwtqolqo20] {
    background: var(--d-accent-grad); color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

.feetab-select[b-jwtqolqo20] {
    height: 36px; padding: 0 30px 0 12px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; color: var(--d-ink);
    cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.feetab-select:focus[b-jwtqolqo20] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

/* ── Tables ── */
.feetab-tbl-wrap[b-jwtqolqo20] { overflow-x: auto; }
.feetab-tbl[b-jwtqolqo20] { width: 100%; border-collapse: collapse; font-size: 14px; }
.feetab-tbl thead th[b-jwtqolqo20] {
    font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase;
    letter-spacing: 0.08em; text-align: left; padding: 10px 16px;
    border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap;
}
.feetab-tbl thead th.right[b-jwtqolqo20] { text-align: right; }
.feetab-tbl thead th.center[b-jwtqolqo20] { text-align: center; }
.feetab-tbl tbody td[b-jwtqolqo20] {
    padding: 12px 16px; border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2); vertical-align: middle;
}
.feetab-tbl tbody tr:last-child td[b-jwtqolqo20] { border-bottom: 0; }
.feetab-tbl tbody tr:hover[b-jwtqolqo20] { background: var(--d-surface-2); }
.feetab-tbl td.right[b-jwtqolqo20] { text-align: right; }
.feetab-tbl td.center[b-jwtqolqo20] { text-align: center; }
.feetab-tbl td.muted[b-jwtqolqo20] { color: var(--d-ink-3); font-size: 12px; }
.feetab-tbl-stt[b-jwtqolqo20] { color: var(--d-ink-4); font-size: 11.5px; }
.feetab-tbl-name[b-jwtqolqo20] { font-weight: 500; color: var(--d-ink); }
.feetab-tbl-sub[b-jwtqolqo20] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.feetab-tbl-mono[b-jwtqolqo20] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--d-ink-2); }

/* ── Tags ── */
.feetab-tag[b-jwtqolqo20] {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; line-height: 1.5;
}
.feetab-tag .d[b-jwtqolqo20] { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.feetab-tag.good[b-jwtqolqo20] { background: color-mix(in srgb, var(--d-good) 12%, transparent); color: var(--d-good); }
.feetab-tag.good .d[b-jwtqolqo20] { background: var(--d-good); }
.feetab-tag.draft[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink-3); }
.feetab-tag.draft .d[b-jwtqolqo20] { background: var(--d-ink-4); }
.feetab-tag.accent[b-jwtqolqo20] { background: var(--d-accent-soft); color: var(--d-accent); }
.feetab-tag.accent .d[b-jwtqolqo20] { background: var(--d-accent); }
.feetab-tag.warn[b-jwtqolqo20] { background: var(--d-warn-soft); color: #92400e; }
.feetab-tag.warn .d[b-jwtqolqo20] { background: var(--d-warn); }
.feetab-tag.danger[b-jwtqolqo20] { background: color-mix(in srgb, var(--d-danger) 12%, transparent); color: var(--d-danger); }
.feetab-tag.danger .d[b-jwtqolqo20] { background: var(--d-danger); }
.feetab-tag.info[b-jwtqolqo20] { background: color-mix(in srgb, #2563eb 10%, transparent); color: #2563eb; }
.feetab-tag.info .d[b-jwtqolqo20] { background: #2563eb; }

/* ── Row actions ── */
.feetab-actions[b-jwtqolqo20] { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.feetab-icon-btn[b-jwtqolqo20] {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: 7px; color: var(--d-ink-3);
    cursor: pointer; transition: background .12s, color .12s;
}
.feetab-icon-btn:hover[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink); }
.feetab-icon-btn.edit:hover[b-jwtqolqo20] { background: color-mix(in srgb, #2563eb 10%, transparent); color: #2563eb; }
.feetab-icon-btn.danger:hover[b-jwtqolqo20] { background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); }

/* ── Empty / Loading ── */
.feetab-empty[b-jwtqolqo20] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center;
}
.feetab-empty b[b-jwtqolqo20] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.feetab-empty small[b-jwtqolqo20] { font-size: 12px; }
.feetab-empty svg[b-jwtqolqo20] { color: var(--d-ink-4); margin-bottom: 6px; }
.feetab-empty-link[b-jwtqolqo20] {
    color: var(--d-accent); font-weight: 500; font-size: 14px; text-decoration: none;
    background: none; border: 0; cursor: pointer; padding: 4px 0;
}
.feetab-empty-link:hover[b-jwtqolqo20] { text-decoration: underline; }
.feetab-loading[b-jwtqolqo20] { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.feetab-spinner[b-jwtqolqo20] {
    width: 26px; height: 26px; border: 3px solid var(--d-line);
    border-top-color: var(--d-accent); border-radius: 50%;
    animation: feetab-spin-b-jwtqolqo20 0.7s linear infinite;
}
@keyframes feetab-spin-b-jwtqolqo20 { to { transform: rotate(360deg); } }

/* ── Banner ── */
.feetab-banner[b-jwtqolqo20] {
    padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.feetab-banner.good[b-jwtqolqo20] { background: color-mix(in srgb, var(--d-good) 10%, transparent); color: var(--d-good); border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent); }
.feetab-banner.danger[b-jwtqolqo20] { background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); }
.feetab-banner.warn[b-jwtqolqo20] { background: var(--d-warn-soft); color: #92400e; border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent); }
.feetab-banner button[b-jwtqolqo20] { margin-left: auto; background: transparent; border: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 16px; line-height: 1; }
.feetab-banner button:hover[b-jwtqolqo20] { opacity: 1; }

/* ── Modal ── */
.feetab-modal-backdrop[b-jwtqolqo20] {
    position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(28, 25, 23, 0.55);
}
.feetab-modal[b-jwtqolqo20] {
    width: 100%; max-width: 560px; max-height: 90vh; background: var(--d-surface);
    border-radius: var(--d-r); border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28,25,23,0.35); display: flex; flex-direction: column; overflow: hidden;
}
.feetab-modal.lg[b-jwtqolqo20] { max-width: 760px; }
.feetab-modal.xl[b-jwtqolqo20] { max-width: 920px; }
.feetab-modal-hd[b-jwtqolqo20] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--d-line);
}
.feetab-modal-hd h2[b-jwtqolqo20] {
    margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink);
}
.feetab-modal-hd .sub[b-jwtqolqo20] { font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
.feetab-modal-close[b-jwtqolqo20] {
    width: 30px; height: 30px; border: 0; background: transparent; border-radius: 7px;
    color: var(--d-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.feetab-modal-close:hover[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink); }
.feetab-modal-body[b-jwtqolqo20] { flex: 1; overflow-y: auto; padding: 18px; }
.feetab-modal-ft[b-jwtqolqo20] {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 12px 18px; border-top: 1px solid var(--d-line); background: var(--d-surface-2);
}

/* ── Forms ── */
.feetab-form[b-jwtqolqo20] { display: flex; flex-direction: column; gap: 14px; }
.feetab-form-grid[b-jwtqolqo20] { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .feetab-form-grid.cols-2[b-jwtqolqo20] { grid-template-columns: 1fr 1fr; }
    .feetab-form-grid.cols-3[b-jwtqolqo20] { grid-template-columns: 1fr 1fr 1fr; }
    .feetab-form-grid.cols-4[b-jwtqolqo20] { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.feetab-form-grid > .col-span-2[b-jwtqolqo20] { grid-column: span 1; }
@media (min-width: 640px) { .feetab-form-grid.cols-2 > .col-span-2[b-jwtqolqo20], .feetab-form-grid.cols-3 > .col-span-2[b-jwtqolqo20] { grid-column: span 2; } }

.feetab-field-label[b-jwtqolqo20] {
    display: block; font-size: 11px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.feetab-field-label .req[b-jwtqolqo20] { color: var(--d-danger); }
.feetab-field-hint[b-jwtqolqo20] { font-size: 11.5px; color: var(--d-ink-3); margin: 4px 0 0; }
.feetab-input[b-jwtqolqo20], .feetab-textarea[b-jwtqolqo20] {
    width: 100%; padding: 0 12px; border-radius: var(--d-r); border: 1px solid var(--d-line);
    background: var(--d-surface); font-size: 14px; color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.feetab-input[b-jwtqolqo20] { height: 36px; }
.feetab-textarea[b-jwtqolqo20] { padding: 8px 12px; resize: vertical; min-height: 60px; line-height: 1.5; }
.feetab-input:focus[b-jwtqolqo20], .feetab-textarea:focus[b-jwtqolqo20], .feetab-select:focus[b-jwtqolqo20] {
    outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12);
}
.feetab-input.mono[b-jwtqolqo20], .feetab-textarea.mono[b-jwtqolqo20] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

.feetab-section-title[b-jwtqolqo20] {
    font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    padding-bottom: 6px; border-bottom: 1px solid var(--d-line-2);
}
.feetab-section-title small[b-jwtqolqo20] { text-transform: none; letter-spacing: 0; color: var(--d-ink-4); font-weight: 400; font-size: 11px; margin-left: 4px; }

.feetab-check[b-jwtqolqo20] {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--d-ink-2);
}
.feetab-check input[type="checkbox"][b-jwtqolqo20] { width: 16px; height: 16px; accent-color: var(--d-accent); }

/* ── Toggle ── */
.feetab-toggle[b-jwtqolqo20] {
    position: relative; display: inline-flex; align-items: center;
    height: 22px; width: 40px; border: 0; border-radius: 999px; background: var(--d-line);
    cursor: pointer; transition: background .12s;
}
.feetab-toggle.on[b-jwtqolqo20] { background: var(--d-good); }
.feetab-toggle .knob[b-jwtqolqo20] {
    display: inline-block; height: 16px; width: 16px; border-radius: 50%;
    background: #fff; transform: translateX(3px); transition: transform .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.feetab-toggle.on .knob[b-jwtqolqo20] { transform: translateX(21px); }

/* ── Pagination wrap ── */
.feetab-foot[b-jwtqolqo20] {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 14px; background: var(--d-surface);
    border: 1px solid var(--d-line); border-radius: var(--d-r);
    font-size: 12px; color: var(--d-ink-3); flex-wrap: wrap;
}

/* ── Filter bar (chip row) ── */
.feetab-filterbar[b-jwtqolqo20] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 12px; background: var(--d-surface);
    border: 1px solid var(--d-line); border-radius: var(--d-r);
}
.feetab-filterbar-label[b-jwtqolqo20] {
    font-size: 11px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.feetab-chips[b-jwtqolqo20] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feetab-chip[b-jwtqolqo20] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px; border-radius: 999px;
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 12.5px; font-weight: 500; color: var(--d-ink-2);
    cursor: pointer; white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.feetab-chip:hover[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink); }
.feetab-chip svg[b-jwtqolqo20] { color: var(--d-ink-3); }
.feetab-chip.is-active[b-jwtqolqo20] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}
.feetab-chip.is-active svg[b-jwtqolqo20] { color: #fff; }
.feetab-chip-count[b-jwtqolqo20] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; line-height: 1;
    background: var(--d-surface-2); color: var(--d-ink-3);
}
.feetab-chip.is-active .feetab-chip-count[b-jwtqolqo20] { background: rgba(255,255,255,0.22); color: #fff; }

/* ── Service card grid (modal picker) ── */
.feetab-svc-grid[b-jwtqolqo20] {
    display: grid; gap: 8px; margin-top: 8px;
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .feetab-svc-grid[b-jwtqolqo20] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .feetab-svc-grid[b-jwtqolqo20] { grid-template-columns: repeat(6, 1fr); } }
.feetab-svc-card[b-jwtqolqo20] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 8px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    cursor: pointer; text-align: center; transition: all .12s;
    color: var(--d-ink-2);
}
.feetab-svc-card:hover[b-jwtqolqo20] {
    background: var(--d-surface-2); border-color: var(--d-line);
    color: var(--d-ink); transform: translateY(-1px);
}
.feetab-svc-card.is-active[b-jwtqolqo20] {
    background: var(--d-accent-grad-soft); border-color: var(--d-accent);
    color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.10);
}
.feetab-svc-card-label[b-jwtqolqo20] { font-size: 12.5px; font-weight: 500; }
.feetab-svc-card-icon[b-jwtqolqo20] {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-surface-2); color: var(--d-ink-3);
}
.feetab-svc-card.is-active .feetab-svc-card-icon[b-jwtqolqo20] {
    background: rgba(234,88,12,0.12); color: var(--d-accent);
}

/* Per-service tint (subtle, used in cards + table icon) */
.feetab-svc-card-icon.svc-flight[b-jwtqolqo20],
.feetab-svc-icon.svc-flight[b-jwtqolqo20] { background: rgba(37,99,235,0.10); color: #2563eb; }
.feetab-svc-card-icon.svc-hotel[b-jwtqolqo20],
.feetab-svc-icon.svc-hotel[b-jwtqolqo20] { background: rgba(217,119,6,0.10); color: #b45309; }
.feetab-svc-card-icon.svc-tour[b-jwtqolqo20],
.feetab-svc-icon.svc-tour[b-jwtqolqo20] { background: rgba(22,163,74,0.10); color: #15803d; }
.feetab-svc-card-icon.svc-visa[b-jwtqolqo20],
.feetab-svc-icon.svc-visa[b-jwtqolqo20] { background: rgba(147,51,234,0.10); color: #7c3aed; }
.feetab-svc-card-icon.svc-esim[b-jwtqolqo20],
.feetab-svc-icon.svc-esim[b-jwtqolqo20] { background: rgba(8,145,178,0.10); color: #0891b2; }
.feetab-svc-card-icon.svc-other[b-jwtqolqo20],
.feetab-svc-icon.svc-other[b-jwtqolqo20] { background: var(--d-surface-2); color: var(--d-ink-3); }
.feetab-svc-card.is-active.feetab-svc-card .feetab-svc-card-icon.svc-flight[b-jwtqolqo20],
.feetab-svc-card.is-active .feetab-svc-card-icon.svc-hotel[b-jwtqolqo20],
.feetab-svc-card.is-active .feetab-svc-card-icon.svc-tour[b-jwtqolqo20],
.feetab-svc-card.is-active .feetab-svc-card-icon.svc-visa[b-jwtqolqo20],
.feetab-svc-card.is-active .feetab-svc-card-icon.svc-esim[b-jwtqolqo20] {
    /* Keep tint when active so user still sees service identity */
    box-shadow: 0 0 0 1.5px currentColor;
}

/* ── Region segmented (3-up tile) ── */
.feetab-region-seg[b-jwtqolqo20] {
    display: grid; gap: 8px; margin-top: 8px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) { .feetab-region-seg[b-jwtqolqo20] { grid-template-columns: repeat(3, 1fr); } }
.feetab-region-opt[b-jwtqolqo20] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 10px 12px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    cursor: pointer; text-align: left; color: var(--d-ink-2);
    transition: all .12s;
}
.feetab-region-opt > span:first-of-type[b-jwtqolqo20] {
    font-size: 14px; font-weight: 600; color: var(--d-ink); display: inline-flex;
    align-items: center; gap: 6px;
}
.feetab-region-opt svg[b-jwtqolqo20] { color: var(--d-ink-3); }
.feetab-region-opt small[b-jwtqolqo20] { font-size: 11.5px; color: var(--d-ink-3); font-weight: 400; line-height: 1.4; }
.feetab-region-opt:hover[b-jwtqolqo20] { background: var(--d-surface-2); }
.feetab-region-opt.is-active[b-jwtqolqo20] {
    background: var(--d-surface);
    box-shadow: 0 0 0 2px currentColor inset, 0 1px 2px rgba(0,0,0,0.04);
}
.feetab-region-opt.is-active.region-all[b-jwtqolqo20] { color: #475569; border-color: #475569; }
.feetab-region-opt.is-active.region-all > span:first-of-type[b-jwtqolqo20],
.feetab-region-opt.is-active.region-all svg[b-jwtqolqo20] { color: #475569; }
.feetab-region-opt.is-active.region-dom[b-jwtqolqo20] { color: #2563eb; border-color: #2563eb; }
.feetab-region-opt.is-active.region-dom > span:first-of-type[b-jwtqolqo20],
.feetab-region-opt.is-active.region-dom svg[b-jwtqolqo20] { color: #2563eb; }
.feetab-region-opt.is-active.region-intl[b-jwtqolqo20] { color: #7c3aed; border-color: #7c3aed; }
.feetab-region-opt.is-active.region-intl > span:first-of-type[b-jwtqolqo20],
.feetab-region-opt.is-active.region-intl svg[b-jwtqolqo20] { color: #7c3aed; }

/* ── "Applies to" cell ── */
.feetab-applies[b-jwtqolqo20] { display: inline-flex; align-items: center; gap: 10px; }
.feetab-applies-text[b-jwtqolqo20] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feetab-svc-icon[b-jwtqolqo20] {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feetab-svc-icon svg[b-jwtqolqo20] { width: 16px; height: 16px; }

/* ── Region tag (table) ── */
.feetab-tag.region[b-jwtqolqo20] {
    padding: 1px 8px; font-size: 11px; font-weight: 500;
    border: 1px solid transparent;
}
.feetab-tag.region.region-dom[b-jwtqolqo20] {
    background: rgba(37,99,235,0.10); color: #1d4ed8; border-color: rgba(37,99,235,0.20);
}
.feetab-tag.region.region-intl[b-jwtqolqo20] {
    background: rgba(147,51,234,0.10); color: #6d28d9; border-color: rgba(147,51,234,0.20);
}
.feetab-tag.region.region-all[b-jwtqolqo20] {
    background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line);
}

.feetab-section-title .req[b-jwtqolqo20] { color: var(--d-danger); margin-left: 4px; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/FlightFeesTab.razor.rz.scp.css */
/* FlightFeesTab — chuẩn nm-list: token-only, chrome bảng do DataGrid/Nm* lo */
.nm-tab-stack[b-4tuh810823] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar: chips lọc loại chặng + nút thêm ── */
.nm-list-toolbar[b-4tuh810823] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-chips[b-4tuh810823] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-end[b-4tuh810823] { margin-left: auto; }

/* ── Cell helpers ── */
.fft-mono[b-4tuh810823] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fft-muted[b-4tuh810823] { color: var(--nm-muted); }

.nm-row-actions[b-4tuh810823] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* hàng đã tắt — làm mờ nhẹ */
[b-4tuh810823] .fft-row-off .nm-grid__td { opacity: .55; }

/* ── Form trong modal ── */
.fft-form[b-4tuh810823] { display: flex; flex-direction: column; gap: 14px; }

.fft-grid[b-4tuh810823] { display: grid; gap: 12px; }
.fft-grid.cols-4[b-4tuh810823] { grid-template-columns: repeat(4, 1fr); }
.fft-grid.cols-3[b-4tuh810823] { grid-template-columns: repeat(3, 1fr); }
.fft-grid.cols-2[b-4tuh810823] { grid-template-columns: repeat(2, 1fr); }

.fft-method[b-4tuh810823] { max-width: 260px; }

/* thẻ phí theo hạng khách */
.fft-pax[b-4tuh810823] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    padding: 12px 14px;
}
.fft-pax-hd[b-4tuh810823] {
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-ink);
    margin-bottom: 10px;
}
.fft-pax-fields[b-4tuh810823] { display: flex; flex-direction: column; gap: 8px; }
[b-4tuh810823] .fft-num { text-align: right; }

.fft-confirm[b-4tuh810823] { margin: 0; font-size: 14px; color: var(--nm-ink-2); }

@media (max-width: 720px) {
    .fft-grid.cols-4[b-4tuh810823] { grid-template-columns: repeat(2, 1fr); }
    .fft-grid.cols-3[b-4tuh810823] { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .fft-grid.cols-4[b-4tuh810823], .fft-grid.cols-2[b-4tuh810823] { grid-template-columns: 1fr; }
}
/* /src/Features/Org/Pages/Manager/Companies/Tabs/JobTitlesTab.razor.rz.scp.css */
/* JobTitlesTab — chuẩn nm-list: toolbar + nhóm theo phòng ban (DataGrid) + NmModal. */
.nm-tab-stack[b-5shnlu3zch] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.nm-list-toolbar[b-5shnlu3zch] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-5shnlu3zch] { width: 280px; max-width: 100%; }
.tb-select[b-5shnlu3zch] { min-width: 200px; }
.tb-actions[b-5shnlu3zch] { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 640px) {
    .tb-search[b-5shnlu3zch] { flex: 1; width: auto; }
    .tb-select[b-5shnlu3zch] { flex: 1 1 100%; min-width: 0; }
    .tb-select[b-5shnlu3zch]  .nm-select-wrap,
    .tb-select[b-5shnlu3zch]  .nm-select { width: 100%; }
}

/* ── Nhóm theo phòng ban ── */
.jt-groups[b-5shnlu3zch] { display: flex; flex-direction: column; gap: 18px; }
.jt-group[b-5shnlu3zch] { display: flex; flex-direction: column; gap: 8px; }

.jt-group__hd[b-5shnlu3zch] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.jt-group__ico[b-5shnlu3zch] { color: var(--nm-brand-600); font-size: 14px; }
.jt-group__title[b-5shnlu3zch] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
[b-5shnlu3zch] .nm-btn.jt-group__add { margin-left: auto; }

/* ── Cell helpers ── */
.cell-name[b-5shnlu3zch] { font-weight: 600; color: var(--nm-ink); }
.cell-desc[b-5shnlu3zch] {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nm-muted);
}
.cell-order[b-5shnlu3zch] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
}
.nm-row-actions[b-5shnlu3zch] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer phân trang ── */
.tab-foot[b-5shnlu3zch] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ── Form trong modal ── */
.modal-form[b-5shnlu3zch] { display: flex; flex-direction: column; gap: 12px; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/RanksTab.razor.rz.scp.css */
/* ===== RanksTab — nm-list token-only | prefix rk- ===== */

.nm-tab-stack[b-643mmzrd7c] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.nm-list-toolbar[b-643mmzrd7c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-643mmzrd7c] { width: 300px; max-width: 100%; }
.rk-hint[b-643mmzrd7c] { font-size: 12px; color: var(--nm-muted); }
.rk-add-wrap[b-643mmzrd7c] { margin-left: auto; }

/* ── Head danh sách ── */
.rk-list-head[b-643mmzrd7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.rk-list-head h3[b-643mmzrd7c] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.rk-list-head small[b-643mmzrd7c] { font-size: 11px; color: var(--nm-muted); }
.rk-count[b-643mmzrd7c] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nm-brand-700);
    background: var(--nm-brand-50);
    border-radius: var(--nm-r-pill);
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.rk-skels[b-643mmzrd7c] { display: flex; flex-direction: column; gap: 8px; }

/* ── Bảng thô (có hàng expand) — pattern .cabkd-table ── */
.rk-tbl-wrap[b-643mmzrd7c] { overflow-x: auto; }
.rk-tbl[b-643mmzrd7c] { width: 100%; border-collapse: collapse; font-size: 13px; }
.rk-tbl thead th[b-643mmzrd7c] {
    font-size: 11px;
    font-weight: 600;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}
.rk-tbl tbody td[b-643mmzrd7c] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-border);
    color: var(--nm-ink-2);
    vertical-align: middle;
}
.rk-tbl th.center[b-643mmzrd7c], .rk-tbl td.center[b-643mmzrd7c] { text-align: center; }
.rk-tbl tbody tr:last-child td[b-643mmzrd7c] { border-bottom: 0; }
.rk-row[b-643mmzrd7c] { cursor: pointer; }
.rk-row:hover[b-643mmzrd7c] { background: var(--nm-surface-2); }

.rk-stt[b-643mmzrd7c] { color: var(--nm-muted); font-size: 12px; }
.rk-chevron[b-643mmzrd7c] { color: var(--nm-muted); font-size: 12px; display: inline-block; transition: transform .15s; }
.rk-chevron.is-open[b-643mmzrd7c] { transform: rotate(90deg); }
.rk-rank[b-643mmzrd7c] { display: inline-flex; align-items: center; gap: 8px; }
.rk-dot[b-643mmzrd7c] { width: 10px; height: 10px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.rk-name[b-643mmzrd7c] { font-weight: 500; color: var(--nm-ink); }
.rk-mono[b-643mmzrd7c] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.nm-row-actions[b-643mmzrd7c] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Panel expand: quyền lợi theo cấp bậc ── */
.rk-expand-tr td[b-643mmzrd7c] { padding: 0; }
.rk-expand[b-643mmzrd7c] {
    background: var(--nm-surface-2);
    border-top: 1px solid var(--nm-border);
    padding: 14px 18px;
}
.rk-expand-hd[b-643mmzrd7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.rk-expand-hd h4[b-643mmzrd7c] { margin: 0; font-size: 12px; font-weight: 600; color: var(--nm-ink-2); }
.rk-expand-actions[b-643mmzrd7c] { display: flex; align-items: center; gap: 6px; }

.rk-ent-grid[b-643mmzrd7c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.rk-ent-card[b-643mmzrd7c] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    padding: 10px;
}
.rk-ent-lbl[b-643mmzrd7c] {
    margin: 0 0 4px;
    font-size: 10.5px;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.rk-ent-val[b-643mmzrd7c] { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--nm-ink); }
.rk-ent-val.is-ok[b-643mmzrd7c] { color: var(--nm-ok); }
.rk-ent-val.is-bad[b-643mmzrd7c] { color: var(--nm-bad); }
.rk-ent-empty[b-643mmzrd7c] { margin: 0; font-size: 12.5px; color: var(--nm-muted); font-style: italic; }

/* ── Form trong modal ── */
.rk-form[b-643mmzrd7c] { display: flex; flex-direction: column; gap: 14px; }
.rk-form-grid[b-643mmzrd7c] { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .rk-form-grid.cols-2[b-643mmzrd7c] { grid-template-columns: repeat(2, 1fr); } }
/* Class param của NmField không nhận page scope → ::deep từ wrapper grid */
.rk-form-grid[b-643mmzrd7c]  .col-span-2 { grid-column: 1 / -1; }
.rk-form-grid .col-span-2[b-643mmzrd7c] { grid-column: 1 / -1; }

.rk-modal-sub[b-643mmzrd7c] { margin: 2px 0 0; font-size: 12px; color: var(--nm-muted); }

.rk-section-title[b-643mmzrd7c] {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nm-ink-2);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nm-border);
}

.rk-cabin-list[b-643mmzrd7c] { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.rk-check-row[b-643mmzrd7c] { display: flex; gap: 18px; flex-wrap: wrap; }

/* Bảng màu cấp bậc */
.rk-swatches[b-643mmzrd7c] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rk-swatch[b-643mmzrd7c] {
    width: 24px;
    height: 24px;
    border-radius: var(--nm-r-pill);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform .12s, border-color .12s;
}
.rk-swatch.is-active[b-643mmzrd7c] { border-color: var(--nm-ink); transform: scale(1.1); }

.rk-color[b-643mmzrd7c] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    padding: 2px;
    cursor: pointer;
}
/* /src/Features/Org/Pages/Manager/Companies/Tabs/RolesTab.razor.rz.scp.css */
/* RolesTab — Manager Dashboard v4 theme */
.roletab-root[b-0wanw04wa4] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
}

.roletab-toolbar[b-0wanw04wa4] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.roletab-search[b-0wanw04wa4] { position: relative; flex: 1; max-width: 320px; min-width: 200px; }
    .roletab-search input[b-0wanw04wa4] { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; transition: border-color .12s, box-shadow .12s; letter-spacing: -0.01em; }
    .roletab-search input:focus[b-0wanw04wa4] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
    .roletab-search svg[b-0wanw04wa4] { position: absolute; left: 11px; top: 11px; width: 14px; height: 14px; color: var(--d-ink-4); }

.roletab-btn[b-0wanw04wa4] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
    .roletab-btn:hover[b-0wanw04wa4] { background: var(--d-surface-2); }
.roletab-btn-accent[b-0wanw04wa4] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
    .roletab-btn-accent:hover[b-0wanw04wa4] { background: var(--d-accent-grad-hover); color: #fff; }

.roletab-card[b-0wanw04wa4] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }

.roletab-tbl-wrap[b-0wanw04wa4] { overflow-x: auto; }
.roletab-tbl[b-0wanw04wa4] { width: 100%; border-collapse: collapse; font-size: 14px; }
    .roletab-tbl thead th[b-0wanw04wa4] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; }
    .roletab-tbl thead th.center[b-0wanw04wa4] { text-align: center; }
    .roletab-tbl tbody td[b-0wanw04wa4] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
    .roletab-tbl tbody tr:last-child td[b-0wanw04wa4] { border-bottom: 0; }
    .roletab-tbl tbody tr:hover[b-0wanw04wa4] { background: var(--d-surface-2); }
.roletab-tbl-num[b-0wanw04wa4] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--d-ink-4); font-size: 12px; }
.roletab-name[b-0wanw04wa4] { font-weight: 500; color: var(--d-ink); }
.roletab-tag-sys[b-0wanw04wa4] { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent); font-size: 10.5px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; margin-left: 6px; }

.roletab-status[b-0wanw04wa4] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.roletab-status.good[b-0wanw04wa4] { background: var(--d-good-soft); color: var(--d-good); }
.roletab-status.off[b-0wanw04wa4] { background: var(--d-surface-2); color: var(--d-ink-3); }

.roletab-actions[b-0wanw04wa4] { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.roletab-icon-btn[b-0wanw04wa4] { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--d-ink-4); background: transparent; border: 0; cursor: pointer; transition: background .12s, color .12s; }
    .roletab-icon-btn:hover[b-0wanw04wa4] { background: var(--d-surface-2); color: var(--d-ink); }
    .roletab-icon-btn.danger:hover[b-0wanw04wa4] { background: #fee2e2; color: var(--d-danger); }
    .roletab-icon-btn.accent:hover[b-0wanw04wa4] { background: var(--d-accent-soft); color: var(--d-accent); }

.roletab-empty[b-0wanw04wa4] { padding: 48px 16px; text-align: center; color: var(--d-ink-3); font-size: 14px; }
.roletab-loading[b-0wanw04wa4] { display: flex; justify-content: center; padding: 48px 0; color: var(--d-accent); }

/* ── Modal ── */
.roletab-modal-bg[b-0wanw04wa4] { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; padding: 16px; }
.roletab-modal[b-0wanw04wa4] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 14px; width: 100%; max-width: 480px; box-shadow: 0 20px 50px rgba(0,0,0,0.18); display: flex; flex-direction: column; max-height: 90vh; }
.roletab-modal-lg[b-0wanw04wa4] { max-width: 720px; max-height: 80vh; }
.roletab-modal-hd[b-0wanw04wa4] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--d-line); }
    .roletab-modal-hd h3[b-0wanw04wa4] { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 15px; font-weight: 600; color: var(--d-ink); letter-spacing: -0.02em; }
    .roletab-modal-hd p[b-0wanw04wa4] { margin: 2px 0 0; font-size: 12px; color: var(--d-ink-3); }
.roletab-modal-bd[b-0wanw04wa4] { padding: 16px 20px; flex: 1; overflow-y: auto; }
.roletab-modal-ft[b-0wanw04wa4] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 14px 14px; }
.roletab-close[b-0wanw04wa4] { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--d-ink-4); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
    .roletab-close:hover[b-0wanw04wa4] { background: var(--d-surface-2); color: var(--d-ink); }

.roletab-field[b-0wanw04wa4] { display: block; }
    .roletab-field + .roletab-field[b-0wanw04wa4] { margin-top: 12px; }
    .roletab-field label[b-0wanw04wa4] { display: block; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
    .roletab-field label .req[b-0wanw04wa4] { color: var(--d-danger); margin-left: 2px; }
    .roletab-field input[type="text"][b-0wanw04wa4], .roletab-field input[type="email"][b-0wanw04wa4], .roletab-field textarea[b-0wanw04wa4] { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; transition: border-color .12s, box-shadow .12s; letter-spacing: -0.01em; font-family: inherit; }
    .roletab-field input:focus[b-0wanw04wa4], .roletab-field textarea:focus[b-0wanw04wa4] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
    .roletab-field textarea[b-0wanw04wa4] { resize: none; min-height: auto; }

.roletab-checkrow[b-0wanw04wa4] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--d-ink-2); }

.roletab-error[b-0wanw04wa4] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 14px; padding: 10px 14px; border-radius: var(--d-r); margin-bottom: 12px; }

/* ── Permission tree ── */
.roletab-permbar[b-0wanw04wa4] { padding: 10px 20px; border-bottom: 1px solid var(--d-line); }
.roletab-permbar input[b-0wanw04wa4] { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; outline: none; }
.roletab-permbar[b-0wanw04wa4] { position: relative; }
.roletab-permbar svg[b-0wanw04wa4] { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--d-ink-4); }
.roletab-permnode[b-0wanw04wa4] { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; }
    .roletab-permnode:hover[b-0wanw04wa4] { background: var(--d-surface-2); }
.roletab-perm-toggle[b-0wanw04wa4] { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--d-ink-3); background: transparent; border: 0; cursor: pointer; border-radius: 5px; }
    .roletab-perm-toggle:hover[b-0wanw04wa4] { background: var(--d-surface-2); }
.roletab-perm-cb[b-0wanw04wa4] { width: 14px; height: 14px; accent-color: var(--d-accent); }
.roletab-perm-code[b-0wanw04wa4] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; color: var(--d-ink); }
.roletab-perm-name[b-0wanw04wa4] { font-size: 11.5px; color: var(--d-ink-3); }
.roletab-perm-type[b-0wanw04wa4] { font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
    .roletab-perm-type.module[b-0wanw04wa4] { background: #eef2ff; color: #4338ca; }
    .roletab-perm-type.menu[b-0wanw04wa4] { background: #eff6ff; color: #1d4ed8; }
    .roletab-perm-type.screen[b-0wanw04wa4] { background: var(--d-good-soft); color: var(--d-good); }
    .roletab-perm-type.action[b-0wanw04wa4] { background: var(--d-accent-soft); color: var(--d-accent); }
    .roletab-perm-type.other[b-0wanw04wa4] { background: var(--d-surface-2); color: var(--d-ink-3); }

.roletab-selectnote[b-0wanw04wa4] { font-size: 12px; color: var(--d-ink-3); }
    .roletab-selectnote b[b-0wanw04wa4] { color: var(--d-accent); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/ServiceLicensesTab.razor.rz.scp.css */
/* ServiceLicensesTab — chuẩn nm-list: token-only, chrome bảng do DataGrid/Nm* lo */
.nm-tab-stack[b-4fwnynelh1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Toolbar ── */
.nm-list-toolbar[b-4fwnynelh1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-4fwnynelh1] { width: 300px; max-width: 100%; }
.tb-end[b-4fwnynelh1] { margin-left: auto; }

@media (max-width: 640px) {
    .tb-search[b-4fwnynelh1] { flex: 1; width: auto; }
}

/* ── Cell: dịch vụ (icon + tên + mã) ── */
.lict-svc[b-4fwnynelh1] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lict-svc-ico[b-4fwnynelh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-600);
    font-size: 13px;
    flex-shrink: 0;
}
.lict-svc-txt[b-4fwnynelh1] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lict-svc-name[b-4fwnynelh1] { font-size: 13px; font-weight: 600; color: var(--nm-ink); white-space: nowrap; }
.lict-svc-code[b-4fwnynelh1] {
    font-size: 11px;
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .03em;
}

/* ── Cell: phí + ngày + số ── */
.lict-fee[b-4fwnynelh1] { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lict-date[b-4fwnynelh1] { font-size: 12.5px; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lict-date-warn[b-4fwnynelh1] { color: var(--nm-bad); font-weight: 600; }
.lict-muted[b-4fwnynelh1] { font-size: 12.5px; color: var(--nm-muted); }

.nm-row-actions[b-4fwnynelh1] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* hàng license đã tắt — làm mờ nhẹ */
[b-4fwnynelh1] .lict-row-off .nm-grid__td { opacity: .6; }

.lict-foot[b-4fwnynelh1] { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ── Modal: section 2 bước + lưới form ── */
.lict-modal-alert[b-4fwnynelh1] { margin-bottom: 14px; }

.lict-sec[b-4fwnynelh1] { margin-bottom: 18px; }
.lict-sec:last-child[b-4fwnynelh1] { margin-bottom: 0; }
.lict-sec-hd[b-4fwnynelh1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--nm-border);
}
.lict-step[b-4fwnynelh1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.lict-step.is-accent[b-4fwnynelh1] { background: var(--nm-brand-50); color: var(--nm-brand-600); }
.lict-sec-title[b-4fwnynelh1] { font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.lict-sec-spacer[b-4fwnynelh1] { flex: 1; }

.lict-grid[b-4fwnynelh1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.col-2[b-4fwnynelh1] { grid-column: span 2; }
@media (max-width: 560px) {
    .lict-grid[b-4fwnynelh1] { grid-template-columns: 1fr; }
    .col-2[b-4fwnynelh1] { grid-column: auto; }
}

.lict-check-row[b-4fwnynelh1] { display: flex; align-items: center; }

/* % input + hậu tố */
.lict-pct[b-4fwnynelh1] { display: flex; align-items: center; gap: 8px; }
.lict-pct[b-4fwnynelh1]  .nm-input-wrap { flex: 1; }
.lict-pct[b-4fwnynelh1]  .nm-input { text-align: right; }
.lict-pct-suffix[b-4fwnynelh1] { font-size: 13px; font-weight: 600; color: var(--nm-muted); }

[b-4fwnynelh1] .lict-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
}

.lict-hint[b-4fwnynelh1] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }
/* /src/Features/Org/Pages/Manager/Companies/Tabs/TravelPoliciesTab.razor.rz.scp.css */
/* TravelPoliciesTab — chuẩn nm-list, token-only (--nm-*) */
.nm-tab-stack[b-g8xouc0221] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Dải thống kê mỏng (click = lọc trạng thái) ── */
.pol-stats[b-g8xouc0221] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.pol-stats[b-g8xouc0221]::-webkit-scrollbar { display: none; }

.pol-stat[b-g8xouc0221] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 16px;
    white-space: nowrap;
    min-width: max-content;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}
.pol-stat + .pol-stat[b-g8xouc0221] { border-left: 1px solid var(--nm-border); border-radius: 0 8px 8px 0; }
.pol-stat:hover .pol-stat__lbl[b-g8xouc0221] { color: var(--nm-ink); }
.pol-stat.is-active[b-g8xouc0221] { background: var(--nm-brand-50); }
.pol-stat.is-active .pol-stat__lbl[b-g8xouc0221] { color: var(--nm-brand-700); }
.pol-stat.is-active .pol-stat__val[b-g8xouc0221] { color: var(--nm-brand-700); }

.pol-stat__dot[b-g8xouc0221] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.pol-stat__dot--accent[b-g8xouc0221]  { background: var(--nm-brand-500); }
.pol-stat__dot--good[b-g8xouc0221]    { background: var(--nm-ok); }
.pol-stat__dot--warn[b-g8xouc0221]    { background: var(--nm-warn); }
.pol-stat__dot--bad[b-g8xouc0221]     { background: var(--nm-bad); }
.pol-stat__dot--neutral[b-g8xouc0221] { background: var(--nm-muted); }

.pol-stat__lbl[b-g8xouc0221] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.pol-stat__val[b-g8xouc0221] {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-g8xouc0221] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-g8xouc0221] { width: 300px; max-width: 100%; }

/* ── Chips loại + số đếm ── */
.tb-status[b-g8xouc0221] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-chip-count[b-g8xouc0221] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

/* ── Dải bộ lọc đang áp dụng ── */
.pol-filter-bar[b-g8xouc0221] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 12px;
    margin-bottom: 12px;
    background: var(--nm-surface-2);
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-card);
    font-size: 12px;
}
.pol-filter-bar__lbl[b-g8xouc0221] { color: var(--nm-muted); font-weight: 600; }
.pol-filter-bar__result[b-g8xouc0221] {
    margin-left: auto;
    color: var(--nm-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* ── Skeleton ── */
.pol-skel[b-g8xouc0221] { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }

/* ── Bảng (giữ table thô vì có hàng chi tiết expand) ── */
.pol-tbl-wrap[b-g8xouc0221] { overflow-x: auto; }
.pol-tbl[b-g8xouc0221] { width: 100%; border-collapse: collapse; font-size: 13px; }
.pol-tbl thead th[b-g8xouc0221] {
    padding: 9px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    border-bottom: 1px solid var(--nm-border);
    background: var(--nm-surface);
    white-space: nowrap;
}
.pol-tbl thead th.center[b-g8xouc0221],
.pol-tbl tbody td.center[b-g8xouc0221] { text-align: center; }
.pol-tbl tbody td[b-g8xouc0221] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nm-border);
    color: var(--nm-ink-2);
    vertical-align: middle;
}
.pol-tbl tbody tr:hover[b-g8xouc0221] { background: var(--nm-surface-2); cursor: pointer; }
.pol-tbl tbody tr.is-expanded[b-g8xouc0221] { background: var(--nm-surface-2); }
.pol-tbl tbody tr.is-expanded td[b-g8xouc0221] { border-bottom-color: transparent; }
.pol-detail-row td[b-g8xouc0221] { background: var(--nm-surface-2); padding: 0 !important; }
.pol-tbl tbody tr.pol-detail-row:hover[b-g8xouc0221] { background: var(--nm-surface-2); cursor: default; }

.pol-num[b-g8xouc0221] {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
}
.pol-stt[b-g8xouc0221] {
    color: var(--nm-muted);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
}

.pol-name-cell[b-g8xouc0221] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pol-name[b-g8xouc0221] { font-weight: 600; color: var(--nm-ink); display: inline-flex; align-items: center; gap: 6px; }
.pol-name-badges[b-g8xouc0221] { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pol-chev[b-g8xouc0221] { font-size: 11px; color: var(--nm-muted); transition: transform .15s; }
.pol-chev.is-open[b-g8xouc0221] { transform: rotate(90deg); color: var(--nm-brand-600); }

/* Tag loại chính sách — màu nhận diện dịch vụ (pattern cell-svc của CaBookings) */
.pol-type[b-g8xouc0221] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: color-mix(in srgb, var(--svc, #6B7280) 12%, transparent);
    color: var(--svc, #6B7280);
}
.pol-type--flight[b-g8xouc0221]    { --svc: #0284c7; }
.pol-type--hotel[b-g8xouc0221]     { --svc: #7c3aed; }
.pol-type--tour[b-g8xouc0221]      { --svc: #059669; }
.pol-type--visa[b-g8xouc0221]      { --svc: #b45309; }
.pol-type--esim[b-g8xouc0221]      { --svc: #db2777; }
.pol-type--fasttrack[b-g8xouc0221] { --svc: #ea580c; }
.pol-type--general[b-g8xouc0221]   { background: var(--nm-surface-2); color: var(--nm-muted); }

/* Chips tóm tắt quy tắc trong hàng */
.pol-rule-chips[b-g8xouc0221] { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pol-rule-chip[b-g8xouc0221] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--nm-border);
    border-radius: 6px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.4;
    background: var(--nm-surface);
}
.pol-rule-chip .lbl[b-g8xouc0221] {
    padding: 2px 6px;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    border-right: 1px solid var(--nm-border);
    font-weight: 500;
}
.pol-rule-chip .val[b-g8xouc0221] {
    padding: 2px 7px;
    color: var(--nm-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pol-rule-more[b-g8xouc0221] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 11px;
    font-weight: 500;
}
.pol-rule-empty[b-g8xouc0221] { color: var(--nm-muted); font-size: 11.5px; font-style: italic; }

.pol-eff[b-g8xouc0221] { display: inline-flex; align-items: center; gap: 6px; color: var(--nm-ink-2); white-space: nowrap; }
.pol-eff__sep[b-g8xouc0221] { color: var(--nm-muted); }

.nm-row-actions[b-g8xouc0221] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Panel chi tiết (hàng expand) ── */
.pol-detail[b-g8xouc0221] {
    padding: 14px 18px 16px;
    border-top: 1px dashed var(--nm-border);
    background: var(--nm-surface-2);
}
.pol-detail-hd[b-g8xouc0221] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    margin-bottom: 12px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-ink-2);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pol-detail-hd i[b-g8xouc0221] { color: var(--nm-brand-600); }

.pol-detail-cards[b-g8xouc0221] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.pol-detail-card[b-g8xouc0221] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px 11px 14px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: 8px;
}
.pol-detail-card[b-g8xouc0221]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--nm-muted);
}
.pol-detail-card.tone-money[b-g8xouc0221]::before { background: var(--nm-brand-500); }
.pol-detail-card.tone-good[b-g8xouc0221]::before  { background: var(--nm-ok); }
.pol-detail-card.tone-warn[b-g8xouc0221]::before  { background: var(--nm-warn); }
.pol-detail-card.tone-muted[b-g8xouc0221]::before { background: var(--nm-border); }

.pol-detail-card__lbl[b-g8xouc0221] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
}
.pol-detail-card__val[b-g8xouc0221] {
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.pol-detail-card.tone-money .pol-detail-card__val[b-g8xouc0221] { color: var(--nm-brand-600); }
.pol-detail-card.tone-good .pol-detail-card__val[b-g8xouc0221]  { color: var(--nm-ok); }
.pol-detail-card__sub[b-g8xouc0221] { font-size: 11px; color: var(--nm-muted); line-height: 1.4; }

.pol-detail-empty[b-g8xouc0221] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--nm-warn) 10%, var(--nm-surface));
    border: 1px solid color-mix(in srgb, var(--nm-warn) 35%, transparent);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--nm-ink-2);
}
.pol-detail-empty i[b-g8xouc0221] { flex-shrink: 0; color: var(--nm-warn); }
.pol-detail-empty em[b-g8xouc0221] { font-style: normal; font-weight: 700; }

/* ── Footer: tổng + phân trang ── */
.pol-foot[b-g8xouc0221] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pol-total[b-g8xouc0221] { font-size: 12.5px; color: var(--nm-muted); }
.pol-total strong[b-g8xouc0221] { color: var(--nm-ink); font-weight: 700; }

/* ── Form trong modal ── */
.pol-form-alert[b-g8xouc0221] { margin-bottom: 14px; }

.pol-grid[b-g8xouc0221] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pol-grid .col-2[b-g8xouc0221] { grid-column: span 2; }
@media (max-width: 560px) {
    .pol-grid[b-g8xouc0221] { grid-template-columns: 1fr; }
    .pol-grid .col-2[b-g8xouc0221] { grid-column: auto; }
}

.pol-label[b-g8xouc0221] {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.pol-label .req[b-g8xouc0221] { color: var(--nm-bad); margin-left: 2px; }
.pol-label__hint[b-g8xouc0221] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
}
.pol-field--check[b-g8xouc0221] { display: flex; align-items: center; padding-top: 18px; }

.pol-rules[b-g8xouc0221] { padding-top: 14px; border-top: 1px solid var(--nm-border); margin-top: 16px; }
.pol-rules-hd[b-g8xouc0221] {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Danh sách checkbox (hạng khoang / hãng bay) */
.pol-check-list[b-g8xouc0221] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
}
.pol-check-list--scroll[b-g8xouc0221] { max-height: 130px; overflow-y: auto; }
.pol-check-list[b-g8xouc0221]  .nm-check { white-space: nowrap; }
.pol-iata[b-g8xouc0221] { font-weight: 600; color: var(--nm-ink); }
.pol-airline-name[b-g8xouc0221] { color: var(--nm-muted); }
/* /src/Features/Org/Pages/Manager/CostCenters/CostCentersIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CostCentersIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: cost-
   ═══════════════════════════════════════════════════════════════ */

.cost-root[b-fy4w2pb1yx] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}

.cost-num[b-fy4w2pb1yx] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

.cost-mono[b-fy4w2pb1yx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ─── Hero ─── */
.cost-hero[b-fy4w2pb1yx] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 18px 28px 14px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .cost-hero h1[b-fy4w2pb1yx] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .cost-hero h1 em[b-fy4w2pb1yx] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.cost-hero-meta[b-fy4w2pb1yx] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .cost-hero-meta .dot[b-fy4w2pb1yx] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.cost-hero-left[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cost-hero-ico[b-fy4w2pb1yx] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--d-accent-grad);
    color: #fff;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
    flex-shrink: 0;
}

.cost-hero-actions[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.cost-btn[b-fy4w2pb1yx] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .cost-btn:hover[b-fy4w2pb1yx] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .cost-btn:disabled[b-fy4w2pb1yx] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.cost-btn-accent[b-fy4w2pb1yx] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .cost-btn-accent:hover[b-fy4w2pb1yx] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.cost-btn-ghost[b-fy4w2pb1yx] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .cost-btn-ghost:hover[b-fy4w2pb1yx] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.cost-btn-sm[b-fy4w2pb1yx] {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

/* ─── KPI strip ─── */
.cost-kpis[b-fy4w2pb1yx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .cost-kpis[b-fy4w2pb1yx] { grid-template-columns: 1fr; }
}

.cost-kpi[b-fy4w2pb1yx] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .cost-kpi:last-child[b-fy4w2pb1yx] {
        border-right: 0;
    }

@media (max-width: 640px) {
    .cost-kpi[b-fy4w2pb1yx] { border-right: 0; border-bottom: 1px solid var(--d-line); }
    .cost-kpi:last-child[b-fy4w2pb1yx] { border-bottom: 0; }
}

.cost-kpi-lbl[b-fy4w2pb1yx] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cost-kpi-dot[b-fy4w2pb1yx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .cost-kpi-dot.accent[b-fy4w2pb1yx] { background: var(--d-accent-grad); }
    .cost-kpi-dot.good[b-fy4w2pb1yx] { background: var(--d-good); }
    .cost-kpi-dot.danger[b-fy4w2pb1yx] { background: var(--d-danger); }

.cost-kpi-val b[b-fy4w2pb1yx] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
}

/* ─── Body ─── */
.cost-body[b-fy4w2pb1yx] {
    flex: 1;
    min-height: 0;
    padding: 18px 28px 4px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* ─── Card ─── */
.cost-card[b-fy4w2pb1yx] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cost-card-hd[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 12px;
    flex-wrap: wrap;
}

    .cost-card-hd h3[b-fy4w2pb1yx] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

.cost-pill[b-fy4w2pb1yx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
}

/* ─── Toolbar / search ─── */
.cost-toolbar[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cost-search[b-fy4w2pb1yx] {
    position: relative;
    width: 280px;
    max-width: 100%;
}

    .cost-search svg[b-fy4w2pb1yx] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .cost-search input[b-fy4w2pb1yx] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border-radius: var(--d-r);
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        transition: border-color .12s, box-shadow .12s;
    }

        .cost-search input:focus[b-fy4w2pb1yx] {
            outline: none;
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

/* ─── Banners ─── */
.cost-banner-warn[b-fy4w2pb1yx] {
    margin: 12px 28px 0;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: var(--d-warn-soft);
    color: #92400e;
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

    .cost-banner-warn .close[b-fy4w2pb1yx] {
        margin-left: auto;
        background: transparent;
        border: 0;
        color: #92400e;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        opacity: 0.7;
    }

    .cost-banner-warn .close:hover[b-fy4w2pb1yx] { opacity: 1; }

/* ─── Tables ─── */
.cost-tbl-wrap[b-fy4w2pb1yx] {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.cost-tbl[b-fy4w2pb1yx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .cost-tbl thead th[b-fy4w2pb1yx] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .cost-tbl thead th.right[b-fy4w2pb1yx] { text-align: right; }
        .cost-tbl thead th.center[b-fy4w2pb1yx] { text-align: center; }

    .cost-tbl tbody td[b-fy4w2pb1yx] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .cost-tbl tbody tr:last-child td[b-fy4w2pb1yx] {
        border-bottom: 0;
    }

    .cost-tbl tbody tr:hover[b-fy4w2pb1yx] {
        background: var(--d-surface-2);
    }

    .cost-tbl td.right[b-fy4w2pb1yx] { text-align: right; }
    .cost-tbl td.center[b-fy4w2pb1yx] { text-align: center; }

.cost-tbl-name[b-fy4w2pb1yx] {
    font-weight: 500;
    color: var(--d-ink);
}

.cost-tbl-sub[b-fy4w2pb1yx] {
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.cost-stt[b-fy4w2pb1yx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-4);
}

/* ─── Tags ─── */
.cost-tag[b-fy4w2pb1yx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

    .cost-tag .d[b-fy4w2pb1yx] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .cost-tag.good[b-fy4w2pb1yx] {
        background: color-mix(in srgb, var(--d-good) 12%, transparent);
        color: var(--d-good);
    }

        .cost-tag.good .d[b-fy4w2pb1yx] { background: var(--d-good); }

    .cost-tag.warn[b-fy4w2pb1yx] {
        background: var(--d-warn-soft);
        color: #92400e;
    }

        .cost-tag.warn .d[b-fy4w2pb1yx] { background: var(--d-warn); }

    .cost-tag.draft[b-fy4w2pb1yx] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

        .cost-tag.draft .d[b-fy4w2pb1yx] { background: var(--d-ink-4); }

.cost-type[b-fy4w2pb1yx] {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

    .cost-type.dept[b-fy4w2pb1yx] {
        background: color-mix(in srgb, #2563eb 10%, transparent);
        color: #1d4ed8;
    }

    .cost-type.proj[b-fy4w2pb1yx],
    .cost-type.region[b-fy4w2pb1yx],
    .cost-type.event[b-fy4w2pb1yx] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

/* ─── Utilization bar ─── */
.cost-util[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
}

.cost-util-track[b-fy4w2pb1yx] {
    flex: 1;
    height: 6px;
    background: var(--d-surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.cost-util-fill[b-fy4w2pb1yx] {
    height: 100%;
    border-radius: 999px;
    transition: width .2s;
}

    .cost-util-fill.low[b-fy4w2pb1yx] { background: var(--d-good); }
    .cost-util-fill.mid[b-fy4w2pb1yx] { background: #facc15; }
    .cost-util-fill.high[b-fy4w2pb1yx] { background: var(--d-warn); }
    .cost-util-fill.crit[b-fy4w2pb1yx] { background: var(--d-danger); }

.cost-util-pct[b-fy4w2pb1yx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
    min-width: 32px;
    text-align: right;
}

/* ─── Row actions ─── */
.cost-actions[b-fy4w2pb1yx] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.cost-icon-btn[b-fy4w2pb1yx] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .cost-icon-btn:hover[b-fy4w2pb1yx] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .cost-icon-btn.danger:hover[b-fy4w2pb1yx] {
        background: color-mix(in srgb, var(--d-danger) 10%, transparent);
        color: var(--d-danger);
    }

    .cost-icon-btn.edit:hover[b-fy4w2pb1yx] {
        background: color-mix(in srgb, #2563eb 10%, transparent);
        color: #2563eb;
    }

/* ─── Empty / loading ─── */
.cost-empty[b-fy4w2pb1yx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 64px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .cost-empty b[b-fy4w2pb1yx] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .cost-empty small[b-fy4w2pb1yx] {
        font-size: 12px;
    }

    .cost-empty svg[b-fy4w2pb1yx] {
        margin-bottom: 6px;
        color: var(--d-ink-4);
    }

.cost-loading[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.cost-spinner[b-fy4w2pb1yx] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: cost-spin-b-fy4w2pb1yx 0.7s linear infinite;
}

@keyframes cost-spin-b-fy4w2pb1yx {
    to { transform: rotate(360deg); }
}

/* ─── Pagination wrap ─── */
.cost-pager[b-fy4w2pb1yx] {
    flex-shrink: 0;
    padding: 10px 28px 14px;
}

/* ─── Modal ─── */
.cost-modal-backdrop[b-fy4w2pb1yx] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cost-modal[b-fy4w2pb1yx] {
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cost-modal-hd[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .cost-modal-hd h2[b-fy4w2pb1yx] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

.cost-modal-close[b-fy4w2pb1yx] {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .cost-modal-close:hover[b-fy4w2pb1yx] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.cost-modal-body[b-fy4w2pb1yx] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cost-modal-ft[b-fy4w2pb1yx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

/* ─── Form ─── */
.cost-form-grid[b-fy4w2pb1yx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .cost-form-grid[b-fy4w2pb1yx] { grid-template-columns: 1fr 1fr; }
    .cost-form-grid .span-2[b-fy4w2pb1yx] { grid-column: span 2; }
}

.cost-field-label[b-fy4w2pb1yx] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

    .cost-field-label .req[b-fy4w2pb1yx] { color: var(--d-danger); }

.cost-input[b-fy4w2pb1yx],
.cost-select[b-fy4w2pb1yx] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

    .cost-input:focus[b-fy4w2pb1yx],
    .cost-select:focus[b-fy4w2pb1yx] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.cost-error-banner[b-fy4w2pb1yx] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 10%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
}
/* /src/Features/Org/Pages/Manager/Departments/DepartmentsIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   DepartmentsIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: dept-
   ═══════════════════════════════════════════════════════════════ */

.dept-root[b-ibdeqw65vh] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.dept-num[b-ibdeqw65vh] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Hero ─── */
.dept-hero[b-ibdeqw65vh] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .dept-hero h1[b-ibdeqw65vh] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .dept-hero h1 em[b-ibdeqw65vh] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.dept-hero-meta[b-ibdeqw65vh] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .dept-hero-meta .dot[b-ibdeqw65vh] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.dept-hero-actions[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.dept-btn[b-ibdeqw65vh] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dept-btn:hover[b-ibdeqw65vh] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dept-btn:disabled[b-ibdeqw65vh] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.dept-btn-accent[b-ibdeqw65vh] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .dept-btn-accent:hover[b-ibdeqw65vh] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dept-btn-ghost[b-ibdeqw65vh] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dept-btn-ghost:hover[b-ibdeqw65vh] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.dept-btn-sm[b-ibdeqw65vh] {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

/* ─── KPI strip ─── */
.dept-kpis[b-ibdeqw65vh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.dept-kpi[b-ibdeqw65vh] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .dept-kpi:last-child[b-ibdeqw65vh] {
        border-right: 0;
    }

.dept-kpi-lbl[b-ibdeqw65vh] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dept-kpi-dot[b-ibdeqw65vh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .dept-kpi-dot.accent[b-ibdeqw65vh] { background: var(--d-accent-grad); }
    .dept-kpi-dot.good[b-ibdeqw65vh] { background: var(--d-good); }
    .dept-kpi-dot.danger[b-ibdeqw65vh] { background: var(--d-danger); }

.dept-kpi-val b[b-ibdeqw65vh] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
}

.dept-kpi.is-empty .dept-kpi-val b[b-ibdeqw65vh] {
    color: var(--d-ink-4);
}

@media (max-width: 768px) {
    .dept-kpis[b-ibdeqw65vh] { grid-template-columns: repeat(2, 1fr); }
    .dept-kpi:nth-child(2)[b-ibdeqw65vh] { border-right: 0; }
    .dept-kpi:nth-child(1)[b-ibdeqw65vh], .dept-kpi:nth-child(2)[b-ibdeqw65vh] {
        border-bottom: 1px solid var(--d-line);
    }
}

/* ─── Card ─── */
.dept-card[b-ibdeqw65vh] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dept-card-hd[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 12px;
    flex-wrap: wrap;
}

/* ─── Toolbar ─── */
.dept-toolbar[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.dept-search[b-ibdeqw65vh] {
    position: relative;
    width: 280px;
    max-width: 100%;
}

    .dept-search svg[b-ibdeqw65vh] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .dept-search input[b-ibdeqw65vh] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border-radius: var(--d-r);
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        transition: border-color .12s, box-shadow .12s;
    }

        .dept-search input:focus[b-ibdeqw65vh] {
            outline: none;
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

.dept-toolbar-spacer[b-ibdeqw65vh] { margin-left: auto; }

/* ─── Tables ─── */
.dept-tbl-wrap[b-ibdeqw65vh] {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.dept-tbl[b-ibdeqw65vh] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .dept-tbl thead th[b-ibdeqw65vh] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .dept-tbl thead th.right[b-ibdeqw65vh] { text-align: right; }
        .dept-tbl thead th.center[b-ibdeqw65vh] { text-align: center; }

    .dept-tbl tbody td[b-ibdeqw65vh] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .dept-tbl tbody tr:last-child td[b-ibdeqw65vh] {
        border-bottom: 0;
    }

    .dept-tbl tbody tr:hover[b-ibdeqw65vh] {
        background: var(--d-surface-2);
    }

    .dept-tbl td.right[b-ibdeqw65vh] { text-align: right; }
    .dept-tbl td.center[b-ibdeqw65vh] { text-align: center; }

.dept-code[b-ibdeqw65vh] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
}

.dept-name[b-ibdeqw65vh] {
    font-weight: 500;
    color: var(--d-ink);
}

.dept-parent-chip[b-ibdeqw65vh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
}

.dept-desc[b-ibdeqw65vh] {
    color: var(--d-ink-3);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.dept-stt[b-ibdeqw65vh] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-4);
}

/* ─── Status pill ─── */
.dept-tag[b-ibdeqw65vh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

    .dept-tag .d[b-ibdeqw65vh] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .dept-tag.good[b-ibdeqw65vh] {
        background: color-mix(in srgb, var(--d-good) 12%, transparent);
        color: var(--d-good);
    }

        .dept-tag.good .d[b-ibdeqw65vh] { background: var(--d-good); }

    .dept-tag.draft[b-ibdeqw65vh] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

        .dept-tag.draft .d[b-ibdeqw65vh] { background: var(--d-ink-4); }

/* ─── Row actions ─── */
.dept-actions[b-ibdeqw65vh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.dept-icon-btn[b-ibdeqw65vh] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .dept-icon-btn:hover[b-ibdeqw65vh] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .dept-icon-btn.danger:hover[b-ibdeqw65vh] {
        background: color-mix(in srgb, var(--d-danger) 10%, transparent);
        color: var(--d-danger);
    }

    .dept-icon-btn.edit:hover[b-ibdeqw65vh] {
        background: color-mix(in srgb, #2563eb 10%, transparent);
        color: #2563eb;
    }

/* ─── Empty / Loading ─── */
.dept-empty[b-ibdeqw65vh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .dept-empty b[b-ibdeqw65vh] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .dept-empty small[b-ibdeqw65vh] {
        font-size: 12px;
    }

    .dept-empty svg[b-ibdeqw65vh] {
        margin-bottom: 6px;
        color: var(--d-ink-4);
    }

.dept-empty-link[b-ibdeqw65vh] {
    color: var(--d-accent);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
}

    .dept-empty-link:hover[b-ibdeqw65vh] {
        text-decoration: underline;
    }

.dept-loading[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.dept-spinner[b-ibdeqw65vh] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: dept-spin-b-ibdeqw65vh 0.7s linear infinite;
}

@keyframes dept-spin-b-ibdeqw65vh {
    to { transform: rotate(360deg); }
}

/* ─── Banner ─── */
.dept-banner[b-ibdeqw65vh] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-good) 10%, transparent);
    color: var(--d-good);
    border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent);
}

/* ─── Modal ─── */
.dept-modal-backdrop[b-ibdeqw65vh] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dept-modal[b-ibdeqw65vh] {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dept-modal-hd[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .dept-modal-hd h2[b-ibdeqw65vh] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .dept-modal-hd .sub[b-ibdeqw65vh] {
        font-size: 12px;
        color: var(--d-ink-3);
        margin-top: 2px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

.dept-modal-close[b-ibdeqw65vh] {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .dept-modal-close:hover[b-ibdeqw65vh] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.dept-modal-body[b-ibdeqw65vh] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dept-modal-ft[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

/* ─── Form ─── */
.dept-form-grid[b-ibdeqw65vh] {
    display: grid;
    gap: 14px;
}

    .dept-form-grid.cols-2[b-ibdeqw65vh] {
        grid-template-columns: 1fr;
    }

@media (min-width: 640px) {
    .dept-form-grid.cols-2[b-ibdeqw65vh] { grid-template-columns: 1fr 1fr; }
}

.dept-field label[b-ibdeqw65vh] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.dept-field .req[b-ibdeqw65vh] { color: var(--d-danger); }

.dept-input[b-ibdeqw65vh],
.dept-select[b-ibdeqw65vh],
.dept-textarea[b-ibdeqw65vh] {
    width: 100%;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

.dept-input[b-ibdeqw65vh],
.dept-select[b-ibdeqw65vh] {
    height: 38px;
}

.dept-textarea[b-ibdeqw65vh] {
    padding: 10px 12px;
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
    line-height: 1.5;
}

    .dept-input:focus[b-ibdeqw65vh],
    .dept-select:focus[b-ibdeqw65vh],
    .dept-textarea:focus[b-ibdeqw65vh] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.dept-hint[b-ibdeqw65vh] {
    font-size: 11.5px;
    color: var(--d-ink-4);
    margin-top: 4px;
}

.dept-error-banner[b-ibdeqw65vh] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 10%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
}

/* Toggle */
.dept-toggle-row[b-ibdeqw65vh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .dept-toggle-row label[b-ibdeqw65vh] {
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin: 0;
    }

.dept-toggle[b-ibdeqw65vh] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    width: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--d-line);
    cursor: pointer;
    transition: background .12s;
}

    .dept-toggle.on[b-ibdeqw65vh] {
        background: var(--d-good);
    }

    .dept-toggle .knob[b-ibdeqw65vh] {
        display: inline-block;
        height: 18px;
        width: 18px;
        border-radius: 50%;
        background: #fff;
        transform: translateX(3px);
        transition: transform .15s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    .dept-toggle.on .knob[b-ibdeqw65vh] {
        transform: translateX(23px);
    }

.dept-toggle-text[b-ibdeqw65vh] {
    font-size: 12.5px;
    color: var(--d-ink-2);
}

    .dept-toggle-text.on[b-ibdeqw65vh] { color: var(--d-good); font-weight: 500; }

.dept-page[b-ibdeqw65vh] {
    flex-shrink: 0;
}

/* Ghi chú dưới nhóm ô nhập tên đa ngôn ngữ */
.dept-hint[b-ibdeqw65vh] { font-size: 11.5px; color: #7b8190; margin: -2px 0 6px; line-height: 1.45; }
/* /src/Features/Org/Pages/Manager/Employees/EmployeeImport.razor.rz.scp.css */
/* Employee Import — Manager Dashboard v4 theme */
.empimp-root[b-7h1z42rguv] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.empimp-hero[b-7h1z42rguv] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .empimp-hero h1[b-7h1z42rguv] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

        .empimp-hero h1 em[b-7h1z42rguv] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.empimp-hero-meta[b-7h1z42rguv] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.empimp-btn[b-7h1z42rguv] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
}

    .empimp-btn:hover[b-7h1z42rguv] {
        background: var(--d-surface-2);
    }

.empimp-btn-accent[b-7h1z42rguv] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .empimp-btn-accent:hover[b-7h1z42rguv] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .empimp-btn-accent:disabled[b-7h1z42rguv],
    .empimp-btn:disabled[b-7h1z42rguv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.empimp-msg[b-7h1z42rguv] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    border: 1px solid var(--d-line);
}

    .empimp-msg.ok[b-7h1z42rguv] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .empimp-msg.err[b-7h1z42rguv] {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

.empimp-card[b-7h1z42rguv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.empimp-card-hd[b-7h1z42rguv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .empimp-card-hd h3[b-7h1z42rguv] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.empimp-card-bd[b-7h1z42rguv] {
    padding: 14px 16px;
}

.empimp-textarea[b-7h1z42rguv] {
    width: 100%;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--d-ink);
    background: var(--d-surface);
    outline: 0;
    resize: vertical;
    min-height: 200px;
}

    .empimp-textarea:focus[b-7h1z42rguv] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.empimp-tbl-wrap[b-7h1z42rguv] {
    overflow-x: auto;
}

.empimp-tbl[b-7h1z42rguv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .empimp-tbl thead th[b-7h1z42rguv] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

    .empimp-tbl tbody td[b-7h1z42rguv] {
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

    .empimp-tbl tbody tr:hover[b-7h1z42rguv] {
        background: var(--d-surface-2);
    }

.empimp-mono[b-7h1z42rguv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
}

.empimp-num[b-7h1z42rguv] {
    text-align: center;
    color: var(--d-ink-4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    width: 40px;
}

.empimp-actions[b-7h1z42rguv] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.empimp-result p[b-7h1z42rguv] {
    margin: 4px 0;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .empimp-result p .ok[b-7h1z42rguv] {
        color: var(--d-good);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .empimp-result p .err[b-7h1z42rguv] {
        color: var(--d-danger);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.empimp-err-list[b-7h1z42rguv] {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--d-danger);
    font-size: 12px;
}

    .empimp-err-list li[b-7h1z42rguv] {
        margin-bottom: 2px;
    }
/* /src/Features/Org/Pages/Manager/Employees/EmployeesIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   EmployeesIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: emp-
   ═══════════════════════════════════════════════════════════════ */

.emp-root[b-7bzvs2u8eo] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.emp-num[b-7bzvs2u8eo] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Hero ─── */
.emp-hero[b-7bzvs2u8eo] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .emp-hero h1[b-7bzvs2u8eo] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .emp-hero h1 em[b-7bzvs2u8eo] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.emp-hero-meta[b-7bzvs2u8eo] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .emp-hero-meta .dot[b-7bzvs2u8eo] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.emp-hero-actions[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.emp-btn[b-7bzvs2u8eo] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .emp-btn:hover[b-7bzvs2u8eo] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .emp-btn:disabled[b-7bzvs2u8eo] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.emp-btn-accent[b-7bzvs2u8eo] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .emp-btn-accent:hover[b-7bzvs2u8eo] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.emp-btn-ghost[b-7bzvs2u8eo] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .emp-btn-ghost:hover[b-7bzvs2u8eo] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.emp-btn-danger[b-7bzvs2u8eo] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}

    .emp-btn-danger:hover[b-7bzvs2u8eo] {
        background: #b91c1c;
        color: #fff;
    }

.emp-btn-sm[b-7bzvs2u8eo] {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

/* ─── KPI strip (4-in-1) ─── */
.emp-kpis[b-7bzvs2u8eo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.emp-kpi[b-7bzvs2u8eo] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .emp-kpi:last-child[b-7bzvs2u8eo] {
        border-right: 0;
    }

.emp-kpi-lbl[b-7bzvs2u8eo] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.emp-kpi-dot[b-7bzvs2u8eo] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .emp-kpi-dot.accent[b-7bzvs2u8eo] {
        background: var(--d-accent-grad);
    }

    .emp-kpi-dot.good[b-7bzvs2u8eo] {
        background: var(--d-good);
    }

    .emp-kpi-dot.danger[b-7bzvs2u8eo] {
        background: var(--d-danger);
    }

.emp-kpi-val b[b-7bzvs2u8eo] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
}

.emp-kpi.is-empty .emp-kpi-val b[b-7bzvs2u8eo] {
    color: var(--d-ink-4);
}

/* ─── Card primitive ─── */
.emp-card[b-7bzvs2u8eo] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.emp-card.emp-card-overflow[b-7bzvs2u8eo] {
    overflow: visible;
}

.emp-card-hd[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 12px;
    flex-wrap: wrap;
}

    .emp-card-hd h3[b-7bzvs2u8eo] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

/* ─── Filters / Toolbar ─── */
.emp-toolbar[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.emp-search[b-7bzvs2u8eo] {
    position: relative;
    width: 320px;
    max-width: 100%;
}

    .emp-search svg[b-7bzvs2u8eo] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .emp-search input[b-7bzvs2u8eo] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border-radius: var(--d-r);
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        transition: border-color .12s, box-shadow .12s;
    }

        .emp-search input:focus[b-7bzvs2u8eo] {
            outline: none;
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

/* ─── Tables ─── */
.emp-tbl-wrap[b-7bzvs2u8eo] {
    overflow-x: auto;
    flex: 1;
    min-height: 0;
}

.emp-tbl[b-7bzvs2u8eo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .emp-tbl thead th[b-7bzvs2u8eo] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .emp-tbl thead th.right[b-7bzvs2u8eo] {
            text-align: right;
        }

        .emp-tbl thead th.center[b-7bzvs2u8eo] {
            text-align: center;
        }

    .emp-tbl tbody td[b-7bzvs2u8eo] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .emp-tbl tbody tr:last-child td[b-7bzvs2u8eo] {
        border-bottom: 0;
    }

    .emp-tbl tbody tr:hover[b-7bzvs2u8eo] {
        background: var(--d-surface-2);
    }

    .emp-tbl td.right[b-7bzvs2u8eo] {
        text-align: right;
    }

    .emp-tbl td.center[b-7bzvs2u8eo] {
        text-align: center;
    }

.emp-tbl-code[b-7bzvs2u8eo] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}

.emp-tbl-name[b-7bzvs2u8eo] {
    font-weight: 500;
    color: var(--d-ink);
}

.emp-tbl-sub[b-7bzvs2u8eo] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* ─── Status pill ─── */
.emp-tag[b-7bzvs2u8eo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

    .emp-tag .d[b-7bzvs2u8eo] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .emp-tag.good[b-7bzvs2u8eo] {
        background: color-mix(in srgb, var(--d-good) 12%, transparent);
        color: var(--d-good);
    }

        .emp-tag.good .d[b-7bzvs2u8eo] { background: var(--d-good); }

    .emp-tag.draft[b-7bzvs2u8eo] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

        .emp-tag.draft .d[b-7bzvs2u8eo] { background: var(--d-ink-4); }

    .emp-tag.danger[b-7bzvs2u8eo] {
        background: color-mix(in srgb, var(--d-danger) 12%, transparent);
        color: var(--d-danger);
    }

        .emp-tag.danger .d[b-7bzvs2u8eo] { background: var(--d-danger); }

.emp-rank-tag[b-7bzvs2u8eo] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}

/* ─── Row actions ─── */
.emp-actions[b-7bzvs2u8eo] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.emp-icon-btn[b-7bzvs2u8eo] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .emp-icon-btn:hover[b-7bzvs2u8eo] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .emp-icon-btn.danger:hover[b-7bzvs2u8eo] {
        background: color-mix(in srgb, var(--d-danger) 10%, transparent);
        color: var(--d-danger);
    }

    .emp-icon-btn.edit:hover[b-7bzvs2u8eo] {
        background: color-mix(in srgb, #2563eb 10%, transparent);
        color: #2563eb;
    }

/* ─── Empty / Loading ─── */
.emp-empty[b-7bzvs2u8eo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .emp-empty b[b-7bzvs2u8eo] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .emp-empty small[b-7bzvs2u8eo] {
        font-size: 12px;
    }

    .emp-empty svg[b-7bzvs2u8eo] {
        margin-bottom: 6px;
        color: var(--d-ink-4);
    }

.emp-empty-link[b-7bzvs2u8eo] {
    color: var(--d-accent);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
}

    .emp-empty-link:hover[b-7bzvs2u8eo] {
        text-decoration: underline;
    }

.emp-loading[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.emp-spinner[b-7bzvs2u8eo] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: emp-spin-b-7bzvs2u8eo 0.7s linear infinite;
}

@keyframes emp-spin-b-7bzvs2u8eo {
    to { transform: rotate(360deg); }
}

/* ─── Banner ─── */
.emp-banner[b-7bzvs2u8eo] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-good) 10%, transparent);
    color: var(--d-good);
    border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent);
}

/* ─── Modal ─── */
.emp-modal-backdrop[b-7bzvs2u8eo] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}

.emp-modal[b-7bzvs2u8eo] {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.emp-modal-hd[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .emp-modal-hd h2[b-7bzvs2u8eo] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .emp-modal-hd .sub[b-7bzvs2u8eo] {
        font-size: 12px;
        color: var(--d-ink-3);
        margin-top: 2px;
    }

.emp-modal-close[b-7bzvs2u8eo] {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .emp-modal-close:hover[b-7bzvs2u8eo] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.emp-modal-body[b-7bzvs2u8eo] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.emp-modal-ft[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

/* ─── Form ─── */
.emp-form-wrap[b-7bzvs2u8eo] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.emp-section-title[b-7bzvs2u8eo] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 4px;
}

    .emp-section-title small[b-7bzvs2u8eo] {
        text-transform: none;
        letter-spacing: 0;
        color: var(--d-ink-4);
        font-weight: 400;
        font-size: 11px;
        margin-left: 4px;
    }

.emp-form-grid[b-7bzvs2u8eo] {
    display: grid;
    gap: 14px;
}

    .emp-form-grid.cols-2[b-7bzvs2u8eo] {
        grid-template-columns: 1fr;
    }

    .emp-form-grid.cols-3[b-7bzvs2u8eo] {
        grid-template-columns: 1fr;
    }

@media (min-width: 640px) {
    .emp-form-grid.cols-2[b-7bzvs2u8eo] { grid-template-columns: 1fr 1fr; }
    .emp-form-grid.cols-3[b-7bzvs2u8eo] { grid-template-columns: 1fr 1fr 1fr; }
}

.emp-field label[b-7bzvs2u8eo],
.emp-field-label[b-7bzvs2u8eo] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.emp-field .req[b-7bzvs2u8eo],
.emp-field-label .req[b-7bzvs2u8eo],
.req[b-7bzvs2u8eo] { color: var(--d-danger); }

.emp-input[b-7bzvs2u8eo],
.emp-select[b-7bzvs2u8eo] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

    .emp-input:focus[b-7bzvs2u8eo],
    .emp-select:focus[b-7bzvs2u8eo] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.emp-error-banner[b-7bzvs2u8eo] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 10%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
}

.emp-info-banner[b-7bzvs2u8eo] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 12px;
    background: var(--d-warn-soft);
    color: #92400e;
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent);
}

/* Edit header card */
.emp-edit-head[b-7bzvs2u8eo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.emp-avatar[b-7bzvs2u8eo] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

/* Toggle switch */
.emp-toggle[b-7bzvs2u8eo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 24px;
    width: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--d-line);
    cursor: pointer;
    transition: background .12s;
}

    .emp-toggle.on[b-7bzvs2u8eo] {
        background: var(--d-good);
    }

    .emp-toggle .knob[b-7bzvs2u8eo] {
        display: inline-block;
        height: 18px;
        width: 18px;
        border-radius: 50%;
        background: #fff;
        transform: translateX(3px);
        transition: transform .15s;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    }

    .emp-toggle.on .knob[b-7bzvs2u8eo] {
        transform: translateX(23px);
    }

/* Role checkbox cards */
.emp-role-grid[b-7bzvs2u8eo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 640px) {
    .emp-role-grid[b-7bzvs2u8eo] { grid-template-columns: 1fr 1fr; }
}

.emp-role-card[b-7bzvs2u8eo] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .emp-role-card:hover[b-7bzvs2u8eo] {
        border-color: var(--d-ink-4);
    }

    .emp-role-card.is-on[b-7bzvs2u8eo] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .emp-role-card input[type="checkbox"][b-7bzvs2u8eo] {
        width: 16px;
        height: 16px;
        accent-color: var(--d-accent);
        margin-top: 2px;
    }

.emp-role-name[b-7bzvs2u8eo] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: block;
}

.emp-role-desc[b-7bzvs2u8eo] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.emp-role-perm[b-7bzvs2u8eo] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-top: 2px;
}

/* View dl */
.emp-dl[b-7bzvs2u8eo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .emp-dl[b-7bzvs2u8eo] { grid-template-columns: 1fr 1fr; }
}

.emp-dl dt[b-7bzvs2u8eo] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.emp-dl dd[b-7bzvs2u8eo] {
    margin: 0;
    font-size: 14px;
    color: var(--d-ink);
}
/* /src/Features/Org/Pages/Manager/Employees/OrgChart.razor.rz.scp.css */
/* OrgChart — chuẩn nm-list (theo CurrenciesIndex): shell trang + toolbar;
   chrome do primitive Nm* (Card/Kpi/TreeView/Input/Button/EmptyState) đảm nhận. */
.nm-list-page[b-rlj7wi79cc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-rlj7wi79cc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-rlj7wi79cc] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-rlj7wi79cc] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-sub b[b-rlj7wi79cc] { color: var(--nm-ink); }

.nm-kpis[b-rlj7wi79cc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.nm-list-toolbar[b-rlj7wi79cc] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tb-search[b-rlj7wi79cc] { width: 280px; }
.tb-tree-actions[b-rlj7wi79cc] { display: flex; gap: 6px; margin-left: auto; }

/* ---- Node template: các mảnh nằm TRONG .nm-tree__row (flex) của NmTreeView ---- */
.org-node__ico[b-rlj7wi79cc] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    color: var(--nm-ink-2);
}

/* Root tô brand mềm (không fill đặc — nhiều root liền nhau sẽ quá nặng) */
.org-node__ico.is-root[b-rlj7wi79cc] {
    background: var(--nm-brand-50);
    border-color: var(--nm-brand-100);
    color: var(--nm-brand-600);
}

.org-node__name[b-rlj7wi79cc] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}

.org-node__name.is-root[b-rlj7wi79cc] { font-weight: 700; }

.org-node__code[b-rlj7wi79cc] {
    flex: none;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nm-muted);
}

.org-node__count[b-rlj7wi79cc] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    border: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--nm-ink-2);
}

.org-node__count i[b-rlj7wi79cc] { font-size: 10px; color: var(--nm-muted); }

/* 0 nhân sự — cùng ngôn ngữ cảnh báo với KPI "Chưa có nhân sự" */
.org-node__count.is-zero[b-rlj7wi79cc] {
    background: var(--nm-warn-soft);
    color: var(--nm-warn);
}

.org-node__count.is-zero i[b-rlj7wi79cc] { color: var(--nm-warn); }

@media (max-width: 640px) {
    .nm-list-page[b-rlj7wi79cc] { padding: 14px 14px 20px; }
    .nm-kpis[b-rlj7wi79cc] { grid-template-columns: 1fr; }
    .tb-search[b-rlj7wi79cc] { width: 100%; }
    .tb-tree-actions[b-rlj7wi79cc] { margin-left: 0; }
    .org-node__code[b-rlj7wi79cc] { display: none; }
}
/* /src/Features/Org/Pages/Manager/JobTitles/JobTitlesIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   JobTitlesIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: jobs-
   ═══════════════════════════════════════════════════════════════ */

.jobs-root[b-j8633wyprc] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
}

.jobs-num[b-j8633wyprc] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Hero ─── */
.jobs-hero[b-j8633wyprc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .jobs-hero h1[b-j8633wyprc] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .jobs-hero h1 em[b-j8633wyprc] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.jobs-hero-meta[b-j8633wyprc] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .jobs-hero-meta .dot[b-j8633wyprc] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.jobs-hero-actions[b-j8633wyprc] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.jobs-btn[b-j8633wyprc] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .jobs-btn:hover[b-j8633wyprc] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .jobs-btn:disabled[b-j8633wyprc] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.jobs-btn-accent[b-j8633wyprc] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .jobs-btn-accent:hover[b-j8633wyprc] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.jobs-btn-ghost[b-j8633wyprc] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .jobs-btn-ghost:hover[b-j8633wyprc] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.jobs-btn-sm[b-j8633wyprc] {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.jobs-link-add[b-j8633wyprc] {
    background: none;
    border: 0;
    color: var(--d-accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .jobs-link-add:hover[b-j8633wyprc] { text-decoration: underline; }

/* ─── KPI strip ─── */
.jobs-kpis[b-j8633wyprc] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.jobs-kpi[b-j8633wyprc] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .jobs-kpi:last-child[b-j8633wyprc] { border-right: 0; }

.jobs-kpi-lbl[b-j8633wyprc] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jobs-kpi-dot[b-j8633wyprc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .jobs-kpi-dot.accent[b-j8633wyprc] { background: var(--d-accent-grad); }
    .jobs-kpi-dot.good[b-j8633wyprc] { background: var(--d-good); }
    .jobs-kpi-dot.danger[b-j8633wyprc] { background: var(--d-danger); }

.jobs-kpi-val b[b-j8633wyprc] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
}

.jobs-kpi.is-empty .jobs-kpi-val b[b-j8633wyprc] { color: var(--d-ink-4); }

@media (max-width: 768px) {
    .jobs-kpis[b-j8633wyprc] { grid-template-columns: repeat(2, 1fr); }
    .jobs-kpi:nth-child(2)[b-j8633wyprc] { border-right: 0; }
    .jobs-kpi:nth-child(1)[b-j8633wyprc], .jobs-kpi:nth-child(2)[b-j8633wyprc] {
        border-bottom: 1px solid var(--d-line);
    }
}

/* ─── Card ─── */
.jobs-card[b-j8633wyprc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.jobs-card-hd[b-j8633wyprc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 12px;
    flex-wrap: wrap;
}

/* ─── Toolbar ─── */
.jobs-toolbar[b-j8633wyprc] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.jobs-search[b-j8633wyprc] {
    position: relative;
    width: 280px;
    max-width: 100%;
}

    .jobs-search svg[b-j8633wyprc] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .jobs-search input[b-j8633wyprc] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border-radius: var(--d-r);
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        transition: border-color .12s, box-shadow .12s;
    }

        .jobs-search input:focus[b-j8633wyprc] {
            outline: none;
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

.jobs-select[b-j8633wyprc] {
    height: 38px;
    padding: 0 32px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
    min-width: 200px;
}

    .jobs-select:focus[b-j8633wyprc] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

/* ─── Content / scroll area ─── */
.jobs-content[b-j8633wyprc] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Group sub-card (department group) ─── */
.jobs-group[b-j8633wyprc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.jobs-group-hd[b-j8633wyprc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
}

.jobs-group-name[b-j8633wyprc] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ─── Tables ─── */
.jobs-tbl[b-j8633wyprc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .jobs-tbl tbody td[b-j8633wyprc] {
        padding: 11px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .jobs-tbl tbody tr:last-child td[b-j8633wyprc] { border-bottom: 0; }

    .jobs-tbl tbody tr:hover[b-j8633wyprc] { background: var(--d-surface-2); }

    .jobs-tbl td.right[b-j8633wyprc] { text-align: right; }

.jobs-tbl-name[b-j8633wyprc] {
    font-weight: 500;
    color: var(--d-ink);
}

.jobs-tbl-desc[b-j8633wyprc] {
    color: var(--d-ink-3);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.jobs-sort[b-j8633wyprc] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-4);
}

/* ─── Status pill ─── */
.jobs-tag[b-j8633wyprc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

    .jobs-tag .d[b-j8633wyprc] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .jobs-tag.good[b-j8633wyprc] {
        background: color-mix(in srgb, var(--d-good) 12%, transparent);
        color: var(--d-good);
    }

        .jobs-tag.good .d[b-j8633wyprc] { background: var(--d-good); }

    .jobs-tag.draft[b-j8633wyprc] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

        .jobs-tag.draft .d[b-j8633wyprc] { background: var(--d-ink-4); }

/* ─── Row actions ─── */
.jobs-actions[b-j8633wyprc] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.jobs-icon-btn[b-j8633wyprc] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .jobs-icon-btn:hover[b-j8633wyprc] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .jobs-icon-btn.danger:hover[b-j8633wyprc] {
        background: color-mix(in srgb, var(--d-danger) 10%, transparent);
        color: var(--d-danger);
    }

    .jobs-icon-btn.edit:hover[b-j8633wyprc] {
        background: color-mix(in srgb, #2563eb 10%, transparent);
        color: #2563eb;
    }

/* ─── Empty / Loading ─── */
.jobs-empty[b-j8633wyprc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .jobs-empty b[b-j8633wyprc] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .jobs-empty small[b-j8633wyprc] { font-size: 12px; }

    .jobs-empty svg[b-j8633wyprc] {
        margin-bottom: 6px;
        color: var(--d-ink-4);
    }

.jobs-loading[b-j8633wyprc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.jobs-spinner[b-j8633wyprc] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: jobs-spin-b-j8633wyprc 0.7s linear infinite;
}

@keyframes jobs-spin-b-j8633wyprc {
    to { transform: rotate(360deg); }
}

/* ─── Modal ─── */
.jobs-modal-backdrop[b-j8633wyprc] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.jobs-modal[b-j8633wyprc] {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jobs-modal-hd[b-j8633wyprc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .jobs-modal-hd h2[b-j8633wyprc] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

.jobs-modal-close[b-j8633wyprc] {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .jobs-modal-close:hover[b-j8633wyprc] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.jobs-modal-body[b-j8633wyprc] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jobs-modal-ft[b-j8633wyprc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

/* ─── Form ─── */
.jobs-field label[b-j8633wyprc] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.jobs-field .req[b-j8633wyprc] { color: var(--d-danger); }

/* Dòng nhắc dưới ô nhập (mã tra cứu): chữ thường, không viết hoa như label */
.jobs-field .jobs-hint[b-j8633wyprc] {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--d-ink-3);
    text-transform: none;
    letter-spacing: 0;
}

.jobs-input[b-j8633wyprc],
.jobs-modal-select[b-j8633wyprc],
.jobs-textarea[b-j8633wyprc] {
    width: 100%;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

.jobs-input[b-j8633wyprc],
.jobs-modal-select[b-j8633wyprc] { height: 38px; }

.jobs-textarea[b-j8633wyprc] {
    padding: 10px 12px;
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
    line-height: 1.5;
}

    .jobs-input:focus[b-j8633wyprc],
    .jobs-modal-select:focus[b-j8633wyprc],
    .jobs-textarea:focus[b-j8633wyprc] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.jobs-error-banner[b-j8633wyprc] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 10%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
}

.jobs-check-row[b-j8633wyprc] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .jobs-check-row input[type="checkbox"][b-j8633wyprc] {
        width: 16px;
        height: 16px;
        accent-color: var(--d-accent);
    }

    .jobs-check-row span[b-j8633wyprc] {
        font-size: 14px;
        color: var(--d-ink-2);
    }

.jobs-page[b-j8633wyprc] { flex-shrink: 0; }
/* /src/Features/Org/Pages/Manager/MyCompany.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   MyCompany — Manager Dashboard v4 theme
   Prefix: mc-
   ═══════════════════════════════════════════════════════════════ */

.mc-root[b-nuzfp5fh6o] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    padding: 2.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-error-card[b-nuzfp5fh6o] {
    max-width: 460px;
    width: 100%;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 28px 24px;
    text-align: center;
}

.mc-error-ico[b-nuzfp5fh6o] {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: var(--d-danger-soft);
    color: var(--d-danger);
    display: grid;
    place-items: center;
}

.mc-error-title[b-nuzfp5fh6o] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    margin: 0 0 8px;
}

.mc-error-msg[b-nuzfp5fh6o] {
    font-size: 14px;
    color: var(--d-ink-3);
    margin: 0 0 18px;
    line-height: 1.5;
}

.mc-back[b-nuzfp5fh6o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
    transition: filter .12s;
}

    .mc-back:hover[b-nuzfp5fh6o] {
        color: #fff;
        text-decoration: none;
        filter: brightness(0.96);
    }

.mc-loading-wrap[b-nuzfp5fh6o] {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.mc-spinner[b-nuzfp5fh6o] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: mc-spin-b-nuzfp5fh6o 0.7s linear infinite;
}

@keyframes mc-spin-b-nuzfp5fh6o {
    to {
        transform: rotate(360deg);
    }
}
/* /src/Features/Org/Pages/Manager/PermissionsIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PermissionsIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: perm-
   ═══════════════════════════════════════════════════════════════ */

.perm-root[b-r99yotp0lo] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.perm-num[b-r99yotp0lo] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Hero */
.perm-hero[b-r99yotp0lo] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.perm-hero h1[b-r99yotp0lo] { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.perm-hero h1 em[b-r99yotp0lo] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.perm-hero-meta[b-r99yotp0lo] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.perm-hero-meta .dot[b-r99yotp0lo] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.perm-hero-actions[b-r99yotp0lo] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Buttons */
.perm-btn[b-r99yotp0lo] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; }
.perm-btn:hover[b-r99yotp0lo] { background: var(--d-surface-2); color: var(--d-ink); }
.perm-btn:disabled[b-r99yotp0lo] { opacity: 0.5; cursor: not-allowed; }
.perm-btn-accent[b-r99yotp0lo] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22); }
.perm-btn-accent:hover[b-r99yotp0lo] { background: var(--d-accent-grad-hover); color: #fff; }
.perm-btn-ghost[b-r99yotp0lo] { background: transparent; border-color: transparent; color: var(--d-ink-2); }
.perm-btn-ghost:hover[b-r99yotp0lo] { background: var(--d-surface-2); color: var(--d-ink); }
.perm-btn-danger[b-r99yotp0lo] { background: var(--d-danger); color: #fff; border-color: transparent; }
.perm-btn-danger:hover[b-r99yotp0lo] { background: #b91c1c; color: #fff; }
.perm-btn-sm[b-r99yotp0lo] { height: 32px; padding: 0 10px; font-size: 12px; }

/* KPI */
.perm-kpis[b-r99yotp0lo] { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.perm-kpi[b-r99yotp0lo] { padding: 14px 18px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.perm-kpi:last-child[b-r99yotp0lo] { border-right: 0; }
.perm-kpi-lbl[b-r99yotp0lo] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.perm-kpi-dot[b-r99yotp0lo] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); flex-shrink: 0; }
.perm-kpi-dot.accent[b-r99yotp0lo] { background: var(--d-accent-grad); }
.perm-kpi-dot.good[b-r99yotp0lo] { background: var(--d-good); }
.perm-kpi-val b[b-r99yotp0lo] { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; }

/* Card */
.perm-card[b-r99yotp0lo] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.perm-card-hd[b-r99yotp0lo] { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); gap: 12px; flex-wrap: wrap; }
.perm-card-hd h3[b-r99yotp0lo] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* Toolbar */
.perm-toolbar[b-r99yotp0lo] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.perm-search[b-r99yotp0lo] { position: relative; width: 280px; max-width: 100%; }
.perm-search svg[b-r99yotp0lo] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--d-ink-4); pointer-events: none; }
.perm-search input[b-r99yotp0lo] { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; color: var(--d-ink); }
.perm-search input:focus[b-r99yotp0lo] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12); }

/* Tree */
.perm-tree[b-r99yotp0lo] { padding: 4px 0; }
.perm-row[b-r99yotp0lo] { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--d-line-2); border-left: 3px solid transparent; transition: background .12s; }
.perm-row:hover[b-r99yotp0lo] { background: var(--d-surface-2); }
.perm-row:last-child[b-r99yotp0lo] { border-bottom: 0; }
.perm-row.t-module[b-r99yotp0lo] { border-left-color: #6366f1; }
.perm-row.t-menugroup[b-r99yotp0lo] { border-left-color: #3b82f6; }
.perm-row.t-screen[b-r99yotp0lo] { border-left-color: var(--d-good); }
.perm-row.t-action[b-r99yotp0lo] { border-left-color: var(--d-accent); }

.perm-toggle[b-r99yotp0lo] { width: 24px; height: 24px; border: 0; background: transparent; border-radius: 6px; color: var(--d-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.perm-toggle:hover[b-r99yotp0lo] { background: var(--d-surface-2); color: var(--d-ink); }
.perm-toggle svg[b-r99yotp0lo] { width: 14px; height: 14px; transition: transform .12s; }
.perm-toggle.is-open svg[b-r99yotp0lo] { transform: rotate(90deg); }
.perm-spacer[b-r99yotp0lo] { width: 24px; flex-shrink: 0; }

.perm-info[b-r99yotp0lo] { flex: 1; min-width: 0; }
.perm-info-row[b-r99yotp0lo] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perm-code[b-r99yotp0lo] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 500; color: var(--d-ink); }
.perm-name[b-r99yotp0lo] { font-size: 12.5px; color: var(--d-ink-2); }
.perm-route[b-r99yotp0lo] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--d-ink-4); }
.perm-info-meta[b-r99yotp0lo] { display: flex; align-items: center; gap: 10px; margin-top: 3px; }

.perm-tag[b-r99yotp0lo] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.perm-tag.t-module[b-r99yotp0lo] { background: color-mix(in srgb, #6366f1 12%, transparent); color: #4f46e5; }
.perm-tag.t-menugroup[b-r99yotp0lo] { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #2563eb; }
.perm-tag.t-screen[b-r99yotp0lo] { background: var(--d-good-soft); color: var(--d-good); }
.perm-tag.t-action[b-r99yotp0lo] { background: var(--d-accent-soft); color: var(--d-accent); }
.perm-tag.bit[b-r99yotp0lo] { background: var(--d-surface-2); color: var(--d-ink-3); font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: none; letter-spacing: 0; font-weight: 500; }
.perm-tag.inactive[b-r99yotp0lo] { background: color-mix(in srgb, var(--d-danger) 12%, transparent); color: var(--d-danger); }
.perm-tag.menu[b-r99yotp0lo] { background: color-mix(in srgb, #06b6d4 12%, transparent); color: #0891b2; }

.perm-actions[b-r99yotp0lo] { display: inline-flex; align-items: center; gap: 2px; }
.perm-icon-btn[b-r99yotp0lo] { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 7px; color: var(--d-ink-3); cursor: pointer; transition: background .12s, color .12s; }
.perm-icon-btn:hover[b-r99yotp0lo] { background: var(--d-surface-2); color: var(--d-ink); }
.perm-icon-btn.danger:hover[b-r99yotp0lo] { background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); }
.perm-icon-btn.edit:hover[b-r99yotp0lo] { background: color-mix(in srgb, #2563eb 10%, transparent); color: #2563eb; }

/* Empty / loading */
.perm-empty[b-r99yotp0lo] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.perm-empty b[b-r99yotp0lo] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.perm-empty small[b-r99yotp0lo] { font-size: 12px; }
.perm-empty svg[b-r99yotp0lo] { margin-bottom: 6px; color: var(--d-ink-4); }
.perm-loading[b-r99yotp0lo] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.perm-spinner[b-r99yotp0lo] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: perm-spin-b-r99yotp0lo .7s linear infinite; }
@keyframes perm-spin-b-r99yotp0lo { to { transform: rotate(360deg); } }

/* Modal */
.perm-modal-backdrop[b-r99yotp0lo] { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(28,25,23,.55); }
.perm-modal[b-r99yotp0lo] { width: 100%; max-width: 720px; max-height: 90vh; background: var(--d-surface); border-radius: var(--d-r); border: 1px solid var(--d-line); box-shadow: 0 20px 50px -12px rgba(28,25,23,.35); display: flex; flex-direction: column; overflow: hidden; }
.perm-modal.sm[b-r99yotp0lo] { max-width: 440px; }
.perm-modal-hd[b-r99yotp0lo] { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--d-line); }
.perm-modal-hd h2[b-r99yotp0lo] { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.perm-modal-close[b-r99yotp0lo] { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 7px; color: var(--d-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.perm-modal-close:hover[b-r99yotp0lo] { background: var(--d-surface-2); color: var(--d-ink); }
.perm-modal-body[b-r99yotp0lo] { flex: 1; overflow-y: auto; padding: 18px; }
.perm-modal-ft[b-r99yotp0lo] { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); }

/* Form */
.perm-form-grid[b-r99yotp0lo] { display: grid; gap: 14px; }
.perm-form-grid.cols-2[b-r99yotp0lo] { grid-template-columns: 1fr; }
@media (min-width: 640px) { .perm-form-grid.cols-2[b-r99yotp0lo] { grid-template-columns: 1fr 1fr; } }
.perm-field-label[b-r99yotp0lo] { display: block; font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.perm-field-label .req[b-r99yotp0lo] { color: var(--d-danger); }
.perm-input[b-r99yotp0lo], .perm-select[b-r99yotp0lo], .perm-textarea[b-r99yotp0lo] { width: 100%; height: 38px; padding: 0 12px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; color: var(--d-ink); transition: border-color .12s, box-shadow .12s; }
.perm-textarea[b-r99yotp0lo] { height: auto; padding: 8px 12px; resize: vertical; font-family: inherit; }
.perm-input:focus[b-r99yotp0lo], .perm-select:focus[b-r99yotp0lo], .perm-textarea:focus[b-r99yotp0lo] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12); }
.perm-check-row[b-r99yotp0lo] { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 4px; }
.perm-check[b-r99yotp0lo] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--d-ink-2); }
.perm-check input[b-r99yotp0lo] { accent-color: var(--d-accent); width: 16px; height: 16px; }
.perm-error-banner[b-r99yotp0lo] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); }

/* Confirm modal body */
.perm-confirm[b-r99yotp0lo] { padding: 24px 18px 8px; text-align: center; }
.perm-confirm-ico[b-r99yotp0lo] { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.perm-confirm h3[b-r99yotp0lo] { margin: 0 0 6px; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--d-ink); }
.perm-confirm p[b-r99yotp0lo] { margin: 0; font-size: 14px; color: var(--d-ink-3); }
.perm-confirm code[b-r99yotp0lo] { display: inline-block; margin-top: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--d-ink); background: var(--d-surface-2); padding: 4px 10px; border-radius: 6px; }
/* /src/Features/Org/Pages/Manager/PlatformMyCompany.razor.rz.scp.css */
/* Platform My Company — Manager Dashboard v4 theme */
.pmco-root[b-m35467e8jh] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-line: #e8e4df;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 36px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmco-card[b-m35467e8jh] {
    width: 100%;
    max-width: 480px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px -16px rgba(28, 25, 23, 0.18);
    padding: 32px 28px;
    text-align: center;
}

.pmco-ico[b-m35467e8jh] {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--d-danger);
}

.pmco-card h2[b-m35467e8jh] {
    margin: 0 0 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.pmco-card p[b-m35467e8jh] {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--d-ink-3);
}

.pmco-link[b-m35467e8jh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--d-r);
    background: var(--d-accent-soft);
    color: var(--d-accent);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #fed7aa;
    text-decoration: none;
    transition: background .12s;
}

    .pmco-link:hover[b-m35467e8jh] {
        background: #ffe4cc;
        color: var(--d-accent);
    }

.pmco-loading[b-m35467e8jh] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.pmco-spin[b-m35467e8jh] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    animation: pmco-spin-b-m35467e8jh 0.8s linear infinite;
}

@keyframes pmco-spin-b-m35467e8jh {
    to {
        transform: rotate(360deg);
    }
}
/* /src/Features/Org/Pages/Manager/Ranks/RanksIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   RanksIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: ranks-
   ═══════════════════════════════════════════════════════════════ */

.ranks-root[b-owopr8lhdu] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}

/* ─── Hero ─── */
.ranks-hero[b-owopr8lhdu] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 18px 28px 14px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .ranks-hero h1[b-owopr8lhdu] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .ranks-hero h1 em[b-owopr8lhdu] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.ranks-hero-meta[b-owopr8lhdu] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .ranks-hero-meta .dot[b-owopr8lhdu] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.ranks-hero-ico[b-owopr8lhdu] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--d-accent-grad);
    color: #fff;
    display: inline-grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
    flex-shrink: 0;
}

.ranks-hero-left[b-owopr8lhdu] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* ─── Body ─── */
.ranks-body[b-owopr8lhdu] {
    flex: 1;
    min-height: 0;
    padding: 18px 28px 18px;
    overflow: auto;
}

.ranks-card[b-owopr8lhdu] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Empty / Loading ─── */
.ranks-empty[b-owopr8lhdu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 64px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .ranks-empty b[b-owopr8lhdu] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .ranks-empty small[b-owopr8lhdu] {
        font-size: 12px;
    }

    .ranks-empty svg[b-owopr8lhdu] {
        margin-bottom: 6px;
        color: var(--d-ink-4);
    }

.ranks-loading[b-owopr8lhdu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.ranks-spinner[b-owopr8lhdu] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: ranks-spin-b-owopr8lhdu 0.7s linear infinite;
}

@keyframes ranks-spin-b-owopr8lhdu {
    to { transform: rotate(360deg); }
}
/* /src/Features/Org/Pages/Manager/RolesIndex.razor.rz.scp.css */
/* /manager/system/roles — chuẩn nm-list token-only, khớp trang anh em /manager/system/users:
   head → thanh phân loại (số liệu kiêm bộ lọc) → toolbar → DataGrid → phân trang.
   Bản trước tự dựng bảng/nút/modal bằng Tailwind + lớp .roles-* riêng. Chỉ dùng token --nm-*. */

/* ── shell trang ─────────────────────────────────────────── */
.nm-list-page[b-o5buh44974] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-o5buh44974] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-o5buh44974] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-o5buh44974] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 660px; }
.nm-list-actions[b-o5buh44974] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── thanh phân loại: SỐ LIỆU kiêm BỘ LỌC ────────────────── */
.triage[b-o5buh44974] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.triage__seg[b-o5buh44974] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 9px 12px;
    border: 1px solid var(--nm-border);
    border-left: 3px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.triage__seg:hover[b-o5buh44974] { background: var(--nm-surface-2); }

.triage__n[b-o5buh44974] {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.triage__lbl[b-o5buh44974] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Dải màu trái = loại rổ. Chỉ tô viền, KHÔNG tô nền: nhiều ô nền màu cạnh nhau thành cầu vồng. */
.triage__seg--accent[b-o5buh44974]  { border-left-color: var(--nm-brand-500); }
.triage__seg--good[b-o5buh44974]    { border-left-color: var(--nm-ok); }
.triage__seg--pending[b-o5buh44974] { border-left-color: var(--nm-muted); }
.triage__seg--info[b-o5buh44974]    { border-left-color: var(--nm-info); }
.triage__seg--warn[b-o5buh44974]    { border-left-color: var(--nm-warn); }

.triage__seg.is-active[b-o5buh44974] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50, var(--nm-surface-2));
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.triage__seg.is-active .triage__lbl[b-o5buh44974] { color: var(--nm-brand-700); }

/* ── toolbar ─────────────────────────────────────────────── */
.nm-list-toolbar[b-o5buh44974] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.tb-filters[b-o5buh44974] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Khoá bề rộng ở DIV bọc, KHÔNG qua Class của NmInput: param Class rơi vào thẻ <input> bên trong
   còn .nm-input-wrap vẫn width:100% → ô tìm chiếm trọn hàng, nút lọc rớt xuống dòng. */
.tb-search[b-o5buh44974] { width: 300px; }
.tb-count[b-o5buh44974] {
    font-size: 12.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
    padding-top: 8px;
    white-space: nowrap;
}

.chipbar[b-o5buh44974] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.nm-list-pager[b-o5buh44974] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pagesize[b-o5buh44974] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--nm-muted); }
.pagesize > :last-child[b-o5buh44974] { width: 84px; }

/* ── ô trong bảng ────────────────────────────────────────── */
.cell-role[b-o5buh44974] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-role__ico[b-o5buh44974] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 14px;
    flex-shrink: 0;
}
/* Vai trò hệ thống = công tắc superuser → tô tông cảnh báo để nhận ra ngay trong bảng. */
.cell-role__ico.is-system[b-o5buh44974] {
    background: color-mix(in srgb, var(--nm-warn) 14%, transparent);
    color: var(--nm-warn);
}
.cell-role__ico.is-custom[b-o5buh44974] {
    background: color-mix(in srgb, var(--nm-info) 12%, transparent);
    color: var(--nm-info);
}

.cell-2line[b-o5buh44974] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-o5buh44974] {
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px;
}
.cell-2line__sub[b-o5buh44974] { font-size: 11.5px; color: var(--nm-muted); }

.cell-desc[b-o5buh44974] {
    display: block;
    color: var(--nm-ink-2, var(--nm-ink));
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 420px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cell-dash[b-o5buh44974] { color: var(--nm-muted); }

.cell-acts[b-o5buh44974] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* Vai trò đã tắt — làm mờ nhẹ, vẫn đọc được, không tô nền để bảng khỏi loang màu. */
.nm-list-page[b-o5buh44974]  tr.row-off td { opacity: .6; }
.nm-list-page[b-o5buh44974]  tr.row-off:hover td { opacity: 1; }

/* ── form trong modal ────────────────────────────────────── */
.rfrm[b-o5buh44974] { display: flex; flex-direction: column; gap: 14px; }

/* Khối "vai trò hệ thống" bị khoá — trình bày như một cảnh báo có công tắc, không như một ô nhập. */
.rfrm-locked[b-o5buh44974] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-left: 3px solid var(--nm-warn);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.rfrm-locked__row[b-o5buh44974] { display: flex; align-items: center; gap: 10px; }
.rfrm-locked__txt[b-o5buh44974] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rfrm-locked__lbl[b-o5buh44974] { font-size: 13px; font-weight: 600; color: var(--nm-muted); }
.rfrm-locked__ico[b-o5buh44974] { margin-left: auto; color: var(--nm-muted); font-size: 13px; }
.rfrm-note[b-o5buh44974] { margin: 0; font-size: 12px; color: var(--nm-muted); line-height: 1.55; }

/* ── modal phân quyền ────────────────────────────────────── */
.perm[b-o5buh44974] { display: flex; flex-direction: column; gap: 12px; }

.perm-who[b-o5buh44974] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
}
.perm-who i[b-o5buh44974] { color: var(--nm-brand-600); }

.perm-tools[b-o5buh44974] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perm-tools .tb-search[b-o5buh44974] { width: 260px; }

.perm-tree[b-o5buh44974] {
    max-height: 52vh;
    overflow-y: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    padding: 6px;
    background: var(--nm-surface);
}

.perm-row[b-o5buh44974] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--nm-r-input);
    min-height: 34px;
}
.perm-row:hover[b-o5buh44974] { background: var(--nm-surface-2); }

.perm-row__chev[b-o5buh44974] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--nm-muted);
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0;
}
.perm-row__chev:hover[b-o5buh44974] { background: var(--nm-border); color: var(--nm-ink); }
.perm-row__chev--empty[b-o5buh44974] { cursor: default; }
.perm-row__chev--empty:hover[b-o5buh44974] { background: transparent; }

.perm-row__code[b-o5buh44974] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
}
.perm-row__name[b-o5buh44974] {
    font-size: 12.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Số quyền con đã chọn / tổng — cho biết nhánh đang chọn dở mà không cần bung ra xem. */
.perm-row__ratio[b-o5buh44974] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.perm-count[b-o5buh44974] { margin-right: auto; font-size: 12.5px; color: var(--nm-muted); }
.perm-count strong[b-o5buh44974] { color: var(--nm-brand-700); font-weight: 800; }

@media (max-width: 1100px) {
    .triage[b-o5buh44974] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .nm-list-page[b-o5buh44974] { padding: 16px 14px 22px; }
    .triage[b-o5buh44974] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-filters[b-o5buh44974] { width: 100%; }
    .tb-search[b-o5buh44974], .perm-tools .tb-search[b-o5buh44974] { width: 100%; }
    .perm-row__name[b-o5buh44974] { display: none; }
}
/* /src/Features/Org/Pages/Manager/ServiceLicenses/ServiceLicensesIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ServiceLicensesIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: slic-
   ═══════════════════════════════════════════════════════════════ */

.slic-root[b-m3hcwjinpv] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.slic-num[b-m3hcwjinpv] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Hero ─── */
.slic-hero[b-m3hcwjinpv] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .slic-hero h1[b-m3hcwjinpv] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .slic-hero h1 em[b-m3hcwjinpv] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.slic-hero-meta[b-m3hcwjinpv] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .slic-hero-meta .dot[b-m3hcwjinpv] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

/* ─── KPI strip ─── */
.slic-kpis[b-m3hcwjinpv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.slic-kpi[b-m3hcwjinpv] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .slic-kpi:last-child[b-m3hcwjinpv] { border-right: 0; }

.slic-kpi-lbl[b-m3hcwjinpv] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.slic-kpi-dot[b-m3hcwjinpv] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .slic-kpi-dot.accent[b-m3hcwjinpv] { background: var(--d-accent-grad); }
    .slic-kpi-dot.good[b-m3hcwjinpv] { background: var(--d-good); }
    .slic-kpi-dot.warn[b-m3hcwjinpv] { background: var(--d-warn); }
    .slic-kpi-dot.danger[b-m3hcwjinpv] { background: var(--d-danger); }

.slic-kpi-val b[b-m3hcwjinpv] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
}

.slic-kpi.is-empty .slic-kpi-val b[b-m3hcwjinpv] { color: var(--d-ink-4); }

@media (max-width: 768px) {
    .slic-kpis[b-m3hcwjinpv] { grid-template-columns: repeat(2, 1fr); }
    .slic-kpi:nth-child(2)[b-m3hcwjinpv] { border-right: 0; }
    .slic-kpi:nth-child(1)[b-m3hcwjinpv], .slic-kpi:nth-child(2)[b-m3hcwjinpv] { border-bottom: 1px solid var(--d-line); }
}

/* ─── Card primitive ─── */
.slic-card[b-m3hcwjinpv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.slic-card-hd[b-m3hcwjinpv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 12px;
    flex-wrap: wrap;
}

    .slic-card-hd h3[b-m3hcwjinpv] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

/* ─── Toolbar ─── */
.slic-toolbar[b-m3hcwjinpv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.slic-search[b-m3hcwjinpv] {
    position: relative;
    width: 280px;
    max-width: 100%;
}

    .slic-search svg[b-m3hcwjinpv] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .slic-search input[b-m3hcwjinpv] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border-radius: var(--d-r);
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        transition: border-color .12s, box-shadow .12s;
    }

        .slic-search input:focus[b-m3hcwjinpv] {
            outline: none;
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

.slic-chip[b-m3hcwjinpv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
}

    .slic-chip svg[b-m3hcwjinpv] { color: var(--d-ink-4); }

/* ─── Tables ─── */
.slic-tbl-wrap[b-m3hcwjinpv] {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.slic-tbl[b-m3hcwjinpv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .slic-tbl thead th[b-m3hcwjinpv] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .slic-tbl thead th.center[b-m3hcwjinpv] { text-align: center; }
        .slic-tbl thead th.right[b-m3hcwjinpv] { text-align: right; }

    .slic-tbl tbody td[b-m3hcwjinpv] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .slic-tbl tbody tr:last-child td[b-m3hcwjinpv] { border-bottom: 0; }
    .slic-tbl tbody tr:hover[b-m3hcwjinpv] { background: var(--d-surface-2); }
    .slic-tbl td.center[b-m3hcwjinpv] { text-align: center; }
    .slic-tbl td.right[b-m3hcwjinpv] { text-align: right; }

.slic-tbl-stt[b-m3hcwjinpv] { color: var(--d-ink-4); font-size: 12px; }
.slic-svc-name[b-m3hcwjinpv] { font-weight: 500; color: var(--d-ink); }
.slic-svc-code[b-m3hcwjinpv] { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--d-ink-4); margin-top: 2px; }
.slic-svc-icon[b-m3hcwjinpv] { font-size: 18px; line-height: 1; }
.slic-num-cell[b-m3hcwjinpv] { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--d-ink-2); font-size: 12.5px; }
.slic-date-cell[b-m3hcwjinpv] { color: var(--d-ink-2); font-size: 12.5px; }
.slic-date-cell.danger[b-m3hcwjinpv] { color: var(--d-danger); font-weight: 500; }
.slic-muted[b-m3hcwjinpv] { color: var(--d-ink-4); font-size: 12px; }

/* ─── Status pill ─── */
.slic-tag[b-m3hcwjinpv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

    .slic-tag .d[b-m3hcwjinpv] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .slic-tag.good[b-m3hcwjinpv] {
        background: color-mix(in srgb, var(--d-good) 12%, transparent);
        color: var(--d-good);
    }

        .slic-tag.good .d[b-m3hcwjinpv] { background: var(--d-good); }

    .slic-tag.draft[b-m3hcwjinpv] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

        .slic-tag.draft .d[b-m3hcwjinpv] { background: var(--d-ink-4); }

/* ─── Empty / Loading ─── */
.slic-empty[b-m3hcwjinpv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .slic-empty b[b-m3hcwjinpv] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
    .slic-empty small[b-m3hcwjinpv] { font-size: 12px; }
    .slic-empty svg[b-m3hcwjinpv] { margin-bottom: 6px; color: var(--d-ink-4); }

.slic-loading[b-m3hcwjinpv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.slic-spinner[b-m3hcwjinpv] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: slic-spin-b-m3hcwjinpv 0.7s linear infinite;
}

@keyframes slic-spin-b-m3hcwjinpv {
    to { transform: rotate(360deg); }
}
/* /src/Features/Org/Pages/Manager/TravelPolicies/TravelPoliciesIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TravelPoliciesIndex — Manager Dashboard v4 theme (warm-neutral)
   Prefix: tpol-
   ═══════════════════════════════════════════════════════════════ */

.tpol-root[b-btbbmxic6x] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.tpol-num[b-btbbmxic6x] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Hero ─── */
.tpol-hero[b-btbbmxic6x] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .tpol-hero h1[b-btbbmxic6x] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .tpol-hero h1 em[b-btbbmxic6x] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.tpol-hero-meta[b-btbbmxic6x] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .tpol-hero-meta .dot[b-btbbmxic6x] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.tpol-hero-actions[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Buttons ─── */
.tpol-btn[b-btbbmxic6x] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .tpol-btn:hover[b-btbbmxic6x] { background: var(--d-surface-2); color: var(--d-ink); }
    .tpol-btn:disabled[b-btbbmxic6x] { opacity: 0.5; cursor: not-allowed; }

.tpol-btn-accent[b-btbbmxic6x] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .tpol-btn-accent:hover[b-btbbmxic6x] { background: var(--d-accent-grad-hover); color: #fff; }

.tpol-btn-ghost[b-btbbmxic6x] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .tpol-btn-ghost:hover[b-btbbmxic6x] { background: var(--d-surface-2); color: var(--d-ink); }

.tpol-btn-sm[b-btbbmxic6x] { height: 32px; padding: 0 10px; font-size: 12px; }

/* ─── KPI strip ─── */
.tpol-kpis[b-btbbmxic6x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.tpol-kpi[b-btbbmxic6x] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .tpol-kpi:last-child[b-btbbmxic6x] { border-right: 0; }

.tpol-kpi-lbl[b-btbbmxic6x] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpol-kpi-dot[b-btbbmxic6x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .tpol-kpi-dot.accent[b-btbbmxic6x] { background: var(--d-accent-grad); }
    .tpol-kpi-dot.good[b-btbbmxic6x] { background: var(--d-good); }
    .tpol-kpi-dot.warn[b-btbbmxic6x] { background: var(--d-warn); }

.tpol-kpi-val b[b-btbbmxic6x] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
}

@media (max-width: 768px) {
    .tpol-kpis[b-btbbmxic6x] { grid-template-columns: 1fr; }
    .tpol-kpi[b-btbbmxic6x] { border-right: 0; border-bottom: 1px solid var(--d-line); }
    .tpol-kpi:last-child[b-btbbmxic6x] { border-bottom: 0; }
}

/* ─── Card ─── */
.tpol-card[b-btbbmxic6x] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tpol-card-hd[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 12px;
    flex-wrap: wrap;
}

    .tpol-card-hd h3[b-btbbmxic6x] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

/* ─── Toolbar ─── */
.tpol-toolbar[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tpol-search[b-btbbmxic6x] {
    position: relative;
    width: 280px;
    max-width: 100%;
}

    .tpol-search svg[b-btbbmxic6x] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .tpol-search input[b-btbbmxic6x] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border-radius: var(--d-r);
        border: 1px solid var(--d-line);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        transition: border-color .12s, box-shadow .12s;
    }

        .tpol-search input:focus[b-btbbmxic6x] {
            outline: none;
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

/* ─── Tables ─── */
.tpol-tbl-wrap[b-btbbmxic6x] {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.tpol-tbl[b-btbbmxic6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .tpol-tbl thead th[b-btbbmxic6x] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .tpol-tbl thead th.center[b-btbbmxic6x] { text-align: center; }
        .tpol-tbl thead th.right[b-btbbmxic6x] { text-align: right; }

    .tpol-tbl tbody td[b-btbbmxic6x] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .tpol-tbl tbody tr.row[b-btbbmxic6x] { cursor: pointer; transition: background .12s; }
    .tpol-tbl tbody tr.row:hover[b-btbbmxic6x] { background: var(--d-surface-2); }
    .tpol-tbl td.center[b-btbbmxic6x] { text-align: center; }
    .tpol-tbl td.right[b-btbbmxic6x] { text-align: right; }

.tpol-tbl-stt[b-btbbmxic6x] { color: var(--d-ink-4); font-size: 12px; }
.tpol-name[b-btbbmxic6x] { font-weight: 500; color: var(--d-ink); font-size: 14px; }
.tpol-date-cell[b-btbbmxic6x] { color: var(--d-ink-2); font-size: 12.5px; }
.tpol-muted[b-btbbmxic6x] { color: var(--d-ink-4); }

.tpol-chevron[b-btbbmxic6x] {
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    transition: transform .15s;
    flex-shrink: 0;
}

    .tpol-chevron.open[b-btbbmxic6x] { transform: rotate(90deg); }

/* ─── Type tag ─── */
.tpol-type-tag[b-btbbmxic6x] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
}

    .tpol-type-tag.flight[b-btbbmxic6x] { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
    .tpol-type-tag.hotel[b-btbbmxic6x] { background: #eef2ff; color: #4338ca; border-color: #e0e7ff; }
    .tpol-type-tag.tour[b-btbbmxic6x] { background: var(--d-accent-soft); color: var(--d-accent); border-color: #fed7aa; }
    .tpol-type-tag.visa[b-btbbmxic6x] { background: #ecfdf5; color: #047857; border-color: #d1fae5; }
    .tpol-type-tag.esim[b-btbbmxic6x] { background: #f5f3ff; color: #6d28d9; border-color: #ede9fe; }
    .tpol-type-tag.fasttrack[b-btbbmxic6x] { background: #fffbeb; color: #b45309; border-color: #fef3c7; }

/* ─── Status pill ─── */
.tpol-tag[b-btbbmxic6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.5;
}

    .tpol-tag .d[b-btbbmxic6x] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .tpol-tag.good[b-btbbmxic6x] {
        background: color-mix(in srgb, var(--d-good) 12%, transparent);
        color: var(--d-good);
    }

        .tpol-tag.good .d[b-btbbmxic6x] { background: var(--d-good); }

    .tpol-tag.draft[b-btbbmxic6x] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

        .tpol-tag.draft .d[b-btbbmxic6x] { background: var(--d-ink-4); }

/* ─── Row actions ─── */
.tpol-actions[b-btbbmxic6x] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.tpol-icon-btn[b-btbbmxic6x] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tpol-icon-btn:hover[b-btbbmxic6x] { background: var(--d-surface-2); color: var(--d-ink); }
    .tpol-icon-btn.edit:hover[b-btbbmxic6x] { background: color-mix(in srgb, #2563eb 10%, transparent); color: #2563eb; }
    .tpol-icon-btn.danger:hover[b-btbbmxic6x] { background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); }

/* ─── Detail row ─── */
.tpol-detail-row td[b-btbbmxic6x] {
    background: var(--d-surface-2);
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

.tpol-detail-grid[b-btbbmxic6x] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .tpol-detail-grid[b-btbbmxic6x] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .tpol-detail-grid[b-btbbmxic6x] { grid-template-columns: repeat(4, 1fr); }
}

.tpol-detail-lbl[b-btbbmxic6x] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.tpol-detail-val[b-btbbmxic6x] {
    display: block;
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

.tpol-detail-empty[b-btbbmxic6x] {
    font-size: 12px;
    color: var(--d-ink-4);
    font-style: italic;
}

/* ─── Empty / Loading ─── */
.tpol-empty[b-btbbmxic6x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .tpol-empty b[b-btbbmxic6x] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
    .tpol-empty small[b-btbbmxic6x] { font-size: 12px; }
    .tpol-empty svg[b-btbbmxic6x] { margin-bottom: 6px; color: var(--d-ink-4); }

.tpol-loading[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.tpol-spinner[b-btbbmxic6x] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: tpol-spin-b-btbbmxic6x 0.7s linear infinite;
}

@keyframes tpol-spin-b-btbbmxic6x { to { transform: rotate(360deg); } }

/* ─── Modal ─── */
.tpol-modal-backdrop[b-btbbmxic6x] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
}

.tpol-modal[b-btbbmxic6x] {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: var(--d-surface);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    box-shadow: 0 20px 50px -12px rgba(28, 25, 23, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tpol-modal-hd[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .tpol-modal-hd h2[b-btbbmxic6x] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

.tpol-modal-close[b-btbbmxic6x] {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .tpol-modal-close:hover[b-btbbmxic6x] { background: var(--d-surface-2); color: var(--d-ink); }

.tpol-modal-body[b-btbbmxic6x] {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tpol-modal-ft[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

/* ─── Form ─── */
.tpol-section-title[b-btbbmxic6x] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
}

.tpol-form-grid[b-btbbmxic6x] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .tpol-form-grid.cols-2[b-btbbmxic6x] { grid-template-columns: 1fr 1fr; }
}

.tpol-field-full[b-btbbmxic6x] { grid-column: 1 / -1; }

.tpol-label[b-btbbmxic6x] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.tpol-label .req[b-btbbmxic6x] { color: var(--d-danger); }

.tpol-input[b-btbbmxic6x],
.tpol-select[b-btbbmxic6x] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

    .tpol-input:focus[b-btbbmxic6x],
    .tpol-select:focus[b-btbbmxic6x] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.tpol-checkbox-row[b-btbbmxic6x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tpol-checkbox-row input[type="checkbox"][b-btbbmxic6x] {
        width: 16px;
        height: 16px;
        accent-color: var(--d-accent);
    }

    .tpol-checkbox-row label[b-btbbmxic6x] {
        font-size: 14px;
        color: var(--d-ink-2);
    }

.tpol-error-banner[b-btbbmxic6x] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    background: color-mix(in srgb, var(--d-danger) 10%, transparent);
    color: var(--d-danger);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
}

.tpol-airline-grid[b-btbbmxic6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface-2);
    max-height: 140px;
    overflow-y: auto;
}

.tpol-airline-item[b-btbbmxic6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
}

    .tpol-airline-item input[type="checkbox"][b-btbbmxic6x] {
        width: 14px;
        height: 14px;
        accent-color: var(--d-accent);
    }

    .tpol-airline-item .iata[b-btbbmxic6x] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 600;
        color: var(--d-ink);
    }

    .tpol-airline-item .nm[b-btbbmxic6x] {
        color: var(--d-ink-3);
    }

.tpol-cabin-grid[b-btbbmxic6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface-2);
}

.tpol-cabin-item[b-btbbmxic6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12.5px;
    white-space: nowrap;
}

    .tpol-cabin-item input[type="checkbox"][b-btbbmxic6x] {
        width: 14px;
        height: 14px;
        accent-color: var(--d-accent);
    }

    .tpol-cabin-item .nm[b-btbbmxic6x] {
        color: var(--d-ink);
    }

.tpol-hint[b-btbbmxic6x] {
    font-weight: 400;
    color: var(--d-ink-4);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    margin-left: 4px;
}
/* /src/Features/Org/Pages/Manager/UserDetail.razor.rz.scp.css */
/* /manager/system/users/{id} — chi tiết tài khoản.
   Cùng ngôn ngữ hình với /ca/employees/{id}: hero định danh + KPI + NmTabs, token-only. */
.nm-list-page[b-ktwmoinn2j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* NmPageHeader tự có margin dưới — page đã dùng gap nên bỏ bớt. */
[b-ktwmoinn2j] .usd-header { margin-bottom: 0; }

.nm-code-pill[b-ktwmoinn2j] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.usd-loading[b-ktwmoinn2j] { display: flex; flex-direction: column; gap: 12px; }

/* ── Hero ── */
.usd-hero[b-ktwmoinn2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.usd-hero-id[b-ktwmoinn2j] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.usd-hero-who[b-ktwmoinn2j] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.usd-hero-name[b-ktwmoinn2j] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usd-hero-name > b[b-ktwmoinn2j] { font-size: 17px; font-weight: 800; color: var(--nm-ink); }
.usd-hero-sub[b-ktwmoinn2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.usd-hero-sub i[b-ktwmoinn2j] { font-size: 12px; color: var(--nm-brand-600, var(--nm-brand-500)); margin-right: 3px; }
.usd-hero-sep[b-ktwmoinn2j] { color: var(--nm-border); }

.usd-kpis[b-ktwmoinn2j] { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.usd-kpis[b-ktwmoinn2j]  .nm-kpi { padding: 8px 12px; min-width: 120px; background: var(--nm-surface-2); }
.usd-kpis[b-ktwmoinn2j]  .nm-kpi__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.usd-kpis[b-ktwmoinn2j]  .nm-kpi__val { margin-top: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ── Nội dung tab ── */
.usd-tab-body[b-ktwmoinn2j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    max-width: 980px;
}

[b-ktwmoinn2j] .usd-card .nm-card__head { display: flex; align-items: center; gap: 8px; }
.usd-card-ico[b-ktwmoinn2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.usd-card-title[b-ktwmoinn2j] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.usd-card-sub[b-ktwmoinn2j] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }
.usd-card-count[b-ktwmoinn2j] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.usd-card-body[b-ktwmoinn2j] { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

.usd-mono[b-ktwmoinn2j] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12.5px; }
.usd-empty-line[b-ktwmoinn2j] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

/* ── Giấy tờ ── */
.usd-doc-group[b-ktwmoinn2j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
.usd-doc-block[b-ktwmoinn2j] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.usd-doc-title[b-ktwmoinn2j] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.usd-doc-title i[b-ktwmoinn2j] { color: var(--nm-brand-600, var(--nm-brand-500)); }

/* ── Vai trò ── */
.usd-roles[b-ktwmoinn2j] { display: flex; flex-direction: column; gap: 6px; }
.usd-role[b-ktwmoinn2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.usd-role-nm[b-ktwmoinn2j] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}
.usd-role-nm i[b-ktwmoinn2j] { color: var(--nm-brand-600, var(--nm-brand-500)); font-size: 12px; }
.usd-role-perm[b-ktwmoinn2j] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Quyền gán riêng: Deny phải nhìn ra ngay, không lẫn với Grant ── */
.usd-perms[b-ktwmoinn2j] { display: flex; flex-direction: column; gap: 5px; }
.usd-perm[b-ktwmoinn2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid var(--nm-border);
    border-left-width: 3px;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    font-size: 12.5px;
}
.usd-perm.is-grant[b-ktwmoinn2j] { border-left-color: var(--nm-ok); }
.usd-perm.is-grant i[b-ktwmoinn2j] { color: var(--nm-ok); }
.usd-perm.is-deny[b-ktwmoinn2j] { border-left-color: var(--nm-bad); }
.usd-perm.is-deny i[b-ktwmoinn2j] { color: var(--nm-bad); }
.usd-perm-nm[b-ktwmoinn2j] { font-weight: 600; color: var(--nm-ink); }
.usd-perm-code[b-ktwmoinn2j] { margin-left: auto; color: var(--nm-muted); }

.usd-links[b-ktwmoinn2j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}

/* ── Hoạt động ── */
.usd-on[b-ktwmoinn2j] { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nm-ok); }
.usd-dot-on[b-ktwmoinn2j] { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-ok); flex-shrink: 0; }
.usd-off[b-ktwmoinn2j] { color: var(--nm-muted); }

.usd-table-wrap[b-ktwmoinn2j] { overflow-x: auto; }
.usd-table[b-ktwmoinn2j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.usd-table th[b-ktwmoinn2j] {
    text-align: left;
    padding: 8px 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
}
.usd-table td[b-ktwmoinn2j] {
    padding: 9px 10px;
    border-bottom: 1px solid var(--nm-border-soft, var(--nm-border));
    vertical-align: top;
    white-space: nowrap;
}
.usd-table tr:last-child td[b-ktwmoinn2j] { border-bottom: 0; }
.usd-cell-main[b-ktwmoinn2j] { display: block; font-weight: 600; color: var(--nm-ink); }
.usd-cell-sub[b-ktwmoinn2j] { display: block; margin-top: 2px; font-size: 11px; color: var(--nm-muted); }

/* ── Modal sửa ── */
.usd-form[b-ktwmoinn2j] { display: flex; flex-direction: column; gap: 12px; }

/* ── Responsive ── */
@media (max-width: 900px) { .usd-doc-group[b-ktwmoinn2j] { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .usd-hero[b-ktwmoinn2j] { flex-direction: column; align-items: stretch; }
    .usd-kpis[b-ktwmoinn2j] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usd-kpis[b-ktwmoinn2j]  .nm-kpi { min-width: 0; }
    .usd-kpis[b-ktwmoinn2j]  .nm-kpi__val { white-space: normal; }
}
@media (max-width: 640px) {
    .nm-list-page[b-ktwmoinn2j] { padding: 16px 14px 22px; }
    [b-ktwmoinn2j] .usd-tabs .nm-tabs__bar { overflow-x: auto; }
}
/* /src/Features/Org/Pages/Manager/UserLoyaltyCards.razor.rz.scp.css */
/* Manager — UserLoyaltyCards (warm-neutral + cam accent) */
.mglc-root[b-chfcdzbmtz] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 56px);
    padding: 20px 28px;
}

.mglc-bc[b-chfcdzbmtz] { font-size: 12px; color: var(--d-ink-3); margin-bottom: 4px; }
.mglc-bc a[b-chfcdzbmtz] { color: var(--d-ink-3); text-decoration: none; }
.mglc-bc a:hover[b-chfcdzbmtz] { color: var(--d-accent); }
.mglc-bc .sep[b-chfcdzbmtz] { margin: 0 6px; }

.mglc-hero[b-chfcdzbmtz] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    margin-bottom: 20px;
}
.mglc-hero h1[b-chfcdzbmtz] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}
.mglc-hero h1 em[b-chfcdzbmtz] { font-style: normal; color: var(--d-ink-3); font-weight: 500; font-size: 18px; }
.mglc-hero-meta[b-chfcdzbmtz] { margin-top: 6px; font-size: 14px; color: var(--d-ink-3); }
.mglc-hero-actions[b-chfcdzbmtz] { display: flex; gap: 8px; }

.mglc-btn[b-chfcdzbmtz] {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; min-width: 84px;
    padding: 8px 16px; font-size: 14px; font-weight: 500;
    background: #ffffff; color: #44403c;
    border: 1px solid #d6d3d1; border-radius: 10px;
    cursor: pointer; transition: all .15s;
    font-family: inherit; line-height: 1;
}
.mglc-btn:hover[b-chfcdzbmtz] { background: #f5f3ef; border-color: #a8a29e; }
.mglc-btn-accent[b-chfcdzbmtz] {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    color: #ffffff; border: 1px solid transparent;
}
.mglc-btn-accent:hover[b-chfcdzbmtz] { filter: brightness(1.06); }
.mglc-btn:disabled[b-chfcdzbmtz] { opacity: .55; cursor: not-allowed; filter: none; }

.mglc-readonly-note[b-chfcdzbmtz] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--d-warn-soft); color: #92400e;
    border: 1px solid #fde68a; border-radius: var(--d-r);
    font-size: 12px; line-height: 1.5;
}
.mglc-readonly-note svg[b-chfcdzbmtz] { flex-shrink: 0; margin-top: 2px; }

.mglc-card-meta[b-chfcdzbmtz] {
    display: flex; align-items: center; gap: 4px;
    padding-top: 8px; border-top: 1px solid var(--d-line-2);
    font-size: 11px; color: var(--d-ink-3);
}
.mglc-card-meta .lbl[b-chfcdzbmtz] { color: var(--d-ink-4); }

.mglc-msg[b-chfcdzbmtz] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; margin-bottom: 14px; }
.mglc-msg.good[b-chfcdzbmtz] { background: var(--d-good-soft); color: var(--d-good); }
.mglc-msg.bad[b-chfcdzbmtz] { background: #fee2e2; color: var(--d-danger); }

.mglc-loading[b-chfcdzbmtz] { padding: 40px; text-align: center; color: var(--d-ink-3); }
.mglc-empty[b-chfcdzbmtz] {
    background: var(--d-surface); border: 1px dashed var(--d-line);
    border-radius: var(--d-r); padding: 40px 24px; text-align: center;
}
.mglc-empty-ico[b-chfcdzbmtz] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--d-accent-soft); color: var(--d-accent);
    margin-bottom: 12px;
}
.mglc-empty b[b-chfcdzbmtz] { display: block; color: var(--d-ink); font-size: 15px; margin-bottom: 4px; }
.mglc-empty small[b-chfcdzbmtz] { color: var(--d-ink-3); font-size: 14px; }

.mglc-grid[b-chfcdzbmtz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.mglc-card[b-chfcdzbmtz] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .15s;
}
.mglc-card:hover[b-chfcdzbmtz] { border-color: var(--d-ink-4); }

.mglc-card-top[b-chfcdzbmtz] { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mglc-card-prog-type[b-chfcdzbmtz] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-ink-4); }
.mglc-card-prog-name[b-chfcdzbmtz] { font-size: 14px; font-weight: 600; color: var(--d-ink); margin-top: 2px; }
.mglc-card-badge[b-chfcdzbmtz] {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: var(--d-accent-soft); color: var(--d-accent); font-weight: 500;
}
.mglc-card-badge.inactive[b-chfcdzbmtz] { background: var(--d-surface-2); color: var(--d-ink-3); }

.mglc-card-num[b-chfcdzbmtz] {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 16px; letter-spacing: 0.06em; color: var(--d-ink);
    background: var(--d-surface-2); padding: 10px 12px; border-radius: 8px;
}

.mglc-card-foot[b-chfcdzbmtz] { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 12px; }
.mglc-card-foot .lbl[b-chfcdzbmtz] { color: var(--d-ink-4); font-size: 11px; }
.mglc-card-foot .val[b-chfcdzbmtz] { color: var(--d-ink-2); font-weight: 500; }

.mglc-card-actions[b-chfcdzbmtz] {
    display: flex; align-items: center; gap: 6px; padding-top: 8px;
    border-top: 1px solid var(--d-line-2);
}
.mglc-card-btn[b-chfcdzbmtz] {
    font-size: 12px; padding: 5px 10px;
    background: transparent; color: var(--d-accent);
    border: 1px solid var(--d-accent-soft); border-radius: 6px;
    cursor: pointer;
}
.mglc-card-btn:hover[b-chfcdzbmtz] { background: var(--d-accent-soft); }
.mglc-card-actions .spacer[b-chfcdzbmtz] { margin-left: auto; display: flex; gap: 4px; }
.mglc-card-icon-btn[b-chfcdzbmtz] {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--d-line); background: transparent; border-radius: 6px;
    color: var(--d-ink-3); cursor: pointer;
}
.mglc-card-icon-btn:hover[b-chfcdzbmtz] { background: var(--d-surface-2); color: var(--d-ink); }
.mglc-card-icon-btn.danger:hover[b-chfcdzbmtz] { background: #fee2e2; color: var(--d-danger); border-color: #fecaca; }

/* Modal (kept in stylesheet for symmetry — view-only page does not open modals) */
.mglc-modal-bd[b-chfcdzbmtz] {
    position: fixed; inset: 0; background: rgba(15, 12, 10, .55);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 16px;
    isolation: isolate;
}
.mglc-modal[b-chfcdzbmtz] {
    background: #ffffff; width: 100%; max-width: 560px;
    border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
    display: flex; flex-direction: column; max-height: calc(100vh - 32px);
}
.mglc-modal-hd[b-chfcdzbmtz] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--d-line);
}
.mglc-modal-hd h3[b-chfcdzbmtz] { margin: 0; font-size: 16px; font-weight: 600; }
.mglc-modal-close[b-chfcdzbmtz] {
    background: transparent; border: 0; color: var(--d-ink-3); cursor: pointer;
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.mglc-modal-close:hover[b-chfcdzbmtz] { background: var(--d-surface-2); color: var(--d-ink); }
.mglc-modal-bd-body[b-chfcdzbmtz] { padding: 16px 18px; overflow-y: auto; flex: 1; }
.mglc-modal-ft[b-chfcdzbmtz] {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--d-line);
}

.mglc-field[b-chfcdzbmtz] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mglc-field label[b-chfcdzbmtz] { font-size: 12px; color: var(--d-ink-2); font-weight: 500; }
.mglc-field .req[b-chfcdzbmtz] { color: var(--d-danger); }

.mglc-input[b-chfcdzbmtz], .mglc-select[b-chfcdzbmtz] {
    width: 100%; box-sizing: border-box;
    height: 38px; padding: 0 12px; font-size: 14px;
    background: #ffffff; color: var(--d-ink);
    border: 1px solid var(--d-line); border-radius: 8px;
    outline: none; transition: border-color .15s;
    font-family: inherit;
}
.mglc-input:focus[b-chfcdzbmtz], .mglc-select:focus[b-chfcdzbmtz] { border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-accent-soft); }
.mglc-input.upper[b-chfcdzbmtz] { text-transform: uppercase; }
.mglc-input.mono[b-chfcdzbmtz] { font-family: 'JetBrains Mono', 'Consolas', monospace; letter-spacing: 0.04em; }

.mglc-form-grid-2[b-chfcdzbmtz] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mglc-checkbox-row[b-chfcdzbmtz] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; font-size: 14px; color: var(--d-ink-2); cursor: pointer;
}
.mglc-checkbox-row input[b-chfcdzbmtz] { width: 16px; height: 16px; accent-color: var(--d-accent); }

.mglc-form-error[b-chfcdzbmtz] {
    margin-top: 8px; padding: 8px 12px;
    background: #fee2e2; color: var(--d-danger);
    border-radius: 8px; font-size: 12px;
}

@media (max-width: 768px) {
    .mglc-root[b-chfcdzbmtz] { padding: 14px 16px; }
    .mglc-hero[b-chfcdzbmtz] { grid-template-columns: 1fr; }
    .mglc-hero-actions[b-chfcdzbmtz] { width: 100%; }
    .mglc-form-grid-2[b-chfcdzbmtz] { grid-template-columns: 1fr; }
}
/* /src/Features/Org/Pages/Manager/UserPermissionsIndex.razor.rz.scp.css */
/* UserPermissionsIndex — Manager Dashboard v4. Prefix: uperm- */
.uperm-root[b-tz1jwpa8tf] {
    --d-bg: #f8fafc; --d-surface: #ffffff; --d-surface-2: #f5f3ef;
    --d-line: #e8e4df; --d-line-2: #efeae3;
    --d-ink: #1c1917; --d-ink-2: #44403c; --d-ink-3: #78716c; --d-ink-4: #a8a29e;
    --d-accent: #ea580c; --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a; --d-warn: #d97706; --d-danger: #dc2626;
    --d-r: 10px; color: var(--d-ink); background: var(--d-bg); min-height: 100%;
}
.uperm-page[b-tz1jwpa8tf] { padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; min-height: calc(100vh - 64px); }
.uperm-hero[b-tz1jwpa8tf] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.uperm-hero h1[b-tz1jwpa8tf] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.uperm-hero h1 em[b-tz1jwpa8tf] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.uperm-hero-meta[b-tz1jwpa8tf] { margin-top: 6px; display: flex; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; align-items: center; }
.uperm-hero-meta .dot[b-tz1jwpa8tf] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.uperm-kpis[b-tz1jwpa8tf] { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.uperm-kpi[b-tz1jwpa8tf] { padding: 16px 18px 14px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 8px; }
.uperm-kpi:last-child[b-tz1jwpa8tf] { border-right: 0; }
.uperm-kpi-lbl[b-tz1jwpa8tf] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.uperm-kpi-dot[b-tz1jwpa8tf] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); }
.uperm-kpi-dot.accent[b-tz1jwpa8tf] { background: var(--d-accent-grad); }
.uperm-kpi-dot.good[b-tz1jwpa8tf] { background: var(--d-good); }
.uperm-kpi-val b[b-tz1jwpa8tf] { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; }

.uperm-grid[b-tz1jwpa8tf] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .uperm-grid[b-tz1jwpa8tf] { grid-template-columns: 320px 1fr; } }

.uperm-card[b-tz1jwpa8tf] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.uperm-card-hd[b-tz1jwpa8tf] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); }
.uperm-card-hd h3[b-tz1jwpa8tf] { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

.uperm-search[b-tz1jwpa8tf] { position: relative; }
.uperm-search svg[b-tz1jwpa8tf] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--d-ink-4); pointer-events: none; }
.uperm-search input[b-tz1jwpa8tf] { width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; }
.uperm-search input:focus[b-tz1jwpa8tf] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,.12); }

.uperm-userlist[b-tz1jwpa8tf] { max-height: 60vh; overflow-y: auto; }
.uperm-userlist-row[b-tz1jwpa8tf] { width: 100%; padding: 12px 16px; border: 0; background: transparent; border-bottom: 1px solid var(--d-line-2); cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px; transition: background .12s; }
.uperm-userlist-row:hover[b-tz1jwpa8tf] { background: var(--d-surface-2); }
.uperm-userlist-row.active[b-tz1jwpa8tf] { background: var(--d-accent-soft); border-left: 3px solid var(--d-accent); padding-left: 13px; }

.uperm-avatar[b-tz1jwpa8tf] { width: 36px; height: 36px; border-radius: 50%; background: var(--d-accent-soft); color: var(--d-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.uperm-username[b-tz1jwpa8tf] { font-size: 14px; font-weight: 500; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uperm-email[b-tz1jwpa8tf] { font-size: 11.5px; color: var(--d-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.uperm-empty[b-tz1jwpa8tf] { padding: 32px 16px; text-align: center; color: var(--d-ink-3); }
.uperm-empty svg[b-tz1jwpa8tf] { color: var(--d-ink-4); margin: 0 auto 8px; display: block; }

.uperm-detail-hd[b-tz1jwpa8tf] { padding: 16px; border-bottom: 1px solid var(--d-line); display: flex; gap: 12px; align-items: center; background: var(--d-surface-2); }
.uperm-detail-hd .uperm-avatar[b-tz1jwpa8tf] { width: 44px; height: 44px; font-size: 16px; }
.uperm-detail-hd h3[b-tz1jwpa8tf] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 600; color: var(--d-ink); }
.uperm-detail-hd .em[b-tz1jwpa8tf] { font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }

.uperm-tabs[b-tz1jwpa8tf] { display: flex; border-bottom: 1px solid var(--d-line); overflow-x: auto; }
.uperm-tab[b-tz1jwpa8tf] { padding: 12px 18px; font-size: 14px; font-weight: 500; border: 0; background: transparent; cursor: pointer; color: var(--d-ink-3); border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.uperm-tab:hover[b-tz1jwpa8tf] { color: var(--d-ink); }
.uperm-tab.active[b-tz1jwpa8tf] { color: var(--d-accent); border-bottom-color: var(--d-accent); }

.uperm-body[b-tz1jwpa8tf] { padding: 16px; }
.uperm-info-banner[b-tz1jwpa8tf] { padding: 10px 14px; border-radius: var(--d-r); font-size: 12px; background: color-mix(in srgb, #2563eb 8%, transparent); color: #1d4ed8; border: 1px solid color-mix(in srgb, #2563eb 20%, transparent); margin-bottom: 14px; }
.uperm-info-banner b[b-tz1jwpa8tf] { display: block; margin-bottom: 2px; font-weight: 600; }

.uperm-roles-grid[b-tz1jwpa8tf] { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .uperm-roles-grid[b-tz1jwpa8tf] { grid-template-columns: 1fr 1fr; } }
.uperm-role-card[b-tz1jwpa8tf] { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--d-line); border-radius: var(--d-r); cursor: pointer; transition: border-color .12s, background .12s; }
.uperm-role-card:hover[b-tz1jwpa8tf] { border-color: var(--d-ink-4); }
.uperm-role-card.is-on[b-tz1jwpa8tf] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.uperm-role-card input[b-tz1jwpa8tf] { width: 16px; height: 16px; accent-color: var(--d-accent); margin-top: 2px; }
.uperm-role-name[b-tz1jwpa8tf] { font-size: 14px; font-weight: 500; color: var(--d-ink); display: block; }
.uperm-role-desc[b-tz1jwpa8tf] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.uperm-role-count[b-tz1jwpa8tf] { font-size: 11px; color: var(--d-ink-4); margin-left: auto; }

.uperm-perm-tree[b-tz1jwpa8tf] { border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: auto; max-height: 50vh; }
.uperm-legend[b-tz1jwpa8tf] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 11.5px; color: var(--d-ink-3); margin-bottom: 12px; }
.uperm-legend .lg[b-tz1jwpa8tf] { display: inline-flex; align-items: center; gap: 4px; }
.uperm-legend .sw[b-tz1jwpa8tf] { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.uperm-legend .sw.grant[b-tz1jwpa8tf] { background: var(--d-good); }
.uperm-legend .sw.deny[b-tz1jwpa8tf] { background: var(--d-danger); }
.uperm-legend .sw.none[b-tz1jwpa8tf] { background: var(--d-line); }

.uperm-actions-bar[b-tz1jwpa8tf] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--d-line-2); font-size: 12.5px; color: var(--d-ink-3); }

.uperm-btn[b-tz1jwpa8tf] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.uperm-btn:hover[b-tz1jwpa8tf] { background: var(--d-surface-2); }
.uperm-btn-accent[b-tz1jwpa8tf] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,.18); }
.uperm-btn-accent:hover[b-tz1jwpa8tf] { background: var(--d-accent-grad-hover); color: #fff; }
.uperm-btn-accent:disabled[b-tz1jwpa8tf] { opacity: .5; cursor: not-allowed; }

.uperm-banner[b-tz1jwpa8tf] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uperm-banner.error[b-tz1jwpa8tf] { background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); }
.uperm-banner.success[b-tz1jwpa8tf] { background: color-mix(in srgb, var(--d-good) 10%, transparent); color: var(--d-good); border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent); }
.uperm-banner button[b-tz1jwpa8tf] { background: transparent; border: 0; cursor: pointer; color: inherit; opacity: .7; }
.uperm-banner button:hover[b-tz1jwpa8tf] { opacity: 1; }

.uperm-loading[b-tz1jwpa8tf] { padding: 32px; text-align: center; }
.uperm-spinner[b-tz1jwpa8tf] { width: 24px; height: 24px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: uperm-spin-b-tz1jwpa8tf .7s linear infinite; display: inline-block; }
@keyframes uperm-spin-b-tz1jwpa8tf { to { transform: rotate(360deg); } }
/* /src/Features/Org/Pages/Manager/UsersIndex.razor.rz.scp.css */
/* /manager/system/users — chuẩn nm-list token-only:
   head → thanh phân loại (số liệu kiêm bộ lọc) → toolbar → bảng → phân trang.
   Bản trước tự dựng bảng màu riêng (--d-*, "Manager Dashboard v4") + modal viết tay;
   nay dùng token --nm-* và primitive Nm* (NmModal/NmField/NmInput/DataGrid). */

/* ── shell trang ─────────────────────────────────────────── */
.nm-list-page[b-vxgtfiajmj] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-vxgtfiajmj] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-vxgtfiajmj] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-vxgtfiajmj] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 660px; }
.nm-list-actions[b-vxgtfiajmj] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── thanh phân loại: SỐ LIỆU kiêm BỘ LỌC ────────────────────
   Mỗi ô là một rổ tài khoản. Số to trên, nhãn nhỏ dưới — quét mắt là thấy rổ nào phình.
   Bấm để lọc thẳng bảng bên dưới, nên số không bao giờ là thứ chỉ để ngắm. */
.triage[b-vxgtfiajmj] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.triage__seg[b-vxgtfiajmj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 9px 12px;
    border: 1px solid var(--nm-border);
    border-left: 3px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.triage__seg:hover[b-vxgtfiajmj] { background: var(--nm-surface-2); }

.triage__n[b-vxgtfiajmj] {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.triage__lbl[b-vxgtfiajmj] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Dải màu trái = loại rổ. Chỉ tô viền, KHÔNG tô nền: 6 ô nền màu cạnh nhau thành cầu vồng,
   mắt hết chỗ bám. */
.triage__seg--accent[b-vxgtfiajmj]  { border-left-color: var(--nm-brand-500); }
.triage__seg--good[b-vxgtfiajmj]    { border-left-color: var(--nm-ok); }
.triage__seg--pending[b-vxgtfiajmj] { border-left-color: var(--nm-muted); }
.triage__seg--info[b-vxgtfiajmj]    { border-left-color: var(--nm-info); }
.triage__seg--violet[b-vxgtfiajmj]  { border-left-color: var(--nm-violet); }
.triage__seg--warn[b-vxgtfiajmj]    { border-left-color: var(--nm-warn); }

.triage__seg.is-active[b-vxgtfiajmj] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50, var(--nm-surface-2));
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.triage__seg.is-active .triage__lbl[b-vxgtfiajmj] { color: var(--nm-brand-700); }

/* ── toolbar ─────────────────────────────────────────────── */
.nm-list-toolbar[b-vxgtfiajmj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.tb-filters[b-vxgtfiajmj] { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
/* Khoá bề rộng ở DIV bọc, KHÔNG qua Class của NmInput/NmSelect: param Class rơi vào thẻ
   <input>/<select> bên trong còn .nm-input-wrap vẫn width:100% → mỗi filter rớt một dòng. */
.tb-search[b-vxgtfiajmj] { width: 280px; }
.tb-sel[b-vxgtfiajmj] { width: 160px; }
.tb-sel--wide[b-vxgtfiajmj] { width: 200px; }
.tb-count[b-vxgtfiajmj] {
    font-size: 12.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
    padding-top: 8px;
    white-space: nowrap;
}

.chipbar[b-vxgtfiajmj] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

/* Chọn số dòng đứng cùng hàng với phân trang — cả hai đều điều khiển lượng dữ liệu. */
.nm-list-pager[b-vxgtfiajmj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pagesize[b-vxgtfiajmj] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--nm-muted); }
.pagesize > :last-child[b-vxgtfiajmj] { width: 84px; }

/* ── ô trong bảng ────────────────────────────────────────── */
.cell-user[b-vxgtfiajmj] { display: flex; align-items: center; gap: 10px; min-width: 0; }

.cell-2line[b-vxgtfiajmj] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-vxgtfiajmj] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.cell-2line__sub[b-vxgtfiajmj] {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.cell-mail[b-vxgtfiajmj] { font-weight: 400; color: var(--nm-ink-2); }
.cell-dash[b-vxgtfiajmj] { color: var(--nm-muted); }

.cell-on[b-vxgtfiajmj] { display: inline-flex; align-items: center; gap: 6px; color: var(--nm-ok); font-weight: 600; }
.dot-on[b-vxgtfiajmj] {
    width: 7px; height: 7px; border-radius: var(--nm-r-pill);
    background: var(--nm-ok); flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-ok) 22%, transparent);
}

.cell-acts[b-vxgtfiajmj] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
/* NmButton dạng link nhưng dùng như nút icon → ép vuông cho thẳng hàng với NmIconButton. */
.cell-acts[b-vxgtfiajmj]  .cell-iconlink { width: 30px; padding: 0; justify-content: center; }

/* Tên = lối vào trang chi tiết tài khoản. Giữ màu chữ thường, chỉ gạch chân khi rê chuột —
   bảng đã nhiều màu, thêm một cột xanh link nữa là loạn. */
.cell-namelink[b-vxgtfiajmj] { color: inherit; text-decoration: none; cursor: pointer; }
.cell-namelink:hover[b-vxgtfiajmj] { color: var(--nm-brand-700); text-decoration: underline; }
.cell-namelink:focus-visible[b-vxgtfiajmj] { outline: 2px solid var(--nm-brand-500); outline-offset: 2px; border-radius: 4px; }

/* Tài khoản đã vô hiệu hoá — làm mờ nhẹ, vẫn đọc được, không tô nền để bảng khỏi loang màu. */
.nm-list-page[b-vxgtfiajmj]  tr.row-off td { opacity: .62; }
.nm-list-page[b-vxgtfiajmj]  tr.row-off:hover td { opacity: 1; }

/* ── form trong modal ────────────────────────────────────── */
.ufrm[b-vxgtfiajmj] { display: flex; flex-direction: column; gap: 14px; }

.ufrm-typedesc[b-vxgtfiajmj] {
    margin: -8px 0 0;
    font-size: 12.5px;
    color: var(--nm-muted);
}

.ufrm-sec[b-vxgtfiajmj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.ufrm-sec--info[b-vxgtfiajmj] { background: var(--nm-surface-2); }
.ufrm-sec-title[b-vxgtfiajmj] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.ufrm-note[b-vxgtfiajmj] { margin: 0; font-size: 12px; color: var(--nm-muted); line-height: 1.5; }

[b-vxgtfiajmj] .ufrm-mono {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Vai trò: chip bấm chọn nhiều — mô tả bám ngay sau tên để khỏi phải tra bảng quyền. */
.ufrm-roles[b-vxgtfiajmj] { display: flex; flex-wrap: wrap; gap: 8px; }
.ufrm-roles[b-vxgtfiajmj]  .nm-chip { align-items: baseline; }
.ufrm-roles[b-vxgtfiajmj]  small { font-size: 11px; opacity: .75; }

/* Danh tính người đang sửa — nhắc rõ đang thao tác lên ai trước khi bấm Lưu. */
.ufrm-who[b-vxgtfiajmj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.ufrm-who-txt[b-vxgtfiajmj] { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ufrm-who-mail[b-vxgtfiajmj] {
    font-size: 14px; font-weight: 700; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ufrm-who-meta[b-vxgtfiajmj] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--nm-muted); }
.ufrm-who-login[b-vxgtfiajmj] { font-family: ui-monospace, 'JetBrains Mono', monospace; }
.ufrm-who-co[b-vxgtfiajmj] { padding-left: 8px; border-left: 1px solid var(--nm-border); }

@media (max-width: 1100px) {
    .triage[b-vxgtfiajmj] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .nm-list-page[b-vxgtfiajmj] { padding: 16px 14px 22px; }
    .triage[b-vxgtfiajmj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-filters[b-vxgtfiajmj] { width: 100%; }
    .tb-search[b-vxgtfiajmj], .tb-sel[b-vxgtfiajmj], .tb-sel--wide[b-vxgtfiajmj] { width: 100%; }
    .ufrm-who[b-vxgtfiajmj] { align-items: flex-start; }
}
/* /src/Features/Partner/Pages/Partner/Analytics.razor.rz.scp.css */
/* Partner Analytics — Manager Dashboard v4 theme */
.panalytics-root[b-namfu1xiz8] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100vh;
}

.panalytics-num[b-namfu1xiz8] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.panalytics-hero[b-namfu1xiz8] {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    flex-wrap: wrap;
}
.panalytics-hero-left[b-namfu1xiz8] { display: flex; align-items: center; gap: 14px; }
.panalytics-hero-ico[b-namfu1xiz8] {
    width: 42px; height: 42px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}
.panalytics-hero h1[b-namfu1xiz8] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.panalytics-hero p[b-namfu1xiz8] { margin: 2px 0 0; font-size: 12.5px; color: var(--d-ink-3); }

.panalytics-select[b-namfu1xiz8] {
    height: 34px; padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 12.5px; font-weight: 500; color: var(--d-ink-2);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
.panalytics-select:focus[b-namfu1xiz8] { outline: 0; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

/* KPI strip */
.panalytics-kpis[b-namfu1xiz8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
@media (min-width: 1024px) { .panalytics-kpis[b-namfu1xiz8] { grid-template-columns: repeat(4, 1fr); } }
.panalytics-kpi[b-namfu1xiz8] { padding: 18px; border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 8px; }
.panalytics-kpi:nth-child(2n)[b-namfu1xiz8] { border-right: 0; }
@media (min-width: 1024px) {
    .panalytics-kpi[b-namfu1xiz8] { border-bottom: 0; }
    .panalytics-kpi:nth-child(2n)[b-namfu1xiz8] { border-right: 1px solid var(--d-line); }
    .panalytics-kpi:last-child[b-namfu1xiz8] { border-right: 0; }
}
.panalytics-kpi-lbl[b-namfu1xiz8] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.panalytics-kpi-dot[b-namfu1xiz8] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); }
.panalytics-kpi-dot.accent[b-namfu1xiz8] { background: var(--d-accent-grad); }
.panalytics-kpi-dot.good[b-namfu1xiz8] { background: var(--d-good); }
.panalytics-kpi-val[b-namfu1xiz8] { font-family: 'Inter Tight','Inter',sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; }
.panalytics-kpi-meta[b-namfu1xiz8] { font-size: 11.5px; color: var(--d-ink-3); }

/* Card */
.panalytics-card[b-namfu1xiz8] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
.panalytics-card-hd[b-namfu1xiz8] { padding: 14px 16px; border-bottom: 1px solid var(--d-line-2); }
.panalytics-card-hd h3[b-namfu1xiz8] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.panalytics-card-bd[b-namfu1xiz8] { padding: 16px; }

.panalytics-grid[b-namfu1xiz8] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .panalytics-grid-2[b-namfu1xiz8] { grid-template-columns: 1fr 1fr; } }

/* Bars list */
.panalytics-bars[b-namfu1xiz8] { display: flex; flex-direction: column; gap: 12px; }
.panalytics-bar-row .top[b-namfu1xiz8] { display: flex; justify-content: space-between; font-size: 12px; color: var(--d-ink-2); margin-bottom: 4px; }
.panalytics-bar-row .top .v[b-namfu1xiz8] { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--d-ink); }
.panalytics-bar-track[b-namfu1xiz8] { height: 8px; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: 999px; overflow: hidden; }
.panalytics-bar-fill[b-namfu1xiz8] { height: 100%; background: var(--d-accent-grad); transition: width .2s; }

/* Status chips */
.panalytics-chips[b-namfu1xiz8] { display: flex; flex-wrap: wrap; gap: 8px; }
.panalytics-chip[b-namfu1xiz8] {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--d-ink-2);
}
.panalytics-chip .v[b-namfu1xiz8] { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--d-accent); }

/* Alert */
.panalytics-alert[b-namfu1xiz8] {
    padding: 10px 14px;
    border-radius: var(--d-r);
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 14px;
}

.panalytics-loading[b-namfu1xiz8] { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.panalytics-loading .spin[b-namfu1xiz8] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: panalytics-spin-b-namfu1xiz8 0.8s linear infinite; }
@keyframes panalytics-spin-b-namfu1xiz8 { to { transform: rotate(360deg); } }
/* /src/Features/Partner/Pages/Partner/Api.razor.rz.scp.css */
/* Partner Api — Manager Dashboard v4 theme */
.papi-root[b-6n3vn31pqo] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a; --d-good-soft: #dcfce7;
    --d-warn: #d97706; --d-warn-soft: #fef3c7;
    --d-danger: #dc2626; --d-danger-soft: #fee2e2;
    --d-info: #1d4ed8; --d-info-soft: #dbeafe;
    --d-r: 10px;
    --d-code-bg: #1c1917;
    --d-code-fg: #86efac;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 20px 28px;
    display: flex; flex-direction: column; gap: 20px;
}

.papi-num[b-6n3vn31pqo] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Hero */
.papi-hero[b-6n3vn31pqo] {
    display: grid; grid-template-columns: 1fr auto;
    align-items: end; gap: 24px;
    padding-bottom: 14px; border-bottom: 1px solid var(--d-line);
}
.papi-hero h1[b-6n3vn31pqo] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--d-ink); line-height: 1.15;
}
.papi-hero h1 em[b-6n3vn31pqo] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.papi-hero-meta[b-6n3vn31pqo] {
    margin-top: 6px;
    color: var(--d-ink-3); font-size: 14px;
}

/* Card */
.papi-card[b-6n3vn31pqo] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
.papi-card.is-highlight[b-6n3vn31pqo] { border-color: #fed7aa; }
.papi-card-hd[b-6n3vn31pqo] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--d-line-2);
}
.papi-card-hd h3[b-6n3vn31pqo] {
    margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    display: inline-flex; align-items: center; gap: 8px;
}
.papi-card-hd .badge[b-6n3vn31pqo] {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.papi-card-bd[b-6n3vn31pqo] { padding: 14px 16px; }
.papi-card-bd p[b-6n3vn31pqo] { margin: 0 0 8px; font-size: 14px; color: var(--d-ink-2); }
.papi-card-bd p.hint[b-6n3vn31pqo] { font-size: 12px; color: var(--d-ink-3); margin-top: 8px; margin-bottom: 0; }

/* API key row */
.papi-key-row[b-6n3vn31pqo] { display: flex; gap: 10px; align-items: center; }
.papi-key-display[b-6n3vn31pqo] {
    flex: 1; min-width: 0;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--d-line); border-radius: var(--d-r);
    background: var(--d-surface-2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px; color: var(--d-ink);
    display: flex; align-items: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Buttons */
.papi-btn[b-6n3vn31pqo] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; transition: background .12s, border-color .12s;
}
.papi-btn:hover[b-6n3vn31pqo] { background: var(--d-surface-2); }
.papi-btn-icon[b-6n3vn31pqo] { width: 38px; padding: 0; justify-content: center; color: var(--d-ink-2); }
.papi-btn-accent[b-6n3vn31pqo] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}
.papi-btn-accent:hover[b-6n3vn31pqo] { background: var(--d-accent-grad-hover); color: #fff; }

/* Code block */
.papi-code[b-6n3vn31pqo] {
    display: block;
    background: var(--d-code-bg); color: var(--d-code-fg);
    border-radius: 8px;
    padding: 14px 16px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px; line-height: 1.55;
    white-space: pre; overflow-x: auto;
}
.papi-code.sm[b-6n3vn31pqo] { font-size: 11.5px; }

/* Tab pills */
.papi-tabs[b-6n3vn31pqo] { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.papi-tab[b-6n3vn31pqo] {
    height: 30px; padding: 0 12px; border-radius: 7px;
    font-size: 12.5px; font-weight: 500;
    background: var(--d-surface-2); color: var(--d-ink-2);
    border: 1px solid var(--d-line); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.papi-tab:hover[b-6n3vn31pqo] { background: var(--d-surface); color: var(--d-ink); }
.papi-tab.is-active[b-6n3vn31pqo] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18);
}

/* Endpoints table */
.papi-tbl-wrap[b-6n3vn31pqo] { overflow-x: auto; }
.papi-tbl[b-6n3vn31pqo] { width: 100%; border-collapse: collapse; font-size: 14px; }
.papi-tbl thead th[b-6n3vn31pqo] {
    font-size: 10.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: left; padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface); white-space: nowrap;
}
.papi-tbl thead th.center[b-6n3vn31pqo] { text-align: center; }
.papi-tbl tbody td[b-6n3vn31pqo] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2); vertical-align: middle;
}
.papi-tbl tbody tr:last-child td[b-6n3vn31pqo] { border-bottom: 0; }
.papi-tbl tbody tr:hover[b-6n3vn31pqo] { background: var(--d-surface-2); }
.papi-tbl td.center[b-6n3vn31pqo] { text-align: center; }
.papi-tbl td.path[b-6n3vn31pqo] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; color: var(--d-ink);
}

.papi-method[b-6n3vn31pqo] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
    display: inline-block;
}
.papi-method.get[b-6n3vn31pqo] { background: var(--d-info-soft); color: var(--d-info); }
.papi-method.post[b-6n3vn31pqo] { background: var(--d-good-soft); color: var(--d-good); }
.papi-method.put[b-6n3vn31pqo] { background: var(--d-warn-soft); color: var(--d-warn); }
.papi-method.del[b-6n3vn31pqo] { background: var(--d-danger-soft); color: var(--d-danger); }

/* Header info pair */
.papi-pair-grid[b-6n3vn31pqo] {
    display: grid; grid-template-columns: 1fr;
    gap: 10px; margin-bottom: 14px;
}
@media (min-width: 768px) { .papi-pair-grid[b-6n3vn31pqo] { grid-template-columns: 1fr 1fr; } }
.papi-pair[b-6n3vn31pqo] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px; color: var(--d-ink-2);
}
.papi-pair strong[b-6n3vn31pqo] { color: var(--d-ink); font-weight: 600; }
.papi-pair code[b-6n3vn31pqo] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; color: var(--d-accent);
    background: transparent; padding: 0; margin-left: 4px;
}

/* Endpoints list (encrypted) */
.papi-ep-list[b-6n3vn31pqo] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.papi-ep-list li[b-6n3vn31pqo] {
    font-size: 12.5px; color: var(--d-ink-2);
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.papi-ep-list code[b-6n3vn31pqo] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    background: var(--d-surface-2);
    padding: 2px 6px; border-radius: 5px;
    color: var(--d-ink);
}

.papi-section-h[b-6n3vn31pqo] {
    font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 14px 0 8px;
}

.papi-notes[b-6n3vn31pqo] {
    margin-top: 12px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 12px; color: var(--d-ink-3);
}
.papi-notes p[b-6n3vn31pqo] { margin: 0; }
/* /src/Features/Partner/Pages/Partner/Commissions.razor.rz.scp.css */
/* Partner Commissions — Manager Dashboard v4 theme */
.pcomm-root[b-u53qhgiydb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100vh;
}

.pcomm-num[b-u53qhgiydb] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.pcomm-hero[b-u53qhgiydb] { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.pcomm-hero-ico[b-u53qhgiydb] {
    width: 42px; height: 42px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}
.pcomm-hero h1[b-u53qhgiydb] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.pcomm-hero p[b-u53qhgiydb] { margin: 2px 0 0; font-size: 12.5px; color: var(--d-ink-3); }

/* Filter bar */
.pcomm-filters[b-u53qhgiydb] {
    display: flex; flex-wrap: wrap; align-items: end; gap: 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}
.pcomm-field[b-u53qhgiydb] { display: flex; flex-direction: column; gap: 4px; }
.pcomm-field-lbl[b-u53qhgiydb] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pcomm-input[b-u53qhgiydb], .pcomm-select[b-u53qhgiydb] {
    height: 34px; padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px; color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.pcomm-input:focus[b-u53qhgiydb], .pcomm-select:focus[b-u53qhgiydb] { outline: 0; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

.pcomm-btn-accent[b-u53qhgiydb] {
    height: 34px; padding: 0 16px;
    background: var(--d-accent-grad);
    color: #fff; border: 1px solid transparent;
    border-radius: var(--d-r);
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.pcomm-btn-accent:hover[b-u53qhgiydb] { background: var(--d-accent-grad-hover); }

.pcomm-alert[b-u53qhgiydb] { padding: 10px 14px; border-radius: var(--d-r); background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; font-size: 14px; }
.pcomm-empty[b-u53qhgiydb] { padding: 40px 16px; text-align: center; font-size: 14px; color: var(--d-ink-3); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); }
.pcomm-loading[b-u53qhgiydb] { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.pcomm-loading .spin[b-u53qhgiydb] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: pcomm-spin-b-u53qhgiydb 0.8s linear infinite; }
@keyframes pcomm-spin-b-u53qhgiydb { to { transform: rotate(360deg); } }

/* KPI strip */
.pcomm-kpis[b-u53qhgiydb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
@media (min-width: 1024px) { .pcomm-kpis[b-u53qhgiydb] { grid-template-columns: repeat(4, 1fr); } }
.pcomm-kpi[b-u53qhgiydb] { padding: 18px; border-right: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 8px; }
.pcomm-kpi:nth-child(2n)[b-u53qhgiydb] { border-right: 0; }
@media (min-width: 1024px) {
    .pcomm-kpi[b-u53qhgiydb] { border-bottom: 0; }
    .pcomm-kpi:nth-child(2n)[b-u53qhgiydb] { border-right: 1px solid var(--d-line); }
    .pcomm-kpi:last-child[b-u53qhgiydb] { border-right: 0; }
}
.pcomm-kpi-lbl[b-u53qhgiydb] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.pcomm-kpi-dot[b-u53qhgiydb] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); }
.pcomm-kpi-dot.accent[b-u53qhgiydb] { background: var(--d-accent-grad); }
.pcomm-kpi-dot.good[b-u53qhgiydb] { background: var(--d-good); }
.pcomm-kpi-val[b-u53qhgiydb] { font-family: 'Inter Tight','Inter',sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; }

/* Card */
.pcomm-card[b-u53qhgiydb] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.pcomm-card-hd[b-u53qhgiydb] { padding: 14px 16px; border-bottom: 1px solid var(--d-line-2); }
.pcomm-card-hd h3[b-u53qhgiydb] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pcomm-tbl-wrap[b-u53qhgiydb] { overflow-x: auto; }

/* Table */
.pcomm-tbl[b-u53qhgiydb] { width: 100%; border-collapse: collapse; font-size: 14px; }
.pcomm-tbl thead th[b-u53qhgiydb] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; }
.pcomm-tbl thead th.right[b-u53qhgiydb] { text-align: right; }
.pcomm-tbl thead th.center[b-u53qhgiydb] { text-align: center; }
.pcomm-tbl tbody td[b-u53qhgiydb] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); }
.pcomm-tbl tbody tr:last-child td[b-u53qhgiydb] { border-bottom: 0; }
.pcomm-tbl tbody tr:hover[b-u53qhgiydb] { background: var(--d-surface-2); }
.pcomm-tbl td.right[b-u53qhgiydb] { text-align: right; }
.pcomm-tbl td.center[b-u53qhgiydb] { text-align: center; }
.pcomm-tbl td.accent[b-u53qhgiydb] { color: var(--d-accent); font-weight: 600; }
.pcomm-tbl td.name[b-u53qhgiydb] { color: var(--d-ink); font-weight: 500; }
.pcomm-tbl td.num-cell[b-u53qhgiydb] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pcomm-tbl td.idx[b-u53qhgiydb] { color: var(--d-ink-4); font-size: 11px; }
/* /src/Features/Partner/Pages/Partner/Inventory.razor.rz.scp.css */
/* Partner Inventory — Manager Dashboard v4 theme */
.pinv-root[b-qaz8vh31km] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pinv-num[b-qaz8vh31km] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Hero */
.pinv-hero[b-qaz8vh31km] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.pinv-hero h1[b-qaz8vh31km] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
}
.pinv-hero h1 em[b-qaz8vh31km] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.pinv-hero-meta[b-qaz8vh31km] {
    margin-top: 6px;
    display: flex; align-items: center; gap: 12px;
    color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap;
}
.pinv-hero-meta .dot[b-qaz8vh31km] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

/* Cards grid */
.pinv-grid[b-qaz8vh31km] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}
@media (min-width: 640px) { .pinv-grid[b-qaz8vh31km] { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pinv-grid[b-qaz8vh31km] { grid-template-columns: repeat(3, 1fr); } }

.pinv-card[b-qaz8vh31km] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .12s, background .12s;
}
.pinv-card:hover[b-qaz8vh31km] { border-color: var(--d-line); background: var(--d-surface-2); }

.pinv-card-hd[b-qaz8vh31km] { display: flex; align-items: center; gap: 12px; }
.pinv-card-ico[b-qaz8vh31km] {
    width: 40px; height: 40px;
    border-radius: 9px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    display: grid; place-items: center;
    font-size: 20px;
}
.pinv-card-name[b-qaz8vh31km] { font-size: 13.5px; font-weight: 600; color: var(--d-ink); line-height: 1.2; }
.pinv-card-cat[b-qaz8vh31km] {
    font-size: 11px; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
    margin-top: 4px;
}

.pinv-card-ft[b-qaz8vh31km] {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--d-line-2);
    font-size: 12.5px; color: var(--d-ink-3);
}
.pinv-card-ft b[b-qaz8vh31km] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink); font-weight: 600; font-size: 14px;
}

.pinv-status-tag[b-qaz8vh31km] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    background: var(--d-good-soft);
    color: var(--d-good);
    font-size: 11px; font-weight: 600;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pinv-status-tag .d[b-qaz8vh31km] { width: 5px; height: 5px; border-radius: 50%; background: var(--d-good); }

/* Empty */
.pinv-empty[b-qaz8vh31km] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 48px 16px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    color: var(--d-ink-3); text-align: center;
}
.pinv-empty b[b-qaz8vh31km] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.pinv-empty small[b-qaz8vh31km] { font-size: 12px; }
/* /src/Features/Partner/Pages/Partner/Orders.razor.rz.scp.css */
/* Partner Orders — Manager Dashboard v4 theme */
.porders-root[b-1bgn5m1pmx] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.porders-num[b-1bgn5m1pmx] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Hero */
.porders-hero[b-1bgn5m1pmx] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end; gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.porders-hero h1[b-1bgn5m1pmx] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--d-ink); line-height: 1.15;
}
.porders-hero h1 em[b-1bgn5m1pmx] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.porders-hero-meta[b-1bgn5m1pmx] {
    margin-top: 6px;
    display: flex; align-items: center; gap: 12px;
    color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap;
}
.porders-hero-meta .dot[b-1bgn5m1pmx] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.porders-hero-actions[b-1bgn5m1pmx] { display: flex; align-items: center; gap: 10px; }

/* Buttons */
.porders-btn[b-1bgn5m1pmx] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; transition: background .12s, border-color .12s;
    text-decoration: none;
}
.porders-btn:hover[b-1bgn5m1pmx] { background: var(--d-surface-2); }
.porders-btn-accent[b-1bgn5m1pmx] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}
.porders-btn-accent:hover[b-1bgn5m1pmx] { background: var(--d-accent-grad-hover); color: #fff; }

/* Card */
.porders-card[b-1bgn5m1pmx] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }

/* Filter bar */
.porders-filterbar[b-1bgn5m1pmx] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}
.porders-tabs[b-1bgn5m1pmx] {
    display: inline-flex; gap: 2px;
    background: var(--d-surface-2); border: 1px solid var(--d-line);
    padding: 3px; border-radius: var(--d-r);
}
.porders-tab[b-1bgn5m1pmx] {
    height: 30px; padding: 0 14px; border-radius: 7px;
    font-size: 12.5px; font-weight: 500; color: var(--d-ink-2);
    background: transparent; border: 0; cursor: pointer; white-space: nowrap;
    transition: background .12s;
}
.porders-tab:hover[b-1bgn5m1pmx] { background: rgba(255,255,255,.6); color: var(--d-ink); }
.porders-tab.is-active[b-1bgn5m1pmx] {
    background: var(--d-accent-grad); color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,.18);
}

.porders-input[b-1bgn5m1pmx], .porders-date[b-1bgn5m1pmx] {
    height: 38px; padding: 0 12px;
    border: 1px solid var(--d-line); border-radius: var(--d-r);
    background: var(--d-surface); color: var(--d-ink);
    font-size: 14px; font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.porders-input[b-1bgn5m1pmx] { flex: 1; min-width: 180px; }
.porders-input:focus[b-1bgn5m1pmx], .porders-date:focus[b-1bgn5m1pmx] {
    outline: none; border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}
.porders-date-sep[b-1bgn5m1pmx] { color: var(--d-ink-4); font-size: 14px; }

/* Table */
.porders-tbl-wrap[b-1bgn5m1pmx] { overflow-x: auto; }
.porders-tbl[b-1bgn5m1pmx] { width: 100%; border-collapse: collapse; font-size: 14px; }
.porders-tbl thead th[b-1bgn5m1pmx] {
    font-size: 10.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: left; padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface); white-space: nowrap;
}
.porders-tbl thead th.right[b-1bgn5m1pmx] { text-align: right; }
.porders-tbl thead th.center[b-1bgn5m1pmx] { text-align: center; }
.porders-tbl tbody td[b-1bgn5m1pmx] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2); vertical-align: middle;
}
.porders-tbl tbody tr:last-child td[b-1bgn5m1pmx] { border-bottom: 0; }
.porders-tbl tbody tr:hover[b-1bgn5m1pmx] { background: var(--d-surface-2); }
.porders-tbl td.right[b-1bgn5m1pmx] { text-align: right; }
.porders-tbl td.center[b-1bgn5m1pmx] { text-align: center; }
.porders-tbl td.code[b-1bgn5m1pmx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; color: var(--d-accent);
}
.porders-tbl td.amt[b-1bgn5m1pmx] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600; color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}
.porders-svc[b-1bgn5m1pmx] { display: inline-flex; align-items: center; gap: 8px; }
.porders-stt[b-1bgn5m1pmx] { color: var(--d-ink-4); font-size: 12px; }

/* Empty */
.porders-empty[b-1bgn5m1pmx] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 48px 16px;
    color: var(--d-ink-3); text-align: center;
}
.porders-empty b[b-1bgn5m1pmx] { color: var(--d-ink); font-weight: 500; font-size: 14px; }

/* Loading */
.porders-loading[b-1bgn5m1pmx] {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 0;
}
.porders-loading .spin[b-1bgn5m1pmx] {
    width: 28px; height: 28px;
    border: 3px solid var(--d-line); border-top-color: var(--d-accent);
    border-radius: 50%; animation: porders-spin-b-1bgn5m1pmx .8s linear infinite;
}
@keyframes porders-spin-b-1bgn5m1pmx { to { transform: rotate(360deg); } }

/* Error */
.porders-err[b-1bgn5m1pmx] {
    padding: 12px 16px;
    border: 1px solid #fecaca; background: #fef2f2;
    color: #991b1b; border-radius: var(--d-r); font-size: 14px;
}
/* /src/Features/Partner/Pages/Partner/PartnerAccount.razor.rz.scp.css */
/* Partner Account — Manager Dashboard v4 theme */
.paccount-root[b-91btlszjqt] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
}

.paccount-hero[b-91btlszjqt] {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.paccount-hero-ico[b-91btlszjqt] {
    width: 42px; height: 42px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}
.paccount-hero h1[b-91btlszjqt] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--d-ink);
}
.paccount-hero p[b-91btlszjqt] { margin: 2px 0 0; font-size: 12.5px; color: var(--d-ink-3); }

.paccount-card[b-91btlszjqt] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
.paccount-card-hd[b-91btlszjqt] { padding: 14px 16px; border-bottom: 1px solid var(--d-line-2); }
.paccount-card-hd h3[b-91btlszjqt] {
    margin: 0; font-size: 11.5px; font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.paccount-card-bd[b-91btlszjqt] { padding: 18px; }

.paccount-profile-row[b-91btlszjqt] {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 18px;
}
@media (min-width: 640px) {
    .paccount-profile-row[b-91btlszjqt] { flex-direction: row; align-items: flex-start; }
}
.paccount-avatar-wrap[b-91btlszjqt] { position: relative; }
.paccount-avatar-img[b-91btlszjqt] {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--d-line);
}
.paccount-avatar-fallback[b-91btlszjqt] {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid; place-items: center;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}
.paccount-avatar-overlay[b-91btlszjqt] {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(28,25,23,0.55);
    color: #fff;
    display: grid; place-items: center;
    opacity: 0; transition: opacity .12s; cursor: pointer;
}
.paccount-avatar-wrap:hover .paccount-avatar-overlay[b-91btlszjqt] { opacity: 1; }
.paccount-change-photo[b-91btlszjqt] {
    background: transparent; border: 0;
    color: var(--d-accent);
    font-size: 11.5px; font-weight: 500;
    cursor: pointer; padding: 0;
}
.paccount-change-photo:hover[b-91btlszjqt] { color: #c2410c; text-decoration: underline; }

.paccount-name[b-91btlszjqt] { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); margin: 0; }
.paccount-email[b-91btlszjqt] { margin: 2px 0 0; font-size: 14px; color: var(--d-ink-3); }
.paccount-uploading[b-91btlszjqt] { margin: 4px 0 0; font-size: 11.5px; color: var(--d-accent); }

.paccount-alert[b-91btlszjqt] {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid;
    font-size: 14px;
    margin-bottom: 14px;
}
.paccount-alert.err[b-91btlszjqt] { background: var(--d-danger-soft); border-color: #fecaca; color: #991b1b; }
.paccount-alert.ok[b-91btlszjqt] { background: var(--d-good-soft); border-color: #bbf7d0; color: #166534; }
.paccount-alert svg[b-91btlszjqt] { flex-shrink: 0; margin-top: 1px; }

.paccount-company[b-91btlszjqt] {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    margin-bottom: 18px;
}
.paccount-company-ico[b-91btlszjqt] {
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    display: grid; place-items: center;
    font-weight: 600; font-size: 16px;
    flex-shrink: 0;
}
.paccount-company-name[b-91btlszjqt] { font-size: 14px; font-weight: 600; color: var(--d-ink); margin: 0; }
.paccount-company-meta[b-91btlszjqt] { margin: 2px 0 0; font-size: 11.5px; color: var(--d-ink-3); }
.paccount-company-meta code[b-91btlszjqt] { font-family: 'JetBrains Mono', monospace; color: var(--d-ink-2); }

.paccount-form-grid[b-91btlszjqt] { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .paccount-form-grid[b-91btlszjqt] { grid-template-columns: 1fr 1fr; } }

.paccount-field-lbl[b-91btlszjqt] {
    display: block;
    font-size: 11px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.paccount-input[b-91btlszjqt] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}
.paccount-input:focus[b-91btlszjqt] { outline: 0; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.paccount-input:disabled[b-91btlszjqt], .paccount-input.is-disabled[b-91btlszjqt] { background: var(--d-surface-2); color: var(--d-ink-3); cursor: not-allowed; pointer-events: none; }
.paccount-field-hint[b-91btlszjqt] { font-size: 11.5px; color: var(--d-ink-3); margin: 4px 0 0; }
.paccount-field-err[b-91btlszjqt] { font-size: 11.5px; color: var(--d-danger); margin: 4px 0 0; }

.paccount-actions[b-91btlszjqt] { display: flex; gap: 10px; padding-top: 14px; flex-wrap: wrap; }

.paccount-btn[b-91btlszjqt] {
    height: 38px; padding: 0 16px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px; font-weight: 500;
    color: var(--d-ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .12s, border-color .12s;
}
.paccount-btn:hover[b-91btlszjqt] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.paccount-btn-accent[b-91btlszjqt] {
    background: var(--d-accent-grad);
    color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.paccount-btn-accent:hover[b-91btlszjqt] { background: var(--d-accent-grad-hover); color: #fff; }
.paccount-btn-accent:disabled[b-91btlszjqt] { opacity: 0.6; cursor: not-allowed; }

.paccount-link-row[b-91btlszjqt] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    text-decoration: none;
    color: var(--d-ink);
    transition: background .12s;
}
.paccount-link-row:hover[b-91btlszjqt] { background: var(--d-surface-2); text-decoration: none; color: var(--d-ink); }
.paccount-link-row .lhs[b-91btlszjqt] { display: flex; align-items: center; gap: 12px; }
.paccount-link-row .ico[b-91btlszjqt] { color: var(--d-ink-3); }
.paccount-link-row p[b-91btlszjqt] { margin: 0; }
.paccount-link-row .name[b-91btlszjqt] { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.paccount-link-row .desc[b-91btlszjqt] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.paccount-link-row .chev[b-91btlszjqt] { color: var(--d-ink-4); }

.paccount-loading[b-91btlszjqt] { display: flex; align-items: center; justify-content: center; padding: 48px 0; }
.paccount-loading .spin[b-91btlszjqt] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: paccount-spin-b-91btlszjqt 0.8s linear infinite; }
@keyframes paccount-spin-b-91btlszjqt { to { transform: rotate(360deg); } }
/* /src/Features/Partner/Pages/Partner/PartnerChangePassword.razor.rz.scp.css */
/* PartnerChangePassword — Manager Dashboard v4 theme */
.pcpwd-root[b-03g2opyluo] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    outline: none;
}

/* Hero */
.pcpwd-hero[b-03g2opyluo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

.pcpwd-hero-left[b-03g2opyluo] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pcpwd-back-btn[b-03g2opyluo] {
    width: 36px;
    height: 36px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: background .12s, color .12s;
}

    .pcpwd-back-btn:hover[b-03g2opyluo] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .pcpwd-back-btn svg[b-03g2opyluo] {
        width: 14px;
        height: 14px;
    }

.pcpwd-hero-ico[b-03g2opyluo] {
    width: 38px;
    height: 38px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18);
    flex-shrink: 0;
}

    .pcpwd-hero-ico svg[b-03g2opyluo] {
        width: 18px;
        height: 18px;
    }

.pcpwd-hero h1[b-03g2opyluo] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.2;
}

.pcpwd-hero p[b-03g2opyluo] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

/* Alerts */
.pcpwd-alert[b-03g2opyluo] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--d-r);
    padding: 10px 14px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
}

    .pcpwd-alert.error[b-03g2opyluo] {
        background: #fef2f2;
        border-color: #fecaca;
    }

        .pcpwd-alert.error p[b-03g2opyluo] {
            color: var(--d-danger);
        }

        .pcpwd-alert.error svg.lead[b-03g2opyluo] {
            color: var(--d-danger);
        }

    .pcpwd-alert.success[b-03g2opyluo] {
        background: var(--d-good-soft);
        border-color: #bbf7d0;
    }

        .pcpwd-alert.success p[b-03g2opyluo] {
            color: var(--d-good);
        }

        .pcpwd-alert.success svg.lead[b-03g2opyluo] {
            color: var(--d-good);
        }

    .pcpwd-alert svg.lead[b-03g2opyluo] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .pcpwd-alert p[b-03g2opyluo] {
        flex: 1;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.4;
    }

    .pcpwd-alert button[b-03g2opyluo] {
        background: transparent;
        border: 0;
        color: var(--d-ink-4);
        cursor: pointer;
        padding: 0;
    }

        .pcpwd-alert button:hover[b-03g2opyluo] {
            color: var(--d-ink);
        }

        .pcpwd-alert button svg[b-03g2opyluo] {
            width: 14px;
            height: 14px;
        }

/* Layout */
.pcpwd-grid[b-03g2opyluo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .pcpwd-grid[b-03g2opyluo] {
        grid-template-columns: 2fr 1fr;
    }
}

/* Card */
.pcpwd-card[b-03g2opyluo] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pcpwd-card-hd[b-03g2opyluo] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    background: var(--d-surface);
}

    .pcpwd-card-hd h2[b-03g2opyluo],
    .pcpwd-card-hd h3[b-03g2opyluo] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .pcpwd-card-hd h3 svg[b-03g2opyluo] {
            width: 13px;
            height: 13px;
            color: var(--d-warn);
        }

/* Form */
.pcpwd-form-body[b-03g2opyluo] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pcpwd-field label[b-03g2opyluo] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

    .pcpwd-field label .req[b-03g2opyluo] {
        color: var(--d-danger);
        margin-left: 2px;
    }

.pcpwd-input-wrap[b-03g2opyluo] {
    position: relative;
}

.pcpwd-input[b-03g2opyluo] {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s, box-shadow .12s;
}

    .pcpwd-input[b-03g2opyluo]::placeholder {
        color: var(--d-ink-4);
    }

    .pcpwd-input:focus[b-03g2opyluo] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

    .pcpwd-input.has-error[b-03g2opyluo] {
        border-color: var(--d-danger);
    }

        .pcpwd-input.has-error:focus[b-03g2opyluo] {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
        }

    .pcpwd-input.pr-extra[b-03g2opyluo] {
        padding-right: 64px;
    }

.pcpwd-eye[b-03g2opyluo] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--d-ink-4);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .pcpwd-eye:hover[b-03g2opyluo] {
        background: var(--d-surface-2);
        color: var(--d-ink-2);
    }

.pcpwd-match[b-03g2opyluo] {
    position: absolute;
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--d-good);
}

    .pcpwd-match svg[b-03g2opyluo] {
        width: 14px;
        height: 14px;
    }

.pcpwd-err-text[b-03g2opyluo] {
    margin: 5px 0 0;
    font-size: 11.5px;
    color: var(--d-danger);
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pcpwd-err-text svg[b-03g2opyluo] {
        width: 11px;
        height: 11px;
    }

/* Strength */
.pcpwd-strength[b-03g2opyluo] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcpwd-strength-bars[b-03g2opyluo] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

    .pcpwd-strength-bars .bar[b-03g2opyluo] {
        height: 4px;
        border-radius: 999px;
        background: var(--d-line);
    }

        .pcpwd-strength-bars .bar.s1[b-03g2opyluo] {
            background: var(--d-danger);
        }

        .pcpwd-strength-bars .bar.s2[b-03g2opyluo] {
            background: var(--d-warn);
        }

        .pcpwd-strength-bars .bar.s3[b-03g2opyluo] {
            background: #0284c7;
        }

        .pcpwd-strength-bars .bar.s4[b-03g2opyluo],
        .pcpwd-strength-bars .bar.s5[b-03g2opyluo] {
            background: var(--d-good);
        }

.pcpwd-strength-label[b-03g2opyluo] {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

    .pcpwd-strength-label.s1[b-03g2opyluo] { color: var(--d-danger); }
    .pcpwd-strength-label.s2[b-03g2opyluo] { color: var(--d-warn); }
    .pcpwd-strength-label.s3[b-03g2opyluo] { color: #0284c7; }
    .pcpwd-strength-label.s4[b-03g2opyluo],
    .pcpwd-strength-label.s5[b-03g2opyluo] { color: var(--d-good); }

/* Form footer */
.pcpwd-foot[b-03g2opyluo] {
    margin-top: auto;
    padding: 12px 16px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pcpwd-hint[b-03g2opyluo] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--d-ink-3);
    font-size: 11px;
}

    .pcpwd-hint kbd[b-03g2opyluo] {
        padding: 1px 6px;
        border-radius: 4px;
        background: var(--d-surface);
        border: 1px solid var(--d-line);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        color: var(--d-ink-2);
    }

    .pcpwd-hint .sep[b-03g2opyluo] {
        color: var(--d-ink-4);
    }

.pcpwd-foot-actions[b-03g2opyluo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcpwd-btn[b-03g2opyluo] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

    .pcpwd-btn:hover[b-03g2opyluo] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

.pcpwd-btn-accent[b-03g2opyluo] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18);
}

    .pcpwd-btn-accent:hover[b-03g2opyluo] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .pcpwd-btn-accent:disabled[b-03g2opyluo] {
        background: var(--d-line);
        color: var(--d-ink-4);
        box-shadow: none;
        cursor: not-allowed;
    }

    .pcpwd-btn-accent svg[b-03g2opyluo] {
        width: 13px;
        height: 13px;
    }

.pcpwd-spin[b-03g2opyluo] {
    width: 13px;
    height: 13px;
    animation: pcpwd-spin-b-03g2opyluo .9s linear infinite;
}

@keyframes pcpwd-spin-b-03g2opyluo { to { transform: rotate(360deg); } }

/* Side panel */
.pcpwd-side[b-03g2opyluo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pcpwd-req[b-03g2opyluo] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    list-style: none;
    font-size: 12px;
}

.pcpwd-req-item[b-03g2opyluo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .pcpwd-req-item .ico[b-03g2opyluo] {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .pcpwd-req-item .ico.ok[b-03g2opyluo] {
            background: var(--d-good-soft);
            color: var(--d-good);
        }

        .pcpwd-req-item .ico.no[b-03g2opyluo] {
            background: var(--d-surface-2);
            color: var(--d-ink-4);
        }

        .pcpwd-req-item .ico svg[b-03g2opyluo] {
            width: 9px;
            height: 9px;
        }

    .pcpwd-req-item .lbl-ok[b-03g2opyluo] {
        color: var(--d-ink);
    }

    .pcpwd-req-item .lbl-no[b-03g2opyluo] {
        color: var(--d-ink-3);
    }

.pcpwd-tips[b-03g2opyluo] {
    padding: 12px 16px;
    margin: 0;
    list-style: none;
    font-size: 12px;
    color: var(--d-ink-2);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .pcpwd-tips li[b-03g2opyluo] {
        display: flex;
        gap: 8px;
    }

        .pcpwd-tips li[b-03g2opyluo]::before {
            content: '•';
            color: var(--d-ink-4);
            flex-shrink: 0;
        }
/* /src/Features/Partner/Pages/Partner/PartnerDashboard.razor.rz.scp.css */
/* Partner Dashboard — Manager Dashboard v4 theme (warm-neutral, orange accent) */
.pdash-root[b-owmcjjlmkh] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
}

.pdash-num[b-owmcjjlmkh] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Hero */
.pdash-hero[b-owmcjjlmkh] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.pdash-hero h1[b-owmcjjlmkh] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}
.pdash-hero h1 em[b-owmcjjlmkh] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.pdash-hero p[b-owmcjjlmkh] { margin: 4px 0 0; font-size: 12.5px; color: var(--d-ink-3); }

/* Tabs */
.pdash-tabs[b-owmcjjlmkh] { display: inline-flex; gap: 2px; background: var(--d-surface-2); border: 1px solid var(--d-line); padding: 3px; border-radius: var(--d-r); }
.pdash-tab[b-owmcjjlmkh] {
    height: 30px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background .12s;
}
.pdash-tab:hover[b-owmcjjlmkh] { background: rgba(255,255,255,0.6); color: var(--d-ink); }
.pdash-tab.is-active[b-owmcjjlmkh] {
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

/* KPI strip */
.pdash-kpis[b-owmcjjlmkh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
.pdash-kpi[b-owmcjjlmkh] { padding: 18px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 8px; }
.pdash-kpi:last-child[b-owmcjjlmkh] { border-right: 0; }
.pdash-kpi-lbl[b-owmcjjlmkh] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex; align-items: center; gap: 8px;
}
.pdash-kpi-dot[b-owmcjjlmkh] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); }
.pdash-kpi-dot.accent[b-owmcjjlmkh] { background: var(--d-accent-grad); }
.pdash-kpi-dot.good[b-owmcjjlmkh] { background: var(--d-good); }
.pdash-kpi-val[b-owmcjjlmkh] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px; font-weight: 600; letter-spacing: -0.03em; color: var(--d-ink);
    line-height: 1;
}
.pdash-kpi-delta[b-owmcjjlmkh] { font-size: 12px; font-weight: 500; }
.pdash-kpi-delta.up[b-owmcjjlmkh] { color: var(--d-good); }
.pdash-kpi-delta.down[b-owmcjjlmkh] { color: var(--d-danger); }

/* Card */
.pdash-card[b-owmcjjlmkh] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}
.pdash-card-hd[b-owmcjjlmkh] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line-2);
}
.pdash-card-hd h3[b-owmcjjlmkh] {
    margin: 0;
    font-size: 11.5px; font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.pdash-card-bd[b-owmcjjlmkh] { padding: 14px 16px; }

/* Grid */
.pdash-grid[b-owmcjjlmkh] { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.pdash-col-3[b-owmcjjlmkh] { grid-column: span 12; }
.pdash-col-4[b-owmcjjlmkh] { grid-column: span 12; }
.pdash-col-7[b-owmcjjlmkh] { grid-column: span 12; }
.pdash-col-8[b-owmcjjlmkh] { grid-column: span 12; }
@media (min-width: 1024px) {
    .pdash-col-3[b-owmcjjlmkh] { grid-column: span 4; }
    .pdash-col-4[b-owmcjjlmkh] { grid-column: span 4; }
    .pdash-col-7[b-owmcjjlmkh] { grid-column: span 7; }
    .pdash-col-8[b-owmcjjlmkh] { grid-column: span 8; }
}

/* Table */
.pdash-tbl[b-owmcjjlmkh] { width: 100%; border-collapse: collapse; font-size: 14px; }
.pdash-tbl thead th[b-owmcjjlmkh] {
    font-size: 10.5px; font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
}
.pdash-tbl thead th.right[b-owmcjjlmkh] { text-align: right; }
.pdash-tbl tbody td[b-owmcjjlmkh] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
}
.pdash-tbl tbody tr:last-child td[b-owmcjjlmkh] { border-bottom: 0; }
.pdash-tbl tbody tr:hover[b-owmcjjlmkh] { background: var(--d-surface-2); }
.pdash-tbl td.right[b-owmcjjlmkh] { text-align: right; }
.pdash-tbl td.name[b-owmcjjlmkh] { color: var(--d-ink); font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* API quota progress */
.pdash-quota-bar[b-owmcjjlmkh] { height: 8px; background: var(--d-surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--d-line); }
.pdash-quota-fill[b-owmcjjlmkh] { height: 100%; background: var(--d-accent-grad); transition: width .2s; }
.pdash-quota-pct[b-owmcjjlmkh] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 6px; }

/* Quota meta list */
.pdash-meta-list[b-owmcjjlmkh] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pdash-meta-list li[b-owmcjjlmkh] { display: flex; justify-content: space-between; align-items: baseline; }
.pdash-meta-list .lbl[b-owmcjjlmkh] { color: var(--d-ink-3); }
.pdash-meta-list .val[b-owmcjjlmkh] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; color: var(--d-ink); font-size: 14px; }
.pdash-meta-list .unit[b-owmcjjlmkh] { color: var(--d-ink-3); font-size: 11px; font-weight: 500; margin-left: 4px; }

/* Empty / loading */
.pdash-empty[b-owmcjjlmkh] { padding: 40px 16px; text-align: center; color: var(--d-ink-3); font-size: 12.5px; }
.pdash-loading[b-owmcjjlmkh] { display: flex; align-items: center; justify-content: center; padding: 40px 0; color: var(--d-ink-3); }
.pdash-loading .spin[b-owmcjjlmkh] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: pdash-spin-b-owmcjjlmkh 0.8s linear infinite; }
@keyframes pdash-spin-b-owmcjjlmkh { to { transform: rotate(360deg); } }
/* /src/Features/Partner/Pages/Partner/PartnerEmployees.razor.rz.scp.css */
/* PartnerEmployees — Manager Dashboard v4 theme */
.pemp-root[b-h4mv7qv0jf] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-r: 10px;
    color: var(--d-ink);
}

.pemp-hero[b-h4mv7qv0jf] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.pemp-hero h1[b-h4mv7qv0jf] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}
.pemp-hero h1 em[b-h4mv7qv0jf] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.pemp-hero-meta[b-h4mv7qv0jf] { margin-top: 6px; display: flex; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; align-items: center; }
.pemp-hero-meta .dot[b-h4mv7qv0jf] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.pemp-hero-actions[b-h4mv7qv0jf] { display: flex; gap: 10px; align-items: center; }

.pemp-btn[b-h4mv7qv0jf] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}
.pemp-btn:hover[b-h4mv7qv0jf] { background: var(--d-surface-2); color: var(--d-ink); }
.pemp-btn-accent[b-h4mv7qv0jf] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.pemp-btn-accent:hover[b-h4mv7qv0jf] { background: var(--d-accent-grad-hover); color: #fff; border-color: transparent; }
.pemp-btn-accent:disabled[b-h4mv7qv0jf] { opacity: .55; cursor: not-allowed; }

.pemp-card[b-h4mv7qv0jf] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.pemp-toolbar[b-h4mv7qv0jf] { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--d-line-2); flex-wrap: wrap; }
.pemp-input[b-h4mv7qv0jf], .pemp-select[b-h4mv7qv0jf] {
    height: 38px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    padding: 0 12px;
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.pemp-input[b-h4mv7qv0jf] { flex: 1; min-width: 200px; }
.pemp-input:focus[b-h4mv7qv0jf], .pemp-select:focus[b-h4mv7qv0jf] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,0.12);
}

.pemp-tbl[b-h4mv7qv0jf] { width: 100%; border-collapse: collapse; font-size: 14px; }
.pemp-tbl thead th[b-h4mv7qv0jf] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    white-space: nowrap;
}
.pemp-tbl thead th.right[b-h4mv7qv0jf] { text-align: right; }
.pemp-tbl thead th.center[b-h4mv7qv0jf] { text-align: center; }
.pemp-tbl tbody td[b-h4mv7qv0jf] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    color: var(--d-ink-2);
    vertical-align: middle;
}
.pemp-tbl tbody tr:last-child td[b-h4mv7qv0jf] { border-bottom: 0; }
.pemp-tbl tbody tr:hover[b-h4mv7qv0jf] { background: var(--d-surface-2); }
.pemp-tbl td.right[b-h4mv7qv0jf] { text-align: right; }
.pemp-tbl td.center[b-h4mv7qv0jf] { text-align: center; }
.pemp-name[b-h4mv7qv0jf] { font-weight: 500; color: var(--d-ink); }

.pemp-status[b-h4mv7qv0jf] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.pemp-status.good[b-h4mv7qv0jf] { background: var(--d-good-soft); color: var(--d-good); }
.pemp-status.muted[b-h4mv7qv0jf] { background: var(--d-surface-2); color: var(--d-ink-3); }

.pemp-row-actions[b-h4mv7qv0jf] { display: inline-flex; gap: 4px; }
.pemp-icn-btn[b-h4mv7qv0jf] {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--d-ink-3);
    display: inline-grid; place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.pemp-icn-btn:hover[b-h4mv7qv0jf] { background: var(--d-surface-2); color: var(--d-ink); }
.pemp-icn-btn.danger:hover[b-h4mv7qv0jf] { color: #dc2626; }

.pemp-loading[b-h4mv7qv0jf], .pemp-empty[b-h4mv7qv0jf] {
    padding: 40px 16px;
    text-align: center;
    color: var(--d-ink-3);
    font-size: 14px;
}

.pemp-modal-back[b-h4mv7qv0jf] {
    position: fixed; inset: 0;
    background: rgba(28,25,23,0.42);
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
    padding: 16px;
}
.pemp-modal[b-h4mv7qv0jf] {
    background: var(--d-surface);
    border-radius: 14px;
    border: 1px solid var(--d-line);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 50px -10px rgba(28,25,23,0.25);
    overflow: hidden;
}
.pemp-modal-hd[b-h4mv7qv0jf] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line-2);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
}
.pemp-modal-bd[b-h4mv7qv0jf] { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pemp-modal-ft[b-h4mv7qv0jf] {
    padding: 12px 18px;
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    display: flex; justify-content: flex-end; gap: 8px;
}
.pemp-error[b-h4mv7qv0jf] { color: #dc2626; font-size: 12.5px; }
.pemp-check[b-h4mv7qv0jf] { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--d-ink-2); }
/* /src/Features/Partner/Pages/Partner/PartnerLoginHistory.razor.rz.scp.css */
/* PartnerLoginHistory — Manager Dashboard v4 theme */
.plhist-root[b-w9s2o0c8bm] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Hero */
.plhist-hero[b-w9s2o0c8bm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    align-items: center;
}

@media (min-width: 768px) {
    .plhist-hero[b-w9s2o0c8bm] {
        grid-template-columns: 1fr auto;
    }
}

.plhist-hero-left[b-w9s2o0c8bm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plhist-hero-ico[b-w9s2o0c8bm] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .plhist-hero-ico svg[b-w9s2o0c8bm] {
        width: 20px;
        height: 20px;
    }

.plhist-hero h1[b-w9s2o0c8bm] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.2;
}

.plhist-hero p[b-w9s2o0c8bm] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.plhist-hero-actions[b-w9s2o0c8bm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.plhist-btn[b-w9s2o0c8bm] {
    height: 36px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .plhist-btn:hover[b-w9s2o0c8bm] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .plhist-btn svg[b-w9s2o0c8bm] {
        width: 13px;
        height: 13px;
    }

/* Card */
.plhist-card[b-w9s2o0c8bm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.plhist-loading[b-w9s2o0c8bm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.plhist-empty[b-w9s2o0c8bm] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--d-ink-3);
}

    .plhist-empty svg[b-w9s2o0c8bm] {
        width: 42px;
        height: 42px;
        color: var(--d-ink-4);
        margin: 0 auto 10px;
    }

    .plhist-empty p[b-w9s2o0c8bm] {
        font-size: 14px;
        margin: 0;
    }

/* Rows */
.plhist-list > * + *[b-w9s2o0c8bm] {
    border-top: 1px solid var(--d-line-2);
}

.plhist-row[b-w9s2o0c8bm] {
    padding: 14px 18px;
    transition: background .12s;
}

    .plhist-row:hover[b-w9s2o0c8bm] {
        background: var(--d-surface-2);
    }

.plhist-row-inner[b-w9s2o0c8bm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.plhist-status-ico[b-w9s2o0c8bm] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .plhist-status-ico.good[b-w9s2o0c8bm] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

    .plhist-status-ico.bad[b-w9s2o0c8bm] {
        background: #fee2e2;
        color: var(--d-danger);
    }

    .plhist-status-ico svg[b-w9s2o0c8bm] {
        width: 18px;
        height: 18px;
    }

.plhist-row-body[b-w9s2o0c8bm] {
    flex: 1;
    min-width: 0;
}

.plhist-row-top[b-w9s2o0c8bm] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 4px;
}

@media (min-width: 640px) {
    .plhist-row-top[b-w9s2o0c8bm] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

.plhist-row-title[b-w9s2o0c8bm] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    margin: 0;
}

.plhist-row-time[b-w9s2o0c8bm] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.plhist-meta[b-w9s2o0c8bm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

    .plhist-meta p[b-w9s2o0c8bm] {
        margin: 0;
    }

    .plhist-meta .ua[b-w9s2o0c8bm] {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--d-ink-4);
    }

.plhist-pager[b-w9s2o0c8bm] {
    padding: 12px 16px;
    border-top: 1px solid var(--d-line);
}
/* /src/Features/Partner/Pages/Partner/PartnerNews.razor.rz.scp.css */
/* PartnerNews — Manager Dashboard v4 theme */
.pnews-root[b-rwam5shgwu] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.pnews-shell[b-rwam5shgwu] { display: flex; flex-direction: column; height: calc(100vh - 64px); padding: 18px 28px; gap: 16px; }

.pnews-alert[b-rwam5shgwu] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; }
.pnews-alert.err[b-rwam5shgwu] { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.pnews-alert.ok[b-rwam5shgwu] { background: var(--d-good-soft); color: #15803d; border: 1px solid #bbf7d0; }

.pnews-hero[b-rwam5shgwu] { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); flex-wrap: wrap; }
.pnews-hero h1[b-rwam5shgwu] { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.pnews-hero h1 em[b-rwam5shgwu] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.pnews-hero-meta[b-rwam5shgwu] { margin-top: 6px; display: flex; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; align-items: center; }
.pnews-hero-meta .dot[b-rwam5shgwu] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.pnews-kpis[b-rwam5shgwu] { display: flex; gap: 8px; }
.pnews-kpi[b-rwam5shgwu] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 8px 14px; min-width: 86px; text-align: center; }
.pnews-kpi b[b-rwam5shgwu] { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--d-ink); display: block; line-height: 1.1; }
.pnews-kpi small[b-rwam5shgwu] { font-size: 10px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-top: 4px; }
.pnews-kpi.accent[b-rwam5shgwu] { background: var(--d-accent-grad); border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18); }
.pnews-kpi.accent b[b-rwam5shgwu], .pnews-kpi.accent small[b-rwam5shgwu] { color: #fff; }

.pnews-toolbar[b-rwam5shgwu] { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pnews-input[b-rwam5shgwu], .pnews-select[b-rwam5shgwu] {
    height: 38px; border: 1px solid var(--d-line); border-radius: var(--d-r);
    background: var(--d-surface); padding: 0 12px; font-size: 14px; color: var(--d-ink);
    outline: none; transition: border-color .12s, box-shadow .12s;
}
.pnews-input:focus[b-rwam5shgwu], .pnews-select:focus[b-rwam5shgwu] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.pnews-input[b-rwam5shgwu] { min-width: 220px; }

.pnews-btn[b-rwam5shgwu] { height: 38px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s; }
.pnews-btn:hover[b-rwam5shgwu] { background: var(--d-surface-2); color: var(--d-ink); }
.pnews-btn-accent[b-rwam5shgwu] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.pnews-btn-accent:hover[b-rwam5shgwu] { background: var(--d-accent-grad-hover); color: #fff; border-color: transparent; }
.pnews-btn-accent:disabled[b-rwam5shgwu] { opacity: .55; cursor: not-allowed; }

.pnews-card[b-rwam5shgwu] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pnews-card-body[b-rwam5shgwu] { overflow: auto; flex: 1; min-height: 0; }

.pnews-loading[b-rwam5shgwu] { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.pnews-spinner[b-rwam5shgwu] { width: 28px; height: 28px; border: 3px solid var(--d-accent); border-top-color: transparent; border-radius: 50%; animation: pnews-spin-b-rwam5shgwu 0.8s linear infinite; }
@keyframes pnews-spin-b-rwam5shgwu { to { transform: rotate(360deg); } }

.pnews-tbl[b-rwam5shgwu] { width: 100%; border-collapse: collapse; font-size: 14px; }
.pnews-tbl thead th[b-rwam5shgwu] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.pnews-tbl thead th.center[b-rwam5shgwu] { text-align: center; }
.pnews-tbl thead th.right[b-rwam5shgwu] { text-align: right; }
.pnews-tbl tbody td[b-rwam5shgwu] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.pnews-tbl tbody tr:hover[b-rwam5shgwu] { background: var(--d-surface-2); }
.pnews-tbl td.center[b-rwam5shgwu] { text-align: center; }
.pnews-tbl td.right[b-rwam5shgwu] { text-align: right; }
.pnews-row-num[b-rwam5shgwu] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--d-ink-4); }
.pnews-title[b-rwam5shgwu] { font-weight: 500; color: var(--d-ink); }
.pnews-slug[b-rwam5shgwu] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }

.pnews-stat[b-rwam5shgwu] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.pnews-stat.published[b-rwam5shgwu] { background: var(--d-good-soft); color: var(--d-good); }
.pnews-stat.draft[b-rwam5shgwu] { background: var(--d-warn-soft); color: var(--d-warn); }
.pnews-stat.archived[b-rwam5shgwu] { background: var(--d-surface-2); color: var(--d-ink-3); }

.pnews-icn-btn[b-rwam5shgwu] { width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--d-ink-3); display: inline-grid; place-items: center; cursor: pointer; transition: background .12s, color .12s; }
.pnews-icn-btn:hover[b-rwam5shgwu] { background: var(--d-surface-2); color: var(--d-ink); }
.pnews-icn-btn.danger:hover[b-rwam5shgwu] { color: var(--d-danger); }
.pnews-icn-btn.good:hover[b-rwam5shgwu] { color: var(--d-good); }
.pnews-icn-btn.warn:hover[b-rwam5shgwu] { color: var(--d-warn); }
.pnews-icn-sep[b-rwam5shgwu] { display: inline-block; width: 1px; height: 16px; background: var(--d-line); margin: 0 2px; vertical-align: middle; }

.pnews-empty[b-rwam5shgwu] { padding: 40px 16px; text-align: center; color: var(--d-ink-3); font-size: 14px; }

/* ─── Modals ─── */
.pnews-modal-back[b-rwam5shgwu] { position: fixed; inset: 0; background: rgba(28,25,23,0.5); z-index: 50; overflow-y: auto; padding: 24px 8px; display: flex; justify-content: center; align-items: flex-start; }
.pnews-modal[b-rwam5shgwu] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 14px; box-shadow: 0 20px 50px -10px rgba(28,25,23,0.3); width: 100%; max-width: 1100px; display: flex; flex-direction: column; overflow: hidden; }
.pnews-modal.sm[b-rwam5shgwu] { max-width: 760px; }
.pnews-modal-hd[b-rwam5shgwu] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--d-line-2); }
.pnews-modal-title[b-rwam5shgwu] { font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--d-ink); letter-spacing: -0.02em; }
.pnews-modal-title .sub[b-rwam5shgwu] { color: var(--d-ink-3); font-weight: 400; margin-left: 8px; font-size: 14px; }
.pnews-modal-x[b-rwam5shgwu] { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 0; background: transparent; color: var(--d-ink-3); cursor: pointer; }
.pnews-modal-x:hover[b-rwam5shgwu] { background: var(--d-surface-2); color: var(--d-ink); }

.pnews-tabs[b-rwam5shgwu] { display: flex; padding: 0 20px; border-bottom: 1px solid var(--d-line-2); }
.pnews-tab[b-rwam5shgwu] { padding: 12px 14px; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--d-ink-3); cursor: pointer; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.pnews-tab:hover[b-rwam5shgwu] { color: var(--d-ink); }
.pnews-tab.active[b-rwam5shgwu] { color: var(--d-accent); border-bottom-color: var(--d-accent); }

.pnews-modal-body[b-rwam5shgwu] { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.pnews-label[b-rwam5shgwu] { display: block; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.pnews-label .req[b-rwam5shgwu] { color: var(--d-danger); margin-left: 2px; }
.pnews-textarea[b-rwam5shgwu] { width: 100%; border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 8px 12px; font-size: 14px; color: var(--d-ink); outline: none; resize: vertical; transition: border-color .12s, box-shadow .12s; }
.pnews-textarea:focus[b-rwam5shgwu] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.pnews-helper[b-rwam5shgwu] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 4px; }

.pnews-grid[b-rwam5shgwu] { display: grid; gap: 14px; }
.pnews-grid.cols-2[b-rwam5shgwu] { grid-template-columns: 1fr; }
.pnews-grid.cols-3[b-rwam5shgwu] { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .pnews-grid.cols-2[b-rwam5shgwu] { grid-template-columns: 1fr 1fr; }
    .pnews-grid.cols-3[b-rwam5shgwu] { grid-template-columns: 1fr 1fr 1fr; }
}

.pnews-uploader[b-rwam5shgwu] { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 110px; border: 2px dashed var(--d-line); border-radius: var(--d-r); cursor: pointer; color: var(--d-ink-3); transition: border-color .12s, background .12s; }
.pnews-uploader:hover[b-rwam5shgwu] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.pnews-uploader.busy[b-rwam5shgwu] { pointer-events: none; opacity: .6; }
.pnews-uploader small[b-rwam5shgwu] { font-size: 11px; margin-top: 4px; color: var(--d-ink-4); }
.pnews-uploader-row[b-rwam5shgwu] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--d-accent); }

.pnews-cover-preview[b-rwam5shgwu] { position: relative; }
.pnews-cover-preview img[b-rwam5shgwu] { width: 100%; height: 110px; object-fit: cover; border-radius: var(--d-r); border: 1px solid var(--d-line); display: block; }
.pnews-cover-preview button[b-rwam5shgwu] { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(28,25,23,0.6); color: #fff; cursor: pointer; }
.pnews-cover-preview button:hover[b-rwam5shgwu] { background: var(--d-danger); }

.pnews-tip[b-rwam5shgwu] { background: var(--d-accent-soft); border: 1px solid #fed7aa; border-radius: var(--d-r); padding: 10px 14px; font-size: 14px; color: #9a3412; }
.pnews-bg-soft[b-rwam5shgwu] { background: var(--d-surface-2); border-radius: var(--d-r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pnews-bg-soft h5[b-rwam5shgwu] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pnews-checks[b-rwam5shgwu] { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--d-ink-2); }
.pnews-checks label[b-rwam5shgwu] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

.pnews-modal-ft[b-rwam5shgwu] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--d-line-2); background: var(--d-surface-2); flex-wrap: wrap; }
.pnews-modal-hint[b-rwam5shgwu] { font-size: 11.5px; color: var(--d-ink-3); }

.pnews-cat-add[b-rwam5shgwu] { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; }
@media (max-width: 640px) { .pnews-cat-add[b-rwam5shgwu] { grid-template-columns: 1fr; } }

.pnews-spinner-sm[b-rwam5shgwu] { width: 14px; height: 14px; border: 2px solid var(--d-accent); border-top-color: transparent; border-radius: 50%; animation: pnews-spin-b-rwam5shgwu 0.8s linear infinite; display: inline-block; }
/* /src/Features/Partner/Pages/Partner/PartnerNewsPreview.razor.rz.scp.css */
/* PartnerNewsPreview — Manager Dashboard v4 theme */
.pnewsprev-root[b-1fe9e71mij] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pnewsprev-loading[b-1fe9e71mij] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.pnewsprev-spinner[b-1fe9e71mij] {
    width: 32px;
    height: 32px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pnewsprev-spin-b-1fe9e71mij .9s linear infinite;
}

@keyframes pnewsprev-spin-b-1fe9e71mij { to { transform: rotate(360deg); } }

.pnewsprev-notfound[b-1fe9e71mij] {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

    .pnewsprev-notfound h2[b-1fe9e71mij] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        margin: 0 0 6px;
    }

    .pnewsprev-notfound p[b-1fe9e71mij] {
        color: var(--d-ink-3);
        font-size: 14px;
        margin: 0 0 14px;
    }

.pnewsprev-banner[b-1fe9e71mij] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-left: 3px solid var(--d-warn);
    border-radius: var(--d-r);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 640px) {
    .pnewsprev-banner[b-1fe9e71mij] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.pnewsprev-banner-left[b-1fe9e71mij] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pnewsprev-banner-left svg[b-1fe9e71mij] {
        width: 18px;
        height: 18px;
        color: var(--d-warn);
        flex-shrink: 0;
    }

.pnewsprev-banner-title[b-1fe9e71mij] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink);
}

.pnewsprev-banner-meta[b-1fe9e71mij] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-left: 8px;
}

.pnewsprev-status-pill[b-1fe9e71mij] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    margin-left: 6px;
    letter-spacing: 0.02em;
}

    .pnewsprev-status-pill.draft[b-1fe9e71mij] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
    }

    .pnewsprev-status-pill.published[b-1fe9e71mij] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

    .pnewsprev-status-pill.archived[b-1fe9e71mij] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

.pnewsprev-banner-actions[b-1fe9e71mij] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pnewsprev-btn[b-1fe9e71mij] {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .pnewsprev-btn:hover[b-1fe9e71mij] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .pnewsprev-btn:disabled[b-1fe9e71mij] {
        opacity: .55;
        cursor: not-allowed;
    }

.pnewsprev-btn-accent[b-1fe9e71mij] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .pnewsprev-btn-accent:hover[b-1fe9e71mij] {
        color: #fff;
    }

.pnewsprev-btn-good[b-1fe9e71mij] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}

    .pnewsprev-btn-good:hover[b-1fe9e71mij] {
        background: #15803d;
        color: #fff;
    }

.pnewsprev-card[b-1fe9e71mij] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.pnewsprev-subnav[b-1fe9e71mij] {
    border-bottom: 1px solid var(--d-line);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    background: var(--d-surface);
}

.pnewsprev-brand[b-1fe9e71mij] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

    .pnewsprev-brand img[b-1fe9e71mij] {
        height: 28px;
        width: auto;
        object-fit: contain;
    }

.pnewsprev-brand-name[b-1fe9e71mij] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

    .pnewsprev-brand-name b[b-1fe9e71mij] {
        font-size: 12.5px;
        font-weight: 700;
        color: var(--d-ink);
    }

    .pnewsprev-brand-name small[b-1fe9e71mij] {
        font-size: 10.5px;
        color: var(--d-ink-3);
    }

.pnewsprev-divider[b-1fe9e71mij] {
    width: 1px;
    height: 22px;
    background: var(--d-line);
    flex-shrink: 0;
}

.pnewsprev-section-tag[b-1fe9e71mij] {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-accent);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.pnewsprev-crumbs[b-1fe9e71mij] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .pnewsprev-crumbs .sep[b-1fe9e71mij] {
        color: var(--d-ink-4);
    }

    .pnewsprev-crumbs .current[b-1fe9e71mij] {
        color: var(--d-ink);
        font-weight: 500;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.pnewsprev-body[b-1fe9e71mij] {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 24px 28px;
}

.pnewsprev-cover[b-1fe9e71mij] {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
    height: 260px;
}

@media (min-width: 768px) {
    .pnewsprev-cover[b-1fe9e71mij] {
        height: 380px;
    }
}

    .pnewsprev-cover img[b-1fe9e71mij] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pnewsprev-cover-placeholder[b-1fe9e71mij] {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
    height: 200px;
    background: var(--d-accent-grad);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pnewsprev-cover-placeholder svg[b-1fe9e71mij] {
        width: 56px;
        height: 56px;
        color: rgba(255, 255, 255, 0.45);
    }

.pnewsprev-meta-row[b-1fe9e71mij] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pnewsprev-cat[b-1fe9e71mij] {
    display: inline-block;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18);
}

.pnewsprev-featured[b-1fe9e71mij] {
    display: inline-block;
    background: var(--d-warn-soft);
    color: var(--d-warn);
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pnewsprev-meta-info[b-1fe9e71mij] {
    font-size: 12px;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .pnewsprev-meta-info svg[b-1fe9e71mij] {
        width: 14px;
        height: 14px;
    }

.pnewsprev-title[b-1fe9e71mij] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.2;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .pnewsprev-title[b-1fe9e71mij] {
        font-size: 36px;
    }
}

.pnewsprev-summary[b-1fe9e71mij] {
    font-size: 16px;
    color: var(--d-ink-2);
    line-height: 1.6;
    border-left: 3px solid var(--d-accent);
    padding-left: 14px;
    font-style: italic;
    margin: 0 0 22px;
}

.pnewsprev-share[b-1fe9e71mij] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0;
    padding: 14px 0;
    border-top: 1px solid var(--d-line-2);
    border-bottom: 1px solid var(--d-line-2);
    flex-wrap: wrap;
}

.pnewsprev-share-label[b-1fe9e71mij] {
    font-size: 12px;
    color: var(--d-ink-3);
    font-weight: 500;
}

.pnewsprev-share-btn[b-1fe9e71mij] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    font-size: 12px;
    border-radius: 8px;
    cursor: not-allowed;
    border: 1px solid var(--d-line);
}

    .pnewsprev-share-btn svg[b-1fe9e71mij] {
        width: 14px;
        height: 14px;
    }

.pnewsprev-content[b-1fe9e71mij] {
    font-size: 15px;
    line-height: 1.75;
    color: var(--d-ink-2);
}

    .pnewsprev-content :is(h1, h2, h3, h4, h5, h6)[b-1fe9e71mij] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        color: var(--d-ink);
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .pnewsprev-content a[b-1fe9e71mij] {
        color: var(--d-accent);
        text-decoration: none;
    }

        .pnewsprev-content a:hover[b-1fe9e71mij] {
            text-decoration: underline;
        }

    .pnewsprev-content img[b-1fe9e71mij] {
        border-radius: 10px;
        max-width: 100%;
    }

    .pnewsprev-content blockquote[b-1fe9e71mij] {
        border-left: 3px solid var(--d-accent);
        color: var(--d-ink-3);
        font-style: italic;
        padding-left: 14px;
        margin: 14px 0;
    }

    .pnewsprev-content code[b-1fe9e71mij] {
        background: var(--d-surface-2);
        padding: 1px 5px;
        border-radius: 4px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 14px;
    }

.pnewsprev-tags[b-1fe9e71mij] {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--d-line-2);
}

.pnewsprev-tags-label[b-1fe9e71mij] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-3);
    margin-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pnewsprev-tag[b-1fe9e71mij] {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 3px 10px;
    font-size: 12px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-radius: 999px;
    border: 1px solid var(--d-line);
}

.pnewsprev-seo[b-1fe9e71mij] {
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
    padding: 18px 22px;
}

.pnewsprev-seo-hd[b-1fe9e71mij] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pnewsprev-seo-hd svg[b-1fe9e71mij] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

.pnewsprev-seo-card[b-1fe9e71mij] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    max-width: 640px;
}

.pnewsprev-seo-title[b-1fe9e71mij] {
    font-size: 16px;
    color: #1a0dab;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pnewsprev-seo-title:hover[b-1fe9e71mij] {
        text-decoration: underline;
    }

.pnewsprev-seo-url[b-1fe9e71mij] {
    font-size: 12.5px;
    color: #006621;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pnewsprev-seo-desc[b-1fe9e71mij] {
    font-size: 12.5px;
    color: var(--d-ink-2);
    margin-top: 4px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pnewsprev-seo-grid[b-1fe9e71mij] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
    font-size: 12.5px;
}

@media (min-width: 768px) {
    .pnewsprev-seo-grid[b-1fe9e71mij] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pnewsprev-seo-key[b-1fe9e71mij] {
    font-weight: 600;
    color: var(--d-ink-2);
}

.pnewsprev-seo-val[b-1fe9e71mij] {
    color: var(--d-ink-3);
    margin-left: 4px;
}

.pnewsprev-error[b-1fe9e71mij] {
    margin-top: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--d-danger);
    border-radius: var(--d-r);
    padding: 10px 14px;
    font-size: 14px;
}
/* /src/Features/Partner/Pages/Partner/PartnerPaymentReturn.razor.rz.scp.css */
/* PartnerPaymentReturn — Manager Dashboard v4 theme */
.ppr-root[b-ozwfa0hki3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Hero */
.ppr-hero[b-ozwfa0hki3] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .ppr-hero h1[b-ozwfa0hki3] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.2;
    }

    .ppr-hero p[b-ozwfa0hki3] {
        margin: 4px 0 0;
        color: var(--d-ink-3);
        font-size: 12.5px;
    }

.ppr-hero-ico[b-ozwfa0hki3] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--d-accent-grad);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ppr-hero-ico svg[b-ozwfa0hki3] {
        width: 20px;
        height: 20px;
    }

.ppr-hero-left[b-ozwfa0hki3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Container */
.ppr-wrap[b-ozwfa0hki3] {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.ppr-card[b-ozwfa0hki3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 28px 26px;
}

.ppr-state-icon[b-ozwfa0hki3] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
}

    .ppr-state-icon.good[b-ozwfa0hki3] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

    .ppr-state-icon.bad[b-ozwfa0hki3] {
        background: #fee2e2;
        color: var(--d-danger);
    }

    .ppr-state-icon.muted[b-ozwfa0hki3] {
        background: var(--d-surface-2);
        color: var(--d-ink-4);
    }

    .ppr-state-icon.accent[b-ozwfa0hki3] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .ppr-state-icon svg[b-ozwfa0hki3] {
        width: 32px;
        height: 32px;
    }

.ppr-state-h[b-ozwfa0hki3] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

.ppr-state-sub[b-ozwfa0hki3] {
    text-align: center;
    color: var(--d-ink-3);
    font-size: 14px;
    margin: 0 0 22px;
}

.ppr-spinner[b-ozwfa0hki3] {
    width: 56px;
    height: 56px;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    margin: 0 auto 18px;
    animation: ppr-spin-b-ozwfa0hki3 .9s linear infinite;
}

@keyframes ppr-spin-b-ozwfa0hki3 { to { transform: rotate(360deg); } }

.ppr-attempt-row[b-ozwfa0hki3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
}

    .ppr-attempt-row .pulse[b-ozwfa0hki3] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--d-accent);
        animation: ppr-bounce-b-ozwfa0hki3 1s infinite;
    }

@keyframes ppr-bounce-b-ozwfa0hki3 {
    0%, 80%, 100% { transform: scale(0.6); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Code chips */
.ppr-codes[b-ozwfa0hki3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ppr-code-chip[b-ozwfa0hki3] {
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    border-radius: 11px;
    padding: 10px 22px;
    text-align: center;
}

    .ppr-code-chip .lbl[b-ozwfa0hki3] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-accent);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 2px;
    }

    .ppr-code-chip .val[b-ozwfa0hki3] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 19px;
        font-weight: 700;
        color: var(--d-accent);
        letter-spacing: 0.08em;
    }

    .ppr-code-chip.good[b-ozwfa0hki3] {
        background: var(--d-good-soft);
        border-color: #bbf7d0;
    }

        .ppr-code-chip.good .lbl[b-ozwfa0hki3] {
            color: var(--d-good);
        }

        .ppr-code-chip.good .val[b-ozwfa0hki3] {
            color: var(--d-good);
        }

.ppr-pnr-list[b-ozwfa0hki3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ppr-pnr-item[b-ozwfa0hki3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ppr-pnr-item .pnr[b-ozwfa0hki3] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-good);
        letter-spacing: 0.08em;
    }

    .ppr-pnr-item .seg[b-ozwfa0hki3] {
        font-size: 10.5px;
        padding: 2px 6px;
        background: #bbf7d0;
        color: #166534;
        border-radius: 6px;
        font-weight: 500;
    }

/* Detail strip */
.ppr-strip[b-ozwfa0hki3] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    margin-bottom: 22px;
}

.ppr-strip-grid[b-ozwfa0hki3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (min-width: 768px) {
    .ppr-strip-grid[b-ozwfa0hki3] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ppr-cell .lbl[b-ozwfa0hki3] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 3px;
}

.ppr-cell .val[b-ozwfa0hki3] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

    .ppr-cell .val.mono[b-ozwfa0hki3] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

/* Service section wrapper */
.ppr-service[b-ozwfa0hki3] {
    margin-bottom: 22px;
}

/* Payment summary */
.ppr-summary[b-ozwfa0hki3] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    margin-bottom: 22px;
}

    .ppr-summary h3[b-ozwfa0hki3] {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 0 0 10px;
    }

.ppr-sum-row[b-ozwfa0hki3] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

    .ppr-sum-row.total[b-ozwfa0hki3] {
        border-top: 1px solid var(--d-line);
        padding-top: 8px;
        margin-top: 4px;
        font-weight: 600;
    }

        .ppr-sum-row.total .v[b-ozwfa0hki3] {
            color: var(--d-accent);
            font-size: 15px;
            font-family: 'Inter Tight', 'Inter', sans-serif;
            letter-spacing: -0.02em;
        }

/* Buttons */
.ppr-actions[b-ozwfa0hki3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 640px) {
    .ppr-actions[b-ozwfa0hki3] {
        flex-direction: row;
    }
}

.ppr-btn[b-ozwfa0hki3] {
    flex: 1;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ppr-btn:hover[b-ozwfa0hki3] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.ppr-btn-accent[b-ozwfa0hki3] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .ppr-btn-accent:hover[b-ozwfa0hki3] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.ppr-fail-msg[b-ozwfa0hki3] {
    text-align: center;
    color: var(--d-ink-2);
    font-size: 14px;
    margin: 0 0 22px;
    line-height: 1.5;
}
/* /src/Features/Partner/Pages/Partner/PartnerVisaDetail.razor.rz.scp.css */
/* PartnerVisaDetail — Manager Dashboard v4 theme */
.pvd-root[b-dulvi6t2bb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100vh;
    padding: 1.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pvd-loading[b-dulvi6t2bb] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.pvd-spinner[b-dulvi6t2bb] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: pvd-spin-b-dulvi6t2bb .9s linear infinite;
}

@keyframes pvd-spin-b-dulvi6t2bb { to { transform: rotate(360deg); } }

.pvd-notfound[b-dulvi6t2bb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 3rem 1.5rem;
    text-align: center;
}

    .pvd-notfound p[b-dulvi6t2bb] {
        color: var(--d-ink-3);
        font-size: 14px;
        margin: 0 0 8px;
    }

    .pvd-notfound a[b-dulvi6t2bb] {
        color: var(--d-accent);
        font-size: 14px;
        text-decoration: none;
    }

        .pvd-notfound a:hover[b-dulvi6t2bb] {
            text-decoration: underline;
        }

/* Hero */
.pvd-hero[b-dulvi6t2bb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px 18px;
}

.pvd-crumbs[b-dulvi6t2bb] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
    margin-bottom: 12px;
}

    .pvd-crumbs a[b-dulvi6t2bb] {
        color: var(--d-ink-3);
        text-decoration: none;
    }

        .pvd-crumbs a:hover[b-dulvi6t2bb] {
            color: var(--d-accent);
        }

    .pvd-crumbs svg[b-dulvi6t2bb] {
        width: 11px;
        height: 11px;
        color: var(--d-ink-4);
    }

    .pvd-crumbs .current[b-dulvi6t2bb] {
        color: var(--d-ink);
        font-weight: 500;
    }

.pvd-hero-row[b-dulvi6t2bb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1024px) {
    .pvd-hero-row[b-dulvi6t2bb] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.pvd-code-line[b-dulvi6t2bb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.pvd-code[b-dulvi6t2bb] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-3);
}

.pvd-status-pill[b-dulvi6t2bb] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

    .pvd-status-pill.submitted[b-dulvi6t2bb], .pvd-status-pill.review[b-dulvi6t2bb] {
        background: #e0f2fe;
        color: #0369a1;
    }

    .pvd-status-pill.processing[b-dulvi6t2bb] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
    }

    .pvd-status-pill.additional[b-dulvi6t2bb] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .pvd-status-pill.interview[b-dulvi6t2bb] {
        background: #f3e8ff;
        color: #7e22ce;
    }

    .pvd-status-pill.approved[b-dulvi6t2bb] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

    .pvd-status-pill.rejected[b-dulvi6t2bb] {
        background: #fee2e2;
        color: var(--d-danger);
    }

    .pvd-status-pill.cancelled[b-dulvi6t2bb], .pvd-status-pill.draft[b-dulvi6t2bb] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

.pvd-h1[b-dulvi6t2bb] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 4px;
    line-height: 1.2;
}

.pvd-sub[b-dulvi6t2bb] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 0;
}

.pvd-sub-time[b-dulvi6t2bb] {
    font-size: 11.5px;
    color: var(--d-ink-4);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.pvd-btn[b-dulvi6t2bb] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}

    .pvd-btn:hover[b-dulvi6t2bb] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .pvd-btn:disabled[b-dulvi6t2bb] {
        opacity: .55;
        cursor: not-allowed;
    }

.pvd-btn-danger[b-dulvi6t2bb] {
    border-color: #fca5a5;
    color: var(--d-danger);
    background: var(--d-surface);
}

    .pvd-btn-danger:hover[b-dulvi6t2bb] {
        background: #fef2f2;
        color: var(--d-danger);
    }

/* Status callout */
.pvd-callout[b-dulvi6t2bb] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

    .pvd-callout.warn[b-dulvi6t2bb] {
        background: var(--d-accent-soft);
        border-color: #fed7aa;
    }

        .pvd-callout.warn b[b-dulvi6t2bb] {
            color: var(--d-accent);
        }

        .pvd-callout.warn p[b-dulvi6t2bb] {
            color: var(--d-accent);
        }

    .pvd-callout.interview[b-dulvi6t2bb] {
        background: #faf5ff;
        border-color: #e9d5ff;
    }

        .pvd-callout.interview b[b-dulvi6t2bb] {
            color: #7e22ce;
        }

        .pvd-callout.interview p[b-dulvi6t2bb] {
            color: #7e22ce;
        }

    .pvd-callout.danger[b-dulvi6t2bb] {
        background: #fef2f2;
        border-color: #fecaca;
    }

        .pvd-callout.danger b[b-dulvi6t2bb] {
            color: var(--d-danger);
        }

        .pvd-callout.danger p[b-dulvi6t2bb] {
            color: var(--d-danger);
        }

    .pvd-callout.good[b-dulvi6t2bb] {
        background: var(--d-good-soft);
        border-color: #bbf7d0;
    }

        .pvd-callout.good b[b-dulvi6t2bb] {
            color: var(--d-good);
        }

    .pvd-callout b[b-dulvi6t2bb] {
        font-size: 12.5px;
        font-weight: 600;
        display: block;
        margin-bottom: 4px;
    }

    .pvd-callout p[b-dulvi6t2bb] {
        font-size: 12.5px;
        margin: 0;
        line-height: 1.45;
    }

.pvd-callout-grid[b-dulvi6t2bb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12.5px;
    margin-top: 4px;
}

    .pvd-callout-grid span.k[b-dulvi6t2bb] {
        color: var(--d-ink-3);
    }

    .pvd-callout-grid span.v[b-dulvi6t2bb] {
        color: var(--d-ink);
        font-weight: 500;
    }

/* Card primitive */
.pvd-card[b-dulvi6t2bb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.pvd-card-hd[b-dulvi6t2bb] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pvd-card-hd svg[b-dulvi6t2bb] {
        width: 14px;
        height: 14px;
        color: var(--d-accent);
    }

/* Applicants grid */
.pvd-app-grid[b-dulvi6t2bb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .pvd-app-grid[b-dulvi6t2bb] {
        grid-template-columns: 1fr 1fr;
    }
}

.pvd-app[b-dulvi6t2bb] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
    background: var(--d-surface);
    transition: border-color .12s;
}

    .pvd-app:hover[b-dulvi6t2bb] {
        border-color: #fed7aa;
    }

.pvd-app-hd[b-dulvi6t2bb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--d-line-2);
}

.pvd-app-num[b-dulvi6t2bb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    font-size: 11px;
    font-weight: 700;
}

.pvd-app-name[b-dulvi6t2bb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin-left: 8px;
}

.pvd-primary-tag[b-dulvi6t2bb] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pvd-app-fields[b-dulvi6t2bb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 4px;
    font-size: 11.5px;
}

    .pvd-app-fields .k[b-dulvi6t2bb] {
        color: var(--d-ink-3);
    }

    .pvd-app-fields .v[b-dulvi6t2bb] {
        color: var(--d-ink);
        font-weight: 500;
    }

.pvd-app-result[b-dulvi6t2bb] {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--d-good-soft);
    border-radius: 8px;
    font-size: 11.5px;
}

    .pvd-app-result b[b-dulvi6t2bb] {
        display: block;
        color: var(--d-good);
        font-weight: 600;
        margin-bottom: 2px;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.pvd-app-rej[b-dulvi6t2bb] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--d-line-2);
}

    .pvd-app-rej b[b-dulvi6t2bb] {
        color: var(--d-danger);
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        display: block;
        margin-bottom: 2px;
    }

    .pvd-app-rej p[b-dulvi6t2bb] {
        font-size: 11.5px;
        color: var(--d-danger);
        margin: 0;
    }

/* Sections grid */
.pvd-sections[b-dulvi6t2bb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .pvd-sections[b-dulvi6t2bb] {
        grid-template-columns: 1fr 1fr;
    }
}

.pvd-kv-row[b-dulvi6t2bb] {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    padding: 4px 0;
}

    .pvd-kv-row .k[b-dulvi6t2bb] {
        color: var(--d-ink-3);
    }

    .pvd-kv-row .v[b-dulvi6t2bb] {
        color: var(--d-ink);
        font-weight: 500;
        text-align: right;
    }

/* Documents */
.pvd-doc-row[b-dulvi6t2bb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--d-line-2);
}

    .pvd-doc-row:last-child[b-dulvi6t2bb] {
        border-bottom: 0;
    }

.pvd-doc-left[b-dulvi6t2bb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pvd-doc-left .ico[b-dulvi6t2bb] {
        font-size: 18px;
    }

    .pvd-doc-left .name[b-dulvi6t2bb] {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--d-ink);
        margin: 0;
    }

    .pvd-doc-left .meta[b-dulvi6t2bb] {
        font-size: 11px;
        color: var(--d-ink-4);
        margin: 0;
    }

.pvd-doc-status[b-dulvi6t2bb] {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

    .pvd-doc-status.approved[b-dulvi6t2bb] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

    .pvd-doc-status.rejected[b-dulvi6t2bb] {
        background: #fee2e2;
        color: var(--d-danger);
    }

    .pvd-doc-status.reupload[b-dulvi6t2bb] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .pvd-doc-status.pending[b-dulvi6t2bb] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

/* Back link */
.pvd-back[b-dulvi6t2bb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--d-ink-3);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .12s;
}

    .pvd-back:hover[b-dulvi6t2bb] {
        color: var(--d-accent);
    }

    .pvd-back svg[b-dulvi6t2bb] {
        width: 14px;
        height: 14px;
    }

.pvd-empty-text[b-dulvi6t2bb] {
    font-size: 12px;
    color: var(--d-ink-4);
    margin: 0;
}
/* /src/Features/Partner/Pages/Partner/Pricing.razor.rz.scp.css */
/* Partner Pricing — Manager Dashboard v4 theme */
.ppricing-root[b-iazv3eq381] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ppricing-hero[b-iazv3eq381] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end; gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.ppricing-hero h1[b-iazv3eq381] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--d-ink); line-height: 1.15;
}
.ppricing-hero h1 em[b-iazv3eq381] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.ppricing-hero-meta[b-iazv3eq381] {
    margin-top: 6px;
    font-size: 14px; color: var(--d-ink-3);
}

.ppricing-card[b-iazv3eq381] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

.ppricing-empty[b-iazv3eq381] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 48px 16px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    color: var(--d-ink-3); text-align: center;
}
.ppricing-empty b[b-iazv3eq381] { color: var(--d-ink); font-weight: 500; font-size: 14px; }

.ppricing-loading[b-iazv3eq381] {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 0;
}
.ppricing-loading .spin[b-iazv3eq381] {
    width: 28px; height: 28px;
    border: 3px solid var(--d-line); border-top-color: var(--d-accent);
    border-radius: 50%; animation: ppricing-spin-b-iazv3eq381 .8s linear infinite;
}
@keyframes ppricing-spin-b-iazv3eq381 { to { transform: rotate(360deg); } }
/* /src/Features/Partner/Pages/Partner/Settings.razor.rz.scp.css */
/* Partner Settings — Manager Dashboard v4 theme */
.pset-root[b-5lhtz1af13] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: calc(100vh - 64px);
    padding: 20px 28px;
    display: flex; flex-direction: column; gap: 20px;
}

/* Hero */
.pset-hero[b-5lhtz1af13] {
    display: grid; grid-template-columns: 1fr auto;
    align-items: end; gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}
.pset-hero h1[b-5lhtz1af13] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em;
    color: var(--d-ink); line-height: 1.15;
}
.pset-hero h1 em[b-5lhtz1af13] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.pset-hero-meta[b-5lhtz1af13] {
    margin-top: 6px;
    color: var(--d-ink-3); font-size: 14px;
}
.pset-saving-tag[b-5lhtz1af13] {
    font-size: 12px; color: var(--d-ink-3);
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    padding: 4px 10px;
}
.pset-saving-tag i[b-5lhtz1af13] { color: var(--d-accent); }

/* Layout */
.pset-shell[b-5lhtz1af13] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 1024px) {
    .pset-shell[b-5lhtz1af13] { grid-template-columns: 240px 1fr; }
}

/* Sidebar */
.pset-side[b-5lhtz1af13] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px;
    display: flex; flex-direction: column; gap: 2px;
    align-self: start;
    position: sticky; top: 12px;
}
.pset-tab[b-5lhtz1af13] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--d-ink-2);
    background: transparent; border: 0;
    text-align: left; cursor: pointer; width: 100%;
    transition: background .12s, color .12s;
}
.pset-tab i[b-5lhtz1af13] { width: 16px; text-align: center; color: var(--d-ink-3); }
.pset-tab:hover[b-5lhtz1af13] { background: var(--d-surface-2); color: var(--d-ink); }
.pset-tab.is-active[b-5lhtz1af13] {
    background: var(--d-accent-grad); color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,.18);
}
.pset-tab.is-active i[b-5lhtz1af13] { color: #fff; }

/* Content */
.pset-content[b-5lhtz1af13] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 18px 20px;
}
.pset-content h2[b-5lhtz1af13] {
    margin: 0 0 4px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--d-ink);
}
.pset-content .lede[b-5lhtz1af13] {
    margin: 0 0 16px;
    color: var(--d-ink-3); font-size: 14px;
}
.pset-section[b-5lhtz1af13] { display: flex; flex-direction: column; gap: 18px; }
.pset-subsection[b-5lhtz1af13] { padding-top: 18px; border-top: 1px solid var(--d-line-2); }
.pset-subsection:first-child[b-5lhtz1af13] { padding-top: 0; border-top: 0; }
.pset-h3[b-5lhtz1af13] {
    font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 0 0 10px;
}

/* Form */
.pset-grid[b-5lhtz1af13] { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .pset-grid[b-5lhtz1af13] { grid-template-columns: 1fr 1fr; } }
.pset-grid .span2[b-5lhtz1af13] { grid-column: 1 / -1; }

.pset-label[b-5lhtz1af13] {
    display: block;
    font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.pset-input[b-5lhtz1af13], .pset-select[b-5lhtz1af13], .pset-textarea[b-5lhtz1af13] {
    width: 100%;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px; font-family: inherit;
    padding: 0 12px; height: 38px;
    transition: border-color .12s, box-shadow .12s;
}
.pset-textarea[b-5lhtz1af13] { padding: 8px 12px; height: auto; min-height: 64px; resize: vertical; }
.pset-input:focus[b-5lhtz1af13], .pset-select:focus[b-5lhtz1af13], .pset-textarea:focus[b-5lhtz1af13] {
    outline: none; border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}
.pset-hint[b-5lhtz1af13] { font-size: 12px; color: var(--d-ink-3); margin: 6px 0 0; }

/* Color swatches */
.pset-colors[b-5lhtz1af13] { display: flex; flex-wrap: wrap; gap: 8px; }
.pset-sw[b-5lhtz1af13] {
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; cursor: pointer; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    transition: transform .12s, box-shadow .12s;
}
.pset-sw:hover[b-5lhtz1af13] { transform: scale(1.05); }
.pset-sw.is-active[b-5lhtz1af13] { box-shadow: 0 0 0 2px var(--d-surface), 0 0 0 4px var(--d-ink); }

/* Buttons */
.pset-btn[b-5lhtz1af13] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; transition: background .12s, border-color .12s;
}
.pset-btn:hover[b-5lhtz1af13] { background: var(--d-surface-2); }
.pset-btn-dark[b-5lhtz1af13] {
    background: var(--d-ink); color: #fff; border-color: var(--d-ink);
}
.pset-btn-dark:hover[b-5lhtz1af13] { background: var(--d-ink-2); border-color: var(--d-ink-2); color: #fff; }
.pset-link-btn[b-5lhtz1af13] {
    background: transparent; border: 0; padding: 0;
    color: var(--d-accent); font-size: 14px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.pset-link-btn:hover[b-5lhtz1af13] { text-decoration: underline; }

/* Notice */
.pset-notice[b-5lhtz1af13] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    background: var(--d-accent-soft);
    border: 1px solid #fed7aa;
    color: #7c2d12;
    font-size: 14px;
    display: flex; align-items: flex-start; gap: 8px;
}
.pset-notice i[b-5lhtz1af13] { color: var(--d-accent); margin-top: 1px; }

/* Tags */
.pset-tag-row[b-5lhtz1af13] { display: flex; flex-wrap: wrap; gap: 6px; }
.pset-tag[b-5lhtz1af13] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    font-size: 12.5px; color: var(--d-ink-2);
}
.pset-tag button[b-5lhtz1af13] {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: var(--d-danger); display: inline-flex;
}
.pset-input-row[b-5lhtz1af13] { display: flex; gap: 8px; margin-bottom: 10px; }
.pset-input-row .pset-input[b-5lhtz1af13] { flex: 1; }

/* Bank account block */
.pset-bank-card[b-5lhtz1af13] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px;
    position: relative;
    background: var(--d-surface);
}
.pset-bank-remove[b-5lhtz1af13] {
    position: absolute; top: 8px; right: 8px;
    background: transparent; border: 0;
    color: var(--d-danger); cursor: pointer; padding: 4px;
}
.pset-rule-row[b-5lhtz1af13] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    font-size: 14px; color: var(--d-ink-2);
}
.pset-rule-row button[b-5lhtz1af13] {
    background: transparent; border: 0; cursor: pointer; color: var(--d-danger); padding: 0;
}
.pset-empty-line[b-5lhtz1af13] {
    text-align: center; padding: 16px;
    border: 1px dashed var(--d-line);
    border-radius: var(--d-r);
    color: var(--d-ink-3); font-size: 14px;
}

/* Loading */
.pset-loading[b-5lhtz1af13] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 60px 0;
    color: var(--d-ink-3);
}
.pset-loading .spin[b-5lhtz1af13] {
    width: 28px; height: 28px;
    border: 3px solid var(--d-line); border-top-color: var(--d-accent);
    border-radius: 50%; animation: pset-spin-b-5lhtz1af13 .8s linear infinite;
}
@keyframes pset-spin-b-5lhtz1af13 { to { transform: rotate(360deg); } }

/* Section header w/ action */
.pset-section-hd[b-5lhtz1af13] {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
/* /src/Features/Payment/Pages/Ca/CaPaymentReturn.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CaPaymentReturn — chuẩn nm-list (Nm* UI-kit, token-only, scoped).
   Shell + hero kết quả + pipeline NmSteps + grid chi tiết/thanh toán.
   ═══════════════════════════════════════════════════════════════ */
.nm-list-page[b-awh39xet5q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-awh39xet5q] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-awh39xet5q] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-awh39xet5q] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }

/* ── state tập trung: loading / verifying / fail / not-found ── */
.pay-state[b-awh39xet5q] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-sm);
    padding: 44px 24px;
    text-align: center;
}

.pay-state__steps[b-awh39xet5q] {
    max-width: 460px;
    margin: 0 auto 26px;
}

.pay-state__title[b-awh39xet5q] {
    margin: 14px 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--nm-ink);
}

.pay-state__sub[b-awh39xet5q] {
    margin: 0;
    font-size: 14px;
    color: var(--nm-muted);
}

.pay-attempt[b-awh39xet5q] {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.pay-state__ico[b-awh39xet5q] {
    width: 54px;
    height: 54px;
    border-radius: var(--nm-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.pay-state--bad .pay-state__ico[b-awh39xet5q] {
    background: var(--nm-bad-soft);
    color: var(--nm-bad);
}

.pay-state__actions[b-awh39xet5q] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ── hero kết quả thành công: check + codes + pipeline ── */
/* hero 1 hàng ngang: kết quả (trái) — pipeline (giữa, co giãn) — mã tra cứu (phải).
   Một trục căn giữa duy nhất, không tầng lệch, không đường kẻ cụt. */
.pay-hero[b-awh39xet5q] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-sm);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px 20px;
    flex-wrap: wrap;
}

.pay-hero__main[b-awh39xet5q] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    max-width: 380px;
    flex: 0 1 auto;
}

.pay-hero__ico[b-awh39xet5q] {
    width: 40px;
    height: 40px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-ok-soft);
    color: var(--nm-ok);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pay-hero__title[b-awh39xet5q] { margin: 0; font-size: 16px; font-weight: 700; color: var(--nm-ink); }
.pay-hero__sub[b-awh39xet5q] { margin: 2px 0 0; font-size: 13px; color: var(--nm-muted); }
.pay-hero__sub.is-busy[b-awh39xet5q] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--nm-ink-2);
}

/* chip mã tra cứu — trung tính đồng bộ, chỉ nhãn phân biệt (giảm nhiễu màu) */
.pay-codes[b-awh39xet5q] { display: flex; gap: 8px; flex-wrap: wrap; }

.pay-code[b-awh39xet5q] {
    padding: 6px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    text-align: center;
    min-width: 92px;
}
.pay-code__lbl[b-awh39xet5q] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--nm-muted);
}
.pay-code__val[b-awh39xet5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--nm-ink);
    word-break: break-all;
}

.pay-hero__steps[b-awh39xet5q] {
    flex: 1 1 240px;
    min-width: 240px;
    max-width: 480px;
    margin: 0 auto;
}

.pay-codes[b-awh39xet5q] { margin-left: auto; }

@media (max-width: 767px) {
    .pay-hero[b-awh39xet5q] { flex-direction: column; align-items: stretch; }
    .pay-hero__steps[b-awh39xet5q] { max-width: none; margin: 0; }
    .pay-codes[b-awh39xet5q] { margin-left: 0; }
}

/* khối lý do cần xử lý thủ công (trong NmAlert Warn) */
.pay-reason[b-awh39xet5q] {
    display: block;
    margin-top: 10px;
    padding: 9px 12px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
}
.pay-reason__lbl[b-awh39xet5q] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nm-muted);
    margin-bottom: 2px;
}
.pay-reason__txt[b-awh39xet5q] { font-size: 14px; color: var(--nm-ink-2); line-height: 1.45; }

/* ── grid 2 cột: chi tiết | thanh toán ── */
.pay-grid[b-awh39xet5q] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}
@media (min-width: 1024px) {
    .pay-grid[b-awh39xet5q] { grid-template-columns: 2fr 1fr; }
}

/* min-width:0 chặn grid blowout — nội dung rộng (ticket face/bảng) không được
   đẩy cột trái vượt 2fr làm bóp hẹp sidebar */
.pay-main[b-awh39xet5q] { min-width: 0; }

.pay-side[b-awh39xet5q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pay-insurance-detail[b-awh39xet5q] { margin-top: 16px; }

/* Nén bảng hành khách (component chung) cho vừa cột 2fr — cột SỐ VÉ quan trọng
   không được khuất sau scroll ngang. Chỉ scoped trang này, trang khác giữ nguyên. */
.pay-main[b-awh39xet5q]  .flpr-tbl { min-width: 0; }
.pay-main[b-awh39xet5q]  .flpr-tbl thead th,
.pay-main[b-awh39xet5q]  .flpr-tbl tbody td { padding-left: 8px; padding-right: 8px; }
.pay-main[b-awh39xet5q]  .flpr-tbl tbody td:nth-child(2) { white-space: normal; }

/* ── hàng khoá–giá trị ── */
.pay-rows[b-awh39xet5q] { display: flex; flex-direction: column; }

.pay-rows .r[b-awh39xet5q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
}
.pay-rows .r + .r[b-awh39xet5q] { border-top: 1px dashed var(--nm-border); }

.pay-rows .r .k[b-awh39xet5q] { color: var(--nm-muted); flex-shrink: 0; }
.pay-rows .r .v[b-awh39xet5q] {
    color: var(--nm-ink);
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}
.pay-rows .r .v.mono[b-awh39xet5q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
}

/* ── breakdown số tiền + tổng ── */
.pay-money[b-awh39xet5q] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
}
.pay-money__lbl[b-awh39xet5q] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nm-muted);
    margin-bottom: 2px;
}

.pay-total[b-awh39xet5q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--nm-brand-50);
    border-radius: var(--nm-r-input);
}
.pay-total .k[b-awh39xet5q] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nm-brand-700);
}
.pay-total .v[b-awh39xet5q] {
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
}

.pay-empty-note[b-awh39xet5q] { margin: 0; font-size: 14px; font-style: italic; color: var(--nm-muted); }

/* header card có link hành động bên phải (thay nút trong body — gọn card) */
.pay-card-hd[b-awh39xet5q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.pay-hd-link[b-awh39xet5q] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    text-decoration: none;
    white-space: nowrap;
}
.pay-hd-link:hover[b-awh39xet5q] { color: var(--nm-brand-700); text-decoration: underline; }

/* ── actions: nút full-width xếp dọc ── */
.pay-actions[b-awh39xet5q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pay-actions[b-awh39xet5q]  .nm-btn { width: 100%; }

@media (max-width: 640px) {
    .nm-list-page[b-awh39xet5q] { padding: 16px 14px 22px; }
}
/* /src/Features/Payment/Pages/Ca/Payments.razor.rz.scp.css */
/* /ca/payments — chuẩn nm-list token-only: head + NmToolbar lọc (search + loại + NmDateRange, End = số dư) + NmCard DataGrid giao dịch ví. */
.nm-list-page[b-h9jtby41lh] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-h9jtby41lh] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-h9jtby41lh] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.capay-title[b-h9jtby41lh] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-h9jtby41lh] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-h9jtby41lh] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-h9jtby41lh] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar ── */
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-h9jtby41lh] .capay-toolbar .nm-input-wrap { width: 220px; flex: 0 0 auto; }
[b-h9jtby41lh] .capay-toolbar .nm-daterange { flex: 0 0 auto; }
.capay-chips[b-h9jtby41lh] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Dòng phụ dưới mỗi ô KPI dòng tiền (số giao dịch / diễn giải chiều tiền). */
.capay-kpi-sub[b-h9jtby41lh] { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--nm-muted); }

/* ── Card danh sách ── */
[b-h9jtby41lh] .capay-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.capay-card-ico[b-h9jtby41lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.capay-card-title[b-h9jtby41lh] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.capay-card-count[b-h9jtby41lh] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
/* Khoảng thời gian của tập đang xem — đẩy về cuối head cho cân với /ca/invoices. */
.capay-card-hint[b-h9jtby41lh] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid ── */
.capay-tx[b-h9jtby41lh] { display: inline-flex; align-items: center; gap: 8px; }
.capay-tx-ico[b-h9jtby41lh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}
.capay-tx-ico.in[b-h9jtby41lh] { background: color-mix(in srgb, var(--nm-ok) 13%, transparent); color: var(--nm-ok); }
.capay-tx-ico.out[b-h9jtby41lh] { background: color-mix(in srgb, var(--nm-bad) 11%, transparent); color: var(--nm-bad); }

.capay-money[b-h9jtby41lh] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.capay-money.up[b-h9jtby41lh] { color: var(--nm-ok); font-weight: 600; }
.capay-money.down[b-h9jtby41lh] { color: var(--nm-bad); font-weight: 600; }
.capay-desc[b-h9jtby41lh] {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.capay-time[b-h9jtby41lh] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.capay-ref[b-h9jtby41lh] { display: inline-flex; align-items: center; }
.capay-dash[b-h9jtby41lh] { color: var(--nm-muted); }

/* ── Footer phân trang ── */
.capay-foot[b-h9jtby41lh] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

@media (max-width: 640px) {
    .nm-list-page[b-h9jtby41lh] { padding: 16px 14px 22px; }
    [b-h9jtby41lh] .capay-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/Payment/Pages/Manager/BookingPayment.razor.rz.scp.css */
/* BookingPayment — Manager Dashboard v4 theme. Prefix: bkpay- */
.bkpay-root[b-467uvvbc3t] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink); background: var(--d-bg);
}
.bkpay-num[b-467uvvbc3t] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.bkpay-hero[b-467uvvbc3t] {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    padding-bottom: 14px; border-bottom: 1px solid var(--d-line); flex-wrap: wrap;
}
.bkpay-hero h1[b-467uvvbc3t] {
    margin: 0; font-family: 'Inter Tight','Inter',sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15;
}
.bkpay-hero h1 em[b-467uvvbc3t] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.bkpay-hero-meta[b-467uvvbc3t] { margin-top: 6px; color: var(--d-ink-3); font-size: 14px; }

.bkpay-btn[b-467uvvbc3t] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    transition: background .12s;
}
.bkpay-btn:hover[b-467uvvbc3t] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.bkpay-btn-accent[b-467uvvbc3t] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.bkpay-btn-accent:hover[b-467uvvbc3t] { background: var(--d-accent-grad-hover); color: #fff; }
.bkpay-btn-block[b-467uvvbc3t] { width: 100%; justify-content: center; height: 44px; font-size: 14px; font-weight: 600; }

.bkpay-card[b-467uvvbc3t] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); padding: 18px;
}
.bkpay-card h2[b-467uvvbc3t] {
    margin: 0 0 14px; font-family: 'Inter Tight',sans-serif;
    font-size: 15px; font-weight: 600; color: var(--d-ink); letter-spacing: -0.02em;
}

.bkpay-method-tile[b-467uvvbc3t] {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 12px; border: 1px solid var(--d-line); border-radius: var(--d-r);
    background: var(--d-surface); transition: border-color .12s, background .12s;
    text-align: center; min-height: 110px; justify-content: center;
}
.bkpay-method-tile.is-selected[b-467uvvbc3t] { border-color: var(--d-accent); background: var(--d-accent-soft); }
.bkpay-method-tile.is-disabled[b-467uvvbc3t] { opacity: 0.55; background: var(--d-surface-2); }
.bkpay-method-tile-name[b-467uvvbc3t] { font-size: 12px; font-weight: 500; color: var(--d-ink-2); line-height: 1.25; }

.bkpay-summary-total[b-467uvvbc3t] {
    color: var(--d-accent); font-size: 20px; font-weight: 700;
    font-family: 'Inter Tight',sans-serif; letter-spacing: -0.02em;
}

.bkpay-info-banner[b-467uvvbc3t] {
    background: var(--d-accent-soft);
    border: 1px solid color-mix(in srgb, var(--d-accent) 30%, transparent);
    border-radius: var(--d-r); padding: 10px 12px; font-size: 12px;
    color: color-mix(in srgb, var(--d-accent) 90%, #000);
    display: flex; align-items: flex-start; gap: 8px;
}

.bkpay-warn-banner[b-467uvvbc3t] {
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent);
    border-radius: var(--d-r); padding: 10px 12px; font-size: 12px;
    color: color-mix(in srgb, var(--d-warn) 90%, #000);
    display: flex; align-items: flex-start; gap: 8px;
}

.bkpay-error-banner[b-467uvvbc3t] {
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    border-radius: var(--d-r); padding: 10px 12px; font-size: 14px;
    color: var(--d-danger);
    display: flex; align-items: flex-start; gap: 8px;
}
/* /src/Features/Payment/Pages/Manager/ManagerPaymentReturn.razor.rz.scp.css */
/* ManagerPaymentReturn — Manager Dashboard v4 theme. Prefix: mpr- */
.mpr-root[b-qirr8g25ke] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink); background: var(--d-bg);
}
.mpr-num[b-qirr8g25ke] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.mpr-hero[b-qirr8g25ke] {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    padding-bottom: 14px; border-bottom: 1px solid var(--d-line); flex-wrap: wrap;
}
.mpr-hero h1[b-qirr8g25ke] {
    margin: 0; font-family: 'Inter Tight','Inter',sans-serif;
    font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15;
}
.mpr-hero h1 em[b-qirr8g25ke] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }

.mpr-btn[b-qirr8g25ke] {
    height: 38px; padding: 0 14px; border-radius: var(--d-r);
    border: 1px solid var(--d-line); background: var(--d-surface);
    font-size: 14px; font-weight: 500; color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
    transition: background .12s;
}
.mpr-btn:hover[b-qirr8g25ke] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.mpr-btn-accent[b-qirr8g25ke] {
    background: var(--d-accent-grad); color: #fff; border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}
.mpr-btn-accent:hover[b-qirr8g25ke] { background: var(--d-accent-grad-hover); color: #fff; }
.mpr-btn-block[b-qirr8g25ke] { width: 100%; justify-content: center; height: 44px; font-size: 14px; font-weight: 600; }

.mpr-card[b-qirr8g25ke] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); padding: 18px;
}
.mpr-card h3[b-qirr8g25ke] {
    margin: 0 0 12px; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
}

.mpr-status-card[b-qirr8g25ke] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); padding: 24px;
}
.mpr-status-ico[b-qirr8g25ke] {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
}
.mpr-status-ico.success[b-qirr8g25ke] { background: var(--d-good-soft); color: var(--d-good); }
.mpr-status-ico.danger[b-qirr8g25ke] { background: color-mix(in srgb, var(--d-danger) 14%, transparent); color: var(--d-danger); }
.mpr-status-ico.idle[b-qirr8g25ke] { background: var(--d-surface-2); color: var(--d-ink-3); }
.mpr-status-title[b-qirr8g25ke] {
    margin: 0; font-family: 'Inter Tight',sans-serif;
    font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink);
}
.mpr-status-sub[b-qirr8g25ke] { font-size: 14px; color: var(--d-ink-3); margin-top: 4px; }
.mpr-order-chip[b-qirr8g25ke] {
    background: var(--d-surface-2); border: 1px solid var(--d-line);
    border-radius: var(--d-r); padding: 8px 14px; text-align: center;
}
.mpr-order-chip-lbl[b-qirr8g25ke] { font-size: 10.5px; color: var(--d-ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.mpr-order-chip-val[b-qirr8g25ke] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16px; font-weight: 600; color: var(--d-ink); letter-spacing: 0.05em; }

.mpr-summary-total[b-qirr8g25ke] {
    color: var(--d-accent); font-size: 18px; font-weight: 700;
    font-family: 'Inter Tight',sans-serif; letter-spacing: -0.02em;
}

.mpr-pnr[b-qirr8g25ke] {
    background: var(--d-good-soft);
    border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent);
    border-radius: var(--d-r); padding: 14px 18px;
}
.mpr-pnr-lbl[b-qirr8g25ke] { font-size: 10.5px; color: var(--d-good); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.mpr-pnr-val[b-qirr8g25ke] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; font-weight: 700; color: color-mix(in srgb, var(--d-good) 80%, #000); letter-spacing: 0.05em; }

.mpr-warn-card[b-qirr8g25ke] {
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent);
    border-radius: var(--d-r); padding: 14px 18px;
}
.mpr-warn-card h3[b-qirr8g25ke] { color: color-mix(in srgb, var(--d-warn) 90%, #000); margin: 0 0 8px; font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.mpr-loading[b-qirr8g25ke] {
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 14px; padding: 64px 16px;
}
.mpr-spinner[b-qirr8g25ke] {
    width: 32px; height: 32px; border: 3px solid var(--d-line);
    border-top-color: var(--d-accent); border-radius: 50%;
    animation: mpr-spin-b-qirr8g25ke 0.7s linear infinite;
}
@keyframes mpr-spin-b-qirr8g25ke { to { transform: rotate(360deg); } }

.mpr-fail-pill[b-qirr8g25ke] {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border-radius: 999px; font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--d-danger) 12%, transparent); color: var(--d-danger);
}
/* /src/Features/Payment/Pages/Manager/PaymentMethodConfigIndex.razor.rz.scp.css */
/* /manager/payment-configs — chuẩn nm-list, token-only (chỉ tên có trong tokens.css để không
   dính bẫy app.css khai đè --nm-accent/--nm-bg/--nm-shadow-*).
   Chrome (card/modal/field/switch/alert) do primitive Nm* lo; file này chỉ style vỏ trang +
   phần cây nhóm→phương thức không có primitive tương ứng. Prefix riêng: pmc- */

.nm-list-page[b-oqnhamklyu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-oqnhamklyu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-oqnhamklyu] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-oqnhamklyu] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-oqnhamklyu] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải trạng thái kiêm bộ lọc ── */
.pmc-stats[b-oqnhamklyu] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}

.pmc-stats[b-oqnhamklyu]::-webkit-scrollbar { display: none; }

.pmc-stat[b-oqnhamklyu] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.pmc-stats > .pmc-stat:first-child[b-oqnhamklyu] { border-left: 0; }

/* Ô "Nhóm" chỉ để đọc — đừng cho nó tín hiệu bấm được. */
.pmc-stat--plain[b-oqnhamklyu] { cursor: default; }

.pmc-stat:hover:not(.pmc-stat--plain) .pmc-stat__lbl[b-oqnhamklyu] { color: var(--nm-ink); }
.pmc-stat.is-on .pmc-stat__lbl[b-oqnhamklyu] { color: var(--nm-brand-700); font-weight: 700; }
.pmc-stat.is-on .pmc-stat__val[b-oqnhamklyu] { color: var(--nm-brand-700); }

.pmc-stat__dot[b-oqnhamklyu] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.pmc-stat__dot--accent[b-oqnhamklyu] { background: var(--nm-brand-500); }
.pmc-stat__dot--good[b-oqnhamklyu] { background: var(--nm-ok); }
.pmc-stat__dot--muted[b-oqnhamklyu] { background: var(--nm-muted); }
.pmc-stat__dot--info[b-oqnhamklyu] { background: var(--nm-info); }

.pmc-stat__lbl[b-oqnhamklyu] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }

.pmc-stat__val[b-oqnhamklyu] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ──
   Bề rộng phải đặt trên DIV BỌC, không truyền qua Class của NmInput/NmSelect: Class rơi vào thẻ
   input/select bên trong còn thẻ bọc vẫn width:100% ⇒ mỗi filter rơi xuống một dòng. */
.tb-search[b-oqnhamklyu] { width: 320px; max-width: 100%; }
.tb-select[b-oqnhamklyu] { min-width: 200px; }

/* ── Cây nhóm → phương thức ── */
.pmc-groups[b-oqnhamklyu] { display: flex; flex-direction: column; gap: 14px; }

/* ★ `.nm-card__head` do CHÍNH NmCard render nên mang scope-id của nó, không phải của trang ⇒
   phải qua `::deep`, nếu không luật này im lặng không khớp và tiêu đề nhóm xếp dọc.
   (Mấy phần tử .pmc-group__* bên trong là markup của TRANG nên vẫn dùng selector thường.) */
[b-oqnhamklyu] .pmc-group .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Nhóm đang tắt vẫn phải đọc được (đó là lý do người ta mở trang này) — làm nhạt chứ không ẩn. */
.pmc-group.is-off[b-oqnhamklyu] { opacity: .72; }

.pmc-group__ico[b-oqnhamklyu] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 14px;
}

.pmc-group__title[b-oqnhamklyu] {
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmc-group__count[b-oqnhamklyu] {
    padding: 1px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Đẩy cụm nút về sát mép phải của header thẻ. */
.pmc-group__actions[b-oqnhamklyu] { margin-left: auto; display: inline-flex; gap: 4px; }

.pmc-group__empty[b-oqnhamklyu] {
    margin: 0;
    padding: 18px 16px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 13px;
}

/* ── Dòng phương thức ── */
.pmc-methods[b-oqnhamklyu] { list-style: none; margin: 0; padding: 0; }

.pmc-method[b-oqnhamklyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--nm-border);
}

.pmc-methods > .pmc-method:first-child[b-oqnhamklyu] { border-top: 0; }
.pmc-method:hover[b-oqnhamklyu] { background: var(--nm-surface-2); }

/* Tắt = làm nhạt LOGO + CHỮ, giữ nguyên công tắc: công tắc chính là thứ cần bấm để bật lại. */
.pmc-method.is-off .pmc-logo[b-oqnhamklyu],
.pmc-method.is-off .pmc-method__body[b-oqnhamklyu] { opacity: .55; }

.pmc-logo[b-oqnhamklyu] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-muted);
    font-size: 17px;
    overflow: hidden;
}

.pmc-logo img[b-oqnhamklyu] { max-width: 100%; max-height: 100%; object-fit: contain; }

.pmc-logo--lg[b-oqnhamklyu] { width: 64px; height: 64px; flex: 0 0 64px; font-size: 22px; }

.pmc-method__body[b-oqnhamklyu] { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }

.pmc-method__line[b-oqnhamklyu] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.pmc-method__name[b-oqnhamklyu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmc-method__meta[b-oqnhamklyu] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.pmc-meta[b-oqnhamklyu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* Có thu phí là thông tin ĐỘNG TỚI TIỀN KHÁCH — không để lẫn màu với phần mô tả. */
.pmc-meta--fee[b-oqnhamklyu] { color: var(--nm-warn); font-weight: 600; }
.pmc-meta--free[b-oqnhamklyu] { color: var(--nm-ok); }

.pmc-meta--desc[b-oqnhamklyu] {
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmc-method__actions[b-oqnhamklyu] { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* ── Mã kỹ thuật (enum cổng, mã ngân hàng) ── */
.nm-code-pill[b-oqnhamklyu] {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nm-code-pill--soft[b-oqnhamklyu] { background: var(--nm-brand-50); border-color: var(--nm-brand-100); color: var(--nm-brand-700); }

/* ── Hộp thoại ── */
.pmc-form[b-oqnhamklyu] { display: flex; flex-direction: column; gap: 14px; }

.pmc-form__switches[b-oqnhamklyu] { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.pmc-form__hint[b-oqnhamklyu] { margin: 0; font-size: 12px; color: var(--nm-muted); line-height: 1.5; }

.pmc-form[b-oqnhamklyu]  .pmc-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
}

.pmc-logo-edit[b-oqnhamklyu] { display: flex; align-items: flex-start; gap: 14px; }

/* NmFileUpload tự khai width:100% — trong hàng flex phải cho nó co lại, nếu không ô xem trước
   bị đẩy tràn. Gốc của component con nên cần `::deep`. */
.pmc-logo-edit[b-oqnhamklyu]  .nm-fileupload { flex: 1 1 auto; min-width: 0; width: auto; }

/* ── Hẹp ── */
@media (max-width: 720px) {
    .nm-list-page[b-oqnhamklyu] { padding: 16px 14px 22px; }
    .nm-list-actions[b-oqnhamklyu] { width: 100%; }
    .tb-search[b-oqnhamklyu] { flex: 1; width: auto; }
    .tb-select[b-oqnhamklyu] { min-width: 0; flex: 1 1 100%; }

    .pmc-method[b-oqnhamklyu] { flex-wrap: wrap; }
    .pmc-method__actions[b-oqnhamklyu] { margin-left: 0; width: 100%; justify-content: flex-end; }
    .pmc-meta--desc[b-oqnhamklyu] { max-width: 100%; }
    .pmc-logo-edit[b-oqnhamklyu] { flex-direction: column; }
}
/* /src/Features/Payment/Pages/Manager/PaymentsIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Payments Index — Manager Dashboard v4 theme (warm-neutral)
   Prefix: pay-
   ═══════════════════════════════════════════════════════════════ */

/* ★★ Bảng màu khai trên CẢ .pay-root LẪN .pay-modal-backdrop.
   Các hộp thoại nằm NGOÀI .pay-root trong DOM (chúng là khối @if riêng sau khi .pay-root đã đóng
   thẻ), mà biến CSS thì kế thừa theo cây DOM chứ không theo file. Chỉ khai ở .pay-root thì trong
   hộp thoại `var(--d-surface)` không phân giải được ⇒ `background`/`border` thành khai báo KHÔNG
   HỢP LỆ và bị bỏ qua: hộp thoại mất trắng nền lẫn viền, chữ đè lên bảng phía sau. Đúng lỗi đã
   thấy ở /manager/payments (18/08/2026).
   Chỉ TOKEN mới dùng chung; phần bố cục của trang vẫn nằm riêng ở .pay-root bên dưới. */
.pay-root[b-vpunwuansv],
.pay-modal-backdrop[b-vpunwuansv] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.pay-root[b-vpunwuansv] {
    background: var(--d-bg);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

.pay-num[b-vpunwuansv] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

/* ─── Hero ─── */
.pay-hero[b-vpunwuansv] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 18px 28px 14px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface);
    flex-shrink: 0;
}

    .pay-hero h1[b-vpunwuansv] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .pay-hero h1 em[b-vpunwuansv] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.pay-hero-meta[b-vpunwuansv] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .pay-hero-meta .dot[b-vpunwuansv] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

    .pay-hero-meta b[b-vpunwuansv] {
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.pay-hero-actions[b-vpunwuansv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── Buttons ─── */
.pay-btn[b-vpunwuansv] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .pay-btn:hover[b-vpunwuansv] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .pay-btn:disabled[b-vpunwuansv] {
        opacity: .5;
        cursor: not-allowed;
    }

.pay-btn-accent[b-vpunwuansv] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
}

    .pay-btn-accent:hover[b-vpunwuansv] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.pay-btn-ghost[b-vpunwuansv] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
    padding: 0 8px;
    height: 30px;
    font-size: 12px;
}

    .pay-btn-ghost:hover[b-vpunwuansv] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* ─── KPI strip (4-in-1) ─── */
.pay-kpis[b-vpunwuansv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.pay-kpi[b-vpunwuansv] {
    padding: 14px 16px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

    .pay-kpi:last-child[b-vpunwuansv] {
        border-right: 0;
    }

.pay-kpi-lbl[b-vpunwuansv] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pay-kpi-dot[b-vpunwuansv] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .pay-kpi-dot.accent[b-vpunwuansv] {
        background: var(--d-accent-grad);
    }

    .pay-kpi-dot.good[b-vpunwuansv] {
        background: var(--d-good);
    }

    .pay-kpi-dot.danger[b-vpunwuansv] {
        background: var(--d-danger);
    }

.pay-kpi-val[b-vpunwuansv] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

    .pay-kpi-val .unit[b-vpunwuansv] {
        color: var(--d-ink-3);
        font-size: 14px;
        font-weight: 500;
        margin-left: 4px;
    }

/* ─── Filters ─── */
.pay-filters[b-vpunwuansv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    flex-wrap: wrap;
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

.pay-search[b-vpunwuansv] {
    position: relative;
}

    .pay-search svg[b-vpunwuansv] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .pay-search input[b-vpunwuansv] {
        width: 240px;
        height: 38px;
        padding: 0 12px 0 34px;
        border: 1px solid var(--d-line);
        border-radius: var(--d-r);
        background: var(--d-surface);
        font-size: 14px;
        color: var(--d-ink);
        outline: none;
        transition: border-color .12s, box-shadow .12s;
    }

        .pay-search input:focus[b-vpunwuansv] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
        }

.pay-input[b-vpunwuansv],
.pay-select[b-vpunwuansv] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    font-family: inherit;
}

    .pay-input:focus[b-vpunwuansv],
    .pay-select:focus[b-vpunwuansv] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

.pay-filters-spacer[b-vpunwuansv] {
    margin-left: auto;
}

/* ─── Content area ─── */
.pay-content[b-vpunwuansv] {
    flex: 1;
    min-height: 0;
    padding: 16px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.pay-card[b-vpunwuansv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pay-card-scroll[b-vpunwuansv] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* ─── Table ─── */
.pay-tbl[b-vpunwuansv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .pay-tbl thead th[b-vpunwuansv] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .pay-tbl thead th.right[b-vpunwuansv] {
            text-align: right;
        }

        .pay-tbl thead th.center[b-vpunwuansv] {
            text-align: center;
        }

    .pay-tbl tbody td[b-vpunwuansv] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .pay-tbl tbody tr:last-child td[b-vpunwuansv] {
        border-bottom: 0;
    }

    .pay-tbl tbody tr:hover[b-vpunwuansv] {
        background: var(--d-surface-2);
    }

    .pay-tbl td.right[b-vpunwuansv] {
        text-align: right;
    }

    .pay-tbl td.center[b-vpunwuansv] {
        text-align: center;
    }

.pay-tbl-stt[b-vpunwuansv] {
    color: var(--d-ink-4);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.pay-tbl-code[b-vpunwuansv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink);
    font-weight: 500;
}

.pay-tbl-link[b-vpunwuansv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
}

    .pay-tbl-link:hover[b-vpunwuansv] {
        text-decoration: underline;
        color: var(--d-accent);
    }

.pay-method[b-vpunwuansv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--d-ink-2);
}

    .pay-method i[b-vpunwuansv] {
        color: var(--d-ink-4);
    }

.pay-amount[b-vpunwuansv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 14px;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

    .pay-amount.good[b-vpunwuansv] {
        color: var(--d-good);
    }

    .pay-amount.danger[b-vpunwuansv] {
        color: var(--d-danger);
    }

.pay-tbl-time[b-vpunwuansv] {
    font-size: 12px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ─── Status pill (soft) ─── */
.pay-pill[b-vpunwuansv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

    .pay-pill .d[b-vpunwuansv] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .pay-pill.good[b-vpunwuansv] {
        background: color-mix(in srgb, var(--d-good) 14%, transparent);
        color: var(--d-good);
    }

    .pay-pill.warn[b-vpunwuansv] {
        background: color-mix(in srgb, var(--d-warn) 16%, transparent);
        color: var(--d-warn);
    }

    .pay-pill.danger[b-vpunwuansv] {
        background: color-mix(in srgb, var(--d-danger) 14%, transparent);
        color: var(--d-danger);
    }

    .pay-pill.muted[b-vpunwuansv] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

/* ─── Empty / Loading ─── */
.pay-empty[b-vpunwuansv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .pay-empty b[b-vpunwuansv] {
        color: var(--d-ink);
        font-weight: 600;
        font-size: 14px;
    }

    .pay-empty small[b-vpunwuansv] {
        font-size: 12px;
    }

    .pay-empty i[b-vpunwuansv] {
        font-size: 32px;
        color: var(--d-ink-4);
        margin-bottom: 6px;
        line-height: 1;
    }

.pay-loading[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

    .pay-loading .spin[b-vpunwuansv] {
        width: 28px;
        height: 28px;
        border: 3px solid var(--d-line);
        border-top-color: var(--d-accent);
        border-radius: 50%;
        animation: pay-spin-b-vpunwuansv .8s linear infinite;
    }

@keyframes pay-spin-b-vpunwuansv {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Pagination wrapper ─── */
.pay-paging[b-vpunwuansv] {
    padding: 0 28px 14px;
    flex-shrink: 0;
}

/* ─── Modal ─── */
.pay-modal-backdrop[b-vpunwuansv] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(2px);
}

.pay-modal[b-vpunwuansv] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px -10px rgba(28, 25, 23, .25);
}

.pay-modal-hd[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--d-line);
}

    .pay-modal-hd h3[b-vpunwuansv] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .pay-modal-hd .code[b-vpunwuansv] {
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11.5px;
        color: var(--d-ink-3);
        margin-top: 2px;
    }

.pay-modal-close[b-vpunwuansv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .12s, color .12s;
}

    .pay-modal-close:hover[b-vpunwuansv] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.pay-modal-body[b-vpunwuansv] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pay-status-banner[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--d-r);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    font-size: 12px;
    color: var(--d-ink-2);
    font-weight: 500;
}

.pay-amount-display[b-vpunwuansv] {
    text-align: center;
    padding: 8px 0;
}

    .pay-amount-display .v[b-vpunwuansv] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -0.03em;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

        .pay-amount-display .v.good[b-vpunwuansv] {
            color: var(--d-good);
        }

        .pay-amount-display .v.danger[b-vpunwuansv] {
            color: var(--d-danger);
        }

    .pay-amount-display .c[b-vpunwuansv] {
        font-size: 11px;
        color: var(--d-ink-3);
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 4px;
    }

.pay-info-grid[b-vpunwuansv] {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.pay-info-row[b-vpunwuansv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--d-line-2);
}

    .pay-info-row:last-child[b-vpunwuansv] {
        border-bottom: 0;
    }

    .pay-info-row .k[b-vpunwuansv] {
        color: var(--d-ink-3);
        font-size: 12px;
        font-weight: 500;
    }

    .pay-info-row .val[b-vpunwuansv] {
        color: var(--d-ink);
        font-weight: 500;
        text-align: right;
    }

        .pay-info-row .val.mono[b-vpunwuansv] {
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            font-variant-numeric: tabular-nums;
        }

        .pay-info-row .val.good[b-vpunwuansv] {
            color: var(--d-good);
        }

        .pay-info-row .val.danger[b-vpunwuansv] {
            color: var(--d-danger);
        }

.pay-info-block[b-vpunwuansv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 0;
}

    .pay-info-block .k[b-vpunwuansv] {
        color: var(--d-ink-3);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .pay-info-block .body[b-vpunwuansv] {
        font-size: 12.5px;
        color: var(--d-ink-2);
        background: var(--d-surface-2);
        border: 1px solid var(--d-line);
        border-radius: var(--d-r);
        padding: 10px 12px;
        line-height: 1.5;
    }

    .pay-info-block pre[b-vpunwuansv] {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11.5px;
        color: var(--d-ink-2);
        background: var(--d-surface-2);
        border: 1px solid var(--d-line);
        border-radius: var(--d-r);
        padding: 10px 12px;
        margin: 0;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 200px;
        overflow-y: auto;
    }

/* ─── Responsive ─── */
@media (max-width: 1023px) {
    .pay-kpis[b-vpunwuansv] {
        grid-template-columns: repeat(2, 1fr);
    }

        .pay-kpis .pay-kpi:nth-child(2)[b-vpunwuansv] {
            border-right: 0;
        }

        .pay-kpis .pay-kpi:nth-child(-n+2)[b-vpunwuansv] {
            border-bottom: 1px solid var(--d-line);
        }

    .pay-hero[b-vpunwuansv] {
        grid-template-columns: 1fr;
    }

    .pay-hero-actions[b-vpunwuansv] {
        flex-wrap: wrap;
    }

    .pay-search input[b-vpunwuansv] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .pay-hero[b-vpunwuansv],
    .pay-filters[b-vpunwuansv],
    .pay-content[b-vpunwuansv],
    .pay-paging[b-vpunwuansv] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pay-kpis[b-vpunwuansv] {
        grid-template-columns: 1fr;
    }

        .pay-kpis .pay-kpi[b-vpunwuansv] {
            border-right: 0;
            border-bottom: 1px solid var(--d-line);
        }

            .pay-kpis .pay-kpi:last-child[b-vpunwuansv] {
                border-bottom: 0;
            }
}

/* ═══════════════════════════════════════════════════════════════
   Tiền cần đối soát — khoản cổng đã thu mà hệ thống chưa ghi vào đơn.
   Tông CẢNH BÁO (danger) chứ không phải accent cam của trang: đây là
   tiền của khách đang treo, phải nhìn là thấy khác mọi thứ còn lại.
   ═══════════════════════════════════════════════════════════════ */

.pay-inc-card[b-vpunwuansv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

    .pay-inc-card.alarm[b-vpunwuansv] {
        border-color: #fca5a5;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
    }

.pay-inc-hd[b-vpunwuansv] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--d-ink);
}

    .pay-inc-hd:hover[b-vpunwuansv] {
        background: var(--d-surface-2);
    }

.pay-inc-icon[b-vpunwuansv] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    background: var(--d-danger-soft);
    color: var(--d-danger);
    font-size: 15px;
}

.pay-inc-hd-txt[b-vpunwuansv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

    .pay-inc-hd-txt b[b-vpunwuansv] {
        font-size: 14px;
        font-weight: 600;
    }

    .pay-inc-hd-txt small[b-vpunwuansv] {
        font-size: 12px;
        color: var(--d-ink-3);
    }

.pay-inc-count[b-vpunwuansv] {
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pay-inc-body[b-vpunwuansv] {
    border-top: 1px solid var(--d-line-2);
    padding: 12px 16px 16px;
}

.pay-inc-toolbar[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.pay-inc-hint[b-vpunwuansv] {
    font-size: 12px;
    color: var(--d-ink-3);
}

.pay-inc-done[b-vpunwuansv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--d-good-soft);
    color: #166534;
    font-size: 13px;
}

.pay-inc-empty[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--d-ink-3);
    font-size: 13px;
}

.pay-inc-item[b-vpunwuansv] {
    border: 1px solid var(--d-line-2);
    border-left: 3px solid var(--d-danger);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--d-surface);
}

    .pay-inc-item.resolved[b-vpunwuansv] {
        border-left-color: var(--d-ink-4);
        background: var(--d-surface-2);
    }

    .pay-inc-item:last-child[b-vpunwuansv] {
        margin-bottom: 0;
    }

.pay-inc-item-top[b-vpunwuansv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pay-inc-reason[b-vpunwuansv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.pay-inc-amt[b-vpunwuansv] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--d-danger);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-inc-meta[b-vpunwuansv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

.pay-inc-detail[b-vpunwuansv] {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--d-surface-2);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d-ink-2);
}

.pay-inc-actions[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pay-inc-can-apply[b-vpunwuansv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-good);
}

.pay-inc-blocker[b-vpunwuansv] {
    font-size: 12px;
    color: var(--d-ink-4);
}

.pay-inc-resolved[b-vpunwuansv] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .pay-inc-resolved b[b-vpunwuansv] {
        color: var(--d-ink-2);
    }

    .pay-inc-resolved .note[b-vpunwuansv] {
        color: var(--d-ink-3);
        font-style: italic;
    }

/* ── Hộp thoại xử lý ── */

.pay-inc-choices[b-vpunwuansv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
}

.pay-inc-choice[b-vpunwuansv] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    cursor: pointer;
}

    .pay-inc-choice:hover[b-vpunwuansv] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    /* Khoá thì phải NHÌN RA là khoá, kèm lý do ở dòng small bên trong. */
    .pay-inc-choice.disabled[b-vpunwuansv] {
        opacity: 0.55;
        cursor: not-allowed;
        background: var(--d-surface-2);
    }

        .pay-inc-choice.disabled:hover[b-vpunwuansv] {
            border-color: var(--d-line);
            background: var(--d-surface-2);
        }

    .pay-inc-choice input[b-vpunwuansv] {
        margin-top: 3px;
        accent-color: var(--d-accent);
    }

    .pay-inc-choice span[b-vpunwuansv] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .pay-inc-choice b[b-vpunwuansv] {
        font-size: 13.5px;
        font-weight: 600;
    }

    .pay-inc-choice small[b-vpunwuansv] {
        font-size: 12px;
        color: var(--d-ink-3);
        line-height: 1.45;
    }

.pay-inc-note[b-vpunwuansv] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    font-family: inherit;
    /* 16px ở mobile để iOS không tự phóng khi focus. */
    font-size: 14px;
    color: var(--d-ink);
    resize: vertical;
}

    .pay-inc-note:focus[b-vpunwuansv] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px var(--d-accent-soft);
    }

.pay-info-block .k .req[b-vpunwuansv] {
    color: var(--d-danger);
    font-style: normal;
}

.pay-inc-error[b-vpunwuansv] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--d-danger-soft);
    color: #991b1b;
    font-size: 13px;
}

.pay-modal-ft[b-vpunwuansv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
}

@media (max-width: 640px) {
    .pay-inc-note[b-vpunwuansv] {
        font-size: 16px;
    }
}
/* /src/Features/Payment/Pages/Payment/Checkout.razor.rz.scp.css */
/* Checkout — Manager Dashboard v4 theme */
.defco-root[b-bxzprtfvzv] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100vh;
    padding: 96px 24px 24px;
}

.defco-wrap[b-bxzprtfvzv] {
    max-width: 1200px;
    margin: 0 auto;
}

.defco-hero[b-bxzprtfvzv] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.defco-hero h1[b-bxzprtfvzv] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.defco-hero h1 em[b-bxzprtfvzv] {
    font-style: normal;
    color: var(--d-ink-3);
    font-weight: 500;
}

.defco-hero .sub[b-bxzprtfvzv] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.defco-loading[b-bxzprtfvzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

.defco-empty[b-bxzprtfvzv] {
    max-width: 420px;
    margin: 60px auto;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 24px;
    text-align: center;
}

.defco-empty.bad[b-bxzprtfvzv] {
    border-color: #fecaca;
}

.defco-empty-ico[b-bxzprtfvzv] {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--d-accent-grad-soft);
    border: 1px solid #fed7aa;
    display: grid;
    place-items: center;
    color: var(--d-accent);
}

.defco-empty.bad .defco-empty-ico[b-bxzprtfvzv] {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--d-danger);
}

.defco-empty h2[b-bxzprtfvzv] {
    margin: 0 0 6px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
}

.defco-empty p[b-bxzprtfvzv] {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--d-ink-3);
}

.defco-grid[b-bxzprtfvzv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 1024px) {
    .defco-grid[b-bxzprtfvzv] {
        grid-template-columns: 8fr 4fr;
    }
}

.defco-main[b-bxzprtfvzv],
.defco-side[b-bxzprtfvzv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.defco-side-sticky[b-bxzprtfvzv] {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.defco-card[b-bxzprtfvzv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.defco-card-hd[b-bxzprtfvzv] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.defco-card-hd h3[b-bxzprtfvzv] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.defco-card-hd h3 .count[b-bxzprtfvzv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    text-transform: none;
    letter-spacing: 0;
}

.defco-card-hd .pre-code[b-bxzprtfvzv] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.defco-card-bd[b-bxzprtfvzv] {
    padding: 16px;
}

.defco-link-btn[b-bxzprtfvzv] {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--d-ink-3);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: color .12s;
}

.defco-link-btn:hover[b-bxzprtfvzv] {
    color: var(--d-danger);
}

.defco-link-btn.accent:hover[b-bxzprtfvzv] {
    color: var(--d-accent);
}

/* Cart items */
.defco-items > * + *[b-bxzprtfvzv] {
    border-top: 1px solid var(--d-line-2);
}

.defco-item[b-bxzprtfvzv] {
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: background .12s;
}

.defco-item:hover[b-bxzprtfvzv] {
    background: var(--d-surface-2);
}

.defco-item-thumb[b-bxzprtfvzv] {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    flex-shrink: 0;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.defco-item-thumb img[b-bxzprtfvzv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.defco-item-info[b-bxzprtfvzv] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.defco-item-name[b-bxzprtfvzv] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defco-item-sub[b-bxzprtfvzv] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defco-item-tag[b-bxzprtfvzv] {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.defco-item-price[b-bxzprtfvzv] {
    text-align: right;
    flex-shrink: 0;
}

.defco-item-price .num[b-bxzprtfvzv] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}

.defco-item-price button[b-bxzprtfvzv] {
    margin-top: 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--d-ink-4);
    font-size: 11.5px;
    transition: color .12s;
    padding: 0;
}

.defco-item-price button:hover[b-bxzprtfvzv] {
    color: var(--d-danger);
}

/* Contact summary */
.defco-contact-sum[b-bxzprtfvzv] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.defco-avatar[b-bxzprtfvzv] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    border: 2px solid var(--d-accent-soft);
}

.defco-avatar img[b-bxzprtfvzv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.defco-contact-info[b-bxzprtfvzv] {
    flex: 1;
    min-width: 0;
}

.defco-contact-name[b-bxzprtfvzv] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
}

.defco-contact-line[b-bxzprtfvzv] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.defco-verified[b-bxzprtfvzv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--d-good-soft);
    color: #166534;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.defco-warn-pill[b-bxzprtfvzv] {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--d-warn-soft);
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    color: #92400e;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.defco-warn-pill button[b-bxzprtfvzv] {
    background: transparent;
    border: 0;
    color: #92400e;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.defco-info-pill[b-bxzprtfvzv] {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--d-r);
    color: #1e40af;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.defco-info-pill a[b-bxzprtfvzv] {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
}

.defco-edit-row[b-bxzprtfvzv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.defco-edit-row button[b-bxzprtfvzv] {
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.defco-edit-row button:hover[b-bxzprtfvzv] {
    color: var(--d-ink);
}

.defco-form-grid[b-bxzprtfvzv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .defco-form-grid[b-bxzprtfvzv] {
        grid-template-columns: 1fr 1fr;
    }

    .defco-form-grid .col-2[b-bxzprtfvzv] {
        grid-column: 1 / -1;
    }
}

.defco-field label[b-bxzprtfvzv] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.defco-field label .req[b-bxzprtfvzv] {
    color: var(--d-danger);
    margin-left: 2px;
}

.defco-input[b-bxzprtfvzv],
.defco-textarea[b-bxzprtfvzv] {
    width: 100%;
    padding: 0 12px;
    height: 38px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    font-family: inherit;
}

.defco-textarea[b-bxzprtfvzv] {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

.defco-input:focus[b-bxzprtfvzv],
.defco-textarea:focus[b-bxzprtfvzv] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
}

.defco-field-error[b-bxzprtfvzv] {
    color: var(--d-danger);
    font-size: 11.5px;
    margin-top: 4px;
}

/* eSIM option */
.defco-esim-opt[b-bxzprtfvzv] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.defco-esim-opt input[b-bxzprtfvzv] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--d-accent);
    cursor: pointer;
}

.defco-esim-opt b[b-bxzprtfvzv] {
    display: block;
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 600;
}

.defco-esim-opt small[b-bxzprtfvzv] {
    display: block;
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Payment methods */
.defco-pay-cat[b-bxzprtfvzv] {
    font-size: 11px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 16px 0 8px;
}

.defco-pay-cat:first-child[b-bxzprtfvzv] {
    margin-top: 0;
}

.defco-pay-grid[b-bxzprtfvzv] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .defco-pay-grid[b-bxzprtfvzv] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.defco-pay-radio[b-bxzprtfvzv] {
    cursor: pointer;
}

.defco-pay-tile[b-bxzprtfvzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    border: 1.5px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    text-align: center;
    min-height: 100px;
    transition: border-color .12s, background .12s;
}

.defco-pay-tile.selected[b-bxzprtfvzv] {
    border-color: var(--d-accent);
    background: var(--d-accent-soft);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, .08);
}

.defco-pay-tile:hover[b-bxzprtfvzv] {
    border-color: var(--d-ink-4);
}

.defco-pay-tile.selected:hover[b-bxzprtfvzv] {
    border-color: var(--d-accent);
}

.defco-pay-tile img[b-bxzprtfvzv] {
    height: 36px;
    max-width: 80px;
    object-fit: contain;
}

.defco-pay-fallback[b-bxzprtfvzv] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 11px;
    border: 1px solid var(--d-line);
}

.defco-pay-name[b-bxzprtfvzv] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-2);
    line-height: 1.25;
}

.defco-pay-loading[b-bxzprtfvzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

/* Summary */
.defco-sum-row[b-bxzprtfvzv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
}

.defco-sum-row .lbl[b-bxzprtfvzv] {
    color: var(--d-ink-3);
}

.defco-sum-row .v[b-bxzprtfvzv] {
    font-weight: 500;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

.defco-sum-row .v.accent[b-bxzprtfvzv] {
    color: var(--d-accent);
}

.defco-sum-row .v.good[b-bxzprtfvzv] {
    color: var(--d-good);
}

.defco-sum-total[b-bxzprtfvzv] {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--d-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.defco-sum-total .lbl[b-bxzprtfvzv] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
}

.defco-sum-total .v[b-bxzprtfvzv] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--d-accent);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

/* CTA & alerts */
.defco-submit-err[b-bxzprtfvzv] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--d-r);
    padding: 12px 14px;
    font-size: 12.5px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.defco-cta[b-bxzprtfvzv] {
    width: 100%;
    height: 48px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18), 0 6px 16px -4px rgba(234, 88, 12, .25);
    transition: background .12s, transform .08s;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.015em;
}

.defco-cta:hover[b-bxzprtfvzv] {
    background: var(--d-accent-grad-hover);
}

.defco-cta:active[b-bxzprtfvzv] {
    transform: translateY(1px);
}

.defco-cta:disabled[b-bxzprtfvzv] {
    opacity: .65;
    cursor: not-allowed;
}

.defco-trust[b-bxzprtfvzv] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.defco-trust-row[b-bxzprtfvzv] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--d-ink-2);
}

.defco-trust-row svg.good[b-bxzprtfvzv] {
    color: var(--d-good);
}

.defco-trust-row svg.info[b-bxzprtfvzv] {
    color: #2563eb;
}

.defco-trust-row svg.accent[b-bxzprtfvzv] {
    color: var(--d-accent);
}

.defco-back-link[b-bxzprtfvzv] {
    display: block;
    text-align: center;
    font-size: 12.5px;
    color: var(--d-ink-3);
    text-decoration: none;
    padding: 4px 0;
    transition: color .12s;
}

.defco-back-link:hover[b-bxzprtfvzv] {
    color: var(--d-accent);
    text-decoration: none;
}
/* /src/Features/Payment/Pages/Payment/PaymentReturn.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   PaymentReturn (public) — Manager Dashboard v4 theme
   Warm-neutral palette, gradient cam cho CTA, success xanh giữ nguyên.
   ═══════════════════════════════════════════════════════════════ */

.pubpr-root[b-g47bx8x8gx] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    background: var(--d-bg) !important;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    min-height: calc(100vh - 96px);
}

/* Headings — Inter Tight */
.pubpr-root[b-g47bx8x8gx]  h1,
.pubpr-root[b-g47bx8x8gx]  h2,
.pubpr-root[b-g47bx8x8gx]  h3 {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    font-weight: 600;
}

/* Tabular numerics */
.pubpr-root[b-g47bx8x8gx]  .font-mono,
.pubpr-root[b-g47bx8x8gx]  .tracking-widest {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ─── Cards ─── */
.pubpr-root[b-g47bx8x8gx]  .bg-white.rounded-xl.border,
.pubpr-root[b-g47bx8x8gx]  .bg-white.rounded-2xl.border,
.pubpr-root[b-g47bx8x8gx]  .bg-white.rounded-2xl.shadow-xl {
    background: var(--d-surface);
    border: 1px solid var(--d-line) !important;
    border-radius: var(--d-r);
    box-shadow: none !important;
}

.pubpr-root[b-g47bx8x8gx]  .border-gray-100,
.pubpr-root[b-g47bx8x8gx]  .border-gray-200 {
    border-color: var(--d-line) !important;
}

.pubpr-root[b-g47bx8x8gx]  .bg-gray-50,
.pubpr-root[b-g47bx8x8gx]  .bg-gray-100 {
    background: var(--d-surface-2) !important;
}

/* ─── CTA buttons (orange) → gradient theme ─── */
.pubpr-root[b-g47bx8x8gx]  .bg-orange-500,
.pubpr-root[b-g47bx8x8gx]  .bg-orange-600 {
    background: var(--d-accent-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.22);
    border-radius: var(--d-r) !important;
}

    .pubpr-root[b-g47bx8x8gx]  .bg-orange-500:hover,
    .pubpr-root[b-g47bx8x8gx]  .bg-orange-600:hover,
    .pubpr-root[b-g47bx8x8gx]  .hover\:bg-orange-600:hover {
        background: var(--d-accent-grad-hover) !important;
        color: #fff !important;
    }

.pubpr-root[b-g47bx8x8gx]  .text-orange-600,
.pubpr-root[b-g47bx8x8gx]  .text-orange-500,
.pubpr-root[b-g47bx8x8gx]  .text-orange-700 {
    color: var(--d-accent) !important;
}

/* Total amount — keep orange but warm */
.pubpr-root[b-g47bx8x8gx]  .text-orange-600.text-base {
    color: var(--d-accent) !important;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* Loader spinner blue → accent */
.pubpr-root[b-g47bx8x8gx]  .border-blue-600 {
    border-color: var(--d-accent) !important;
}

/* Support email link */
.pubpr-root[b-g47bx8x8gx]  .text-blue-500 {
    color: var(--d-accent) !important;
}

/* Success / Failure / Warning banners — keep semantic but soften */
.pubpr-root[b-g47bx8x8gx]  .bg-green-100 {
    background: var(--d-good-soft) !important;
}

.pubpr-root[b-g47bx8x8gx]  .text-green-600,
.pubpr-root[b-g47bx8x8gx]  .text-green-700,
.pubpr-root[b-g47bx8x8gx]  .text-green-800 {
    color: var(--d-good) !important;
}

.pubpr-root[b-g47bx8x8gx]  .bg-red-100 {
    background: #fee2e2 !important;
}

.pubpr-root[b-g47bx8x8gx]  .text-red-600 {
    color: var(--d-danger) !important;
}

.pubpr-root[b-g47bx8x8gx]  .bg-amber-50 {
    background: var(--d-warn-soft) !important;
}

.pubpr-root[b-g47bx8x8gx]  .border-amber-200 {
    border-color: #fde68a !important;
}

.pubpr-root[b-g47bx8x8gx]  .text-amber-800 {
    color: var(--d-warn) !important;
}

/* PNR emerald block — neutralize bright green box */
.pubpr-root[b-g47bx8x8gx]  .bg-emerald-50 {
    background: #ecfdf5 !important;
}

.pubpr-root[b-g47bx8x8gx]  .text-emerald-800,
.pubpr-root[b-g47bx8x8gx]  .text-emerald-700,
.pubpr-root[b-g47bx8x8gx]  .text-emerald-600 {
    color: #047857 !important;
}

/* Body text tones */
.pubpr-root[b-g47bx8x8gx]  .text-gray-900 {
    color: var(--d-ink);
}

.pubpr-root[b-g47bx8x8gx]  .text-gray-700,
.pubpr-root[b-g47bx8x8gx]  .text-gray-800 {
    color: var(--d-ink-2);
}

.pubpr-root[b-g47bx8x8gx]  .text-gray-500,
.pubpr-root[b-g47bx8x8gx]  .text-gray-600 {
    color: var(--d-ink-3);
}

.pubpr-root[b-g47bx8x8gx]  .text-gray-400 {
    color: var(--d-ink-4);
}

/* Uppercase eyebrow card titles */
.pubpr-root[b-g47bx8x8gx]  h3.text-xs.font-semibold.text-gray-500.uppercase {
    color: var(--d-ink-3);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Order code centered chip — accent soft */
.pubpr-root[b-g47bx8x8gx]  .rounded-lg.bg-gray-50.border.border-gray-100 {
    background: var(--d-surface-2) !important;
    border-color: var(--d-line) !important;
    border-radius: var(--d-r) !important;
}

/* Outline secondary buttons */
.pubpr-root[b-g47bx8x8gx]  button.bg-white.border.border-gray-200,
.pubpr-root[b-g47bx8x8gx]  button.bg-white.border.border-gray-300 {
    background: var(--d-surface) !important;
    border: 1px solid var(--d-line) !important;
    color: var(--d-ink-2) !important;
    border-radius: var(--d-r) !important;
}

    .pubpr-root[b-g47bx8x8gx]  button.bg-white.border.border-gray-200:hover,
    .pubpr-root[b-g47bx8x8gx]  button.bg-white.border.border-gray-300:hover {
        background: var(--d-surface-2) !important;
        color: var(--d-ink) !important;
    }

/* ============================================================================
   Ticket Issued banner — celebration animation
   Lần đầu render banner xanh (khi BE push SignalR event hoặc polling detect),
   scale-in + glow ring để user nhận biết "vé vừa xuất" rõ ràng. Pulse 1 lần
   rồi settle vào trạng thái normal.
   ============================================================================ */
.pubpr-root[b-g47bx8x8gx]  .ticket-issued-card {
    animation: ticket-issued-in-b-g47bx8x8gx 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               ticket-issued-glow-b-g47bx8x8gx 1.4s ease-out 0.6s 1;
}

.pubpr-root[b-g47bx8x8gx]  .ticket-issued-icon {
    animation: ticket-icon-pop-b-g47bx8x8gx 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s both;
}

@keyframes ticket-issued-in-b-g47bx8x8gx {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes ticket-issued-glow-b-g47bx8x8gx {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0.12);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes ticket-icon-pop-b-g47bx8x8gx {
    0% {
        transform: scale(0) rotate(-180deg);
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* ============================================================================
   NeedsManualReview banner — attention animation (KHÁC celebration)
   Mục tiêu: gây chú ý nhưng không vui — pulse amber 3 lần rồi settle.
   Icon shake nhẹ. Tránh emoji vui như 🎉.
   ============================================================================ */
.pubpr-root[b-g47bx8x8gx]  .ticket-needsreview-card {
    animation: ticket-needsreview-in-b-g47bx8x8gx 0.5s ease-out both,
               ticket-needsreview-pulse-b-g47bx8x8gx 1.6s ease-in-out 0.5s 2;
}

.pubpr-root[b-g47bx8x8gx]  .ticket-needsreview-icon {
    animation: ticket-icon-shake-b-g47bx8x8gx 0.6s ease-in-out 0.3s 2;
}

@keyframes ticket-needsreview-in-b-g47bx8x8gx {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ticket-needsreview-pulse-b-g47bx8x8gx {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.18);
    }
}

@keyframes ticket-icon-shake-b-g47bx8x8gx {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-8deg);
    }
    75% {
        transform: rotate(8deg);
    }
}
/* /src/Features/Public/Pages/Error.razor.rz.scp.css */
/* Error page — Manager Dashboard v4 theme */
.err-root[b-p5mvig6awo] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    padding: 40px 20px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.err-shell[b-p5mvig6awo] {
    max-width: 720px;
    margin: 0 auto;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.err-hd[b-p5mvig6awo] {
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: center;
    gap: 14px;
}

.err-icon[b-p5mvig6awo] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-danger-soft);
    color: var(--d-danger);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.err-hd h1[b-p5mvig6awo] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.2;
}

.err-hd h2[b-p5mvig6awo] {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.err-body[b-p5mvig6awo] {
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.err-rid[b-p5mvig6awo] {
    font-size: 12.5px;
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .err-rid-lbl[b-p5mvig6awo] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .err-rid code[b-p5mvig6awo] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        color: var(--d-accent);
        background: var(--d-accent-soft);
        padding: 2px 8px;
        border-radius: 6px;
    }

.err-note[b-p5mvig6awo] {
    background: var(--d-warn-soft);
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
    color: var(--d-ink-2);
    font-size: 14px;
    line-height: 1.55;
}

    .err-note h3[b-p5mvig6awo] {
        margin: 0 0 6px;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-warn);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .err-note p[b-p5mvig6awo] {
        margin: 0 0 6px;
    }

    .err-note p:last-child[b-p5mvig6awo] {
        margin-bottom: 0;
    }
/* /src/Features/Public/Pages/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   PUBLIC HOME — hệ "Bầu trời Ngọc Mai" (đồng bộ header + 5 trang public)
   Navy hàng không + xanh trời nhạt + cam hoa mai. Đổi DA từ warm-neutral
   cũ, GIỮ nguyên bố cục + cành mai (hoa mai = hình ảnh thương hiệu).
   ═══════════════════════════════════════════════════════════════════ */
.home-root[b-abuncxakom] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f3f8fd;   /* sky-50 */
    --d-line: #d8e6f2;        /* sky-line */
    --d-line-2: #e8f2fb;
    --d-ink: #0f2438;         /* navy boarding-pass */
    --d-ink-2: #3f5670;
    --d-ink-3: #6b7f95;
    --d-ink-4: #9db1c4;
    --d-accent: #ea580c;
    --d-accent-deep: #c2410c;
    --d-accent-soft: #fff3ea;
    --d-accent-grad: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff3ea 0%, #ffe4cc 100%);
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    font-family: 'Be Vietnam Pro', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Map các class Tailwind tông ấm còn sót trong markup về thang navy */
.home-root .text-stone-500[b-abuncxakom] { color: var(--d-ink-3); }

/* Section eyebrow: mono + chấm hoa mai (đồng bộ kicker các trang public) */
.home-eyebrow[b-abuncxakom] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-accent-deep);
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.home-eyebrow[b-abuncxakom]::before {
    content: '';
    width: 12px;
    height: 12px;
    flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 -16 32 32'%3E%3Cg fill='%23f97316' stroke='%23c2410c' stroke-width='1.3'%3E%3Ccircle cx='0' cy='-8.2' r='6.4'/%3E%3Ccircle cx='7.8' cy='-2.5' r='6.4'/%3E%3Ccircle cx='4.8' cy='6.6' r='6.4'/%3E%3Ccircle cx='-4.8' cy='6.6' r='6.4'/%3E%3Ccircle cx='-7.8' cy='-2.5' r='6.4'/%3E%3C/g%3E%3Ccircle r='3' fill='%23fff7ed'/%3E%3C/svg%3E") center/contain no-repeat;
}

.home-title[b-abuncxakom] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    line-height: 1.15;
    text-wrap: balance;
}

/* Service card */
.home-svc[b-abuncxakom] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-svc-icon[b-abuncxakom] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

    .home-svc-icon.accent[b-abuncxakom] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(234, 88, 12, .18), 0 4px 12px -2px rgba(234, 88, 12, .22);
    }

.home-svc h3[b-abuncxakom] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

.home-svc p[b-abuncxakom] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.55;
    max-width: 14rem;
    margin: 0;
}

/* Steps */
.home-step-icon[b-abuncxakom] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    padding: 14px;
    color: var(--d-ink-2);
    box-shadow: 0 1px 2px rgba(15, 36, 56, .05);
    transition: border-color .15s, box-shadow .15s;
}

.group:hover .home-step-icon[b-abuncxakom] {
    border-color: var(--d-accent);
    box-shadow: 0 4px 14px -4px rgba(234, 88, 12, .25);
}

.home-step h3[b-abuncxakom] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

.home-step p[b-abuncxakom] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.6;
    max-width: 32rem;
    margin: 0;
}

/* Booking demo card */
.home-bkcard[b-abuncxakom] {
    width: 100%;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 30px -10px rgba(15, 36, 56, .18);
}

.home-bkcard-img[b-abuncxakom] {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    height: 180px;
}

    .home-bkcard-img img[b-abuncxakom] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.home-bkcard-route[b-abuncxakom] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.home-bkcard-meta[b-abuncxakom] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-bkcard-codelbl[b-abuncxakom] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Mono dữ liệu bay: IBM Plex Mono (có subset vietnamese) + fallback Be Vietnam Pro
   — Consolas/Courier thiếu glyph Việt */
.home-bkcard-code[b-abuncxakom] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-accent);
}

.home-bkcard-airline[b-abuncxakom] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 12px;
    margin-top: 14px;
}

.home-bkcard-airline-ico[b-abuncxakom] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(234, 88, 12, .18);
}

.home-bkcard-lbl[b-abuncxakom] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.home-bkcard-val[b-abuncxakom] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.home-bkcard-times[b-abuncxakom] {
    font-family: 'IBM Plex Mono', 'Be Vietnam Pro', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.home-bkcard-foot[b-abuncxakom] {
    border-top: 1px solid var(--d-line);
    margin-top: 14px;
    padding-top: 14px;
}

.home-bkcard-total[b-abuncxakom] {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--d-accent);
    font-variant-numeric: tabular-nums;
}

/* Mini processing chip */
.home-bkmini[b-abuncxakom] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 20px -8px rgba(15, 36, 56, .18);
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-bkmini-ico[b-abuncxakom] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-accent-grad-soft);
    color: var(--d-accent);
    border: 1px solid #fed7aa;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.home-bkmini-name[b-abuncxakom] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.home-bkmini-sub[b-abuncxakom] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 1px;
}

.home-bkmini-pill[b-abuncxakom] {
    display: inline-block;
    margin-top: 4px;
    background: #fef3c7;
    color: #b45309;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
}

/* Airlines section */
.home-airlines[b-abuncxakom] {
    background: var(--d-bg);
    position: relative;
}

.home-airline-card[b-abuncxakom] {
    height: 90px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

    .home-airline-card:hover[b-abuncxakom] {
        border-color: var(--d-accent);
        box-shadow: 0 6px 18px -8px rgba(234, 88, 12, .25);
        transform: translateY(-2px);
    }

@media (min-width: 768px) {
    .home-airline-card[b-abuncxakom] { height: 110px; }
}

/* Khối đăng ký nhận tin: 08/08 đã chuyển sang component dùng chung
   Features/_Shared/Marketing/MaiPanel + NewsletterPanel (khu /news dùng lại y hệt).
   Toàn bộ .home-sub-* cũ đã xoá khỏi đây — sửa giao diện khối đó ở component. */

/* Popup */
.home-popup-close[b-abuncxakom] {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 36, 56, .15);
    z-index: 10;
    transition: color .12s;
}

    .home-popup-close:hover[b-abuncxakom] { color: var(--d-ink); }

/* Moved from inline <style> in Index.razor (now scoped). */
    @keyframes airline-scroll-b-abuncxakom {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    .airline-track[b-abuncxakom] {
        display: flex;
        width: max-content;
        animation: airline-scroll-b-abuncxakom 30s linear infinite;
    }

    .airline-wrapper:hover .airline-track[b-abuncxakom] {
        animation-play-state: paused;
    }

    .scrollbar-hide[b-abuncxakom]::-webkit-scrollbar { display: none; }
    .scrollbar-hide[b-abuncxakom] { -ms-overflow-style: none; scrollbar-width: none; }
/* /src/Features/Recruitment/Pages/Manager/ApplicationsIndex.razor.rz.scp.css */
/* ApplicationsIndex — Manager Dashboard v4 — prefix: appls- */
.appls-root[b-j4nr1t0h5a] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-info: #2563eb;
    --d-violet: #8b5cf6;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.appls-shell[b-j4nr1t0h5a] { display: flex; flex-direction: column; height: calc(100vh - 64px); }

.appls-hero[b-j4nr1t0h5a] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 16px 28px 12px; border-bottom: 1px solid var(--d-line); }
.appls-hero h1[b-j4nr1t0h5a] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.appls-hero h1 em[b-j4nr1t0h5a] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.appls-hero-meta[b-j4nr1t0h5a] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.appls-hero-meta .dot[b-j4nr1t0h5a] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.appls-kpis[b-j4nr1t0h5a] { display: grid; grid-template-columns: repeat(4,1fr); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; margin: 12px 28px 0; }
.appls-kpi[b-j4nr1t0h5a] { padding: 14px 16px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.appls-kpi:last-child[b-j4nr1t0h5a] { border-right: 0; }
.appls-kpi-lbl[b-j4nr1t0h5a] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.appls-kpi-dot[b-j4nr1t0h5a] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); flex-shrink: 0; }
.appls-kpi-dot.accent[b-j4nr1t0h5a] { background: var(--d-accent-grad); }
.appls-kpi-dot.good[b-j4nr1t0h5a] { background: var(--d-good); }
.appls-kpi-dot.warn[b-j4nr1t0h5a] { background: var(--d-warn); }
.appls-kpi-dot.danger[b-j4nr1t0h5a] { background: var(--d-danger); }
.appls-kpi-val[b-j4nr1t0h5a] { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; font-variant-numeric: tabular-nums; }

.appls-toolbar[b-j4nr1t0h5a] { display: flex; align-items: center; gap: 8px; padding: 10px 28px; flex-wrap: wrap; }
.appls-search[b-j4nr1t0h5a] { position: relative; width: 280px; max-width: 100%; }
.appls-search svg[b-j4nr1t0h5a] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--d-ink-4); pointer-events: none; }
.appls-search input[b-j4nr1t0h5a] { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; }
.appls-search input:focus[b-j4nr1t0h5a] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.appls-select[b-j4nr1t0h5a] { height: 36px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; }
.appls-select:focus[b-j4nr1t0h5a] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

.appls-btn[b-j4nr1t0h5a] { height: 36px; padding: 0 14px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); color: var(--d-ink); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: background .12s; }
.appls-btn:hover[b-j4nr1t0h5a] { background: var(--d-surface-2); }
.appls-btn-accent[b-j4nr1t0h5a] { background: var(--d-accent-grad); color: #fff; border-color: transparent; }
.appls-btn-accent:hover[b-j4nr1t0h5a] { background: var(--d-accent-grad-hover); color: #fff; }
.appls-btn-sm[b-j4nr1t0h5a] { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.appls-btn-sm.good[b-j4nr1t0h5a] { background: var(--d-good); color: #fff; border-color: transparent; }
.appls-btn-sm.good:hover[b-j4nr1t0h5a] { background: #15803d; }
.appls-btn-sm.warn[b-j4nr1t0h5a] { background: var(--d-warn); color: #fff; border-color: transparent; }
.appls-btn-sm.warn:hover[b-j4nr1t0h5a] { background: #b45309; }
.appls-btn-sm.danger-soft[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-danger) 12%, #fff); color: var(--d-danger); border-color: color-mix(in srgb, var(--d-danger) 30%, #fff); }
.appls-btn-sm.violet[b-j4nr1t0h5a] { background: var(--d-violet); color: #fff; border-color: transparent; }
.appls-btn-sm.indigo[b-j4nr1t0h5a] { background: #4f46e5; color: #fff; border-color: transparent; }
.appls-btn-sm.warn-soft[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-warn) 12%, #fff); color: color-mix(in srgb, var(--d-warn) 80%, #000); border-color: color-mix(in srgb, var(--d-warn) 30%, #fff); }

.appls-content[b-j4nr1t0h5a] { flex: 1; min-height: 0; padding: 0 28px 12px; display: flex; }
.appls-card[b-j4nr1t0h5a] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: auto; flex: 1; }

.appls-detail[b-j4nr1t0h5a] { padding: 16px 18px; border-bottom: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 14px; background: var(--d-surface-2); }
.appls-detail-hd[b-j4nr1t0h5a] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.appls-detail-hd h2[b-j4nr1t0h5a] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 17px; font-weight: 600; color: var(--d-ink); letter-spacing: -0.02em; }
.appls-detail-hd p[b-j4nr1t0h5a] { margin: 2px 0 0; font-size: 12px; color: var(--d-ink-3); }
.appls-close[b-j4nr1t0h5a] { background: transparent; border: 0; color: var(--d-ink-3); cursor: pointer; font-size: 16px; width: 28px; height: 28px; border-radius: 6px; }
.appls-close:hover[b-j4nr1t0h5a] { background: var(--d-line-2); color: var(--d-ink); }

.appls-detail-grid[b-j4nr1t0h5a] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; font-size: 14px; }
@media (max-width: 768px) { .appls-detail-grid[b-j4nr1t0h5a] { grid-template-columns: 1fr 1fr; } }
.appls-dl-key[b-j4nr1t0h5a] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; display: block; }
.appls-dl-val[b-j4nr1t0h5a] { font-size: 14px; color: var(--d-ink); font-weight: 500; display: block; margin-top: 2px; }

.appls-cover[b-j4nr1t0h5a] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 12px 14px; }
.appls-cover h3[b-j4nr1t0h5a] { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.appls-cover p[b-j4nr1t0h5a] { margin: 0; font-size: 14px; color: var(--d-ink-2); }

.appls-actions-row[b-j4nr1t0h5a] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appls-link[b-j4nr1t0h5a] { color: var(--d-accent); font-weight: 500; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.appls-link:hover[b-j4nr1t0h5a] { text-decoration: underline; }
.appls-link.info[b-j4nr1t0h5a] { color: var(--d-info); }

.appls-workflow[b-j4nr1t0h5a] { border-top: 1px solid var(--d-line); padding-top: 12px; }
.appls-workflow-lbl[b-j4nr1t0h5a] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.appls-workflow-actions[b-j4nr1t0h5a] { display: flex; flex-wrap: wrap; gap: 8px; }

.appls-tbl[b-j4nr1t0h5a] { width: 100%; border-collapse: collapse; font-size: 14px; }
.appls-tbl thead th[b-j4nr1t0h5a] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.appls-tbl thead th.center[b-j4nr1t0h5a] { text-align: center; }
.appls-tbl tbody td[b-j4nr1t0h5a] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.appls-tbl tbody tr:hover[b-j4nr1t0h5a] { background: var(--d-surface-2); }
.appls-tbl td.center[b-j4nr1t0h5a] { text-align: center; }
.appls-tbl-num[b-j4nr1t0h5a] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.appls-cell-name[b-j4nr1t0h5a] { font-weight: 500; color: var(--d-ink); display: block; }
.appls-cell-sub[b-j4nr1t0h5a] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }

.appls-tag[b-j4nr1t0h5a] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.appls-tag .d[b-j4nr1t0h5a] { width: 5px; height: 5px; border-radius: 50%; }
.appls-tag.info[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-info) 12%, #fff); color: color-mix(in srgb, var(--d-info) 80%, #000); border-color: color-mix(in srgb, var(--d-info) 30%, #fff); }
.appls-tag.info .d[b-j4nr1t0h5a] { background: var(--d-info); }
.appls-tag.warn[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-warn) 12%, #fff); color: color-mix(in srgb, var(--d-warn) 80%, #000); border-color: color-mix(in srgb, var(--d-warn) 30%, #fff); }
.appls-tag.warn .d[b-j4nr1t0h5a] { background: var(--d-warn); }
.appls-tag.violet[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-violet) 12%, #fff); color: color-mix(in srgb, var(--d-violet) 80%, #000); border-color: color-mix(in srgb, var(--d-violet) 30%, #fff); }
.appls-tag.violet .d[b-j4nr1t0h5a] { background: var(--d-violet); }
.appls-tag.accent[b-j4nr1t0h5a] { background: var(--d-accent-soft); color: var(--d-accent); border-color: color-mix(in srgb, var(--d-accent) 25%, #fff); }
.appls-tag.accent .d[b-j4nr1t0h5a] { background: var(--d-accent); }
.appls-tag.good[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-good) 12%, #fff); color: color-mix(in srgb, var(--d-good) 80%, #000); border-color: color-mix(in srgb, var(--d-good) 30%, #fff); }
.appls-tag.good .d[b-j4nr1t0h5a] { background: var(--d-good); }
.appls-tag.danger[b-j4nr1t0h5a] { background: color-mix(in srgb, var(--d-danger) 12%, #fff); color: color-mix(in srgb, var(--d-danger) 80%, #000); border-color: color-mix(in srgb, var(--d-danger) 30%, #fff); }
.appls-tag.danger .d[b-j4nr1t0h5a] { background: var(--d-danger); }
.appls-tag.muted[b-j4nr1t0h5a] { background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line); }
.appls-tag.muted .d[b-j4nr1t0h5a] { background: var(--d-ink-4); }

.appls-empty[b-j4nr1t0h5a] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.appls-empty b[b-j4nr1t0h5a] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.appls-loading[b-j4nr1t0h5a] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.appls-spinner[b-j4nr1t0h5a] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: appls-spin-b-j4nr1t0h5a .7s linear infinite; }
@keyframes appls-spin-b-j4nr1t0h5a { to { transform: rotate(360deg); } }

.appls-pagination[b-j4nr1t0h5a] { padding: 0 28px 12px; flex-shrink: 0; }
.appls-banner[b-j4nr1t0h5a] { margin: 12px 28px 0; padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.appls-banner button[b-j4nr1t0h5a] { background: transparent; border: 0; color: inherit; cursor: pointer; }
.appls-msg-err[b-j4nr1t0h5a] { font-size: 12px; color: var(--d-danger); margin-top: 6px; }
.appls-msg-ok[b-j4nr1t0h5a] { font-size: 12px; color: var(--d-good); margin-top: 6px; }
/* /src/Features/Recruitment/Pages/Manager/JobCreate.razor.rz.scp.css */
/* JobCreate — Manager Dashboard v4 — prefix: jobcreate- */
.jobcreate-root[b-r02eaultiu] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jobcreate-hero[b-r02eaultiu] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.jobcreate-hero h1[b-r02eaultiu] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.jobcreate-hero h1 em[b-r02eaultiu] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.jobcreate-hero-meta[b-r02eaultiu] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; }

.jobcreate-btn[b-r02eaultiu] { height: 38px; padding: 0 14px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); color: var(--d-ink); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .12s; }
.jobcreate-btn:hover[b-r02eaultiu] { background: var(--d-surface-2); color: var(--d-ink); }
.jobcreate-btn-accent[b-r02eaultiu] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.jobcreate-btn-accent:hover[b-r02eaultiu] { background: var(--d-accent-grad-hover); color: #fff; }
.jobcreate-btn:disabled[b-r02eaultiu] { opacity: 0.5; cursor: not-allowed; }

.jobcreate-grid[b-r02eaultiu] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .jobcreate-grid[b-r02eaultiu] { grid-template-columns: 2fr 1fr; } }

.jobcreate-col[b-r02eaultiu] { display: flex; flex-direction: column; gap: 16px; }
.jobcreate-card[b-r02eaultiu] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.jobcreate-card-hd[b-r02eaultiu] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); }
.jobcreate-card-hd h2[b-r02eaultiu] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.jobcreate-card-body[b-r02eaultiu] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

.jobcreate-form-grid[b-r02eaultiu] { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .jobcreate-form-grid.cols-2[b-r02eaultiu] { grid-template-columns: 1fr 1fr; } .jobcreate-form-grid.cols-3[b-r02eaultiu] { grid-template-columns: 1fr 1fr 1fr; } }

.jobcreate-field label[b-r02eaultiu], .jobcreate-field-label[b-r02eaultiu] { display: block; font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.jobcreate-field .req[b-r02eaultiu] { color: var(--d-danger); }

.jobcreate-input[b-r02eaultiu], .jobcreate-select[b-r02eaultiu], .jobcreate-textarea[b-r02eaultiu] { width: 100%; padding: 0 12px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); transition: border-color .12s, box-shadow .12s; outline: none; }
.jobcreate-input[b-r02eaultiu], .jobcreate-select[b-r02eaultiu] { height: 38px; }
.jobcreate-textarea[b-r02eaultiu] { padding: 8px 12px; resize: vertical; font-family: inherit; }
.jobcreate-input:focus[b-r02eaultiu], .jobcreate-select:focus[b-r02eaultiu], .jobcreate-textarea:focus[b-r02eaultiu] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

.jobcreate-checkbox-row[b-r02eaultiu] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.jobcreate-checkbox[b-r02eaultiu] { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--d-ink-2); cursor: pointer; }
.jobcreate-checkbox input[b-r02eaultiu] { accent-color: var(--d-accent); width: 14px; height: 14px; }

.jobcreate-actions[b-r02eaultiu] { display: flex; gap: 10px; padding-top: 4px; }
.jobcreate-actions .jobcreate-btn[b-r02eaultiu] { flex: 1; justify-content: center; }

.jobcreate-banner[b-r02eaultiu] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jobcreate-banner button[b-r02eaultiu] { background: transparent; border: 0; color: inherit; cursor: pointer; }
/* /src/Features/Recruitment/Pages/Manager/JobDetail.razor.rz.scp.css */
/* JobDetail — Manager Dashboard v4 — prefix: jobdetail- */
.jobdetail-root[b-w07d6kbl1f] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jobdetail-hero[b-w07d6kbl1f] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.jobdetail-hero h1[b-w07d6kbl1f] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.jobdetail-hero h1 em[b-w07d6kbl1f] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.jobdetail-hero-meta[b-w07d6kbl1f] { margin-top: 6px; font-size: 14px; color: var(--d-ink-3); }
.jobdetail-hero-actions[b-w07d6kbl1f] { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.jobdetail-btn[b-w07d6kbl1f] { height: 38px; padding: 0 14px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); color: var(--d-ink); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .12s; }
.jobdetail-btn:hover[b-w07d6kbl1f] { background: var(--d-surface-2); color: var(--d-ink); }
.jobdetail-btn-accent[b-w07d6kbl1f] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18); }
.jobdetail-btn-accent:hover[b-w07d6kbl1f] { background: var(--d-accent-grad-hover); color: #fff; }
.jobdetail-btn-good[b-w07d6kbl1f] { background: var(--d-good); color: #fff; border-color: transparent; }
.jobdetail-btn-good:hover[b-w07d6kbl1f] { background: #15803d; color: #fff; }
.jobdetail-btn-danger-outline[b-w07d6kbl1f] { color: var(--d-danger); border-color: color-mix(in srgb, var(--d-danger) 30%, var(--d-line)); }
.jobdetail-btn-danger-outline:hover[b-w07d6kbl1f] { background: color-mix(in srgb, var(--d-danger) 8%, #fff); color: var(--d-danger); }
.jobdetail-btn-danger[b-w07d6kbl1f] { background: var(--d-danger); color: #fff; border-color: transparent; }
.jobdetail-btn-danger:hover[b-w07d6kbl1f] { background: #b91c1c; color: #fff; }

.jobdetail-tag[b-w07d6kbl1f] { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.jobdetail-tag .d[b-w07d6kbl1f] { width: 5px; height: 5px; border-radius: 50%; }
.jobdetail-tag.muted[b-w07d6kbl1f] { background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line); }
.jobdetail-tag.muted .d[b-w07d6kbl1f] { background: var(--d-ink-4); }
.jobdetail-tag.good[b-w07d6kbl1f] { background: color-mix(in srgb, var(--d-good) 12%, #fff); color: color-mix(in srgb, var(--d-good) 80%, #000); border-color: color-mix(in srgb, var(--d-good) 30%, #fff); }
.jobdetail-tag.good .d[b-w07d6kbl1f] { background: var(--d-good); }
.jobdetail-tag.danger[b-w07d6kbl1f] { background: color-mix(in srgb, var(--d-danger) 12%, #fff); color: color-mix(in srgb, var(--d-danger) 80%, #000); border-color: color-mix(in srgb, var(--d-danger) 30%, #fff); }
.jobdetail-tag.danger .d[b-w07d6kbl1f] { background: var(--d-danger); }
.jobdetail-tag.warn[b-w07d6kbl1f] { background: color-mix(in srgb, var(--d-warn) 12%, #fff); color: color-mix(in srgb, var(--d-warn) 80%, #000); border-color: color-mix(in srgb, var(--d-warn) 30%, #fff); }
.jobdetail-tag.warn .d[b-w07d6kbl1f] { background: var(--d-warn); }
.jobdetail-tag.accent[b-w07d6kbl1f] { background: var(--d-accent-soft); color: var(--d-accent); border-color: color-mix(in srgb, var(--d-accent) 25%, #fff); }
.jobdetail-tag.accent .d[b-w07d6kbl1f] { background: var(--d-accent); }

.jobdetail-banner[b-w07d6kbl1f] { padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jobdetail-banner button[b-w07d6kbl1f] { background: transparent; border: 0; color: inherit; cursor: pointer; }

.jobdetail-loading[b-w07d6kbl1f] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.jobdetail-spinner[b-w07d6kbl1f] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: jobdetail-spin-b-w07d6kbl1f .7s linear infinite; }
@keyframes jobdetail-spin-b-w07d6kbl1f { to { transform: rotate(360deg); } }

.jobdetail-stats[b-w07d6kbl1f] { display: grid; grid-template-columns: repeat(4,1fr); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.jobdetail-stat[b-w07d6kbl1f] { padding: 14px 16px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jobdetail-stat:last-child[b-w07d6kbl1f] { border-right: 0; }
.jobdetail-stat-lbl[b-w07d6kbl1f] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.jobdetail-stat-dot[b-w07d6kbl1f] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); }
.jobdetail-stat-dot.accent[b-w07d6kbl1f] { background: var(--d-accent-grad); }
.jobdetail-stat-dot.good[b-w07d6kbl1f] { background: var(--d-good); }
.jobdetail-stat-dot.warn[b-w07d6kbl1f] { background: var(--d-warn); }
.jobdetail-stat-val[b-w07d6kbl1f] { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; font-variant-numeric: tabular-nums; }

.jobdetail-tabs[b-w07d6kbl1f] { display: inline-flex; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 3px; gap: 2px; }
.jobdetail-tab[b-w07d6kbl1f] { padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--d-ink-2); background: transparent; border: 0; cursor: pointer; }
.jobdetail-tab:hover[b-w07d6kbl1f] { color: var(--d-ink); background: var(--d-surface-2); }
.jobdetail-tab.is-active[b-w07d6kbl1f] { background: var(--d-accent-grad); color: #fff; }

.jobdetail-grid[b-w07d6kbl1f] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .jobdetail-grid[b-w07d6kbl1f] { grid-template-columns: 2fr 1fr; } }
.jobdetail-col[b-w07d6kbl1f] { display: flex; flex-direction: column; gap: 16px; }

.jobdetail-card[b-w07d6kbl1f] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.jobdetail-card-hd[b-w07d6kbl1f] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); }
.jobdetail-card-hd h2[b-w07d6kbl1f] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.jobdetail-card-body[b-w07d6kbl1f] { padding: 14px 16px; font-size: 14px; color: var(--d-ink-2); display: flex; flex-direction: column; gap: 8px; }
.jobdetail-card-body p[b-w07d6kbl1f] { margin: 0; }
.jobdetail-prose[b-w07d6kbl1f] { font-size: 14px; color: var(--d-ink-2); line-height: 1.6; }
.jobdetail-prose *[b-w07d6kbl1f] { max-width: 100%; }

.jobdetail-salary[b-w07d6kbl1f] { font-family: 'Inter Tight','Inter',sans-serif; font-size: 18px; font-weight: 600; color: var(--d-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.jobdetail-tbl[b-w07d6kbl1f] { width: 100%; border-collapse: collapse; font-size: 14px; }
.jobdetail-tbl thead th[b-w07d6kbl1f] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.jobdetail-tbl thead th.center[b-w07d6kbl1f] { text-align: center; }
.jobdetail-tbl tbody td[b-w07d6kbl1f] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.jobdetail-tbl tbody tr:hover[b-w07d6kbl1f] { background: var(--d-surface-2); }
.jobdetail-tbl td.center[b-w07d6kbl1f] { text-align: center; }
.jobdetail-status-select[b-w07d6kbl1f] { height: 28px; padding: 0 8px; border: 1px solid var(--d-line); border-radius: 7px; background: var(--d-surface); font-size: 12px; outline: none; }
.jobdetail-status-select:focus[b-w07d6kbl1f] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.jobdetail-link[b-w07d6kbl1f] { background: transparent; border: 0; color: var(--d-accent); font-weight: 500; font-size: 14px; cursor: pointer; }
.jobdetail-link:hover[b-w07d6kbl1f] { text-decoration: underline; }

.jobdetail-empty[b-w07d6kbl1f] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.jobdetail-empty b[b-w07d6kbl1f] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
/* /src/Features/Recruitment/Pages/Manager/JobsIndex.razor.rz.scp.css */
/* JobsIndex — Manager Dashboard v4 — prefix: recruit- */
.recruit-root[b-u4w39ujvy3] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-info: #2563eb;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.recruit-shell[b-u4w39ujvy3] { display: flex; flex-direction: column; height: calc(100vh - 64px); padding: 0; }

.recruit-hero[b-u4w39ujvy3] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 16px 28px 12px; border-bottom: 1px solid var(--d-line); }
.recruit-hero h1[b-u4w39ujvy3] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
.recruit-hero h1 em[b-u4w39ujvy3] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.recruit-hero-meta[b-u4w39ujvy3] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.recruit-hero-meta .dot[b-u4w39ujvy3] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.recruit-kpis[b-u4w39ujvy3] { display: grid; grid-template-columns: repeat(4,1fr); background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; margin: 12px 28px 0; }
.recruit-kpi[b-u4w39ujvy3] { padding: 14px 16px; border-right: 1px solid var(--d-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.recruit-kpi:last-child[b-u4w39ujvy3] { border-right: 0; }
.recruit-kpi-lbl[b-u4w39ujvy3] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.recruit-kpi-dot[b-u4w39ujvy3] { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink-4); flex-shrink: 0; }
.recruit-kpi-dot.accent[b-u4w39ujvy3] { background: var(--d-accent-grad); }
.recruit-kpi-dot.good[b-u4w39ujvy3] { background: var(--d-good); }
.recruit-kpi-dot.warn[b-u4w39ujvy3] { background: var(--d-warn); }
.recruit-kpi-val[b-u4w39ujvy3] { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 600; font-size: 26px; letter-spacing: -0.03em; color: var(--d-ink); line-height: 1; font-variant-numeric: tabular-nums; }

.recruit-toolbar[b-u4w39ujvy3] { display: flex; align-items: center; gap: 8px; padding: 10px 28px; flex-wrap: wrap; }
.recruit-search[b-u4w39ujvy3] { position: relative; width: 280px; max-width: 100%; }
.recruit-search svg[b-u4w39ujvy3] { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--d-ink-4); pointer-events: none; }
.recruit-search input[b-u4w39ujvy3] { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; transition: border-color .12s, box-shadow .12s; }
.recruit-search input:focus[b-u4w39ujvy3] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.recruit-select[b-u4w39ujvy3] { height: 36px; padding: 0 10px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; }
.recruit-select:focus[b-u4w39ujvy3] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }

.recruit-btn[b-u4w39ujvy3] { height: 36px; padding: 0 14px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); color: var(--d-ink); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background .12s; }
.recruit-btn:hover[b-u4w39ujvy3] { background: var(--d-surface-2); color: var(--d-ink); }
.recruit-btn-accent[b-u4w39ujvy3] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
.recruit-btn-accent:hover[b-u4w39ujvy3] { background: var(--d-accent-grad-hover); color: #fff; }

.recruit-content[b-u4w39ujvy3] { flex: 1; min-height: 0; padding: 0 28px 12px; display: flex; }
.recruit-card[b-u4w39ujvy3] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: auto; flex: 1; }

.recruit-tbl[b-u4w39ujvy3] { width: 100%; border-collapse: collapse; font-size: 14px; }
.recruit-tbl thead th[b-u4w39ujvy3] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.recruit-tbl thead th.center[b-u4w39ujvy3] { text-align: center; }
.recruit-tbl tbody td[b-u4w39ujvy3] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; }
.recruit-tbl tbody tr:hover[b-u4w39ujvy3] { background: var(--d-surface-2); cursor: pointer; }
.recruit-tbl td.center[b-u4w39ujvy3] { text-align: center; }
.recruit-tbl-num[b-u4w39ujvy3] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.recruit-tag[b-u4w39ujvy3] { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.recruit-tag .d[b-u4w39ujvy3] { width: 5px; height: 5px; border-radius: 50%; }
.recruit-tag.good[b-u4w39ujvy3] { background: color-mix(in srgb, var(--d-good) 12%, #fff); color: color-mix(in srgb, var(--d-good) 80%, #000); border-color: color-mix(in srgb, var(--d-good) 30%, #fff); }
.recruit-tag.good .d[b-u4w39ujvy3] { background: var(--d-good); }
.recruit-tag.warn[b-u4w39ujvy3] { background: color-mix(in srgb, var(--d-warn) 12%, #fff); color: color-mix(in srgb, var(--d-warn) 80%, #000); border-color: color-mix(in srgb, var(--d-warn) 30%, #fff); }
.recruit-tag.warn .d[b-u4w39ujvy3] { background: var(--d-warn); }
.recruit-tag.danger[b-u4w39ujvy3] { background: color-mix(in srgb, var(--d-danger) 12%, #fff); color: color-mix(in srgb, var(--d-danger) 80%, #000); border-color: color-mix(in srgb, var(--d-danger) 30%, #fff); }
.recruit-tag.danger .d[b-u4w39ujvy3] { background: var(--d-danger); }
.recruit-tag.muted[b-u4w39ujvy3] { background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line); }
.recruit-tag.muted .d[b-u4w39ujvy3] { background: var(--d-ink-4); }

.recruit-badge[b-u4w39ujvy3] { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; }
.recruit-badge.urgent[b-u4w39ujvy3] { background: color-mix(in srgb, var(--d-danger) 12%, #fff); color: var(--d-danger); }
.recruit-badge.featured[b-u4w39ujvy3] { background: color-mix(in srgb, var(--d-warn) 12%, #fff); color: var(--d-warn); }

.recruit-cell-name[b-u4w39ujvy3] { font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.recruit-cell-sub[b-u4w39ujvy3] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.recruit-cell-accent[b-u4w39ujvy3] { color: var(--d-accent); font-weight: 600; font-variant-numeric: tabular-nums; }

.recruit-empty[b-u4w39ujvy3] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; color: var(--d-ink-3); text-align: center; }
.recruit-empty b[b-u4w39ujvy3] { color: var(--d-ink); font-weight: 500; font-size: 14px; }
.recruit-empty small[b-u4w39ujvy3] { font-size: 12px; }
.recruit-empty svg[b-u4w39ujvy3] { color: var(--d-ink-4); margin-bottom: 6px; }

.recruit-loading[b-u4w39ujvy3] { display: flex; align-items: center; justify-content: center; padding: 64px 0; }
.recruit-spinner[b-u4w39ujvy3] { width: 28px; height: 28px; border: 3px solid var(--d-line); border-top-color: var(--d-accent); border-radius: 50%; animation: recruit-spin-b-u4w39ujvy3 .7s linear infinite; }
@keyframes recruit-spin-b-u4w39ujvy3 { to { transform: rotate(360deg); } }

.recruit-pagination[b-u4w39ujvy3] { padding: 0 28px 12px; flex-shrink: 0; }
.recruit-banner[b-u4w39ujvy3] { margin: 12px 28px 0; padding: 10px 14px; border-radius: var(--d-r); font-size: 14px; background: color-mix(in srgb, var(--d-danger) 10%, transparent); color: var(--d-danger); border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.recruit-banner button[b-u4w39ujvy3] { background: transparent; border: 0; color: inherit; cursor: pointer; }
/* /src/Features/Reports/Pages/Ca/CaReports.razor.rz.scp.css */
/* /ca/reports — wrapper mỏng; toàn bộ UI nằm trong FinanceReportsView (chuẩn nm-list, scoped css riêng). */
.careports-root[b-qto08qupo7] {
    min-height: calc(100vh - 64px);
}
/* /src/Features/Reports/Pages/Manager/ReportsIndex.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Reports Index — Manager Dashboard v4 theme (warm-neutral)
   Prefix: reports-
   ═══════════════════════════════════════════════════════════════ */

.reports-root[b-iguungpqdg] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;

    color: var(--d-ink);
    background: var(--d-bg);
    height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
}

.reports-num[b-iguungpqdg] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Hero ─── */
.reports-hero[b-iguungpqdg] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 20px 28px 14px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .reports-hero h1[b-iguungpqdg] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .reports-hero h1 em[b-iguungpqdg] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.reports-hero-meta[b-iguungpqdg] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .reports-hero-meta .dot[b-iguungpqdg] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

/* ─── Scroll body ─── */
.reports-body[b-iguungpqdg] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 20px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── KPI strip (4-in-1) ─── */
.reports-kpis[b-iguungpqdg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .reports-kpis[b-iguungpqdg] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.reports-kpi[b-iguungpqdg] {
    padding: 18px 18px 14px;
    border-right: 1px solid var(--d-line);
    border-bottom: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .reports-kpi[b-iguungpqdg] {
        border-bottom: 0;
    }

        .reports-kpi:last-child[b-iguungpqdg] {
            border-right: 0;
        }
}

.reports-kpi:nth-child(2n)[b-iguungpqdg] {
    border-right: 0;
}

@media (min-width: 1024px) {
    .reports-kpi:nth-child(2n)[b-iguungpqdg] {
        border-right: 1px solid var(--d-line);
    }
}

.reports-kpi-lbl[b-iguungpqdg] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-kpi-dot[b-iguungpqdg] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .reports-kpi-dot.accent[b-iguungpqdg] {
        background: var(--d-accent-grad);
    }

    .reports-kpi-dot.good[b-iguungpqdg] {
        background: var(--d-good);
    }

    .reports-kpi-dot.warn[b-iguungpqdg] {
        background: var(--d-warn);
    }

    .reports-kpi-dot.danger[b-iguungpqdg] {
        background: var(--d-danger);
    }

.reports-kpi-val[b-iguungpqdg] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

    .reports-kpi-val b[b-iguungpqdg] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-weight: 600;
        font-size: 28px;
        letter-spacing: -0.03em;
        color: var(--d-ink);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

.reports-kpi-unit[b-iguungpqdg] {
    color: var(--d-ink-3);
    font-size: 14px;
    font-weight: 500;
}

.reports-kpi-meta[b-iguungpqdg] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin-top: auto;
}

.reports-kpi-bar[b-iguungpqdg] {
    height: 4px;
    border-radius: 999px;
    background: var(--d-surface-2);
    overflow: hidden;
    margin-top: 4px;
}

    .reports-kpi-bar > span[b-iguungpqdg] {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--d-good);
    }

        .reports-kpi-bar > span.warn[b-iguungpqdg] {
            background: var(--d-warn);
        }

        .reports-kpi-bar > span.danger[b-iguungpqdg] {
            background: var(--d-danger);
        }

/* ─── Card primitive ─── */
.reports-card[b-iguungpqdg] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.reports-card-hd[b-iguungpqdg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .reports-card-hd h3[b-iguungpqdg] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.reports-card-bd[b-iguungpqdg] {
    padding: 14px 16px;
}

/* ─── Grid ─── */
.reports-grid[b-iguungpqdg] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.reports-col-6[b-iguungpqdg] {
    grid-column: span 12;
}

@media (min-width: 1024px) {
    .reports-col-6[b-iguungpqdg] {
        grid-column: span 6;
    }
}

/* ─── Service spend rows ─── */
.reports-svc-list[b-iguungpqdg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.reports-svc-row[b-iguungpqdg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reports-svc-head[b-iguungpqdg] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
}

    .reports-svc-head .name[b-iguungpqdg] {
        color: var(--d-ink);
        font-weight: 500;
    }

    .reports-svc-head .val[b-iguungpqdg] {
        color: var(--d-ink-2);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

.reports-svc-bar[b-iguungpqdg] {
    height: 6px;
    background: var(--d-surface-2);
    border-radius: 999px;
    overflow: hidden;
}

    .reports-svc-bar > span[b-iguungpqdg] {
        display: block;
        height: 100%;
        background: var(--d-accent-grad);
        border-radius: 999px;
    }

/* ─── Top spenders ─── */
.reports-spender-list[b-iguungpqdg] {
    display: flex;
    flex-direction: column;
}

.reports-spender-row[b-iguungpqdg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--d-line-2);
}

    .reports-spender-row:last-child[b-iguungpqdg] {
        border-bottom: 0;
    }

.reports-rank[b-iguungpqdg] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    font-size: 11px;
    font-weight: 600;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

    .reports-rank.top[b-iguungpqdg] {
        background: var(--d-accent-grad);
        color: #fff;
        box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18);
    }

.reports-spender-info[b-iguungpqdg] {
    flex: 1;
    min-width: 0;
}

    .reports-spender-info .name[b-iguungpqdg] {
        font-size: 14px;
        font-weight: 500;
        color: var(--d-ink);
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .reports-spender-info .meta[b-iguungpqdg] {
        font-size: 11.5px;
        color: var(--d-ink-3);
        margin: 2px 0 0;
    }

.reports-spender-amt[b-iguungpqdg] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

/* ─── Table ─── */
.reports-tbl-wrap[b-iguungpqdg] {
    overflow-x: auto;
}

.reports-tbl[b-iguungpqdg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .reports-tbl thead th[b-iguungpqdg] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .reports-tbl thead th.right[b-iguungpqdg] {
            text-align: right;
        }

        .reports-tbl thead th.center[b-iguungpqdg] {
            text-align: center;
        }

    .reports-tbl tbody td[b-iguungpqdg] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
        font-variant-numeric: tabular-nums;
    }

    .reports-tbl tbody tr:last-child td[b-iguungpqdg] {
        border-bottom: 0;
    }

    .reports-tbl tbody tr:hover[b-iguungpqdg] {
        background: var(--d-surface-2);
    }

    .reports-tbl td.right[b-iguungpqdg] {
        text-align: right;
    }

    .reports-tbl td.center[b-iguungpqdg] {
        text-align: center;
    }

.reports-tbl-code[b-iguungpqdg] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
    display: block;
}

.reports-tbl-sub[b-iguungpqdg] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.reports-num-mono[b-iguungpqdg] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--d-ink);
}

.reports-var-up[b-iguungpqdg] {
    color: var(--d-danger);
    font-weight: 500;
}

.reports-var-down[b-iguungpqdg] {
    color: var(--d-good);
    font-weight: 500;
}

.reports-var-zero[b-iguungpqdg] {
    color: var(--d-ink-4);
}

/* ─── Empty / loading ─── */
.reports-empty[b-iguungpqdg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .reports-empty b[b-iguungpqdg] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .reports-empty small[b-iguungpqdg] {
        font-size: 12px;
    }

    .reports-empty svg[b-iguungpqdg] {
        margin-bottom: 6px;
        color: var(--d-ink-4);
    }

.reports-loading[b-iguungpqdg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.reports-error[b-iguungpqdg] {
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 35%, transparent);
    color: color-mix(in srgb, var(--d-warn) 90%, #000);
    border-radius: var(--d-r);
    padding: 12px 14px;
    font-size: 14px;
}
/* /src/Features/Search/Pages/Ca/CaSearch.razor.rz.scp.css */
/* /ca/search — chuẩn nm-list: shell trang + ô tìm + chip nhóm + tiêu đề nhóm + cell helpers.
   Chrome bảng/thẻ/badge do DataGrid + Nm* lo. Chỉ dùng token --nm-* (không hex, không --ca-*). */
.nm-list-page[b-7hs41nd8mt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-7hs41nd8mt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-7hs41nd8mt] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-7hs41nd8mt] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-sub strong[b-7hs41nd8mt] { color: var(--nm-ink); font-weight: 700; }
.cas-q[b-7hs41nd8mt] { color: var(--nm-brand-700); font-weight: 700; }

/* ── Ô tìm: hành động chính, to bằng cả hàng ── */
.cas-bar[b-7hs41nd8mt] { display: flex; align-items: center; gap: 10px; }
.cas-bar__field[b-7hs41nd8mt] { position: relative; flex: 1; min-width: 0; }

/* Nút xoá từ khoá nằm trong ô — chừa chỗ bằng padding phải của chính input */
.cas-bar__field[b-7hs41nd8mt]  .nm-input { padding-right: 38px; }
.cas-bar__clear[b-7hs41nd8mt] {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--nm-r-pill);
    background: transparent;
    color: var(--nm-muted);
    font-size: 12px;
    cursor: pointer;
}
.cas-bar__clear:hover[b-7hs41nd8mt] { background: var(--nm-surface-2); color: var(--nm-ink); }

/* ── Chip lọc nhóm ── */
.cas-chips[b-7hs41nd8mt] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cas-chip-count[b-7hs41nd8mt] {
    margin-left: 5px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}

/* ── Tiêu đề nhóm trong đầu thẻ ── */
.cas-sec[b-7hs41nd8mt] { display: flex; align-items: center; gap: 10px; width: 100%; }
.cas-sec__ico[b-7hs41nd8mt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
    background: color-mix(in srgb, var(--sec) 12%, transparent);
    color: var(--sec);
    flex-shrink: 0;
}
.cas-sec__ico--info[b-7hs41nd8mt]   { --sec: var(--nm-info); }
.cas-sec__ico--accent[b-7hs41nd8mt] { --sec: var(--nm-brand-500); }
.cas-sec__ico--good[b-7hs41nd8mt]   { --sec: var(--nm-ok); }

.cas-sec__title[b-7hs41nd8mt] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cas-sec__count[b-7hs41nd8mt] {
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}
.cas-sec__more[b-7hs41nd8mt] {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    text-decoration: none;
    white-space: nowrap;
}
.cas-sec__more:hover[b-7hs41nd8mt] { color: var(--nm-brand-700); text-decoration: underline; }

/* Ghi chú chạm trần số hit mỗi nhóm */
.cas-limit[b-7hs41nd8mt] {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--nm-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Trạng thái tải + lỗi ── */
.cas-skel[b-7hs41nd8mt] { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.cas-skel__row[b-7hs41nd8mt] { display: flex; align-items: center; gap: 14px; }
/* NmSkeleton là component con → phần tử nó render không mang scope id, phải ::deep mới với tới. */
.cas-skel__row[b-7hs41nd8mt]  .nm-skel--text { flex: 1; }
.cas-retry[b-7hs41nd8mt] { margin-top: 12px; }

/* ── Cell helpers ── */
.cell-2line[b-7hs41nd8mt] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-7hs41nd8mt] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}
.cell-2line__sub[b-7hs41nd8mt] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}
.cell-muted[b-7hs41nd8mt] { color: var(--nm-muted); }
.cell-date[b-7hs41nd8mt] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* mã chuyến / mã đơn — pill mono, click về chi tiết */
.nm-code-pill[b-7hs41nd8mt] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
}
a.nm-code-pill:hover[b-7hs41nd8mt] { background: var(--nm-brand-100, var(--nm-brand-50)); text-decoration: underline; }

/* mã giao dịch — mono nhưng không phải link */
.cell-txn[b-7hs41nd8mt] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2, var(--nm-ink));
    white-space: nowrap;
}

/* chip dịch vụ: icon tròn màu theo loại + nhãn */
.cell-svc[b-7hs41nd8mt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
}
.cell-svc__ico[b-7hs41nd8mt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
    background: color-mix(in srgb, var(--svc, var(--nm-muted)) 12%, transparent);
    color: var(--svc, var(--nm-muted));
    flex-shrink: 0;
}
.cell-svc--flight[b-7hs41nd8mt]    { --svc: #0284c7; }
.cell-svc--hotel[b-7hs41nd8mt]     { --svc: #7c3aed; }
.cell-svc--tour[b-7hs41nd8mt]      { --svc: #059669; }
.cell-svc--visa[b-7hs41nd8mt]      { --svc: #b45309; }
.cell-svc--esim[b-7hs41nd8mt]      { --svc: #db2777; }
.cell-svc--fasttrack[b-7hs41nd8mt] { --svc: #ea580c; }
.cell-svc--travelinsurance[b-7hs41nd8mt] { --svc: #0f766e; }

/* tổng tiền — mono, canh phải */
.cell-amount[b-7hs41nd8mt] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

.nm-row-actions[b-7hs41nd8mt] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Đoạn khớp từ khoá — <mark> sinh từ MarkupString nên KHÔNG mang scope id ⇒ bắt buộc ::deep. */
[b-7hs41nd8mt] .cas-hl {
    background: var(--nm-brand-100, var(--nm-brand-50));
    color: var(--nm-brand-700);
    border-radius: 3px;
    padding: 0 1px;
    font-weight: 700;
}

/* Cột phụ: ẩn ở màn hẹp (bảng vẫn cuộn ngang được nhờ MinWidth của DataGrid) */
.cas-only-sm[b-7hs41nd8mt] { display: none; }

@media (max-width: 640px) {
    .nm-list-page[b-7hs41nd8mt] { padding: 16px 14px 22px; }

    .cas-bar[b-7hs41nd8mt] { flex-wrap: wrap; }
    .cas-bar__field[b-7hs41nd8mt] { flex: 1 1 100%; }
    .cas-bar[b-7hs41nd8mt]  .nm-btn { flex: 1; }

    /* Chip nhóm: trượt ngang 1 hàng thay vì wrap nhiều tầng */
    .cas-chips[b-7hs41nd8mt] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .cas-chips[b-7hs41nd8mt]::-webkit-scrollbar { display: none; }
    .cas-chips[b-7hs41nd8mt]  .nm-chip { flex-shrink: 0; }

    .cas-sec__more[b-7hs41nd8mt] { font-size: 12px; }
    .cas-hide-sm[b-7hs41nd8mt] { display: none; }
    .cas-only-sm[b-7hs41nd8mt] { display: block; }
    .cell-2line__main[b-7hs41nd8mt], .cell-2line__sub[b-7hs41nd8mt] { max-width: 180px; }
}
/* /src/Features/ServiceCatalog/Pages/Manager/PendingServiceRequests.razor.rz.scp.css */
/* Pending Service Requests — Manager Dashboard v4 theme */
.psr-root[b-5kn5bcuqlc] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
}

.psr-page[b-5kn5bcuqlc] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
}

.psr-hero[b-5kn5bcuqlc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 20px 28px 14px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .psr-hero h1[b-5kn5bcuqlc] {
        margin: 0;
        font-family: 'Inter Tight', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1.15;
    }

.psr-hero-meta[b-5kn5bcuqlc] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.psr-badge[b-5kn5bcuqlc] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 18px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18), 0 4px 12px -2px rgba(234, 88, 12, 0.25);
    min-width: 86px;
}

    .psr-badge b[b-5kn5bcuqlc] {
        font-family: 'Inter Tight', sans-serif;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .psr-badge span[b-5kn5bcuqlc] {
        margin-top: 4px;
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        opacity: 0.92;
    }

.psr-content[b-5kn5bcuqlc] {
    flex: 1;
    min-height: 0;
    padding: 16px 28px 20px;
    overflow: auto;
}

.psr-loading[b-5kn5bcuqlc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.psr-spin[b-5kn5bcuqlc] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    animation: psr-spin-b-5kn5bcuqlc 0.8s linear infinite;
}

@keyframes psr-spin-b-5kn5bcuqlc {
    to {
        transform: rotate(360deg);
    }
}

.psr-empty[b-5kn5bcuqlc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 48px 16px;
    text-align: center;
    color: var(--d-ink-3);
}

    .psr-empty svg[b-5kn5bcuqlc] {
        color: var(--d-ink-4);
        margin-bottom: 8px;
    }

.psr-list[b-5kn5bcuqlc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.psr-item[b-5kn5bcuqlc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    transition: border-color .12s, background .12s;
}

    .psr-item:hover[b-5kn5bcuqlc] {
        border-color: #fed7aa;
        background: var(--d-surface);
    }

.psr-item-row[b-5kn5bcuqlc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 640px) {
    .psr-item-row[b-5kn5bcuqlc] {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.psr-info[b-5kn5bcuqlc] {
    flex: 1;
    min-width: 0;
}

.psr-info-top[b-5kn5bcuqlc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.psr-code[b-5kn5bcuqlc] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-accent);
    cursor: pointer;
}

    .psr-code:hover[b-5kn5bcuqlc] {
        text-decoration: underline;
    }

.psr-amt[b-5kn5bcuqlc] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

.psr-tag[b-5kn5bcuqlc] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
}

    .psr-tag.svc-flight[b-5kn5bcuqlc] {
        background: #f0f9ff;
        color: #0369a1;
        border-color: #bae6fd;
    }

    .psr-tag.svc-hotel[b-5kn5bcuqlc] {
        background: #eef2ff;
        color: #4338ca;
        border-color: #c7d2fe;
    }

    .psr-tag.svc-tour[b-5kn5bcuqlc] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #fed7aa;
    }

    .psr-tag.svc-visa[b-5kn5bcuqlc] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .psr-tag.svc-esim[b-5kn5bcuqlc] {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

    .psr-tag.svc-fasttrack[b-5kn5bcuqlc] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

.psr-meta[b-5kn5bcuqlc] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

    .psr-meta .who[b-5kn5bcuqlc] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--d-ink-2);
    }

    .psr-meta .when[b-5kn5bcuqlc] {
        font-variant-numeric: tabular-nums;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

.psr-violations[b-5kn5bcuqlc] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .psr-violations p[b-5kn5bcuqlc] {
        margin: 0;
        font-size: 11.5px;
        color: var(--d-warn);
        display: flex;
        gap: 6px;
    }

        .psr-violations p svg[b-5kn5bcuqlc] {
            flex-shrink: 0;
            margin-top: 2px;
        }

    .psr-violations .more[b-5kn5bcuqlc] {
        color: var(--d-ink-3);
    }

.psr-actions[b-5kn5bcuqlc] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.psr-btn[b-5kn5bcuqlc] {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s;
}

    .psr-btn:hover[b-5kn5bcuqlc] {
        background: var(--d-surface-2);
    }

.psr-btn-warn[b-5kn5bcuqlc] {
    color: #92400e;
    background: var(--d-warn-soft);
    border-color: #fde68a;
}

    .psr-btn-warn:hover[b-5kn5bcuqlc] {
        background: #fde68a;
    }

.psr-btn-danger[b-5kn5bcuqlc] {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

    .psr-btn-danger:hover[b-5kn5bcuqlc] {
        background: #fee2e2;
    }

.psr-btn-good[b-5kn5bcuqlc] {
    color: #fff;
    background: var(--d-good);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.18);
}

    .psr-btn-good:hover[b-5kn5bcuqlc] {
        background: #15803d;
        color: #fff;
    }

.psr-btn-accent[b-5kn5bcuqlc] {
    color: #fff;
    background: var(--d-accent-grad);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.18);
}

    .psr-btn-accent:hover[b-5kn5bcuqlc] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.psr-btn:disabled[b-5kn5bcuqlc] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Modal */
.psr-modal-backdrop[b-5kn5bcuqlc] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 25, 23, 0.5);
}

.psr-modal[b-5kn5bcuqlc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 24px 64px -16px rgba(28, 25, 23, 0.35);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
}

.psr-modal-hd[b-5kn5bcuqlc] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .psr-modal-hd h3[b-5kn5bcuqlc] {
        margin: 0;
        font-family: 'Inter Tight', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.015em;
        color: var(--d-ink);
    }

.psr-modal-bd[b-5kn5bcuqlc] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.psr-modal-ft[b-5kn5bcuqlc] {
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.psr-err[b-5kn5bcuqlc] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
}

.psr-summary[b-5kn5bcuqlc] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .psr-summary p[b-5kn5bcuqlc] {
        margin: 0;
    }

    .psr-summary span.k[b-5kn5bcuqlc] {
        color: var(--d-ink-3);
    }

    .psr-summary span.v[b-5kn5bcuqlc] {
        color: var(--d-ink);
        font-weight: 500;
        margin-left: 6px;
    }

.psr-field label[b-5kn5bcuqlc] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}

.psr-field .req[b-5kn5bcuqlc] {
    color: var(--d-danger);
    margin-left: 2px;
}

.psr-textarea[b-5kn5bcuqlc] {
    width: 100%;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--d-ink);
    background: var(--d-surface);
    outline: 0;
    resize: vertical;
    min-height: 70px;
    font-family: inherit;
}

    .psr-textarea:focus[b-5kn5bcuqlc] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }
/* /src/Features/Settings/Pages/Ca/CaCostCenters.razor.rz.scp.css */
/* /ca/cost-centers — chuẩn nm-list token-only: head + NmToolbar (stat ngân sách) + NmCard DataGrid (NmProgress usage) + NmModal. */
.nm-list-page[b-xh3gu95t1r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-xh3gu95t1r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-xh3gu95t1r] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cacc-title[b-xh3gu95t1r] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-xh3gu95t1r] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-xh3gu95t1r] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-xh3gu95t1r] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar ── */
/* NmInput mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-xh3gu95t1r] .cacc-toolbar .nm-input-wrap { width: 280px; flex: 0 0 auto; }
.cacc-stat[b-xh3gu95t1r] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cacc-stat b[b-xh3gu95t1r] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cacc-stat + .cacc-stat[b-xh3gu95t1r] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card danh sách ── */
[b-xh3gu95t1r] .cacc-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cacc-card-ico[b-xh3gu95t1r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cacc-card-title[b-xh3gu95t1r] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cacc-card-count[b-xh3gu95t1r] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cacc-card-hint[b-xh3gu95t1r] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.cell-2line[b-xh3gu95t1r] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-xh3gu95t1r] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.cell-2line__sub[b-xh3gu95t1r] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.cell-2line__sub i[b-xh3gu95t1r] { color: var(--nm-brand-700); font-size: 10px; }
.cacc-period[b-xh3gu95t1r] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.cacc-money[b-xh3gu95t1r] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cacc-usage[b-xh3gu95t1r] { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
[b-xh3gu95t1r] .cacc-usage-bar { flex: 1; min-width: 70px; }
.cacc-usage-pct[b-xh3gu95t1r] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.nm-row-actions[b-xh3gu95t1r] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-xh3gu95t1r] .cacc-row-inactive .nm-grid__td { opacity: .65; }

/* ── Footer phân trang ── */
.cacc-foot[b-xh3gu95t1r] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.cacc-form[b-xh3gu95t1r] { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 640px) {
    .nm-list-page[b-xh3gu95t1r] { padding: 16px 14px 22px; }
    [b-xh3gu95t1r] .cacc-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/Settings/Pages/Ca/CaDepartments.razor.rz.scp.css */
/* /ca/departments — chuẩn nm-list token-only: head + NmToolbar + NmCard DataGrid + NmModal. */
.nm-list-page[b-6up4559g7c] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-6up4559g7c] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-6up4559g7c] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cadept-title[b-6up4559g7c] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-6up4559g7c] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-6up4559g7c] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-6up4559g7c] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar ── */
/* NmInput mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-6up4559g7c] .cadept-toolbar .nm-input-wrap { width: 300px; flex: 0 0 auto; }
.cadept-stat[b-6up4559g7c] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cadept-stat b[b-6up4559g7c] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cadept-stat + .cadept-stat[b-6up4559g7c] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card danh sách ── */
[b-6up4559g7c] .cadept-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cadept-card-ico[b-6up4559g7c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cadept-card-title[b-6up4559g7c] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cadept-card-count[b-6up4559g7c] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cadept-card-hint[b-6up4559g7c] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.cell-2line[b-6up4559g7c] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-6up4559g7c] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cell-2line__sub[b-6up4559g7c] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cell-muted[b-6up4559g7c] { color: var(--nm-muted); }
.cell-nowrap[b-6up4559g7c] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    display: inline-block;
    vertical-align: middle;
}
.cadept-mgr[b-6up4559g7c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.cadept-mgr i[b-6up4559g7c] { color: var(--nm-brand-700); font-size: 12px; }

.nm-row-actions[b-6up4559g7c] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-6up4559g7c] .cadept-row-inactive .nm-grid__td { opacity: .65; }

/* ── Footer phân trang ── */
.cadept-foot[b-6up4559g7c] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.cadept-form[b-6up4559g7c] { display: flex; flex-direction: column; gap: 12px; }
.cadept-cc[b-6up4559g7c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}

@media (max-width: 640px) {
    .nm-list-page[b-6up4559g7c] { padding: 16px 14px 22px; }
    [b-6up4559g7c] .cadept-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
}

/* Ghi chú dưới nhóm ô nhập tên đa ngôn ngữ */
.cadept-hint[b-6up4559g7c] { font-size: 11.5px; color: var(--nm-ink-3, #7b8190); margin: -4px 0 4px; line-height: 1.45; }
/* /src/Features/Settings/Pages/Ca/CaJobTitles.razor.rz.scp.css */
/* /ca/jobtitles — chuẩn nm-list token-only: head + NmToolbar lọc + NmCard DataGrid + NmModal. */
.nm-list-page[b-mo0whgvvx4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-mo0whgvvx4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-mo0whgvvx4] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cajt-title[b-mo0whgvvx4] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-mo0whgvvx4] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-mo0whgvvx4] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-mo0whgvvx4] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar ── */
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-mo0whgvvx4] .cajt-toolbar .nm-input-wrap { width: 280px; flex: 0 0 auto; }
[b-mo0whgvvx4] .cajt-toolbar .nm-select-wrap { width: 220px; flex: 0 0 auto; }
.cajt-stat[b-mo0whgvvx4] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cajt-stat b[b-mo0whgvvx4] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cajt-stat + .cajt-stat[b-mo0whgvvx4] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card danh sách ── */
[b-mo0whgvvx4] .cajt-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cajt-card-ico[b-mo0whgvvx4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cajt-card-title[b-mo0whgvvx4] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cajt-card-count[b-mo0whgvvx4] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cajt-card-hint[b-mo0whgvvx4] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.cell-2line[b-mo0whgvvx4] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-mo0whgvvx4] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cell-2line__sub[b-mo0whgvvx4] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.cajt-dept[b-mo0whgvvx4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.cajt-dept i[b-mo0whgvvx4] { color: var(--nm-brand-700); font-size: 12px; }
.cajt-order[b-mo0whgvvx4] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.nm-row-actions[b-mo0whgvvx4] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-mo0whgvvx4] .cajt-row-inactive .nm-grid__td { opacity: .65; }

/* ── Footer phân trang ── */
.cajt-foot[b-mo0whgvvx4] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.cajt-form[b-mo0whgvvx4] { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 640px) {
    .nm-list-page[b-mo0whgvvx4] { padding: 16px 14px 22px; }
    [b-mo0whgvvx4] .cajt-toolbar .nm-input-wrap,
    [b-mo0whgvvx4] .cajt-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/Settings/Pages/Ca/CaRanks.razor.rz.scp.css */
/* /ca/ranks — chuẩn nm-list token-only: head + NmToolbar + NmCard DataGrid + 2 NmModal (cấp bậc + định mức). */
.nm-list-page[b-6tr1ljjd3x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-6tr1ljjd3x] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-6tr1ljjd3x] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.carank-title[b-6tr1ljjd3x] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-6tr1ljjd3x] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-6tr1ljjd3x] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-6tr1ljjd3x] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar ── */
/* NmInput mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-6tr1ljjd3x] .carank-toolbar .nm-input-wrap { width: 280px; flex: 0 0 auto; }
.carank-stat[b-6tr1ljjd3x] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.carank-stat b[b-6tr1ljjd3x] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.carank-stat + .carank-stat[b-6tr1ljjd3x] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card danh sách ── */
[b-6tr1ljjd3x] .carank-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.carank-card-ico[b-6tr1ljjd3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.carank-card-title[b-6tr1ljjd3x] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.carank-card-count[b-6tr1ljjd3x] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.carank-card-hint[b-6tr1ljjd3x] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.cell-2line[b-6tr1ljjd3x] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-6tr1ljjd3x] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.cell-2line__sub[b-6tr1ljjd3x] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.carank-name[b-6tr1ljjd3x] { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.carank-dot[b-6tr1ljjd3x] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.carank-money[b-6tr1ljjd3x] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nm-row-actions[b-6tr1ljjd3x] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-6tr1ljjd3x] .carank-row-inactive .nm-grid__td { opacity: .65; }

/* ── Footer phân trang ── */
.carank-foot[b-6tr1ljjd3x] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal form ── */
.carank-form[b-6tr1ljjd3x] { display: flex; flex-direction: column; gap: 12px; }

/* Chọn màu cấp bậc */
.carank-colors[b-6tr1ljjd3x] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.carank-swatch[b-6tr1ljjd3x] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .1s, border-color .1s;
    padding: 0;
}
.carank-swatch.is-active[b-6tr1ljjd3x] {
    border-color: var(--nm-ink);
    transform: scale(1.12);
}
.carank-color-input[b-6tr1ljjd3x] {
    width: 34px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--nm-border);
    border-radius: 8px;
    background: var(--nm-surface);
    cursor: pointer;
}

/* Modal định mức */
.carank-ent-hd[b-6tr1ljjd3x] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.carank-ent-rank[b-6tr1ljjd3x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--nm-muted);
}
.carank-sec[b-6tr1ljjd3x] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-brand-700);
}
.carank-cabins[b-6tr1ljjd3x] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.carank-ent-toggles[b-6tr1ljjd3x] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
[b-6tr1ljjd3x] .carank-foot-del { margin-right: auto; }

@media (max-width: 640px) {
    .nm-list-page[b-6tr1ljjd3x] { padding: 16px 14px 22px; }
    [b-6tr1ljjd3x] .carank-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/Settings/Pages/Ca/CaTravelPolicies.razor.rz.scp.css */
/* /ca/travel-policies — chuẩn nm-list token-only: head + NmToolbar (chip trạng thái + lọc) + NmCard DataGrid + modal chi tiết + modal form theo loại. */
.nm-list-page[b-2ie2w6kuil] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-2ie2w6kuil] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-2ie2w6kuil] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.catpol-title[b-2ie2w6kuil] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-2ie2w6kuil] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-2ie2w6kuil] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-2ie2w6kuil] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar ── */
.catpol-chips[b-2ie2w6kuil] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.catpol-chip-n[b-2ie2w6kuil] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-2ie2w6kuil] .catpol-toolbar .nm-input-wrap { width: 220px; flex: 0 0 auto; }
[b-2ie2w6kuil] .catpol-toolbar .nm-select-wrap { width: 180px; flex: 0 0 auto; }
.catpol-stat[b-2ie2w6kuil] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.catpol-stat b[b-2ie2w6kuil] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }

/* ── Card danh sách ── */
[b-2ie2w6kuil] .catpol-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.catpol-card-ico[b-2ie2w6kuil] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.catpol-card-title[b-2ie2w6kuil] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.catpol-card-count[b-2ie2w6kuil] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.cell-2line[b-2ie2w6kuil] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.cell-2line__main[b-2ie2w6kuil] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.cell-muted[b-2ie2w6kuil] { color: var(--nm-muted); font-size: 12px; }

.catpol-minis[b-2ie2w6kuil] { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.catpol-mini[b-2ie2w6kuil] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    white-space: nowrap;
}
.catpol-mini.warn[b-2ie2w6kuil] { background: color-mix(in srgb, var(--nm-warn) 14%, transparent); color: var(--nm-warn); }
.catpol-mini.bad[b-2ie2w6kuil] { background: color-mix(in srgb, var(--nm-bad) 12%, transparent); color: var(--nm-bad); }
.catpol-mini.muted[b-2ie2w6kuil] { background: var(--nm-surface-2); color: var(--nm-muted); }

.catpol-rules[b-2ie2w6kuil] { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.catpol-rule[b-2ie2w6kuil] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.catpol-rule small[b-2ie2w6kuil] {
    font-size: 10px;
    font-weight: 600;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.catpol-rule-more[b-2ie2w6kuil] {
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-brand-700);
    white-space: nowrap;
}

.catpol-eff[b-2ie2w6kuil] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nm-row-actions[b-2ie2w6kuil] { display: inline-flex; gap: 4px; justify-content: flex-end; }
[b-2ie2w6kuil] .catpol-row-inactive .nm-grid__td { opacity: .65; }

/* ── Footer phân trang ── */
.catpol-foot[b-2ie2w6kuil] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal chi tiết quy tắc ── */
.catpol-detail-hd[b-2ie2w6kuil] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.catpol-detail-body[b-2ie2w6kuil] { display: flex; flex-direction: column; gap: 12px; }
.catpol-detail-eff[b-2ie2w6kuil] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.catpol-detail-eff i[b-2ie2w6kuil] { color: var(--nm-brand-700); }
.catpol-detail-eff b[b-2ie2w6kuil] { color: var(--nm-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.catpol-detail-cards[b-2ie2w6kuil] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.catpol-detail-card[b-2ie2w6kuil] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    min-width: 0;
}
.catpol-detail-card-lbl[b-2ie2w6kuil] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.catpol-detail-card-val[b-2ie2w6kuil] { font-size: 13.5px; font-weight: 600; color: var(--nm-ink); overflow-wrap: anywhere; }
.catpol-detail-card-sub[b-2ie2w6kuil] { font-size: 11px; color: var(--nm-muted); }
.catpol-detail-card.tone-money .catpol-detail-card-val[b-2ie2w6kuil] { color: var(--nm-brand-700); font-variant-numeric: tabular-nums; }
.catpol-detail-card.tone-good .catpol-detail-card-val[b-2ie2w6kuil] { color: var(--nm-ok); }
.catpol-detail-card.tone-muted .catpol-detail-card-val[b-2ie2w6kuil] { color: var(--nm-muted); }

/* ── Modal form ── */
.catpol-form[b-2ie2w6kuil] { display: flex; flex-direction: column; gap: 12px; }
.catpol-sec[b-2ie2w6kuil] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-brand-700);
}
.catpol-cabins[b-2ie2w6kuil] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.catpol-airlines[b-2ie2w6kuil] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px 12px;
    max-height: 180px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.catpol-airline-iata[b-2ie2w6kuil] {
    display: inline-block;
    min-width: 26px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-brand-700);
}

@media (max-width: 640px) {
    .nm-list-page[b-2ie2w6kuil] { padding: 16px 14px 22px; }
    [b-2ie2w6kuil] .catpol-toolbar .nm-input-wrap,
    [b-2ie2w6kuil] .catpol-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/Settings/Pages/Ca/CaWorkflows.razor.rz.scp.css */
/* /ca/workflows — chuẩn nm-list token-only: config accordion + NmButtonGroup module + workflow chips + card scope/steps + 3 NmModal. */
.nm-list-page[b-ulgdy5v3lf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-ulgdy5v3lf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-ulgdy5v3lf] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cawf-title[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-ulgdy5v3lf] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-ulgdy5v3lf] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Config accordion ── */
.cawf-config-body[b-ulgdy5v3lf] { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 2px; }
.cawf-config-desc[b-ulgdy5v3lf] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }
.cawf-config-block[b-ulgdy5v3lf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cawf-config-hint[b-ulgdy5v3lf] { margin: -2px 0 0 44px; font-size: 11.5px; color: var(--nm-muted); }
.cawf-config-actions[b-ulgdy5v3lf] { display: flex; justify-content: flex-end; }

/* ── Toolbar module ── */
.cawf-stat[b-ulgdy5v3lf] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cawf-stat b[b-ulgdy5v3lf] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }

/* ── Workflow chips ── */
.cawf-wf-row[b-ulgdy5v3lf] { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.cawf-wf[b-ulgdy5v3lf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-size: 13px;
}
.cawf-wf:hover[b-ulgdy5v3lf] { border-color: var(--nm-brand-500); }
.cawf-wf.is-active[b-ulgdy5v3lf] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
}
.cawf-wf-name[b-ulgdy5v3lf] { font-weight: 600; color: var(--nm-ink); }
.cawf-wf.is-active .cawf-wf-name[b-ulgdy5v3lf] { color: var(--nm-brand-700); }
.cawf-wf-code[b-ulgdy5v3lf] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nm-muted);
}
.cawf-wf-acts[b-ulgdy5v3lf] { display: inline-flex; gap: 2px; }

.cawf-empty-desc[b-ulgdy5v3lf] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

/* ── Card scope + steps ── */
[b-ulgdy5v3lf] .cawf-card .nm-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cawf-scope-lbl[b-ulgdy5v3lf] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    flex-shrink: 0;
}
.cawf-scope-chips[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cawf-chip-n[b-ulgdy5v3lf] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cawf-noscope[b-ulgdy5v3lf] { font-size: 12px; color: var(--nm-muted); font-style: italic; }
.cawf-scope-acts[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Điều kiện scope */
.cawf-cond[b-ulgdy5v3lf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 12px 14px 0;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cawf-cond-item[b-ulgdy5v3lf] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cawf-cond-item small[b-ulgdy5v3lf] { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--nm-muted); }
.cawf-cond-item b[b-ulgdy5v3lf] { font-size: 13px; font-weight: 600; color: var(--nm-ink); overflow-wrap: anywhere; }
.cawf-cond-item.is-danger b[b-ulgdy5v3lf] { color: var(--nm-bad); }

/* Danh sách bước */
.cawf-steps[b-ulgdy5v3lf] { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.cawf-steps-empty[b-ulgdy5v3lf] {
    margin: 0;
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--nm-muted);
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cawf-step[b-ulgdy5v3lf] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.cawf-step-num[b-ulgdy5v3lf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nm-brand-500);
    color: var(--nm-on-brand, #fff);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}
.cawf-step-num.is-auto[b-ulgdy5v3lf] { background: var(--nm-muted); }
.cawf-step-main[b-ulgdy5v3lf] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cawf-step-name[b-ulgdy5v3lf] { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--nm-ink); }
.cawf-step-tags[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cawf-step-appr[b-ulgdy5v3lf] { font-size: 12px; color: var(--nm-ink-2); overflow-wrap: anywhere; }
.cawf-step-meta[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--nm-muted); }
.cawf-step-meta .sep[b-ulgdy5v3lf] { opacity: .6; }
.cawf-step-meta .is-required[b-ulgdy5v3lf] { color: var(--nm-info); font-weight: 600; }
.cawf-step-meta .is-auto[b-ulgdy5v3lf] { color: var(--nm-ok); font-weight: 600; }
.cawf-step-arrow[b-ulgdy5v3lf] { margin-left: 13px; color: var(--nm-muted); font-size: 12px; line-height: 1; }
.cawf-steps-foot[b-ulgdy5v3lf] { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--nm-border); }

.nm-row-actions[b-ulgdy5v3lf] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Modal form ── */
.cawf-form[b-ulgdy5v3lf] { display: flex; flex-direction: column; gap: 12px; }
.cawf-form-module[b-ulgdy5v3lf] { margin: 0; font-size: 12px; color: var(--nm-muted); }
.cawf-form-module b[b-ulgdy5v3lf] { color: var(--nm-brand-700); }
.cawf-form-hint[b-ulgdy5v3lf] { margin: -4px 0 0; font-size: 11.5px; color: var(--nm-muted); }
.cawf-sec[b-ulgdy5v3lf] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-brand-700);
}
.cawf-checks[b-ulgdy5v3lf] { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
[b-ulgdy5v3lf] .cawf-mono input { font-family: ui-monospace, 'JetBrains Mono', monospace; }

/* Chọn chế độ duyệt */
.cawf-modes[b-ulgdy5v3lf] { display: flex; flex-direction: column; gap: 6px; }
.cawf-mode[b-ulgdy5v3lf] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 36px 9px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.cawf-mode:hover[b-ulgdy5v3lf] { border-color: var(--nm-brand-500); }
.cawf-mode.is-active[b-ulgdy5v3lf] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.cawf-mode-lbl[b-ulgdy5v3lf] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.cawf-mode-desc[b-ulgdy5v3lf] { font-size: 11.5px; color: var(--nm-muted); }
.cawf-mode-check[b-ulgdy5v3lf] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-brand-700);
    font-size: 14px;
}

/* Danh sách người duyệt */
.cawf-approvers[b-ulgdy5v3lf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.cawf-approvers-hd[b-ulgdy5v3lf] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cawf-approver[b-ulgdy5v3lf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface);
}
.cawf-approver > :first-child[b-ulgdy5v3lf] { flex: 1; min-width: 0; }
.cawf-approver-user[b-ulgdy5v3lf] { display: flex; flex-direction: column; gap: 3px; }
.cawf-lookup[b-ulgdy5v3lf] { margin: 0; font-size: 11px; }
.cawf-lookup.muted[b-ulgdy5v3lf] { color: var(--nm-muted); }
.cawf-lookup.ok[b-ulgdy5v3lf] { color: var(--nm-ok); }
.cawf-lookup.bad[b-ulgdy5v3lf] { color: var(--nm-bad); }

@media (max-width: 640px) {
    .nm-list-page[b-ulgdy5v3lf] { padding: 16px 14px 22px; }
    .cawf-config-hint[b-ulgdy5v3lf] { margin-left: 0; }
    .cawf-scope-acts[b-ulgdy5v3lf] { margin-left: 0; }
}
/* /src/Features/Settings/Pages/Manager/BookingHoldConfig.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   BookingHoldConfig — nm-list shell (token-only, scoped).
   Chrome (card/grid/modal/field/switch/stepper) do primitive Nm* lo;
   file này chỉ style: shell trang, pill loại người dùng, thanh 24h
   khung giờ cấm, cell tuỳ biến và summary trong modal.
   ═══════════════════════════════════════════════════════════════ */
.nm-list-page[b-ufe1eurlz5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-ufe1eurlz5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-ufe1eurlz5] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-ufe1eurlz5] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }

.nm-list-note[b-ufe1eurlz5] { margin: 0; font-size: 12px; color: var(--nm-muted); }

/* pill loại người dùng (cột đầu) */
.bh-usertype[b-ufe1eurlz5] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
}

/* cột khung giờ: chữ + thanh 24h trực quan (khung qua đêm = 2 đoạn) */
.bh-window[b-ufe1eurlz5] { display: inline-flex; flex-direction: column; gap: 5px; min-width: 150px; }
.bh-window__text[b-ufe1eurlz5] { font-size: 13.5px; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.bh-window__text--off[b-ufe1eurlz5] { color: var(--nm-muted); }
.bh-track[b-ufe1eurlz5] {
    position: relative;
    width: 150px;
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    overflow: hidden;
}
.bh-track__seg[b-ufe1eurlz5] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--nm-brand-500);
    opacity: .85;
}

/* múi giờ + số phút giữ chỗ */
.bh-tz[b-ufe1eurlz5] { font-size: 12.5px; color: var(--nm-muted); }
.nm-cutoff[b-ufe1eurlz5] { font-size: 13.5px; color: var(--nm-ink); font-variant-numeric: tabular-nums; }

.nm-row-actions[b-ufe1eurlz5] { display: inline-flex; gap: 4px; justify-content: center; }

/* làm mờ dòng inactive — tr do DataGrid render nên phải ::deep */
.nm-list-page[b-ufe1eurlz5]  .nm-row-dim { opacity: .55; }

/* ── form trong modal ── */
.nm-form-stack[b-ufe1eurlz5] { display: flex; flex-direction: column; gap: 14px; }
.nm-form-grid[b-ufe1eurlz5] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* summary khung giờ hiện tại — banner nhỏ, đổi tông theo trạng thái */
.bh-summary[b-ufe1eurlz5] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13.5px;
    font-weight: 600;
}
.bh-summary--off[b-ufe1eurlz5] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-weight: 500;
}
.bh-summary .bh-track[b-ufe1eurlz5] { width: 100%; background: var(--nm-surface); }

@media (max-width: 640px) {
    .nm-list-page[b-ufe1eurlz5] { padding: 16px; }
    .nm-form-grid[b-ufe1eurlz5] { grid-template-columns: 1fr; }
}
/* /src/Features/Settings/Pages/Manager/ServiceCatalogIndex.razor.rz.scp.css */
/* /manager/system/services — chuẩn nm-list token-only: head + toolbar lọc + NmCard DataGrid + NmModal. */
.nm-list-page[b-2j7k7zlzqm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-2j7k7zlzqm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-2j7k7zlzqm] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-2j7k7zlzqm] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 62ch; }
.nm-list-actions[b-2j7k7zlzqm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-2j7k7zlzqm] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Bộ lọc ─────────────────────────────────────────────────────────────────
   Bề rộng đặt trên thẻ BỌC (.tb-search / .tb-select) chứ không phải trên NmInput/NmSelect:
   Class của 2 primitive đó rơi vào thẻ <input>/<select> bên trong, còn .nm-input-wrap /
   .nm-select-wrap vẫn width:100% — đặt nhầm chỗ là hộp thu nhỏ mà mũi tên select văng ra
   mép phải và mỗi ô chiếm trọn một dòng. */
.nm-list-toolbar[b-2j7k7zlzqm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
}

.tb-search[b-2j7k7zlzqm] { width: 300px; max-width: 100%; }
.tb-select[b-2j7k7zlzqm] { width: 180px; }
.tb-select--cat[b-2j7k7zlzqm] { width: 190px; }
.tb-select--mode[b-2j7k7zlzqm] { width: 190px; }
.tb-select--holds[b-2j7k7zlzqm] { width: 210px; }
.tb-filters[b-2j7k7zlzqm] { display: contents; }

/* Nút bộ lọc chỉ hiện ở mobile. Cần .nm-btn trong selector để thắng .nm-btn[scope] của bundle. */
[b-2j7k7zlzqm] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-2j7k7zlzqm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* Chip trạng thái dạt về phải, tách khỏi cụm select */
.tb-status[b-2j7k7zlzqm] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
/* Số đếm trong chip: tách khỏi nhãn bằng nền mờ để đọc lướt được */
[b-2j7k7zlzqm] .tb-status .nm-chip b {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
[b-2j7k7zlzqm] .tb-status .nm-chip--active b { background: var(--nm-surface); }

/* ── Card danh sách ── */
[b-2j7k7zlzqm] .sccat-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sccat-card-ico[b-2j7k7zlzqm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.sccat-card-title[b-2j7k7zlzqm] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.sccat-card-count[b-2j7k7zlzqm] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
.sccat-card-hint[b-2j7k7zlzqm] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid (template thuộc scope trang) ── */
.sccat-svc[b-2j7k7zlzqm] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sccat-ico[b-2j7k7zlzqm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    color: var(--nm-brand-700);
    font-size: 15px;
    line-height: 1;
}
.sccat-ico--lg[b-2j7k7zlzqm] { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }

.cell-2line[b-2j7k7zlzqm] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-2j7k7zlzqm] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub[b-2j7k7zlzqm] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cell-muted[b-2j7k7zlzqm] { color: var(--nm-muted); }

.sccat-desc[b-2j7k7zlzqm] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 320px;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    line-height: 1.45;
}

.sccat-modes[b-2j7k7zlzqm] { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.sccat-order[b-2j7k7zlzqm] {
    display: inline-block;
    min-width: 26px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

.nm-row-actions[b-2j7k7zlzqm] { display: inline-flex; gap: 4px; justify-content: flex-end; }
/* Dịch vụ đã ngừng vẫn hiện nhưng làm mờ để không cạnh tranh với dòng đang chạy */
[b-2j7k7zlzqm] .sccat-row-off .nm-grid__td { opacity: .6; }

/* ── Modal form ── */
.sccat-form[b-2j7k7zlzqm] { display: flex; flex-direction: column; gap: 12px; }

.sccat-icon-row[b-2j7k7zlzqm] { display: flex; align-items: center; gap: 10px; }
[b-2j7k7zlzqm] .sccat-icon-row .nm-input-wrap { flex: 1 1 auto; }

.sccat-box[b-2j7k7zlzqm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card, 12px);
    background: var(--nm-surface-2);
}
.sccat-box-title[b-2j7k7zlzqm] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nm-muted);
}
.sccat-toggle[b-2j7k7zlzqm] { display: flex; flex-direction: column; gap: 4px; }
.sccat-toggle-hint[b-2j7k7zlzqm] {
    margin: 0;
    padding-left: 46px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nm-muted);
}

/* Khoảng 1200px trở xuống toolbar hết chỗ cho 1 hàng → cụm chip xuống hàng dưới, căn trái */
@media (max-width: 1200px) {
    .tb-search[b-2j7k7zlzqm] { flex: 1 1 240px; width: auto; }
    .tb-status[b-2j7k7zlzqm] { margin-left: 0; flex-basis: 100%; }
    .sccat-card-hint[b-2j7k7zlzqm] { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 760px) {
    .tb-search[b-2j7k7zlzqm] { flex: 1 1 auto; }
    [b-2j7k7zlzqm] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-2j7k7zlzqm] { display: none; }
    .tb-filters.is-open[b-2j7k7zlzqm] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-2j7k7zlzqm] { flex: 1 1 45%; width: auto; min-width: 0; }
    [b-2j7k7zlzqm] .tb-clear { margin-left: auto; }
}

@media (max-width: 640px) {
    .nm-list-page[b-2j7k7zlzqm] { padding: 16px 14px 22px; }
    .sccat-toggle-hint[b-2j7k7zlzqm] { padding-left: 0; }
}
/* /src/Features/Settings/Pages/Manager/SettingsIndex.razor.rz.scp.css */
/* SettingsIndex — Manager Dashboard v4. Prefix: set- */
.set-root[b-2j0h7yvcp3] {
    --d-bg: #f8fafc; --d-surface: #ffffff; --d-surface-2: #f5f3ef;
    --d-line: #e8e4df; --d-line-2: #efeae3;
    --d-ink: #1c1917; --d-ink-2: #44403c; --d-ink-3: #78716c; --d-ink-4: #a8a29e;
    --d-accent: #ea580c; --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a; --d-warn: #d97706; --d-warn-soft: #fef3c7; --d-danger: #dc2626;
    --d-r: 10px; color: var(--d-ink); background: var(--d-bg); min-height: 100%;
}

.set-page[b-2j0h7yvcp3] { padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; min-height: calc(100vh - 64px); }

.set-hero[b-2j0h7yvcp3] { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--d-line); }
.set-hero h1[b-2j0h7yvcp3] { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.set-hero h1 em[b-2j0h7yvcp3] { font-style: normal; color: var(--d-ink-3); font-weight: 500; }
.set-hero-meta[b-2j0h7yvcp3] { margin-top: 6px; display: flex; align-items: center; gap: 12px; color: var(--d-ink-3); font-size: 14px; flex-wrap: wrap; }
.set-hero-meta .dot[b-2j0h7yvcp3] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }

.set-saved-tag[b-2j0h7yvcp3] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: color-mix(in srgb, var(--d-good) 12%, transparent); color: var(--d-good); border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent); }

.set-grid[b-2j0h7yvcp3] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .set-grid[b-2j0h7yvcp3] { grid-template-columns: 260px 1fr; } }

.set-card[b-2j0h7yvcp3] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }

.set-nav[b-2j0h7yvcp3] { display: flex; flex-direction: row; overflow-x: auto; }
@media (min-width: 1024px) { .set-nav[b-2j0h7yvcp3] { flex-direction: column; overflow-x: visible; } }
.set-nav-item[b-2j0h7yvcp3] { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-align: left; border: 0; background: transparent; cursor: pointer; border-bottom: 1px solid var(--d-line-2); transition: background .12s; color: var(--d-ink); }
.set-nav-item:hover[b-2j0h7yvcp3] { background: var(--d-surface-2); }
.set-nav-item.active[b-2j0h7yvcp3] { background: var(--d-accent-soft); color: var(--d-accent); border-left: 3px solid var(--d-accent); padding-left: 11px; }
.set-nav-name[b-2j0h7yvcp3] { display: block; font-size: 14px; font-weight: 500; color: inherit; }
.set-nav-desc[b-2j0h7yvcp3] { display: block; font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.set-nav-item.active .set-nav-desc[b-2j0h7yvcp3] { color: var(--d-accent); opacity: .8; }

.set-section[b-2j0h7yvcp3] { padding: 20px 24px; }
.set-section h2[b-2j0h7yvcp3] { margin: 0 0 4px; font-family: 'Inter Tight', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.set-section p.sub[b-2j0h7yvcp3] { margin: 0 0 18px; font-size: 14px; color: var(--d-ink-3); }

.set-field[b-2j0h7yvcp3] { margin-bottom: 14px; max-width: 560px; }
.set-field label[b-2j0h7yvcp3] { display: block; font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.set-field-row[b-2j0h7yvcp3] { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 560px; }
@media (min-width: 640px) { .set-field-row[b-2j0h7yvcp3] { grid-template-columns: 1fr 1fr; } }
.set-input[b-2j0h7yvcp3] { width: 100%; height: 38px; padding: 0 12px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; color: var(--d-ink); }
.set-input:focus[b-2j0h7yvcp3] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,.12); }
.set-textarea[b-2j0h7yvcp3] { width: 100%; padding: 8px 12px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; color: var(--d-ink); resize: vertical; }
.set-textarea:focus[b-2j0h7yvcp3] { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,.12); }

.set-toggle-row[b-2j0h7yvcp3] { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--d-line-2); max-width: 560px; }
.set-toggle-row:last-child[b-2j0h7yvcp3] { border-bottom: 0; }
.set-toggle-row .meta[b-2j0h7yvcp3] { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.set-toggle-row .meta small[b-2j0h7yvcp3] { display: block; font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; font-weight: 400; }
.set-toggle[b-2j0h7yvcp3] { position: relative; display: inline-flex; align-items: center; height: 22px; width: 40px; border: 0; border-radius: 999px; background: var(--d-line); cursor: pointer; transition: background .12s; }
.set-toggle.on[b-2j0h7yvcp3] { background: var(--d-accent-grad); }
.set-toggle .knob[b-2j0h7yvcp3] { display: inline-block; height: 16px; width: 16px; border-radius: 50%; background: #fff; transform: translateX(3px); transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.set-toggle.on .knob[b-2j0h7yvcp3] { transform: translateX(21px); }

.set-btn[b-2j0h7yvcp3] { height: 38px; padding: 0 16px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.set-btn:hover[b-2j0h7yvcp3] { background: var(--d-surface-2); }
.set-btn-accent[b-2j0h7yvcp3] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22); }
.set-btn-accent:hover[b-2j0h7yvcp3] { background: var(--d-accent-grad-hover); color: #fff; }
.set-btn:disabled[b-2j0h7yvcp3] { opacity: .5; cursor: not-allowed; }

.set-integ-item[b-2j0h7yvcp3] { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid var(--d-line); border-radius: var(--d-r); margin-bottom: 10px; }
.set-integ-name[b-2j0h7yvcp3] { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.set-integ-desc[b-2j0h7yvcp3] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }
.set-tag[b-2j0h7yvcp3] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; margin-top: 4px; }
.set-tag.good[b-2j0h7yvcp3] { background: color-mix(in srgb, var(--d-good) 12%, transparent); color: var(--d-good); }
.set-tag.draft[b-2j0h7yvcp3] { background: var(--d-surface-2); color: var(--d-ink-3); }

.set-stat-card[b-2j0h7yvcp3] { padding: 16px; border: 1px solid var(--d-line); border-radius: var(--d-r); margin-bottom: 14px; }
.set-stat-card h4[b-2j0h7yvcp3] { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.set-stat-card p[b-2j0h7yvcp3] { margin: 0 0 10px; font-size: 12px; color: var(--d-ink-3); }
.set-stat-row[b-2j0h7yvcp3] { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.set-stat-row span[b-2j0h7yvcp3] { color: var(--d-ink-3); }
.set-stat-row strong[b-2j0h7yvcp3] { color: var(--d-ink); font-weight: 500; }

.set-warn-banner[b-2j0h7yvcp3] { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--d-r); background: var(--d-warn-soft); color: #92400e; border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent); font-size: 12.5px; }
/* /src/Features/Support/Pages/Ca/Support.razor.rz.scp.css */
/* /ca/support — chuẩn nm token-only: shell 2 cột (form + FAQ | liên hệ). */
.nm-list-page[b-1fuk68ea3u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-1fuk68ea3u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-1fuk68ea3u] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.casup-title[b-1fuk68ea3u] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-1fuk68ea3u] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-1fuk68ea3u] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-1fuk68ea3u] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* Pill trạng thái / giờ hỗ trợ trên head */
.casup-hpill[b-1fuk68ea3u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    font-size: 12px;
}
.casup-hpill b[b-1fuk68ea3u] { font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.casup-hpill small[b-1fuk68ea3u] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

/* ── Shell 2 cột ── */
.casup-shell[b-1fuk68ea3u] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .casup-shell[b-1fuk68ea3u] { grid-template-columns: minmax(0, 1fr); }
}

.casup-main[b-1fuk68ea3u] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Card ── */
[b-1fuk68ea3u] .casup-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.casup-card-ico[b-1fuk68ea3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.casup-card-title[b-1fuk68ea3u] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.casup-card-sub[b-1fuk68ea3u] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }

.casup-card-body[b-1fuk68ea3u] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.casup-actions[b-1fuk68ea3u] { display: flex; justify-content: flex-end; }

/* Trạng thái gửi thành công */
.casup-done[b-1fuk68ea3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px;
    text-align: center;
}
.casup-done-ico[b-1fuk68ea3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nm-ok) 13%, transparent);
    color: var(--nm-ok);
    font-size: 22px;
}
.casup-done h3[b-1fuk68ea3u] { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--nm-ink); }
.casup-done p[b-1fuk68ea3u] { margin: 0 0 6px; font-size: 12.5px; color: var(--nm-muted); }

/* FAQ — NmAccordion nằm gọn trong card */
.casup-faq[b-1fuk68ea3u] { padding: 6px 8px; }
.casup-faq-a[b-1fuk68ea3u] { margin: 0; font-size: 13px; color: var(--nm-ink-2); white-space: pre-wrap; }

/* ── Side panel phải ── */
.casup-side[b-1fuk68ea3u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.casup-block[b-1fuk68ea3u] { display: flex; flex-direction: column; gap: 8px; }
.casup-block--divider[b-1fuk68ea3u] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.casup-label[b-1fuk68ea3u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.casup-label i[b-1fuk68ea3u] { font-size: 12px; }

.casup-contact-row[b-1fuk68ea3u] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nm-ink);
    overflow-wrap: anywhere;
}
/* Mỗi ô liên hệ: nhãn nhỏ ở trên, giá trị bên dưới (mỗi số 1 dòng) */
.casup-contact-stack[b-1fuk68ea3u] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.casup-contact-cap[b-1fuk68ea3u] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--nm-muted);
}
.casup-contact-val[b-1fuk68ea3u] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--nm-ink);
}
.casup-contact-val--num[b-1fuk68ea3u] {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    white-space: nowrap;
}

.casup-contact-ico[b-1fuk68ea3u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 12px;
    flex-shrink: 0;
}

/* Ghi chú thời gian phản hồi */
.casup-rt[b-1fuk68ea3u] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}
.casup-rt i[b-1fuk68ea3u] {
    font-size: 13px;
    color: var(--nm-brand-700);
    margin-top: 1px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .nm-list-page[b-1fuk68ea3u] { padding: 16px 14px 22px; }
}
/* /src/Features/Support/Pages/Manager/SupportTicketsIndex.razor.rz.scp.css */
/* SupportTicketsIndex — chuẩn nm-list, bố cục hướng THAO TÁC ở QUY MÔ LỚN:
   thanh phân loại (số liệu kiêm bộ lọc) → toolbar → thanh hàng loạt → bảng dày.
   Bản trước dựng sẵn 5 thẻ "Cần xử lý ngay" ở đầu trang; với hàng nghìn ticket thì 5 dòng
   cố định vừa chiếm gần hết màn hình vừa chẳng giải quyết được gì, nên đã bỏ hẳn. */

/* ── shell trang ─────────────────────────────────────────── */
.nm-list-page[b-foytd0qlru] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-foytd0qlru] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-foytd0qlru] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-foytd0qlru] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 640px; }
.nm-list-actions[b-foytd0qlru] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── thanh phân loại: SỐ LIỆU kiêm BỘ LỌC ────────────────────
   Mỗi ô là một rổ việc. Số to nằm trên, nhãn nhỏ nằm dưới — quét mắt là biết rổ nào đang
   phình. Bấm để lọc thẳng bảng bên dưới, nên số liệu không bao giờ là thứ chỉ để ngắm. */
.triage[b-foytd0qlru] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.triage__seg[b-foytd0qlru] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 9px 12px;
    border: 1px solid var(--nm-border);
    border-left: 3px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.triage__seg:hover[b-foytd0qlru] { background: var(--nm-surface-2); }

.triage__n[b-foytd0qlru] {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.triage__lbl[b-foytd0qlru] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Dải màu trái = mức gấp. Chỉ tô viền, KHÔNG tô nền: 6 ô nền màu cạnh nhau thành cầu vồng,
   mắt hết chỗ bám và rổ gấp nhất không còn nổi hơn rổ khác. */
.triage__seg--bad[b-foytd0qlru]     { border-left-color: var(--nm-bad); }
.triage__seg--warn[b-foytd0qlru]    { border-left-color: var(--nm-warn); }
.triage__seg--info[b-foytd0qlru]    { border-left-color: var(--nm-info); }
.triage__seg--good[b-foytd0qlru]    { border-left-color: var(--nm-ok); }
.triage__seg--pending[b-foytd0qlru] { border-left-color: var(--nm-muted); }
.triage__seg--accent[b-foytd0qlru]  { border-left-color: var(--nm-brand-500); }

.triage__seg--bad .triage__n[b-foytd0qlru] { color: var(--nm-bad); }

.triage__seg.is-active[b-foytd0qlru] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50, var(--nm-surface-2));
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.triage__seg.is-active .triage__lbl[b-foytd0qlru] { color: var(--nm-brand-700); }

/* ── thanh thao tác hàng loạt ────────────────────────────── */
.bulkbar[b-foytd0qlru] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--nm-brand-500);
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50, var(--nm-surface-2));
}
.bulkbar__n[b-foytd0qlru] { font-size: 13px; font-weight: 800; color: var(--nm-brand-700); }
.bulkbar__acts[b-foytd0qlru] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bulkbar__prog[b-foytd0qlru] { font-size: 12.5px; font-weight: 700; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; }
.bulkbar > :last-child[b-foytd0qlru] { margin-left: auto; }

/* ── toolbar ─────────────────────────────────────────────── */
.nm-list-toolbar[b-foytd0qlru] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-filters[b-foytd0qlru] { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.tb-search[b-foytd0qlru] { width: 300px; }
.tb-cat[b-foytd0qlru] { width: 170px; }
.tb-dates[b-foytd0qlru] { width: 290px; }
.tb-sort[b-foytd0qlru] { width: 168px; }
.tb-count[b-foytd0qlru] { font-size: 12.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; padding-top: 8px; }

/* Chọn số dòng đứng cùng hàng với phân trang — cả hai đều là "điều khiển lượng dữ liệu". */
.nm-list-pager[b-foytd0qlru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.pagesize[b-foytd0qlru] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.pagesize > :last-child[b-foytd0qlru] { width: 82px; }

/* ── ô trong bảng ────────────────────────────────────────── */
.cell-status[b-foytd0qlru] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cell-2line[b-foytd0qlru] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-foytd0qlru] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.cell-2line__sub[b-foytd0qlru] {
    display: flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.cell-2line__sub.is-late[b-foytd0qlru] { color: var(--nm-bad); font-weight: 700; }

.cell-link[b-foytd0qlru] {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--nm-ink); text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px;
}
.cell-link:hover[b-foytd0qlru] { color: var(--nm-brand-600); }

.cell-muted[b-foytd0qlru] {
    color: var(--nm-muted);
    display: inline-block; max-width: 160px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell-replies[b-foytd0qlru] { display: inline-flex; align-items: center; gap: 5px; color: var(--nm-ink-2); font-size: 12.5px; }

.cell-age[b-foytd0qlru] {
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cell-age.is-late[b-foytd0qlru] { color: var(--nm-bad); font-weight: 700; }

.cell-acts[b-foytd0qlru] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }

/* dòng trễ SLA — sọc đỏ mảnh bên trái, không tô nền để bảng khỏi loang màu */
.nm-list-page[b-foytd0qlru]  tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--nm-bad); }

/* ── drawer chi tiết ─────────────────────────────────────── */
.drw-head[b-foytd0qlru] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drw-subject[b-foytd0qlru] {
    font-size: 15px; font-weight: 700; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.drw-body[b-foytd0qlru] { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.drw-body[b-foytd0qlru]  .drw-col-full { grid-column: 1 / -1; }

.drw-sec[b-foytd0qlru] { display: flex; flex-direction: column; gap: 8px; }
.drw-sec-title[b-foytd0qlru] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; color: var(--nm-muted);
}

/* khối đổi trạng thái đứng đầu drawer — tách khỏi phần thông tin bằng nền + gạch dưới */
.drw-statusbar[b-foytd0qlru] {
    padding: 10px 12px;
    margin-bottom: 2px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
}

.drw-mail[b-foytd0qlru] { display: block; font-size: 12.5px; color: var(--nm-brand-600); text-decoration: none; }
.drw-mail:hover[b-foytd0qlru] { text-decoration: underline; }
.drw-cat[b-foytd0qlru] { display: inline-flex; align-items: center; gap: 6px; }

.drw-chips[b-foytd0qlru] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.drw-quote[b-foytd0qlru] {
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    white-space: pre-wrap;
    line-height: 1.55;
}

.drw-notes-save[b-foytd0qlru] { display: flex; justify-content: flex-end; }

.drw-author[b-foytd0qlru] { font-weight: 700; color: var(--nm-ink); }
.drw-reply[b-foytd0qlru] { white-space: pre-wrap; line-height: 1.55; color: var(--nm-ink-2); }

.drw-compose[b-foytd0qlru] { gap: 10px; }
.drw-reply-opts[b-foytd0qlru] {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.drw-newstatus[b-foytd0qlru] { width: 210px; }

@media (max-width: 1100px) {
    .triage[b-foytd0qlru] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .nm-list-page[b-foytd0qlru] { padding: 16px 14px 22px; }
    .triage[b-foytd0qlru] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-search[b-foytd0qlru], .tb-cat[b-foytd0qlru], .tb-dates[b-foytd0qlru], .tb-sort[b-foytd0qlru], .drw-newstatus[b-foytd0qlru] { width: 100%; }
    .tb-filters[b-foytd0qlru] { width: 100%; }
    .bulkbar > :last-child[b-foytd0qlru] { margin-left: 0; }
}
/* /src/Features/SystemOps/Pages/Manager/BackupPage.razor.rz.scp.css */
/* /manager/system/backup — chuẩn NM: nm-list head + NmStatGrid + NmCard/NmField + DataGrid.
   CHỈ dùng token --nm-*, không hex, không class của thư viện ngoài: ứng dụng không nạp Bootstrap
   nên d-flex/btn/text-danger là class chết.

   Lưu ý scope: phần tử do component con dựng (.nm-card__head, .nm-grid__td, .nm-input, .nm-alert…)
   KHÔNG mang scope-id của trang ⇒ phải viết qua ::deep. Phần tử trang tự dựng trong Header/Footer
   thì có scope, viết selector thường. */

.nm-list-page[b-ohlituku8y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Đầu trang ─────────────────────────────────────────────────────────────── */
.nm-list-head[b-ohlituku8y] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-ohlituku8y] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-ohlituku8y] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 62ch; }
.nm-list-actions[b-ohlituku8y] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Bốn con số ────────────────────────────────────────────────────────────── */
.bk-kpi[b-ohlituku8y] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bk-kpi__main[b-ohlituku8y] {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.bk-kpi__sub[b-ohlituku8y] {
    font-size: 12px;
    font-weight: 500;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Bố cục 2 cột: cấu hình rộng hơn, mốc chạy kế tiếp hẹp hơn ─────────────── */
.bk-grid[b-ohlituku8y] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .bk-grid[b-ohlituku8y] { grid-template-columns: 1fr; }
}

/* ── Đầu/chân thẻ ──────────────────────────────────────────────────────────── */
[b-ohlituku8y] .bk-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[b-ohlituku8y] .bk-card .nm-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bk-card-ico[b-ohlituku8y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
}

.bk-card-title[b-ohlituku8y] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.bk-card-switch[b-ohlituku8y] { margin-left: auto; }

.bk-count[b-ohlituku8y] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

.bk-meta[b-ohlituku8y] { font-size: 12px; color: var(--nm-muted); }
.bk-foot-actions[b-ohlituku8y] { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── Form cấu hình ─────────────────────────────────────────────────────────── */
.bk-form[b-ohlituku8y] { display: flex; flex-direction: column; gap: 16px; }

.bk-hint[b-ohlituku8y] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--nm-muted);
}

.bk-hint i[b-ohlituku8y] { margin-top: 1px; flex-shrink: 0; }
.bk-hint b[b-ohlituku8y] { color: var(--nm-ink-2); font-weight: 700; }
.bk-hint--ok[b-ohlituku8y] { color: var(--nm-ok); }
.bk-hint--ok b[b-ohlituku8y] { color: var(--nm-ok); }

/* Biểu thức lịch đọc theo cột ký tự nên bắt buộc chữ đều bề rộng */
[b-ohlituku8y] .bk-cron .nm-input {
    font-family: ui-monospace, 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    letter-spacing: .02em;
}

.bk-presets[b-ohlituku8y] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

[b-ohlituku8y] .bk-inline-alert { margin-top: 9px; }

/* ── Mốc chạy kế tiếp ──────────────────────────────────────────────────────── */
.bk-lead[b-ohlituku8y] { margin: 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--nm-muted); }

.bk-next[b-ohlituku8y] { margin-bottom: 16px; }

.bk-next__head[b-ohlituku8y] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.bk-next__label[b-ohlituku8y] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nm-muted);
}

.bk-runs[b-ohlituku8y] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }

.bk-runs li[b-ohlituku8y] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--nm-border);
}

.bk-runs li:last-child[b-ohlituku8y] { border-bottom: none; }

.bk-runs__date[b-ohlituku8y] { font-size: 13px; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; }

.bk-runs__time[b-ohlituku8y] {
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.bk-err[b-ohlituku8y] { margin: 0; font-size: 12.5px; color: var(--nm-bad); line-height: 1.55; }
.bk-muted[b-ohlituku8y] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

/* ── Bảng tra cú pháp lịch ─────────────────────────────────────────────────── */
.bk-help[b-ohlituku8y] {
    padding: 13px 14px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
}

.bk-help > b[b-ohlituku8y] { display: block; font-size: 12px; font-weight: 700; color: var(--nm-ink); margin-bottom: 7px; }

.bk-help__syntax[b-ohlituku8y] {
    display: block;
    margin-bottom: 9px;
    font-size: 12px;
    color: var(--nm-brand-700);
    letter-spacing: .02em;
}

.bk-help ul[b-ohlituku8y] { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }

.bk-help li[b-ohlituku8y] { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }

.bk-help li code[b-ohlituku8y] {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    color: var(--nm-ink-2);
}

.bk-help li span[b-ohlituku8y] { color: var(--nm-muted); }
.bk-help code[b-ohlituku8y] { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; }
.bk-help small[b-ohlituku8y] { font-size: 11px; color: var(--nm-muted); }

/* ── Lịch sử ───────────────────────────────────────────────────────────────── */
.bk-hist-chips[b-ohlituku8y] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* Số đếm trong chip: tách khỏi nhãn bằng nền mờ để đọc lướt được */
[b-ohlituku8y] .bk-hist-chips .nm-chip b {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

[b-ohlituku8y] .bk-hist-chips .nm-chip--active b { background: var(--nm-surface); }

.bk-cell2[b-ohlituku8y] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bk-cell2--right[b-ohlituku8y] { align-items: flex-end; }
.bk-cell2__main[b-ohlituku8y] { font-size: 12.5px; font-weight: 500; color: var(--nm-ink); }
.bk-cell2__sub[b-ohlituku8y] { font-size: 11px; color: var(--nm-muted); }

.bk-mono[b-ohlituku8y], .bk-num[b-ohlituku8y] {
    font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.bk-num[b-ohlituku8y] { font-size: 12.5px; color: var(--nm-ink-2); }

.bk-result[b-ohlituku8y] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Lỗi phải xuống dòng đọc được — bảng để nguyên white-space:nowrap thì chỉ thấy một mẩu */
.bk-result__err[b-ohlituku8y] {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--nm-bad);
    white-space: normal;
    max-width: 420px;
}

/* Lượt hỏng tô nền để nhìn phát ra ngay giữa danh sách toàn lượt xong */
[b-ohlituku8y] .bk-row-fail .nm-grid__td { background: var(--nm-bad-soft); }

@media (max-width: 640px) {
    .nm-list-page[b-ohlituku8y] { padding: 16px 14px 22px; }
    .nm-list-actions[b-ohlituku8y] { width: 100%; }
    .bk-hist-chips[b-ohlituku8y] { margin-left: 0; flex-basis: 100%; }
    .bk-result__err[b-ohlituku8y] { max-width: 100%; }
}
/* /src/Features/Tours/Pages/Ca/CaTourSearch.razor.rz.scp.css */
/* /ca/tours — chuẩn nm token-only: head + NmToolbar lọc + card grid tour + NmPagination + NmModal đặt tour. */
.nm-list-page[b-hczrpuu707] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-hczrpuu707] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-hczrpuu707] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.catos-title[b-hczrpuu707] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-hczrpuu707] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-hczrpuu707] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-hczrpuu707] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar lọc ── */
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-hczrpuu707] .catos-toolbar .nm-input-wrap { width: 280px; flex: 0 0 auto; }
[b-hczrpuu707] .catos-toolbar .nm-select-wrap { width: 200px; flex: 0 0 auto; }
.catos-stat[b-hczrpuu707] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.catos-stat b[b-hczrpuu707] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.catos-stat + .catos-stat[b-hczrpuu707] { padding-left: 12px; border-left: 1px solid var(--nm-border); }

/* ── Card ── */
[b-hczrpuu707] .catos-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.catos-card-ico[b-hczrpuu707] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.catos-card-title[b-hczrpuu707] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.catos-card-count[b-hczrpuu707] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.catos-card-hint[b-hczrpuu707] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }
.catos-card-body[b-hczrpuu707] { padding: 14px 16px; }
.catos-loading[b-hczrpuu707] { display: flex; flex-direction: column; gap: 10px; }

/* ── Grid tour ── */
.catos-grid[b-hczrpuu707] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.catos-tour[b-hczrpuu707] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.catos-tour:hover[b-hczrpuu707] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--nm-brand-500) 12%, transparent);
    transform: translateY(-2px);
}

.catos-tour-img[b-hczrpuu707] {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}
.catos-tour-img--empty[b-hczrpuu707] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 30px;
}

.catos-tour-body[b-hczrpuu707] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 14px 14px;
    flex: 1;
}
.catos-tour-head[b-hczrpuu707] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.catos-tour-head h3[b-hczrpuu707] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
    line-height: 1.35;
}
.catos-tour-dest[b-hczrpuu707] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    min-width: 0;
}
.catos-tour-dest span[b-hczrpuu707] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catos-tour-tags[b-hczrpuu707] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.catos-tour-stat[b-hczrpuu707] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.catos-tour-stat i[b-hczrpuu707] { color: var(--nm-warn); font-size: 10px; }

.catos-tour-price[b-hczrpuu707] {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding-top: 4px;
}
.catos-tour-price small[b-hczrpuu707] { font-size: 11px; color: var(--nm-muted); }
.catos-tour-price b[b-hczrpuu707] {
    font-size: 16px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
}
[b-hczrpuu707] .catos-tour-cta { width: 100%; justify-content: center; }

/* ── Modal đặt tour ── */
.catos-form[b-hczrpuu707] { display: flex; flex-direction: column; gap: 12px; }

.catos-summary[b-hczrpuu707] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.catos-summary-main[b-hczrpuu707] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.catos-summary-main b[b-hczrpuu707] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.catos-summary-main small[b-hczrpuu707] { font-size: 11.5px; color: var(--nm-muted); }
.catos-summary-total[b-hczrpuu707] { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.catos-summary-total small[b-hczrpuu707] { font-size: 11px; color: var(--nm-muted); }
.catos-summary-total b[b-hczrpuu707] {
    font-size: 17px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
}

.catos-form-section[b-hczrpuu707] {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.catos-pax-section[b-hczrpuu707] { display: flex; flex-direction: column; gap: 8px; }
.catos-pax[b-hczrpuu707] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.catos-pax-lbl[b-hczrpuu707] { font-size: 12px; font-weight: 700; color: var(--nm-ink-2); }

@media (max-width: 640px) {
    .nm-list-page[b-hczrpuu707] { padding: 16px 14px 22px; }
    [b-hczrpuu707] .catos-toolbar .nm-input-wrap,
    [b-hczrpuu707] .catos-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
    .catos-grid[b-hczrpuu707] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
/* /src/Features/Tours/Pages/Manager/DepartureTabs/DepartureItineraryTab.razor.rz.scp.css */
.itn-list[b-76dv29hur7] { display: flex; flex-direction: column; gap: 12px; }
.itn-day-head[b-76dv29hur7] {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}
.itn-day-num[b-76dv29hur7] {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.itn-day-title[b-76dv29hur7] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.itn-day-body[b-76dv29hur7] { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.itn-desc[b-76dv29hur7] { margin: 0; font-size: 14px; color: var(--nm-ink-2); white-space: pre-wrap; }
.itn-meta[b-76dv29hur7] { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--nm-muted); }
.itn-meta i[b-76dv29hur7] { color: var(--nm-brand-500); margin-right: 3px; }
.itn-meta b[b-76dv29hur7] { color: var(--nm-ink); font-weight: 500; }
.itn-day-photos[b-76dv29hur7] { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.itn-day-photos img[b-76dv29hur7] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--nm-border); display: block; }
/* /src/Features/Tours/Pages/Manager/DepartureTabs/DepartureLogsTab.razor.rz.scp.css */
.logs-root[b-59mnfktchc] { display: flex; flex-direction: column; gap: 14px; }
.tab-title[b-59mnfktchc] { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--nm-ink); }

.log-form[b-59mnfktchc] { display: flex; flex-direction: column; gap: 10px; }
.log-form__row[b-59mnfktchc] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.lf-type[b-59mnfktchc] { width: 180px; }
.lf-day[b-59mnfktchc] { width: 90px; }
.lf-amount[b-59mnfktchc] { width: 150px; }
.lf-content[b-59mnfktchc] { flex: 1; min-width: 240px; }

.nm-input[b-59mnfktchc] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink);
    font-size: 13.5px;
    font-family: var(--nm-font);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.nm-input:focus[b-59mnfktchc] { border-color: var(--nm-brand-500); box-shadow: 0 0 0 3px var(--nm-brand-50); }

.log-filter[b-59mnfktchc] { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--nm-muted); }
.lf-day-filter[b-59mnfktchc] { width: 140px; }

.log-list[b-59mnfktchc] { display: flex; flex-direction: column; gap: 10px; }
.log-item[b-59mnfktchc] { padding: 12px 16px; }
.log-item__head[b-59mnfktchc] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.log-item__meta[b-59mnfktchc] { font-size: 12px; color: var(--nm-muted); }
.log-item__content[b-59mnfktchc] { margin: 0; font-size: 14px; color: var(--nm-ink-2); white-space: pre-wrap; }
.log-item__amount[b-59mnfktchc] { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--nm-brand-600); }
/* /src/Features/Tours/Pages/Manager/DepartureTabs/DepartureParticipantsTab.razor.rz.scp.css */
.tab-head[b-opayfq502j] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
}
.tab-title[b-opayfq502j] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.tab-foot[b-opayfq502j] {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    padding: 12px 18px;
    border-top: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    font-size: 13.5px; color: var(--nm-ink-2);
}
.tab-foot b[b-opayfq502j] { color: var(--nm-ink); }

.cell-2line[b-opayfq502j] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-opayfq502j] { font-weight: 500; color: var(--nm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.cell-2line__sub[b-opayfq502j] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.cell-2line__sub.is-warn[b-opayfq502j] { color: var(--nm-bad); font-weight: 600; }
.cell-dim[b-opayfq502j] { color: var(--nm-muted); }
.tick-ok[b-opayfq502j] { color: var(--nm-ok); font-weight: 700; }
.tick-no[b-opayfq502j] { color: var(--nm-border-strong); }
/* /src/Features/Tours/Pages/Manager/DepartureTabs/DepartureSummaryTab.razor.rz.scp.css */
.sum-root[b-qd1zjxs3um] { display: flex; flex-direction: column; gap: 14px; }
.tab-title[b-qd1zjxs3um] { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.tab-title.is-bad[b-qd1zjxs3um] { color: var(--nm-bad); }

.fin-bars[b-qd1zjxs3um] { display: flex; flex-direction: column; gap: 12px; }
.fin-bar__head[b-qd1zjxs3um] { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--nm-ink-2); margin-bottom: 5px; }
.fin-bar__head b[b-qd1zjxs3um] { color: var(--nm-ink); }
.fin-bar__track[b-qd1zjxs3um] { width: 100%; height: 10px; border-radius: var(--nm-r-pill); background: var(--nm-surface-2); overflow: hidden; }
.fin-bar__fill[b-qd1zjxs3um] { height: 100%; border-radius: var(--nm-r-pill); transition: width .3s; }
.fin-bar__fill--rev[b-qd1zjxs3um] { background: var(--nm-info); }
.fin-bar__fill--cost[b-qd1zjxs3um] { background: var(--nm-brand-500); }
.fin-profit[b-qd1zjxs3um] { text-align: right; font-size: 13.5px; color: var(--nm-ink-2); }
.fin-profit .is-ok[b-qd1zjxs3um] { color: var(--nm-ok); }
.fin-profit .is-bad[b-qd1zjxs3um] { color: var(--nm-bad); }
.fin-pct[b-qd1zjxs3um] { color: var(--nm-muted); margin-left: 4px; }

.issue-list[b-qd1zjxs3um] { display: flex; flex-direction: column; gap: 8px; }
.issue-item[b-qd1zjxs3um] { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--nm-ink-2); }
.issue-dot[b-qd1zjxs3um] { width: 8px; height: 8px; border-radius: 50%; background: var(--nm-bad); margin-top: 6px; flex-shrink: 0; }
.issue-meta[b-qd1zjxs3um] { font-size: 12px; color: var(--nm-muted); margin-left: 6px; }

.sum-notes[b-qd1zjxs3um] { margin: 0; font-size: 14px; color: var(--nm-ink-2); white-space: pre-wrap; }
/* /src/Features/Tours/Pages/Manager/DepartureTabs/DepartureSuppliersTab.razor.rz.scp.css */
.tab-head[b-48o24gvtls] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
}
.tab-title[b-48o24gvtls] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.tab-foot[b-48o24gvtls] {
    padding: 12px 18px;
    border-top: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    font-size: 13.5px; color: var(--nm-ink-2);
}
.tab-foot--right[b-48o24gvtls] { text-align: right; }
.tab-foot b[b-48o24gvtls] { color: var(--nm-ink); }

.cell-type[b-48o24gvtls] { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--nm-ink-2); }
.cell-type__ico[b-48o24gvtls] { font-size: 15px; }
.cell-2line[b-48o24gvtls] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-48o24gvtls] { font-weight: 500; color: var(--nm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.cell-2line__sub[b-48o24gvtls] { font-size: 11.5px; color: var(--nm-muted); }
.cell-dim[b-48o24gvtls] { color: var(--nm-muted); }
/* /src/Features/Tours/Pages/Manager/TourAdmin.razor.rz.scp.css */
/* TourAdmin — chuẩn nm-list (theo CurrenciesIndex): shell trang + toolbar; chrome do primitive Nm* lo. */
.nm-list-page[b-5mes4japkz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-5mes4japkz] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-5mes4japkz] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-5mes4japkz] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-sub b[b-5mes4japkz] { color: var(--nm-ink); }
.nm-list-actions[b-5mes4japkz] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-list-toolbar[b-5mes4japkz] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-search[b-5mes4japkz] { width: 280px; }
.tb-select[b-5mes4japkz] { width: 180px; }

.nm-list-pager[b-5mes4japkz] { margin-top: 14px; }

.nm-row-actions[b-5mes4japkz] { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* cell tour: thumbnail + tên + slug */
.cell-tour[b-5mes4japkz] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-tour__thumb[b-5mes4japkz] {
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.cell-tour__thumb--ph[b-5mes4japkz] {
    display: grid; place-items: center;
    background: var(--nm-brand-50);
    color: var(--nm-brand-600);
    font-size: 15px;
}
.cell-tour__txt[b-5mes4japkz] { min-width: 0; display: flex; flex-direction: column; }
.cell-tour__name[b-5mes4japkz] {
    font-weight: 500;
    color: var(--nm-ink);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell-tour__name:hover[b-5mes4japkz] { color: var(--nm-brand-600); }
.cell-tour__slug[b-5mes4japkz] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* modal xoá */
.del-name[b-5mes4japkz] { font-weight: 600; color: var(--nm-ink); margin-bottom: 8px; }
.del-hint[b-5mes4japkz] { margin: 0; font-size: 14px; color: var(--nm-ink-2); }
/* /src/Features/Tours/Pages/Manager/TourBookings.razor.rz.scp.css */
/* TourBookings — chuẩn nm-list (theo CurrenciesIndex): shell trang + toolbar; chrome do primitive Nm* lo. */
.nm-list-page[b-34myf8y8hl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-34myf8y8hl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-34myf8y8hl] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-34myf8y8hl] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-34myf8y8hl] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-list-toolbar[b-34myf8y8hl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chips[b-34myf8y8hl] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-search[b-34myf8y8hl] { width: 280px; }
.tb-date[b-34myf8y8hl] { width: 160px; }
.tb-date-sep[b-34myf8y8hl] { color: var(--nm-muted); font-size: 12px; }

.nm-list-pager[b-34myf8y8hl] { margin-top: 14px; }

.nm-row-actions[b-34myf8y8hl] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* pill mã booking */
.nm-code-pill[b-34myf8y8hl] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
    text-decoration: none;
}
.nm-code-pill:hover[b-34myf8y8hl] { background: var(--nm-brand-100); }

.cell-code[b-34myf8y8hl] { display: inline-flex; align-items: center; gap: 6px; }

/* cell 2 dòng: chính + phụ */
.cell-2line[b-34myf8y8hl] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-34myf8y8hl] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.cell-2line__sub[b-34myf8y8hl] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}

/* modal */
.nm-form-stack[b-34myf8y8hl] { display: flex; flex-direction: column; gap: 14px; }
.modal-sub[b-34myf8y8hl] { margin: 0; font-size: 13px; color: var(--nm-muted); }
/* /src/Features/Tours/Pages/Manager/TourCategories.razor.rz.scp.css */
/* nm-list shell (class không global — CSS isolation, phải khai báo tại trang) */
.nm-list-page[b-lq9s8z0bro] { display: flex; flex-direction: column; gap: 16px; padding: 22px 28px 28px; font-family: var(--nm-font); color: var(--nm-ink); }
.nm-list-head[b-lq9s8z0bro] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nm-list-title[b-lq9s8z0bro] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-lq9s8z0bro] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-lq9s8z0bro] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tc-name[b-lq9s8z0bro] { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tc-name-text[b-lq9s8z0bro] { font-weight: 500; color: var(--nm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-child-icon[b-lq9s8z0bro] { color: var(--nm-muted); font-size: 12px; }
.tc-slug[b-lq9s8z0bro] { font-size: 12px; color: var(--nm-muted); }
.tc-actions[b-lq9s8z0bro] { display: inline-flex; gap: 4px; justify-content: center; }
/* /src/Features/Tours/Pages/Manager/TourDepartureDetail.razor.rz.scp.css */
/* TourDepartureDetail — chuẩn nm-list: shell trang + header card + modal; tab con có CSS riêng. */
.nm-list-page[b-e125rvpqof] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-e125rvpqof] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-e125rvpqof] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-e125rvpqof] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-e125rvpqof] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── header card ── */
.dep-head[b-e125rvpqof] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dep-head__title-row[b-e125rvpqof] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dep-head__title[b-e125rvpqof] { margin: 0; font-size: 17px; font-weight: 700; color: var(--nm-ink); }
.dep-head__meta[b-e125rvpqof] { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 6px; font-size: 13.5px; color: var(--nm-ink-2); }
.dep-head__actions[b-e125rvpqof] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dep-info[b-e125rvpqof] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.dep-info__block[b-e125rvpqof] { position: relative; }
.dep-info__label[b-e125rvpqof] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; color: var(--nm-muted);
    margin-bottom: 6px;
}
.dep-info__label i[b-e125rvpqof] { color: var(--nm-brand-500); margin-right: 4px; }
.dep-info__val[b-e125rvpqof] { font-size: 14px; font-weight: 600; color: var(--nm-ink); }
.dep-info__val.is-ok[b-e125rvpqof] { color: var(--nm-ok); }
.dep-info__val.is-bad[b-e125rvpqof] { color: var(--nm-bad); }
.dep-info__sub[b-e125rvpqof] { font-size: 12.5px; color: var(--nm-muted); }
.dep-info__block[b-e125rvpqof]  .dep-info__btn { margin-top: 8px; }
.dep-fin[b-e125rvpqof] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ── form modal ── */
.nm-form-stack[b-e125rvpqof] { display: flex; flex-direction: column; gap: 14px; }
.nm-input[b-e125rvpqof] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink);
    font-size: 13.5px;
    font-family: var(--nm-font);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.nm-input:focus[b-e125rvpqof] { border-color: var(--nm-brand-500); box-shadow: 0 0 0 3px var(--nm-brand-50); }
/* /src/Features/Tours/Pages/Manager/TourDepartures.razor.rz.scp.css */
/* TourDepartures — chuẩn nm-list (theo CurrenciesIndex): shell trang + toolbar; chrome do primitive Nm* lo. */
.nm-list-page[b-sx1nlz4e38] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-sx1nlz4e38] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-sx1nlz4e38] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-sx1nlz4e38] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-sx1nlz4e38] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-list-toolbar[b-sx1nlz4e38] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-search[b-sx1nlz4e38] { width: 260px; }
.tb-select[b-sx1nlz4e38] { width: 180px; }
.tb-date[b-sx1nlz4e38] { width: 160px; }
.tb-date-sep[b-sx1nlz4e38] { color: var(--nm-muted); font-size: 12px; }

/* cell 2 dòng: chính + phụ */
.cell-2line[b-sx1nlz4e38] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-sx1nlz4e38] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub[b-sx1nlz4e38] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}

.cell-dim[b-sx1nlz4e38] { color: var(--nm-muted); font-size: 12px; font-style: italic; }
/* /src/Features/Tours/Pages/Manager/TourForm.razor.rz.scp.css */
/* TourForm — chuẩn nm-list (theo CurrenciesIndex): shell trang; chrome do primitive Nm* lo. */
.nm-list-page[b-gdksllc8v5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-gdksllc8v5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-gdksllc8v5] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-gdksllc8v5] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-gdksllc8v5] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-list-toolbar[b-gdksllc8v5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-select[b-gdksllc8v5] { width: 200px; }
.tb-total[b-gdksllc8v5] { margin-left: auto; font-size: 13px; color: var(--nm-muted); }
.tb-total b[b-gdksllc8v5] { color: var(--nm-ink); }

.nm-list-pager[b-gdksllc8v5] { margin-top: 14px; }
.nm-form-stack[b-gdksllc8v5] { display: flex; flex-direction: column; gap: 14px; }

/* ── Bố cục trong tab ── */
.tab-stack[b-gdksllc8v5] { display: flex; flex-direction: column; gap: 16px; }
.tab-actions[b-gdksllc8v5] { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Đầu section (NmCard Header) ── */
.sec-head[b-gdksllc8v5] { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--nm-ink); width: 100%; }
.sec-head i[b-gdksllc8v5] { color: var(--nm-brand-600); }
.sec-count[b-gdksllc8v5] {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50); color: var(--nm-brand-600);
    font-size: 11px; font-weight: 700;
}
.sec-hint[b-gdksllc8v5] { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--nm-muted); }

/* ── Điểm nổi bật ── */
.hl-tags[b-gdksllc8v5] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hl-empty[b-gdksllc8v5] { font-size: 13px; color: var(--nm-muted); font-style: italic; }
.hl-add[b-gdksllc8v5] { display: flex; gap: 8px; }
.hl-add[b-gdksllc8v5]  .nm-input-wrap { flex: 1; }

/* ── Ảnh đại diện (create) ── */
.cover-preview[b-gdksllc8v5] { position: relative; display: inline-block; margin-bottom: 12px; }
.cover-preview img[b-gdksllc8v5] {
    width: 192px; height: 128px;
    object-fit: cover;
    border-radius: var(--nm-r-input);
    border: 2px solid var(--nm-brand-500);
    display: block;
}
.cover-preview[b-gdksllc8v5]  .nm-iconbtn { position: absolute; top: 6px; right: 6px; }

/* ── Tab Nội dung ── */
.content-chips[b-gdksllc8v5] {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nm-border);
}
.content-editors[b-gdksllc8v5] { padding: 12px 16px 16px; }

/* ── Tab Hành trình ── */
.day-head[b-gdksllc8v5] { display: flex; align-items: center; gap: 10px; width: 100%; }
.day-badge[b-gdksllc8v5] {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50); color: var(--nm-brand-600);
    display: grid; place-items: center;
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}
.day-head__right[b-gdksllc8v5] { margin-left: auto; }

.add-day[b-gdksllc8v5] {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--nm-border-strong);
    border-radius: var(--nm-r-card);
    background: transparent;
    color: var(--nm-muted);
    font-family: var(--nm-font);
    font-size: 14px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.add-day:hover[b-gdksllc8v5] { border-color: var(--nm-brand-500); color: var(--nm-brand-600); }

/* ── Tab Hình ảnh ── */
.gal-grid[b-gdksllc8v5] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gal-item[b-gdksllc8v5] {
    position: relative;
    border-radius: var(--nm-r-input);
    overflow: hidden;
    border: 2px solid var(--nm-border);
    cursor: pointer;
    transition: border-color .12s;
}
.gal-item:hover[b-gdksllc8v5] { border-color: var(--nm-brand-300); }
.gal-item.is-cover[b-gdksllc8v5] { border-color: var(--nm-brand-500); box-shadow: 0 0 0 2px var(--nm-brand-100); }
.gal-item img[b-gdksllc8v5] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal-cover-badge[b-gdksllc8v5] {
    position: absolute; top: 6px; left: 6px;
    background: var(--nm-brand-600); color: var(--nm-on-brand);
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 6px;
}
.gal-remove[b-gdksllc8v5] {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px;
    border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--nm-bad) 85%, transparent);
    color: #fff;
    display: grid; place-items: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s;
}
.gal-item:hover .gal-remove[b-gdksllc8v5] { opacity: 1; }
.gal-remove:hover[b-gdksllc8v5] { background: var(--nm-bad); }

/* ── Cell DataGrid ── */
.cell-sched[b-gdksllc8v5] { display: flex; flex-direction: column; min-width: 0; }
.cell-sched__dates[b-gdksllc8v5] { font-weight: 500; color: var(--nm-ink); }
.cell-sched__from[b-gdksllc8v5] { font-size: 11px; color: var(--nm-muted); }

.cell-price[b-gdksllc8v5] { display: flex; flex-direction: column; align-items: flex-end; }
.cell-price__main[b-gdksllc8v5] { font-weight: 600; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cell-price__promo[b-gdksllc8v5] { font-size: 11px; color: var(--nm-bad); }

.cell-sched-status[b-gdksllc8v5] { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.cell-sched-actions[b-gdksllc8v5] { display: inline-flex; gap: 4px; }

/* Ảnh minh hoạ theo ngày (nhỏ hơn gallery tour) */
.gal-grid--day[b-gdksllc8v5] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }

/* Gợi ý tag */
.tag-suggest[b-gdksllc8v5] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tag-suggest__lbl[b-gdksllc8v5] { font-size: 12px; color: var(--nm-muted); }

/* Mô tả phân biệt section (Điểm nổi bật vs Tags) */
.sec-desc[b-gdksllc8v5] { margin: 0 0 10px; font-size: 12.5px; color: var(--nm-muted); }

/* Bộ đếm ký tự + cảnh báo trong tab Nội dung (validator hiển thị) */
.content-meta[b-gdksllc8v5] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 14px 12px; }
.content-meta__count[b-gdksllc8v5] { font-size: 12px; color: var(--nm-muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.content-meta__count.is-warn[b-gdksllc8v5] { color: var(--nm-warn); font-weight: 600; }
.content-meta__count.is-bad[b-gdksllc8v5] { color: var(--nm-bad); font-weight: 700; }
.content-meta__err[b-gdksllc8v5] { font-size: 12px; color: var(--nm-bad); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }

.cell-code[b-gdksllc8v5] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--nm-brand-600); }
.cell-two[b-gdksllc8v5] { display: flex; flex-direction: column; min-width: 0; }
.cell-two__main[b-gdksllc8v5] { font-weight: 500; color: var(--nm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-two__sub[b-gdksllc8v5] { font-size: 11px; color: var(--nm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-detail[b-gdksllc8v5] { font-size: 12px; color: var(--nm-ink-2); }

/* ── Tab SEO ── */
.seo-stats[b-gdksllc8v5] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--nm-ink-2); }
.seo-stats i[b-gdksllc8v5] { color: var(--nm-brand-600); margin-right: 5px; }
.seo-stats b[b-gdksllc8v5] { color: var(--nm-ink); }
.seo-stats code[b-gdksllc8v5] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    padding: 1px 6px; border-radius: 6px;
}

.seo-preview[b-gdksllc8v5] { max-width: 600px; }
.seo-preview__title[b-gdksllc8v5] { margin: 0; color: #1a0dab; font-size: 16px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-preview__url[b-gdksllc8v5] { margin: 2px 0 0; color: #006621; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-preview__desc[b-gdksllc8v5] {
    margin: 4px 0 0; color: var(--nm-ink-2); font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* /src/Features/Tours/Pages/Manager/TourInquiries.razor.rz.scp.css */
/* TourInquiries — chuẩn nm-list (theo CurrenciesIndex): shell trang + toolbar + drawer chi tiết. */
.nm-list-page[b-6dffyr1dow] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-6dffyr1dow] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-6dffyr1dow] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-6dffyr1dow] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-6dffyr1dow] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-list-toolbar[b-6dffyr1dow] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chips[b-6dffyr1dow] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tb-search[b-6dffyr1dow] { width: 280px; }

.nm-list-pager[b-6dffyr1dow] { margin-top: 14px; }

/* cell 2 dòng */
.cell-2line[b-6dffyr1dow] { display: flex; flex-direction: column; min-width: 0; }
.cell-2line__main[b-6dffyr1dow] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 240px;
}
.cell-2line__sub[b-6dffyr1dow] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 240px;
}
.cell-mono[b-6dffyr1dow] { font-family: ui-monospace, 'JetBrains Mono', monospace; }
.cell-link[b-6dffyr1dow] {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--nm-ink); text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.cell-link:hover[b-6dffyr1dow] { color: var(--nm-brand-600); }

/* drawer chi tiết */
.drw-head[b-6dffyr1dow] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drw-code[b-6dffyr1dow] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; }
.drw-body[b-6dffyr1dow] { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.drw-dest__name[b-6dffyr1dow] { font-size: 16px; font-weight: 700; color: var(--nm-ink); }
.drw-dest__from[b-6dffyr1dow] { font-size: 12.5px; color: var(--nm-muted); margin-top: 2px; }
.drw-sec-title[b-6dffyr1dow] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; color: var(--nm-muted);
}
.drw-quote[b-6dffyr1dow] {
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    white-space: pre-wrap;
}
.drw-sub[b-6dffyr1dow] { display: block; font-size: 12px; color: var(--nm-muted); }
.drw-contacts[b-6dffyr1dow] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drw-status-chips[b-6dffyr1dow] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.drw-last-response[b-6dffyr1dow] { display: flex; flex-direction: column; gap: 6px; }
/* /src/Features/Tours/Pages/Manager/TourManagement.razor.rz.scp.css */
/* TourManagement — chuẩn nm-list (theo CurrenciesIndex): shell trang + toolbar + card grid tour + modal đặt chỗ. */
.nm-list-page[b-y3fle5eao9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-y3fle5eao9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-y3fle5eao9] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-y3fle5eao9] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-sub b[b-y3fle5eao9] { color: var(--nm-ink); }
.nm-list-actions[b-y3fle5eao9] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-list-toolbar[b-y3fle5eao9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-search[b-y3fle5eao9] { width: 280px; }
.tb-select[b-y3fle5eao9] { width: 180px; }

.nm-list-pager[b-y3fle5eao9] { margin-top: 14px; }

/* ── card grid tour ── */
.tour-grid[b-y3fle5eao9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.tour-card[b-y3fle5eao9] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.tour-card:hover[b-y3fle5eao9] { box-shadow: var(--nm-shadow); border-color: var(--nm-border-strong); }
.tour-card__img[b-y3fle5eao9] {
    width: 100%; height: 130px;
    object-fit: cover;
    display: block;
}
.tour-card__img--ph[b-y3fle5eao9] {
    display: grid; place-items: center;
    background: var(--nm-brand-50);
    color: var(--nm-brand-300);
    font-size: 34px;
}
.tour-card__body[b-y3fle5eao9] { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; flex: 1; }
.tour-card__top[b-y3fle5eao9] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tour-card__title[b-y3fle5eao9] { font-weight: 600; font-size: 14px; color: var(--nm-ink); line-height: 1.35; }
.tour-card__meta[b-y3fle5eao9] { font-size: 12px; color: var(--nm-muted); }
.tour-card__meta i[b-y3fle5eao9] { font-size: 11px; }
.tour-card__tags[b-y3fle5eao9] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-card__price b[b-y3fle5eao9] { font-size: 15px; color: var(--nm-brand-600); font-variant-numeric: tabular-nums; }
.tour-card__foot[b-y3fle5eao9] { margin-top: auto; padding-top: 4px; }
.tour-card__foot[b-y3fle5eao9]  .tour-card__cta { width: 100%; justify-content: center; }

/* ── modal đặt tour ── */
.nm-form-stack[b-y3fle5eao9] { display: flex; flex-direction: column; gap: 14px; }
.bk-summary[b-y3fle5eao9] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
}
.bk-summary__name[b-y3fle5eao9] { font-weight: 600; color: var(--nm-ink); }
.bk-summary__meta[b-y3fle5eao9] { font-size: 12px; color: var(--nm-muted); margin-top: 2px; }
.bk-summary__price[b-y3fle5eao9] { font-size: 16px; font-weight: 700; color: var(--nm-brand-600); font-variant-numeric: tabular-nums; }
.bk-pax-list[b-y3fle5eao9] { display: flex; flex-direction: column; gap: 10px; }
.bk-pax[b-y3fle5eao9] {
    padding: 10px 12px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
}
.bk-pax__lbl[b-y3fle5eao9] { font-size: 12px; font-weight: 600; color: var(--nm-ink-2); margin-bottom: 8px; }
/* /src/Features/Tours/Pages/Manager/TourTags.razor.rz.scp.css */
/* nm-list shell (class không global — CSS isolation, phải khai báo tại trang) */
.nm-list-page[b-nkpnl3w95b] { display: flex; flex-direction: column; gap: 16px; padding: 22px 28px 28px; font-family: var(--nm-font); color: var(--nm-ink); }
.nm-list-head[b-nkpnl3w95b] { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nm-list-title[b-nkpnl3w95b] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-nkpnl3w95b] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-nkpnl3w95b] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tt-name[b-nkpnl3w95b] { font-weight: 500; color: var(--nm-ink); }
.tt-slug[b-nkpnl3w95b] { font-size: 12px; color: var(--nm-muted); }
.tt-actions[b-nkpnl3w95b] { display: inline-flex; gap: 4px; justify-content: center; }
/* /src/Features/Tours/Pages/Public/Tour.razor.rz.scp.css */
/* Tour list — Manager Dashboard v4 theme (warm-neutral + cam accent) */

.pubtour-root[b-l21q6g5q8m] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ─── Hero ─── */
.pubtour-hero[b-l21q6g5q8m] {
    position: relative;
    background: var(--d-accent-grad-soft);
    border-bottom: 1px solid var(--d-line);
    overflow: hidden;
}

.pubtour-hero-inner[b-l21q6g5q8m] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 96px 24px 56px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.pubtour-hero-badge[b-l21q6g5q8m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

.pubtour-hero-title[b-l21q6g5q8m] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.1;
    margin: 0 0 12px;
}

@media (min-width: 768px) {
    .pubtour-hero-title[b-l21q6g5q8m] { font-size: 44px; }
}

.pubtour-hero-sub[b-l21q6g5q8m] {
    color: var(--d-ink-3);
    font-size: 14px;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto 28px;
}

.pubtour-search-wrap[b-l21q6g5q8m] {
    max-width: 880px;
    margin: 0 auto;
}

/* ─── Body section ─── */
.pubtour-body[b-l21q6g5q8m] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 56px;
}

/* ─── Category pills ─── */
.pubtour-pills[b-l21q6g5q8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.pubtour-pill[b-l21q6g5q8m] {
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .pubtour-pill:hover[b-l21q6g5q8m] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .pubtour-pill.active[b-l21q6g5q8m] {
        background: var(--d-accent-grad);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 1px 2px rgba(234,88,12,0.18);
    }

/* ─── Tag filter (nhá», phụ dÆ°á»›i loại) ─── */
.pubtour-tags[b-l21q6g5q8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -16px 0 28px;
}

.pubtour-tag[b-l21q6g5q8m] {
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px dashed var(--d-line);
    background: transparent;
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .pubtour-tag:hover[b-l21q6g5q8m] { background: var(--d-surface-2); color: var(--d-ink); }

    .pubtour-tag.active[b-l21q6g5q8m] {
        background: var(--d-ink);
        border-color: transparent;
        color: #fff;
    }

/* ─── Section header ─── */
.pubtour-section-hd[b-l21q6g5q8m] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.pubtour-section-title[b-l21q6g5q8m] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0;
}

.pubtour-section-sub[b-l21q6g5q8m] {
    color: var(--d-ink-3);
    font-size: 12.5px;
    margin: 4px 0 0;
}

/* ─── Loading & empty ─── */
.pubtour-loading[b-l21q6g5q8m] {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.pubtour-spin[b-l21q6g5q8m] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: pubtour-spin-b-l21q6g5q8m 0.8s linear infinite;
}

@keyframes pubtour-spin-b-l21q6g5q8m {
    to { transform: rotate(360deg); }
}

.pubtour-empty[b-l21q6g5q8m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .pubtour-empty .ico[b-l21q6g5q8m] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--d-accent-grad-soft);
        color: var(--d-accent);
        display: grid;
        place-items: center;
        margin-bottom: 8px;
    }

    .pubtour-empty b[b-l21q6g5q8m] {
        font-size: 15px;
        color: var(--d-ink);
        font-weight: 600;
    }

    .pubtour-empty small[b-l21q6g5q8m] {
        font-size: 12.5px;
    }

/* ─── Tour grid ─── */
.pubtour-grid[b-l21q6g5q8m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .pubtour-grid[b-l21q6g5q8m] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .pubtour-grid[b-l21q6g5q8m] { grid-template-columns: repeat(3, 1fr); }
}

.pubtour-card[b-l21q6g5q8m] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    display: flex;
    flex-direction: column;
}

    .pubtour-card:hover[b-l21q6g5q8m] {
        border-color: var(--d-ink-4);
        box-shadow: 0 4px 16px -4px rgba(28,25,23,0.08);
        transform: translateY(-2px);
    }

.pubtour-card-img[b-l21q6g5q8m] {
    height: 180px;
    overflow: hidden;
    position: relative;
    background: var(--d-surface-2);
}

    .pubtour-card-img img[b-l21q6g5q8m] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }

.pubtour-card:hover .pubtour-card-img img[b-l21q6g5q8m] {
    transform: scale(1.04);
}

.pubtour-card-img-fallback[b-l21q6g5q8m] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--d-ink-4);
    background: var(--d-accent-grad-soft);
}

.pubtour-cat-badge[b-l21q6g5q8m] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: var(--d-ink-2);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    backdrop-filter: blur(4px);
    border: 1px solid var(--d-line);
}

.pubtour-rating-badge[b-l21q6g5q8m] {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(234,88,12,0.25);
}

.pubtour-card-body[b-l21q6g5q8m] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.pubtour-card-name[b-l21q6g5q8m] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pubtour-card-meta[b-l21q6g5q8m] {
    color: var(--d-ink-3);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pubtour-card-stats[b-l21q6g5q8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--d-ink-3);
    font-size: 11.5px;
}

    .pubtour-card-stats span[b-l21q6g5q8m] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

.pubtour-includes[b-l21q6g5q8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pubtour-inc-tag[b-l21q6g5q8m] {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--d-good-soft);
    color: var(--d-good);
    font-weight: 500;
}

.pubtour-inc-more[b-l21q6g5q8m] {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    font-weight: 500;
}

.pubtour-card-foot[b-l21q6g5q8m] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
}

.pubtour-price-lbl[b-l21q6g5q8m] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.pubtour-price-val[b-l21q6g5q8m] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-accent);
    margin: 2px 0 0;
    font-variant-numeric: tabular-nums;
}

    .pubtour-price-val small[b-l21q6g5q8m] {
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: var(--d-ink-3);
        margin-left: 2px;
    }

.pubtour-btn[b-l21q6g5q8m] {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    border: none;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

    .pubtour-btn:hover[b-l21q6g5q8m] {
        background: var(--d-accent-grad-hover);
    }

/* ─── Popular destinations grid ─── */
.pubtour-pop-hd[b-l21q6g5q8m] {
    text-align: center;
    margin-bottom: 24px;
}

.pubtour-pop-grid[b-l21q6g5q8m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .pubtour-pop-grid[b-l21q6g5q8m] { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .pubtour-pop-grid[b-l21q6g5q8m] { grid-template-columns: repeat(6, 1fr); }
}

.pubtour-pop-card[b-l21q6g5q8m] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .12s;
}

    .pubtour-pop-card:hover[b-l21q6g5q8m] {
        border-color: var(--d-accent);
        background: var(--d-surface-2);
    }

    .pubtour-pop-card .emoji[b-l21q6g5q8m] {
        font-size: 26px;
        margin-bottom: 6px;
        display: block;
    }

    .pubtour-pop-card .name[b-l21q6g5q8m] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
        margin: 0;
    }

.pubtour-pop-card:hover .name[b-l21q6g5q8m] {
    color: var(--d-accent);
}

.pubtour-pop-card .country[b-l21q6g5q8m] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
}

/* ─── Trust signals ─── */
.pubtour-trust[b-l21q6g5q8m] {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .pubtour-trust[b-l21q6g5q8m] { grid-template-columns: repeat(3, 1fr); }
}

.pubtour-trust-card[b-l21q6g5q8m] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pubtour-trust-ico[b-l21q6g5q8m] {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

.pubtour-trust-title[b-l21q6g5q8m] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 4px;
}

.pubtour-trust-desc[b-l21q6g5q8m] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin: 0;
    line-height: 1.5;
}
/* /src/Features/Tours/Pages/Public/TourBooking.razor.rz.scp.css */
/* Tour Booking — Manager Dashboard v4 theme */

.tbook-root[b-t0a02bjbl8] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-danger: #dc2626;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.tbook-loading[b-t0a02bjbl8], .tbook-notfound[b-t0a02bjbl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 12px;
    padding: 24px;
}

.tbook-spin[b-t0a02bjbl8] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: tbook-spin-b-t0a02bjbl8 0.8s linear infinite;
}

@keyframes tbook-spin-b-t0a02bjbl8 { to { transform: rotate(360deg); } }

.tbook-notfound h2[b-t0a02bjbl8] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
}

/* Breadcrumb */
.tbook-breadcrumb[b-t0a02bjbl8] {
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
}

.tbook-breadcrumb-inner[b-t0a02bjbl8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
    flex-wrap: wrap;
}

.tbook-breadcrumb-inner a[b-t0a02bjbl8] {
    color: var(--d-ink-3);
    text-decoration: none;
    transition: color .12s;
}

.tbook-breadcrumb-inner a:hover[b-t0a02bjbl8] { color: var(--d-accent); }

.tbook-breadcrumb-inner .current[b-t0a02bjbl8] {
    color: var(--d-ink);
    font-weight: 500;
}

/* Stepper */
.tbook-stepper-wrap[b-t0a02bjbl8] {
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
}

.tbook-stepper[b-t0a02bjbl8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.tbook-step[b-t0a02bjbl8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tbook-step-num[b-t0a02bjbl8] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter Tight', 'Inter', sans-serif;
}

.tbook-step.active .tbook-step-num[b-t0a02bjbl8] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

.tbook-step.done .tbook-step-num[b-t0a02bjbl8] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}

.tbook-step-lbl[b-t0a02bjbl8] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    font-weight: 500;
}

.tbook-step.active .tbook-step-lbl[b-t0a02bjbl8] { color: var(--d-accent); font-weight: 600; }
.tbook-step.done .tbook-step-lbl[b-t0a02bjbl8] { color: var(--d-ink-2); }

.tbook-step-line[b-t0a02bjbl8] {
    width: 50px;
    height: 1px;
    background: var(--d-line);
    margin: 0 6px;
}

.tbook-step-line.done[b-t0a02bjbl8] { background: var(--d-good); }

@media (max-width: 640px) {
    .tbook-step-lbl[b-t0a02bjbl8] { display: none; }
    .tbook-step-line[b-t0a02bjbl8] { width: 28px; }
}

/* Layout */
.tbook-main[b-t0a02bjbl8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 56px;
}

.tbook-grid[b-t0a02bjbl8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 1024px) {
    .tbook-grid[b-t0a02bjbl8] { grid-template-columns: 1fr 360px; }
}

/* Step heading */
.tbook-step-title[b-t0a02bjbl8] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 18px;
}

/* Card */
.tbook-card[b-t0a02bjbl8] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px 18px;
    margin-bottom: 14px;
}

.tbook-card-title[b-t0a02bjbl8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 8px;
}

.tbook-card-meta[b-t0a02bjbl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.tbook-guide[b-t0a02bjbl8] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin: 8px 0 0;
}

/* Participant row */
.tbook-prow[b-t0a02bjbl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tbook-prow-info h3[b-t0a02bjbl8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
}

.tbook-prow-info .age[b-t0a02bjbl8] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
}

.tbook-prow-info .price[b-t0a02bjbl8] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-accent);
    letter-spacing: -0.02em;
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
}

    .tbook-prow-info .price small[b-t0a02bjbl8] {
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 400;
        color: var(--d-ink-3);
    }

.tbook-counter[b-t0a02bjbl8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tbook-counter-btn[b-t0a02bjbl8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}

    .tbook-counter-btn:hover:not(:disabled)[b-t0a02bjbl8] {
        border-color: var(--d-accent);
        color: var(--d-accent);
    }

    .tbook-counter-btn:disabled[b-t0a02bjbl8] {
        opacity: 0.35;
        cursor: not-allowed;
    }

.tbook-counter-val[b-t0a02bjbl8] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
    min-width: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Single supplement */
.tbook-supp[b-t0a02bjbl8] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.tbook-supp input[type="checkbox"][b-t0a02bjbl8] {
    width: 18px;
    height: 18px;
    accent-color: var(--d-accent);
    margin-top: 2px;
}

/* Form fields */
.tbook-pax-hd[b-t0a02bjbl8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink-2);
    margin: 0 0 12px;
}

.tbook-pax-num[b-t0a02bjbl8] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

.tbook-form-grid[b-t0a02bjbl8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .tbook-form-grid[b-t0a02bjbl8] { grid-template-columns: 1fr 1fr; }
}

.tbook-fld label[b-t0a02bjbl8] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 5px;
}

.tbook-fld .req[b-t0a02bjbl8] { color: var(--d-danger); }

.tbook-fld input[b-t0a02bjbl8],
.tbook-fld select[b-t0a02bjbl8],
.tbook-textarea[b-t0a02bjbl8] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.tbook-textarea[b-t0a02bjbl8] {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

    .tbook-fld input:focus[b-t0a02bjbl8],
    .tbook-fld select:focus[b-t0a02bjbl8],
    .tbook-textarea:focus[b-t0a02bjbl8] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234,88,12,0.12);
    }

/* Confirm step rows */
.tbook-conf-row[b-t0a02bjbl8] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px;
    font-size: 14px;
    padding: 4px 0;
}

.tbook-conf-row .k[b-t0a02bjbl8] { color: var(--d-ink-3); }
.tbook-conf-row .v[b-t0a02bjbl8] { color: var(--d-ink); font-weight: 500; }

.tbook-price-rows[b-t0a02bjbl8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.tbook-price-row[b-t0a02bjbl8] {
    display: flex;
    justify-content: space-between;
    color: var(--d-ink-2);
}

    .tbook-price-row .v[b-t0a02bjbl8] {
        color: var(--d-ink);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }

.tbook-price-total[b-t0a02bjbl8] {
    border-top: 1px solid var(--d-line);
    padding-top: 10px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .tbook-price-total .k[b-t0a02bjbl8] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .tbook-price-total .v[b-t0a02bjbl8] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-accent);
        font-variant-numeric: tabular-nums;
    }

.tbook-pax-row[b-t0a02bjbl8] {
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid var(--d-line-2);
}

.tbook-pax-row:first-child[b-t0a02bjbl8] { border-top: 0; }

.tbook-pax-row .who[b-t0a02bjbl8] { font-weight: 600; color: var(--d-ink); }
.tbook-pax-row .nm[b-t0a02bjbl8] { color: var(--d-ink-2); margin-left: 6px; }
.tbook-pax-row .em[b-t0a02bjbl8] { color: var(--d-ink-4); margin-left: 6px; font-size: 12px; }

/* Buttons */
.tbook-actions[b-t0a02bjbl8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
    gap: 10px;
    flex-wrap: wrap;
}

.tbook-actions.end[b-t0a02bjbl8] { justify-content: flex-end; }

.tbook-btn[b-t0a02bjbl8] {
    height: 38px;
    padding: 0 18px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .tbook-btn:hover[b-t0a02bjbl8] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.tbook-btn-primary[b-t0a02bjbl8] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
    padding: 0 22px;
    font-weight: 600;
}

    .tbook-btn-primary:hover[b-t0a02bjbl8] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

    .tbook-btn-primary:disabled[b-t0a02bjbl8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.tbook-btn-spin[b-t0a02bjbl8] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tbook-spin-b-t0a02bjbl8 0.8s linear infinite;
}

.tbook-error[b-t0a02bjbl8] {
    color: var(--d-danger);
    font-size: 12.5px;
    margin: 12px 0 0;
}

/* Sidebar */
.tbook-sidebar[b-t0a02bjbl8] {
    position: sticky;
    top: 96px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px 18px;
    align-self: start;
}

.tbook-sb-img[b-t0a02bjbl8] {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 14px;
}

.tbook-sb-name[b-t0a02bjbl8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 4px;
}

.tbook-sb-dest[b-t0a02bjbl8] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tbook-sb-block[b-t0a02bjbl8] {
    border-top: 1px solid var(--d-line-2);
    padding-top: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 12.5px;
}
/* /src/Features/Tours/Pages/Public/TourBookingConfirmation.razor.rz.scp.css */
/* Tour Booking Confirmation — Manager Dashboard v4 theme */

.tbookconf-root[b-iv9t3se42f] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.tbookconf-loading[b-iv9t3se42f], .tbookconf-notfound[b-iv9t3se42f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 14px;
    padding: 24px;
}

.tbookconf-spin[b-iv9t3se42f] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: tbookconf-spin-b-iv9t3se42f 0.8s linear infinite;
}

@keyframes tbookconf-spin-b-iv9t3se42f { to { transform: rotate(360deg); } }

.tbookconf-notfound h2[b-iv9t3se42f] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
}

.tbookconf-main[b-iv9t3se42f] {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 24px 64px;
}

/* Success header */
.tbookconf-head[b-iv9t3se42f] {
    text-align: center;
    margin-bottom: 32px;
}

.tbookconf-success-ico[b-iv9t3se42f] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--d-good-soft);
    color: var(--d-good);
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
}

.tbookconf-title[b-iv9t3se42f] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

.tbookconf-code-lbl[b-iv9t3se42f] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 0;
}

.tbookconf-code[b-iv9t3se42f] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    font-weight: 600;
    color: var(--d-accent);
    margin: 6px 0 0;
    letter-spacing: 0.04em;
}

/* Card */
.tbookconf-card[b-iv9t3se42f] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    margin-bottom: 18px;
}

.tbookconf-card-hd[b-iv9t3se42f] {
    padding: 12px 18px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

    .tbookconf-card-hd h2[b-iv9t3se42f] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.tbookconf-card-bd[b-iv9t3se42f] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
}

.tbookconf-row[b-iv9t3se42f] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

    .tbookconf-row .k[b-iv9t3se42f] {
        color: var(--d-ink-3);
    }

    .tbookconf-row .v[b-iv9t3se42f] {
        color: var(--d-ink);
        font-weight: 500;
        text-align: right;
    }

.tbookconf-status[b-iv9t3se42f] {
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
}

    .tbookconf-status.pending[b-iv9t3se42f] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
    }

    .tbookconf-status.ok[b-iv9t3se42f] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

    .tbookconf-status.cancel[b-iv9t3se42f] {
        background: rgba(220,38,38,0.1);
        color: var(--d-danger);
    }

    .tbookconf-status.muted[b-iv9t3se42f] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

.tbookconf-total[b-iv9t3se42f] {
    border-top: 1px solid var(--d-line);
    padding-top: 12px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .tbookconf-total .k[b-iv9t3se42f] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .tbookconf-total .v[b-iv9t3se42f] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-accent);
        font-variant-numeric: tabular-nums;
    }

.tbookconf-pax[b-iv9t3se42f] {
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid var(--d-line-2);
}

.tbookconf-pax:first-child[b-iv9t3se42f] { border-top: 0; padding-top: 0; }

.tbookconf-pax .who[b-iv9t3se42f] { font-weight: 600; color: var(--d-ink); }
.tbookconf-pax .nm[b-iv9t3se42f] { color: var(--d-ink-2); margin-left: 6px; }
.tbookconf-pax .em[b-iv9t3se42f] { color: var(--d-ink-4); margin-left: 6px; font-size: 12px; }

/* Actions */
.tbookconf-actions[b-iv9t3se42f] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

@media (min-width: 640px) {
    .tbookconf-actions[b-iv9t3se42f] { flex-direction: row; justify-content: center; }
}

.tbookconf-btn[b-iv9t3se42f] {
    height: 40px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .tbookconf-btn:hover[b-iv9t3se42f] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

.tbookconf-btn-primary[b-iv9t3se42f] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
}

    .tbookconf-btn-primary:hover[b-iv9t3se42f] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }
/* /src/Features/Tours/Pages/Public/TourDetail.razor.rz.scp.css */
/* Tour Detail — Manager Dashboard v4 theme */

.tdetail-root[b-16tnm0prrd] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-info: #2563eb;
    --d-info-soft: #dbeafe;
    --d-amber: #f59e0b;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.tdetail-loading[b-16tnm0prrd], .tdetail-notfound[b-16tnm0prrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 14px;
    padding: 24px;
    text-align: center;
}

.tdetail-spin[b-16tnm0prrd] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: tdetail-spin-b-16tnm0prrd 0.8s linear infinite;
}

@keyframes tdetail-spin-b-16tnm0prrd { to { transform: rotate(360deg); } }

.tdetail-notfound .ico[b-16tnm0prrd] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--d-surface-2);
    color: var(--d-ink-4);
    display: grid;
    place-items: center;
}

.tdetail-notfound h2[b-16tnm0prrd] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
}

/* Breadcrumb */
.tdetail-breadcrumb[b-16tnm0prrd] {
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
}

.tdetail-breadcrumb-inner[b-16tnm0prrd] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
    flex-wrap: wrap;
}

    .tdetail-breadcrumb-inner a[b-16tnm0prrd] {
        color: var(--d-ink-3);
        text-decoration: none;
        transition: color .12s;
    }

        .tdetail-breadcrumb-inner a:hover[b-16tnm0prrd] { color: var(--d-accent); }

    .tdetail-breadcrumb-inner .current[b-16tnm0prrd] {
        color: var(--d-ink);
        font-weight: 500;
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.tdetail-main[b-16tnm0prrd] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 56px;
}

/* Gallery */
.tdetail-gallery-mosaic[b-16tnm0prrd] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 360px;
    border-radius: var(--d-r);
    overflow: hidden;
    margin-bottom: 28px;
}

    .tdetail-gallery-mosaic .main[b-16tnm0prrd] {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .tdetail-gallery-mosaic > div[b-16tnm0prrd] {
        position: relative;
        overflow: hidden;
        background: var(--d-surface-2);
    }

    .tdetail-gallery-mosaic img[b-16tnm0prrd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .tdetail-gallery-mosaic > div:hover img[b-16tnm0prrd] {
        transform: scale(1.04);
    }

.tdetail-gallery-overlay[b-16tnm0prrd] {
    position: absolute;
    inset: 0;
    background: rgba(28,25,23,0.55);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.tdetail-gallery-single[b-16tnm0prrd] {
    height: 360px;
    border-radius: var(--d-r);
    overflow: hidden;
    background: var(--d-surface-2);
    margin-bottom: 28px;
}

    .tdetail-gallery-single img[b-16tnm0prrd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Layout grid */
.tdetail-grid[b-16tnm0prrd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 1024px) {
    .tdetail-grid[b-16tnm0prrd] { grid-template-columns: 1fr 340px; }
}

/* Sections */
.tdetail-section[b-16tnm0prrd] {
    margin-bottom: 28px;
}

.tdetail-section-title[b-16tnm0prrd] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    margin: 0 0 14px;
}

/* Header block */
.tdetail-tags[b-16tnm0prrd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.tdetail-tag[b-16tnm0prrd] {
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

    .tdetail-tag.cat[b-16tnm0prrd] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .tdetail-tag.diff[b-16tnm0prrd] {
        background: var(--d-info-soft);
        color: var(--d-info);
    }

.tdetail-rating-inline[b-16tnm0prrd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-amber);
}

    .tdetail-rating-inline .count[b-16tnm0prrd] {
        color: var(--d-ink-3);
        font-weight: 400;
        font-size: 12px;
    }

.tdetail-name[b-16tnm0prrd] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0 0 8px;
}

.tdetail-dest[b-16tnm0prrd] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

    .tdetail-dest .sep[b-16tnm0prrd] {
        color: var(--d-ink-4);
    }

.tdetail-quickstats[b-16tnm0prrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--d-ink-2);
    font-size: 14px;
    padding: 12px 14px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

    .tdetail-quickstats span[b-16tnm0prrd] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .tdetail-quickstats svg[b-16tnm0prrd] {
        color: var(--d-accent);
    }

.tdetail-desc[b-16tnm0prrd] {
    color: var(--d-ink-2);
    font-size: 13.5px;
    line-height: 1.65;
    margin: 16px 0 0;
}

/* Highlight tags */
.tdetail-highlights[b-16tnm0prrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tdetail-hltag[b-16tnm0prrd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    border: 1px solid color-mix(in srgb, var(--d-accent) 20%, transparent);
    padding: 5px 12px;
    border-radius: 999px;
}

/* Itinerary */
.tdetail-itinerary[b-16tnm0prrd] {
    position: relative;
    padding-left: 12px;
}

.tdetail-itinerary[b-16tnm0prrd]::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--d-accent-grad);
    opacity: 0.3;
    border-radius: 2px;
}

.tdetail-day[b-16tnm0prrd] {
    position: relative;
    padding-left: 36px;
    margin-bottom: 18px;
}

.tdetail-day-dot[b-16tnm0prrd] {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--d-accent-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--d-bg);
}

.tdetail-day-card[b-16tnm0prrd] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.tdetail-day-title[b-16tnm0prrd] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 8px;
}

.tdetail-day-desc[b-16tnm0prrd] {
    font-size: 14px;
    color: var(--d-ink-2);
    line-height: 1.6;
    margin-bottom: 10px;
}

.tdetail-day-meta[b-16tnm0prrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
}

.tdetail-day-meta-tag[b-16tnm0prrd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 500;
}

    .tdetail-day-meta-tag.meal[b-16tnm0prrd] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
    }

    .tdetail-day-meta-tag.acc[b-16tnm0prrd] {
        background: var(--d-info-soft);
        color: var(--d-info);
    }

    .tdetail-day-meta-tag.tran[b-16tnm0prrd] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

.tdetail-day-acts[b-16tnm0prrd] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.tdetail-day-act[b-16tnm0prrd] {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}

/* Schedules table */
.tdetail-tbl-wrap[b-16tnm0prrd] {
    overflow-x: auto;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.tdetail-tbl[b-16tnm0prrd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .tdetail-tbl thead th[b-16tnm0prrd] {
        background: var(--d-surface);
        color: var(--d-ink-3);
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        white-space: nowrap;
    }

    .tdetail-tbl thead th.right[b-16tnm0prrd] { text-align: right; }
    .tdetail-tbl thead th.center[b-16tnm0prrd] { text-align: center; }

    .tdetail-tbl tbody td[b-16tnm0prrd] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .tdetail-tbl tbody tr:last-child td[b-16tnm0prrd] {
        border-bottom: 0;
    }

    .tdetail-tbl tbody tr:hover[b-16tnm0prrd] {
        background: var(--d-surface-2);
    }

    .tdetail-tbl td.right[b-16tnm0prrd] { text-align: right; }
    .tdetail-tbl td.center[b-16tnm0prrd] { text-align: center; }

.tdetail-tbl-num[b-16tnm0prrd] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.tdetail-price-old[b-16tnm0prrd] {
    color: var(--d-ink-4);
    text-decoration: line-through;
    font-size: 11.5px;
    margin-right: 5px;
}

.tdetail-price-new[b-16tnm0prrd] {
    font-weight: 600;
    color: var(--d-accent);
    font-variant-numeric: tabular-nums;
}

.tdetail-pill[b-16tnm0prrd] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}

    .tdetail-pill.sold-out[b-16tnm0prrd] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

    .tdetail-pill.low[b-16tnm0prrd] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

    .tdetail-pill.ok[b-16tnm0prrd] {
        background: var(--d-good-soft);
        color: var(--d-good);
    }

.tdetail-tbl-actions[b-16tnm0prrd] {
    display: inline-flex;
    gap: 6px;
}

/* Buttons */
.tdetail-btn[b-16tnm0prrd] {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

    .tdetail-btn:hover[b-16tnm0prrd] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

.tdetail-btn-accent[b-16tnm0prrd] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

    .tdetail-btn-accent:hover[b-16tnm0prrd] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.tdetail-btn-outline[b-16tnm0prrd] {
    background: var(--d-surface);
    color: var(--d-accent);
    border: 1px solid color-mix(in srgb, var(--d-accent) 35%, transparent);
}

    .tdetail-btn-outline:hover[b-16tnm0prrd] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

/* Reviews */
.tdetail-rating-summary[b-16tnm0prrd] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 24px;
    align-items: center;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 18px 20px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .tdetail-rating-summary[b-16tnm0prrd] {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: center;
    }
}

.tdetail-rating-big[b-16tnm0prrd] {
    text-align: center;
}

    .tdetail-rating-big .num[b-16tnm0prrd] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 38px;
        font-weight: 600;
        letter-spacing: -0.03em;
        color: var(--d-accent);
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

.tdetail-stars[b-16tnm0prrd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    color: var(--d-amber);
}

    .tdetail-stars .empty[b-16tnm0prrd] {
        color: var(--d-line);
    }

.tdetail-rating-count[b-16tnm0prrd] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 6px;
}

.tdetail-rating-bars[b-16tnm0prrd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tdetail-rating-row[b-16tnm0prrd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .tdetail-rating-row .star-num[b-16tnm0prrd] {
        width: 12px;
        text-align: right;
    }

    .tdetail-rating-row .bar[b-16tnm0prrd] {
        flex: 1;
        height: 6px;
        background: var(--d-surface-2);
        border-radius: 999px;
        overflow: hidden;
    }

    .tdetail-rating-row .fill[b-16tnm0prrd] {
        height: 100%;
        background: var(--d-amber);
        border-radius: 999px;
    }

    .tdetail-rating-row .count[b-16tnm0prrd] {
        width: 24px;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.tdetail-no-reviews[b-16tnm0prrd] {
    font-size: 14px;
    color: var(--d-ink-3);
    margin: 0 0 14px;
}

.tdetail-review-form[b-16tnm0prrd] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px 18px;
}

.tdetail-review-form h3[b-16tnm0prrd] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0 0 10px;
}

.tdetail-star-picker[b-16tnm0prrd] {
    display: inline-flex;
    gap: 3px;
    margin-bottom: 12px;
}

.tdetail-star-picker button[b-16tnm0prrd] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--d-line);
    transition: color .12s;
}

    .tdetail-star-picker button.on[b-16tnm0prrd] { color: var(--d-amber); }
    .tdetail-star-picker button:hover[b-16tnm0prrd] { color: #fbbf24; }

.tdetail-input[b-16tnm0prrd],
.tdetail-textarea[b-16tnm0prrd] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 10px;
    transition: border-color .12s, box-shadow .12s;
}

.tdetail-textarea[b-16tnm0prrd] {
    resize: vertical;
    min-height: 70px;
}

    .tdetail-input:focus[b-16tnm0prrd],
    .tdetail-textarea:focus[b-16tnm0prrd] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234,88,12,0.12);
    }

.tdetail-msg-err[b-16tnm0prrd] {
    font-size: 12px;
    color: var(--d-danger);
    margin: 0 0 8px;
}

.tdetail-msg-ok[b-16tnm0prrd] {
    font-size: 12px;
    color: var(--d-good);
    margin: 0 0 8px;
}

.tdetail-form-actions[b-16tnm0prrd] {
    display: flex;
    gap: 8px;
}

.tdetail-btn-link[b-16tnm0prrd] {
    background: none;
    border: 0;
    color: var(--d-ink-3);
    font-size: 14px;
    cursor: pointer;
    padding: 0 10px;
}

    .tdetail-btn-link:hover[b-16tnm0prrd] { color: var(--d-ink); }

/* Tabs (detail content) */
.tdetail-tabs-card[b-16tnm0prrd] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.tdetail-tabs-bar[b-16tnm0prrd] {
    display: flex;
    flex-wrap: wrap;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
}

.tdetail-tab-btn[b-16tnm0prrd] {
    background: none;
    border: 0;
    padding: 11px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s, background .12s;
    white-space: nowrap;
}

    .tdetail-tab-btn:hover[b-16tnm0prrd] { color: var(--d-ink-2); }

    .tdetail-tab-btn.active[b-16tnm0prrd] {
        color: var(--d-accent);
        border-bottom-color: var(--d-accent);
        background: var(--d-surface);
        font-weight: 600;
    }

.tdetail-tab-content[b-16tnm0prrd] {
    padding: 18px 20px;
    color: var(--d-ink-2);
    font-size: 13.5px;
    line-height: 1.65;
}

/* Sidebar */
.tdetail-sidebar[b-16tnm0prrd] {
    position: sticky;
    top: 96px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 18px 20px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tdetail-sb-price-lbl[b-16tnm0prrd] {
    font-size: 11px;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.tdetail-sb-price-val[b-16tnm0prrd] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-accent);
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
}

    .tdetail-sb-price-val small[b-16tnm0prrd] {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: var(--d-ink-3);
        margin-left: 4px;
    }

.tdetail-sb-info[b-16tnm0prrd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    border-top: 1px solid var(--d-line-2);
    padding-top: 14px;
}

.tdetail-sb-row[b-16tnm0prrd] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

    .tdetail-sb-row .k[b-16tnm0prrd] { color: var(--d-ink-3); }
    .tdetail-sb-row .v[b-16tnm0prrd] { color: var(--d-ink); font-weight: 500; text-align: right; }

.tdetail-sb-cta[b-16tnm0prrd] {
    display: block;
    width: 100%;
    height: 42px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    line-height: 42px;
    text-decoration: none;
    border: 0;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
    transition: background .12s;
}

    .tdetail-sb-cta:hover[b-16tnm0prrd] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        text-decoration: none;
    }

.tdetail-sb-cta.disabled[b-16tnm0prrd] {
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    cursor: not-allowed;
    box-shadow: none;
    border: 1px solid var(--d-line);
}

/* Back link */
.tdetail-back[b-16tnm0prrd] {
    text-align: center;
    margin-top: 28px;
}

.tdetail-back a[b-16tnm0prrd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--d-ink-3);
    font-size: 14px;
    text-decoration: none;
    transition: color .12s;
}

    .tdetail-back a:hover[b-16tnm0prrd] { color: var(--d-accent); }
/* /src/Features/Trips/Pages/Ca/CaTripCreate.razor.rz.scp.css */
/* /ca/trips/create + /ca/trips/{id}/edit — chuẩn nm token-only: shell 3 cột form + tiles + picker thành viên. */
.nm-list-page[b-qygmodox2v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-qygmodox2v] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-qygmodox2v] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.catc-title[b-qygmodox2v] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-qygmodox2v] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-qygmodox2v] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-qygmodox2v] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.catc-loading[b-qygmodox2v] { display: flex; flex-direction: column; gap: 12px; }
.catc-err[b-qygmodox2v] { margin: 4px 0 0; font-size: 11.5px; color: var(--nm-bad); }
.catc-err-list[b-qygmodox2v] { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; }
.catc-req[b-qygmodox2v] { color: var(--nm-bad); }
.catc-muted[b-qygmodox2v] { color: var(--nm-muted); font-size: 11.5px; }
.catc-good[b-qygmodox2v] { color: var(--nm-ok) !important; }
.catc-bad[b-qygmodox2v] { color: var(--nm-bad) !important; }

/* ── Shell 3 cột ── */
.catc-shell[b-qygmodox2v] {
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr) 285px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .catc-shell[b-qygmodox2v] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Side panel ── */
.catc-side[b-qygmodox2v] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.catc-block[b-qygmodox2v] { display: flex; flex-direction: column; gap: 7px; }
.catc-block--divider[b-qygmodox2v] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.catc-label[b-qygmodox2v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.catc-label i[b-qygmodox2v] { font-size: 12px; }
.catc-label-suffix[b-qygmodox2v] {
    margin-left: auto;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.catc-chips[b-qygmodox2v] { display: flex; gap: 6px; flex-wrap: wrap; }
.catc-purpose-readonly[b-qygmodox2v] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    font-size: 13px;
}
.catc-purpose-readonly i[b-qygmodox2v] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.catc-purpose-readonly small[b-qygmodox2v] { color: var(--nm-muted); font-size: 11px; }

.catc-meta-row[b-qygmodox2v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}
.catc-meta-row span[b-qygmodox2v] { color: var(--nm-muted); }
.catc-meta-row b[b-qygmodox2v] { font-weight: 600; color: var(--nm-ink); font-variant-numeric: tabular-nums; text-align: right; }
.catc-meta-row--em b[b-qygmodox2v] { color: var(--nm-brand-700); font-weight: 800; }
.catc-bar-block[b-qygmodox2v] { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.catc-ent-list[b-qygmodox2v], .catc-fee-list[b-qygmodox2v] { display: flex; flex-direction: column; gap: 7px; }

/* input ngân sách (CurrencyInput nhận CssClass thuần) */
.catc-side[b-qygmodox2v]  .catc-budget-input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface);
    font-family: var(--nm-font);
    font-size: 17px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    transition: border-color .12s, box-shadow .12s;
}
.catc-side[b-qygmodox2v]  .catc-budget-input:focus {
    outline: none;
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}
.catc-side[b-qygmodox2v]  .catc-budget-input.is-error { border-color: var(--nm-bad); }

.catc-fee-row[b-qygmodox2v] { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.catc-fee-name[b-qygmodox2v] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Card giữa ── */
.catc-main[b-qygmodox2v] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

[b-qygmodox2v] .catc-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[b-qygmodox2v] .catc-card--error { border-color: color-mix(in srgb, var(--nm-bad) 50%, transparent); }
.catc-card-ico[b-qygmodox2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.catc-card-title[b-qygmodox2v] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.catc-card-sub[b-qygmodox2v] { font-size: 11.5px; color: var(--nm-muted); }
.catc-card-count[b-qygmodox2v] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    white-space: nowrap;
}
.catc-card-body[b-qygmodox2v] { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

/* form grid 2 cột */
.catc-grid[b-qygmodox2v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}
@media (max-width: 640px) { .catc-grid[b-qygmodox2v] { grid-template-columns: minmax(0, 1fr); } }
.catc-field[b-qygmodox2v] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.catc-field--full[b-qygmodox2v] { grid-column: 1 / -1; }
.catc-field label[b-qygmodox2v] { font-size: 12px; font-weight: 600; color: var(--nm-ink); }

/* tiles dịch vụ */
.catc-svc-grid[b-qygmodox2v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.catc-svc-tile[b-qygmodox2v] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nm-ink-2);
    cursor: pointer;
    transition: border-color .12s, background .12s;
    min-width: 0;
}
.catc-svc-tile:hover[b-qygmodox2v] { border-color: var(--nm-brand-500); }
.catc-svc-tile.is-selected[b-qygmodox2v] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
    color: var(--nm-ink);
    font-weight: 600;
}
.catc-svc-name[b-qygmodox2v] { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catc-svc-check[b-qygmodox2v] { color: var(--nm-brand-600, var(--nm-brand-500)); flex-shrink: 0; }
[b-qygmodox2v] .catc-svc-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--nm-brand-600, var(--nm-brand-500)); }
.catc-svc-tile:not(.is-selected)[b-qygmodox2v]  .catc-svc-ic { color: var(--nm-muted); }

/* picker thành viên */
.catc-quick-row[b-qygmodox2v] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.catc-hint-box[b-qygmodox2v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    font-size: 12px;
    color: var(--nm-muted);
}
.catc-hint-box--lg[b-qygmodox2v] { padding: 20px 12px; }

.catc-results[b-qygmodox2v] { border: 1px solid var(--nm-border); border-radius: var(--nm-r-input, 10px); overflow: hidden; }
.catc-results-head[b-qygmodox2v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}
.catc-results-list[b-qygmodox2v] { max-height: 240px; overflow-y: auto; }

.catc-emp-row[b-qygmodox2v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--nm-border);
    font-size: 12.5px;
}
.catc-emp-row:last-child[b-qygmodox2v] { border-bottom: 0; }
.catc-emp-row:hover[b-qygmodox2v] { background: var(--nm-surface-2); }
.catc-emp-row.is-added[b-qygmodox2v] { opacity: .55; }
.catc-emp-main[b-qygmodox2v] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.catc-emp-line1[b-qygmodox2v] { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.catc-emp-line1 b[b-qygmodox2v] { font-weight: 600; color: var(--nm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catc-emp-code[b-qygmodox2v] { color: var(--nm-muted); font-family: ui-monospace, monospace; font-size: 10.5px; }
.catc-emp-sub[b-qygmodox2v] { color: var(--nm-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catc-emp-email[b-qygmodox2v] { color: var(--nm-muted); font-size: 11px; flex-shrink: 0; }
.catc-added[b-qygmodox2v] { color: var(--nm-muted); font-size: 11px; flex-shrink: 0; }

.catc-avatar[b-qygmodox2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.catc-avatar--brand[b-qygmodox2v] { background: var(--nm-brand-50); color: var(--nm-brand-700); }

.catc-participants[b-qygmodox2v] { display: flex; flex-direction: column; gap: 6px; }
.catc-part-row[b-qygmodox2v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
    font-size: 12.5px;
}
.catc-part-actions[b-qygmodox2v] { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.catc-star[b-qygmodox2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--nm-muted);
    font-size: 13px;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.catc-star:hover[b-qygmodox2v] { background: var(--nm-brand-50); color: var(--nm-warn); }
.catc-star.is-on[b-qygmodox2v] { color: var(--nm-warn); }

/* ── Modal xem trước quy trình duyệt ── */
.catc-modal-sub[b-qygmodox2v] {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--nm-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.catc-preview[b-qygmodox2v] { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; }
.catc-pstep[b-qygmodox2v] { display: flex; gap: 12px; }
.catc-pstep-rail[b-qygmodox2v] { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.catc-pstep-node[b-qygmodox2v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 12px;
    font-weight: 700;
}
.catc-pstep.is-auto .catc-pstep-node[b-qygmodox2v] { background: color-mix(in srgb, var(--nm-ok) 14%, transparent); color: var(--nm-ok); }
.catc-pstep-line[b-qygmodox2v] { flex: 1; width: 2px; min-height: 12px; background: var(--nm-border); margin: 4px 0; }
.catc-pstep-body[b-qygmodox2v] { flex: 1; min-width: 0; padding-bottom: 14px; }
.catc-pstep:last-child .catc-pstep-body[b-qygmodox2v] { padding-bottom: 0; }
.catc-pstep-head[b-qygmodox2v] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.catc-pstep-head b[b-qygmodox2v] { font-size: 13px; color: var(--nm-ink); }
.catc-pstep-approvers[b-qygmodox2v] { display: flex; flex-direction: column; gap: 4px; }
.catc-pstep-approvers .catc-emp-row[b-qygmodox2v] {
    border: 0;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.catc-pstep-empty[b-qygmodox2v] { margin: 0; font-style: italic; }

@media (max-width: 640px) {
    .nm-list-page[b-qygmodox2v] { padding: 16px 14px 22px; }
    .catc-emp-email[b-qygmodox2v] { display: none; }
}
/* /src/Features/Trips/Pages/Ca/CaTripDetail.razor.rz.scp.css */
/* /ca/trips/{id} — chuẩn nm token-only: shell 3 cột + side panel + card + timeline duyệt + service tiles. */
.nm-list-page[b-jdrw7jfzki] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-jdrw7jfzki] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-jdrw7jfzki] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.catd-title[b-jdrw7jfzki] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-jdrw7jfzki] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-jdrw7jfzki] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.catd-crumb[b-jdrw7jfzki] { color: var(--nm-muted); text-decoration: none; }
.catd-crumb:hover[b-jdrw7jfzki] { color: var(--nm-brand-700); text-decoration: underline; }
.catd-crumb-sep[b-jdrw7jfzki] { margin: 0 4px; color: var(--nm-muted); }

.nm-code-pill[b-jdrw7jfzki] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.catd-loading[b-jdrw7jfzki] { display: flex; flex-direction: column; gap: 12px; }

/* ── Shell 3 cột ── */
.catd-shell[b-jdrw7jfzki] {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 270px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .catd-shell[b-jdrw7jfzki] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Side panel (trái + phải) ── */
.catd-side[b-jdrw7jfzki] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.catd-block[b-jdrw7jfzki] { display: flex; flex-direction: column; gap: 7px; }
.catd-block--divider[b-jdrw7jfzki] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.catd-label[b-jdrw7jfzki] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.catd-label i[b-jdrw7jfzki] { font-size: 12px; }
.catd-label-suffix[b-jdrw7jfzki] {
    margin-left: auto;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}
.catd-val[b-jdrw7jfzki] { font-size: 14px; font-weight: 600; color: var(--nm-ink); }

.catd-dates[b-jdrw7jfzki] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.catd-date-cell[b-jdrw7jfzki] { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.catd-date-cell small[b-jdrw7jfzki] { font-size: 10.5px; color: var(--nm-muted); }
.catd-date-cell b[b-jdrw7jfzki] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.catd-date-arrow[b-jdrw7jfzki] { color: var(--nm-muted); flex-shrink: 0; }
.catd-days-chip[b-jdrw7jfzki] {
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.catd-loc[b-jdrw7jfzki] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--nm-ink); }
.catd-loc-dot[b-jdrw7jfzki] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.catd-loc-dot--from[b-jdrw7jfzki] { background: var(--nm-muted); }
.catd-loc-dot--to[b-jdrw7jfzki] { background: var(--nm-brand-500); }

.catd-meta-row[b-jdrw7jfzki] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
}
.catd-meta-row span[b-jdrw7jfzki] { color: var(--nm-muted); }
.catd-meta-row b[b-jdrw7jfzki] { font-weight: 600; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.catd-good[b-jdrw7jfzki] { color: var(--nm-ok) !important; }
.catd-bad[b-jdrw7jfzki] { color: var(--nm-bad) !important; }

/* Ngân sách (side phải) */
.catd-budget[b-jdrw7jfzki] {
    font-size: 21px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.catd-spent[b-jdrw7jfzki] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    color: var(--nm-muted);
}
.catd-spent b[b-jdrw7jfzki] { color: var(--nm-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.catd-link[b-jdrw7jfzki] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-brand-700);
    cursor: pointer;
}
.catd-link:hover[b-jdrw7jfzki] { text-decoration: underline; }
.catd-hint[b-jdrw7jfzki] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }

/* Service tiles */
.catd-svc-grid[b-jdrw7jfzki] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.catd-svc-tile[b-jdrw7jfzki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    text-decoration: none;
    color: var(--nm-ink);
    transition: border-color .12s, background .12s;
}
.catd-svc-tile:hover[b-jdrw7jfzki] { border-color: var(--nm-brand-500); background: var(--nm-brand-50); }
.catd-svc-tile i[b-jdrw7jfzki] { font-size: 16px; color: var(--nm-brand-600, var(--nm-brand-500)); }
.catd-svc-name[b-jdrw7jfzki] { font-size: 11.5px; font-weight: 600; text-align: center; }
.catd-svc-state[b-jdrw7jfzki] {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--nm-r-pill);
}
.catd-svc-tile.is-done[b-jdrw7jfzki] { border-color: color-mix(in srgb, var(--nm-ok) 40%, transparent); }
.catd-svc-tile.is-done .catd-svc-state[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-ok) 14%, transparent); color: var(--nm-ok); }
.catd-svc-tile.is-warn[b-jdrw7jfzki] { border-color: color-mix(in srgb, var(--nm-warn) 45%, transparent); }
.catd-svc-tile.is-warn .catd-svc-state[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-warn) 14%, transparent); color: var(--nm-warn); }
.catd-svc-tile.is-review .catd-svc-state[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-bad) 12%, transparent); color: var(--nm-bad); }

/* ── Card giữa ── */
.catd-main[b-jdrw7jfzki] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

[b-jdrw7jfzki] .catd-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.catd-card-ico[b-jdrw7jfzki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.catd-card-title[b-jdrw7jfzki] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.catd-card-count[b-jdrw7jfzki] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.catd-card-suffix[b-jdrw7jfzki] { margin-left: auto; }
[b-jdrw7jfzki] .catd-card--dashed { border-style: dashed; }

.catd-card-body[b-jdrw7jfzki] { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

/* dl 2 cột */
.catd-dl[b-jdrw7jfzki] {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}
@media (max-width: 640px) { .catd-dl[b-jdrw7jfzki] { grid-template-columns: minmax(0, 1fr); } }
.catd-dl-row[b-jdrw7jfzki] { display: flex; flex-direction: column; gap: 2px; }
.catd-dl-row dt[b-jdrw7jfzki] { font-size: 11.5px; color: var(--nm-muted); font-weight: 600; }
.catd-dl-row dd[b-jdrw7jfzki] { margin: 0; font-size: 13.5px; color: var(--nm-ink); font-weight: 500; }
.catd-em[b-jdrw7jfzki] { color: var(--nm-brand-700); font-weight: 800; }

.catd-info-block[b-jdrw7jfzki] {
    padding: 10px 12px;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.catd-info-lbl[b-jdrw7jfzki] { display: block; font-size: 11px; font-weight: 700; color: var(--nm-muted); margin-bottom: 3px; }
.catd-info-val[b-jdrw7jfzki] { margin: 0; font-size: 13px; color: var(--nm-ink); white-space: pre-wrap; }

/* bảng người tham gia */
.catd-table[b-jdrw7jfzki] { width: 100%; border-collapse: collapse; font-size: 13px; }
.catd-table th[b-jdrw7jfzki] {
    padding: 9px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}
.catd-table td[b-jdrw7jfzki] { padding: 9px 14px; border-bottom: 1px solid var(--nm-border); }
.catd-table tr:last-child td[b-jdrw7jfzki] { border-bottom: 0; }
.catd-th-idx[b-jdrw7jfzki] { width: 40px; text-align: center !important; }
.catd-td-idx[b-jdrw7jfzki] { text-align: center; color: var(--nm-muted); font-family: ui-monospace, monospace; font-size: 11px; }
.catd-th-right[b-jdrw7jfzki], .catd-td-right[b-jdrw7jfzki] { text-align: right !important; }
.catd-muted[b-jdrw7jfzki] { color: var(--nm-muted); }
.catd-person[b-jdrw7jfzki] { display: inline-flex; align-items: center; gap: 8px; }
.catd-person b[b-jdrw7jfzki] { font-weight: 600; color: var(--nm-ink); }
.catd-avatar[b-jdrw7jfzki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.cell-amount[b-jdrw7jfzki] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* dịch vụ đính kèm */
.catd-attach-list[b-jdrw7jfzki] { display: flex; flex-direction: column; }
.catd-attach-row[b-jdrw7jfzki] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nm-border);
    text-decoration: none;
    color: var(--nm-ink);
    transition: background .12s;
}
.catd-attach-row:last-child[b-jdrw7jfzki] { border-bottom: 0; }
.catd-attach-row:hover[b-jdrw7jfzki] { background: var(--nm-surface-2); }
.catd-attach-ico[b-jdrw7jfzki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.catd-attach-main[b-jdrw7jfzki] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.catd-attach-line1[b-jdrw7jfzki] { display: flex; align-items: center; gap: 8px; }
.catd-attach-line1 b[b-jdrw7jfzki] { font-size: 13px; font-weight: 600; }
.catd-attach-code[b-jdrw7jfzki] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nm-muted);
}
.catd-attach-detail[b-jdrw7jfzki] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catd-attach-amt[b-jdrw7jfzki] { flex-shrink: 0; }

/* ── Timeline duyệt ── */
.catd-timeline[b-jdrw7jfzki] { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; }
.catd-step[b-jdrw7jfzki] { display: flex; gap: 12px; }
.catd-step-rail[b-jdrw7jfzki] { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.catd-step-node[b-jdrw7jfzki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 13px;
    flex-shrink: 0;
}
.catd-step-num[b-jdrw7jfzki] { font-size: 11px; font-weight: 700; }
.catd-step-line[b-jdrw7jfzki] { flex: 1; width: 2px; min-height: 14px; background: var(--nm-border); margin: 4px 0; }
.catd-step-body[b-jdrw7jfzki] { flex: 1; min-width: 0; padding-bottom: 16px; }
.catd-step:last-child .catd-step-body[b-jdrw7jfzki] { padding-bottom: 0; }

.catd-step-head[b-jdrw7jfzki] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.catd-step-title[b-jdrw7jfzki] { font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.catd-step-tag[b-jdrw7jfzki] {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.catd-step-tag--auto[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-info) 12%, transparent); color: var(--nm-info); }
.catd-step-tag--info[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-info) 12%, transparent); color: var(--nm-info); }
.catd-step-tag--mute[b-jdrw7jfzki] { background: var(--nm-surface-2); color: var(--nm-muted); }

/* Trạng thái từng bước: node + tag chính ăn theo modifier trên <li> */
.catd-step.is-approved .catd-step-node[b-jdrw7jfzki] { background: var(--nm-ok); color: #fff; }
.catd-step.is-approved .catd-step-line[b-jdrw7jfzki] { background: var(--nm-ok); }
.catd-step.is-approved .catd-step-tag:first-of-type[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-ok) 13%, transparent); color: var(--nm-ok); }
.catd-step.is-rejected .catd-step-node[b-jdrw7jfzki] { background: var(--nm-bad); color: #fff; }
.catd-step.is-rejected .catd-step-tag:first-of-type[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-bad) 12%, transparent); color: var(--nm-bad); }
.catd-step.is-revision .catd-step-node[b-jdrw7jfzki] { background: var(--nm-warn); color: #fff; }
.catd-step.is-revision .catd-step-tag:first-of-type[b-jdrw7jfzki] { background: color-mix(in srgb, var(--nm-warn) 14%, transparent); color: var(--nm-warn); }
.catd-step.is-progress .catd-step-node[b-jdrw7jfzki] { background: var(--nm-brand-500); color: var(--nm-on-brand); animation: catd-pulse-b-jdrw7jfzki 1.6s ease-in-out infinite; }
.catd-step.is-progress .catd-step-tag:first-of-type[b-jdrw7jfzki] { background: var(--nm-brand-50); color: var(--nm-brand-700); }
@keyframes catd-pulse-b-jdrw7jfzki { 50% { opacity: .65; } }

.catd-step-meta[b-jdrw7jfzki] { margin: 0 0 5px; font-size: 11.5px; color: var(--nm-muted); }
.catd-step-time[b-jdrw7jfzki] { font-size: 11.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.catd-step-comment[b-jdrw7jfzki] {
    margin: 6px 0 0;
    padding: 7px 10px;
    border-left: 3px solid var(--nm-border);
    border-radius: 0 8px 8px 0;
    background: var(--nm-surface-2);
    font-size: 12px;
    color: var(--nm-ink-2);
    font-style: italic;
}

.catd-approvers[b-jdrw7jfzki] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.catd-approver[b-jdrw7jfzki] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--nm-r-pill);
    border: 1px solid var(--nm-border);
    background: var(--nm-surface);
    font-size: 11.5px;
    color: var(--nm-ink);
}
.catd-approver b[b-jdrw7jfzki] { font-weight: 600; }
.catd-approver i[b-jdrw7jfzki] { font-size: 11px; color: var(--nm-muted); }
.catd-approver-jt[b-jdrw7jfzki] { color: var(--nm-muted); }
.catd-approver.is-done[b-jdrw7jfzki] { border-color: color-mix(in srgb, var(--nm-ok) 40%, transparent); background: color-mix(in srgb, var(--nm-ok) 7%, transparent); }
.catd-approver.is-rejected[b-jdrw7jfzki] { border-color: color-mix(in srgb, var(--nm-bad) 40%, transparent); background: color-mix(in srgb, var(--nm-bad) 7%, transparent); }
.catd-approver.is-revision[b-jdrw7jfzki] { border-color: color-mix(in srgb, var(--nm-warn) 45%, transparent); background: color-mix(in srgb, var(--nm-warn) 8%, transparent); }
.catd-approver.is-upcoming[b-jdrw7jfzki] { opacity: .65; }

/* tài liệu */
.catd-doc-list[b-jdrw7jfzki] { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.catd-doc-list li[b-jdrw7jfzki] { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nm-ink); }
.catd-doc-list i[b-jdrw7jfzki] { color: var(--nm-muted); }

/* ── Modal ── */
.catd-modal-sub[b-jdrw7jfzki] { margin: 0 0 10px; font-size: 13px; color: var(--nm-muted); }
.catd-modal-sub b[b-jdrw7jfzki] { color: var(--nm-ink); }
[b-jdrw7jfzki] .catd-modal-alert { margin-bottom: 10px; }
.catd-modal-label[b-jdrw7jfzki] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
    margin-bottom: 6px;
}

.catd-link-filter[b-jdrw7jfzki] { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.catd-link-filter .catd-modal-label[b-jdrw7jfzki] { margin-bottom: 0; flex-shrink: 0; }
.catd-link-loading[b-jdrw7jfzki] { display: flex; flex-direction: column; gap: 8px; }
.catd-link-list[b-jdrw7jfzki] {
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
}
.catd-link-row[b-jdrw7jfzki] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--nm-border);
    cursor: pointer;
    transition: background .12s;
}
.catd-link-row:last-child[b-jdrw7jfzki] { border-bottom: 0; }
.catd-link-row:hover[b-jdrw7jfzki] { background: var(--nm-surface-2); }
.catd-link-row.is-selected[b-jdrw7jfzki] { background: var(--nm-brand-50); box-shadow: inset 0 0 0 1px var(--nm-brand-500); }
.catd-link-row.is-covered[b-jdrw7jfzki] { opacity: .55; cursor: not-allowed; }
.catd-link-main[b-jdrw7jfzki] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.catd-link-main b[b-jdrw7jfzki] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catd-link-main small[b-jdrw7jfzki] { font-size: 11px; color: var(--nm-muted); }
.catd-link-planned[b-jdrw7jfzki] { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--nm-border); }

@media (max-width: 640px) {
    .nm-list-page[b-jdrw7jfzki] { padding: 16px 14px 22px; }
    .catd-table[b-jdrw7jfzki] { display: block; overflow-x: auto; }
}
/* /src/Features/Trips/Pages/Ca/CaTripsIndex.razor.rz.scp.css */
/* /ca/trips — chuẩn nm-list: shell trang + toolbar + cell helpers; chrome bảng do DataGrid/Nm* lo. */
.nm-list-page[b-atm9aa2d4y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-atm9aa2d4y] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-atm9aa2d4y] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-atm9aa2d4y] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-atm9aa2d4y] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Toolbar filter ── */
.nm-list-toolbar[b-atm9aa2d4y] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-atm9aa2d4y] { width: 280px; max-width: 100%; }
.tb-select[b-atm9aa2d4y] { min-width: 150px; }
.tb-select--date[b-atm9aa2d4y] { min-width: 165px; }
.tb-select--sort[b-atm9aa2d4y] { min-width: 175px; }
.tb-filters[b-atm9aa2d4y] { display: contents; }
[b-atm9aa2d4y] .tb-clear { margin-left: auto; }

/* Cặp ô từ ngày – đến ngày (hiện khi chọn preset khoảng thời gian) */
.tb-daterange[b-atm9aa2d4y] { display: inline-flex; align-items: center; gap: 6px; }
.tb-daterange__sep[b-atm9aa2d4y] { color: var(--nm-muted); flex-shrink: 0; }
.tb-daterange[b-atm9aa2d4y]  .nm-dateinput { width: 142px; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-atm9aa2d4y] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-atm9aa2d4y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Chips trạng thái ── */
.tb-status[b-atm9aa2d4y] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .nm-list-page[b-atm9aa2d4y] { padding: 16px 14px 22px; }

    .tb-search[b-atm9aa2d4y] { flex: 1; width: auto; }
    [b-atm9aa2d4y] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-atm9aa2d4y] { display: none; }
    .tb-filters.is-open[b-atm9aa2d4y] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-atm9aa2d4y] { flex: 1 1 45%; min-width: 0; }
    .tb-select[b-atm9aa2d4y]  .nm-select-wrap,
    .tb-select[b-atm9aa2d4y]  .nm-select { width: 100%; }
    .tb-filters.is-open .tb-daterange[b-atm9aa2d4y] { flex: 1 1 100%; }
    .tb-daterange[b-atm9aa2d4y]  .nm-dateinput-wrap { flex: 1; min-width: 0; }
    .tb-daterange[b-atm9aa2d4y]  .nm-dateinput { width: 100%; }

    /* Chips trạng thái: trượt ngang 1 hàng thay vì wrap */
    .tb-status[b-atm9aa2d4y] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .tb-status[b-atm9aa2d4y]::-webkit-scrollbar { display: none; }
    .tb-status[b-atm9aa2d4y]  .nm-chip { flex-shrink: 0; }
}

/* ── Cell helpers ── */
.cell-2line[b-atm9aa2d4y] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-atm9aa2d4y] {
    font-weight: 500; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cell-2line__sub[b-atm9aa2d4y] {
    font-size: 11.5px; color: var(--nm-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 210px;
}
.cell-date[b-atm9aa2d4y] { font-variant-numeric: tabular-nums; }
.catr-name[b-atm9aa2d4y] { font-size: 12px; color: var(--nm-ink-2); font-weight: 500; }

/* mã chuyến — pill mono, click về chi tiết */
.nm-code-pill[b-atm9aa2d4y] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    text-decoration: none;
}
a.nm-code-pill:hover[b-atm9aa2d4y] { background: var(--nm-brand-100, var(--nm-brand-50)); text-decoration: underline; }

/* điểm đến */
.catr-dest[b-atm9aa2d4y] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--nm-ink);
}
.catr-dest i[b-atm9aa2d4y] { color: var(--nm-brand-500); font-size: 12px; }

/* ngân sách — mono, canh phải */
.cell-amount[b-atm9aa2d4y] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

.nm-row-actions[b-atm9aa2d4y] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* ── Footer: tổng + phân trang ── */
.catr-foot[b-atm9aa2d4y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.catr-total[b-atm9aa2d4y] { font-size: 12.5px; color: var(--nm-muted); }
.catr-total strong[b-atm9aa2d4y] { color: var(--nm-ink); font-weight: 700; }
/* /src/Features/Trips/Pages/Manager/PendingApprovals.razor.rz.scp.css */
/* ═══ Pending Approvals — Manager Dashboard v4 theme ═══ */
.tpa-root[b-qk9fcgs4g1] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.tpa-num[b-qk9fcgs4g1] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Hero */
.tpa-hero[b-qk9fcgs4g1] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .tpa-hero h1[b-qk9fcgs4g1] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

        .tpa-hero h1 em[b-qk9fcgs4g1] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.tpa-hero-meta[b-qk9fcgs4g1] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .tpa-hero-meta .dot[b-qk9fcgs4g1] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.tpa-hero-actions[b-qk9fcgs4g1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* New badge */
.tpa-newbadge[b-qk9fcgs4g1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.25);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Buttons */
.dash-btn[b-qk9fcgs4g1] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-qk9fcgs4g1] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

.dash-btn-accent[b-qk9fcgs4g1] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-qk9fcgs4g1] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-compact[b-qk9fcgs4g1] {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* Card */
.dash-card[b-qk9fcgs4g1] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* Table */
.tpa-tablewrap[b-qk9fcgs4g1] {
    overflow-x: auto;
}

.tpa-tbl[b-qk9fcgs4g1] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .tpa-tbl thead th[b-qk9fcgs4g1] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .tpa-tbl thead th.center[b-qk9fcgs4g1] {
            text-align: center;
        }

        .tpa-tbl thead th.right[b-qk9fcgs4g1] {
            text-align: right;
        }

    .tpa-tbl tbody td[b-qk9fcgs4g1] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .tpa-tbl tbody tr:last-child td[b-qk9fcgs4g1] {
        border-bottom: 0;
    }

    .tpa-tbl tbody tr:hover[b-qk9fcgs4g1] {
        background: var(--d-surface-2);
    }

    .tpa-tbl td.center[b-qk9fcgs4g1] {
        text-align: center;
    }

    .tpa-tbl td.right[b-qk9fcgs4g1] {
        text-align: right;
    }

    .tpa-tbl .stt[b-qk9fcgs4g1] {
        color: var(--d-ink-4);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
    }

.tpa-code[b-qk9fcgs4g1] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
    display: block;
}

    .tpa-code:hover[b-qk9fcgs4g1] {
        text-decoration: underline;
        color: var(--d-accent);
    }

.tpa-name[b-qk9fcgs4g1] {
    font-weight: 500;
    color: var(--d-ink);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tpa-tag-intl[b-qk9fcgs4g1] {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tpa-num-cell[b-qk9fcgs4g1] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--d-ink);
    font-weight: 500;
}

.tpa-warn[b-qk9fcgs4g1] {
    display: block;
    font-size: 10px;
    color: var(--d-danger);
    font-weight: 600;
    margin-top: 2px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tpa-muted[b-qk9fcgs4g1] {
    color: var(--d-ink-3);
    font-size: 12px;
}

/* Step indicator */
.tpa-steps[b-qk9fcgs4g1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tpa-step-dot[b-qk9fcgs4g1] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--d-line);
}

    .tpa-step-dot.is-done[b-qk9fcgs4g1] {
        background: var(--d-good);
    }

.tpa-step-cnt[b-qk9fcgs4g1] {
    margin-left: 4px;
    font-size: 11px;
    color: var(--d-ink-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Empty */
.dash-empty[b-qk9fcgs4g1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .dash-empty b[b-qk9fcgs4g1] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .dash-empty small[b-qk9fcgs4g1] {
        font-size: 12px;
    }

    .dash-empty svg[b-qk9fcgs4g1] {
        margin-bottom: 4px;
        color: var(--d-ink-4);
    }

.tpa-loading[b-qk9fcgs4g1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 0;
}

.tpa-pager[b-qk9fcgs4g1] {
    padding: 10px 16px;
    border-top: 1px solid var(--d-line-2);
}
/* /src/Features/Trips/Pages/Manager/TripCreate.razor.rz.scp.css */
/* ═══ Trip Create — Manager Dashboard v4 theme ═══ */
.tripcreate-root[b-c3soj3717m] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

/* ── Hero ── */
.tripcreate-hero[b-c3soj3717m] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .tripcreate-hero h1[b-c3soj3717m] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.2;
    }

    .tripcreate-hero h1 em[b-c3soj3717m] {
        font-style: normal;
        color: var(--d-ink-3);
        font-weight: 500;
    }

.tripcreate-hero-meta[b-c3soj3717m] {
    margin-top: 6px;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.tripcreate-hero-actions[b-c3soj3717m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.dash-btn[b-c3soj3717m] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-c3soj3717m] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-c3soj3717m] {
        opacity: .55;
        cursor: not-allowed;
    }

.dash-btn-accent[b-c3soj3717m] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-c3soj3717m] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-c3soj3717m] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-c3soj3717m] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* ── Card ── */
.dash-card[b-c3soj3717m] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.dash-card-hd[b-c3soj3717m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--d-line-2);
    gap: 8px;
}

    .dash-card-hd h3[b-c3soj3717m] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.dash-card-bd[b-c3soj3717m] {
    padding: 14px 16px;
}

/* ── Layout grid ── */
.tripcreate-grid[b-c3soj3717m] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}

.tripcreate-col-main[b-c3soj3717m] {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tripcreate-col-side[b-c3soj3717m] {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 1024px) {
    .tripcreate-col-main[b-c3soj3717m] {
        grid-column: span 8;
    }

    .tripcreate-col-side[b-c3soj3717m] {
        grid-column: span 4;
        position: sticky;
        top: 16px;
    }
}

/* ── Section eyebrow ── */
.tripcreate-eyebrow[b-c3soj3717m] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tripcreate-eyebrow .sub[b-c3soj3717m] {
    color: var(--d-ink-4);
    font-weight: 500;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Form controls ── */
.tripcreate-field[b-c3soj3717m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tripcreate-label[b-c3soj3717m] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

    .tripcreate-label .req[b-c3soj3717m] {
        color: var(--d-danger);
        margin-left: 2px;
    }

.tripcreate-input[b-c3soj3717m],
.tripcreate-select[b-c3soj3717m],
.tripcreate-textarea[b-c3soj3717m] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 0 12px;
    font-size: 14px;
    color: var(--d-ink);
    background: var(--d-surface);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.tripcreate-textarea[b-c3soj3717m] {
    height: auto;
    min-height: 72px;
    padding: 10px 12px;
    resize: vertical;
}

.tripcreate-input:focus[b-c3soj3717m],
.tripcreate-select:focus[b-c3soj3717m],
.tripcreate-textarea:focus[b-c3soj3717m] {
    outline: 0;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}

.tripcreate-input.has-error[b-c3soj3717m],
.tripcreate-select.has-error[b-c3soj3717m] {
    border-color: color-mix(in srgb, var(--d-danger) 50%, white);
    background: color-mix(in srgb, var(--d-danger) 4%, white);
}

.tripcreate-err[b-c3soj3717m] {
    font-size: 11.5px;
    color: var(--d-danger);
    margin: 0;
}

.tripcreate-grid-2[b-c3soj3717m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .tripcreate-grid-2[b-c3soj3717m] {
        grid-template-columns: 1fr 1fr;
    }
}

.tripcreate-grid-3[b-c3soj3717m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .tripcreate-grid-3[b-c3soj3717m] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Location row dots ── */
.tripcreate-loc-input[b-c3soj3717m] {
    position: relative;
}

    .tripcreate-loc-input .dot[b-c3soj3717m] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        z-index: 2;
    }

    .tripcreate-loc-input .dot.from[b-c3soj3717m] {
        background: #fb923c;
    }

    .tripcreate-loc-input .dot.to[b-c3soj3717m] {
        background: var(--d-accent);
    }

    .tripcreate-loc-input .tripcreate-input[b-c3soj3717m] {
        padding-left: 32px;
    }

.tripcreate-date-wrap[b-c3soj3717m] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .tripcreate-date-wrap:focus-within[b-c3soj3717m] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234,88,12,.12);
    }

/* ── Service tiles ── */
.tripcreate-svc-grid[b-c3soj3717m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .tripcreate-svc-grid[b-c3soj3717m] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tripcreate-svc[b-c3soj3717m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-align: left;
    min-width: 0;
}

    .tripcreate-svc:hover[b-c3soj3717m] {
        border-color: color-mix(in srgb, var(--d-accent) 35%, var(--d-line));
        background: var(--d-surface-2);
    }

    .tripcreate-svc.is-selected[b-c3soj3717m] {
        border-color: color-mix(in srgb, var(--d-accent) 50%, white);
        background: var(--d-accent-soft);
        color: var(--d-ink);
    }

.tripcreate-svc-ico[b-c3soj3717m] {
    font-size: 16px;
    flex-shrink: 0;
}

.tripcreate-svc-name[b-c3soj3717m] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripcreate-svc-check[b-c3soj3717m] {
    color: var(--d-accent);
    flex-shrink: 0;
}

.tripcreate-detail[b-c3soj3717m] {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.tripcreate-detail-hd[b-c3soj3717m] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tripcreate-detail-hint[b-c3soj3717m] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    margin-top: 4px;
}

/* ── Pill / badge ── */
.tripcreate-pill[b-c3soj3717m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,.18);
}

.tripcreate-pill.lead[b-c3soj3717m] {
    padding: 1px 6px;
    font-size: 9.5px;
}

/* ── Participants ── */
.tripcreate-search[b-c3soj3717m] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tripcreate-search-input[b-c3soj3717m] {
    position: relative;
    flex: 1;
}

    .tripcreate-search-input svg.ico[b-c3soj3717m] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

    .tripcreate-search-input .tripcreate-input[b-c3soj3717m] {
        padding-left: 34px;
    }

.tripcreate-emp-list[b-c3soj3717m] {
    margin-top: 10px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    max-height: 200px;
    overflow-y: auto;
    background: var(--d-surface);
}

.tripcreate-emp-row[b-c3soj3717m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12.5px;
    transition: background .12s;
}

    .tripcreate-emp-row:last-child[b-c3soj3717m] {
        border-bottom: 0;
    }

    .tripcreate-emp-row:hover[b-c3soj3717m] {
        background: var(--d-surface-2);
    }

    .tripcreate-emp-row.disabled[b-c3soj3717m] {
        opacity: .4;
    }

.tripcreate-avatar[b-c3soj3717m] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--d-line);
}

    .tripcreate-avatar.accent[b-c3soj3717m] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
    }

.tripcreate-emp-meta[b-c3soj3717m] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.tripcreate-emp-name[b-c3soj3717m] {
    font-weight: 500;
    color: var(--d-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripcreate-emp-sub[b-c3soj3717m] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripcreate-add-btn[b-c3soj3717m] {
    background: transparent;
    border: 1px solid var(--d-line);
    color: var(--d-accent);
    font-weight: 600;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
}

    .tripcreate-add-btn:hover[b-c3soj3717m] {
        background: var(--d-accent-soft);
    }

.tripcreate-empty[b-c3soj3717m] {
    border: 1px dashed var(--d-line);
    border-radius: var(--d-r);
    padding: 20px 16px;
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.tripcreate-part-list[b-c3soj3717m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.tripcreate-part-row[b-c3soj3717m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.tripcreate-icobtn[b-c3soj3717m] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--d-ink-4);
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tripcreate-icobtn:hover[b-c3soj3717m] {
        background: var(--d-surface);
        color: var(--d-ink);
    }

    .tripcreate-icobtn.is-leader[b-c3soj3717m] {
        color: var(--d-accent);
    }

    .tripcreate-icobtn.danger:hover[b-c3soj3717m] {
        background: #fef2f2;
        color: var(--d-danger);
    }

/* ── Banners ── */
.tripcreate-banner-err[b-c3soj3717m] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, white);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, white);
    color: #991b1b;
    font-size: 12.5px;
}

    .tripcreate-banner-err button[b-c3soj3717m] {
        background: transparent;
        border: 0;
        color: inherit;
        opacity: .6;
        cursor: pointer;
        margin-left: auto;
    }

        .tripcreate-banner-err button:hover[b-c3soj3717m] {
            opacity: 1;
        }

/* ── Loading ── */
.tripcreate-loading[b-c3soj3717m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
    color: var(--d-accent);
}

/* ── Budget meter ── */
.tripcreate-meter[b-c3soj3717m] {
    border-radius: var(--d-r);
    padding: 10px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    font-size: 11.5px;
}

    .tripcreate-meter.over[b-c3soj3717m] {
        background: color-mix(in srgb, var(--d-danger) 6%, white);
        border-color: color-mix(in srgb, var(--d-danger) 25%, white);
    }

.tripcreate-meter-row[b-c3soj3717m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    color: var(--d-ink-3);
}

    .tripcreate-meter-row .val[b-c3soj3717m] {
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

    .tripcreate-meter-row .val.danger[b-c3soj3717m] {
        color: var(--d-danger);
    }

.tripcreate-meter-bar[b-c3soj3717m] {
    width: 100%;
    height: 4px;
    background: var(--d-line);
    border-radius: 999px;
    overflow: hidden;
}

.tripcreate-meter-fill[b-c3soj3717m] {
    height: 100%;
    border-radius: 999px;
    transition: width .25s;
    background: var(--d-accent-grad);
}

    .tripcreate-meter-fill.warn[b-c3soj3717m] {
        background: var(--d-warn);
    }

    .tripcreate-meter-fill.danger[b-c3soj3717m] {
        background: var(--d-danger);
    }

.tripcreate-meter-msg[b-c3soj3717m] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-danger);
}

.tripcreate-hint[b-c3soj3717m] {
    border-radius: var(--d-r);
    padding: 8px 10px;
    font-size: 11.5px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
}

    .tripcreate-hint.warn[b-c3soj3717m] {
        background: color-mix(in srgb, var(--d-warn) 8%, white);
        border-color: color-mix(in srgb, var(--d-warn) 25%, white);
        color: #92400e;
    }

    .tripcreate-hint.good[b-c3soj3717m] {
        background: color-mix(in srgb, var(--d-good) 8%, white);
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
        color: #166534;
    }

    .tripcreate-hint.danger[b-c3soj3717m] {
        background: color-mix(in srgb, var(--d-danger) 6%, white);
        border-color: color-mix(in srgb, var(--d-danger) 25%, white);
        color: #991b1b;
    }

    .tripcreate-hint b[b-c3soj3717m] {
        font-weight: 600;
    }

    .tripcreate-hint p[b-c3soj3717m] {
        margin: 0;
    }

    .tripcreate-hint p + p[b-c3soj3717m] {
        margin-top: 2px;
        opacity: .85;
    }

/* ── Allocation block ── */
.tripcreate-alloc[b-c3soj3717m] {
    border-top: 1px solid var(--d-line-2);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tripcreate-alloc-hd[b-c3soj3717m] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}

/* ── Entitlement panel ── */
.tripcreate-ent[b-c3soj3717m] {
    border-top: 1px solid var(--d-line-2);
    padding-top: 12px;
}

.tripcreate-ent-hd[b-c3soj3717m] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tripcreate-ent-list[b-c3soj3717m] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tripcreate-ent-row[b-c3soj3717m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line-2);
    border-radius: 8px;
    font-size: 11.5px;
}

    .tripcreate-ent-row.accent[b-c3soj3717m] {
        background: var(--d-accent-grad-soft);
        border-color: color-mix(in srgb, var(--d-accent) 25%, white);
    }

    .tripcreate-ent-row .lbl[b-c3soj3717m] {
        color: var(--d-ink-3);
    }

    .tripcreate-ent-row .val[b-c3soj3717m] {
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

    .tripcreate-ent-row .val.accent[b-c3soj3717m] {
        color: var(--d-accent);
        font-weight: 700;
    }

    .tripcreate-ent-row .val.good[b-c3soj3717m] {
        color: var(--d-good);
    }

    .tripcreate-ent-row .val.danger[b-c3soj3717m] {
        color: var(--d-danger);
    }

/* ── Service summary ── */
.tripcreate-svc-summary[b-c3soj3717m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--d-line-2);
}

    .tripcreate-svc-summary:last-child[b-c3soj3717m] {
        border-bottom: 0;
    }

.tripcreate-svc-summary-name[b-c3soj3717m] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripcreate-svc-summary-fee[b-c3soj3717m] {
    font-size: 10.5px;
    color: var(--d-ink-4);
}

.tripcreate-totals[b-c3soj3717m] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

.tripcreate-totals-row[b-c3soj3717m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .tripcreate-totals-row.total[b-c3soj3717m] {
        font-weight: 700;
    }

        .tripcreate-totals-row.total .val[b-c3soj3717m] {
            color: var(--d-accent);
            font-variant-numeric: tabular-nums;
        }

/* ── Quick tips ── */
.tripcreate-tips[b-c3soj3717m] {
    border-radius: var(--d-r);
    padding: 12px 14px;
    background: var(--d-accent-grad-soft);
    border: 1px solid color-mix(in srgb, var(--d-accent) 25%, white);
    color: #7c2d12;
    font-size: 11.5px;
}

    .tripcreate-tips b[b-c3soj3717m] {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        color: var(--d-accent);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: 10.5px;
    }

    .tripcreate-tips ul[b-c3soj3717m] {
        margin: 0;
        padding-left: 16px;
        line-height: 1.55;
    }

/* ── Approval preview modal ── */
.tripcreate-modal-bd[b-c3soj3717m] {
    position: fixed;
    inset: 0;
    background: rgba(28,25,23,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

.tripcreate-modal[b-c3soj3717m] {
    background: var(--d-surface);
    border-radius: 12px;
    border: 1px solid var(--d-line);
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tripcreate-modal-hd[b-c3soj3717m] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line-2);
}

    .tripcreate-modal-hd h2[b-c3soj3717m] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .tripcreate-modal-hd p[b-c3soj3717m] {
        margin: 4px 0 0;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

.tripcreate-modal-body[b-c3soj3717m] {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}

.tripcreate-modal-ft[b-c3soj3717m] {
    padding: 12px 18px;
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tripcreate-step[b-c3soj3717m] {
    display: flex;
    gap: 14px;
    padding-bottom: 16px;
}

.tripcreate-step-tl[b-c3soj3717m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.tripcreate-step-num[b-c3soj3717m] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
}

    .tripcreate-step-num.auto[b-c3soj3717m] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

    .tripcreate-step-num.user[b-c3soj3717m] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
    }

.tripcreate-step-line[b-c3soj3717m] {
    width: 2px;
    flex: 1;
    background: var(--d-line);
    margin-top: 4px;
}

.tripcreate-step-bd[b-c3soj3717m] {
    flex: 1;
    min-width: 0;
}

.tripcreate-step-title[b-c3soj3717m] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

    .tripcreate-step-title .name[b-c3soj3717m] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .tripcreate-step-title .tag[b-c3soj3717m] {
        font-size: 10.5px;
        font-weight: 600;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border: 1px solid var(--d-line);
    }

    .tripcreate-step-title .tag.good[b-c3soj3717m] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

    .tripcreate-step-title .meta[b-c3soj3717m] {
        font-size: 10.5px;
        color: var(--d-ink-4);
    }

.tripcreate-step-app[b-c3soj3717m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    margin-top: 6px;
}

.tripcreate-step-empty[b-c3soj3717m] {
    font-size: 11.5px;
    color: var(--d-ink-4);
    font-style: italic;
}
/* /src/Features/Trips/Pages/Manager/TripDetail.razor.rz.scp.css */
/* ═══ Trip Detail — Manager Dashboard v4 theme ═══ */
.trip-root[b-b9oeknh4wy] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.trip-num[b-b9oeknh4wy] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Sticky header (gradient + soft) ── */
.trip-stickyhead[b-b9oeknh4wy] {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -20px -28px 16px;
    padding: 12px 28px;
    background: linear-gradient(180deg, #fdfcfa 0%, #faf8f3 100%);
    border-bottom: 1px solid var(--d-line-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(28, 25, 23, 0.02);
}

.trip-stickyhead-row[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trip-back-btn[b-b9oeknh4wy] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--d-line-2);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}

    .trip-back-btn:hover[b-b9oeknh4wy] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 20%, #fff);
    }

.trip-stickyhead-id[b-b9oeknh4wy] {
    flex: 1;
    min-width: 0;
}

.trip-stickyhead-line1[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.trip-name-lg[b-b9oeknh4wy] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    line-height: 1.2;
}

.trip-code-tag[b-b9oeknh4wy] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line-2);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.trip-stickyhead-line2[b-b9oeknh4wy] {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--d-ink-3);
    font-size: 11.5px;
    flex-wrap: wrap;
}

    .trip-stickyhead-line2 strong[b-b9oeknh4wy] { color: var(--d-ink-2); font-weight: 600; }

    .trip-stickyhead-line2 .dot[b-b9oeknh4wy] {
        width: 3px; height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

/* ── Buttons ── */
.dash-btn[b-b9oeknh4wy] {
    height: 36px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-b9oeknh4wy] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-b9oeknh4wy] {
        opacity: .5;
        cursor: not-allowed;
    }

.dash-btn-accent[b-b9oeknh4wy] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-b9oeknh4wy] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-good[b-b9oeknh4wy] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}

    .dash-btn-good:hover[b-b9oeknh4wy] {
        background: #15803d;
        color: #fff;
    }

.dash-btn-danger[b-b9oeknh4wy] {
    color: var(--d-danger);
    border-color: color-mix(in srgb, var(--d-danger) 30%, white);
}

    .dash-btn-danger:hover[b-b9oeknh4wy] {
        background: #fef2f2;
        color: var(--d-danger);
    }

.dash-btn-warn[b-b9oeknh4wy] {
    color: var(--d-warn);
    border-color: color-mix(in srgb, var(--d-warn) 30%, white);
}

    .dash-btn-warn:hover[b-b9oeknh4wy] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
    }

/* ── Sub-nav segmented ── */
.trip-subnav[b-b9oeknh4wy] {
    display: inline-flex;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.trip-subnav-item[b-b9oeknh4wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--d-line);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .trip-subnav-item:last-child[b-b9oeknh4wy] {
        border-right: 0;
    }

    .trip-subnav-item:hover[b-b9oeknh4wy] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .trip-subnav-item:disabled[b-b9oeknh4wy] {
        opacity: .5;
        cursor: not-allowed;
    }

/* ── Card (soft) ── */
.dash-card[b-b9oeknh4wy] {
    background: var(--d-surface);
    border: 1px solid var(--d-line-2);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(28, 25, 23, 0.02);
    transition: border-color .15s;
}

    .dash-card:hover[b-b9oeknh4wy] {
        border-color: var(--d-line);
    }

.dash-card-hd[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, #fdfcfa 0%, var(--d-surface) 100%);
    border-bottom: 1px solid var(--d-line-2);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

    .dash-card-hd h3[b-b9oeknh4wy] {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.09em;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.dash-card-bd[b-b9oeknh4wy] {
    padding: 12px 14px;
}

/* ── Grid ── */
.trip-grid[b-b9oeknh4wy] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.trip-col-8[b-b9oeknh4wy] {
    grid-column: span 12;
}

.trip-col-4[b-b9oeknh4wy] {
    grid-column: span 12;
}

@media (min-width: 1024px) {
    .trip-col-8[b-b9oeknh4wy] {
        grid-column: span 8;
    }

    .trip-col-4[b-b9oeknh4wy] {
        grid-column: span 4;
    }
}

/* ── Info pairs ── */
.trip-info-grid[b-b9oeknh4wy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
}

@media (min-width: 640px) {
    .trip-info-grid[b-b9oeknh4wy] {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trip-info-lbl[b-b9oeknh4wy] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.trip-info-val[b-b9oeknh4wy] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
}

    .trip-info-val.accent[b-b9oeknh4wy] {
        color: var(--d-accent);
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.trip-meta-row[b-b9oeknh4wy] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 11px;
    color: var(--d-ink-3);
}

/* ── Side list rows ── */
.trip-side-stack[b-b9oeknh4wy] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trip-row[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12.5px;
}

    .trip-row:last-child[b-b9oeknh4wy] {
        border-bottom: 0;
    }

.trip-avatar[b-b9oeknh4wy] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid var(--d-line);
}

.trip-row-name[b-b9oeknh4wy] {
    flex: 1;
    min-width: 0;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-row-amt[b-b9oeknh4wy] {
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

.trip-svc-ico[b-b9oeknh4wy] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    flex-shrink: 0;
}

/* ── Attached-services summary rows ── */
.trip-attach-row[b-b9oeknh4wy] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background .12s;
}

    .trip-attach-row:hover[b-b9oeknh4wy] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: inherit;
    }

.trip-attach-main[b-b9oeknh4wy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trip-attach-line1[b-b9oeknh4wy] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.trip-attach-type[b-b9oeknh4wy] {
    font-weight: 500;
    color: var(--d-ink);
    white-space: nowrap;
}

.trip-attach-code[b-b9oeknh4wy] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-attach-detail[b-b9oeknh4wy] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .trip-svc-ico.is-booked[b-b9oeknh4wy] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

/* ── Status pill ── */
.trip-pill[b-b9oeknh4wy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    line-height: 1.5;
}

    .trip-pill.good[b-b9oeknh4wy] {
        background: color-mix(in srgb, var(--d-good) 12%, white);
        color: #166534;
        border-color: color-mix(in srgb, var(--d-good) 25%, white);
    }

    .trip-pill.warn[b-b9oeknh4wy] {
        background: color-mix(in srgb, var(--d-warn) 12%, white);
        color: #92400e;
        border-color: color-mix(in srgb, var(--d-warn) 25%, white);
    }

    .trip-pill.danger[b-b9oeknh4wy] {
        background: color-mix(in srgb, var(--d-danger) 10%, white);
        color: #991b1b;
        border-color: color-mix(in srgb, var(--d-danger) 25%, white);
    }

    .trip-pill.accent[b-b9oeknh4wy] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: color-mix(in srgb, var(--d-accent) 25%, white);
    }

/* Tiny ghost link button */
.trip-ghost-link[b-b9oeknh4wy] {
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
}

    .trip-ghost-link:hover[b-b9oeknh4wy] {
        color: var(--d-accent);
        background: var(--d-surface-2);
        text-decoration: none;
    }

.trip-icobtn[b-b9oeknh4wy] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--d-ink-4);
    border-radius: 6px;
    cursor: pointer;
}

    .trip-icobtn:hover[b-b9oeknh4wy] {
        color: var(--d-danger);
        background: #fef2f2;
    }

/* ── Approval steps (horizontal) ── */
.trip-steps[b-b9oeknh4wy] {
    display: flex;
    gap: 0;
    padding: 14px 16px;
    overflow-x: auto;
}

.trip-step[b-b9oeknh4wy] {
    flex: 1;
    min-width: 180px;
}

.trip-step-card[b-b9oeknh4wy] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px 12px;
    background: var(--d-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .trip-step-card.is-current[b-b9oeknh4wy] {
        border-color: color-mix(in srgb, var(--d-accent) 50%, white);
        background: var(--d-accent-soft);
    }

    .trip-step-card.is-done[b-b9oeknh4wy] {
        border-color: color-mix(in srgb, var(--d-good) 30%, white);
        background: color-mix(in srgb, var(--d-good) 8%, white);
    }

    .trip-step-card.is-bad[b-b9oeknh4wy] {
        border-color: color-mix(in srgb, var(--d-danger) 30%, white);
        background: color-mix(in srgb, var(--d-danger) 6%, white);
    }

.trip-step-hd[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trip-step-num[b-b9oeknh4wy] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--d-line);
}

.trip-step-card.is-current .trip-step-num[b-b9oeknh4wy] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
}

.trip-step-card.is-done .trip-step-num[b-b9oeknh4wy] {
    background: var(--d-good);
    color: #fff;
    border-color: transparent;
}

.trip-step-card.is-bad .trip-step-num[b-b9oeknh4wy] {
    background: var(--d-danger);
    color: #fff;
    border-color: transparent;
}

.trip-step-name[b-b9oeknh4wy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-step-meta[b-b9oeknh4wy] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.trip-step-tag[b-b9oeknh4wy] {
    font-size: 9.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
}

.trip-step-approver[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--d-ink);
}

.trip-step-time[b-b9oeknh4wy] {
    margin-left: auto;
    color: var(--d-ink-4);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

.trip-step-fall[b-b9oeknh4wy] {
    font-size: 10.5px;
    color: var(--d-warn);
    line-height: 1.3;
}

.trip-step-arrow[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    padding: 0 4px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}

/* ── Approval history ── */
.trip-history[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    padding: 12px 16px;
}

.trip-history-lbl[b-b9oeknh4wy] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    flex-shrink: 0;
}

.trip-history-item[b-b9oeknh4wy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--d-ink-2);
}

.trip-history-arrow[b-b9oeknh4wy] {
    color: var(--d-ink-4);
    flex-shrink: 0;
}

/* ── Realtime / alerts ── */
.trip-banner[b-b9oeknh4wy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 12.5px;
    background: var(--d-accent-soft);
    border: 1px solid color-mix(in srgb, var(--d-accent) 25%, white);
    color: #7c2d12;
}

.trip-banner-ok[b-b9oeknh4wy] {
    background: color-mix(in srgb, var(--d-good) 10%, white);
    border-color: color-mix(in srgb, var(--d-good) 25%, white);
    color: #166534;
}

.trip-banner-err[b-b9oeknh4wy] {
    background: color-mix(in srgb, var(--d-danger) 8%, white);
    border-color: color-mix(in srgb, var(--d-danger) 25%, white);
    color: #991b1b;
}

/* ── Modal ── */
.trip-modal-backdrop[b-b9oeknh4wy] {
    position: fixed;
    inset: 0;
    background: rgba(28,25,23,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.trip-modal[b-b9oeknh4wy] {
    background: var(--d-surface);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
    width: 100%;
    max-width: 480px;
    margin: 0 16px;
    overflow: hidden;
    border: 1px solid var(--d-line);
}

    .trip-modal.lg[b-b9oeknh4wy] {
        max-width: 560px;
    }

    .trip-modal.sm[b-b9oeknh4wy] {
        max-width: 380px;
    }

.trip-modal-hd[b-b9oeknh4wy] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .trip-modal-hd h3[b-b9oeknh4wy] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

.trip-modal-bd[b-b9oeknh4wy] {
    padding: 16px 18px;
}

.trip-modal-ft[b-b9oeknh4wy] {
    padding: 12px 18px;
    background: var(--d-bg);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--d-line-2);
}

/* ── Form ── */
.trip-label[b-b9oeknh4wy] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
    display: block;
}

.trip-input[b-b9oeknh4wy],
.trip-textarea[b-b9oeknh4wy],
.trip-select[b-b9oeknh4wy] {
    width: 100%;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--d-ink);
    background: var(--d-surface);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}

    .trip-input:focus[b-b9oeknh4wy],
    .trip-textarea:focus[b-b9oeknh4wy],
    .trip-select:focus[b-b9oeknh4wy] {
        outline: 0;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234,88,12,.12);
    }

.trip-textarea[b-b9oeknh4wy] {
    resize: vertical;
    min-height: 78px;
}

/* ── Booking-pick row ── */
.trip-pick-row[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}

    .trip-pick-row:hover[b-b9oeknh4wy] {
        background: var(--d-surface-2);
    }

    .trip-pick-row.is-selected[b-b9oeknh4wy] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 30%, white);
    }

.trip-pick-list[b-b9oeknh4wy] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 4px;
}

.trip-loading[b-b9oeknh4wy] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    color: var(--d-accent);
}

.trip-error-text[b-b9oeknh4wy] {
    font-size: 12px;
    color: var(--d-danger);
    margin-top: 8px;
}

.trip-not-found[b-b9oeknh4wy] {
    text-align: center;
    padding: 64px 16px;
    color: var(--d-ink-3);
}

    .trip-not-found a[b-b9oeknh4wy] {
        color: var(--d-accent);
        text-decoration: none;
        font-size: 12.5px;
    }

        .trip-not-found a:hover[b-b9oeknh4wy] {
            text-decoration: underline;
        }
/* /src/Features/Trips/Pages/Manager/TripEdit.razor.rz.scp.css */
/* ═══ Trip Edit — Manager Dashboard v4 theme ═══ */
.tripedit-root[b-7jfzyqfdmd] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

/* ── Hero ── */
.tripedit-hero[b-7jfzyqfdmd] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .tripedit-hero h1[b-7jfzyqfdmd] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.2;
    }

.tripedit-hero-code[b-7jfzyqfdmd] {
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink-3);
    font-size: 12px;
}

.tripedit-hero-actions[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.dash-btn[b-7jfzyqfdmd] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-7jfzyqfdmd] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-7jfzyqfdmd] {
        opacity: .55;
        cursor: not-allowed;
    }

.dash-btn-accent[b-7jfzyqfdmd] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-7jfzyqfdmd] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-7jfzyqfdmd] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-7jfzyqfdmd] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.dash-btn-sm[b-7jfzyqfdmd] {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
}

/* ── Card ── */
.dash-card[b-7jfzyqfdmd] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.dash-card-hd[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--d-line-2);
}

    .dash-card-hd h3[b-7jfzyqfdmd] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
    }

.dash-card-bd[b-7jfzyqfdmd] {
    padding: 14px 16px;
}

/* ── Grid ── */
.tripedit-grid[b-7jfzyqfdmd] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}

.tripedit-col-main[b-7jfzyqfdmd] {
    grid-column: span 12;
}

.tripedit-col-side[b-7jfzyqfdmd] {
    grid-column: span 12;
}

@media (min-width: 1024px) {
    .tripedit-col-main[b-7jfzyqfdmd] {
        grid-column: span 8;
    }

    .tripedit-col-side[b-7jfzyqfdmd] {
        grid-column: span 4;
        position: sticky;
        top: 16px;
    }
}

/* ── Form sections inside card ── */
.tripedit-section[b-7jfzyqfdmd] {
    padding: 16px 18px;
    border-bottom: 1px solid var(--d-line-2);
}

    .tripedit-section:last-of-type[b-7jfzyqfdmd] {
        border-bottom: 0;
    }

.tripedit-eyebrow[b-7jfzyqfdmd] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tripedit-form-title[b-7jfzyqfdmd] {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--d-line-2);
}

    .tripedit-form-title h2[b-7jfzyqfdmd] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: var(--d-ink);
    }

    .tripedit-form-title p[b-7jfzyqfdmd] {
        margin: 4px 0 0;
        font-size: 12px;
        color: var(--d-ink-3);
    }

/* ── Form controls ── */
.tripedit-field[b-7jfzyqfdmd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tripedit-label[b-7jfzyqfdmd] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

    .tripedit-label .req[b-7jfzyqfdmd] {
        color: var(--d-danger);
        margin-left: 2px;
    }

.tripedit-input[b-7jfzyqfdmd],
.tripedit-select[b-7jfzyqfdmd],
.tripedit-textarea[b-7jfzyqfdmd] {
    width: 100%;
    height: 38px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 0 12px;
    font-size: 14px;
    color: var(--d-ink);
    background: var(--d-surface);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.tripedit-textarea[b-7jfzyqfdmd] {
    height: auto;
    min-height: 72px;
    padding: 10px 12px;
    resize: vertical;
}

.tripedit-input:focus[b-7jfzyqfdmd],
.tripedit-select:focus[b-7jfzyqfdmd],
.tripedit-textarea:focus[b-7jfzyqfdmd] {
    outline: 0;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}

.tripedit-input.has-error[b-7jfzyqfdmd],
.tripedit-select.has-error[b-7jfzyqfdmd] {
    border-color: color-mix(in srgb, var(--d-danger) 50%, white);
    background: color-mix(in srgb, var(--d-danger) 4%, white);
}

.tripedit-err[b-7jfzyqfdmd] {
    font-size: 11.5px;
    color: var(--d-danger);
    margin: 0;
}

.tripedit-grid-2[b-7jfzyqfdmd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .tripedit-grid-2[b-7jfzyqfdmd] {
        grid-template-columns: 1fr 1fr;
    }
}

.tripedit-grid-3[b-7jfzyqfdmd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .tripedit-grid-3[b-7jfzyqfdmd] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Location row with arrow ── */
.tripedit-loc[b-7jfzyqfdmd] {
    position: relative;
}

.tripedit-loc-input[b-7jfzyqfdmd] {
    position: relative;
}

    .tripedit-loc-input .dot[b-7jfzyqfdmd] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        z-index: 2;
    }

    .tripedit-loc-input .dot.from[b-7jfzyqfdmd] {
        background: #fb923c;
    }

    .tripedit-loc-input .dot.to[b-7jfzyqfdmd] {
        background: var(--d-accent);
    }

    .tripedit-loc-input .tripedit-input[b-7jfzyqfdmd] {
        padding-left: 32px;
    }

/* ── Date picker wrap ── */
.tripedit-date-wrap[b-7jfzyqfdmd] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .tripedit-date-wrap:focus-within[b-7jfzyqfdmd] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234,88,12,.12);
    }

/* ── Service tiles ── */
.tripedit-svc-grid[b-7jfzyqfdmd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .tripedit-svc-grid[b-7jfzyqfdmd] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tripedit-svc[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-align: left;
    min-width: 0;
}

    .tripedit-svc:hover[b-7jfzyqfdmd] {
        border-color: color-mix(in srgb, var(--d-accent) 35%, var(--d-line));
        background: var(--d-surface-2);
    }

    .tripedit-svc.is-selected[b-7jfzyqfdmd] {
        border-color: color-mix(in srgb, var(--d-accent) 50%, white);
        background: var(--d-accent-soft);
        color: var(--d-ink);
    }

    .tripedit-svc.is-booked[b-7jfzyqfdmd] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 30%, white);
        color: #166534;
        cursor: not-allowed;
        opacity: .85;
    }

.tripedit-svc-ico[b-7jfzyqfdmd] {
    font-size: 16px;
    flex-shrink: 0;
}

.tripedit-svc-name[b-7jfzyqfdmd] {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripedit-svc-check[b-7jfzyqfdmd] {
    color: var(--d-accent);
    flex-shrink: 0;
}

/* ── Service detail panel ── */
.tripedit-detail[b-7jfzyqfdmd] {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.tripedit-detail-hd[b-7jfzyqfdmd] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Pill / badge ── */
.tripedit-pill[b-7jfzyqfdmd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 1px 2px rgba(234,88,12,.18);
}

.tripedit-pill.good[b-7jfzyqfdmd] {
    background: color-mix(in srgb, var(--d-good) 12%, white);
    color: #166534;
    border: 1px solid color-mix(in srgb, var(--d-good) 25%, white);
    box-shadow: none;
}

.tripedit-pill.lead[b-7jfzyqfdmd] {
    background: var(--d-accent-grad);
    color: #fff;
    padding: 1px 6px;
    font-size: 9.5px;
}

/* ── Participants ── */
.tripedit-search[b-7jfzyqfdmd] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tripedit-search-input[b-7jfzyqfdmd] {
    position: relative;
    flex: 1;
}

    .tripedit-search-input svg.ico[b-7jfzyqfdmd] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

    .tripedit-search-input .tripedit-input[b-7jfzyqfdmd] {
        padding-left: 34px;
    }

.tripedit-emp-list[b-7jfzyqfdmd] {
    margin-top: 10px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    max-height: 200px;
    overflow-y: auto;
    background: var(--d-surface);
}

.tripedit-emp-row[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12.5px;
    transition: background .12s;
}

    .tripedit-emp-row:last-child[b-7jfzyqfdmd] {
        border-bottom: 0;
    }

    .tripedit-emp-row:hover[b-7jfzyqfdmd] {
        background: var(--d-surface-2);
    }

    .tripedit-emp-row.disabled[b-7jfzyqfdmd] {
        opacity: .4;
    }

.tripedit-avatar[b-7jfzyqfdmd] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--d-line);
}

    .tripedit-avatar.accent[b-7jfzyqfdmd] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
    }

.tripedit-emp-meta[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.tripedit-emp-name[b-7jfzyqfdmd] {
    font-weight: 500;
    color: var(--d-ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripedit-emp-sub[b-7jfzyqfdmd] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tripedit-add-btn[b-7jfzyqfdmd] {
    background: transparent;
    border: 1px solid var(--d-line);
    color: var(--d-accent);
    font-weight: 600;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s;
}

    .tripedit-add-btn:hover[b-7jfzyqfdmd] {
        background: var(--d-accent-soft);
    }

.tripedit-empty[b-7jfzyqfdmd] {
    border: 1px dashed var(--d-line);
    border-radius: var(--d-r);
    padding: 20px 16px;
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.tripedit-part-list[b-7jfzyqfdmd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.tripedit-part-row[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.tripedit-icobtn[b-7jfzyqfdmd] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--d-ink-4);
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tripedit-icobtn:hover[b-7jfzyqfdmd] {
        background: var(--d-surface);
        color: var(--d-ink);
    }

    .tripedit-icobtn.is-leader[b-7jfzyqfdmd] {
        color: var(--d-accent);
    }

    .tripedit-icobtn.danger:hover[b-7jfzyqfdmd] {
        background: #fef2f2;
        color: var(--d-danger);
    }

/* ── Footer actions ── */
.tripedit-actions[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    flex-wrap: wrap;
}

/* ── Side: budget summary list ── */
.tripedit-side-list[b-7jfzyqfdmd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tripedit-svc-summary[b-7jfzyqfdmd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--d-line-2);
}

    .tripedit-svc-summary:last-child[b-7jfzyqfdmd] {
        border-bottom: 0;
    }

.tripedit-svc-summary-name[b-7jfzyqfdmd] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Banners ── */
.tripedit-banner-err[b-7jfzyqfdmd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, white);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, white);
    color: #991b1b;
    font-size: 12.5px;
}

    .tripedit-banner-err button[b-7jfzyqfdmd] {
        background: transparent;
        border: 0;
        color: inherit;
        opacity: .6;
        cursor: pointer;
        margin-left: auto;
    }

        .tripedit-banner-err button:hover[b-7jfzyqfdmd] {
            opacity: 1;
        }

/* ── Loading + not-found ── */
.tripedit-skeleton[b-7jfzyqfdmd] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.tripedit-skel-card[b-7jfzyqfdmd] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 18px;
    animation: tripedit-pulse-b-7jfzyqfdmd 1.4s ease-in-out infinite;
}

@keyframes tripedit-pulse-b-7jfzyqfdmd {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

.tripedit-skel-row[b-7jfzyqfdmd] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 6px;
    margin-bottom: 10px;
}

    .tripedit-skel-row.short[b-7jfzyqfdmd] {
        width: 35%;
    }

    .tripedit-skel-row.tall[b-7jfzyqfdmd] {
        height: 38px;
    }

.tripedit-not-found[b-7jfzyqfdmd] {
    text-align: center;
    padding: 64px 16px;
    color: var(--d-ink-3);
}

    .tripedit-not-found a[b-7jfzyqfdmd] {
        color: var(--d-accent);
        text-decoration: none;
        font-size: 12.5px;
        display: inline-block;
        margin-top: 6px;
    }

        .tripedit-not-found a:hover[b-7jfzyqfdmd] {
            text-decoration: underline;
        }
/* /src/Features/Trips/Pages/Manager/TripExpenses.razor.rz.scp.css */
/* ═══ Trip Expenses — Manager Dashboard v4 theme ═══ */
.texp-root[b-ozgv5ihg8u] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.texp-num[b-ozgv5ihg8u] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Hero */
.texp-hero[b-ozgv5ihg8u] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .texp-hero h1[b-ozgv5ihg8u] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

.texp-hero-meta[b-ozgv5ihg8u] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .texp-hero-meta .dot[b-ozgv5ihg8u] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.texp-hero-actions[b-ozgv5ihg8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Buttons */
.dash-btn[b-ozgv5ihg8u] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-ozgv5ihg8u] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-ozgv5ihg8u] {
        opacity: .55;
        cursor: not-allowed;
    }

.dash-btn-accent[b-ozgv5ihg8u] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-ozgv5ihg8u] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-ozgv5ihg8u] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-ozgv5ihg8u] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* KPI strip */
.texp-kpis[b-ozgv5ihg8u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.texp-kpi[b-ozgv5ihg8u] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .texp-kpi:last-child[b-ozgv5ihg8u] {
        border-right: 0;
    }

.texp-kpi-lbl[b-ozgv5ihg8u] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.texp-kpi-dot[b-ozgv5ihg8u] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
}

    .texp-kpi-dot.accent[b-ozgv5ihg8u] {
        background: var(--d-accent-grad);
    }

    .texp-kpi-dot.good[b-ozgv5ihg8u] {
        background: var(--d-good);
    }

    .texp-kpi-dot.warn[b-ozgv5ihg8u] {
        background: var(--d-warn);
    }

.texp-kpi-val[b-ozgv5ihg8u] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

    .texp-kpi-val.is-good[b-ozgv5ihg8u] {
        color: var(--d-good);
    }

    .texp-kpi-val.is-bad[b-ozgv5ihg8u] {
        color: var(--d-danger);
    }

@media (max-width: 768px) {
    .texp-kpis[b-ozgv5ihg8u] {
        grid-template-columns: 1fr;
    }

    .texp-kpi[b-ozgv5ihg8u] {
        border-right: 0;
        border-bottom: 1px solid var(--d-line);
    }

        .texp-kpi:last-child[b-ozgv5ihg8u] {
            border-bottom: 0;
        }
}

/* Card */
.dash-card[b-ozgv5ihg8u] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* Table */
.texp-tablewrap[b-ozgv5ihg8u] {
    overflow-x: auto;
}

.texp-tbl[b-ozgv5ihg8u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .texp-tbl thead th[b-ozgv5ihg8u] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .texp-tbl thead th.center[b-ozgv5ihg8u] {
            text-align: center;
        }

        .texp-tbl thead th.right[b-ozgv5ihg8u] {
            text-align: right;
        }

    .texp-tbl tbody td[b-ozgv5ihg8u] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .texp-tbl tbody tr:last-child td[b-ozgv5ihg8u] {
        border-bottom: 0;
    }

    .texp-tbl tbody tr:hover[b-ozgv5ihg8u] {
        background: var(--d-surface-2);
    }

    .texp-tbl td.center[b-ozgv5ihg8u] {
        text-align: center;
    }

    .texp-tbl td.right[b-ozgv5ihg8u] {
        text-align: right;
    }

    .texp-tbl .stt[b-ozgv5ihg8u] {
        color: var(--d-ink-4);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
    }

.texp-amt[b-ozgv5ihg8u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--d-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.texp-cat[b-ozgv5ihg8u] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    font-size: 11.5px;
    font-weight: 500;
}

.texp-desc[b-ozgv5ihg8u] {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--d-ink-2);
}

.texp-status[b-ozgv5ihg8u] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

    .texp-status .d[b-ozgv5ihg8u] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .texp-status.is-ok[b-ozgv5ihg8u] {
        background: color-mix(in srgb, var(--d-good) 12%, white);
        color: #166534;
    }

        .texp-status.is-ok .d[b-ozgv5ihg8u] {
            background: var(--d-good);
        }

    .texp-status.is-pending[b-ozgv5ihg8u] {
        background: color-mix(in srgb, var(--d-warn) 14%, white);
        color: #92400e;
    }

        .texp-status.is-pending .d[b-ozgv5ihg8u] {
            background: var(--d-warn);
        }

.texp-actions[b-ozgv5ihg8u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.texp-iconbtn[b-ozgv5ihg8u] {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    font-size: 11px;
    font-weight: 500;
    padding: 0 8px;
    width: auto;
    min-width: 28px;
}

    .texp-iconbtn:hover[b-ozgv5ihg8u] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .texp-iconbtn.danger:hover[b-ozgv5ihg8u] {
        background: #fef2f2;
        color: var(--d-danger);
    }

.texp-dash[b-ozgv5ihg8u] {
    color: var(--d-ink-4);
    font-size: 12px;
}

/* Empty */
.dash-empty[b-ozgv5ihg8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .dash-empty b[b-ozgv5ihg8u] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .dash-empty svg[b-ozgv5ihg8u] {
        color: var(--d-ink-4);
    }

.texp-empty-cta[b-ozgv5ihg8u] {
    margin-top: 6px;
    background: none;
    border: 0;
    color: var(--d-accent);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .12s;
}

    .texp-empty-cta:hover[b-ozgv5ihg8u] {
        background: var(--d-accent-soft);
    }

.texp-loading[b-ozgv5ihg8u] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 0;
}

/* Modal */
.texp-mask[b-ozgv5ihg8u] {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.55);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.texp-modal[b-ozgv5ihg8u] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 18px 48px rgba(28, 25, 23, 0.18);
    overflow: hidden;
}

.texp-modal-hd[b-ozgv5ihg8u] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .texp-modal-hd h3[b-ozgv5ihg8u] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--d-ink);
        letter-spacing: -0.02em;
    }

.texp-modal-bd[b-ozgv5ihg8u] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.texp-modal-ft[b-ozgv5ihg8u] {
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Form */
.texp-field[b-ozgv5ihg8u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.texp-field-grid[b-ozgv5ihg8u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 520px) {
    .texp-field-grid[b-ozgv5ihg8u] {
        grid-template-columns: 1fr 1fr;
    }
}

.texp-label[b-ozgv5ihg8u] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .texp-label .req[b-ozgv5ihg8u] {
        color: var(--d-danger);
        margin-left: 2px;
    }

.texp-input[b-ozgv5ihg8u],
.texp-select[b-ozgv5ihg8u],
.texp-textarea[b-ozgv5ihg8u] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
    width: 100%;
}

.texp-textarea[b-ozgv5ihg8u] {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 64px;
}

    .texp-input:focus[b-ozgv5ihg8u],
    .texp-select:focus[b-ozgv5ihg8u],
    .texp-textarea:focus[b-ozgv5ihg8u] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }
/* /src/Features/Trips/Pages/Manager/TripItinerary.razor.rz.scp.css */
/* ═══ Trip Itinerary — Manager Dashboard v4 theme ═══ */
.tit-root[b-xya0yu2nmk] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.tit-hero[b-xya0yu2nmk] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .tit-hero h1[b-xya0yu2nmk] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

.tit-hero-meta[b-xya0yu2nmk] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .tit-hero-meta .dot[b-xya0yu2nmk] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.tit-hero-actions[b-xya0yu2nmk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-btn[b-xya0yu2nmk] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-xya0yu2nmk] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

.dash-btn-accent[b-xya0yu2nmk] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-xya0yu2nmk] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-xya0yu2nmk] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-xya0yu2nmk] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.dash-card[b-xya0yu2nmk] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* Day group */
.tit-daycard[b-xya0yu2nmk] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.tit-day-hd[b-xya0yu2nmk] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--d-surface-2);
}

    .tit-day-hd h3[b-xya0yu2nmk] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.tit-day-count[b-xya0yu2nmk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
}

.tit-day-bd[b-xya0yu2nmk] {
    padding: 4px 16px 12px;
}

.tit-row[b-xya0yu2nmk] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--d-line-2);
    position: relative;
}

    .tit-row:last-child[b-xya0yu2nmk] {
        border-bottom: 0;
    }

.tit-rail[b-xya0yu2nmk] {
    width: 3px;
    align-self: stretch;
    background: var(--d-accent-grad);
    border-radius: 2px;
    flex-shrink: 0;
}

.tit-row-info[b-xya0yu2nmk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tit-row-act[b-xya0yu2nmk] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.tit-row-loc[b-xya0yu2nmk],
.tit-row-notes[b-xya0yu2nmk] {
    font-size: 12px;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tit-row-loc svg[b-xya0yu2nmk],
.tit-row-notes svg[b-xya0yu2nmk] {
    color: var(--d-ink-4);
    flex-shrink: 0;
}

.tit-row-del[b-xya0yu2nmk] {
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tit-row-del:hover[b-xya0yu2nmk] {
        background: #fef2f2;
        color: var(--d-danger);
    }

/* Empty */
.dash-empty[b-xya0yu2nmk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .dash-empty b[b-xya0yu2nmk] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .dash-empty svg[b-xya0yu2nmk] {
        color: var(--d-ink-4);
    }

.tit-empty-cta[b-xya0yu2nmk] {
    margin-top: 6px;
    background: none;
    border: 0;
    color: var(--d-accent);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .12s;
}

    .tit-empty-cta:hover[b-xya0yu2nmk] {
        background: var(--d-accent-soft);
    }

/* Modal */
.tit-mask[b-xya0yu2nmk] {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tit-modal[b-xya0yu2nmk] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(28, 25, 23, 0.18);
}

.tit-modal-hd[b-xya0yu2nmk] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--d-line);
}

    .tit-modal-hd h3[b-xya0yu2nmk] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--d-ink);
        letter-spacing: -0.02em;
    }

.tit-modal-bd[b-xya0yu2nmk] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tit-modal-ft[b-xya0yu2nmk] {
    padding: 12px 18px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.tit-field[b-xya0yu2nmk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tit-label[b-xya0yu2nmk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .tit-label .req[b-xya0yu2nmk] {
        color: var(--d-danger);
        margin-left: 2px;
    }

.tit-input[b-xya0yu2nmk],
.tit-textarea[b-xya0yu2nmk] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
    width: 100%;
}

.tit-textarea[b-xya0yu2nmk] {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 60px;
}

    .tit-input:focus[b-xya0yu2nmk],
    .tit-textarea:focus[b-xya0yu2nmk] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }
/* /src/Features/Trips/Pages/Manager/TripReportPage.razor.rz.scp.css */
/* ═══ Trip Report — Manager Dashboard v4 theme ═══ */
.trp-root[b-sfyeuk48zy] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.trp-hero[b-sfyeuk48zy] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .trp-hero h1[b-sfyeuk48zy] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

.trp-hero-meta[b-sfyeuk48zy] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .trp-hero-meta .dot[b-sfyeuk48zy] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.trp-hero-actions[b-sfyeuk48zy] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-btn[b-sfyeuk48zy] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-sfyeuk48zy] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-sfyeuk48zy] {
        opacity: .55;
        cursor: not-allowed;
    }

.dash-btn-accent[b-sfyeuk48zy] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-sfyeuk48zy] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-sfyeuk48zy] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-sfyeuk48zy] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* Card */
.dash-card[b-sfyeuk48zy] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.trp-formcard[b-sfyeuk48zy] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Banners */
.trp-banner[b-sfyeuk48zy] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 12.5px;
    border: 1px solid;
    line-height: 1.45;
}

    .trp-banner svg[b-sfyeuk48zy] {
        flex-shrink: 0;
        margin-top: 1px;
    }

    .trp-banner.is-success[b-sfyeuk48zy] {
        background: color-mix(in srgb, var(--d-good) 8%, white);
        border-color: color-mix(in srgb, var(--d-good) 24%, white);
        color: #166534;
    }

    .trp-banner.is-warn[b-sfyeuk48zy] {
        background: color-mix(in srgb, var(--d-warn) 10%, white);
        border-color: color-mix(in srgb, var(--d-warn) 28%, white);
        color: #92400e;
    }

    .trp-banner.is-error[b-sfyeuk48zy] {
        background: color-mix(in srgb, var(--d-danger) 8%, white);
        border-color: color-mix(in srgb, var(--d-danger) 24%, white);
        color: #991b1b;
    }

/* Field */
.trp-field[b-sfyeuk48zy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trp-label[b-sfyeuk48zy] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .trp-label .req[b-sfyeuk48zy] {
        color: var(--d-danger);
        margin-left: 2px;
    }

.trp-input[b-sfyeuk48zy],
.trp-textarea[b-sfyeuk48zy] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
    width: 100%;
}

.trp-textarea[b-sfyeuk48zy] {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

    .trp-input:focus[b-sfyeuk48zy],
    .trp-textarea:focus[b-sfyeuk48zy] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
    }

    .trp-input:disabled[b-sfyeuk48zy],
    .trp-textarea:disabled[b-sfyeuk48zy] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        cursor: not-allowed;
    }

/* Footer actions */
.trp-actions[b-sfyeuk48zy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--d-line-2);
}
/* /src/Features/Trips/Pages/Manager/TripsIndex.razor.rz.scp.css */
/* ═══ Trips Index — Manager Dashboard v4 theme ═══ */
.trips-root[b-uzytgwvkxl] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.trips-num[b-uzytgwvkxl] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Hero ── */
.trips-hero[b-uzytgwvkxl] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .trips-hero h1[b-uzytgwvkxl] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .trips-hero h1 em[b-uzytgwvkxl] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.trips-hero-meta[b-uzytgwvkxl] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .trips-hero-meta .dot[b-uzytgwvkxl] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.trips-hero-actions[b-uzytgwvkxl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Buttons ── */
.dash-btn[b-uzytgwvkxl] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-uzytgwvkxl] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .dash-btn:disabled[b-uzytgwvkxl] {
        opacity: .55;
        cursor: not-allowed;
    }

.dash-btn-accent[b-uzytgwvkxl] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(234,88,12,.18), 0 4px 12px -2px rgba(234,88,12,.22);
}

    .dash-btn-accent:hover[b-uzytgwvkxl] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.dash-btn-ghost[b-uzytgwvkxl] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .dash-btn-ghost:hover[b-uzytgwvkxl] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* ── KPI strip ── */
.trips-kpis[b-uzytgwvkxl] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.trips-kpi[b-uzytgwvkxl] {
    padding: 16px 18px 14px;
    border-right: 1px solid var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .trips-kpi:last-child[b-uzytgwvkxl] {
        border-right: 0;
    }

.trips-kpi-lbl[b-uzytgwvkxl] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trips-kpi-dot[b-uzytgwvkxl] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
}

    .trips-kpi-dot.accent[b-uzytgwvkxl] {
        background: var(--d-accent-grad);
    }

    .trips-kpi-dot.good[b-uzytgwvkxl] {
        background: var(--d-good);
    }

    .trips-kpi-dot.warn[b-uzytgwvkxl] {
        background: var(--d-warn);
    }

.trips-kpi-val[b-uzytgwvkxl] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--d-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .trips-kpis[b-uzytgwvkxl] {
        grid-template-columns: repeat(2, 1fr);
    }

    .trips-kpi:nth-child(2)[b-uzytgwvkxl] {
        border-right: 0;
    }

    .trips-kpi:nth-child(1)[b-uzytgwvkxl], .trips-kpi:nth-child(2)[b-uzytgwvkxl] {
        border-bottom: 1px solid var(--d-line);
    }
}

/* ── Card ── */
.dash-card[b-uzytgwvkxl] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ── Tabs ── */
.trips-tabs[b-uzytgwvkxl] {
    display: inline-flex;
    gap: 2px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 3px;
    overflow-x: auto;
}

.trips-tab[b-uzytgwvkxl] {
    background: transparent;
    border: 0;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

    .trips-tab:hover[b-uzytgwvkxl] {
        color: var(--d-ink);
        background: var(--d-surface-2);
    }

    .trips-tab.is-active[b-uzytgwvkxl] {
        background: var(--d-accent-grad);
        color: #fff;
        box-shadow: 0 1px 2px rgba(234,88,12,.18);
    }

/* ── Filter bar ── */
.trips-filterbar[b-uzytgwvkxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trips-search[b-uzytgwvkxl] {
    width: 240px;
}

/* ── Toolbar wrapper ── */
.trips-toolbar[b-uzytgwvkxl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trips-toolbar-end[b-uzytgwvkxl] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Table ── */
.trips-tablewrap[b-uzytgwvkxl] {
    overflow-x: auto;
}

.trips-tbl[b-uzytgwvkxl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .trips-tbl thead th[b-uzytgwvkxl] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: .08em;
        text-align: left;
        padding: 10px 16px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .trips-tbl thead th.center[b-uzytgwvkxl] {
            text-align: center;
        }

        .trips-tbl thead th.right[b-uzytgwvkxl] {
            text-align: right;
        }

    .trips-tbl tbody td[b-uzytgwvkxl] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .trips-tbl tbody tr:last-child td[b-uzytgwvkxl] {
        border-bottom: 0;
    }

    .trips-tbl tbody tr:hover[b-uzytgwvkxl] {
        background: var(--d-surface-2);
    }

    .trips-tbl td.center[b-uzytgwvkxl] {
        text-align: center;
    }

    .trips-tbl td.right[b-uzytgwvkxl] {
        text-align: right;
    }

    .trips-tbl .stt[b-uzytgwvkxl] {
        color: var(--d-ink-4);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
    }

.trips-code[b-uzytgwvkxl] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
    text-decoration: none;
    display: block;
}

    .trips-code:hover[b-uzytgwvkxl] {
        text-decoration: underline;
        color: var(--d-accent);
    }

.trips-name[b-uzytgwvkxl] {
    font-weight: 500;
    color: var(--d-ink);
    display: block;
    margin-top: 2px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trips-num-cell[b-uzytgwvkxl] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--d-ink);
    font-weight: 500;
}

.trips-muted[b-uzytgwvkxl] {
    color: var(--d-ink-3);
    font-size: 12px;
}

/* ── Action icons ── */
.trips-actions[b-uzytgwvkxl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.trips-icobtn[b-uzytgwvkxl] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    border-radius: 7px;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
}

    .trips-icobtn:hover[b-uzytgwvkxl] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .trips-icobtn.danger:hover[b-uzytgwvkxl] {
        background: #fef2f2;
        color: var(--d-danger);
    }

/* ── Empty / alerts ── */
.dash-empty[b-uzytgwvkxl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .dash-empty b[b-uzytgwvkxl] {
        color: var(--d-ink);
        font-weight: 500;
        font-size: 14px;
    }

    .dash-empty small[b-uzytgwvkxl] {
        font-size: 12px;
    }

    .dash-empty svg[b-uzytgwvkxl] {
        margin-bottom: 4px;
        color: var(--d-ink-4);
    }

.trips-alert-success[b-uzytgwvkxl] {
    background: color-mix(in srgb, var(--d-good) 10%, white);
    border: 1px solid color-mix(in srgb, var(--d-good) 25%, white);
    color: #166534;
    padding: 10px 14px;
    border-radius: var(--d-r);
    font-size: 12.5px;
}
/* /src/Features/Visa/Pages/Ca/CaVisaApplication.razor.rz.scp.css */
/* /ca/visa — chuẩn nm token-only: head + card quốc gia (grid ảnh) + card hồ sơ/yêu cầu (NmTabs + bảng). */
.nm-list-page[b-puknexa5fi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-puknexa5fi] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-puknexa5fi] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cavai-title[b-puknexa5fi] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-puknexa5fi] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-puknexa5fi] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-puknexa5fi] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar lọc ── */
/* NmInput/NmSelect mặc định giãn 100% → khoá bề rộng để nằm chung 1 hàng toolbar */
[b-puknexa5fi] .cavai-toolbar .nm-input-wrap { width: 300px; flex: 0 0 auto; }
[b-puknexa5fi] .cavai-toolbar .nm-select-wrap { width: 210px; flex: 0 0 auto; }

/* ── Card ── */
[b-puknexa5fi] .cavai-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cavai-card-ico[b-puknexa5fi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cavai-card-title[b-puknexa5fi] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cavai-card-count[b-puknexa5fi] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cavai-card-hint[b-puknexa5fi] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }
.cavai-card-body[b-puknexa5fi] { padding: 14px 16px; }
.cavai-loading[b-puknexa5fi] { display: flex; flex-direction: column; gap: 10px; }
.cavai-muted[b-puknexa5fi] { color: var(--nm-muted); }

/* Nền "trang hộ chiếu" cho khu danh mục quốc gia: tem (nền --nm-surface) mới nổi lên được.
   --cavst-bg là màu khấc răng cưa của tem — PHẢI trùng đúng nền này, lệch là lộ hình bán nguyệt. */
.cavai-card-body--paper[b-puknexa5fi] {
    --cavst-bg: var(--nm-surface-2);
    background: var(--cavst-bg);
}

/* ── Grid quốc gia — item là "tem visa", đồng bộ với catalog khách lẻ /visa ── */
.cavai-grid[b-puknexa5fi] {
    display: grid;
    /* Đồng bộ cỡ item với /ca/tours (catos-grid): 250px desktop / 190px mobile */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

/* Lớp bọc: <a> cho quốc gia, <button> cho thẻ gửi yêu cầu → reset để 2 loại trông như nhau */
.cavai-item[b-puknexa5fi] {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--nm-r-card);
}
.cavai-item:hover[b-puknexa5fi] { text-decoration: none; color: inherit; }
.cavai-item:focus-visible[b-puknexa5fi] { outline: 2px solid var(--nm-brand-500); outline-offset: 3px; }

/* ── Tem visa ── */
.cavst[b-puknexa5fi] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    padding: 14px 16px;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.cavai-item:hover .cavst[b-puknexa5fi] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--nm-brand-500) 12%, transparent);
    transform: translateY(-2px);
}

/* Đầu tem: chip cờ + mã ISO / châu lục */
.cavst__head[b-puknexa5fi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.cavst__flag[b-puknexa5fi] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 26px;
    line-height: 1;
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    border-radius: 11px;
    flex-shrink: 0;
}
.cavst__flag--ask[b-puknexa5fi] { font-size: 18px; color: var(--nm-brand-700); }

.cavst__codes[b-puknexa5fi] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}
.cavst__iso[b-puknexa5fi] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--nm-ink-2);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    padding: 1px 6px;
    border-radius: 6px;
}
.cavst__region[b-puknexa5fi] { font-size: 11px; color: var(--nm-muted); }

/* Tên nước + tên ở ngôn ngữ còn lại */
.cavst__name[b-puknexa5fi] {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--nm-ink);
}
.cavst__name-alt[b-puknexa5fi] { margin: 2px 0 0; font-size: 11.5px; color: var(--nm-muted); }
.cavst__ask-body[b-puknexa5fi] { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--nm-muted); }

/* Vạch răng cưa: đường xé của tem + 2 khấc tròn hai bên (màu nền khu danh mục).
   ★ Khấc là miếng BỊ CẮN RA khỏi mép tem: tô đúng màu nền khu, tâm đặt trùng đường viền thẻ.
   CẤM thêm `border` cho hình tròn — có viền là thành vòng tròn kín nổi trên mép thẻ (ra hai cái
   chấm) chứ không còn là vết cắn. Giữ khớp với `.vst__perf` của trang công khai /visa. */
.cavst__perf[b-puknexa5fi] {
    position: relative;
    border-top: 2px dashed var(--nm-border);
    margin: 12px -16px 10px;
}
.cavst__perf[b-puknexa5fi]::before,
.cavst__perf[b-puknexa5fi]::after {
    content: "";
    position: absolute;
    top: -7px; /* tâm trùng đường đứt 2px */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cavst-bg, var(--nm-surface-2));
}
/* -9px: tâm hình tròn ra đúng đường viền 1px của thẻ để cắn đứt cả viền */
.cavst__perf[b-puknexa5fi]::before { left: -9px; }
.cavst__perf[b-puknexa5fi]::after { right: -9px; }

/* ── Giá ── */
.cavst__pricerow[b-puknexa5fi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.cavst__price[b-puknexa5fi] { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.cavst__price-label[b-puknexa5fi] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--nm-muted);
}
.cavst__price-amount[b-puknexa5fi] {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--nm-brand-700);
}
.cavst__price-unit[b-puknexa5fi] { font-size: 11px; font-weight: 600; color: var(--nm-ink-2); }
.cavst__price-na[b-puknexa5fi] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); }

/* ── Chân tem: MRZ trang trí + CTA ── */
.cavst__foot[b-puknexa5fi] {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cavst__mrz[b-puknexa5fi] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--nm-ink);
    opacity: .26;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}
.cavst__cta[b-puknexa5fi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-brand-700);
}
.cavst__cta-arrow[b-puknexa5fi] { font-size: 11px; transition: transform .12s ease; }
.cavai-item:hover .cavst__cta-arrow[b-puknexa5fi] { transform: translateX(3px); }

/* Tem "chưa dán" — thẻ gửi yêu cầu tư vấn */
.cavst--ask[b-puknexa5fi] { border-style: dashed; background: var(--nm-surface); }
.cavai-item--ask:hover .cavst[b-puknexa5fi] { background: var(--nm-brand-50); }
.cavai-item--ask:hover .cavst__perf[b-puknexa5fi]::before,
.cavai-item--ask:hover .cavst__perf[b-puknexa5fi]::after { background: var(--cavst-bg, var(--nm-surface-2)); }

@media (prefers-reduced-motion: reduce) {
    .cavst[b-puknexa5fi], .cavst__cta-arrow[b-puknexa5fi] { transition: none; }
    .cavai-item:hover .cavst[b-puknexa5fi] { transform: none; }
    .cavai-item:hover .cavst__cta-arrow[b-puknexa5fi] { transform: none; }
}

/* ── Tabs + bảng (DataGrid) ── */
.cavai-tab-body[b-puknexa5fi] { padding-top: 12px; }

.cavai-code-link[b-puknexa5fi] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-brand-700);
    text-decoration: none;
}
.cavai-code-link:hover[b-puknexa5fi] { text-decoration: underline; }

.cell-amount[b-puknexa5fi] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--nm-ink);
    white-space: nowrap;
}

/* ── Modal form (NmFormGrid + NmField) ── */
.cavai-form[b-puknexa5fi] { display: flex; flex-direction: column; gap: 12px; }
.cavai-form-section[b-puknexa5fi] {
    display: block;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.cavai-form-hint[b-puknexa5fi] { margin: 0; font-size: 11.5px; color: var(--nm-muted); }

@media (max-width: 640px) {
    .nm-list-page[b-puknexa5fi] { padding: 16px 14px 22px; }
    [b-puknexa5fi] .cavai-toolbar .nm-input-wrap,
    [b-puknexa5fi] .cavai-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
    .cavai-grid[b-puknexa5fi] { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .cavst[b-puknexa5fi] { padding: 12px 14px; }
    .cavst__perf[b-puknexa5fi] { margin-left: -14px; margin-right: -14px; }
}
/* /src/Features/Visa/Pages/Ca/CaVisaApplicationDetail.razor.rz.scp.css */
/* CaVisaApplicationDetail — Manager Dashboard v4 theme */
.cavad-root[b-p27nnrv2c8] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100vh;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cavad-loading[b-p27nnrv2c8] { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.cavad-spinner[b-p27nnrv2c8] { width: 28px; height: 28px; border: 3px solid var(--d-accent); border-top-color: transparent; border-radius: 50%; animation: cavad-spin-b-p27nnrv2c8 1s linear infinite; }
@keyframes cavad-spin-b-p27nnrv2c8 { to { transform: rotate(360deg); } }

.cavad-card[b-p27nnrv2c8] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); }
.cavad-card-pad[b-p27nnrv2c8] { padding: 16px 18px; }
.cavad-empty[b-p27nnrv2c8] { padding: 40px 16px; text-align: center; color: var(--d-ink-3); }
.cavad-empty a[b-p27nnrv2c8] { color: var(--d-accent); text-decoration: none; font-weight: 500; }
.cavad-empty a:hover[b-p27nnrv2c8] { text-decoration: underline; }

.cavad-crumb[b-p27nnrv2c8] { display: flex; align-items: center; gap: 8px; color: var(--d-ink-3); font-size: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-line); }
.cavad-crumb a[b-p27nnrv2c8] { color: var(--d-ink-3); text-decoration: none; transition: color .12s; }
.cavad-crumb a:hover[b-p27nnrv2c8] { color: var(--d-accent); }
.cavad-crumb .now[b-p27nnrv2c8] { color: var(--d-ink); font-weight: 500; }

.cavad-hero[b-p27nnrv2c8] { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.cavad-hero-row[b-p27nnrv2c8] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cavad-mono[b-p27nnrv2c8] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--d-ink-3); }
.cavad-tag[b-p27nnrv2c8] { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.cavad-tag.info[b-p27nnrv2c8] { background: #e0f2fe; color: #0369a1; }
.cavad-tag.warn[b-p27nnrv2c8] { background: var(--d-warn-soft); color: #92400e; }
.cavad-tag.accent[b-p27nnrv2c8] { background: var(--d-accent-soft); color: var(--d-accent); }
.cavad-tag.purple[b-p27nnrv2c8] { background: #ede9fe; color: #6d28d9; }
.cavad-tag.good[b-p27nnrv2c8] { background: var(--d-good-soft); color: #166534; }
.cavad-tag.danger[b-p27nnrv2c8] { background: #fee2e2; color: #b91c1c; }
.cavad-tag.draft[b-p27nnrv2c8] { background: var(--d-surface-2); color: var(--d-ink-2); }
.cavad-h1[b-p27nnrv2c8] { margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
.cavad-sub[b-p27nnrv2c8] { font-size: 14px; color: var(--d-ink-3); margin: 0; }
.cavad-meta[b-p27nnrv2c8] { font-size: 11.5px; color: var(--d-ink-4); margin: 0; }

.cavad-actions[b-p27nnrv2c8] { display: flex; gap: 8px; align-items: center; }
.cavad-btn[b-p27nnrv2c8] { height: 36px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); cursor: pointer; transition: background .12s; }
.cavad-btn:hover[b-p27nnrv2c8] { background: var(--d-surface-2); }
.cavad-btn-danger[b-p27nnrv2c8] { border-color: #fecaca; color: var(--d-danger); }
.cavad-btn-danger:hover[b-p27nnrv2c8] { background: #fef2f2; }

.cavad-alert[b-p27nnrv2c8] { padding: 12px 14px; border-radius: var(--d-r); font-size: 14px; }
.cavad-alert.accent[b-p27nnrv2c8] { background: var(--d-accent-soft); border: 1px solid #ffe0c7; color: var(--d-accent); }
.cavad-alert.purple[b-p27nnrv2c8] { background: #f5f3ff; border: 1px solid #ddd6fe; color: #6d28d9; }
.cavad-alert.danger[b-p27nnrv2c8] { background: #fef2f2; border: 1px solid #fecaca; color: var(--d-danger); }
.cavad-alert.good[b-p27nnrv2c8] { background: var(--d-good-soft); border: 1px solid #bbf7d0; color: #166534; }
.cavad-alert b[b-p27nnrv2c8] { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

.cavad-card-hd[b-p27nnrv2c8] { padding: 12px 16px; border-bottom: 1px solid var(--d-line-2); display: flex; align-items: center; gap: 8px; }
.cavad-card-hd h3[b-p27nnrv2c8] { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; }

.cavad-applicants[b-p27nnrv2c8] { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
@media (min-width: 768px) { .cavad-applicants[b-p27nnrv2c8] { grid-template-columns: repeat(2, 1fr); } }

.cavad-applicant[b-p27nnrv2c8] { border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 12px 14px; }
.cavad-applicant-hd[b-p27nnrv2c8] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--d-line-2); }
.cavad-applicant-num[b-p27nnrv2c8] { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--d-accent-soft); color: var(--d-ink); font-size: 11px; font-weight: 700; }
.cavad-applicant-name[b-p27nnrv2c8] { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.cavad-fields[b-p27nnrv2c8] { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 12px; }
.cavad-fields .lbl[b-p27nnrv2c8] { color: var(--d-ink-3); }
.cavad-fields .val[b-p27nnrv2c8] { color: var(--d-ink); font-weight: 500; }

.cavad-result[b-p27nnrv2c8] { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--d-line-2); }
.cavad-result.good[b-p27nnrv2c8] { color: #166534; }
.cavad-result.danger[b-p27nnrv2c8] { color: var(--d-danger); }
.cavad-result b[b-p27nnrv2c8] { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 4px; }

.cavad-grid2[b-p27nnrv2c8] { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .cavad-grid2[b-p27nnrv2c8] { grid-template-columns: repeat(2, 1fr); } }

.cavad-kv[b-p27nnrv2c8] { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.cavad-kv-row[b-p27nnrv2c8] { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cavad-kv-row .lbl[b-p27nnrv2c8] { color: var(--d-ink-3); }
.cavad-kv-row .val[b-p27nnrv2c8] { color: var(--d-ink); font-weight: 500; text-align: right; }

.cavad-doc[b-p27nnrv2c8] { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--d-line-2); font-size: 14px; }
.cavad-doc:last-child[b-p27nnrv2c8] { border-bottom: 0; }
.cavad-doc-info[b-p27nnrv2c8] { display: flex; align-items: center; gap: 10px; }
.cavad-doc-info .ico[b-p27nnrv2c8] { font-size: 18px; }
.cavad-doc-name[b-p27nnrv2c8] { font-size: 14px; font-weight: 500; color: var(--d-ink); }
.cavad-doc-meta[b-p27nnrv2c8] { font-size: 11px; color: var(--d-ink-4); }

.cavad-back[b-p27nnrv2c8] { display: inline-flex; align-items: center; gap: 6px; color: var(--d-accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.cavad-back:hover[b-p27nnrv2c8] { text-decoration: underline; }
/* /src/Features/Visa/Pages/Ca/CaVisaInquiryDetail.razor.rz.scp.css */
.cavid-page[b-sd6gwod4my] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-good-soft: #dcfce7;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;
    background: var(--d-bg);
    min-height: 100vh;
    padding: 20px 28px 60px;
    color: var(--d-ink);
}

.cavid-top[b-sd6gwod4my] { margin-bottom: 14px; }
.cavid-back[b-sd6gwod4my] { display: inline-flex; align-items: center; gap: 6px; color: var(--d-ink-3); font-size: 14px; text-decoration: none; }
.cavid-back:hover[b-sd6gwod4my] { color: var(--d-accent); text-decoration: none; }

.cavid-state[b-sd6gwod4my] { padding: 60px 16px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); text-align: center; color: var(--d-ink-3); font-size: 14px; }

.cavid-head[b-sd6gwod4my] { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding: 18px 22px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); margin-bottom: 18px; }
.cavid-code[b-sd6gwod4my] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--d-accent); font-weight: 700; letter-spacing: 0.04em; }
.cavid-head h1[b-sd6gwod4my] { margin: 4px 0 4px; font-family: 'Inter Tight','Inter',sans-serif; font-size: 22px; font-weight: 700; color: var(--d-ink); letter-spacing: -0.02em; line-height: 1.2; }
.cavid-sub[b-sd6gwod4my] { font-size: 12.5px; color: var(--d-ink-3); }

.cavid-status-wrap[b-sd6gwod4my] { display: flex; align-items: center; gap: 10px; }
.cavid-status[b-sd6gwod4my] { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cavid-status-submitted[b-sd6gwod4my] { background: #e0f2fe; color: #0369a1; }
.cavid-status-processing[b-sd6gwod4my] { background: var(--d-warn-soft); color: #92400e; }
.cavid-status-additionalrequired[b-sd6gwod4my] { background: var(--d-accent-soft); color: var(--d-accent); }
.cavid-status-approved[b-sd6gwod4my] { background: var(--d-good-soft); color: #166534; }
.cavid-status-cancelled[b-sd6gwod4my], .cavid-status-rejected[b-sd6gwod4my] { background: var(--d-danger-soft); color: #b91c1c; }
.cavid-status-draft[b-sd6gwod4my] { background: var(--d-surface-2); color: var(--d-ink-3); }

.cavid-btn-ghost[b-sd6gwod4my] { background: transparent; border: 1px solid var(--d-line); color: var(--d-ink-2); padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cavid-btn-ghost:hover[b-sd6gwod4my] { border-color: var(--d-danger); color: var(--d-danger); background: var(--d-danger-soft); }
.cavid-btn-ghost:disabled[b-sd6gwod4my] { opacity: .55; cursor: not-allowed; }

.cavid-grid[b-sd6gwod4my] { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 880px) { .cavid-grid[b-sd6gwod4my] { grid-template-columns: repeat(2, 1fr); } }

.cavid-card[b-sd6gwod4my] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 18px 22px; }
.cavid-card-title[b-sd6gwod4my] { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-ink-3); margin-bottom: 12px; }

.cavid-dl[b-sd6gwod4my] { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 12px; margin: 0; font-size: 13.5px; }
.cavid-dl dt[b-sd6gwod4my] { color: var(--d-ink-3); font-weight: 500; }
.cavid-dl dd[b-sd6gwod4my] { margin: 0; color: var(--d-ink); font-weight: 600; }

.cavid-notes-block[b-sd6gwod4my] { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--d-line); }
.cavid-notes-label[b-sd6gwod4my] { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-ink-3); margin-bottom: 4px; }
.cavid-notes-body[b-sd6gwod4my] { font-size: 13.5px; color: var(--d-ink-2); line-height: 1.55; white-space: pre-wrap; }

.cavid-response[b-sd6gwod4my] { margin-top: 16px; border-left: 3px solid var(--d-accent); }
.cavid-response-meta[b-sd6gwod4my] { font-size: 12px; color: var(--d-ink-3); margin-bottom: 8px; }
.cavid-response-body[b-sd6gwod4my] { font-size: 14px; color: var(--d-ink-2); line-height: 1.6; white-space: pre-wrap; }
/* /src/Features/Visa/Pages/Manager/VisaApplicationDetail.razor.rz.scp.css */
/* VisaApplicationDetail — Manager Dashboard v4 theme */
.vad-root[b-ldrkkvpmrx] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    min-height: 100vh;
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 14px;
}

.vad-hero[b-ldrkkvpmrx] {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -18px -22px 0;
    padding: 12px 22px;
    background: linear-gradient(180deg, #fdfcfa 0%, #faf8f3 100%);
    border-bottom: 1px solid var(--d-line-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(28, 25, 23, 0.02);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.vad-hero h1[b-ldrkkvpmrx] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); line-height: 1.2; }
    .vad-hero h1 em[b-ldrkkvpmrx] { font-style: normal; color: var(--d-ink-3); font-weight: 500; margin: 0 6px; font-size: 14px; }
.vad-hero p[b-ldrkkvpmrx] { margin: 3px 0 0; font-size: 11.5px; color: var(--d-ink-3); }

.vad-btn[b-ldrkkvpmrx] { height: 36px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 12.5px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
    .vad-btn:hover[b-ldrkkvpmrx] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.vad-btn-accent[b-ldrkkvpmrx] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
    .vad-btn-accent:hover[b-ldrkkvpmrx] { background: var(--d-accent-grad-hover); color: #fff; }
.vad-btn-good[b-ldrkkvpmrx] { background: var(--d-good); color: #fff; border-color: transparent; }
    .vad-btn-good:hover[b-ldrkkvpmrx] { background: #15803d; color: #fff; }
.vad-btn-info[b-ldrkkvpmrx] { background: #0369a1; color: #fff; border-color: transparent; }
    .vad-btn-info:hover[b-ldrkkvpmrx] { background: #075985; color: #fff; }
.vad-btn-danger[b-ldrkkvpmrx] { background: var(--d-danger); color: #fff; border-color: transparent; }
    .vad-btn-danger:hover[b-ldrkkvpmrx] { background: #b91c1c; color: #fff; }
.vad-btn-warn[b-ldrkkvpmrx] { background: var(--d-surface); color: var(--d-warn); border-color: #fcd34d; }
    .vad-btn-warn:hover[b-ldrkkvpmrx] { background: var(--d-warn-soft); color: var(--d-warn); }
.vad-btn-violet[b-ldrkkvpmrx] { background: var(--d-surface); color: #6d28d9; border-color: #ddd6fe; }
    .vad-btn-violet:hover[b-ldrkkvpmrx] { background: #f5f3ff; }

.vad-loader[b-ldrkkvpmrx] { display: flex; justify-content: center; padding: 56px 0; color: var(--d-accent); }

.vad-breadcrumb[b-ldrkkvpmrx] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--d-ink-3); }
    .vad-breadcrumb a[b-ldrkkvpmrx] { color: var(--d-ink-3); text-decoration: none; }
    .vad-breadcrumb a:hover[b-ldrkkvpmrx] { color: var(--d-accent); }
    .vad-breadcrumb .cur[b-ldrkkvpmrx] { color: var(--d-ink); font-weight: 500; }

.vad-card[b-ldrkkvpmrx] {
    background: var(--d-surface);
    border: 1px solid var(--d-line-2);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 0 rgba(28, 25, 23, 0.02);
    transition: border-color .15s;
}
.vad-card:hover[b-ldrkkvpmrx] { border-color: var(--d-line); }
.vad-card-tight[b-ldrkkvpmrx] { padding: 12px 14px; }

.vad-status[b-ldrkkvpmrx] { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.vad-status.draft[b-ldrkkvpmrx] { background: var(--d-surface-2); color: var(--d-ink-3); }
.vad-status.submitted[b-ldrkkvpmrx] { background: #e0f2fe; color: #0369a1; }
.vad-status.processing[b-ldrkkvpmrx] { background: var(--d-warn-soft); color: var(--d-warn); }
.vad-status.additional[b-ldrkkvpmrx] { background: var(--d-accent-soft); color: var(--d-accent); }
.vad-status.interview[b-ldrkkvpmrx] { background: #f5f3ff; color: #6d28d9; }
.vad-status.approved[b-ldrkkvpmrx] { background: var(--d-good-soft); color: var(--d-good); }
.vad-status.rejected[b-ldrkkvpmrx] { background: #fee2e2; color: var(--d-danger); }
.vad-status.gray[b-ldrkkvpmrx] { background: var(--d-surface-2); color: var(--d-ink-3); }

.vad-submitter[b-ldrkkvpmrx] { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.vad-submitter.guest[b-ldrkkvpmrx] { background: var(--d-surface-2); color: var(--d-ink-3); }
.vad-submitter.retail[b-ldrkkvpmrx] { background: #e0f2fe; color: #0369a1; }
.vad-submitter.corp[b-ldrkkvpmrx] { background: var(--d-good-soft); color: var(--d-good); }
.vad-submitter.agent[b-ldrkkvpmrx] { background: #f5f3ff; color: #6d28d9; }

.vad-head-title[b-ldrkkvpmrx] { display: flex; flex-direction: column; gap: 4px; }
    .vad-head-title .row1[b-ldrkkvpmrx] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .vad-head-title .code[b-ldrkkvpmrx] { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--d-ink-4); }
    .vad-head-title h1.name[b-ldrkkvpmrx] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); }
    .vad-head-title .meta[b-ldrkkvpmrx] { font-size: 12.5px; color: var(--d-ink-3); }
    .vad-head-title .sub[b-ldrkkvpmrx] { font-size: 11px; color: var(--d-ink-4); margin-top: 2px; }

.vad-summary-row[b-ldrkkvpmrx] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--d-ink-2); }
    .vad-summary-row .lbl[b-ldrkkvpmrx] { color: var(--d-ink-4); }
    .vad-summary-row .val[b-ldrkkvpmrx] { font-weight: 500; }
    .vad-summary-row .accent[b-ldrkkvpmrx] { color: var(--d-accent); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
    .vad-summary-row a[b-ldrkkvpmrx] { color: var(--d-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
    .vad-summary-row a:hover[b-ldrkkvpmrx] { text-decoration: underline; }

.vad-card-hd[b-ldrkkvpmrx] { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(180deg, #fdfcfa 0%, var(--d-surface) 100%); border-bottom: 1px solid var(--d-line-2); }
    .vad-card-hd h3[b-ldrkkvpmrx] { margin: 0; font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.09em; display: flex; align-items: center; gap: 8px; }
.vad-section-h[b-ldrkkvpmrx] { font-size: 11px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; }

.vad-tbl-wrap[b-ldrkkvpmrx] { overflow-x: auto; }
.vad-tbl[b-ldrkkvpmrx] { width: 100%; border-collapse: collapse; font-size: 12.5px; }
    .vad-tbl thead th[b-ldrkkvpmrx] { font-size: 10px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 9px 12px; background: var(--d-surface); border-bottom: 1px solid var(--d-line); white-space: nowrap; }
    .vad-tbl thead th.right[b-ldrkkvpmrx] { text-align: right; }
    .vad-tbl tbody td[b-ldrkkvpmrx] { padding: 10px 12px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; white-space: nowrap; }
    .vad-tbl tbody tr:hover[b-ldrkkvpmrx] { background: var(--d-surface-2); }
    .vad-tbl tbody td.right[b-ldrkkvpmrx] { text-align: right; }
.vad-seq[b-ldrkkvpmrx] { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--d-accent-soft); color: var(--d-accent); font-size: 10.5px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.vad-prim-tag[b-ldrkkvpmrx] { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; background: var(--d-accent-soft); color: var(--d-accent); margin-left: 6px; }
.vad-passport[b-ldrkkvpmrx] { font-family: 'JetBrains Mono', monospace; }

.vad-grid-12[b-ldrkkvpmrx] { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.vad-col-8[b-ldrkkvpmrx] { grid-column: span 12; }
.vad-col-4[b-ldrkkvpmrx] { grid-column: span 12; }
@media (min-width: 1024px) {
    .vad-col-8[b-ldrkkvpmrx] { grid-column: span 8; }
    .vad-col-4[b-ldrkkvpmrx] { grid-column: span 4; }
}
.vad-stack[b-ldrkkvpmrx] { display: flex; flex-direction: column; gap: 14px; }

.vad-info-grid[b-ldrkkvpmrx] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; }
    .vad-info-grid .lbl[b-ldrkkvpmrx] { color: var(--d-ink-3); }
    .vad-info-grid .val[b-ldrkkvpmrx] { color: var(--d-ink); font-weight: 500; }

.vad-doc[b-ldrkkvpmrx] { border: 1px solid var(--d-line); border-radius: 8px; padding: 10px 12px; }
.vad-doc + .vad-doc[b-ldrkkvpmrx] { margin-top: 10px; }
.vad-doc-hd[b-ldrkkvpmrx] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.vad-doc-name[b-ldrkkvpmrx] { font-size: 12.5px; font-weight: 500; color: var(--d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vad-doc-meta[b-ldrkkvpmrx] { font-size: 11px; color: var(--d-ink-4); margin-bottom: 8px; }
.vad-doc-actions[b-ldrkkvpmrx] { display: flex; gap: 6px; }
.vad-doc-act[b-ldrkkvpmrx] { height: 28px; padding: 0 10px; font-size: 11.5px; font-weight: 500; border-radius: 6px; border: 0; cursor: pointer; }
    .vad-doc-act.good[b-ldrkkvpmrx] { background: var(--d-good); color: #fff; }
    .vad-doc-act.danger[b-ldrkkvpmrx] { background: var(--d-danger); color: #fff; }
    .vad-doc-act.outline[b-ldrkkvpmrx] { background: var(--d-surface); color: var(--d-accent); border: 1px solid #fed7aa; }
.vad-doc-note[b-ldrkkvpmrx] { font-size: 11px; color: var(--d-ink-3); font-style: italic; margin-top: 4px; }
.vad-doc-status[b-ldrkkvpmrx] { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .vad-doc-status.pending[b-ldrkkvpmrx] { background: var(--d-surface-2); color: var(--d-ink-3); }
    .vad-doc-status.approved[b-ldrkkvpmrx] { background: var(--d-good-soft); color: var(--d-good); }
    .vad-doc-status.rejected[b-ldrkkvpmrx] { background: #fee2e2; color: var(--d-danger); }
    .vad-doc-status.reupload[b-ldrkkvpmrx] { background: var(--d-accent-soft); color: var(--d-accent); }

.vad-tl[b-ldrkkvpmrx] { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.vad-tl-row[b-ldrkkvpmrx] { display: flex; align-items: flex-start; gap: 10px; }
.vad-tl-dot[b-ldrkkvpmrx] { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
    .vad-tl-dot.gray[b-ldrkkvpmrx] { background: var(--d-ink-4); }
    .vad-tl-dot.blue[b-ldrkkvpmrx] { background: #0369a1; }
    .vad-tl-dot.violet[b-ldrkkvpmrx] { background: #6d28d9; }
    .vad-tl-dot.good[b-ldrkkvpmrx] { background: var(--d-good); }
.vad-tl-label[b-ldrkkvpmrx] { font-weight: 500; color: var(--d-ink); display: block; }
.vad-tl-time[b-ldrkkvpmrx] { color: var(--d-ink-4); font-size: 11.5px; font-family: 'JetBrains Mono', monospace; }

.vad-empty[b-ldrkkvpmrx] { color: var(--d-ink-4); font-size: 12px; padding: 12px 0; }
.vad-em-name[b-ldrkkvpmrx] { font-size: 11.5px; font-weight: 600; color: var(--d-accent); margin: 0 0 6px; }

/* Modal */
.vad-modal-bg[b-ldrkkvpmrx] { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vad-modal-overlay[b-ldrkkvpmrx] { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.vad-modal[b-ldrkkvpmrx] { position: relative; background: var(--d-surface); border-radius: 14px; width: 100%; max-width: 540px; max-height: 92vh; box-shadow: 0 20px 50px rgba(0,0,0,0.25); display: flex; flex-direction: column; }
.vad-modal-hd[b-ldrkkvpmrx] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--d-line); }
    .vad-modal-hd h3[b-ldrkkvpmrx] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; color: var(--d-ink); }
.vad-modal-bd[b-ldrkkvpmrx] { padding: 18px 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.vad-modal-ft[b-ldrkkvpmrx] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 14px 14px; }
.vad-close[b-ldrkkvpmrx] { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--d-ink-4); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
    .vad-close:hover[b-ldrkkvpmrx] { background: var(--d-surface-2); color: var(--d-ink); }
.vad-field label[b-ldrkkvpmrx] { display: block; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.vad-field input[b-ldrkkvpmrx], .vad-field textarea[b-ldrkkvpmrx] { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; transition: border-color .12s, box-shadow .12s; letter-spacing: -0.01em; font-family: inherit; }
.vad-field input:focus[b-ldrkkvpmrx], .vad-field textarea:focus[b-ldrkkvpmrx] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.vad-field textarea[b-ldrkkvpmrx] { resize: none; }
.vad-error[b-ldrkkvpmrx] { color: var(--d-danger); font-size: 14px; }
.vad-kbd[b-ldrkkvpmrx] { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--d-ink-4); padding: 2px 6px; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 4px; }
/* /src/Features/Visa/Pages/Manager/VisaApplications.razor.rz.scp.css */
/* VisaApplications — Manager Dashboard v4 theme */
.vap-root[b-uckdpoooeu] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff1e6 0%, #ffe4cc 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    background: var(--d-bg);
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    overflow: hidden;
}

.vap-hero[b-uckdpoooeu] { padding: 16px 20px 14px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; border-bottom: 1px solid var(--d-line); background: var(--d-surface); }
.vap-hero h1[b-uckdpoooeu] { margin: 0; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.15; }
    .vap-hero h1 em[b-uckdpoooeu] { font-style: normal; color: var(--d-ink-3); font-weight: 500; margin: 0 6px; }
.vap-hero-meta[b-uckdpoooeu] { margin-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--d-ink-3); font-size: 12.5px; flex-wrap: wrap; }
    .vap-hero-meta .dot[b-uckdpoooeu] { width: 3px; height: 3px; border-radius: 50%; background: var(--d-ink-4); }
.vap-hero-actions[b-uckdpoooeu] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.vap-btn[b-uckdpoooeu] { height: 36px; padding: 0 14px; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--d-surface); font-size: 14px; font-weight: 500; color: var(--d-ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; }
    .vap-btn:hover[b-uckdpoooeu] { background: var(--d-surface-2); color: var(--d-ink); text-decoration: none; }
.vap-btn-accent[b-uckdpoooeu] { background: var(--d-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22); }
    .vap-btn-accent:hover[b-uckdpoooeu] { background: var(--d-accent-grad-hover); color: #fff; }

/* Tab bar */
.vap-tabs[b-uckdpoooeu] { display: flex; align-items: center; gap: 4px; padding: 6px 20px; background: var(--d-surface-2); border-bottom: 1px solid var(--d-line); }
.vap-tab[b-uckdpoooeu] { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--d-ink-3); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background .12s, color .12s; }
    .vap-tab:hover[b-uckdpoooeu] { background: var(--d-surface); color: var(--d-ink-2); }
    .vap-tab.active[b-uckdpoooeu] { background: var(--d-surface); color: var(--d-accent); border-color: var(--d-line); }
    .vap-tab-count[b-uckdpoooeu] { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--d-surface-2); color: var(--d-ink-3); }
    .vap-tab.active .vap-tab-count[b-uckdpoooeu] { background: var(--d-accent-soft); color: var(--d-accent); }

/* Content */
.vap-content[b-uckdpoooeu] { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; overflow: hidden; }

/* Filter bar */
.vap-filterbar[b-uckdpoooeu] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); padding: 8px 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vap-search[b-uckdpoooeu] { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
    .vap-search input[b-uckdpoooeu] { width: 100%; height: 34px; padding: 0 12px 0 32px; border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface); font-size: 12.5px; outline: none; letter-spacing: -0.01em; }
    .vap-search input:focus[b-uckdpoooeu] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
    .vap-search svg[b-uckdpoooeu] { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; color: var(--d-ink-4); }
.vap-divider[b-uckdpoooeu] { height: 16px; width: 1px; background: var(--d-line); }
.vap-chip-row[b-uckdpoooeu] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.vap-chip[b-uckdpoooeu] { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--d-surface); border: 1px solid var(--d-line); color: var(--d-ink-3); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
    .vap-chip:hover[b-uckdpoooeu] { background: var(--d-surface-2); color: var(--d-ink-2); }
    .vap-chip.active[b-uckdpoooeu] { background: var(--d-accent-soft); border-color: #fed7aa; color: var(--d-accent); }

.vap-filter-meta[b-uckdpoooeu] { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--d-ink-3); }
    .vap-filter-meta b[b-uckdpoooeu] { color: var(--d-accent); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.vap-clearbtn[b-uckdpoooeu] { color: var(--d-ink-4); background: transparent; border: 0; cursor: pointer; }
    .vap-clearbtn:hover[b-uckdpoooeu] { color: var(--d-danger); }

/* Empty state */
.vap-empty[b-uckdpoooeu] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--d-ink-3); padding: 32px; text-align: center; }
.vap-empty-ico[b-uckdpoooeu] { width: 56px; height: 56px; border-radius: 50%; background: var(--d-accent-soft); display: grid; place-items: center; color: var(--d-accent); }
.vap-empty p[b-uckdpoooeu] { margin: 0; font-size: 14px; }
.vap-empty .small[b-uckdpoooeu] { font-size: 11.5px; color: var(--d-ink-4); margin-top: 2px; }
.vap-empty a[b-uckdpoooeu] { color: var(--d-accent); font-size: 12px; font-weight: 500; text-decoration: none; margin-top: 4px; }
    .vap-empty a:hover[b-uckdpoooeu] { text-decoration: underline; }

/* Package grid */
.vap-pkg-scroll[b-uckdpoooeu] { flex: 1; overflow-y: auto; padding-right: 4px; }
.vap-pkg-grid[b-uckdpoooeu] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .vap-pkg-grid[b-uckdpoooeu] { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .vap-pkg-grid[b-uckdpoooeu] { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .vap-pkg-grid[b-uckdpoooeu] { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1280px) { .vap-pkg-grid[b-uckdpoooeu] { grid-template-columns: repeat(6, 1fr); } }

.vap-pkg[b-uckdpoooeu] { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
    .vap-pkg:hover[b-uckdpoooeu] { border-color: #fed7aa; box-shadow: 0 4px 12px -4px rgba(234,88,12,0.18); transform: translateY(-1px); }
.vap-pkg-cover[b-uckdpoooeu] { position: relative; height: 110px; background: var(--d-accent-grad-soft); overflow: hidden; }
    .vap-pkg-cover img[b-uckdpoooeu] { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .vap-pkg:hover .vap-pkg-cover img[b-uckdpoooeu] { transform: scale(1.05); }
    .vap-pkg-cover .flag[b-uckdpoooeu] { width: 100%; height: 100%; display: grid; place-items: center; font-size: 36px; }
.vap-pkg-country[b-uckdpoooeu] { position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,0.95); color: var(--d-ink-2); font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.vap-pkg-cat[b-uckdpoooeu] { position: absolute; top: 6px; right: 6px; background: var(--d-accent-grad); color: #fff; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 999px; }
.vap-pkg-feat[b-uckdpoooeu] { position: absolute; bottom: 6px; left: 6px; background: var(--d-warn-soft); color: var(--d-warn); font-size: 8px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; }

.vap-pkg-body[b-uckdpoooeu] { padding: 10px; flex: 1; display: flex; flex-direction: column; }
.vap-pkg-title[b-uckdpoooeu] { font-size: 12px; font-weight: 600; color: var(--d-ink); line-height: 1.25; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vap-pkg:hover .vap-pkg-title[b-uckdpoooeu] { color: var(--d-accent); }
.vap-pkg-foot[b-uckdpoooeu] { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--d-line-2); display: flex; align-items: flex-end; justify-content: space-between; }
.vap-pkg-from[b-uckdpoooeu] { font-size: 8px; color: var(--d-ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.vap-pkg-price[b-uckdpoooeu] { font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; color: var(--d-accent); letter-spacing: -0.02em; line-height: 1; margin: 2px 0 0; }
    .vap-pkg-price small[b-uckdpoooeu] { font-size: 9px; font-weight: 500; }
.vap-pkg-days[b-uckdpoooeu] { font-size: 10px; color: var(--d-ink-4); }
.vap-pkg-cta[b-uckdpoooeu] { margin-top: 8px; width: 100%; height: 26px; border-radius: 7px; background: var(--d-accent-soft); color: var(--d-accent); font-size: 10.5px; font-weight: 600; border: 0; cursor: pointer; transition: background .12s, color .12s; }
    .vap-pkg-cta:hover[b-uckdpoooeu] { background: var(--d-accent-grad); color: #fff; }

/* Stats row */
.vap-stats[b-uckdpoooeu] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--d-line); border: 1px solid var(--d-line); border-radius: var(--d-r); overflow: hidden; }
.vap-stat[b-uckdpoooeu] { background: var(--d-surface); padding: 10px 14px; text-align: center; }
    .vap-stat-num[b-uckdpoooeu] { font-family: 'Inter Tight', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1; }
    .vap-stat-lbl[b-uckdpoooeu] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.vap-stat.processing .vap-stat-num[b-uckdpoooeu] { color: #0369a1; }
.vap-stat.approved .vap-stat-num[b-uckdpoooeu] { color: var(--d-good); }
.vap-stat.rejected .vap-stat-num[b-uckdpoooeu] { color: var(--d-danger); }

/* Status sub-tabs */
.vap-subtabs[b-uckdpoooeu] { display: inline-flex; align-items: center; gap: 2px; background: var(--d-surface-2); padding: 3px; border-radius: 8px; width: fit-content; }
.vap-subtab[b-uckdpoooeu] { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--d-ink-3); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
    .vap-subtab:hover[b-uckdpoooeu] { color: var(--d-ink-2); }
    .vap-subtab.active[b-uckdpoooeu] { background: var(--d-surface); color: var(--d-ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.vap-subtab-count[b-uckdpoooeu] { display: inline-block; margin-left: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--d-accent-soft); color: var(--d-accent); }

/* Apps table */
.vap-tbl-wrap[b-uckdpoooeu] { flex: 1; overflow: auto; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--d-r); }
.vap-tbl[b-uckdpoooeu] { width: 100%; border-collapse: collapse; font-size: 14px; }
    .vap-tbl thead th[b-uckdpoooeu] { font-size: 10.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 10px 14px; background: var(--d-surface); border-bottom: 1px solid var(--d-line); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
    .vap-tbl thead th.right[b-uckdpoooeu] { text-align: right; }
    .vap-tbl tbody td[b-uckdpoooeu] { padding: 10px 14px; border-bottom: 1px solid var(--d-line-2); color: var(--d-ink-2); vertical-align: middle; font-size: 12px; }
    .vap-tbl tbody tr:hover[b-uckdpoooeu] { background: var(--d-surface-2); }
    .vap-tbl tbody tr:last-child td[b-uckdpoooeu] { border-bottom: 0; }
.vap-tbl-code[b-uckdpoooeu] { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--d-accent); font-weight: 500; }
.vap-tbl-name[b-uckdpoooeu] { font-weight: 500; color: var(--d-ink); }
.vap-tbl-date[b-uckdpoooeu] { font-family: 'JetBrains Mono', monospace; color: var(--d-ink-3); font-size: 11.5px; }

.vap-status[b-uckdpoooeu] { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; }
.vap-status.draft[b-uckdpoooeu] { background: var(--d-surface-2); color: var(--d-ink-3); }
.vap-status.submitted[b-uckdpoooeu] { background: #e0f2fe; color: #0369a1; }
.vap-status.processing[b-uckdpoooeu] { background: var(--d-warn-soft); color: var(--d-warn); }
.vap-status.additional[b-uckdpoooeu] { background: var(--d-accent-soft); color: var(--d-accent); }
.vap-status.interview[b-uckdpoooeu] { background: #f5f3ff; color: #6d28d9; }
.vap-status.approved[b-uckdpoooeu] { background: var(--d-good-soft); color: var(--d-good); }
.vap-status.rejected[b-uckdpoooeu] { background: #fee2e2; color: var(--d-danger); }

.vap-row-actions[b-uckdpoooeu] { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.vap-link-btn[b-uckdpoooeu] { padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 6px; background: transparent; border: 0; cursor: pointer; }
.vap-link-btn.accent[b-uckdpoooeu] { color: var(--d-accent); }
    .vap-link-btn.accent:hover[b-uckdpoooeu] { background: var(--d-accent-soft); }
.vap-link-btn.danger[b-uckdpoooeu] { color: var(--d-danger); }
    .vap-link-btn.danger:hover[b-uckdpoooeu] { background: #fee2e2; }

/* Modal */
.vap-modal-bg[b-uckdpoooeu] { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vap-modal-overlay[b-uckdpoooeu] { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
.vap-modal[b-uckdpoooeu] { position: relative; background: var(--d-surface); border-radius: 14px; width: 100%; max-width: 520px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); display: flex; flex-direction: column; max-height: 90vh; }
.vap-modal-hd[b-uckdpoooeu] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--d-line); }
    .vap-modal-hd h3[b-uckdpoooeu] { margin: 0; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 600; color: var(--d-ink); letter-spacing: -0.02em; }
.vap-modal-bd[b-uckdpoooeu] { padding: 18px 20px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.vap-modal-ft[b-uckdpoooeu] { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--d-line); background: var(--d-surface-2); border-radius: 0 0 14px 14px; }
.vap-close[b-uckdpoooeu] { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--d-ink-4); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
    .vap-close:hover[b-uckdpoooeu] { background: var(--d-surface-2); color: var(--d-ink); }
.vap-kbd[b-uckdpoooeu] { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--d-ink-4); }

.vap-field label[b-uckdpoooeu] { display: block; font-size: 11.5px; font-weight: 600; color: var(--d-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.vap-field .req[b-uckdpoooeu] { color: var(--d-danger); margin-left: 2px; }
.vap-field input[b-uckdpoooeu], .vap-field select[b-uckdpoooeu], .vap-field textarea[b-uckdpoooeu] { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid var(--d-line); border-radius: var(--d-r); background: var(--d-surface); font-size: 14px; color: var(--d-ink); outline: none; transition: border-color .12s, box-shadow .12s; letter-spacing: -0.01em; font-family: inherit; }
.vap-field input:focus[b-uckdpoooeu], .vap-field select:focus[b-uckdpoooeu], .vap-field textarea:focus[b-uckdpoooeu] { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(234,88,12,0.12); }
.vap-field textarea[b-uckdpoooeu] { resize: none; }

.vap-note-card[b-uckdpoooeu] { background: var(--d-warn-soft); border: 1px solid #fcd34d; border-radius: var(--d-r); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start; }
.vap-note-card svg[b-uckdpoooeu] { color: var(--d-warn); flex-shrink: 0; margin-top: 2px; }
.vap-note-card-body[b-uckdpoooeu] { font-size: 11.5px; color: #92400e; }
.vap-note-card-body p[b-uckdpoooeu] { margin: 0 0 4px; font-weight: 600; }
.vap-note-card-body ul[b-uckdpoooeu] { margin: 0; padding-left: 16px; }
.vap-note-card-body li[b-uckdpoooeu] { color: #b45309; }

.vap-loader[b-uckdpoooeu] { flex: 1; display: flex; align-items: center; justify-content: center; }
/* /src/Features/Visa/Pages/Manager/VisaLandingEditor.razor.rz.scp.css */
/* ===== Visa Landing Editor ===== */
.vl-root[b-uobodhhr3n] {
    --vl-line: #e5e7eb;
    --vl-line-2: #f1f5f9;
    --vl-ink: #0f172a;
    --vl-ink-2: #475569;
    --vl-ink-3: #94a3b8;
    --vl-bg: #f8fafc;
    --vl-accent: #f97316;
    --vl-accent-bg: #fff7ed;
    --vl-danger: #dc2626;
    --vl-success: #059669;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100vh;
    background: var(--vl-bg);
}

/* Hero */
.vl-hero[b-uobodhhr3n] { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--vl-line); border-radius: 16px; padding: 14px 18px; }
.vl-hero-left[b-uobodhhr3n] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vl-back[b-uobodhhr3n] { width: 32px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid var(--vl-line); display: inline-flex; align-items: center; justify-content: center; color: var(--vl-ink-2); cursor: pointer; }
.vl-back:hover[b-uobodhhr3n] { background: var(--vl-bg); color: var(--vl-ink); }
.vl-crumb[b-uobodhhr3n] { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vl-ink-3); }
.vl-crumb a[b-uobodhhr3n] { color: var(--vl-ink-2); text-decoration: none; }
.vl-crumb a:hover[b-uobodhhr3n] { color: var(--vl-accent); }
.vl-crumb .sep[b-uobodhhr3n] { color: #cbd5e1; }
.vl-crumb .cur[b-uobodhhr3n] { color: var(--vl-ink); font-weight: 500; }
.vl-hero h1[b-uobodhhr3n] { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--vl-ink); margin: 2px 0 0 0; line-height: 1.2; }
.vl-iso[b-uobodhhr3n] { font-size: 11px; font-weight: 500; color: var(--vl-ink-3); background: var(--vl-bg); padding: 2px 6px; border-radius: 4px; }

/* Tabs */
.vl-tabs[b-uobodhhr3n] { display: flex; gap: 4px; background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; padding: 4px; overflow-x: auto; }
.vl-tab[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--vl-ink-2); background: transparent; border: none; cursor: pointer; white-space: nowrap; }
.vl-tab:hover[b-uobodhhr3n] { background: var(--vl-bg); color: var(--vl-ink); }
.vl-tab.is-active[b-uobodhhr3n] { background: var(--vl-accent); color: #fff; }
.vl-tab.is-active .vl-badge[b-uobodhhr3n] { background: rgba(255,255,255,.25); color: #fff; }
.vl-badge[b-uobodhhr3n] { background: var(--vl-bg); color: var(--vl-ink-2); padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; min-width: 16px; text-align: center; }

/* Content */
.vl-content[b-uobodhhr3n] { background: #fff; border: 1px solid var(--vl-line); border-radius: 16px; padding: 18px; }

/* Section */
.vl-section[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 14px; }
.vl-section-hd-sub[b-uobodhhr3n] { padding-top: 8px; border-top: 1px solid var(--vl-line-2); margin-top: 8px; }
.vl-section-hd-sub h3[b-uobodhhr3n], .vl-sub-title[b-uobodhhr3n] { font-size: 14px; font-weight: 600; color: var(--vl-ink); margin: 0 0 4px 0; }
.vl-mt[b-uobodhhr3n] { margin-top: 18px; }
.vl-list-hd[b-uobodhhr3n] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vl-list-desc[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-2); margin: 0; }

/* Field */
.vl-field[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 4px; }
.vl-field label[b-uobodhhr3n] { font-size: 11px; font-weight: 600; color: var(--vl-ink-2); text-transform: uppercase; letter-spacing: .03em; }
.vl-input[b-uobodhhr3n], .vl-select[b-uobodhhr3n], .vl-textarea[b-uobodhhr3n] { width: 100%; padding: 8px 10px; border: 1px solid var(--vl-line); border-radius: 8px; font-size: 14px; color: var(--vl-ink); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.vl-input:focus[b-uobodhhr3n], .vl-select:focus[b-uobodhhr3n], .vl-textarea:focus[b-uobodhhr3n] { border-color: var(--vl-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.vl-input.is-mono[b-uobodhhr3n] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 12px; }
.vl-textarea[b-uobodhhr3n] { resize: vertical; min-height: 60px; }
.vl-hint[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); margin: 2px 0 0 0; }
.vl-grid-2[b-uobodhhr3n] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vl-grid-3[b-uobodhhr3n] { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .vl-grid-2[b-uobodhhr3n], .vl-grid-3[b-uobodhhr3n] { grid-template-columns: 1fr; } }
.vl-check[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vl-ink-2); cursor: pointer; }
.vl-check input[b-uobodhhr3n] { accent-color: var(--vl-accent); }

/* Switch — compact pseudo-toggle */
.vl-switch[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--vl-line); border-radius: 999px; cursor: pointer; user-select: none; font-size: 12px; }
.vl-switch input[b-uobodhhr3n] { accent-color: var(--vl-accent); }

/* Buttons */
.vl-btn[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--vl-line); background: #fff; color: var(--vl-ink-2); cursor: pointer; transition: background .15s, border-color .15s; }
.vl-btn:hover[b-uobodhhr3n] { background: var(--vl-bg); }
.vl-btn-ghost[b-uobodhhr3n] { background: #fff; }
.vl-btn-accent[b-uobodhhr3n] { background: var(--vl-accent); color: #fff; border-color: var(--vl-accent); }
.vl-btn-accent:hover[b-uobodhhr3n] { background: #ea580c; border-color: #ea580c; }
.vl-btn-accent:disabled[b-uobodhhr3n] { opacity: .5; cursor: not-allowed; }
.vl-btn-danger[b-uobodhhr3n] { background: #fff; color: var(--vl-danger); border-color: #fecaca; }
.vl-btn-danger:hover[b-uobodhhr3n] { background: #fef2f2; }
.vl-btn-sm[b-uobodhhr3n] { padding: 6px 10px; font-size: 11.5px; }
.vl-btn-xs[b-uobodhhr3n] { padding: 4px 8px; font-size: 11px; }
.vl-actions[b-uobodhhr3n] { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--vl-line-2); margin-top: 8px; }

/* Spinners */
.vl-loading[b-uobodhhr3n] { display: flex; align-items: center; justify-content: center; padding: 60px 0; }
.vl-spin[b-uobodhhr3n] { width: 28px; height: 28px; border: 3px solid var(--vl-accent); border-top-color: transparent; border-radius: 50%; animation: vl-spin-b-uobodhhr3n .8s linear infinite; }
.vl-spin-sm[b-uobodhhr3n] { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: vl-spin-b-uobodhhr3n .8s linear infinite; }
@keyframes vl-spin-b-uobodhhr3n { to { transform: rotate(360deg); } }

/* Messages */
.vl-error[b-uobodhhr3n] { background: #fef2f2; border: 1px solid #fecaca; color: var(--vl-danger); padding: 8px 12px; border-radius: 8px; font-size: 12px; }
.vl-success[b-uobodhhr3n] { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--vl-success); padding: 8px 12px; border-radius: 8px; font-size: 12px; }

/* Image preview */
.vl-preview[b-uobodhhr3n] { max-width: 100%; max-height: 160px; border-radius: 8px; border: 1px solid var(--vl-line); margin-top: 6px; object-fit: cover; }

/* Inline form */
.vl-form[b-uobodhhr3n] { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vl-form-hd[b-uobodhhr3n] { font-size: 14px; font-weight: 600; color: #9a3412; }

/* Table */
.vl-table-wrap[b-uobodhhr3n] { border: 1px solid var(--vl-line); border-radius: 10px; overflow: hidden; }
.vl-table[b-uobodhhr3n] { width: 100%; border-collapse: collapse; font-size: 12px; }
.vl-table thead[b-uobodhhr3n] { background: var(--vl-bg); }
.vl-table th[b-uobodhhr3n] { text-align: left; padding: 8px 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--vl-ink-3); letter-spacing: .03em; border-bottom: 1px solid var(--vl-line); }
.vl-table td[b-uobodhhr3n] { padding: 8px 10px; border-bottom: 1px solid var(--vl-line-2); color: var(--vl-ink); vertical-align: top; }
.vl-table tbody tr:last-child td[b-uobodhhr3n] { border-bottom: none; }
.vl-table tbody tr:hover[b-uobodhhr3n] { background: var(--vl-bg); }
.vl-table .text-right[b-uobodhhr3n] { text-align: right; }
.vl-table .text-center[b-uobodhhr3n] { text-align: center; }
.vl-empty[b-uobodhhr3n] { padding: 32px 12px; text-align: center; color: var(--vl-ink-3); font-size: 12px; }
.vl-mono[b-uobodhhr3n] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.vl-cell-wrap[b-uobodhhr3n] { max-width: 380px; }
.vl-note[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); margin-top: 2px; }

/* Pills */
.vl-pill[b-uobodhhr3n] { display: inline-block; padding: 1px 8px; font-size: 10.5px; font-weight: 500; background: var(--vl-bg); color: var(--vl-ink-2); border-radius: 999px; border: 1px solid var(--vl-line); }
.vl-pill-orange[b-uobodhhr3n] { background: var(--vl-accent-bg); color: #c2410c; border-color: #fed7aa; }

/* Active dot */
.vl-dot[b-uobodhhr3n] { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.vl-dot.is-on[b-uobodhhr3n] { background: #22c55e; }
.vl-dot.is-off[b-uobodhhr3n] { background: #cbd5e1; }

/* Cards (steps) */
.vl-cards[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 10px; }
.vl-card[b-uobodhhr3n] { display: flex; gap: 12px; background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; padding: 12px 14px; align-items: flex-start; }
.vl-card-readonly[b-uobodhhr3n] { background: #fafafa; border-color: var(--vl-line-2); }
.vl-card-num[b-uobodhhr3n] { width: 32px; height: 32px; border-radius: 50%; background: var(--vl-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.vl-card-readonly .vl-card-num[b-uobodhhr3n] { background: #cbd5e1; }
.vl-card-bd[b-uobodhhr3n] { flex: 1; min-width: 0; }
.vl-card-title[b-uobodhhr3n] { font-size: 14px; font-weight: 600; color: var(--vl-ink); margin-bottom: 2px; }
.vl-card-desc[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-2); margin: 0; }
.vl-card-meta[b-uobodhhr3n] { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--vl-ink-3); }
.vl-card-actions[b-uobodhhr3n] { display: flex; gap: 4px; flex-shrink: 0; }

/* FAQ */
.vl-faqs[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 10px; }
.vl-faq[b-uobodhhr3n] { background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; padding: 12px 14px; }
.vl-faq-q[b-uobodhhr3n] { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--vl-ink); margin-bottom: 4px; }
.vl-faq-a[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-2); margin: 0 0 6px 0; line-height: 1.5; white-space: pre-wrap; }

/* Reviews */
.vl-reviews[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 12px; }
.vl-review[b-uobodhhr3n] { background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; padding: 14px; }
.vl-review-hd[b-uobodhhr3n] { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.vl-review-avatar[b-uobodhhr3n] { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--vl-bg); display: inline-flex; align-items: center; justify-content: center; color: var(--vl-ink-2); font-weight: 600; }
.vl-review-avatar-empty[b-uobodhhr3n] { background: var(--vl-accent-bg); color: #c2410c; }
.vl-review-meta[b-uobodhhr3n] { flex: 1; min-width: 0; }
.vl-review-name[b-uobodhhr3n] { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--vl-ink); }
.vl-rating[b-uobodhhr3n] { font-size: 14px; color: var(--vl-accent); letter-spacing: 1px; }
.vl-rating-empty[b-uobodhhr3n] { color: #e5e7eb; }
.vl-review-content[b-uobodhhr3n] { font-size: 12.5px; color: var(--vl-ink-2); margin: 0 0 8px 0; line-height: 1.5; }
.vl-review-visa[b-uobodhhr3n] { max-width: 200px; max-height: 120px; border-radius: 8px; border: 1px solid var(--vl-line); object-fit: cover; }

/* Image uploader */
.vl-uploader[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 6px; }
.vl-uploader-empty[b-uobodhhr3n] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; border: 2px dashed var(--vl-line); border-radius: 10px; background: var(--vl-bg); color: var(--vl-ink-3); cursor: pointer; transition: border-color .15s, background .15s; min-height: 110px; }
.vl-uploader-empty:hover[b-uobodhhr3n] { border-color: var(--vl-accent); background: var(--vl-accent-bg); color: var(--vl-accent); }
.vl-uploader-empty-title[b-uobodhhr3n] { font-size: 12px; font-weight: 600; color: var(--vl-ink-2); }
.vl-uploader-empty-hint[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); }
.vl-uploader-preview[b-uobodhhr3n] { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--vl-line); }
.vl-uploader-preview img[b-uobodhhr3n] { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.vl-uploader-overlay[b-uobodhhr3n] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(15,23,42,.55); opacity: 0; transition: opacity .15s; }
.vl-uploader-preview:hover .vl-uploader-overlay[b-uobodhhr3n] { opacity: 1; }
.vl-uploader-btn[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: rgba(255,255,255,.95); color: var(--vl-ink); border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
.vl-uploader-btn:hover[b-uobodhhr3n] { background: #fff; }
.vl-uploader-btn-danger[b-uobodhhr3n] { color: var(--vl-danger); }
.vl-uploader-loading[b-uobodhhr3n] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.7); }
.vl-uploader-fallback[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); }
.vl-uploader-fallback summary[b-uobodhhr3n] { cursor: pointer; padding: 2px 0; }
.vl-uploader-fallback summary:hover[b-uobodhhr3n] { color: var(--vl-accent); }
.vl-uploader-fallback input[b-uobodhhr3n] { margin-top: 4px; }

/* Accordion sections (Content tab) */
.vl-acc[b-uobodhhr3n] { background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; overflow: hidden; }
.vl-acc + .vl-acc[b-uobodhhr3n] { margin-top: 8px; }
.vl-acc summary[b-uobodhhr3n] { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--vl-ink); background: #fafafa; cursor: pointer; user-select: none; list-style: none; }
.vl-acc summary[b-uobodhhr3n]::-webkit-details-marker { display: none; }
.vl-acc summary[b-uobodhhr3n]::before { content: "▸"; color: var(--vl-ink-3); transition: transform .15s; display: inline-block; }
.vl-acc[open] summary[b-uobodhhr3n]::before { transform: rotate(90deg); }
.vl-acc summary:hover[b-uobodhhr3n] { background: #f1f5f9; }
.vl-acc-bd[b-uobodhhr3n] { padding: 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--vl-line); }

/* Chip-list field */
.vl-listfield[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 6px; }
.vl-listfield-hd[b-uobodhhr3n] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vl-listfield-hd label[b-uobodhhr3n] { font-size: 11px; font-weight: 600; color: var(--vl-ink-2); text-transform: uppercase; letter-spacing: .03em; }
.vl-listfield-count[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); }
.vl-chips[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 4px; }
.vl-chip[b-uobodhhr3n] { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--vl-line); border-radius: 8px; overflow: hidden; }
.vl-chip:hover[b-uobodhhr3n] { border-color: var(--vl-accent); }
.vl-chip-no[b-uobodhhr3n] { display: inline-flex; align-items: center; justify-content: center; width: 26px; flex-shrink: 0; background: var(--vl-bg); border-right: 1px solid var(--vl-line); font-size: 11px; font-weight: 600; color: var(--vl-ink-3); }
.vl-chip-input-edit[b-uobodhhr3n] { flex: 1; min-width: 0; border: none; padding: 7px 10px; font-size: 12.5px; color: var(--vl-ink); outline: none; background: transparent; }
.vl-chip-btn[b-uobodhhr3n] { width: 28px; flex-shrink: 0; border: none; background: var(--vl-bg); color: var(--vl-ink-3); font-size: 13px; cursor: pointer; border-left: 1px solid var(--vl-line); }
.vl-chip-btn:hover:not(:disabled)[b-uobodhhr3n] { background: var(--vl-accent-bg); color: var(--vl-accent); }
.vl-chip-btn:disabled[b-uobodhhr3n] { opacity: .35; cursor: default; }
.vl-chip-btn-danger[b-uobodhhr3n] { font-size: 16px; }
.vl-chip-btn-danger:hover:not(:disabled)[b-uobodhhr3n] { background: #fef2f2; color: var(--vl-danger); }
.vl-chip-add[b-uobodhhr3n] { display: flex; gap: 6px; align-items: flex-start; }
.vl-chip-add textarea[b-uobodhhr3n] { flex: 1; padding: 7px 10px; border: 1px dashed var(--vl-line); border-radius: 8px; font-size: 12.5px; outline: none; resize: vertical; font-family: inherit; color: var(--vl-ink); }
.vl-chip-add textarea:focus[b-uobodhhr3n] { border-color: var(--vl-accent); border-style: solid; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }

/* Trạng thái xuất bản trên tiêu đề */
.vl-state[b-uobodhhr3n] { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.vl-state.is-live[b-uobodhhr3n] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.vl-state.is-draft[b-uobodhhr3n] { background: var(--vl-bg); color: var(--vl-ink-3); border-color: var(--vl-line); }

/* Thanh lưu dính — luôn thấy dù đang cuộn ở đâu */
.vl-savebar[b-uobodhhr3n] { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #fff; border: 1px solid var(--vl-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.vl-savebar.is-dirty[b-uobodhhr3n] { border-color: #fed7aa; background: var(--vl-accent-bg); }
.vl-savebar-status[b-uobodhhr3n] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vl-savebar-text[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-2); }
.vl-savebar-idle[b-uobodhhr3n] { color: var(--vl-ink-3); }
.vl-savebar-ok[b-uobodhhr3n] { color: var(--vl-success); font-weight: 700; }
.vl-savebar-dot[b-uobodhhr3n] { width: 8px; height: 8px; border-radius: 50%; background: var(--vl-accent); flex-shrink: 0; }
.vl-savebar-actions[b-uobodhhr3n] { display: flex; gap: 6px; flex-shrink: 0; }

/* Thẻ trạng thái + checklist (tab Tổng quan) */
.vl-status-card[b-uobodhhr3n] { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--vl-line); border-radius: 12px; background: #fff; flex-wrap: wrap; }
.vl-status-card.is-live[b-uobodhhr3n] { border-color: #a7f3d0; background: #f0fdf4; }
.vl-status-main[b-uobodhhr3n] { flex: 1; min-width: 200px; }
.vl-status-title[b-uobodhhr3n] { font-size: 14px; font-weight: 600; color: var(--vl-ink); }
.vl-status-url[b-uobodhhr3n] { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vl-status-url a[b-uobodhhr3n] { color: var(--vl-accent); text-decoration: none; }
.vl-status-url a:hover[b-uobodhhr3n] { text-decoration: underline; }
.vl-status-nourl[b-uobodhhr3n] { color: var(--vl-ink-3); font-family: inherit; }
.vl-status-progress[b-uobodhhr3n] { text-align: center; flex-shrink: 0; }
.vl-status-count[b-uobodhhr3n] { font-size: 20px; font-weight: 700; color: var(--vl-accent); line-height: 1.1; }
.vl-status-count.is-ready[b-uobodhhr3n] { color: var(--vl-success); }
.vl-status-count-label[b-uobodhhr3n] { font-size: 10.5px; color: var(--vl-ink-3); text-transform: uppercase; letter-spacing: .03em; }

.vl-checklist[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 6px; }
.vl-check-row[b-uobodhhr3n] { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--vl-line); border-radius: 10px; background: #fff; }
.vl-check-ico[b-uobodhhr3n] { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.vl-check-row.is-ok[b-uobodhhr3n] { border-color: #d1fae5; }
.vl-check-row.is-ok .vl-check-ico[b-uobodhhr3n] { background: #ecfdf5; color: var(--vl-success); }
.vl-check-row.is-missing[b-uobodhhr3n] { border-color: #fecaca; background: #fffbfb; }
.vl-check-row.is-missing .vl-check-ico[b-uobodhhr3n] { background: #fef2f2; color: var(--vl-danger); }
.vl-check-row.is-todo .vl-check-ico[b-uobodhhr3n] { background: var(--vl-bg); color: var(--vl-ink-3); }
.vl-check-body[b-uobodhhr3n] { flex: 1; min-width: 0; }
.vl-check-label[b-uobodhhr3n] { font-size: 12.5px; font-weight: 600; color: var(--vl-ink); }
.vl-check-hint[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); margin-top: 1px; }

/* Đếm ký tự */
.vl-counter[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); margin: 2px 0 0 0; }
.vl-counter.is-good[b-uobodhhr3n] { color: var(--vl-success); }
.vl-counter.is-warn[b-uobodhhr3n] { color: #b45309; }
.vl-counter-rec[b-uobodhhr3n] { color: var(--vl-ink-3); }

/* Ô slug */
.vl-slug-row[b-uobodhhr3n] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vl-slug-prefix[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.vl-slug-row .vl-input[b-uobodhhr3n] { flex: 1; min-width: 160px; }

/* Hộp nhắc (thay cho style inline rải rác) */
.vl-notice[b-uobodhhr3n] { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; flex-wrap: wrap; }
.vl-notice svg[b-uobodhhr3n] { flex-shrink: 0; }
.vl-notice-text[b-uobodhhr3n] { flex: 1; min-width: 200px; line-height: 1.45; }
.vl-notice-link[b-uobodhhr3n] { font-weight: 600; text-decoration: underline; white-space: nowrap; }
.vl-notice-warn[b-uobodhhr3n] { background: var(--vl-accent-bg); border: 1px solid #fed7aa; color: #7c2d12; }
.vl-notice-warn svg[b-uobodhhr3n] { color: var(--vl-accent); }
.vl-notice-warn .vl-notice-link[b-uobodhhr3n] { color: #c2410c; }
.vl-notice-warn .vl-switch[b-uobodhhr3n] { margin-left: auto; }
.vl-notice-info[b-uobodhhr3n] { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; align-items: flex-start; }
.vl-notice-info .vl-notice-link[b-uobodhhr3n] { color: #1d4ed8; }

/* Cờ "đã có nội dung" trên đầu mỗi khối */
.vl-flag[b-uobodhhr3n] { margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; }
.vl-flag.is-done[b-uobodhhr3n] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.vl-flag.is-empty[b-uobodhhr3n] { background: var(--vl-bg); color: var(--vl-ink-3); border-color: var(--vl-line); }

/* Blog auto-match */
.vl-inline-loading[b-uobodhhr3n] { padding: 16px; text-align: center; color: var(--vl-ink-3); font-size: 12px; }
.vl-match-rule[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-2); margin-bottom: 10px; }
.vl-match-rule-hd[b-uobodhhr3n] { font-weight: 600; }
.vl-match-rule code[b-uobodhhr3n], .vl-blog-empty code[b-uobodhhr3n] { background: #f1f5f9; padding: 1px 5px; border-radius: 3px; margin: 0 2px; }
.vl-blog-hd[b-uobodhhr3n] { font-size: 12px; font-weight: 600; color: var(--vl-ink); margin-bottom: 6px; }
.vl-blog-hd-muted[b-uobodhhr3n] { color: var(--vl-ink-3); margin-top: 12px; }
.vl-blog-empty[b-uobodhhr3n] { padding: 14px; text-align: center; color: var(--vl-ink-3); font-size: 12px; border: 1px dashed #cbd5e1; border-radius: 8px; }
.vl-blog-list[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 6px; }
.vl-blog-row[b-uobodhhr3n] { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--vl-line); border-radius: 8px; background: #fff; }
.vl-blog-row.is-excluded[b-uobodhhr3n] { background: #fafafa; opacity: .65; }
.vl-blog-thumb[b-uobodhhr3n] { width: 56px; height: 42px; border-radius: 6px; background: #f1f5f9; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--vl-ink-3); }
.vl-blog-thumb img[b-uobodhhr3n] { width: 100%; height: 100%; object-fit: cover; }
.vl-blog-meta[b-uobodhhr3n] { flex: 1; min-width: 0; }
.vl-blog-title[b-uobodhhr3n] { font-size: 12.5px; font-weight: 600; color: var(--vl-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-blog-sub[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); margin-top: 2px; }

/* Lưới ảnh kết quả */
.vl-result-no[b-uobodhhr3n] { font-size: 11px; font-weight: 600; color: var(--vl-ink-3); }
.vl-icon-txt[b-uobodhhr3n] { font-size: 10px; font-weight: 700; }
.vl-price-display.is-zero[b-uobodhhr3n] { color: var(--vl-danger); }

/* Result gallery grid */
.vl-result-grid[b-uobodhhr3n] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.vl-result-item[b-uobodhhr3n] { background: var(--vl-bg); border: 1px solid var(--vl-line-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.vl-result-actions[b-uobodhhr3n] { display: flex; gap: 6px; align-items: center; justify-content: space-between; }

/* Sub-tabs (Pricing/Docs by Category) */
.vl-subtabs[b-uobodhhr3n] { display: flex; gap: 4px; padding: 4px; background: var(--vl-bg); border: 1px solid var(--vl-line); border-radius: 10px; margin-bottom: 8px; }
.vl-subtab[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--vl-ink-2); background: transparent; border: none; cursor: pointer; flex: 1; justify-content: center; }
.vl-subtab:hover[b-uobodhhr3n] { background: #fff; color: var(--vl-ink); }
.vl-subtab.is-active[b-uobodhhr3n] { background: #fff; color: var(--vl-accent); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.vl-subtab.is-active .vl-badge[b-uobodhhr3n] { background: var(--vl-accent-bg); color: #c2410c; }

/* Toolbar */
.vl-toolbar[b-uobodhhr3n] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.vl-toolbar-info[b-uobodhhr3n] { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vl-ink-2); }
.vl-toolbar-count[b-uobodhhr3n] { color: var(--vl-ink-3); font-size: 11px; }
.vl-toolbar-actions[b-uobodhhr3n] { display: flex; gap: 6px; }

/* Pager */
.vl-pager[b-uobodhhr3n] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 8px 12px; background: var(--vl-bg); border: 1px solid var(--vl-line); border-radius: 10px; }
.vl-pager-info[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-2); }
.vl-pager-actions[b-uobodhhr3n] { display: flex; align-items: center; gap: 8px; }
.vl-pager-pos[b-uobodhhr3n] { font-size: 12px; color: var(--vl-ink-2); min-width: 44px; text-align: center; }

/* Empty state */
.vl-empty-state[b-uobodhhr3n] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px 16px; color: var(--vl-ink-3); background: var(--vl-bg); border: 2px dashed var(--vl-line); border-radius: 12px; text-align: center; }
.vl-empty-state p[b-uobodhhr3n] { margin: 0; font-size: 14px; }
.vl-empty-state .vl-hint[b-uobodhhr3n] { font-size: 11.5px; }

/* Inline price edit */
.vl-price-cell[b-uobodhhr3n] { display: inline-flex; }
.vl-price-display[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--vl-ink); background: transparent; border: 1px dashed transparent; border-radius: 6px; cursor: pointer; }
.vl-price-display:hover[b-uobodhhr3n] { background: var(--vl-accent-bg); border-color: #fed7aa; }
.vl-price-unit[b-uobodhhr3n] { font-size: 10px; color: var(--vl-ink-3); font-weight: 500; }
.vl-price-input[b-uobodhhr3n] { width: 110px; padding: 4px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Row icon actions */
.vl-row-actions[b-uobodhhr3n] { display: inline-flex; gap: 2px; }
.vl-icon-btn[b-uobodhhr3n] { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid transparent; background: transparent; color: var(--vl-ink-2); border-radius: 6px; cursor: pointer; }
.vl-icon-btn:hover[b-uobodhhr3n] { background: var(--vl-bg); border-color: var(--vl-line); color: var(--vl-ink); }
.vl-icon-btn-danger:hover[b-uobodhhr3n] { background: #fef2f2; border-color: #fecaca; color: var(--vl-danger); }

/* Matrix radio cards */
.vl-form-matrix[b-uobodhhr3n] { background: #fffbeb; border-color: #fde68a; }
.vl-matrix-options[b-uobodhhr3n] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.vl-radio-card[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--vl-line); border-radius: 10px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.vl-radio-card:hover[b-uobodhhr3n] { border-color: #fed7aa; }
.vl-radio-card.is-active[b-uobodhhr3n] { border-color: var(--vl-accent); background: var(--vl-accent-bg); }
.vl-radio-card input[b-uobodhhr3n] { position: absolute; opacity: 0; pointer-events: none; }
.vl-radio-card strong[b-uobodhhr3n] { font-size: 12.5px; font-weight: 600; color: var(--vl-ink); }
.vl-radio-card span[b-uobodhhr3n] { font-size: 11px; color: var(--vl-ink-3); }
.vl-radio-card.is-active strong[b-uobodhhr3n] { color: #c2410c; }

/* Document cards */
.vl-doc-cards[b-uobodhhr3n] { display: flex; flex-direction: column; gap: 8px; }
.vl-doc-block[b-uobodhhr3n] { padding: 8px 0; border-top: 1px dashed var(--vl-line-2); }
.vl-doc-block:first-child[b-uobodhhr3n] { border-top: none; padding-top: 0; }
.vl-doc-block-hd[b-uobodhhr3n] { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--vl-ink-3); letter-spacing: .03em; margin-bottom: 6px; }
.vl-doc-items[b-uobodhhr3n] { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.vl-doc-item[b-uobodhhr3n] { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; }
.vl-doc-item:hover[b-uobodhhr3n] { background: var(--vl-bg); }
.vl-doc-text[b-uobodhhr3n] { flex: 1; font-size: 12.5px; color: var(--vl-ink); line-height: 1.45; }
.vl-doc-req[b-uobodhhr3n] { color: var(--vl-accent); font-weight: 700; margin-right: 4px; }
.vl-doc-note[b-uobodhhr3n] { color: var(--vl-ink-3); font-size: 11.5px; font-style: italic; }
.vl-doc-actions[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vl-doc-add[b-uobodhhr3n] { padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--vl-line-2); display: flex; gap: 6px; flex-wrap: wrap; }
.vl-doc-add-form[b-uobodhhr3n] { background: var(--vl-bg); border: 1px solid var(--vl-line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; width: 100%; }

/* Inline doc form — render bên trong card, có border-left cam để báo "đang edit ở chỗ này" */
.vl-form-inline[b-uobodhhr3n] { margin-top: 10px; border-left: 3px solid var(--vl-accent); }
.vl-form-context[b-uobodhhr3n] { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 400; }
.vl-form-context .vl-pill[b-uobodhhr3n] { font-size: 10.5px; }
.vl-form-arrow[b-uobodhhr3n] { color: var(--vl-ink-3); font-size: 12px; }
.vl-form-inline .vl-form-hd[b-uobodhhr3n] { display: flex; align-items: center; gap: 8px; }
.vl-doc-flags[b-uobodhhr3n] { display: flex; gap: 16px; flex-wrap: wrap; padding: 4px 0; }
.vl-form-advanced[b-uobodhhr3n] { padding: 6px 0; font-size: 11.5px; color: var(--vl-ink-3); border-top: 1px dashed var(--vl-line-2); }
.vl-form-advanced summary[b-uobodhhr3n] { cursor: pointer; user-select: none; padding: 4px 0; }
.vl-form-advanced summary:hover[b-uobodhhr3n] { color: var(--vl-accent); }
/* /src/Features/Visa/Pages/Public/VisaApplySuccess.razor.rz.scp.css */
/* Visa Apply Success — Manager Dashboard v4 theme */
.vapplysucc-root[b-72clwn2c6l] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-r: 10px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
}

    .vapplysucc-root h1[b-72clwn2c6l], .vapplysucc-root h2[b-72clwn2c6l], .vapplysucc-root h3[b-72clwn2c6l] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        letter-spacing: -0.025em;
        color: var(--d-ink);
    }

.vapplysucc-card[b-72clwn2c6l] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.vapplysucc-card-hd[b-72clwn2c6l] {
    padding: 12px 16px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vapplysucc-success-icon[b-72clwn2c6l] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--d-good-soft);
    color: var(--d-good);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.vapplysucc-cta[b-72clwn2c6l] {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18), 0 4px 12px -2px rgba(234,88,12,0.22);
    text-decoration: none;
}

    .vapplysucc-cta:hover[b-72clwn2c6l] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        text-decoration: none;
    }

.vapplysucc-ghost[b-72clwn2c6l] {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    border: 1px solid var(--d-line);
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

    .vapplysucc-ghost:hover[b-72clwn2c6l] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

.vapplysucc-num[b-72clwn2c6l] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-family: 'Inter Tight', 'Inter', sans-serif;
}

.vapplysucc-info[b-72clwn2c6l] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    font-size: 14px;
}
/* /src/Features/Visa/Pages/Public/VisaCatalog.razor.rz.scp.css */
/* VisaCatalog — NM design system, concept "tem visa trong hộ chiếu".
   Kỷ luật màu: MỘT nền giấy ấm cho toàn trang, mực navy cho chữ, CAM là màu nhấn duy nhất
   (giá, CTA, chip active, máy bay). Màu sắc rực rỡ chỉ đến từ ảnh thật.
   Section ngăn nhau bằng "đường bay" — hairline dashed + máy bay giấy bay ngang (animation).
   Token-only (--nm-*); khấc răng cưa của tem phải trùng đúng --vcat-bg. */
/* Mạch màu toàn trang nối tiếp banner (trời xanh) và footer (xám sáng lạnh):
   sky nhạt → trắng → sky nhạt. Cam là màu nhấn duy nhất, navy là mực chữ. */
.vcat[b-xreq9t2f0x] {
    --vcat-bg: #f4f7fb; /* sky nhạt — khấc răng cưa tem phải trùng đúng màu này */
    background: linear-gradient(180deg, #ffffff 0%, var(--vcat-bg) 110px);
    min-height: 60vh;
    padding: 36px 0 0;
    font-family: var(--nm-font);
    overflow-x: hidden;
    overflow-x: clip; /* máy bay bay quá mép phải không được sinh scroll ngang */
}

.vcat__wrap[b-xreq9t2f0x] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Wrap của khối catalog (con trực tiếp của .vcat) — khoảng thở trước section sau */
.vcat > .vcat__wrap[b-xreq9t2f0x] {
    padding-bottom: 72px;
}

/* ── Hero ── */
.vcat__hero[b-xreq9t2f0x] {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 26px;
}

.vcat__hero h1[b-xreq9t2f0x] {
    font-size: clamp(26px, 5vw, 36px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nm-ink);
    margin: 0 0 10px;
}

.vcat__hero p[b-xreq9t2f0x] {
    font-size: clamp(13px, 2.4vw, 15px);
    line-height: 1.6;
    color: var(--nm-muted);
    margin: 0;
}

/* ── Toolbar: chips châu lục + tìm kiếm ── */
.vcat__toolbar[b-xreq9t2f0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.vcat__chips[b-xreq9t2f0x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vcat__search[b-xreq9t2f0x] {
    flex: 0 1 240px;
    min-width: 180px;
}

/* ── Loading / empty ── */
.vcat__state[b-xreq9t2f0x] {
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    padding: 48px 20px;
}

.vcat__reset[b-xreq9t2f0x] {
    display: inline-block;
    margin-left: 8px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--nm-brand-600);
    cursor: pointer;
}

    .vcat__reset:hover[b-xreq9t2f0x] {
        text-decoration: underline;
    }

/* ── Grid: auto-fill → tự responsive trên mọi thiết bị ── */
.vcat__grid[b-xreq9t2f0x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

/* ── Item: link bọc tem ── */
.vcat__item[b-xreq9t2f0x] {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--nm-r-card);
}

    .vcat__item:hover[b-xreq9t2f0x] {
        text-decoration: none;
        color: inherit;
    }

    .vcat__item:focus-visible[b-xreq9t2f0x] {
        outline: 2px solid var(--nm-brand-600);
        outline-offset: 3px;
    }

/* ── Tem visa ── */
.vst[b-xreq9t2f0x] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    padding: 16px 18px 16px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.vcat__item:hover .vst[b-xreq9t2f0x] {
    transform: translateY(-4px);
    box-shadow: var(--nm-shadow-pop);
    border-color: var(--nm-border-strong);
}

/* Đầu tem: cờ + mã nước / châu lục */
.vst__head[b-xreq9t2f0x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.vst__flag[b-xreq9t2f0x] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 30px;
    line-height: 1;
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-100);
    border-radius: 12px;
    filter: drop-shadow(0 2px 4px rgba(16, 24, 40, .08));
}

.vst__codes[b-xreq9t2f0x] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.vst__iso[b-xreq9t2f0x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--nm-ink-2);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    padding: 2px 7px;
    border-radius: 6px;
}

.vst__region[b-xreq9t2f0x] {
    font-size: 11.5px;
    color: var(--nm-muted);
}

/* Tên nước */
.vst__name[b-xreq9t2f0x] {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--nm-ink);
    margin: 0;
}

.vst__name-en[b-xreq9t2f0x] {
    font-size: 12.5px;
    color: var(--nm-muted);
    margin: 2px 0 0;
}

/* Vạch răng cưa: đường xé của tem + 2 khấc tròn hai bên.
   ★ Khấc là một miếng BỊ CẮN RA khỏi mép tem: hình tròn tô đúng màu nền trang, đặt trùng tâm
   lên đường viền thẻ — nửa ngoài chìm vào nền (không thấy), nửa trong đè lên thân tem trắng.
   CẤM thêm `border` cho hình tròn: có viền là thành VÒNG TRÒN KÍN nổi lù lù trên mép thẻ
   (nhìn ra hai cái chấm) chứ không còn ra vết cắn. */
.vst__perf[b-xreq9t2f0x] {
    position: relative;
    border-top: 2px dashed var(--nm-border);
    margin: 14px -18px 12px;
}

    .vst__perf[b-xreq9t2f0x]::before,
    .vst__perf[b-xreq9t2f0x]::after {
        content: "";
        position: absolute;
        top: -7px; /* tâm trùng đường đứt 2px */
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--vcat-bg);
    }

    /* -9px: đưa tâm hình tròn ra đúng đường viền 1px của thẻ để cắn đứt cả viền */
    .vst__perf[b-xreq9t2f0x]::before {
        left: -9px;
    }

    .vst__perf[b-xreq9t2f0x]::after {
        right: -9px;
    }

/* ── Giá ── */
.vst__pricerow[b-xreq9t2f0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.vst__price[b-xreq9t2f0x] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.vst__price-label[b-xreq9t2f0x] {
    font-size: 11px;
    color: var(--nm-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vst__price-amount[b-xreq9t2f0x] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nm-brand-600);
}

.vst__price-unit[b-xreq9t2f0x] {
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.vst__price-na[b-xreq9t2f0x] {
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

/* ── Chân tem: MRZ trang trí + CTA ── */
.vst__foot[b-xreq9t2f0x] {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vst__mrz[b-xreq9t2f0x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--nm-ink);
    opacity: .28;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.vst__cta[b-xreq9t2f0x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-brand-600);
}

.vst__cta-arrow[b-xreq9t2f0x] {
    transition: transform .15s ease;
}

.vcat__item:hover .vst__cta-arrow[b-xreq9t2f0x] {
    transform: translateX(3px);
}

/* ── Section: xen kẽ trắng / sky nhạt, ranh giới = "đường bay" dashed ── */
.vsec[b-xreq9t2f0x] {
    position: relative;
    padding: 60px 0 72px;
    background: #ffffff;
}

/* Dải sky nhạt (Quy trình) — cùng tông với footer để trang kết thúc liền mạch */
.vsec--tint[b-xreq9t2f0x] {
    background: var(--vcat-bg);
}

.vsec__route[b-xreq9t2f0x] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--nm-border-strong);
}

/* Máy bay giấy bay dọc đường kẻ — điểm cam duy nhất chuyển động */
.vsec__plane[b-xreq9t2f0x] {
    position: absolute;
    top: -13px;
    left: 0;
    width: 26px;
    height: 26px;
    color: var(--nm-brand-600);
    display: grid;
    place-items: center;
    filter: drop-shadow(0 1px 2px rgba(16, 24, 40, .18));
    will-change: transform;
    animation: vsec-fly-b-xreq9t2f0x 18s linear infinite;
}

    .vsec__plane svg[b-xreq9t2f0x] {
        width: 17px;
        height: 17px;
        transform: rotate(45deg);
    }

@keyframes vsec-fly-b-xreq9t2f0x {
    0% {
        transform: translateX(-8vw) translateY(0);
    }

    25% {
        transform: translateX(20vw) translateY(-3px);
    }

    50% {
        transform: translateX(50vw) translateY(2px);
    }

    75% {
        transform: translateX(80vw) translateY(-3px);
    }

    100% {
        transform: translateX(108vw) translateY(0);
    }
}

/* ── Đầu section: kicker chữ nhỏ, không chip không gạch — typography tự gánh ── */
.vcat__sec-head[b-xreq9t2f0x] {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 28px;
}

.vcat__kicker[b-xreq9t2f0x] {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nm-brand-600);
    margin-bottom: 8px;
}

.vcat__sec-head h2[b-xreq9t2f0x] {
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nm-ink);
    margin: 0 0 8px;
}

.vcat__sec-head p[b-xreq9t2f0x] {
    font-size: clamp(13px, 2.4vw, 14.5px);
    line-height: 1.6;
    color: var(--nm-muted);
    margin: 0;
}

/* ── Dịch vụ khác — card ảnh thật + icon stamp ── */
.vos__grid[b-xreq9t2f0x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.vos[b-xreq9t2f0x] {
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .vos:hover[b-xreq9t2f0x] {
        transform: translateY(-4px);
        box-shadow: var(--nm-shadow-pop);
        border-color: var(--nm-border-strong);
    }

.vos__media[b-xreq9t2f0x] {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
}

.vos__img[b-xreq9t2f0x] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.vos:hover .vos__img[b-xreq9t2f0x] {
    transform: scale(1.06);
}

.vos__scrim[b-xreq9t2f0x] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 24, 40, .22) 0%, transparent 38%);
}

/* Icon stamp nổi trên ảnh — cùng chất liệu chip cờ của tem quốc gia */
.vos__ico[b-xreq9t2f0x] {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
    border-radius: 12px;
    color: var(--nm-brand-600);
    transition: transform .2s ease;
}

.vos:hover .vos__ico[b-xreq9t2f0x] {
    transform: rotate(-6deg) scale(1.06);
}

.vos__ico svg[b-xreq9t2f0x] {
    width: 20px;
    height: 20px;
}

.vos__body[b-xreq9t2f0x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    flex: 1;
}

.vos__title[b-xreq9t2f0x] {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nm-ink);
    margin: 0;
}

.vos__desc[b-xreq9t2f0x] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--nm-muted);
    margin: 0;
    flex: 1;
}

.vos__cta[b-xreq9t2f0x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nm-brand-600);
    text-decoration: none;
    margin-top: 2px;
}

    .vos__cta:hover[b-xreq9t2f0x] {
        text-decoration: none;
        color: var(--nm-brand-700);
    }

        .vos__cta:hover .vos__cta-arrow[b-xreq9t2f0x] {
            transform: translateX(3px);
        }

.vos__cta-arrow[b-xreq9t2f0x] {
    display: inline-block;
    transition: transform .15s ease;
}

/* ── Quy trình: timeline tối giản — vòng số mảnh, connector mảnh, cam chỉ ở bước cuối ── */
.vpr[b-xreq9t2f0x] {
    list-style: none;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

.vpr__step[b-xreq9t2f0x] {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding-bottom: 16px;
}

    .vpr__step:not(:last-child)[b-xreq9t2f0x]::before {
        content: "";
        position: absolute;
        left: 19px;
        top: 40px;
        bottom: -2px;
        border-left: 1px dashed var(--nm-border-strong);
    }

    .vpr__step:last-child[b-xreq9t2f0x] {
        padding-bottom: 0;
    }

.vpr__marker[b-xreq9t2f0x] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--nm-surface);
    border: 1.5px solid var(--nm-border-strong);
    border-radius: 50%;
    color: var(--nm-ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

    .vpr__marker svg[b-xreq9t2f0x] {
        width: 18px;
        height: 18px;
    }

.vpr__step:hover .vpr__marker[b-xreq9t2f0x] {
    border-color: var(--nm-brand-600);
    color: var(--nm-brand-600);
    transform: scale(1.06);
}

/* Bước cuối: điểm cam duy nhất của timeline — đích đến */
.vpr__step--done .vpr__marker[b-xreq9t2f0x] {
    background: var(--nm-brand-600);
    border-color: var(--nm-brand-600);
    color: #fff;
}

.vpr__step--done:hover .vpr__marker[b-xreq9t2f0x] {
    color: #fff;
}

.vpr__card[b-xreq9t2f0x] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    padding: 13px 16px;
    transition: border-color .2s ease;
}

.vpr__step:hover .vpr__card[b-xreq9t2f0x] {
    border-color: var(--nm-border-strong);
}

.vpr__title[b-xreq9t2f0x] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--nm-ink);
    margin: 0 0 4px;
}

.vpr__desc[b-xreq9t2f0x] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--nm-muted);
    margin: 0;
}

/* ── Scroll reveal — CSS thuần (animation-timeline: view), tự tắt trên trình duyệt cũ ── */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .vcat__item[b-xreq9t2f0x],
        .vos[b-xreq9t2f0x],
        .vpr__step[b-xreq9t2f0x] {
            animation: vcat-rise-b-xreq9t2f0x linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 38%;
        }

        .vpr__marker[b-xreq9t2f0x] {
            animation: vcat-pop-b-xreq9t2f0x linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }
    }
}

@keyframes vcat-rise-b-xreq9t2f0x {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes vcat-pop-b-xreq9t2f0x {
    from {
        transform: scale(.55);
    }

    to {
        transform: scale(1);
    }
}

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    .vst[b-xreq9t2f0x],
    .vst__cta-arrow[b-xreq9t2f0x],
    .vos[b-xreq9t2f0x],
    .vos__img[b-xreq9t2f0x],
    .vos__ico[b-xreq9t2f0x],
    .vos__cta-arrow[b-xreq9t2f0x],
    .vpr__marker[b-xreq9t2f0x] {
        transition: none;
    }

    .vcat__item:hover .vst[b-xreq9t2f0x],
    .vos:hover[b-xreq9t2f0x],
    .vos:hover .vos__img[b-xreq9t2f0x],
    .vos:hover .vos__ico[b-xreq9t2f0x],
    .vpr__step:hover .vpr__marker[b-xreq9t2f0x] {
        transform: none;
    }

    .vsec__plane[b-xreq9t2f0x] {
        animation: none;
        left: 8%;
    }
}

/* ── Tablet ── */
@media (max-width: 900px) {
    .vcat > .vcat__wrap[b-xreq9t2f0x] {
        padding-bottom: 56px;
    }

    .vsec[b-xreq9t2f0x] {
        padding: 48px 0 58px;
    }

    .vcat__grid[b-xreq9t2f0x],
    .vos__grid[b-xreq9t2f0x] {
        gap: 14px;
    }
}

/* ── Mobile ── */
@media (max-width: 480px) {
    .vcat__grid[b-xreq9t2f0x] {
        grid-template-columns: 1fr;
    }

    .vcat[b-xreq9t2f0x] {
        padding: 22px 0 0;
    }

    .vcat > .vcat__wrap[b-xreq9t2f0x] {
        padding-bottom: 44px;
    }

    .vsec[b-xreq9t2f0x] {
        padding: 40px 0 48px;
    }

    .vcat__toolbar[b-xreq9t2f0x] {
        flex-direction: column;
        align-items: stretch;
    }

    .vcat__search[b-xreq9t2f0x] {
        flex: 1 1 auto;
    }

    .vpr__step[b-xreq9t2f0x] {
        grid-template-columns: 34px 1fr;
        gap: 10px;
    }

        .vpr__step:not(:last-child)[b-xreq9t2f0x]::before {
            left: 16px;
            top: 34px;
        }

    .vpr__marker[b-xreq9t2f0x] {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

        .vpr__marker svg[b-xreq9t2f0x] {
            width: 15px;
            height: 15px;
        }
}
/* /src/Features/Visa/Pages/Public/VisaLanding.razor.rz.scp.css */
/* VisaLanding — trang dịch vụ visa theo quốc gia cho khách lẻ (/visa/{slug}).
   Hệ thiết kế NM: chỉ dùng token --nm-* (tránh các tên bị app.css khai đè: --nm-accent,
   --nm-bg, --nm-shadow-sm/md/lg, --nm-text*, --nm-radius*). Cam là màu nhấn DUY NHẤT.
   Mạch nền sky nhạt nối tiếp trang danh mục /visa để hai trang đọc ra cùng một khu. */

.vl[b-b8odkkf4sm] {
    --vl-bg: #f4f7fb; /* trùng --vcat-bg của trang danh mục /visa */
    --vl-line: var(--nm-border);
    --vl-head-h: 64px; /* header public là position:fixed trên desktop */
    --vl-nav-h: 52px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
    background: var(--vl-bg);
    overflow-x: clip;
}

.vl--plain[b-b8odkkf4sm] { background: var(--nm-surface); }

.vl-wrap[b-b8odkkf4sm] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Trạng thái tải / không tìm thấy ── */
.vl-state[b-b8odkkf4sm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    min-height: 54vh;
    padding-top: 90px;
}
.vl-state h1[b-b8odkkf4sm] { font-size: clamp(20px, 4vw, 26px); font-weight: 800; margin: 0; }
.vl-state p[b-b8odkkf4sm] { color: var(--nm-muted); font-size: 14px; margin: 0; max-width: 34rem; }
.vl-state__ico[b-b8odkkf4sm] {
    width: 64px; height: 64px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--nm-brand-50); color: var(--nm-brand-600);
}
.vl-spin[b-b8odkkf4sm] {
    width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid var(--nm-brand-100); border-top-color: var(--nm-brand-500);
    animation: vl-spin-b-b8odkkf4sm .8s linear infinite;
}
@keyframes vl-spin-b-b8odkkf4sm { to { transform: rotate(360deg); } }

/* ── Nút ── */
.vl-btn[b-b8odkkf4sm] {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--nm-r-pill);
    border: 1px solid transparent;
    font-family: inherit; font-size: 14px; font-weight: 600;
    line-height: 1.2; cursor: pointer; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    touch-action: manipulation;
}
.vl-btn--primary[b-b8odkkf4sm] { background: var(--nm-brand-500); color: var(--nm-on-brand); border-color: var(--nm-brand-500); }
.vl-btn--primary:hover[b-b8odkkf4sm] { background: var(--nm-brand-600); border-color: var(--nm-brand-600); }
.vl-btn--outline[b-b8odkkf4sm] { background: var(--nm-surface); color: var(--nm-brand-700); border-color: var(--nm-brand-300); }
.vl-btn--outline:hover[b-b8odkkf4sm] { background: var(--nm-brand-50); }
.vl-btn--lg[b-b8odkkf4sm] { padding: 13px 26px; font-size: 15px; }
.vl-btn--block[b-b8odkkf4sm] { width: 100%; }

/* ── Băng thông báo ── */
.vl-notice[b-b8odkkf4sm] {
    background: var(--nm-brand-50);
    border-bottom: 1px solid var(--nm-brand-100);
    color: var(--nm-brand-700);
    font-size: 13.5px;
    /* nằm dưới header fixed nên phải tự chừa chỗ */
    padding: calc(var(--vl-head-h) + 10px) 0 10px;
}
.vl-notice__inner[b-b8odkkf4sm] { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.vl-notice__flag[b-b8odkkf4sm] { font-size: 16px; }

/* ── Hero ── */
.vl-hero[b-b8odkkf4sm] {
    background: linear-gradient(180deg, var(--nm-surface) 0%, var(--vl-bg) 100%);
    padding: calc(var(--vl-head-h) + 26px) 0 34px;
    border-bottom: 1px solid var(--vl-line);
}
/* Có băng thông báo phía trên rồi thì hero không cần chừa chỗ cho header nữa */
.vl-notice + .vl-hero[b-b8odkkf4sm] { padding-top: 26px; }

.vl-hero__grid[b-b8odkkf4sm] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.vl-crumb[b-b8odkkf4sm] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--nm-muted); margin-bottom: 14px; }
.vl-crumb a[b-b8odkkf4sm] { color: var(--nm-ink-2); text-decoration: none; }
.vl-crumb a:hover[b-b8odkkf4sm] { color: var(--nm-brand-600); }
.vl-crumb__sep[b-b8odkkf4sm] { color: var(--nm-border-strong); }
.vl-crumb__cur[b-b8odkkf4sm] { color: var(--nm-ink); font-weight: 600; }

.vl-kicker[b-b8odkkf4sm] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vl-kicker__flag[b-b8odkkf4sm] { font-size: 22px; line-height: 1; }
.vl-kicker__text[b-b8odkkf4sm] { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nm-brand-600); }
.vl-kicker__iso[b-b8odkkf4sm] {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    padding: 2px 7px; border-radius: 5px;
    background: var(--nm-surface-2); color: var(--nm-ink-2);
}
.vl-kicker__tag[b-b8odkkf4sm] {
    font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: var(--nm-r-pill);
    background: #eef4ff; color: #1e40af; border: 1px solid #d8e4fb;
}

.vl-hero__title[b-b8odkkf4sm] {
    font-size: clamp(27px, 4.4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0 0 12px;
    color: var(--nm-ink);
}
.vl-hero__lead[b-b8odkkf4sm] {
    font-size: clamp(14px, 2.2vw, 16px);
    line-height: 1.65;
    color: var(--nm-ink-2);
    margin: 0 0 20px;
    max-width: 36rem;
}

/* Số liệu tin cậy */
.vl-facts[b-b8odkkf4sm] {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 0 22px;
}
.vl-fact[b-b8odkkf4sm] {
    flex: 1 1 130px;
    background: var(--nm-surface);
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    padding: 10px 14px;
}
.vl-fact dt[b-b8odkkf4sm] { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--nm-muted); margin: 0 0 3px; }
.vl-fact dd[b-b8odkkf4sm] { margin: 0; font-size: 17px; font-weight: 800; color: var(--nm-ink); letter-spacing: -0.01em; }
.vl-fact--price[b-b8odkkf4sm] { border-color: var(--nm-brand-300); background: var(--nm-brand-50); }
.vl-fact--price dd[b-b8odkkf4sm] { color: var(--nm-brand-700); }

.vl-hero__cta[b-b8odkkf4sm] { display: flex; flex-wrap: wrap; gap: 10px; }
.vl-offer[b-b8odkkf4sm] {
    margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--nm-brand-700);
    background: var(--nm-brand-50); border: 1px dashed var(--nm-brand-300);
    border-radius: var(--nm-r-input); padding: 8px 12px; display: inline-block;
}

.vl-hero__media img[b-b8odkkf4sm],
.vl-hero__media-fallback[b-b8odkkf4sm] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--nm-r-card);
    border: 1px solid var(--vl-line);
    box-shadow: var(--nm-shadow);
    display: block;
}
.vl-hero__media-fallback[b-b8odkkf4sm] {
    display: grid; place-items: center; gap: 6px;
    background: var(--nm-surface); color: var(--nm-muted);
}
.vl-hero__media-fallback span[b-b8odkkf4sm] { font-size: 56px; line-height: 1; }
.vl-hero__media-fallback strong[b-b8odkkf4sm] { font-size: 13px; letter-spacing: .18em; }

/* ── Mục lục dính ── */
.vl-secnav[b-b8odkkf4sm] {
    position: sticky;
    top: 0;                       /* mobile: header là absolute nên cuộn đi mất */
    z-index: 30;                  /* < 900 (header public) < 1000 (NmModal) */
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--vl-line);
}
.vl-secnav__inner[b-b8odkkf4sm] {
    display: flex; align-items: stretch; gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    min-height: var(--vl-nav-h);
}
.vl-secnav__inner[b-b8odkkf4sm]::-webkit-scrollbar { display: none; }
.vl-secnav__link[b-b8odkkf4sm] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0 14px;
    font-size: 13px; font-weight: 600; color: var(--nm-ink-2);
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.vl-secnav__link:hover[b-b8odkkf4sm] { color: var(--nm-brand-600); border-bottom-color: var(--nm-brand-300); }
.vl-secnav__no[b-b8odkkf4sm] {
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
    color: var(--nm-brand-500);
}

/* ── Thân trang ── */
.vl-main[b-b8odkkf4sm] { padding: 34px 0 64px; }
.vl-grid[b-b8odkkf4sm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    align-items: start;
}
.vl-content[b-b8odkkf4sm] { min-width: 0; display: flex; flex-direction: column; gap: 30px; }

/* ── Mục ── */
.vl-sec[b-b8odkkf4sm] {
    background: var(--nm-surface);
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    padding: 24px;
    /* neo cuộn: chừa chỗ cho dải mục lục dính */
    scroll-margin-top: calc(var(--vl-nav-h) + 14px);
}
.vl-sec__hd[b-b8odkkf4sm] { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.vl-sec__no[b-b8odkkf4sm] {
    font-size: 12px; font-weight: 800; letter-spacing: .08em;
    color: var(--nm-brand-500);
    padding-top: 2px;
}
.vl-sec__hd h2[b-b8odkkf4sm] {
    font-size: clamp(19px, 2.8vw, 23px);
    font-weight: 800; letter-spacing: -0.02em;
    margin: 0; color: var(--nm-ink);
}
.vl-sec__lead[b-b8odkkf4sm] { font-size: 13.5px; color: var(--nm-muted); margin: -4px 0 14px; }

/* Nội dung admin nhập dạng HTML */
.vl-prose[b-b8odkkf4sm] { font-size: 15px; line-height: 1.75; color: var(--nm-ink-2); }
.vl-prose :first-child[b-b8odkkf4sm] { margin-top: 0; }
.vl-prose :last-child[b-b8odkkf4sm] { margin-bottom: 0; }
.vl-prose p[b-b8odkkf4sm] { margin: 0 0 12px; }
.vl-prose h2[b-b8odkkf4sm], .vl-prose h3[b-b8odkkf4sm], .vl-prose h4[b-b8odkkf4sm] {
    font-weight: 700; color: var(--nm-ink); margin: 20px 0 8px;
    font-size: 17px; letter-spacing: -0.01em;
}
.vl-prose ul[b-b8odkkf4sm], .vl-prose ol[b-b8odkkf4sm] { margin: 0 0 12px; padding-left: 20px; }
.vl-prose li[b-b8odkkf4sm] { margin-bottom: 6px; }
.vl-prose a[b-b8odkkf4sm] { color: var(--nm-brand-600); }
.vl-prose img[b-b8odkkf4sm] { max-width: 100%; height: auto; border-radius: var(--nm-r-input); }
.vl-prose table[b-b8odkkf4sm] { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.vl-prose td[b-b8odkkf4sm], .vl-prose th[b-b8odkkf4sm] { border: 1px solid var(--vl-line); padding: 7px 10px; }

/* Khối phụ trong mục */
.vl-panel[b-b8odkkf4sm] {
    margin-top: 18px;
    background: var(--nm-surface-2);
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    padding: 16px 18px;
}
.vl-panel--plain[b-b8odkkf4sm] { background: transparent; border-style: dashed; }
.vl-panel__title[b-b8odkkf4sm] { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; color: var(--nm-ink); }
.vl-panel__lead[b-b8odkkf4sm] { font-size: 13.5px; color: var(--nm-muted); margin: 0 0 10px; line-height: 1.6; }

/* Danh sách có dấu tích cam */
.vl-checklist[b-b8odkkf4sm] { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vl-checklist--2col[b-b8odkkf4sm] { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; }
.vl-checklist li[b-b8odkkf4sm] {
    position: relative;
    padding-left: 26px;
    font-size: 14px; line-height: 1.6; color: var(--nm-ink-2);
}
.vl-checklist li[b-b8odkkf4sm]::before {
    content: "";
    position: absolute; left: 0; top: .45em;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--nm-brand-50);
    border: 1px solid var(--nm-brand-300);
}
.vl-checklist li[b-b8odkkf4sm]::after {
    content: "";
    position: absolute; left: 5px; top: calc(.45em + 4px);
    width: 4px; height: 7px;
    border: solid var(--nm-brand-600);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.vl-checklist--sm li[b-b8odkkf4sm] { font-size: 13.5px; padding-left: 23px; }

/* ── Bộ chọn loại visa ── */
.vl-segment[b-b8odkkf4sm] {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px;
    background: var(--nm-surface-2);
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-pill);
    margin-bottom: 16px;
}
.vl-segment__btn[b-b8odkkf4sm] {
    display: inline-flex; align-items: center; gap: 6px;
    flex: 1 1 auto; justify-content: center;
    padding: 8px 16px;
    border: none; background: transparent;
    border-radius: var(--nm-r-pill);
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--nm-ink-2); cursor: pointer;
    touch-action: manipulation;
    transition: background .15s, color .15s;
}
.vl-segment__btn:hover[b-b8odkkf4sm] { background: var(--nm-surface); }
.vl-segment__btn.is-active[b-b8odkkf4sm] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.vl-segment__count[b-b8odkkf4sm] {
    font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: var(--nm-r-pill);
    background: rgba(0, 0, 0, .07);
}
.vl-segment__btn.is-active .vl-segment__count[b-b8odkkf4sm] { background: rgba(255, 255, 255, .25); }

/* ── Bảng giá ── */
.vl-table-wrap[b-b8odkkf4sm] {
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}
.vl-price-table[b-b8odkkf4sm] { width: 100%; border-collapse: collapse; font-size: 14px; }
.vl-price-table thead th[b-b8odkkf4sm] {
    background: var(--nm-surface-2);
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--nm-ink-2);
    padding: 11px 14px; text-align: left;
    border-bottom: 1px solid var(--vl-line);
    white-space: nowrap;
}
.vl-price-table tbody th[b-b8odkkf4sm] {
    text-align: left; font-weight: 600; color: var(--nm-ink);
}
.vl-price-table td[b-b8odkkf4sm], .vl-price-table tbody th[b-b8odkkf4sm] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-surface-2);
    vertical-align: middle;
}
.vl-price-table tbody tr:last-child td[b-b8odkkf4sm],
.vl-price-table tbody tr:last-child th[b-b8odkkf4sm] { border-bottom: none; }
.vl-price-table tbody tr:hover[b-b8odkkf4sm] { background: var(--nm-brand-50); }
.vl-price-table .num[b-b8odkkf4sm] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-price-table tbody td.num[b-b8odkkf4sm] { font-weight: 700; color: var(--nm-brand-700); }

/* Phí bao gồm / không bao gồm */
.vl-fee[b-b8odkkf4sm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.vl-fee__col[b-b8odkkf4sm] { border: 1px solid var(--vl-line); border-radius: var(--nm-r-card); padding: 14px 16px; }
.vl-fee__col h4[b-b8odkkf4sm] { font-size: 13px; font-weight: 700; margin: 0 0 8px; letter-spacing: .02em; }
.vl-fee__col ul[b-b8odkkf4sm] { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vl-fee__col li[b-b8odkkf4sm] { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--nm-ink-2); }
.vl-fee__col li[b-b8odkkf4sm]::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.vl-fee__col--in[b-b8odkkf4sm] { background: var(--nm-ok-soft); border-color: #b8e6d0; }
.vl-fee__col--in h4[b-b8odkkf4sm] { color: var(--nm-ok); }
.vl-fee__col--in li[b-b8odkkf4sm]::before { content: "✓"; color: var(--nm-ok); }
.vl-fee__col--out[b-b8odkkf4sm] { background: var(--nm-surface-2); }
.vl-fee__col--out h4[b-b8odkkf4sm] { color: var(--nm-ink-2); }
.vl-fee__col--out li[b-b8odkkf4sm]::before { content: "×"; color: var(--nm-muted); }

.vl-note[b-b8odkkf4sm] {
    margin: 14px 0 0;
    font-size: 13px; line-height: 1.6; color: var(--nm-muted);
    background: var(--nm-surface-2);
    border-left: 3px solid var(--nm-brand-300);
    border-radius: 0 var(--nm-r-input) var(--nm-r-input) 0;
    padding: 10px 14px;
}
.vl-note--legend[b-b8odkkf4sm] { background: transparent; border-left: none; padding: 0; margin-top: 10px; font-size: 12px; }

/* ── Accordion (hồ sơ + hỏi đáp) ── */
.vl-acc-list[b-b8odkkf4sm] { display: flex; flex-direction: column; gap: 8px; }
.vl-acc[b-b8odkkf4sm] {
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow: hidden;
}
.vl-acc summary[b-b8odkkf4sm] {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px;
    cursor: pointer; user-select: none; list-style: none;
    font-size: 15px; font-weight: 600; color: var(--nm-ink);
    background: var(--nm-surface-2);
    touch-action: manipulation;
}
.vl-acc summary[b-b8odkkf4sm]::-webkit-details-marker { display: none; }
.vl-acc summary:hover[b-b8odkkf4sm] { color: var(--nm-brand-700); }
.vl-acc__title[b-b8odkkf4sm] { flex: 1; min-width: 0; line-height: 1.45; }
.vl-acc__count[b-b8odkkf4sm] {
    flex-shrink: 0;
    font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: var(--nm-r-pill);
    background: var(--nm-surface); color: var(--nm-muted);
    border: 1px solid var(--vl-line);
}
.vl-acc__tag[b-b8odkkf4sm] {
    flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50); color: var(--nm-brand-700);
}
.vl-acc__chev[b-b8odkkf4sm] { width: 17px; height: 17px; flex-shrink: 0; color: var(--nm-muted); transition: transform .18s; }
.vl-acc[open] .vl-acc__chev[b-b8odkkf4sm] { transform: rotate(180deg); }
.vl-acc__body[b-b8odkkf4sm] { padding: 14px 16px 16px; border-top: 1px solid var(--vl-line); }
.vl-acc--faq summary[b-b8odkkf4sm] { background: var(--nm-surface); }
.vl-acc--faq[open] summary[b-b8odkkf4sm] { background: var(--nm-brand-50); }
.vl-faq__answer[b-b8odkkf4sm] { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--nm-ink-2); white-space: pre-line; }

/* Danh sách giấy tờ */
.vl-doclist[b-b8odkkf4sm] { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vl-doclist li[b-b8odkkf4sm] {
    position: relative;
    padding-left: 20px;
    font-size: 14px; line-height: 1.6; color: var(--nm-ink-2);
}
.vl-doclist li[b-b8odkkf4sm]::before {
    content: "•";
    position: absolute; left: 4px; top: 0;
    color: var(--nm-border-strong); font-weight: 700;
}
/* Giấy tờ bắt buộc: đánh dấu sao cam để khách quét nhanh cái gì không thể thiếu */
.vl-doclist li.is-required[b-b8odkkf4sm]::before { content: "★"; left: 2px; font-size: 11px; color: var(--nm-brand-500); top: .18em; }
.vl-doclist__text[b-b8odkkf4sm] { color: var(--nm-ink); }
.vl-doclist__note[b-b8odkkf4sm] { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nm-muted); font-style: italic; }

.vl-doc-occ[b-b8odkkf4sm] { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--vl-line); }
.vl-doc-occ__hd[b-b8odkkf4sm] {
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--nm-brand-600); margin-bottom: 8px;
}

/* ── Quy trình ── */
.vl-steps[b-b8odkkf4sm] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.vl-step[b-b8odkkf4sm] { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.vl-step:last-child[b-b8odkkf4sm] { padding-bottom: 0; }
/* đường nối dọc giữa các bước */
.vl-step:not(:last-child)[b-b8odkkf4sm]::before {
    content: "";
    position: absolute; left: 17px; top: 38px; bottom: 4px;
    width: 2px; background: var(--nm-brand-100);
}
.vl-step__num[b-b8odkkf4sm] {
    flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--nm-brand-500); color: var(--nm-on-brand);
    font-size: 15px; font-weight: 800;
    position: relative; z-index: 1;
}
.vl-step__body[b-b8odkkf4sm] { flex: 1; min-width: 0; padding-top: 4px; }
.vl-step__body h4[b-b8odkkf4sm] { font-size: 15.5px; font-weight: 700; margin: 0 0 4px; color: var(--nm-ink); }
.vl-step__body p[b-b8odkkf4sm] { font-size: 14px; line-height: 1.65; color: var(--nm-ink-2); margin: 0; }
.vl-step__time[b-b8odkkf4sm] {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 8px;
    font-size: 12px; font-weight: 600; color: var(--nm-brand-700);
    background: var(--nm-brand-50); border-radius: var(--nm-r-pill);
    padding: 3px 10px;
}

/* ── Băng cam giữa trang ── */
.vl-promo[b-b8odkkf4sm] {
    background: linear-gradient(135deg, var(--nm-brand-50) 0%, var(--nm-surface) 100%);
    border: 1px solid var(--nm-brand-300);
    border-radius: var(--nm-r-card);
    padding: 22px 24px;
}
.vl-promo__lead[b-b8odkkf4sm] { font-size: 15.5px; font-weight: 600; line-height: 1.6; color: var(--nm-ink); margin: 0 0 12px; }
.vl-promo__list[b-b8odkkf4sm] { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.vl-promo__list li[b-b8odkkf4sm] { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--nm-ink-2); }
.vl-promo__list li[b-b8odkkf4sm]::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--nm-brand-600); font-weight: 800; }

/* ── Kết quả visa ── */
.vl-gallery[b-b8odkkf4sm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.vl-gallery__item[b-b8odkkf4sm] { margin: 0; border: 1px solid var(--vl-line); border-radius: var(--nm-r-card); overflow: hidden; background: var(--nm-surface-2); }
.vl-gallery__item img[b-b8odkkf4sm] { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vl-gallery__item figcaption[b-b8odkkf4sm] { padding: 8px 10px; font-size: 12px; color: var(--nm-muted); line-height: 1.45; }
.vl-more[b-b8odkkf4sm] { display: flex; justify-content: center; margin-top: 16px; }

/* ── Cảm nhận khách hàng ── */
.vl-reviews[b-b8odkkf4sm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.vl-review[b-b8odkkf4sm] {
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.vl-review__stars[b-b8odkkf4sm] { display: flex; gap: 2px; color: var(--nm-border-strong); }
.vl-review__stars .is-on[b-b8odkkf4sm] { color: #f59e0b; }
.vl-review__text[b-b8odkkf4sm] { margin: 0; font-size: 14px; line-height: 1.65; color: var(--nm-ink-2); }
.vl-review__visa[b-b8odkkf4sm] {
    width: 100%; max-height: 150px; object-fit: cover;
    border-radius: var(--nm-r-input); border: 1px solid var(--vl-line);
}
.vl-review__who[b-b8odkkf4sm] { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--vl-line); }
.vl-review__avatar[b-b8odkkf4sm] { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vl-review__avatar--txt[b-b8odkkf4sm] {
    display: grid; place-items: center;
    background: var(--nm-brand-50); color: var(--nm-brand-700);
    font-size: 12.5px; font-weight: 700;
}
.vl-review__meta[b-b8odkkf4sm] { display: flex; flex-direction: column; min-width: 0; }
.vl-review__meta strong[b-b8odkkf4sm] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }
.vl-review__meta small[b-b8odkkf4sm] { font-size: 11.5px; color: var(--nm-muted); }

/* ── Bài viết liên quan ── */
.vl-blog[b-b8odkkf4sm] { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.vl-blog__item[b-b8odkkf4sm] { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.vl-blog__thumb[b-b8odkkf4sm] {
    aspect-ratio: 16 / 10;
    border-radius: var(--nm-r-card);
    overflow: hidden;
    background: var(--nm-surface-2);
    border: 1px solid var(--vl-line);
    display: grid; place-items: center;
    color: var(--nm-muted);
}
.vl-blog__thumb img[b-b8odkkf4sm] { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.vl-blog__item:hover .vl-blog__thumb img[b-b8odkkf4sm] { transform: scale(1.04); }
.vl-blog__item h4[b-b8odkkf4sm] {
    margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--nm-ink);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vl-blog__item:hover h4[b-b8odkkf4sm] { color: var(--nm-brand-600); }
.vl-blog__item time[b-b8odkkf4sm] { font-size: 11.5px; color: var(--nm-muted); }

/* ── Cột phải ── */
.vl-aside[b-b8odkkf4sm] { min-width: 0; }
.vl-aside__sticky[b-b8odkkf4sm] { position: sticky; top: calc(var(--vl-nav-h) + 12px); display: flex; flex-direction: column; gap: 14px; }

.vl-cta-card[b-b8odkkf4sm] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-brand-300);
    border-radius: var(--nm-r-card);
    padding: 18px;
    box-shadow: var(--nm-shadow);
    display: flex; flex-direction: column; gap: 10px;
}
.vl-cta-card__hd[b-b8odkkf4sm] { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--nm-ink); }
.vl-cta-card__flag[b-b8odkkf4sm] { font-size: 20px; line-height: 1; }
.vl-cta-card__price[b-b8odkkf4sm] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--nm-brand-50); border-radius: var(--nm-r-input); }
.vl-cta-card__price span[b-b8odkkf4sm] { font-size: 12px; color: var(--nm-brand-700); font-weight: 600; }
.vl-cta-card__price strong[b-b8odkkf4sm] { font-size: 19px; font-weight: 800; color: var(--nm-brand-700); letter-spacing: -0.02em; }
.vl-cta-card__meta[b-b8odkkf4sm] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }
.vl-cta-card__meta b[b-b8odkkf4sm] { color: var(--nm-ink); }

.vl-widget[b-b8odkkf4sm] {
    background: var(--nm-surface);
    border: 1px solid var(--vl-line);
    border-radius: var(--nm-r-card);
    padding: 16px 18px;
}
.vl-widget__title[b-b8odkkf4sm] { font-size: 14.5px; font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--vl-line); color: var(--nm-ink); }
.vl-contact-row[b-b8odkkf4sm] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--nm-ink-2); padding: 5px 0; text-decoration: none; }
.vl-contact-row svg[b-b8odkkf4sm] { color: var(--nm-brand-500); flex-shrink: 0; }
.vl-contact-row--phone[b-b8odkkf4sm] { font-weight: 700; color: var(--nm-ink); font-size: 15px; }
.vl-contact-row--phone:hover[b-b8odkkf4sm] { color: var(--nm-brand-600); }

/* ── Modal tư vấn ── */
/* VisaLeadForm tự dựng thẻ trắng có viền + đổ bóng; trong modal thì thừa nên phải gỡ.
   Class truyền vào rơi lên markup của component CON ⇒ bắt buộc đi qua ::deep. */
.vl-modal__lead[b-b8odkkf4sm] { margin: 0 0 12px; font-size: 13.5px; color: var(--nm-muted); line-height: 1.6; }
.vl[b-b8odkkf4sm]  .vl-leadform { border: none; box-shadow: none; padding: 0; border-radius: 0; background: transparent; }

/* ══════════════ Responsive ══════════════ */

/* Desktop: header public là position:fixed ⇒ mục lục dính phải nằm ngay dưới nó */
@media (min-width: 1024px) {
    .vl-secnav[b-b8odkkf4sm] { top: var(--vl-head-h); }
    .vl-sec[b-b8odkkf4sm] { scroll-margin-top: calc(var(--vl-head-h) + var(--vl-nav-h) + 14px); }
    .vl-aside__sticky[b-b8odkkf4sm] { top: calc(var(--vl-head-h) + var(--vl-nav-h) + 14px); }
}

@media (max-width: 1023px) {
    .vl-grid[b-b8odkkf4sm] { grid-template-columns: minmax(0, 1fr); }
    /* Thẻ đặt dịch vụ lên trên phần "vì sao chọn" khi xếp dọc */
    .vl-aside__sticky[b-b8odkkf4sm] { position: static; }
}

@media (max-width: 860px) {
    .vl-hero__grid[b-b8odkkf4sm] { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .vl-hero__media[b-b8odkkf4sm] { order: -1; }
    .vl-hero__media img[b-b8odkkf4sm], .vl-hero__media-fallback[b-b8odkkf4sm] { aspect-ratio: 16 / 9; }
    .vl-sec[b-b8odkkf4sm] { padding: 20px 16px; }
}

/* Bảng giá trên điện thoại: đổi sang dạng thẻ, mỗi ô có nhãn cột riêng —
   bảng 7 cột nhét vào màn 390px thì không ai đọc nổi. */
@media (max-width: 720px) {
    .vl-table-wrap[b-b8odkkf4sm] { border: none; border-radius: 0; }
    .vl-price-table thead[b-b8odkkf4sm] { display: none; }
    .vl-price-table[b-b8odkkf4sm], .vl-price-table tbody[b-b8odkkf4sm], .vl-price-table tr[b-b8odkkf4sm] { display: block; width: 100%; }
    .vl-price-table tr[b-b8odkkf4sm] {
        border: 1px solid var(--vl-line);
        border-radius: var(--nm-r-card);
        margin-bottom: 10px;
        overflow: hidden;
    }
    .vl-price-table tbody th[b-b8odkkf4sm], .vl-price-table td[b-b8odkkf4sm] {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 9px 14px;
        border-bottom: 1px solid var(--nm-surface-2);
    }
    .vl-price-table tbody th[b-b8odkkf4sm] { background: var(--nm-surface-2); font-size: 14px; }
    .vl-price-table tbody th[b-b8odkkf4sm]::before, .vl-price-table td[b-b8odkkf4sm]::before {
        content: attr(data-label);
        font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
        color: var(--nm-muted);
        flex-shrink: 0;
    }
    .vl-price-table .num[b-b8odkkf4sm] { text-align: right; }
    .vl-price-table tbody tr:hover[b-b8odkkf4sm] { background: transparent; }
}

@media (max-width: 560px) {
    .vl-facts[b-b8odkkf4sm] { gap: 8px; }
    .vl-fact[b-b8odkkf4sm] { flex: 1 1 calc(50% - 4px); padding: 9px 11px; }
    .vl-fact dd[b-b8odkkf4sm] { font-size: 15px; }
    .vl-hero__cta .vl-btn[b-b8odkkf4sm] { flex: 1 1 100%; }
    .vl-segment[b-b8odkkf4sm] { border-radius: var(--nm-r-card); }
    .vl-segment__btn[b-b8odkkf4sm] { flex: 1 1 calc(50% - 4px); }
    .vl-gallery[b-b8odkkf4sm] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .vl-blog[b-b8odkkf4sm] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Ô nhập ≥16px trên thiết bị cảm ứng để iOS không tự phóng to màn hình */
@media (pointer: coarse) {
    .vl input[b-b8odkkf4sm], .vl textarea[b-b8odkkf4sm], .vl select[b-b8odkkf4sm] { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .vl *[b-b8odkkf4sm], .vl *[b-b8odkkf4sm]::before, .vl *[b-b8odkkf4sm]::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* /src/Features/Wallet/Pages/Ca/Budget.razor.rz.scp.css */
/* /ca/budget — chuẩn nm-list token-only: head + NmStatGrid KPI + 2 bảng DataGrid (cảnh báo, cost center).
   Cùng ngôn ngữ với /ca/payments, /ca/invoices, /ca/purchases — trang này trước đây là lưới card riêng. */
.nm-list-page[b-vdb8hcbu5r] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-vdb8hcbu5r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-vdb8hcbu5r] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cabud-title[b-vdb8hcbu5r] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-vdb8hcbu5r] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-vdb8hcbu5r] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-vdb8hcbu5r] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.kpi-sub[b-vdb8hcbu5r] { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--nm-muted); }
.cabud-na[b-vdb8hcbu5r] { color: var(--nm-muted); font-weight: 700; }

/* ── Header của NmCard ── */
[b-vdb8hcbu5r] .cabud-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabud-card-ico[b-vdb8hcbu5r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cabud-card-ico.is-alert[b-vdb8hcbu5r] { background: var(--nm-warn-50, var(--nm-surface-2)); color: var(--nm-warn); }
.cabud-card-title[b-vdb8hcbu5r] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cabud-card-count[b-vdb8hcbu5r] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cabud-card-tally[b-vdb8hcbu5r] { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Chú giải màu — nói về thanh "Sử dụng" trong bảng cost center */
.cabud-legend[b-vdb8hcbu5r] { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabud-legend-item[b-vdb8hcbu5r] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.cabud-legend-item small[b-vdb8hcbu5r] { color: var(--nm-muted); font-size: 10.5px; }
.cabud-dot[b-vdb8hcbu5r] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cabud-dot.ok[b-vdb8hcbu5r] { background: var(--nm-ok); }
.cabud-dot.warn[b-vdb8hcbu5r] { background: var(--nm-warn); }
.cabud-dot.bad[b-vdb8hcbu5r] { background: var(--nm-bad); }
.cabud-legend-mark[b-vdb8hcbu5r] {
    display: inline-block;
    width: 2px;
    height: 10px;
    border-radius: 1px;
    background: var(--nm-ink);
    opacity: .55;
    flex-shrink: 0;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────────
   ::deep phải đứng ĐẦU selector. `.cabud-toolbar` là Class truyền vào NmToolbar nên nó nằm trên
   div gốc của component đó — div ấy KHÔNG mang thuộc tính scope của trang, viết
   `.cabud-toolbar ::deep …` sẽ biên dịch ra `.cabud-toolbar[b-xxx] …` và không khớp gì cả.
   Hệ quả: mọi ô lọc rơi về width:100% mặc định của .nm-input-wrap/.nm-select-wrap và xuống dòng
   chồng lên nhau. Đặt ::deep lên đầu thì scope neo vào .nm-list-page (phần tử của trang). */
[b-vdb8hcbu5r] .cabud-toolbar .nm-input-wrap { width: 240px; flex: 0 0 auto; }
[b-vdb8hcbu5r] .cabud-toolbar .nm-select-wrap { width: 180px; flex: 0 0 auto; }
/* Ô sắp xếp bên phải chứa nhãn dài ("Tỷ lệ sử dụng: cao → thấp") nên rộng hơn các ô lọc. */
[b-vdb8hcbu5r] .cabud-toolbar .nm-toolbar__end .nm-select-wrap { width: 215px; }
.cabud-chips[b-vdb8hcbu5r] { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Cell trong DataGrid ─────────────────────────────────────────────────────
   Cell do TRANG dựng nên vẫn nằm trong scope CSS của trang; riêng khung bảng
   (.nm-grid*) thuộc component DataGrid nên không style ở đây. */
.cell-2line[b-vdb8hcbu5r] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; max-width: 100%; }
.cell-2line__main[b-vdb8hcbu5r] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nm-ink);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cell-2line__sub[b-vdb8hcbu5r] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--nm-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip phòng ban của cost center */
.cabud-dept[b-vdb8hcbu5r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 150px;
    padding: 1px 7px;
    border: 1px solid var(--nm-border);
    border-radius: 999px;
    font-size: 10.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cabud-dept i[b-vdb8hcbu5r] { font-size: 10px; }

.cabud-period[b-vdb8hcbu5r] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

.cabud-money[b-vdb8hcbu5r] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cabud-money.is-soft[b-vdb8hcbu5r] { font-weight: 500; color: var(--nm-ink-2); }
.cabud-money.is-bad[b-vdb8hcbu5r] { color: var(--nm-bad); }
.cabud-money.is-good[b-vdb8hcbu5r] { color: var(--nm-ok); }

.cabud-count[b-vdb8hcbu5r] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); font-variant-numeric: tabular-nums; }

.cabud-cell[b-vdb8hcbu5r] { font-size: 12.5px; color: var(--nm-ink); }
.cabud-cell-mono[b-vdb8hcbu5r] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}

/* ── Cột "Sử dụng": thanh tiến độ + vạch nhịp kỳ ──────────────────────────────
   NmProgress là component riêng (CSS bị scope) nên vạch phải là phần tử của TRANG,
   đặt tuyệt đối trên một wrapper ôm sát thanh. Vạch = % thời gian kỳ đã trôi:
   fill vượt qua vạch nghĩa là đang tiêu nhanh hơn thời gian. */
.cabud-util[b-vdb8hcbu5r] { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cabud-track[b-vdb8hcbu5r] { position: relative; flex: 1; min-width: 60px; }
.cabud-pace-mark[b-vdb8hcbu5r] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 14px;
    border-radius: 1px;
    background: var(--nm-ink);
    opacity: .55;
    pointer-events: auto;
    cursor: help;
}

/* ── Cột "Nhịp chi": badge nhịp + ngày còn lại / ngày dự kiến cạn ── */
.cabud-pace[b-vdb8hcbu5r] { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cabud-note[b-vdb8hcbu5r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cabud-note i[b-vdb8hcbu5r] { font-size: 10.5px; }
.cabud-note.is-bad[b-vdb8hcbu5r] { color: var(--nm-bad); font-weight: 600; }

.cabud-hint[b-vdb8hcbu5r] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 11.5px;
    color: var(--nm-muted);
}
.cabud-hint i[b-vdb8hcbu5r] { color: var(--nm-info); }

/* ── Modal chi tiết ── */
.cabud-detail[b-vdb8hcbu5r] { display: flex; flex-direction: column; gap: 14px; }
.cabud-detail-tags[b-vdb8hcbu5r] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabud-detail-bar[b-vdb8hcbu5r] { display: flex; flex-direction: column; gap: 6px; }
.cabud-detail-bar-legend[b-vdb8hcbu5r] {
    display: flex;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--nm-muted);
}
.cabud-detail-bar-legend b[b-vdb8hcbu5r] { color: var(--nm-ink); font-variant-numeric: tabular-nums; }

.cabud-detail-trips[b-vdb8hcbu5r] { display: flex; flex-direction: column; gap: 8px; }
.cabud-detail-trips-hd[b-vdb8hcbu5r] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cabud-detail-trips-hd h3[b-vdb8hcbu5r] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
}
.cabud-detail-trips-hd[b-vdb8hcbu5r]  .nm-select { margin-left: auto; }

@media (max-width: 640px) {
    .nm-list-page[b-vdb8hcbu5r] { padding: 16px 14px 22px; }
    .cabud-legend[b-vdb8hcbu5r] { margin-left: 0; }
    .cabud-card-tally[b-vdb8hcbu5r] { margin-left: 0; }

    [b-vdb8hcbu5r] .cabud-toolbar .nm-input-wrap,
    [b-vdb8hcbu5r] .cabud-toolbar .nm-select-wrap,
    [b-vdb8hcbu5r] .cabud-toolbar .nm-toolbar__end .nm-select-wrap { width: 100%; flex: 1 1 100%; }
}
/* /src/Features/Wallet/Pages/Ca/CaLoyaltyCards.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Loyalty cards (CA) — chuẩn nm-list, ưu tiên primitive Nm*:
   NmCard (thẻ, modifier is-default/is-off qua ::deep) · NmIconButton ·
   NmDescriptionList (meta) · NmFormGrid/NmDateInput (modal).
   CSS chỉ còn layout + phong cách "thẻ thành viên" đặc thù.
   ═══════════════════════════════════════════════════════════════ */

.nm-list-page[b-so7hh35l1s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-so7hh35l1s] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-so7hh35l1s] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-so7hh35l1s] { margin: 0; font-size: 14px; color: var(--nm-muted); max-width: 640px; }
.nm-list-actions[b-so7hh35l1s] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lc-head-left[b-so7hh35l1s] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.lc-loading[b-so7hh35l1s] { display: flex; flex-direction: column; gap: 12px; }

/* ── Card grid — NmCard + modifier qua ::deep ── */
.lc-grid[b-so7hh35l1s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.lc-grid[b-so7hh35l1s]  .lc-card {
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lc-grid[b-so7hh35l1s]  .lc-card:hover {
    border-color: var(--nm-brand-300);
    box-shadow: var(--nm-shadow-pop);
    transform: translateY(-2px);
}
.lc-grid[b-so7hh35l1s]  .lc-card.is-default {
    border-color: var(--nm-brand-300);
    background: linear-gradient(180deg, var(--nm-brand-50) 0%, var(--nm-surface) 72px);
}
.lc-grid[b-so7hh35l1s]  .lc-card.is-off { opacity: .65; }

.lc-card-inner[b-so7hh35l1s] { display: flex; flex-direction: column; gap: 14px; }

.lc-card-head[b-so7hh35l1s] { display: flex; align-items: center; gap: 11px; }

.lc-card-ico[b-so7hh35l1s] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.lc-card-titles[b-so7hh35l1s] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lc-card-name[b-so7hh35l1s] {
    font-size: 14px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lc-card-titles small[b-so7hh35l1s] { font-size: 11.5px; color: var(--nm-muted); }

.lc-card-num[b-so7hh35l1s] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--nm-ink);
}

/* NmDescriptionList trong thẻ: bỏ kẻ ngang, nén khoảng cách */
.lc-card-inner[b-so7hh35l1s]  .lc-card-meta { gap: 0 16px; }
.lc-card-inner[b-so7hh35l1s]  .lc-card-meta .nm-dl__item { border-bottom: none; padding: 0; }
.lc-card-inner[b-so7hh35l1s]  .lc-card-meta .nm-dl__term {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.lc-card-inner[b-so7hh35l1s]  .lc-card-meta .nm-dl__desc { font-weight: 600; }

.lc-card-actions[b-so7hh35l1s] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--nm-border);
}
.lc-card-actions-end[b-so7hh35l1s] { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ── Modal form ── */
.lc-form[b-so7hh35l1s] { display: flex; flex-direction: column; gap: 12px; }
.lc-form-checks[b-so7hh35l1s] { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }

@media (max-width: 640px) {
    .nm-list-page[b-so7hh35l1s] { padding: 16px 14px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-so7hh35l1s] { transition: none !important; animation-duration: .001ms !important; }
}
/* /src/Features/Wallet/Pages/Ca/CaWalletSummary.razor.rz.scp.css */
/* /ca/wallet/summary — wrapper mỏng; toàn bộ UI nằm trong WalletSummaryView (chuẩn nm-list, scoped css riêng). */
.cawsum-root[b-02ropb6n1e] {
    min-height: calc(100vh - 64px);
}
/* /src/Features/Wallet/Pages/Ca/Invoices.razor.rz.scp.css */
/* /ca/invoices — chuẩn nm-list token-only: head + KPI + NmToolbar lọc + chip trạng thái + NmCard DataGrid
   + NmDrawer chi tiết. Chrome của bảng/chip/drawer do Nm* lo, file này chỉ shell trang và cell helper. */
.nm-list-page[b-2xml5z3d3o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-2xml5z3d3o] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-2xml5z3d3o] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.cainv-title[b-2xml5z3d3o] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-2xml5z3d3o] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-2xml5z3d3o] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-2xml5z3d3o] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* Mã GD có booking đi kèm thì bấm được → phải trông như link, không chỉ đổi con trỏ. */
a.nm-code-pill.is-link[b-2xml5z3d3o] { text-decoration: none; transition: background .15s ease, color .15s ease; }
a.nm-code-pill.is-link:hover[b-2xml5z3d3o] { background: var(--nm-brand-100); text-decoration: underline; }

/* ── Toolbar ── */
/* NmInput/NmSelect/NmDateRange mặc định giãn 100% → khoá bề rộng để cả hàng lọc nằm gọn 1 dòng.
   .nm-daterange còn tự đặt width:100% nên phải ghi đè, không thì nó chiếm trọn 1 hàng riêng. */
[b-2xml5z3d3o] .cainv-toolbar { padding: 10px 12px; }
/* Ép nhóm start trải hết bề ngang: gạch ngăn của hàng chip mới kéo đủ khung, không cụt theo nội dung. */
[b-2xml5z3d3o] .cainv-toolbar .nm-toolbar__start { flex: 1 1 100%; row-gap: 10px; }
[b-2xml5z3d3o] .cainv-toolbar .nm-input-wrap { width: 230px; flex: 0 0 auto; }
[b-2xml5z3d3o] .cainv-toolbar .nm-select-wrap { width: 168px; flex: 0 0 auto; }
[b-2xml5z3d3o] .cainv-toolbar .nm-daterange { width: auto; flex: 0 0 auto; }
[b-2xml5z3d3o] .cainv-toolbar .nm-dateinput-wrap { width: 144px; }

/* ── Chip lọc trạng thái ── */
/* Nằm trong cùng khung toolbar nhưng ép xuống dòng riêng (flex-basis 100%) + gạch ngăn mảnh. */
.cainv-tabs[b-2xml5z3d3o] {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 10px;
    border-top: 1px solid var(--nm-border);
}
.cainv-tabs[b-2xml5z3d3o]::-webkit-scrollbar { display: none; }
/* Chip ở đây là bộ lọc phụ, không phải nút chính → hạ cỡ cho khối lọc thấp xuống. */
[b-2xml5z3d3o] .cainv-tabs .nm-chip { height: 28px; padding: 0 10px; font-size: 13px; }
/* Chấm "đã huỷ" — NmChip không có tone trung tính, thêm ở đây thay vì nhét màu vào UI-kit. */
[b-2xml5z3d3o] .cainv-tabs .nm-chip__dot--muted { background: var(--nm-border-strong); }

.cainv-tab-count[b-2xml5z3d3o] {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Chip active nền brand-50 (nhạt) → ô số phải đảo sang nền đặc mới nổi lên được. */
[b-2xml5z3d3o] .cainv-tabs .nm-chip--active .cainv-tab-count { background: var(--nm-brand-500); color: #fff; }

/* ── Card danh sách ── */
[b-2xml5z3d3o] .cainv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cainv-card-ico[b-2xml5z3d3o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.cainv-card-title[b-2xml5z3d3o] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.cainv-card-count[b-2xml5z3d3o] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.cainv-card-hint[b-2xml5z3d3o] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* Dòng phụ dưới mỗi ô KPI đối soát (số giao dịch / tỷ lệ thành công). */
.cainv-kpi-sub[b-2xml5z3d3o] { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--nm-muted); }

/* ── Cell trong DataGrid ── */
/* Ô 2 dòng: giá trị chính + dòng phụ mờ (tiền niêm yết gốc, giờ trong ngày). */
.cainv-cell2[b-2xml5z3d3o] { display: inline-flex; flex-direction: column; gap: 1px; }
.nm-grid__td--right .cainv-cell2[b-2xml5z3d3o] { align-items: flex-end; }

.cainv-money[b-2xml5z3d3o] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cainv-money.is-good[b-2xml5z3d3o] { color: var(--nm-ok); font-weight: 600; }
.cainv-money-sub[b-2xml5z3d3o] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cainv-time[b-2xml5z3d3o] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.cainv-time-sub[b-2xml5z3d3o] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.cainv-row-actions[b-2xml5z3d3o] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Giao dịch huỷ/lỗi vẫn phải nằm trong sổ để đối soát, nhưng làm mờ để mắt bám các dòng còn hiệu lực. */
[b-2xml5z3d3o] .cainv-card .cainv-row-muted { opacity: .62; }

/* ── Footer phân trang ── */
.cainv-foot[b-2xml5z3d3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}
.cainv-total[b-2xml5z3d3o] { font-size: 12.5px; color: var(--nm-muted); }
.cainv-total strong[b-2xml5z3d3o] { color: var(--nm-ink); font-variant-numeric: tabular-nums; }

/* ── Drawer chi tiết giao dịch ── */
.cainv-dhead[b-2xml5z3d3o] { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cainv-damount[b-2xml5z3d3o] {
    margin: 10px 0 16px;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.cainv-mono[b-2xml5z3d3o] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    word-break: break-all;
}
.cainv-dfoot[b-2xml5z3d3o] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

@media (max-width: 640px) {
    .nm-list-page[b-2xml5z3d3o] { padding: 16px 14px 22px; }
    [b-2xml5z3d3o] .cainv-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
    [b-2xml5z3d3o] .cainv-toolbar .nm-select-wrap { width: 100%; flex: 1 1 100%; }
    [b-2xml5z3d3o] .cainv-toolbar .nm-daterange { width: 100%; flex: 1 1 100%; }
    [b-2xml5z3d3o] .cainv-toolbar .nm-dateinput-wrap { width: auto; flex: 1 1 0; }
    .cainv-foot[b-2xml5z3d3o] { justify-content: center; }
}
/* /src/Features/Wallet/Pages/Manager/BudgetIndex.razor.rz.scp.css */
/* BudgetIndex — Manager Dashboard v4 theme. Prefix: budget- */
.budget-root[b-q2mu4jaufb] {
    --d-bg: #f8fafc;
    --d-surface: #ffffff;
    --d-surface-2: #f5f3ef;
    --d-line: #e8e4df;
    --d-line-2: #efeae3;
    --d-ink: #1c1917;
    --d-ink-2: #44403c;
    --d-ink-3: #78716c;
    --d-ink-4: #a8a29e;
    --d-accent: #ea580c;
    --d-accent-soft: #fff1e6;
    --d-accent-grad: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #fb923c 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 10px;
    color: var(--d-ink); background: var(--d-bg);
}
.budget-num[b-q2mu4jaufb] { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.budget-shell[b-q2mu4jaufb] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); display: flex; flex-direction: column; overflow: hidden;
}

.budget-header[b-q2mu4jaufb] {
    background: var(--d-surface); border-bottom: 1px solid var(--d-line);
    padding: 14px 20px; flex-shrink: 0;
}
.budget-title[b-q2mu4jaufb] {
    margin: 0; font-family: 'Inter Tight','Inter',sans-serif;
    font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: var(--d-ink); line-height: 1.2;
}
.budget-subtitle[b-q2mu4jaufb] { font-size: 12px; color: var(--d-ink-3); margin-top: 2px; }
.budget-ico[b-q2mu4jaufb] {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--d-accent-grad); color: #fff;
    display: grid; place-items: center; flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(234,88,12,0.18);
}

.budget-stats-strip[b-q2mu4jaufb] {
    display: inline-flex; border: 1px solid var(--d-line);
    border-radius: var(--d-r); overflow: hidden; background: var(--d-surface);
}
.budget-stat-cell[b-q2mu4jaufb] {
    padding: 8px 14px; border-right: 1px solid var(--d-line); text-align: center; min-width: 0;
}
.budget-stat-cell:last-child[b-q2mu4jaufb] { border-right: 0; }
.budget-stat-lbl[b-q2mu4jaufb] { font-size: 10px; color: var(--d-ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.budget-stat-val[b-q2mu4jaufb] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px; font-weight: 600; color: var(--d-ink);
    font-variant-numeric: tabular-nums; margin-top: 2px;
}
.budget-stat-val.good[b-q2mu4jaufb] { color: var(--d-good); }
.budget-stat-val.warn[b-q2mu4jaufb] { color: var(--d-warn); }
.budget-stat-val.danger[b-q2mu4jaufb] { color: var(--d-danger); }

.budget-body[b-q2mu4jaufb] { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }

.budget-card[b-q2mu4jaufb] {
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-radius: var(--d-r); transition: border-color .12s, box-shadow .12s;
    padding: 14px 16px;
}
.budget-card.warn[b-q2mu4jaufb] { border-color: color-mix(in srgb, var(--d-warn) 30%, transparent); }
.budget-card.danger[b-q2mu4jaufb] { border-color: color-mix(in srgb, var(--d-danger) 30%, transparent); }

.budget-tag[b-q2mu4jaufb] {
    display: inline-flex; align-items: center; padding: 1px 8px;
    border-radius: 999px; font-size: 10.5px; font-weight: 600;
}
.budget-tag.good[b-q2mu4jaufb] { background: color-mix(in srgb, var(--d-good) 12%, transparent); color: var(--d-good); }
.budget-tag.warn[b-q2mu4jaufb] { background: var(--d-warn-soft); color: var(--d-warn); }
.budget-tag.danger[b-q2mu4jaufb] { background: color-mix(in srgb, var(--d-danger) 12%, transparent); color: var(--d-danger); }

.budget-bar[b-q2mu4jaufb] {
    width: 100%; height: 6px; background: var(--d-surface-2);
    border-radius: 999px; overflow: hidden;
}
.budget-bar > span[b-q2mu4jaufb] {
    display: block; height: 100%; border-radius: 999px;
    background: var(--d-good); transition: width .2s;
}
.budget-bar > span.warn[b-q2mu4jaufb] { background: var(--d-warn); }
.budget-bar > span.danger[b-q2mu4jaufb] { background: var(--d-danger); }

.budget-toast[b-q2mu4jaufb] {
    position: fixed; top: 16px; right: 16px; z-index: 50; max-width: 320px;
    background: var(--d-surface); border: 1px solid var(--d-line);
    border-left: 3px solid var(--d-warn); border-radius: var(--d-r);
    padding: 12px 14px; box-shadow: 0 10px 30px -8px rgba(28,25,23,0.25);
    display: flex; align-items: flex-start; gap: 10px;
}
.budget-toast.danger[b-q2mu4jaufb] { border-left-color: var(--d-danger); }
.budget-toast-title[b-q2mu4jaufb] { font-size: 12px; font-weight: 600; color: var(--d-ink); margin: 0; }
.budget-toast-msg[b-q2mu4jaufb] { font-size: 11.5px; color: var(--d-ink-3); margin: 4px 0 0; }
.budget-toast-close[b-q2mu4jaufb] { border: 0; background: transparent; color: var(--d-ink-4); cursor: pointer; line-height: 1; }
.budget-toast-close:hover[b-q2mu4jaufb] { color: var(--d-ink); }

.budget-warn-banner[b-q2mu4jaufb] {
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--d-danger) 30%, transparent);
    color: var(--d-danger); border-radius: var(--d-r);
    padding: 8px 14px; font-size: 12px; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
/* /src/Features/Wallet/Pages/Manager/CompanyWalletDetail.razor.rz.scp.css */
/* /manager/wallet/companies/{id} — sổ quỹ một công ty. Khung chung với nm-list; hero riêng vì
   trang này lấy SỐ DƯ làm trung tâm (kế toán mở ra là để nhìn số dư rồi mới thao tác). */

.nm-list-page[b-m7p9o5m8ra] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Hero ── */
.cwd-hero[b-m7p9o5m8ra] { display: flex; flex-direction: column; gap: 18px; }

.cwd-hero-main[b-m7p9o5m8ra] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cwd-co[b-m7p9o5m8ra] { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cwd-co__avatar[b-m7p9o5m8ra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 20px;
    font-weight: 800;
}
.cwd-co__text[b-m7p9o5m8ra] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cwd-co__name[b-m7p9o5m8ra] { margin: 0; font-size: 19px; font-weight: 800; color: var(--nm-ink); }
.cwd-co__meta[b-m7p9o5m8ra] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cwd-balance[b-m7p9o5m8ra] { display: flex; flex-direction: column; gap: 3px; }
.cwd-balance__lbl[b-m7p9o5m8ra] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.cwd-balance__val[b-m7p9o5m8ra] {
    font-size: 28px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.cwd-actions[b-m7p9o5m8ra] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Chỉ số ngân sách ── */
.cwd-metrics[b-m7p9o5m8ra] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nm-border);
}
.cwd-metric[b-m7p9o5m8ra] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cwd-metric small[b-m7p9o5m8ra] { font-size: 11.5px; font-weight: 600; color: var(--nm-muted); }
.cwd-metric b[b-m7p9o5m8ra] { font-size: 15px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.cwd-metric b.is-good[b-m7p9o5m8ra] { color: var(--nm-ok, #16a34a); }
.cwd-metric b.is-warn[b-m7p9o5m8ra] { color: var(--nm-warn); }
.cwd-metric b.is-bad[b-m7p9o5m8ra] { color: var(--nm-bad, #dc2626); }

.cwd-metric-bar[b-m7p9o5m8ra] { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.cwd-metric-bar__head[b-m7p9o5m8ra] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--nm-muted);
}
.cwd-metric-bar__head b[b-m7p9o5m8ra] { color: var(--nm-ink); font-variant-numeric: tabular-nums; }

/* ── Card ── */
.cwd-card-ico[b-m7p9o5m8ra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
}
.cwd-card-title[b-m7p9o5m8ra] { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--nm-ink); }
.cwd-card-count[b-m7p9o5m8ra] {
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2, #f1f5f9);
    color: var(--nm-muted);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
[b-m7p9o5m8ra] .cwd-card-act { margin-left: auto; }

/* ── Toolbar sổ quỹ ── */
.cwd-tx-toolbar[b-m7p9o5m8ra] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nm-border);
}
.cwd-tx-search[b-m7p9o5m8ra] { width: 260px; max-width: 100%; }
.cwd-tx-chips[b-m7p9o5m8ra] { display: flex; gap: 6px; flex-wrap: wrap; }
.cwd-tx-dates[b-m7p9o5m8ra] { display: inline-flex; align-items: center; gap: 6px; }
.cwd-tx-dates__lbl[b-m7p9o5m8ra] { font-size: 12px; font-weight: 600; color: var(--nm-muted); white-space: nowrap; }
.cwd-tx-dates__sep[b-m7p9o5m8ra] { color: var(--nm-muted); }

/* ── Cell ── */
.cwd-money[b-m7p9o5m8ra] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nm-ink); }
.cwd-money.up[b-m7p9o5m8ra] { color: var(--nm-ok, #16a34a); }
.cwd-money.down[b-m7p9o5m8ra] { color: var(--nm-bad, #dc2626); }

.cwd-desc[b-m7p9o5m8ra] {
    display: block;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nm-ink);
    font-size: 13px;
}
.cwd-time[b-m7p9o5m8ra] { font-size: 12px; color: var(--nm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-muted[b-m7p9o5m8ra] { color: var(--nm-muted); }

/* Người thực hiện giao dịch: họ tên trên, tên đăng nhập dưới — hai người trùng tên vẫn tách được */
.cwd-actor[b-m7p9o5m8ra] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cwd-actor__name[b-m7p9o5m8ra] { font-size: 13px; color: var(--nm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwd-actor__login[b-m7p9o5m8ra] { font-size: 11.5px; color: var(--nm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cwd-cc[b-m7p9o5m8ra] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cwd-cc__name[b-m7p9o5m8ra] { font-weight: 600; font-size: 13.5px; color: var(--nm-ink); }
.cwd-cc__dept[b-m7p9o5m8ra] { font-size: 11.5px; color: var(--nm-muted); }

.nm-code-pill[b-m7p9o5m8ra] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nm-row-actions[b-m7p9o5m8ra] { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Yêu cầu chờ duyệt — gạch vàng đầu dòng để nhặt ra giữa danh sách đã xử lý */
[b-m7p9o5m8ra] tr.cwd-row-pending td:first-child { box-shadow: inset 3px 0 0 var(--nm-warn); }

.cwd-foot[b-m7p9o5m8ra] { display: flex; justify-content: flex-end; padding: 12px 16px; }

@media (max-width: 900px) {
    .cwd-metrics[b-m7p9o5m8ra] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .nm-list-page[b-m7p9o5m8ra] { padding: 16px 14px 22px; }
    .cwd-hero-main[b-m7p9o5m8ra] { align-items: flex-start; }
    .cwd-balance__val[b-m7p9o5m8ra] { font-size: 24px; }
    .cwd-tx-search[b-m7p9o5m8ra] { flex: 1; width: auto; }
    .cwd-tx-dates[b-m7p9o5m8ra] { width: 100%; }
    .cwd-desc[b-m7p9o5m8ra] { max-width: 220px; }
}
/* /src/Features/Wallet/Pages/Manager/CompanyWallets.razor.rz.scp.css */
/* /manager/wallet/companies — chuẩn nm-list: shell trang + dải KPI bấm được + toolbar + cell tiền.
   Các class .nm-list-* KHÔNG global, mỗi trang tự khai (giữ khung chung với AirlinesIndex/CompaniesIndex).
   Chrome (card/grid/modal/field/input/badge) do primitive Nm* lo. */

.nm-list-page[b-r1v160sire] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-r1v160sire] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-r1v160sire] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-r1v160sire] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-r1v160sire] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Số việc chờ nằm ngay trên nút sang màn duyệt — kế toán thấy có việc mà không phải bấm vào xem */
.cow-btn-count[b-r1v160sire] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-warn);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
}

/* ── Dải KPI: mỗi ô là 1 bộ lọc nhanh ── */
.cow-stats[b-r1v160sire] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.cow-stats[b-r1v160sire]::-webkit-scrollbar { display: none; }

.cow-stat[b-r1v160sire] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.cow-stat + .cow-stat[b-r1v160sire] { border-left: 1px solid var(--nm-border); }

.cow-stat--btn[b-r1v160sire] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.cow-stats > .cow-stat--btn:first-child[b-r1v160sire] { border-left: 0; }
.cow-stat--btn:hover .cow-stat__lbl[b-r1v160sire] { color: var(--nm-ink); }
/* Ô đang lọc — đổi màu chữ chứ không đổi nền, để dải vẫn đọc như một hàng số liệu */
.cow-stat--btn.is-on .cow-stat__lbl[b-r1v160sire] { color: var(--nm-brand-700); font-weight: 700; }
.cow-stat--btn.is-on .cow-stat__val[b-r1v160sire] { color: var(--nm-brand-700); }

.cow-stat__dot[b-r1v160sire] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.cow-stat__dot--accent[b-r1v160sire] { background: var(--nm-brand-500); }
.cow-stat__dot--good[b-r1v160sire] { background: var(--nm-ok, #16a34a); }
.cow-stat__dot--warn[b-r1v160sire] { background: var(--nm-warn); }
.cow-stat__dot--bad[b-r1v160sire] { background: var(--nm-bad, #dc2626); }
.cow-stat__dot--info[b-r1v160sire] { background: var(--nm-info); }
.cow-stat__dot--muted[b-r1v160sire] { background: var(--nm-muted); }

.cow-stat__lbl[b-r1v160sire] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.cow-stat__val[b-r1v160sire] {
    margin-left: auto;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-r1v160sire] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-r1v160sire] { width: 300px; max-width: 100%; }
.tb-select[b-r1v160sire] { min-width: 150px; }
.tb-select--sort[b-r1v160sire] { min-width: 175px; }
.tb-filters[b-r1v160sire] { display: contents; }
[b-r1v160sire] .tb-clear { margin-left: auto; }

/* Ô ngưỡng cảnh báo: CurrencyInput là <input> trần nên phải tự khai khung ở đây */
.cow-threshold[b-r1v160sire] { display: inline-flex; align-items: center; gap: 7px; }
.cow-threshold__lbl[b-r1v160sire] { font-size: 12px; font-weight: 600; color: var(--nm-muted); white-space: nowrap; }
.cow-threshold[b-r1v160sire]  .ci-input {
    width: 130px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink);
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

[b-r1v160sire] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-r1v160sire] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Cell ── */
.cow-name-cell[b-r1v160sire] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.cow-name-cell:hover .cow-name[b-r1v160sire] { color: var(--nm-brand-700); text-decoration: underline; }

.cow-logo-fallback[b-r1v160sire] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 14px;
    font-weight: 800;
}

.cow-name-main[b-r1v160sire] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cow-name[b-r1v160sire] {
    font-weight: 600; font-size: 13.5px; color: var(--nm-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.cow-code[b-r1v160sire] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--nm-muted); letter-spacing: .02em;
}

.cow-money[b-r1v160sire] { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cow-money.is-good[b-r1v160sire] { color: var(--nm-ink); }
.cow-money.is-warn[b-r1v160sire] { color: var(--nm-warn); }
.cow-money.is-bad[b-r1v160sire] { color: var(--nm-bad, #dc2626); }

/* Vào/ra 30 ngày xếp chồng: nhìn một cột biết ví đang chạy hay đứng im */
.cow-flow[b-r1v160sire] { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.cow-flow__in[b-r1v160sire] { font-size: 12.5px; font-weight: 600; color: var(--nm-ok, #16a34a); }
.cow-flow__out[b-r1v160sire] { font-size: 11.5px; color: var(--nm-muted); }

.cow-time[b-r1v160sire] { font-size: 12px; color: var(--nm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-muted[b-r1v160sire] { color: var(--nm-muted); }

.nm-code-pill[b-r1v160sire] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nm-row-actions[b-r1v160sire] { display: inline-flex; gap: 4px; justify-content: flex-end; align-items: center; }

/* Công ty ngừng hoạt động / ví bị khoá — nhạt đi nhưng vẫn đọc được, không ẩn */
[b-r1v160sire] tr.cow-row-muted { opacity: .58; }
[b-r1v160sire] tr.cow-row-frozen td:first-child { box-shadow: inset 3px 0 0 var(--nm-bad, #dc2626); }

/* ── Footer ── */
.cow-foot[b-r1v160sire] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.cow-total[b-r1v160sire] { font-size: 12.5px; color: var(--nm-muted); }
.cow-total strong[b-r1v160sire] { color: var(--nm-ink); font-weight: 700; }

/* Modal thao tác tiền nằm ở component dùng chung WalletAdminActions — style của chúng ở file .razor.css
   cạnh component đó, KHÔNG để ở đây (CSS isolation gắn theo component, để đây thì màn chi tiết mất style). */

@media (max-width: 900px) {
    .cow-stats[b-r1v160sire] { padding: 6px 2px; }
    .cow-stat[b-r1v160sire] { padding: 2px 12px; }
}

@media (max-width: 640px) {
    .nm-list-page[b-r1v160sire] { padding: 16px 14px 22px; }
    .nm-list-head[b-r1v160sire] { align-items: flex-start; }
    .tb-search[b-r1v160sire] { flex: 1; width: auto; }
    [b-r1v160sire] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-r1v160sire] { display: none; }
    .tb-filters.is-open[b-r1v160sire] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }
    .tb-select[b-r1v160sire], .cow-threshold[b-r1v160sire] { width: 100%; }
    .cow-threshold[b-r1v160sire]  .ci-input { flex: 1; width: auto; }
    [b-r1v160sire] .tb-clear { margin-left: 0; }
}
/* /src/Features/Wallet/Pages/Manager/TopUpApproval.razor.rz.scp.css */
/* /manager/wallet/approve — chuẩn nm-list, cùng hệ với /manager/wallet/companies.
   Khác dải KPI của các màn khác một điểm: mỗi ô có 2 dòng (nhãn + SỐ TIỀN) vì với kế toán
   "12 đơn chờ" không nói lên gì, "12 đơn — 340 triệu đang chờ" mới là thông tin. */

.nm-list-page[b-kh8ihdx0p4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-kh8ihdx0p4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-kh8ihdx0p4] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-kh8ihdx0p4] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-kh8ihdx0p4] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải KPI ── */
.tua-stats[b-kh8ihdx0p4] {
    display: flex;
    align-items: stretch;
    padding: 10px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.tua-stats[b-kh8ihdx0p4]::-webkit-scrollbar { display: none; }

.tua-stat[b-kh8ihdx0p4] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
    text-align: left;
}
.tua-stat + .tua-stat[b-kh8ihdx0p4] { border-left: 1px solid var(--nm-border); }

.tua-stat--btn[b-kh8ihdx0p4] {
    border: 0;
    border-left: 1px solid var(--nm-border);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.tua-stats > .tua-stat--btn:first-child[b-kh8ihdx0p4] { border-left: 0; }
.tua-stat--btn:hover .tua-stat__lbl[b-kh8ihdx0p4] { color: var(--nm-ink); }
/* Ô đang lọc — đổi màu chữ chứ không đổi nền, để dải vẫn đọc như một hàng số liệu */
.tua-stat--btn.is-on .tua-stat__lbl[b-kh8ihdx0p4] { color: var(--nm-brand-700); font-weight: 700; }
.tua-stat--btn.is-on .tua-stat__val[b-kh8ihdx0p4] { color: var(--nm-brand-700); }

.tua-stat__dot[b-kh8ihdx0p4] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.tua-stat__dot--accent[b-kh8ihdx0p4] { background: var(--nm-brand-500); }
.tua-stat__dot--good[b-kh8ihdx0p4] { background: var(--nm-ok, #16a34a); }
.tua-stat__dot--warn[b-kh8ihdx0p4] { background: var(--nm-warn); }
.tua-stat__dot--bad[b-kh8ihdx0p4] { background: var(--nm-bad, #dc2626); }
.tua-stat__dot--info[b-kh8ihdx0p4] { background: var(--nm-info); }
.tua-stat__dot--muted[b-kh8ihdx0p4] { background: var(--nm-muted); }

.tua-stat__text[b-kh8ihdx0p4] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tua-stat__lbl[b-kh8ihdx0p4] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.tua-stat__amt[b-kh8ihdx0p4] { font-size: 11px; color: var(--nm-muted); font-variant-numeric: tabular-nums; opacity: .85; }
.tua-stat__val[b-kh8ihdx0p4] {
    margin-left: auto;
    padding-left: 12px;
    font-size: 17px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar ── */
.nm-list-toolbar[b-kh8ihdx0p4] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-kh8ihdx0p4] { width: 300px; max-width: 100%; }
.tb-select[b-kh8ihdx0p4] { min-width: 165px; }
.tb-filters[b-kh8ihdx0p4] { display: contents; }
[b-kh8ihdx0p4] .tb-clear { margin-left: auto; }

.tua-dates[b-kh8ihdx0p4] { display: inline-flex; align-items: center; gap: 6px; }
.tua-dates__lbl[b-kh8ihdx0p4] { font-size: 12px; font-weight: 600; color: var(--nm-muted); white-space: nowrap; }
.tua-dates__sep[b-kh8ihdx0p4] { color: var(--nm-muted); }

[b-kh8ihdx0p4] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-kh8ihdx0p4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Cell ── */
.tua-code-cell[b-kh8ihdx0p4] { display: inline-flex; align-items: center; gap: 6px; }
/* Kẹp giấy = có chứng từ đính kèm. Kế toán quét cột này để biết đơn nào duyệt được ngay. */
.tua-proof[b-kh8ihdx0p4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--nm-r-input);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 12px;
    text-decoration: none;
}
.tua-proof:hover[b-kh8ihdx0p4] { filter: brightness(0.96); }

.tua-co-cell[b-kh8ihdx0p4] {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    text-align: left;
    cursor: pointer;
}
.tua-co-cell:hover[b-kh8ihdx0p4] { color: var(--nm-brand-700); text-decoration: underline; }

.tua-money[b-kh8ihdx0p4] { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tua-sub[b-kh8ihdx0p4] { font-size: 12.5px; color: var(--nm-muted); }
.tua-time[b-kh8ihdx0p4] { font-size: 12px; color: var(--nm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tua-note[b-kh8ihdx0p4] { color: var(--nm-muted); font-size: 13px; }

.nm-code-pill[b-kh8ihdx0p4] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nm-row-actions[b-kh8ihdx0p4] { display: inline-flex; gap: 4px; justify-content: flex-end; align-items: center; }

/* Đơn chờ duyệt — gạch vàng đầu dòng để nhặt ra giữa danh sách đã xử lý */
[b-kh8ihdx0p4] tr.tua-row-pending td:first-child { box-shadow: inset 3px 0 0 var(--nm-warn); }

/* ── Footer ── */
.tua-foot[b-kh8ihdx0p4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.tua-total[b-kh8ihdx0p4] { font-size: 12.5px; color: var(--nm-muted); }
.tua-total strong[b-kh8ihdx0p4] { color: var(--nm-ink); font-weight: 700; }

/* ── Modal ── */
.tua-form[b-kh8ihdx0p4] { display: flex; flex-direction: column; gap: 14px; }

.tua-summary[b-kh8ihdx0p4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2, var(--nm-surface));
}
.tua-summary__head[b-kh8ihdx0p4] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.tua-summary__row[b-kh8ihdx0p4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    color: var(--nm-muted);
}
.tua-summary__row b[b-kh8ihdx0p4] { color: var(--nm-ink); font-weight: 600; text-align: right; }
.tua-summary__amt[b-kh8ihdx0p4] { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tua-summary__proof[b-kh8ihdx0p4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-700);
    text-decoration: none;
}
.tua-summary__proof:hover[b-kh8ihdx0p4] { text-decoration: underline; }

/* Số dư trước → sau: chốt chặn thị giác cuối trước khi bấm duyệt */
.tua-preview[b-kh8ihdx0p4] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
}
.tua-preview > div[b-kh8ihdx0p4] { display: flex; flex-direction: column; gap: 2px; }
.tua-preview small[b-kh8ihdx0p4] { font-size: 11.5px; font-weight: 600; color: var(--nm-muted); }
.tua-preview b[b-kh8ihdx0p4] { font-size: 16px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.tua-preview b.is-good[b-kh8ihdx0p4] { color: var(--nm-ok, #16a34a); }
.tua-preview > i[b-kh8ihdx0p4] { color: var(--nm-muted); }

@media (max-width: 900px) {
    .tua-stats[b-kh8ihdx0p4] { padding: 8px 2px; }
    .tua-stat[b-kh8ihdx0p4] { padding: 2px 12px; }
}

@media (max-width: 640px) {
    .nm-list-page[b-kh8ihdx0p4] { padding: 16px 14px 22px; }
    .nm-list-head[b-kh8ihdx0p4] { align-items: flex-start; }
    .tb-search[b-kh8ihdx0p4] { flex: 1; width: auto; }
    [b-kh8ihdx0p4] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-kh8ihdx0p4] { display: none; }
    .tb-filters.is-open[b-kh8ihdx0p4] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }
    .tb-select[b-kh8ihdx0p4], .tua-dates[b-kh8ihdx0p4] { width: 100%; }
    [b-kh8ihdx0p4] .tb-clear { margin-left: 0; }
}
/* /src/Features/Wallet/Pages/Manager/WalletPage.razor.rz.scp.css */
/* /manager/wallet — wrapper mỏng; toàn bộ UI nằm trong WalletView (chuẩn nm-list, scoped css riêng). */
.wallet-root[b-wtxql8yhsy] {
    min-height: calc(100vh - 64px);
}

.wallet-shell[b-wtxql8yhsy] {
    display: flex;
    flex-direction: column;
}
/* /src/Features/_Shared/Approvals/ApprovalsInboxView.razor.rz.scp.css */
/* ApprovalsInboxView — chuẩn nm-list, token-only (--nm-*).
   Dùng chung cho /ca/approvals và /manager/approvals; chrome nút/chip/modal do Nm* lo. */

.nm-list-page[b-pek7q64tvm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-pek7q64tvm] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-pek7q64tvm] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-pek7q64tvm] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-pek7q64tvm] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Dải thống kê mỏng — 1 hàng (giống .cabk-stats bên /ca/bookings) ── */
.aiv-stats[b-pek7q64tvm] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.aiv-stats[b-pek7q64tvm]::-webkit-scrollbar { display: none; }

.aiv-stat[b-pek7q64tvm] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.aiv-stat + .aiv-stat[b-pek7q64tvm] { border-left: 1px solid var(--nm-border); }

.aiv-stat__dot[b-pek7q64tvm] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.aiv-stat__dot--accent[b-pek7q64tvm] { background: var(--nm-brand-500); }
.aiv-stat__dot--good[b-pek7q64tvm]   { background: var(--nm-ok); }
.aiv-stat__dot--info[b-pek7q64tvm]   { background: var(--nm-info); }
.aiv-stat__dot--warn[b-pek7q64tvm]   { background: var(--nm-warn); }
.aiv-stat__dot--bad[b-pek7q64tvm]    { background: var(--nm-bad); }

.aiv-stat__lbl[b-pek7q64tvm] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.aiv-stat__val[b-pek7q64tvm] {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar filter ── */
.nm-list-toolbar[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-pek7q64tvm] { width: 300px; max-width: 100%; }
.tb-select[b-pek7q64tvm] { min-width: 190px; }
.tb-filters[b-pek7q64tvm] { display: contents; }
[b-pek7q64tvm] .tb-clear { margin-left: auto; }

/* Nút bật/tắt bộ lọc + badge đếm — chỉ hiện ở mobile.
   Cần .nm-btn trong selector để thắng specificity của .nm-btn[scope] trong bundle. */
[b-pek7q64tvm] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-pek7q64tvm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
}

/* ── Chips: module trái + thời gian chờ phải ── */
.tb-status[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-pek7q64tvm] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}
.aiv-urgency[b-pek7q64tvm] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aiv-urgency__lbl[b-pek7q64tvm] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
    margin-right: 2px;
}

/* ── Danh sách task ── */
.aiv-loading[b-pek7q64tvm] { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }

.aiv-list[b-pek7q64tvm] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--nm-border);
}
.aiv-task[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px 12px 11px;
    border-bottom: 1px solid var(--nm-border);
    border-left: 3px solid transparent;
    flex-wrap: wrap;
    transition: background .12s;
}
.aiv-task:hover[b-pek7q64tvm] { background: var(--nm-surface-2); }
/* Ưu tiên theo thời gian chờ: vạch trái cam/đỏ */
.aiv-task.is-warm[b-pek7q64tvm] { border-left-color: var(--nm-warn); }
.aiv-task.is-hot[b-pek7q64tvm]  { border-left-color: var(--nm-bad); }

/* Thẻ mở được bằng nhấn đúp: mượn luôn vạch trái làm dấu hiệu khi rê chuột — nhưng CHỈ khi thẻ chưa
   mang màu ưu tiên, vì cảnh báo chờ lâu quan trọng hơn gợi ý thao tác. Không đổi con trỏ thành pointer:
   nó hứa "bấm một lần là đi" trong khi ở đây phải nhấn đúp. */
.aiv-task--openable:not(.is-warm):not(.is-hot):hover[b-pek7q64tvm] { border-left-color: var(--nm-brand-500); }

.aiv-task__main[b-pek7q64tvm] { flex: 1; min-width: 280px; }
.aiv-task__tags[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.aiv-step[b-pek7q64tvm] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink);
    font-size: 11.5px;
    font-weight: 600;
}
.aiv-ref[b-pek7q64tvm] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--nm-brand-700);
    background: var(--nm-brand-50);
    padding: 2px 8px;
    border-radius: var(--nm-r-pill);
}

.aiv-task__meta[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nm-muted);
}
.aiv-meta[b-pek7q64tvm] { display: inline-flex; align-items: center; gap: 5px; }
.aiv-meta i[b-pek7q64tvm] { color: var(--nm-muted); flex-shrink: 0; }
.aiv-meta strong[b-pek7q64tvm] { color: var(--nm-ink); font-weight: 600; }

/* Số tiền: nhấn màu thương hiệu để dễ quét khi sắp xếp theo giá trị */
.aiv-meta--amount i[b-pek7q64tvm] { color: var(--nm-brand-500); }
.aiv-meta--amount strong[b-pek7q64tvm] { color: var(--nm-brand-600); font-weight: 700; }

.aiv-wait[b-pek7q64tvm] { font-weight: 500; color: var(--nm-muted); }
.aiv-wait.is-warm[b-pek7q64tvm] { color: var(--nm-warn); font-weight: 600; }
.aiv-wait.is-hot[b-pek7q64tvm]  { color: var(--nm-bad); font-weight: 700; }

.aiv-task__actions[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Footer: tổng + đã lọc ── */
.aiv-foot[b-pek7q64tvm] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.aiv-foot strong[b-pek7q64tvm] { color: var(--nm-ink); font-weight: 700; }

/* ── Modal (nội dung; khung do NmModal lo) ── */
[b-pek7q64tvm] .aiv-modal-alert { margin-bottom: 10px; }
.aiv-label[b-pek7q64tvm] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
    margin-bottom: 6px;
}
.aiv-req[b-pek7q64tvm] { color: var(--nm-bad); }

@media (max-width: 640px) {
    .nm-list-page[b-pek7q64tvm] { padding: 16px 14px 22px; }

    .tb-search[b-pek7q64tvm] { flex: 1; width: auto; }
    [b-pek7q64tvm] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-pek7q64tvm] { display: none; }
    .tb-filters.is-open[b-pek7q64tvm] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-pek7q64tvm] { flex: 1; min-width: 0; }
    .tb-select[b-pek7q64tvm]  .nm-select-wrap,
    .tb-select[b-pek7q64tvm]  .nm-select { width: 100%; }

    /* Urgency xuống hàng riêng, chips trượt ngang */
    .aiv-urgency[b-pek7q64tvm] { margin-left: 0; width: 100%; }
    .tb-status[b-pek7q64tvm] {
        row-gap: 8px;
    }

    /* Task: actions xuống hàng, full-width */
    .aiv-task__actions[b-pek7q64tvm] { width: 100%; justify-content: flex-end; }
}
/* /src/Features/_Shared/Auth/AccessDeniedPanel.razor.rz.scp.css */
/* AccessDeniedPanel — màn 403 dùng chung. Token-only theo tokens.css SSOT.
   Cam là điểm nhấn DUY NHẤT (huy hiệu khoá); phần còn lại là neutral. */

.nm-403[b-tjlldhtqnd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 32px 20px;
    font-family: var(--nm-font);
}

.nm-403__card[b-tjlldhtqnd] {
    width: 100%;
    max-width: 460px;
    padding: 40px 32px 26px;
    text-align: center;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
}

.nm-403__badge[b-tjlldhtqnd] {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--nm-brand-500);
    background: var(--nm-brand-50);
    border-radius: var(--nm-r-pill);
    /* Quầng mỏng thay cho viền — giữ nhấn cam ở mức nhẹ. */
    box-shadow: 0 0 0 8px rgba(255, 107, 0, .06);
}

.nm-403__title[b-tjlldhtqnd] {
    margin: 20px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nm-ink);
}

.nm-403__desc[b-tjlldhtqnd] {
    margin: 8px auto 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nm-ink-2);
}

.nm-403__meta[b-tjlldhtqnd] {
    margin: 20px 0 0;
    padding: 10px 14px;
    display: grid;
    gap: 6px;
    text-align: left;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
}

.nm-403__row[b-tjlldhtqnd] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.nm-403__row dt[b-tjlldhtqnd] {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nm-muted);
}

.nm-403__row dd[b-tjlldhtqnd] {
    margin: 0;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.nm-403__actions[b-tjlldhtqnd] {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.nm-403__hint[b-tjlldhtqnd] {
    margin: 22px 0 0;
    padding-top: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    border-top: 1px solid var(--nm-border);
    font-size: 12px;
    line-height: 1.5;
    color: var(--nm-muted);
    text-align: left;
}

.nm-403__hint i[b-tjlldhtqnd] {
    flex: none;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 480px) {
    .nm-403[b-tjlldhtqnd] { min-height: 60vh; padding: 24px 14px; }
    .nm-403__card[b-tjlldhtqnd] { padding: 30px 20px 22px; }
    .nm-403__row[b-tjlldhtqnd] { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
    .nm-403__card[b-tjlldhtqnd] { animation: nm-403-in-b-tjlldhtqnd .28s ease-out both; }
}

@keyframes nm-403-in-b-tjlldhtqnd {
    from { opacity: 0; transform: translateY(6px); }
}
/* /src/Features/_Shared/Auth/IdleTimeoutWatcher.razor.rz.scp.css */
/* IdleTimeoutWatcher — thẻ cảnh báo sắp hết phiên.

   CỐ Ý không dùng lớp phủ toàn màn hình: người dùng có thể đang điền dở một biểu mẫu dài, che
   hết màn hình chỉ khiến họ mất phương hướng. Thẻ nằm góc dưới bên phải, tự lùi xuống dưới cùng
   trên màn hình hẹp. */
.nm-idle-warn[b-77icag5q7r] {
    --iw-surface: #ffffff;
    --iw-line: #eceef2;
    --iw-ink: #121212;
    --iw-ink-2: #4b5162;
    --iw-ink-3: #7b8190;
    --iw-accent: #ea580c;
    --iw-warn-bg: #fff7ed;
    --iw-warn-ink: #c2410c;

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 300;
    max-width: calc(100vw - 32px);
    animation: nm-idle-in-b-77icag5q7r .18s ease-out;
}

@keyframes nm-idle-in-b-77icag5q7r {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nm-idle-warn__card[b-77icag5q7r] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 12px;
    width: 380px;
    max-width: 100%;
    padding: 16px 18px;
    background: var(--iw-surface);
    border: 1px solid var(--iw-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px -14px rgba(16, 24, 40, .32);
    color: var(--iw-ink);
}

.nm-idle-warn__icon[b-77icag5q7r] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--iw-warn-bg);
    color: var(--iw-warn-ink);
}

.nm-idle-warn__title[b-77icag5q7r] {
    margin: 0 0 4px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.nm-idle-warn__text[b-77icag5q7r] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--iw-ink-2);
}

.nm-idle-warn__actions[b-77icag5q7r] {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.nm-idle-warn__ghost[b-77icag5q7r],
.nm-idle-warn__primary[b-77icag5q7r] {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.nm-idle-warn__ghost[b-77icag5q7r] {
    background: transparent;
    border: 1px solid var(--iw-line);
    color: var(--iw-ink-3);
}

.nm-idle-warn__ghost:hover[b-77icag5q7r] {
    background: #f6f7f9;
    color: var(--iw-ink-2);
}

.nm-idle-warn__primary[b-77icag5q7r] {
    background: var(--iw-accent);
    border: 1px solid var(--iw-accent);
    color: #ffffff;
}

.nm-idle-warn__primary:hover[b-77icag5q7r] {
    background: #c2410c;
    border-color: #c2410c;
}

@media (max-width: 480px) {
    .nm-idle-warn[b-77icag5q7r] {
        right: 12px;
        left: 12px;
        bottom: 12px;
    }

    .nm-idle-warn__card[b-77icag5q7r] {
        width: 100%;
    }
}
/* /src/Features/_Shared/Auth/PermissionGuard.razor.rz.scp.css */
/* PermissionGuard — chỉ còn trạng thái chờ (403 đã tách sang AccessDeniedPanel). */
.pg-loading[b-c3d9sk3l0f] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
/* /src/Features/_Shared/Auth/PinCodeInput.razor.rz.scp.css */
/* PinCodeInput — sáu ô mã (token-only theo tokens.css SSOT).

   Kích thước ô rộng vừa đủ một chữ số: hộp chỉ nên to bằng thứ nó chứa. Cả khối co theo nội dung
   (không kéo full-width) để sáu ô đọc ra "một mã", không phải "một trường nhập dài". */

.pin-field[b-8reznprqff] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Input THẬT: phủ lên dãy ô, trong suốt hoàn toàn. Nhận phím, nhận dán, nhận focus —
   chỉ không hiện gì (kể cả khung autofill của trình duyệt). */
.pin-capture[b-8reznprqff] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    /* chừa phần bên phải cho nút mắt, nếu không nó nằm dưới lớp phủ và bấm không được */
    right: 44px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font-size: 16px;   /* >=16px: iOS không tự phóng to trang khi focus */
    outline: 0 !important;
    z-index: 2;
    cursor: text;
    -webkit-appearance: none;
    appearance: none;
}

.pin-capture[b-8reznprqff]::selection { background: transparent; }
.pin-capture:disabled[b-8reznprqff] { cursor: not-allowed; }

.pin-cells[b-8reznprqff] {
    display: flex;
    gap: 8px;
}

.pin-cell[b-8reznprqff] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 52px;
    box-sizing: border-box;
    border: 1.5px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    font-family: var(--nm-font);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--nm-ink);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* Ô đã có số: viền đậm hơn để nhìn lướt biết đã gõ tới đâu. */
.pin-cell.is-filled[b-8reznprqff] { border-color: var(--nm-ink-2); }

/* Ô đang tới lượt: viền thương hiệu + con trỏ nháy tự vẽ (input thật không hiện caret). */
.pin-cell.is-active[b-8reznprqff] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.pin-cell.is-active[b-8reznprqff]::after {
    content: "";
    width: 2px;
    height: 22px;
    border-radius: 1px;
    background: var(--nm-brand-500);
    animation: pin-caret-b-8reznprqff 1s steps(1, end) infinite;
}

@keyframes pin-caret-b-8reznprqff {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pin-cell.is-active[b-8reznprqff]::after { animation: none; }
}

/* Trạng thái của cả khối */
.pin-field.is-invalid .pin-cell[b-8reznprqff] { border-color: var(--nm-bad); }
.pin-field.is-invalid .pin-cell.is-active[b-8reznprqff] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }
.pin-field.is-invalid .pin-cell.is-active[b-8reznprqff]::after { background: var(--nm-bad); }

.pin-field.is-disabled .pin-cell[b-8reznprqff] { background: var(--nm-surface-2); color: var(--nm-muted); border-color: var(--nm-border); }

/* ---- Nút ẩn/hiện ---- */
.pin-eye[b-8reznprqff] {
    flex: none;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--nm-muted);
    border-radius: var(--nm-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: color .15s ease, background-color .15s ease;
}

.pin-eye:hover:not(:disabled)[b-8reznprqff] { background: var(--nm-surface-2); color: var(--nm-ink-2); }
.pin-eye:focus-visible[b-8reznprqff] { outline: 2px solid var(--nm-brand-300); outline-offset: 1px; }
.pin-eye:disabled[b-8reznprqff] { cursor: not-allowed; opacity: .5; }

/* Màn hẹp: thu ô lại cho vừa 6 ô + nút mắt trên một hàng. */
@media (max-width: 400px) {
    .pin-cells[b-8reznprqff] { gap: 5px; }
    .pin-cell[b-8reznprqff] { width: 38px; height: 46px; font-size: 19px; }
    .pin-capture[b-8reznprqff] { right: 40px; }
}
/* /src/Features/_Shared/Auth/SessionApprovalModal.razor.rz.scp.css */
/* SessionApprovalModal — Manager Dashboard v4 theme */
.sam-overlay[b-43apo4vmcb] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
    animation: sam-fadeIn-b-43apo4vmcb .15s ease-out;
}

@keyframes sam-fadeIn-b-43apo4vmcb {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sam-panel[b-43apo4vmcb] {
    width: 100%;
    max-width: 460px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28);
    color: var(--d-ink);
}

.sam-head[b-43apo4vmcb] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sam-icon[b-43apo4vmcb] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.sam-title[b-43apo4vmcb] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.sam-subtitle[b-43apo4vmcb] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.sam-body[b-43apo4vmcb] {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.sam-row[b-43apo4vmcb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .sam-row .k[b-43apo4vmcb] {
        color: var(--d-ink-3);
        font-size: 12.5px;
    }

    .sam-row .v[b-43apo4vmcb] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .sam-row .v.mono[b-43apo4vmcb] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

.sam-countdown[b-43apo4vmcb] {
    padding: 10px 22px;
    border-top: 1px solid #fde68a;
    background: #fef3c7;
    color: #92400e;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .sam-countdown b[b-43apo4vmcb] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: #b45309;
    }

.sam-actions[b-43apo4vmcb] {
    padding: 14px 22px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sam-btn[b-43apo4vmcb] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .12s, color .12s, filter .12s;
}

    .sam-btn:hover[b-43apo4vmcb] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.sam-btn-primary[b-43apo4vmcb] {
    border-color: transparent;
    color: #fff;
    background: var(--d-accent-grad);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .sam-btn-primary:hover[b-43apo4vmcb] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.sam-btn:disabled[b-43apo4vmcb] {
    opacity: 0.55;
    cursor: not-allowed;
}

.sam-spin[b-43apo4vmcb] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sam-spin-b-43apo4vmcb 0.7s linear infinite;
}

@keyframes sam-spin-b-43apo4vmcb {
    to { transform: rotate(360deg); }
}

.sam-hint[b-43apo4vmcb] {
    margin: 0;
    padding: 4px 22px 14px;
    font-size: 11.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
    background: var(--d-surface);
}
/* /src/Features/_Shared/Common/ArticleEditor.razor.rz.scp.css */
/* ArticleEditor — Manager Dashboard v4 theme */
.aed-root[b-r5p8pkerr3] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-r: 12px;

    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    color: var(--d-ink);
}

/* Target the JS-injected editor structure (Quill / contenteditable) inside the host div */
.aed-host[b-r5p8pkerr3]  .ql-toolbar,
.aed-host[b-r5p8pkerr3]  [class*="toolbar"] {
    background: var(--d-surface-2);
    border: 0;
    border-bottom: 1px solid var(--d-line);
    padding: 8px 10px;
}

.aed-host[b-r5p8pkerr3]  .ql-toolbar button,
.aed-host[b-r5p8pkerr3]  [class*="toolbar"] button {
    height: 30px;
    min-width: 30px;
    border-radius: 6px;
    color: var(--d-ink-2);
    transition: background .12s, color .12s;
}

    .aed-host[b-r5p8pkerr3]  .ql-toolbar button:hover,
    .aed-host[b-r5p8pkerr3]  [class*="toolbar"] button:hover {
        background: var(--d-surface);
        color: var(--d-ink);
    }

    .aed-host[b-r5p8pkerr3]  .ql-toolbar button.ql-active,
    .aed-host[b-r5p8pkerr3]  [class*="toolbar"] button.is-active {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

.aed-host[b-r5p8pkerr3]  .ql-container,
.aed-host[b-r5p8pkerr3]  [class*="editor"] {
    border: 0;
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    line-height: 1.6;
    min-height: 240px;
}

.aed-host[b-r5p8pkerr3]  .ql-editor {
    padding: 14px 16px;
}

    .aed-host[b-r5p8pkerr3]  .ql-editor:focus {
        outline: none;
    }

.aed-host[b-r5p8pkerr3]  .ql-editor.ql-blank::before {
    color: var(--d-ink-3);
    font-style: normal;
}
/* /src/Features/_Shared/Common/BookingEmailLog.razor.rz.scp.css */
/* Khối "Thư đã gửi" trong màn chi tiết đơn. Dùng biến của hệ NM, không hard-code màu. */

.bkmail-head[b-ntz1ceykv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
}

.bkmail-title[b-ntz1ceykv2] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bkmail-title i[b-ntz1ceykv2] {
    color: var(--nm-brand-600);
}

.bkmail-body[b-ntz1ceykv2] {
    padding: 14px 18px;
}

.bkmail-empty[b-ntz1ceykv2] {
    margin: 0;
    font-size: 13px;
    color: var(--nm-muted);
}

.bkmail-list[b-ntz1ceykv2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Viền trái theo mức độ: đỏ = thư KHÔNG tới nơi, vàng = còn đang chờ gửi. */
.bkmail-item[b-ntz1ceykv2] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-left: 3px solid transparent;
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}

.bkmail-item.is-bad[b-ntz1ceykv2] {
    border-left-color: var(--nm-bad);
}

.bkmail-item.is-warn[b-ntz1ceykv2] {
    border-left-color: var(--nm-warn);
}

.bkmail-item__main[b-ntz1ceykv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bkmail-subject[b-ntz1ceykv2] {
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkmail-item__meta[b-ntz1ceykv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--nm-muted);
}

.bkmail-to[b-ntz1ceykv2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkmail-when[b-ntz1ceykv2] {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.bkmail-err[b-ntz1ceykv2] {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--nm-bad);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkmail-note[b-ntz1ceykv2] {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nm-muted);
}

.bkmail-item__act[b-ntz1ceykv2] {
    margin: 8px 0 0;
}

/* ── Hộp xem nguyên văn thư ── */

.bkmail-detail__meta[b-ntz1ceykv2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--nm-line);
}

.bkmail-detail__subject[b-ntz1ceykv2] {
    flex: 1 1 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
}

.bkmail-detail__to[b-ntz1ceykv2],
.bkmail-detail__when[b-ntz1ceykv2] {
    font-size: 12px;
    color: var(--nm-muted);
}

/* Thư gốc mang CSS riêng của nó — nền trắng cố định để bản xem giống hộp thư khách,
   không bị chủ đề tối của cổng quản lý làm sai màu. */
.bkmail-frame[b-ntz1ceykv2] {
    display: block;
    width: 100%;
    height: 60vh;
    min-height: 320px;
    background: #fff;
    border: 1px solid var(--nm-line);
    border-radius: 8px;
}

.bkmail-source[b-ntz1ceykv2] {
    max-height: 60vh;
    margin: 0;
    padding: 12px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-line);
    border-radius: 8px;
}

/* ── Toàn màn hình ── */

.bkmail-full[b-ntz1ceykv2] {
    position: fixed;
    inset: 0;
    z-index: 1200;   /* trên NmModal overlay — hai chế độ không bao giờ chồng nhau, nhưng để chắc */
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
}

.bkmail-full__bar[b-ntz1ceykv2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--nm-line);
    background: var(--nm-surface);
}

.bkmail-full__title[b-ntz1ceykv2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--nm-ink);
}

.bkmail-full__act[b-ntz1ceykv2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Thân chiếm hết chiều cao còn lại; iframe bên trong ăn theo nên thư dài cuộn TRONG khung
   thay vì đẩy cả lớp phủ dài ra. */
.bkmail-full__body[b-ntz1ceykv2] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.bkmail-full__body .bkmail-detail[b-ntz1ceykv2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.bkmail-frame.is-full[b-ntz1ceykv2],
.bkmail-source.is-full[b-ntz1ceykv2] {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
}

/* Điện thoại: mã đơn dài + tiêu đề dài không được đẩy ngang trang. */
@media (max-width: 640px) {
    .bkmail-item__main[b-ntz1ceykv2],
    .bkmail-item__meta[b-ntz1ceykv2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bkmail-subject[b-ntz1ceykv2],
    .bkmail-to[b-ntz1ceykv2] {
        max-width: 100%;
    }
}
/* /src/Features/_Shared/Common/DevTabCard.razor.rz.scp.css */
/* DevTabCard — Manager Dashboard v4 theme */
.dtc-root[b-3e2daeaesz] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 24px;
    text-align: center;
    color: var(--d-ink);
}

.dtc-ico[b-3e2daeaesz] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -2px rgba(16, 24, 40, .08);
}

    .dtc-ico svg[b-3e2daeaesz] {
        width: 26px;
        height: 26px;
    }

.dtc-title[b-3e2daeaesz] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 8px;
    line-height: 1.25;
}

.dtc-desc[b-3e2daeaesz] {
    font-size: 14px;
    color: var(--d-ink-3);
    max-width: 360px;
    margin: 0 auto 8px;
    line-height: 1.5;
}

.dtc-tag[b-3e2daeaesz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 6px;
}

    .dtc-tag .d[b-3e2daeaesz] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--d-accent-grad);
    }
/* /src/Features/_Shared/Common/LanguageSwitcher.razor.rz.scp.css */
/* LanguageSwitcher — Manager Dashboard v4 theme */
.ls-root[b-kzykogf4wq] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-r: 12px;

    position: relative;
    display: inline-block;
}

.ls-trigger[b-kzykogf4wq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .ls-trigger:hover[b-kzykogf4wq] {
        background: var(--d-surface-2);
        color: var(--d-accent);
    }

.ls-flag[b-kzykogf4wq] {
    font-size: 15px;
    line-height: 1;
}

.ls-code[b-kzykogf4wq] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 639px) {
    .ls-code[b-kzykogf4wq] { display: none; }
}

.ls-caret[b-kzykogf4wq] {
    width: 12px;
    height: 12px;
    opacity: 0.8;
    color: var(--d-ink-3);
}

.ls-backdrop[b-kzykogf4wq] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.ls-menu[b-kzykogf4wq] {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    width: 180px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 8px 24px -4px rgba(16, 24, 40, 0.10), 0 2px 6px -1px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    padding: 4px;
}

.ls-item[b-kzykogf4wq] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--d-ink-2);
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ls-item:hover[b-kzykogf4wq] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ls-item.is-active[b-kzykogf4wq] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        font-weight: 600;
    }

.ls-item-name[b-kzykogf4wq] {
    flex: 1;
    text-align: left;
}

.ls-check[b-kzykogf4wq] {
    width: 14px;
    height: 14px;
    color: var(--d-accent);
    margin-left: auto;
}
/* /src/Features/_Shared/Delegations/DelegationsView.razor.rz.scp.css */
/* Ủy quyền phê duyệt — dựng theo đúng khuôn các màn CA khác (xem CaJobTitles/CaBookings).
   ★ HAI ĐIỂM DỄ SAI, đã dính cả hai ở bản trước:
   1) `nm-list-page`/`nm-list-head`/`nm-list-title`/`nm-list-sub`/`nm-list-actions` KHÔNG phải class
      toàn cục — CSS của Blazor là scoped nên MỖI TRANG phải tự khai lại. Thiếu là trang mất sạch
      padding/typography, nhìn như chưa có CSS.
   2) Token đúng tên là `--nm-ink` (chữ) và `--nm-muted` (chữ mờ). KHÔNG có `--nm-text-muted`. */

.nm-list-page[b-0hna0iocsl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-0hna0iocsl] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-0hna0iocsl] {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
}

.nm-list-sub[b-0hna0iocsl] {
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--nm-muted);
}

.nm-list-actions[b-0hna0iocsl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Thống kê ở cạnh phải thanh công cụ ── */
.del-stat[b-0hna0iocsl] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

    .del-stat small[b-0hna0iocsl] {
        color: var(--nm-muted);
        font-size: 12px;
    }

    .del-stat b[b-0hna0iocsl] {
        font-size: 14px;
        font-weight: 700;
        color: var(--nm-ink);
        font-variant-numeric: tabular-nums;
    }

    .del-stat b.is-good[b-0hna0iocsl] {
        color: var(--nm-ok);
    }

/* ── Header thẻ danh sách ──
   `.nm-card__head` mặc định KHÔNG phải flex (xem NmCard.razor.css) — trang nào cần xếp ngang thì tự
   khai như CaBookingDetail. Thiếu dòng này thì icon/tiêu đề/số đếm rớt dòng và `margin-left:auto`
   của phần gợi ý không có tác dụng. */
[b-0hna0iocsl] .del-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.del-card-ico[b-0hna0iocsl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nm-accent-soft);
    color: var(--nm-accent);
    font-size: 14px;
}

.del-card-title[b-0hna0iocsl] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.del-card-count[b-0hna0iocsl] {
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.del-card-hint[b-0hna0iocsl] {
    margin-left: auto;
    color: var(--nm-muted);
    font-size: 12px;
}

/* ── Ô trong bảng ──
   ★ PHẢI dùng ::deep: mấy ô này do code-behind dựng bằng RenderTreeBuilder nên KHÔNG được gắn
   thuộc tính scope (Blazor chỉ gắn cho markup viết trong .razor). Viết selector trần là luật rơi
   vào hư không — bảng hiện chữ trần, không mũi tên, không canh số. */
[b-0hna0iocsl] .del-party {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--nm-ink);
}

    /* Cột "người được ủy quyền": mũi tên mờ dẫn mắt từ cột trước sang */
    [b-0hna0iocsl] .del-party--to i {
        color: var(--nm-muted);
        font-size: 12px;
    }

[b-0hna0iocsl] .del-period {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--nm-muted);
}

/* Suất đã hết hạn / bị thu hồi: mờ đi nhưng vẫn đọc được (không phải dữ liệu rác) */
[b-0hna0iocsl] .del-row-ended {
    opacity: .62;
}

.del-loading[b-0hna0iocsl] {
    padding: 48px 0;
}

.del-form[b-0hna0iocsl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Màn hẹp ── */
@media (max-width: 720px) {
    .nm-list-page[b-0hna0iocsl] {
        padding: 16px 14px 22px;
    }

    .del-card-hint[b-0hna0iocsl] {
        display: none;   /* nhường chỗ cho tiêu đề + số đếm */
    }
}
/* /src/Features/_Shared/Employees/EmployeeCreateForm.razor.rz.scp.css */
/* /ca/employees/new — chuẩn nm token-only: shell 3 cột + side panel form + card + role picker. */
.nm-list-page[b-smustzzy5b] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-smustzzy5b] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-smustzzy5b] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-smustzzy5b] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-smustzzy5b] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.caec-crumb[b-smustzzy5b] { color: var(--nm-muted); text-decoration: none; }
.caec-crumb:hover[b-smustzzy5b] { color: var(--nm-brand-700); text-decoration: underline; }
.caec-crumb-sep[b-smustzzy5b] { margin: 0 4px; color: var(--nm-muted); }

.caec-loading[b-smustzzy5b] { display: flex; flex-direction: column; gap: 12px; }

/* ── Shell 3 cột ── */
.caec-shell[b-smustzzy5b] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .caec-shell[b-smustzzy5b] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Side panel (trái + phải) ── */
.caec-side[b-smustzzy5b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.caec-block[b-smustzzy5b] { display: flex; flex-direction: column; gap: 8px; }
.caec-block--divider[b-smustzzy5b] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.caec-label[b-smustzzy5b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.caec-label i[b-smustzzy5b] { font-size: 12px; }

/* Hàng label–value trong tóm tắt */
.caec-meta-row[b-smustzzy5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    min-height: 22px;
}
.caec-meta-row span[b-smustzzy5b] { color: var(--nm-muted); flex-shrink: 0; }
.caec-meta-row b[b-smustzzy5b] {
    font-weight: 600;
    color: var(--nm-ink);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.caec-meta-row--em[b-smustzzy5b] {
    padding: 6px 9px;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-brand-50);
    min-height: 32px;
}
.caec-meta-row--em b[b-smustzzy5b] { color: var(--nm-brand-700); font-weight: 700; }

/* Preview avatar (tóm tắt phải) */
.caec-preview[b-smustzzy5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.caec-preview-info[b-smustzzy5b] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.caec-preview-info b[b-smustzzy5b] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.caec-preview-info small[b-smustzzy5b] {
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.caec-placeholder[b-smustzzy5b] { color: var(--nm-muted); font-weight: 400; font-style: italic; }

/* ── Card giữa ── */
.caec-main[b-smustzzy5b] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

[b-smustzzy5b] .caec-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.caec-card-ico[b-smustzzy5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.caec-card-title[b-smustzzy5b] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.caec-card-sub[b-smustzzy5b] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }
.caec-card-count[b-smustzzy5b] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.caec-card-body[b-smustzzy5b] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Giấy tờ — CCCD + hộ chiếu xếp chồng, mỗi khối 1 dòng riêng */
.caec-doc-group[b-smustzzy5b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
.caec-doc-block[b-smustzzy5b] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.caec-doc-title[b-smustzzy5b] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.caec-doc-title i[b-smustzzy5b] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.caec-doc-hint[b-smustzzy5b] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
    font-style: italic;
}

/* ── Role picker cards ── */
.caec-role-grid[b-smustzzy5b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.caec-role[b-smustzzy5b] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.caec-role:hover[b-smustzzy5b] { border-color: var(--nm-brand-500); }
.caec-role.is-on[b-smustzzy5b] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.caec-role-check[b-smustzzy5b] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    color: var(--nm-brand-700);
}
.caec-role-name[b-smustzzy5b] { font-size: 13px; font-weight: 700; color: var(--nm-ink); padding-right: 20px; }
.caec-role-desc[b-smustzzy5b] { font-size: 11.5px; color: var(--nm-muted); }
.caec-role-meta[b-smustzzy5b] {
    margin-top: 3px;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.caec-role.is-on .caec-role-meta[b-smustzzy5b] { background: var(--nm-surface); color: var(--nm-brand-700); }

@media (max-width: 640px) {
    .nm-list-page[b-smustzzy5b] { padding: 16px 14px 22px; }
}
/* /src/Features/_Shared/Employees/EmployeeDetailView.razor.rz.scp.css */
/* /ca/employees/{id} — chuẩn nm token-only: hero định danh + NmTabs 3 tab (hồ sơ | công việc | tài khoản). */
.nm-list-page[b-p5qwmqewi1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* NmPageHeader tự có margin dưới — page đã dùng gap nên bỏ bớt. */
[b-p5qwmqewi1] .caed-header { margin-bottom: 0; }

.nm-code-pill[b-p5qwmqewi1] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.caed-loading[b-p5qwmqewi1] { display: flex; flex-direction: column; gap: 12px; }

/* ── Hero: định danh + chỉ số nhanh ── */
.caed-hero[b-p5qwmqewi1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.caed-hero-id[b-p5qwmqewi1] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.caed-hero-who[b-p5qwmqewi1] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.caed-hero-name[b-p5qwmqewi1] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.caed-hero-name > b[b-p5qwmqewi1] { font-size: 17px; font-weight: 800; color: var(--nm-ink); }
.caed-hero-sub[b-p5qwmqewi1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.caed-hero-sub i[b-p5qwmqewi1] { font-size: 12px; color: var(--nm-brand-600, var(--nm-brand-500)); margin-right: 3px; }
.caed-hero-sep[b-p5qwmqewi1] { color: var(--nm-border); }

/* Dải chỉ số nhanh bên phải hero — NmKpi chuẩn kit, compact cho vừa hero. */
.caed-kpis[b-p5qwmqewi1] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.caed-kpis[b-p5qwmqewi1]  .nm-kpi { padding: 8px 12px; min-width: 120px; background: var(--nm-surface-2); }
.caed-kpis[b-p5qwmqewi1]  .nm-kpi__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.caed-kpis[b-p5qwmqewi1]  .nm-kpi__val { margin-top: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.caed-good[b-p5qwmqewi1] { color: var(--nm-ok) !important; }
.caed-bad[b-p5qwmqewi1] { color: var(--nm-bad) !important; }

/* Chip cấp bậc — màu động theo rank nên giữ inline-style, khung dùng token */
.caed-rank-chip[b-p5qwmqewi1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.caed-rank-dot[b-p5qwmqewi1] { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── Nội dung tab ── */
.caed-tab-body[b-p5qwmqewi1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    max-width: 980px;
}

[b-p5qwmqewi1] .caed-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.caed-card-ico[b-p5qwmqewi1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.caed-card-title[b-p5qwmqewi1] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.caed-card-sub[b-p5qwmqewi1] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }
.caed-card-count[b-p5qwmqewi1] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}

.caed-card-body[b-p5qwmqewi1] { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

/* Giá trị trong NmDescriptionList */
.caed-dd-inline[b-p5qwmqewi1] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caed-mono[b-p5qwmqewi1] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
}
.caed-em[b-p5qwmqewi1] { color: var(--nm-brand-700); font-weight: 800; font-size: 15px; }

/* Giấy tờ — CCCD + hộ chiếu song song */
.caed-doc-group[b-p5qwmqewi1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
@media (max-width: 900px) { .caed-doc-group[b-p5qwmqewi1] { grid-template-columns: minmax(0, 1fr); } }
.caed-doc-block[b-p5qwmqewi1] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.caed-doc-title[b-p5qwmqewi1] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.caed-doc-title i[b-p5qwmqewi1] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.caed-doc-hint[b-p5qwmqewi1] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
    font-style: italic;
}

/* Hàng nút quản lý tài khoản */
.caed-acc-actions[b-p5qwmqewi1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}

/* Vai trò — NmTag đổi sang tông brand */
.caed-role-tags[b-p5qwmqewi1] { display: flex; flex-wrap: wrap; gap: 6px; }
.caed-role-tags[b-p5qwmqewi1]  .caed-role-tag {
    border-color: color-mix(in srgb, var(--nm-brand-500) 35%, transparent);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

/* ── Responsive ── */
@media (max-width: 760px) {
    .caed-hero[b-p5qwmqewi1] { flex-direction: column; align-items: stretch; }
    .caed-kpis[b-p5qwmqewi1] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .caed-kpis[b-p5qwmqewi1]  .nm-kpi { min-width: 0; }
    .caed-kpis[b-p5qwmqewi1]  .nm-kpi__val { white-space: normal; }
}
@media (max-width: 640px) {
    .nm-list-page[b-p5qwmqewi1] { padding: 16px 14px 22px; }
    [b-p5qwmqewi1] .caed-tabs .nm-tabs__bar { overflow-x: auto; }
}
/* /src/Features/_Shared/Employees/EmployeeEditForm.razor.rz.scp.css */
/* /ca/employees/{id}/edit — chuẩn nm token-only: hero live-preview + NmTabs 3 tab (cá nhân | công việc | phân quyền),
   mirror trang chi tiết caed-*. */
.nm-list-page[b-29lus1crcf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* NmPageHeader tự có margin dưới — page đã dùng gap nên bỏ bớt. */
[b-29lus1crcf] .caee-header { margin-bottom: 0; }

.nm-code-pill[b-29lus1crcf] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.caee-loading[b-29lus1crcf] { display: flex; flex-direction: column; gap: 12px; }

/* ── Hero: định danh live + trạng thái + chỉ số nhanh ── */
.caee-hero[b-29lus1crcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.caee-hero-id[b-29lus1crcf] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.caee-hero-who[b-29lus1crcf] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.caee-hero-name[b-29lus1crcf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.caee-hero-name > b[b-29lus1crcf] { font-size: 17px; font-weight: 800; color: var(--nm-ink); }
.caee-hero-sub[b-29lus1crcf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.caee-hero-sub i[b-29lus1crcf] { font-size: 12px; color: var(--nm-brand-600, var(--nm-brand-500)); margin-right: 3px; }
.caee-hero-sep[b-29lus1crcf] { color: var(--nm-border); }

/* Dải chỉ số nhanh bên phải hero — NmKpi chuẩn kit, compact cho vừa hero. */
.caee-kpis[b-29lus1crcf] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.caee-kpis[b-29lus1crcf]  .nm-kpi { padding: 8px 12px; min-width: 120px; background: var(--nm-surface-2); }
.caee-kpis[b-29lus1crcf]  .nm-kpi__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.caee-kpis[b-29lus1crcf]  .nm-kpi__val { margin-top: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ── Nội dung tab ── */
.caee-tab-body[b-29lus1crcf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    max-width: 980px;
}

[b-29lus1crcf] .caee-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.caee-card-ico[b-29lus1crcf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.caee-card-title[b-29lus1crcf] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.caee-card-sub[b-29lus1crcf] { font-size: 11px; color: var(--nm-muted); font-weight: 400; }
.caee-card-count[b-29lus1crcf] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.caee-card-body[b-29lus1crcf] { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Giấy tờ — CCCD + hộ chiếu song song */
.caee-doc-group[b-29lus1crcf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
@media (max-width: 900px) { .caee-doc-group[b-29lus1crcf] { grid-template-columns: minmax(0, 1fr); } }
.caee-doc-block[b-29lus1crcf] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.caee-doc-title[b-29lus1crcf] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.caee-doc-title i[b-29lus1crcf] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.caee-doc-hint[b-29lus1crcf] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
    font-style: italic;
}

/* ── Role / scope picker cards ── */
.caee-role-grid[b-29lus1crcf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.caee-role-grid--two[b-29lus1crcf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .caee-role-grid--two[b-29lus1crcf] { grid-template-columns: minmax(0, 1fr); } }
.caee-role[b-29lus1crcf] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.caee-role:hover:not(:disabled)[b-29lus1crcf] { border-color: var(--nm-brand-500); }
.caee-role.is-on[b-29lus1crcf] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.caee-role:disabled[b-29lus1crcf] { opacity: .6; cursor: not-allowed; }
.caee-role-check[b-29lus1crcf] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    color: var(--nm-brand-700);
}
.caee-role-name[b-29lus1crcf] { font-size: 13px; font-weight: 700; color: var(--nm-ink); padding-right: 20px; }
.caee-role-desc[b-29lus1crcf] { font-size: 11.5px; color: var(--nm-muted); }
.caee-role-meta[b-29lus1crcf] {
    margin-top: 3px;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.caee-role.is-on .caee-role-meta[b-29lus1crcf] { background: var(--nm-surface); color: var(--nm-brand-700); }

/* Footer lưu vai trò + dòng trạng thái */
.caee-role-footer[b-29lus1crcf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
.caee-msg[b-29lus1crcf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
}
.caee-msg--good[b-29lus1crcf] { color: var(--nm-ok); }
.caee-msg--err[b-29lus1crcf] { color: var(--nm-bad); }
.caee-msg--warn[b-29lus1crcf] { color: var(--nm-warn); }

/* ── Responsive ── */
@media (max-width: 760px) {
    .caee-hero[b-29lus1crcf] { flex-direction: column; align-items: stretch; }
    .caee-kpis[b-29lus1crcf] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .caee-kpis[b-29lus1crcf]  .nm-kpi { min-width: 0; }
    .caee-kpis[b-29lus1crcf]  .nm-kpi__val { white-space: normal; }
}
@media (max-width: 640px) {
    .nm-list-page[b-29lus1crcf] { padding: 16px 14px 22px; }
    [b-29lus1crcf] .caee-tabs .nm-tabs__bar { overflow-x: auto; }
}
/* /src/Features/_Shared/FastTrack/FastTrackBookingWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Booking — Manager Dashboard v4 theme
   Prefix: ftservice-
   ═══════════════════════════════════════════════════════════════ */

.ftservice-root[b-4i7to4ftyy] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-info: #0284c7;
    --d-info-soft: #e0f2fe;
    --d-purple: #7c3aed;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.ftservice-num[b-4i7to4ftyy] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

.ftservice-mono[b-4i7to4ftyy] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Container ─── */
.ftservice-content[b-4i7to4ftyy] {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Stepper ─── */
.ftservice-stepper-card[b-4i7to4ftyy] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 16px;
    overflow-x: auto;
}

.ftservice-stepper[b-4i7to4ftyy] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: max-content;
}

.ftservice-stp[b-4i7to4ftyy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ftservice-stp-num[b-4i7to4ftyy] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
    flex-shrink: 0;
    transition: all .15s;
}

    .ftservice-stp.is-active .ftservice-stp-num[b-4i7to4ftyy] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0,.2), 0 4px 10px -2px rgba(255, 107, 0,.22);
    }

    .ftservice-stp.is-done .ftservice-stp-num[b-4i7to4ftyy] {
        background: var(--d-good);
        color: #fff;
        border-color: transparent;
    }

.ftservice-stp-lbl[b-4i7to4ftyy] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d-ink-4);
    white-space: nowrap;
}

    .ftservice-stp.is-active .ftservice-stp-lbl[b-4i7to4ftyy] { color: var(--d-accent); font-weight: 600; }
    .ftservice-stp.is-done .ftservice-stp-lbl[b-4i7to4ftyy] { color: var(--d-ink-2); }

.ftservice-stp-bar[b-4i7to4ftyy] {
    width: 28px;
    height: 1px;
    background: var(--d-line);
}

    .ftservice-stp-bar.is-done[b-4i7to4ftyy] { background: var(--d-good); }

/* ─── Generic card ─── */
.ftservice-card[b-4i7to4ftyy] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftservice-card-bd[b-4i7to4ftyy] { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }

/* ─── Section header (eyebrow with stripe) ─── */
.ftservice-eyebrow[b-4i7to4ftyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .ftservice-eyebrow .stripe[b-4i7to4ftyy] {
        width: 3px;
        height: 14px;
        border-radius: 2px;
        background: var(--d-accent-grad);
    }

    .ftservice-eyebrow .stripe.info[b-4i7to4ftyy] { background: var(--d-info); }
    .ftservice-eyebrow .stripe.purple[b-4i7to4ftyy] { background: var(--d-purple); }
    .ftservice-eyebrow .stripe.good[b-4i7to4ftyy] { background: var(--d-good); }
    .ftservice-eyebrow .stripe.warn[b-4i7to4ftyy] { background: var(--d-warn); }
    .ftservice-eyebrow .stripe.danger[b-4i7to4ftyy] { background: var(--d-danger); }

    .ftservice-eyebrow h3[b-4i7to4ftyy] {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

/* ─── Buttons ─── */
.ftservice-btn[b-4i7to4ftyy] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ftservice-btn:hover[b-4i7to4ftyy] { background: var(--d-surface-2); }
    .ftservice-btn:disabled[b-4i7to4ftyy] { opacity: .5; cursor: not-allowed; }

.ftservice-btn-sm[b-4i7to4ftyy] {
    height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 8px;
}

.ftservice-btn-accent[b-4i7to4ftyy] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.18), 0 4px 12px -2px rgba(255, 107, 0,.22);
    font-weight: 600;
}

    .ftservice-btn-accent:hover[b-4i7to4ftyy] { background: var(--d-accent-grad-hover); color: #fff; }

.ftservice-btn-ghost[b-4i7to4ftyy] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .ftservice-btn-ghost:hover[b-4i7to4ftyy] { background: var(--d-surface-2); color: var(--d-ink); }

.ftservice-btn-danger-soft[b-4i7to4ftyy] {
    background: var(--d-surface);
    border-color: color-mix(in srgb, var(--d-danger) 25%, var(--d-line));
    color: var(--d-danger);
    width: 36px;
    padding: 0;
    justify-content: center;
}

    .ftservice-btn-danger-soft:hover[b-4i7to4ftyy] { background: color-mix(in srgb, var(--d-danger) 8%, transparent); }

/* ─── Form ─── */
.ftservice-grid-3[b-4i7to4ftyy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) { .ftservice-grid-3[b-4i7to4ftyy] { grid-template-columns: repeat(3, 1fr); } }

.ftservice-grid-2[b-4i7to4ftyy] { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .ftservice-grid-2[b-4i7to4ftyy] { grid-template-columns: 1fr 1fr; } }

.ftservice-field[b-4i7to4ftyy] { display: flex; flex-direction: column; gap: 4px; }

.ftservice-label[b-4i7to4ftyy] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .ftservice-label .req[b-4i7to4ftyy] { color: var(--d-danger); margin-left: 2px; }
    .ftservice-label .sub[b-4i7to4ftyy] { color: var(--d-ink-4); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 4px; }

.ftservice-input[b-4i7to4ftyy],
.ftservice-textarea[b-4i7to4ftyy] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .12s, box-shadow .12s;
    outline: none;
}

    .ftservice-input.is-mono[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

.ftservice-textarea[b-4i7to4ftyy] {
    height: auto;
    min-height: 70px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.ftservice-input:focus[b-4i7to4ftyy],
.ftservice-textarea:focus[b-4i7to4ftyy] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0,.12);
}

/* ─── Pill / chip selector ─── */
.ftservice-row[b-4i7to4ftyy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ftservice-row-lbl[b-4i7to4ftyy] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: 64px;
    flex-shrink: 0;
    margin-top: 6px;
}

.ftservice-pills[b-4i7to4ftyy] { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.ftservice-pill[b-4i7to4ftyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-pill:hover[b-4i7to4ftyy] {
        border-color: var(--d-ink-4);
        background: var(--d-surface-2);
    }

    .ftservice-pill.is-active[b-4i7to4ftyy] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0,.18);
    }

    .ftservice-pill .code[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px;
        color: var(--d-ink-3);
    }

    .ftservice-pill.is-active .code[b-4i7to4ftyy] { color: rgba(255,255,255,.85); }

    .ftservice-pill .count[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

    .ftservice-pill.is-active .count[b-4i7to4ftyy] {
        background: rgba(255,255,255,.22);
        color: #fff;
    }

/* ─── Hero airport panel ─── */
.ftservice-hero-row[b-4i7to4ftyy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftservice-hero-ico[b-4i7to4ftyy] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.ftservice-hero-title[b-4i7to4ftyy] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.025em;
}

.ftservice-hero-sub[b-4i7to4ftyy] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }

.ftservice-pkg-card[b-4i7to4ftyy] {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) { .ftservice-pkg-card[b-4i7to4ftyy] { grid-template-columns: 220px 1fr; } }

.ftservice-pkg-hero[b-4i7to4ftyy] {
    background: var(--d-accent-grad);
    color: #fff;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

.ftservice-pkg-hero-bg[b-4i7to4ftyy] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay tối/gradient để chữ trắng đọc rõ trên ảnh sân bay.
   Tông trung tính (đậm dần xuống đáy nơi đặt chữ), chỉ giữ chút ấm ở góc — tránh phủ cam quá đậm */
.ftservice-pkg-hero.has-img[b-4i7to4ftyy]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(165deg, rgba(16, 24, 40,.12) 0%, rgba(16, 24, 40,.40) 52%, rgba(67,32,12,.72) 100%);
}

.ftservice-pkg-hero-text[b-4i7to4ftyy] {
    position: relative;
    z-index: 2;
}

.ftservice-pkg-hero-badge[b-4i7to4ftyy] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftservice-pkg-iata[b-4i7to4ftyy] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.ftservice-pkg-airport[b-4i7to4ftyy] {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
    color: rgba(255,255,255,.92);
}

.ftservice-pkg-body[b-4i7to4ftyy] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ftservice-info-chips[b-4i7to4ftyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line-2);
}

.ftservice-chip[b-4i7to4ftyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    font-size: 11.5px;
    color: var(--d-ink-2);
}

    .ftservice-chip .lbl[b-4i7to4ftyy] { color: var(--d-ink-3); }
    .ftservice-chip .val[b-4i7to4ftyy] { color: var(--d-ink); font-weight: 600; }
    .ftservice-chip svg[b-4i7to4ftyy] { color: var(--d-ink-4); flex-shrink: 0; }

.ftservice-price-line[b-4i7to4ftyy] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--d-line-2);
}

    .ftservice-price-line .lbl[b-4i7to4ftyy] { font-size: 11.5px; color: var(--d-ink-3); }

    .ftservice-price-line .val[b-4i7to4ftyy] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-price-line .cur[b-4i7to4ftyy] {
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink-3);
    }

/* ─── Spec card ─── */
.ftservice-spec-grid[b-4i7to4ftyy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 24px;
    font-size: 12.5px;
}

@media (min-width: 768px) { .ftservice-spec-grid[b-4i7to4ftyy] { grid-template-columns: 1fr 1fr; } }

.ftservice-spec-row[b-4i7to4ftyy] { display: flex; align-items: baseline; gap: 8px; }

    .ftservice-spec-row .lbl[b-4i7to4ftyy] {
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
    }

    .ftservice-spec-row .val[b-4i7to4ftyy] { color: var(--d-ink); }

.ftservice-spec-stats[b-4i7to4ftyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
}

.ftservice-spec-stat[b-4i7to4ftyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
}

    .ftservice-spec-stat .lbl[b-4i7to4ftyy] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .ftservice-spec-stat .val[b-4i7to4ftyy] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-spec-stat .val.accent[b-4i7to4ftyy] { color: var(--d-accent); }

/* ─── Pill (status / dir) ─── */
.ftservice-tag[b-4i7to4ftyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ftservice-tag-arrival[b-4i7to4ftyy] { background: var(--d-info-soft); color: #075985; border-color: #bae6fd; }
.ftservice-tag-departure[b-4i7to4ftyy] { background: var(--d-accent-soft); color: var(--d-accent); border-color: color-mix(in srgb, var(--d-line) 22%, transparent); }
.ftservice-tag-transit[b-4i7to4ftyy] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.ftservice-tag-other[b-4i7to4ftyy] { background: var(--d-surface-2); color: var(--d-ink-2); border-color: var(--d-line); }
.ftservice-tag-warn[b-4i7to4ftyy] { background: var(--d-warn-soft); color: #92400e; border-color: color-mix(in srgb, var(--d-warn) 28%, transparent); }
.ftservice-tag-good[b-4i7to4ftyy] { background: var(--d-good-soft); color: #166534; border-color: color-mix(in srgb, var(--d-good) 25%, transparent); }
.ftservice-tag-mute[b-4i7to4ftyy] { background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line); }

/* ─── Surcharge rows ─── */
.ftservice-surcharge-list[b-4i7to4ftyy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ftservice-surcharge[b-4i7to4ftyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 25%, transparent);
    font-size: 12px;
}

    .ftservice-surcharge .time[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 600;
        color: #92400e;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-surcharge .dot[b-4i7to4ftyy] { color: var(--d-ink-4); }
    .ftservice-surcharge .days[b-4i7to4ftyy] { color: var(--d-ink-2); flex-shrink: 0; }
    .ftservice-surcharge .note[b-4i7to4ftyy] { color: var(--d-ink-3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ftservice-surcharge .spacer[b-4i7to4ftyy] { flex: 1; }

    .ftservice-surcharge .amt[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        color: #92400e;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-surcharge .amt small[b-4i7to4ftyy] {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            color: var(--d-ink-3);
            margin-left: 2px;
            font-size: 10.5px;
        }

.ftservice-surcharge-banner[b-4i7to4ftyy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent);
    color: #78350f;
    font-size: 12px;
}

    .ftservice-surcharge-banner svg[b-4i7to4ftyy] { color: var(--d-warn); margin-top: 2px; flex-shrink: 0; }
    .ftservice-surcharge-banner b[b-4i7to4ftyy] { color: #78350f; }

/* ─── Passenger row ─── */
.ftservice-pax-row[b-4i7to4ftyy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    align-items: center;
}

@media (min-width: 768px) {
    .ftservice-pax-row[b-4i7to4ftyy] {
        grid-template-columns: 28px 1fr 80px 1fr 38px;
    }
}

.ftservice-pax-idx[b-4i7to4ftyy] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
    text-align: center;
}

/* ─── Meeting point radio ─── */
.ftservice-radio[b-4i7to4ftyy] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-radio:hover[b-4i7to4ftyy] { border-color: var(--d-ink-4); background: var(--d-surface-2); }
    .ftservice-radio.is-selected[b-4i7to4ftyy] { border-color: var(--d-accent); background: var(--d-accent-soft); box-shadow: 0 0 0 3px rgba(255, 107, 0,.10); }

    .ftservice-radio input[type=radio][b-4i7to4ftyy] { width: 16px; height: 16px; accent-color: var(--d-accent); margin-top: 2px; flex-shrink: 0; }

.ftservice-radio-name[b-4i7to4ftyy] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ftservice-radio-name svg[b-4i7to4ftyy] { color: var(--d-accent); flex-shrink: 0; }

.ftservice-radio-meta[b-4i7to4ftyy] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 4px; line-height: 1.45; }

/* ─── Included items ─── */
.ftservice-incl[b-4i7to4ftyy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ftservice-incl-item[b-4i7to4ftyy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--d-good-soft);
    border: 1px solid color-mix(in srgb, var(--d-good) 25%, transparent);
    color: #166534;
    font-size: 12px;
    font-weight: 500;
}

    .ftservice-incl-item svg[b-4i7to4ftyy] { color: var(--d-good); flex-shrink: 0; }

/* ─── Addon ─── */
.ftservice-addon[b-4i7to4ftyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-addon:hover[b-4i7to4ftyy] { border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line)); }
    .ftservice-addon.is-selected[b-4i7to4ftyy] { border-color: var(--d-accent); background: var(--d-accent-soft); }

.ftservice-addon-left[b-4i7to4ftyy] { display: flex; align-items: center; gap: 12px; min-width: 0; }

.ftservice-addon-check[b-4i7to4ftyy] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--d-line);
    background: var(--d-surface);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .12s;
    color: transparent;
}

    .ftservice-addon.is-selected .ftservice-addon-check[b-4i7to4ftyy] {
        background: var(--d-accent);
        border-color: var(--d-accent);
        color: #fff;
    }

.ftservice-addon-name[b-4i7to4ftyy] { font-size: 14px; font-weight: 600; color: var(--d-ink); }

.ftservice-addon-meta[b-4i7to4ftyy] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-top: 2px;
}

    .ftservice-addon-meta .key[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

.ftservice-addon-right[b-4i7to4ftyy] { text-align: right; flex-shrink: 0; margin-left: 10px; }

.ftservice-addon-price[b-4i7to4ftyy] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

    .ftservice-addon-price small[b-4i7to4ftyy] { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--d-ink-3); margin-left: 2px; font-size: 10.5px; }

.ftservice-addon-multi[b-4i7to4ftyy] { font-size: 10.5px; color: var(--d-ink-4); margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }

.ftservice-addon-tag-selected[b-4i7to4ftyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--d-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ─── Quote table ─── */
.ftservice-quote[b-4i7to4ftyy] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftservice-quote-row[b-4i7to4ftyy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12.5px;
}

    .ftservice-quote-row:last-of-type[b-4i7to4ftyy] { border-bottom: 0; }
    .ftservice-quote-row.is-surcharge[b-4i7to4ftyy] { background: var(--d-warn-soft); color: #92400e; }
    .ftservice-quote-row .lbl[b-4i7to4ftyy] { color: var(--d-ink-2); display: inline-flex; align-items: center; gap: 6px; }
    .ftservice-quote-row .val[b-4i7to4ftyy] { color: var(--d-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
    .ftservice-quote-row .val small[b-4i7to4ftyy] { color: var(--d-ink-3); font-family: 'Inter', sans-serif; font-weight: 500; margin-left: 2px; font-size: 10.5px; }

.ftservice-quote-total[b-4i7to4ftyy] {
    background: var(--d-ink);
    color: #fff;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .ftservice-quote-total .lbl[b-4i7to4ftyy] { font-size: 12.5px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; }

    .ftservice-quote-total .val[b-4i7to4ftyy] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #ff9a52;
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-quote-total .val small[b-4i7to4ftyy] { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); margin-left: 4px; }

.ftservice-quote-foot[b-4i7to4ftyy] {
    padding: 8px 14px;
    background: var(--d-warn-soft);
    border-top: 1px solid color-mix(in srgb, var(--d-warn) 25%, transparent);
    color: #92400e;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Payment method ─── */
.ftservice-pay-grid[b-4i7to4ftyy] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 640px) { .ftservice-pay-grid[b-4i7to4ftyy] { grid-template-columns: repeat(3, 1fr); } }

.ftservice-pay-tile[b-4i7to4ftyy] {
    text-align: left;
    padding: 12px 14px;
    border: 1.5px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-pay-tile:hover[b-4i7to4ftyy] { border-color: var(--d-ink-4); }
    .ftservice-pay-tile.is-selected[b-4i7to4ftyy] { border-color: var(--d-accent); background: var(--d-accent-soft); box-shadow: 0 0 0 3px rgba(255, 107, 0,.08); }

.ftservice-pay-name[b-4i7to4ftyy] { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftservice-pay-desc[b-4i7to4ftyy] { font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }

/* ─── Result ─── */
.ftservice-result-hd[b-4i7to4ftyy] {
    background: linear-gradient(135deg, var(--d-good) 0%, #14b8a6 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftservice-result-ico[b-4i7to4ftyy] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}

.ftservice-result-title[b-4i7to4ftyy] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
}

.ftservice-result-sub[b-4i7to4ftyy] { font-size: 11.5px; color: rgba(255,255,255,.92); margin-top: 2px; }

.ftservice-result-grid[b-4i7to4ftyy] {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) { .ftservice-result-grid[b-4i7to4ftyy] { grid-template-columns: 1fr 1fr; } }

.ftservice-result-cell .lbl[b-4i7to4ftyy] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftservice-result-cell .val[b-4i7to4ftyy] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: 2px;
}

    .ftservice-result-cell .val.mono[b-4i7to4ftyy] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
    .ftservice-result-cell .val.accent[b-4i7to4ftyy] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--d-accent);
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-result-cell .val.accent small[b-4i7to4ftyy] { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--d-ink-3); margin-left: 3px; }

.ftservice-result-cell .extra[b-4i7to4ftyy] { font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }

.ftservice-result-foot[b-4i7to4ftyy] {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line);
}

/* ─── Empty / loading / error ─── */
.ftservice-empty[b-4i7to4ftyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.ftservice-empty-ico[b-4i7to4ftyy] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.ftservice-empty h2[b-4i7to4ftyy] {
    margin: 0 0 4px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
}

.ftservice-empty p[b-4i7to4ftyy] { margin: 0; color: var(--d-ink-3); font-size: 12.5px; }

.ftservice-error-banner[b-4i7to4ftyy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
    color: #991b1b;
    font-size: 12.5px;
}

    .ftservice-error-banner svg[b-4i7to4ftyy] { color: var(--d-danger); flex-shrink: 0; margin-top: 2px; }

.ftservice-error-close[b-4i7to4ftyy] {
    background: transparent;
    border: 0;
    color: var(--d-danger);
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}

.ftservice-skeleton[b-4i7to4ftyy] {
    background: var(--d-surface-2);
    border-radius: 6px;
    animation: ftservice-pulse-b-4i7to4ftyy 1.4s ease-in-out infinite;
}

@keyframes ftservice-pulse-b-4i7to4ftyy {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}

.ftservice-spin[b-4i7to4ftyy] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ftservice-spin-b-4i7to4ftyy .7s linear infinite;
    display: inline-block;
}

.ftservice-spin-sm[b-4i7to4ftyy] {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ftservice-spin-b-4i7to4ftyy .7s linear infinite;
    display: inline-block;
}

@keyframes ftservice-spin-b-4i7to4ftyy { to { transform: rotate(360deg); } }

/* ─── Sticky bottom nav ─── */
.ftservice-stickynav[b-4i7to4ftyy] {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    padding: 0 16px;
    pointer-events: none;
}

.ftservice-stickynav-inner[b-4i7to4ftyy] {
    max-width: 960px;
    margin: 0 auto;
    pointer-events: auto;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    box-shadow: 0 8px 28px -8px rgba(16, 24, 40,.18);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ftservice-stickynav-back[b-4i7to4ftyy] {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

    .ftservice-stickynav-back:hover[b-4i7to4ftyy] { background: var(--d-surface-2); color: var(--d-ink); }
    .ftservice-stickynav-back:disabled[b-4i7to4ftyy] { opacity: .35; cursor: not-allowed; }

.ftservice-stickynav-sep[b-4i7to4ftyy] { width: 1px; height: 18px; background: var(--d-line); flex-shrink: 0; }

.ftservice-stickynav-info[b-4i7to4ftyy] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 0 4px;
}

    .ftservice-stickynav-info .step[b-4i7to4ftyy] {
        font-size: 10px;
        font-weight: 700;
        color: var(--d-accent);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-stickynav-info .tier[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--d-ink-2);
        background: var(--d-surface-2);
        padding: 2px 6px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .ftservice-stickynav-info .name[b-4i7to4ftyy] {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--d-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ftservice-stickynav-info .price[b-4i7to4ftyy] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        font-weight: 700;
        color: var(--d-ink);
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-stickynav-info .price small[b-4i7to4ftyy] { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--d-ink-4); margin-left: 2px; }

    .ftservice-stickynav-info .pax[b-4i7to4ftyy] { font-size: 11px; color: var(--d-ink-3); flex-shrink: 0; }
    .ftservice-stickynav-info .placeholder[b-4i7to4ftyy] { font-size: 12px; color: var(--d-ink-3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ftservice-stickynav-next[b-4i7to4ftyy] {
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.2), 0 4px 10px -2px rgba(255, 107, 0,.25);
    transition: background .12s;
}

    .ftservice-stickynav-next:hover[b-4i7to4ftyy] { background: var(--d-accent-grad-hover); }
    .ftservice-stickynav-next:disabled[b-4i7to4ftyy] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }

/* ─── Misc ─── */
.ftservice-divider[b-4i7to4ftyy] { height: 1px; background: var(--d-line-2); margin: 14px 0; border: 0; }

/* /src/Features/_Shared/FastTrack/FastTrackMyBookings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack My Bookings — Manager Dashboard v4 theme
   prefix: ftmb-
   ═══════════════════════════════════════════════════════════════ */

.ftmb-root[b-kw5cm2jjj9] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.ftmb-container[b-kw5cm2jjj9] {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.ftmb-hero[b-kw5cm2jjj9] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

    .ftmb-hero h1[b-kw5cm2jjj9] {
        margin: 0;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 26px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        line-height: 1.15;
    }

        .ftmb-hero h1 em[b-kw5cm2jjj9] {
            font-style: normal;
            color: var(--d-ink-3);
            font-weight: 500;
        }

.ftmb-hero-meta[b-kw5cm2jjj9] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .ftmb-hero-meta .dot[b-kw5cm2jjj9] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.ftmb-hero-actions[b-kw5cm2jjj9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── Buttons ─── */
.ftmb-btn[b-kw5cm2jjj9] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .ftmb-btn:hover[b-kw5cm2jjj9] {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

.ftmb-btn-accent[b-kw5cm2jjj9] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .ftmb-btn-accent:hover[b-kw5cm2jjj9] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.ftmb-btn-icon[b-kw5cm2jjj9] {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftmb-btn-icon:hover[b-kw5cm2jjj9] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.ftmb-btn-danger[b-kw5cm2jjj9] {
    color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border-color: color-mix(in srgb, var(--d-danger) 22%, var(--d-line));
}

    .ftmb-btn-danger:hover[b-kw5cm2jjj9] {
        background: color-mix(in srgb, var(--d-danger) 14%, var(--d-surface));
        color: var(--d-danger);
    }

.ftmb-btn-compact[b-kw5cm2jjj9] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

/* ─── Alert ─── */
.ftmb-alert[b-kw5cm2jjj9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border: 1px solid color-mix(in srgb, var(--d-danger) 24%, var(--d-line));
    color: var(--d-danger);
    font-size: 12.5px;
}

/* ─── Card ─── */
.ftmb-card[b-kw5cm2jjj9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filter bar ─── */
.ftmb-filter[b-kw5cm2jjj9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.ftmb-search[b-kw5cm2jjj9] {
    position: relative;
    flex: 1;
    min-width: 240px;
}

    .ftmb-search svg.ftmb-search-ic[b-kw5cm2jjj9] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--d-ink-4);
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

.ftmb-input[b-kw5cm2jjj9] {
    height: 34px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
}

    .ftmb-input:focus[b-kw5cm2jjj9] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.ftmb-input.ftmb-search-input[b-kw5cm2jjj9] {
    width: 100%;
    padding-left: 30px;
}

.ftmb-select[b-kw5cm2jjj9] {
    height: 34px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .12s, box-shadow .12s;
}

    .ftmb-select:focus[b-kw5cm2jjj9] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.ftmb-filter-meta[b-kw5cm2jjj9] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}

    .ftmb-filter-meta strong[b-kw5cm2jjj9] {
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* ─── Table ─── */
.ftmb-tbl-wrap[b-kw5cm2jjj9] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
}

.ftmb-tbl-scroll[b-kw5cm2jjj9] {
    flex: 1;
    overflow: auto;
}

.ftmb-tbl[b-kw5cm2jjj9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .ftmb-tbl thead th[b-kw5cm2jjj9] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 10;
    }

        .ftmb-tbl thead th.right[b-kw5cm2jjj9] {
            text-align: right;
        }

        .ftmb-tbl thead th.center[b-kw5cm2jjj9] {
            text-align: center;
        }

    .ftmb-tbl tbody td[b-kw5cm2jjj9] {
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .ftmb-tbl tbody tr:last-child td[b-kw5cm2jjj9] {
        border-bottom: 0;
    }

    .ftmb-tbl tbody tr.ftmb-row[b-kw5cm2jjj9] {
        cursor: pointer;
        transition: background .12s;
    }

        .ftmb-tbl tbody tr.ftmb-row:hover[b-kw5cm2jjj9] {
            background: var(--d-surface-2);
        }

    .ftmb-tbl td.right[b-kw5cm2jjj9] {
        text-align: right;
    }

    .ftmb-tbl td.center[b-kw5cm2jjj9] {
        text-align: center;
    }

.ftmb-code[b-kw5cm2jjj9] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 600;
}

.ftmb-pkg-name[b-kw5cm2jjj9] {
    font-weight: 600;
    color: var(--d-ink);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftmb-pkg-sub[b-kw5cm2jjj9] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftmb-num[b-kw5cm2jjj9] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink);
    font-weight: 500;
}

    .ftmb-num .ccy[b-kw5cm2jjj9] {
        color: var(--d-ink-4);
        font-size: 10.5px;
        margin-left: 3px;
        font-family: inherit;
    }

.ftmb-flight[b-kw5cm2jjj9] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
}

.ftmb-apt[b-kw5cm2jjj9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

    .ftmb-apt.sgn[b-kw5cm2jjj9] {
        color: #0369a1;
        background: color-mix(in srgb, #0ea5e9 10%, var(--d-surface));
        border-color: color-mix(in srgb, #0ea5e9 22%, var(--d-line));
    }

    .ftmb-apt.han[b-kw5cm2jjj9] {
        color: #6d28d9;
        background: color-mix(in srgb, #8b5cf6 10%, var(--d-surface));
        border-color: color-mix(in srgb, #8b5cf6 22%, var(--d-line));
    }

    .ftmb-apt.dad[b-kw5cm2jjj9] {
        color: #047857;
        background: color-mix(in srgb, #10b981 10%, var(--d-surface));
        border-color: color-mix(in srgb, #10b981 22%, var(--d-line));
    }

.ftmb-skel[b-kw5cm2jjj9] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftmb-pulse-b-kw5cm2jjj9 1.4s ease-in-out infinite;
}

@keyframes ftmb-pulse-b-kw5cm2jjj9 {
    0%, 100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

.ftmb-empty[b-kw5cm2jjj9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .ftmb-empty .ico[b-kw5cm2jjj9] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--d-accent-grad-soft);
        border: 1px solid #ffe0c7;
        display: grid;
        place-items: center;
        color: var(--d-accent);
        margin-bottom: 6px;
    }

    .ftmb-empty b[b-kw5cm2jjj9] {
        color: var(--d-ink);
        font-weight: 600;
        font-size: 13.5px;
    }

    .ftmb-empty small[b-kw5cm2jjj9] {
        font-size: 12px;
        color: var(--d-ink-3);
        max-width: 320px;
    }

    .ftmb-empty .ftmb-empty-actions[b-kw5cm2jjj9] {
        margin-top: 10px;
        display: flex;
        gap: 8px;
    }

.ftmb-foot[b-kw5cm2jjj9] {
    padding: 10px 14px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    font-size: 11.5px;
}

    .ftmb-foot strong[b-kw5cm2jjj9] {
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
/* /src/Features/_Shared/FastTrack/FtDebtBadge.razor.rz.scp.css */
/* FtDebtBadge — warm-neutral debt indicator */
.ftdb-root[b-2rieprgxxc] {
    --d-ink-4: #a5abb8;
    --d-warn: #d97706;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    letter-spacing: -0.005em;
    background: color-mix(in srgb, var(--d-warn) 12%, #fff);
    color: #92400e;
    border: 1px solid color-mix(in srgb, var(--d-warn) 28%, #fff);
}

    .ftdb-root .ftdb-d[b-2rieprgxxc] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--d-warn);
        flex-shrink: 0;
    }

.ftdb-empty[b-2rieprgxxc] {
    color: var(--d-ink-4);
    font-size: 11.5px;
    line-height: 1.4;
}
/* /src/Features/_Shared/FastTrack/FtPageHeader.razor.rz.scp.css */
/* FtPageHeader — Manager Dashboard v4 theme (warm-neutral) */
.ftph-wrap[b-s3gle47uwk] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);

    padding: 16px 16px 8px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .ftph-wrap[b-s3gle47uwk] {
        padding: 16px 24px 8px;
    }
}

.ftph-hero[b-s3gle47uwk] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
}

@media (min-width: 768px) {
    .ftph-hero[b-s3gle47uwk] {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
    }
}

.ftph-left[b-s3gle47uwk] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ftph-back[b-s3gle47uwk] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, border-color .12s, color .12s;
    text-decoration: none;
}

    .ftph-back:hover[b-s3gle47uwk] {
        background: var(--d-surface-2);
        border-color: #dde1e8;
        color: var(--d-ink);
        text-decoration: none;
    }

.ftph-icon[b-s3gle47uwk] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--d-accent-grad);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -3px rgba(255, 107, 0, .28);
}

.ftph-text[b-s3gle47uwk] {
    min-width: 0;
}

.ftph-title[b-s3gle47uwk] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftph-sub[b-s3gle47uwk] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftph-actions[b-s3gle47uwk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* /src/Features/_Shared/Feedback/ApiErrorAlert.razor.rz.scp.css */
/* ApiErrorAlert — Manager Dashboard v4 theme (warm-neutral) */
.aea-root[b-xmrz8ska3t] {
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-r: 12px;

    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--d-ink-2);
    letter-spacing: -0.01em;
}

    .aea-root.is-warn[b-xmrz8ska3t] {
        border-color: #fde4c2;
        background: #fffbf3;
    }

    .aea-root.is-info[b-xmrz8ska3t] {
        border-color: #dbeafe;
        background: #f5f9ff;
    }

    .aea-root.is-danger[b-xmrz8ska3t] {
        border-color: #fecaca;
        background: #fff5f5;
    }

.aea-icon[b-xmrz8ska3t] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--d-ink-3);
}

.aea-root.is-warn .aea-icon[b-xmrz8ska3t] {
    color: #d97706;
}

.aea-root.is-info .aea-icon[b-xmrz8ska3t] {
    color: #2563eb;
}

.aea-root.is-danger .aea-icon[b-xmrz8ska3t] {
    color: #dc2626;
}

.aea-body[b-xmrz8ska3t] {
    flex: 1;
    min-width: 0;
}

.aea-title[b-xmrz8ska3t] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.aea-msg[b-xmrz8ska3t] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
    line-height: 1.45;
}

.aea-close[b-xmrz8ska3t] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .aea-close:hover[b-xmrz8ska3t] {
        background: rgba(0, 0, 0, 0.04);
        color: var(--d-ink);
    }
/* /src/Features/_Shared/Feedback/ConfirmDialog.razor.rz.scp.css */
/* ConfirmDialog — Manager Dashboard v4 theme */
.cd-overlay[b-ehe4m6i1v6] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

.cd-panel[b-ehe4m6i1v6] {
    width: 100%;
    max-width: 420px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28);
}

.cd-head[b-ehe4m6i1v6] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.cd-icon[b-ehe4m6i1v6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

    .cd-icon.is-danger[b-ehe4m6i1v6] {
        background: #fff1f1;
        border-color: #fecaca;
        color: #dc2626;
    }

    .cd-icon.is-info[b-ehe4m6i1v6] {
        background: #eef4ff;
        border-color: #dbeafe;
        color: #2563eb;
    }

    .cd-icon.is-warning[b-ehe4m6i1v6] {
        background: #fef3c7;
        border-color: #fde68a;
        color: #b45309;
    }

.cd-text[b-ehe4m6i1v6] {
    flex: 1;
    min-width: 0;
}

.cd-title[b-ehe4m6i1v6] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.cd-msg[b-ehe4m6i1v6] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.cd-actions[b-ehe4m6i1v6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cd-btn[b-ehe4m6i1v6] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, filter .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
}

    .cd-btn:hover[b-ehe4m6i1v6] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.cd-btn-primary[b-ehe4m6i1v6] {
    border-color: transparent;
    color: #ffffff;
    background: var(--d-accent-grad);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .cd-btn-primary:hover[b-ehe4m6i1v6] {
        background: var(--d-accent-grad-hover);
        color: #ffffff;
    }

.cd-btn-primary.is-danger[b-ehe4m6i1v6] {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #ef4444 100%);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2), 0 4px 12px -2px rgba(220, 38, 38, 0.22);
}

    .cd-btn-primary.is-danger:hover[b-ehe4m6i1v6] {
        filter: brightness(0.95);
    }

.cd-btn-primary.is-info[b-ehe4m6i1v6] {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 4px 12px -2px rgba(37, 99, 235, 0.22);
}

    .cd-btn-primary.is-info:hover[b-ehe4m6i1v6] {
        filter: brightness(0.95);
    }

.cd-btn-primary.is-warning[b-ehe4m6i1v6] {
    background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.2), 0 4px 12px -2px rgba(217, 119, 6, 0.22);
}

    .cd-btn-primary.is-warning:hover[b-ehe4m6i1v6] {
        filter: brightness(0.95);
    }

.cd-btn:disabled[b-ehe4m6i1v6] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /src/Features/_Shared/Feedback/EmptyState.razor.rz.scp.css */
/* EmptyState — Manager Dashboard v4 warm-neutral */
.es-root[b-qsonoy5fqv] {
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-line: #eceef2;
    --d-surface-2: #f4f5f8;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

.es-icon[b-qsonoy5fqv] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-4);
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}

    .es-icon svg[b-qsonoy5fqv] {
        width: 22px;
        height: 22px;
        display: block;
    }

.es-title[b-qsonoy5fqv] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.es-desc[b-qsonoy5fqv] {
    font-size: 12px;
    color: var(--d-ink-3);
    max-width: 28rem;
    margin: 2px 0 0;
    line-height: 1.5;
}

.es-action[b-qsonoy5fqv] {
    margin-top: 14px;
}
/* /src/Features/_Shared/Feedback/Pagination.razor.rz.scp.css */
/* Pagination — Manager Dashboard v4 theme */
.pg-root[b-y3a7ymabiw] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 4px;
    color: var(--d-ink-2);
}

@media (min-width: 640px) {
    .pg-root[b-y3a7ymabiw] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.pg-info[b-y3a7ymabiw] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

    .pg-info b[b-y3a7ymabiw] {
        font-weight: 600;
        color: var(--d-ink);
    }

    .pg-info .pg-info-cur[b-y3a7ymabiw] {
        color: var(--d-accent);
        font-weight: 600;
    }

.pg-controls[b-y3a7ymabiw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pg-btn[b-y3a7ymabiw] {
    height: 32px;
    min-width: 32px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .pg-btn:hover:not(:disabled)[b-y3a7ymabiw] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .pg-btn:disabled[b-y3a7ymabiw] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.pg-num[b-y3a7ymabiw] {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    display: none;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .pg-num[b-y3a7ymabiw] {
        display: inline-flex;
    }
}

    .pg-num:hover:not(.is-current)[b-y3a7ymabiw] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: var(--d-line);
    }

    .pg-num.is-current[b-y3a7ymabiw] {
        background: var(--d-accent-grad);
        color: #ffffff;
        font-weight: 600;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 10px -3px rgba(255, 107, 0, 0.22);
        cursor: default;
    }

.pg-ellipsis[b-y3a7ymabiw] {
    display: none;
    padding: 0 6px;
    font-size: 12.5px;
    color: var(--d-ink-4);
}

@media (min-width: 640px) {
    .pg-ellipsis[b-y3a7ymabiw] {
        display: inline-block;
    }
}
/* /src/Features/_Shared/Feedback/SkeletonLoader.razor.rz.scp.css */
/* SkeletonLoader — Manager Dashboard v4 warm-neutral */
.sk-root[b-jk45kjw427] {
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-ink-4: #a5abb8;
    --d-r: 12px;
}

.sk-pulse[b-jk45kjw427] {
    animation: sk-pulse-b-jk45kjw427 1.4s ease-in-out infinite;
}

@keyframes sk-pulse-b-jk45kjw427 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Table skeleton */
.sk-table[b-jk45kjw427] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.sk-thead[b-jk45kjw427] {
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
    padding: 10px 16px;
    display: flex;
    gap: 16px;
}

    .sk-thead .sk-bar[b-jk45kjw427] {
        height: 10px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--d-ink-4) 30%, var(--d-surface-2));
        flex: 1;
    }

.sk-trow[b-jk45kjw427] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    gap: 16px;
}

    .sk-trow:last-child[b-jk45kjw427] {
        border-bottom: 0;
    }

    .sk-trow .sk-bar[b-jk45kjw427] {
        height: 10px;
        border-radius: 4px;
        background: var(--d-surface-2);
        flex: 1;
    }

/* Cards skeleton */
.sk-cards[b-jk45kjw427] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .sk-cards.sk-cards-2[b-jk45kjw427] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sk-cards.sk-cards-3[b-jk45kjw427] {
        grid-template-columns: repeat(3, 1fr);
    }

    .sk-cards.sk-cards-4[b-jk45kjw427] {
        grid-template-columns: repeat(4, 1fr);
    }

    .sk-cards.sk-cards-5[b-jk45kjw427] {
        grid-template-columns: repeat(5, 1fr);
    }

    .sk-cards.sk-cards-6[b-jk45kjw427] {
        grid-template-columns: repeat(6, 1fr);
    }
}

.sk-card[b-jk45kjw427] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

    .sk-card .sk-bar[b-jk45kjw427] {
        height: 10px;
        border-radius: 4px;
        background: var(--d-surface-2);
    }

    .sk-card .sk-bar-strong[b-jk45kjw427] {
        background: color-mix(in srgb, var(--d-ink-4) 30%, var(--d-surface-2));
    }

    .sk-card .sk-bar + .sk-bar[b-jk45kjw427] {
        margin-top: 8px;
    }

    .sk-card .sk-bar-w-1-3[b-jk45kjw427] {
        width: 33%;
    }

    .sk-card .sk-bar-w-1-2[b-jk45kjw427] {
        width: 50%;
    }

    .sk-card .sk-bar-w-2-3[b-jk45kjw427] {
        width: 66%;
    }

    .sk-card .sk-bar-h-lg[b-jk45kjw427] {
        height: 18px;
    }

/* Lines skeleton */
.sk-lines[b-jk45kjw427] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .sk-lines .sk-bar[b-jk45kjw427] {
        height: 10px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--d-ink-4) 26%, var(--d-surface-2));
    }
/* /src/Features/_Shared/Feedback/StatCard.razor.rz.scp.css */
/* StatCard — Manager Dashboard v4 theme (warm-neutral tile) */
.sc-root[b-72lw3hq4ph] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    transition: border-color .15s, background .15s;
}

    .sc-root:hover[b-72lw3hq4ph] {
        background: var(--d-surface);
        border-color: #dde1e8;
    }

.sc-row[b-72lw3hq4ph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sc-text[b-72lw3hq4ph] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-lbl[b-72lw3hq4ph] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-dot[b-72lw3hq4ph] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-ink-4);
    flex-shrink: 0;
}

    .sc-dot.is-orange[b-72lw3hq4ph] {
        background: var(--d-accent-grad);
    }

    .sc-dot.is-amber[b-72lw3hq4ph] {
        background: #d97706;
    }

    .sc-dot.is-green[b-72lw3hq4ph] {
        background: #16a34a;
    }

    .sc-dot.is-purple[b-72lw3hq4ph] {
        background: #6366f1;
    }

    .sc-dot.is-red[b-72lw3hq4ph] {
        background: #dc2626;
    }

    .sc-dot.is-blue[b-72lw3hq4ph] {
        background: #2563eb;
    }

.sc-val[b-72lw3hq4ph] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-sub[b-72lw3hq4ph] {
    margin: 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-ico[b-72lw3hq4ph] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
}

    .sc-ico.is-orange[b-72lw3hq4ph] {
        background: var(--d-accent-grad);
        border-color: transparent;
        color: #ffffff;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }
/* /src/Features/_Shared/Feedback/ToastNotification.razor.rz.scp.css */
/* ToastNotification — Manager Dashboard v4 theme */
.tn-stack[b-ab5491o82p] {
    --d-surface: #ffffff;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-r: 12px;

    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.tn-item[b-ab5491o82p] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.18), 0 2px 6px -1px rgba(16, 24, 40, 0.08);
    animation: tn-fade-in-b-ab5491o82p .18s ease-out both;
    color: var(--d-ink-2);
}

    .tn-item.is-success[b-ab5491o82p] {
        border-color: #bbf7d0;
    }

    .tn-item.is-error[b-ab5491o82p] {
        border-color: #fecaca;
    }

    .tn-item.is-warning[b-ab5491o82p] {
        border-color: #ffe0c7;
    }

    .tn-item.is-info[b-ab5491o82p] {
        border-color: #dbeafe;
    }

.tn-ico[b-ab5491o82p] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

    .tn-ico.is-success[b-ab5491o82p] {
        background: #dcfce7;
        color: #15803d;
    }

    .tn-ico.is-error[b-ab5491o82p] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .tn-ico.is-warning[b-ab5491o82p] {
        background: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
        color: #d97706;
    }

    .tn-ico.is-info[b-ab5491o82p] {
        background: #dbeafe;
        color: #1d4ed8;
    }

.tn-body[b-ab5491o82p] {
    flex: 1;
    min-width: 0;
}

.tn-title[b-ab5491o82p] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.tn-msg[b-ab5491o82p] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    line-height: 1.45;
}

.tn-close[b-ab5491o82p] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tn-close:hover[b-ab5491o82p] {
        background: rgba(0, 0, 0, 0.04);
        color: var(--d-ink);
    }

@keyframes tn-fade-in-b-ab5491o82p {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /src/Features/_Shared/Flight/FareCardConditions.razor.rz.scp.css */
/* Group header (Đổi vé / Hoàn vé / Khác...) — neutral, không màu nhấn.
   Dùng border-top mảnh để tách section thay vì bar/màu. */
.fcc-grp[b-bzx0cokt42] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--d-ink-2);
    padding-top: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
    border-top: 1px solid var(--d-line-2);
}

    .fcc-grp:first-child[b-bzx0cokt42] {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

/* Mỗi điều kiện = block dọc: label (xám nhỏ) → value (in đậm). Wrap đầy đủ, không truncate. */
.fcc-row[b-bzx0cokt42] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 0;
    line-height: 1.35;
}

.fcc-lbl[b-bzx0cokt42] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fcc-val[b-bzx0cokt42] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Nhấn nhá theo ngữ nghĩa: lợi ích (xanh) nổi; hạn chế / không-áp-dụng dịu lại (vẫn đọc rõ) lùi nhẹ.
   Giá trị cụ thể giữ đậm mặc định ở trên. */
.fcc-val.yes[b-bzx0cokt42] {
    color: #15803d;
}

.fcc-val.muted[b-bzx0cokt42] {
    color: var(--d-ink-2);
    font-weight: 500;
}

/* Chế độ Tóm tắt: label trái — badge phải, trên 1 dòng. */
.fcc-row-inline[b-bzx0cokt42] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fcc-badge[b-bzx0cokt42] {
    flex-shrink: 0;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

    .fcc-badge.yes[b-bzx0cokt42] {
        background: #dcfce7;
        color: #15803d;
    }

    .fcc-badge.no[b-bzx0cokt42] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .fcc-badge.unknown[b-bzx0cokt42] {
        background: #f1f5f9;
        color: #475569;
    }
/* /src/Features/_Shared/Flight/FareConditionsPanel.razor.rz.scp.css */
.fcp-root[b-egc11ihwvk] {
    background: #fff8f2;
    border: 1px solid #ffe0c7;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.825rem;
    color: #1f2937;
}

.fcp-header[b-egc11ihwvk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.fcp-title[b-egc11ihwvk] {
    margin: 0 0 0.125rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e85f00;
}

.fcp-effective[b-egc11ihwvk] {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.fcp-table-wrap[b-egc11ihwvk] {
    overflow-x: auto;
    border: 1px solid #ffe0c7;
    border-radius: 0.5rem;
    background: white;
}

.fcp-table[b-egc11ihwvk] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.fcp-table th[b-egc11ihwvk],
.fcp-table td[b-egc11ihwvk] {
    border: 1px solid #fde4cf;
    padding: 0.5rem 0.625rem;
    vertical-align: top;
    text-align: left;
}

.fcp-group-cell[b-egc11ihwvk] {
    background: #ff9a52;
    color: white;
    font-weight: 600;
    text-align: center !important;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.fcp-col-header[b-egc11ihwvk] {
    background: #fff8f2;
    color: #c2540a;
    font-weight: 600;
    white-space: nowrap;
    text-align: center !important;
}

.fcp-col-header.is-highlighted[b-egc11ihwvk] {
    background: #ffb482;
    color: #7c2d12;
    box-shadow: inset 0 -3px 0 #ff6b00;
}

.fcp-fare-codes[b-egc11ihwvk] {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: #e85f00;
    margin-top: 0.125rem;
}

.fcp-row-header[b-egc11ihwvk] {
    background: #fff8f2;
}

.fcp-row-group[b-egc11ihwvk] {
    background: #fff8f2;
    font-weight: 600;
    color: #c2540a;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.fcp-row-label[b-egc11ihwvk] {
    background: #fffbf6;
    font-weight: 500;
    width: 220px;
    color: #374151;
}

.fcp-cell[b-egc11ihwvk] {
    text-align: center;
}

.fcp-cell.is-highlighted[b-egc11ihwvk] {
    background: #fff8f2;
    font-weight: 600;
    color: #c2540a;
}

/* ── Chế độ Tắt (preview admin) ── */
.fcp-hidden-note[b-egc11ihwvk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: #f7f8fa;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    color: #475569;
    font-size: 0.8rem;
}

.fcp-hidden-note svg[b-egc11ihwvk] {
    color: #94a3b8;
    flex-shrink: 0;
}

.fcp-hidden-note b[b-egc11ihwvk] {
    color: #b91c1c;
}

/* ── Chế độ Tóm tắt ── */
.fcp-summary[b-egc11ihwvk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: white;
    border: 1px solid #ffe0c7;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}

.fcp-sum-item[b-egc11ihwvk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.fcp-sum-item:last-child[b-egc11ihwvk] {
    border-bottom: none;
}

.fcp-sum-lbl[b-egc11ihwvk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: #374151;
}

.fcp-sum-ic[b-egc11ihwvk] {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.fcp-sum-val[b-egc11ihwvk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
    color: #1f2937;
    font-weight: 500;
}

.fcp-sum-detail[b-egc11ihwvk] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #6b7280;
}

.fcp-badge[b-egc11ihwvk] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.fcp-badge.yes[b-egc11ihwvk] {
    background: #dcfce7;
    color: #15803d;
}

.fcp-badge.no[b-egc11ihwvk] {
    background: #fee2e2;
    color: #b91c1c;
}

.fcp-badge.unknown[b-egc11ihwvk] {
    background: #f1f5f9;
    color: #475569;
}

.fcp-notes[b-egc11ihwvk] {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: #fff8f2;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    color: #4b5563;
    line-height: 1.5;
}

.fcp-notes strong[b-egc11ihwvk] {
    color: #c2540a;
}

.fcp-loading[b-egc11ihwvk],
.fcp-empty[b-egc11ihwvk],
.fcp-error[b-egc11ihwvk] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
}

.fcp-error[b-egc11ihwvk] {
    color: #dc2626;
}

.fcp-spinner[b-egc11ihwvk] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ffe0c7;
    border-top-color: #ff6b00;
    border-radius: 50%;
    animation: fcp-spin-b-egc11ihwvk 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes fcp-spin-b-egc11ihwvk {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .fcp-table[b-egc11ihwvk] { font-size: 0.7rem; }
    .fcp-table th[b-egc11ihwvk], .fcp-table td[b-egc11ihwvk] { padding: 0.375rem 0.5rem; }
    .fcp-row-label[b-egc11ihwvk] { width: 140px; }
}
/* /src/Features/_Shared/Flight/FlightBookingStepper.razor.rz.scp.css */
/* FlightBookingStepper — Manager Dashboard v4 theme */
.fbs-root[b-ql90xfuwe7] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    width: 100%;
    padding: 0 8px;
    color: var(--d-ink);
}

@media (min-width: 640px) {
    .fbs-root[b-ql90xfuwe7] { padding: 0 16px; }
}

.fbs-track[b-ql90xfuwe7] {
    display: flex;
    align-items: stretch;
    max-width: 720px;
    margin: 0 auto;
    height: 32px;
}

@media (min-width: 640px) {
    .fbs-track[b-ql90xfuwe7] { height: 36px; }
}

.fbs-cell[b-ql90xfuwe7] {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.fbs-cell + .fbs-cell[b-ql90xfuwe7] { margin-left: -8px; }

.fbs-chip[b-ql90xfuwe7] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px 0 16px;
    position: relative;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.fbs-cell.is-first .fbs-chip[b-ql90xfuwe7] {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    padding-right: 24px;
}

.fbs-cell.is-mid .fbs-chip[b-ql90xfuwe7] {
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    padding-right: 24px;
    padding-left: 22px;
}

.fbs-cell.is-last .fbs-chip[b-ql90xfuwe7] {
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
    padding-left: 22px;
}

.fbs-cell.is-only .fbs-chip[b-ql90xfuwe7] { clip-path: none; }

/* Pending — neutral warm */
.fbs-cell.is-pending .fbs-chip[b-ql90xfuwe7] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
}

.fbs-cell.is-pending .fbs-num[b-ql90xfuwe7] {
    background: var(--d-line);
    color: var(--d-ink-4);
}

/* Done — soft accent */
.fbs-cell.is-done .fbs-chip[b-ql90xfuwe7] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
}

.fbs-cell.is-done .fbs-num[b-ql90xfuwe7] {
    background: var(--d-accent);
    color: #fff;
}

/* Active — gradient cam, nổi bật hẳn: glow đậm + nâng lên trên các chip khác */
.fbs-cell.is-active[b-ql90xfuwe7] {
    position: relative;
    z-index: 2;
}

.fbs-cell.is-active .fbs-chip[b-ql90xfuwe7] {
    background: var(--d-accent-grad);
    color: #fff;
    box-shadow: 0 2px 5px rgba(255, 107, 0, 0.32), 0 8px 18px -4px rgba(255, 107, 0, 0.45);
}

.fbs-cell.is-active .fbs-num[b-ql90xfuwe7] {
    background: #fff;
    color: var(--d-accent);
}

.fbs-cell.is-active .fbs-lbl[b-ql90xfuwe7] {
    font-weight: 700;
}

.fbs-num[b-ql90xfuwe7] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
}

.fbs-num svg[b-ql90xfuwe7] {
    width: 12px;
    height: 12px;
}

@media (min-width: 640px) {
    .fbs-num[b-ql90xfuwe7] { width: 20px; height: 20px; font-size: 11px; }
}

.fbs-lbl[b-ql90xfuwe7] {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

@media (min-width: 640px) {
    .fbs-lbl[b-ql90xfuwe7] { font-size: 11.5px; }
}
/* /src/Features/_Shared/Flight/FlightConfirmation.razor.rz.scp.css */
/* FlightConfirmation — Manager Dashboard v4 theme */
.fcfm-root[b-izct4bozkm] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-r: 12px;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Success banner — soft good gradient on warm-neutral */
.fcfm-success[b-izct4bozkm] {
    background: linear-gradient(180deg, var(--d-good-soft) 0%, var(--d-surface) 70%);
    border: 1px solid color-mix(in srgb, var(--d-good) 22%, var(--d-line));
    border-radius: var(--d-r);
    padding: 32px 24px 28px;
    text-align: center;
}

.fcfm-success-ico[b-izct4bozkm] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--d-good-soft);
    color: var(--d-good);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

    .fcfm-success-ico svg[b-izct4bozkm] { width: 32px; height: 32px; }

.fcfm-title[b-izct4bozkm] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

@media (min-width: 640px) {
    .fcfm-title[b-izct4bozkm] { font-size: 26px; }
}

.fcfm-sub[b-izct4bozkm] {
    color: var(--d-ink-3);
    font-size: 14px;
    margin: 0 0 16px;
}

.fcfm-codes[b-izct4bozkm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

@media (min-width: 640px) {
    .fcfm-codes[b-izct4bozkm] { flex-direction: row; gap: 28px; }
}

.fcfm-code-lbl[b-izct4bozkm] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 2px;
}

.fcfm-code-val[b-izct4bozkm] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
    margin: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fcfm-code-pnr[b-izct4bozkm] {
    font-size: 24px;
    color: var(--d-accent);
}

/* Card */
.dash-card[b-izct4bozkm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nghỉ nhẹ để thẻ nổi trên nền (wrapper trang giờ trong suốt) — đồng bộ thẻ trang kết quả */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
}

.dash-card-hd[b-izct4bozkm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

    .dash-card-hd h3[b-izct4bozkm] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.fcfm-info-list[b-izct4bozkm] {
    list-style: none;
    margin: 0;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .fcfm-info-list li[b-izct4bozkm] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        color: var(--d-ink-2);
        line-height: 1.5;
    }

    .fcfm-info-list svg[b-izct4bozkm] {
        width: 16px;
        height: 16px;
        color: var(--d-accent);
        margin-top: 2px;
        flex-shrink: 0;
    }

/* Buttons */
.dash-btn[b-izct4bozkm] {
    height: 38px;
    padding: 0 16px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    text-decoration: none;
}

    .dash-btn:hover[b-izct4bozkm] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .dash-btn svg[b-izct4bozkm] {
        width: 16px;
        height: 16px;
    }

.dash-btn-accent[b-izct4bozkm] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .dash-btn-accent:hover[b-izct4bozkm] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.fcfm-actions[b-izct4bozkm] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* /src/Features/_Shared/Flight/FlightFilterPanel.razor.rz.scp.css */
/* FlightFilterPanel — Manager Dashboard v4 theme */
.ffp-root[b-errnnm21uu] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ffp-section[b-errnnm21uu] { display: flex; flex-direction: column; }

.ffp-h[b-errnnm21uu] {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ffp-h svg[b-errnnm21uu] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* Segmented (sort) */
.ffp-segmented[b-errnnm21uu] {
    display: flex;
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    padding: 3px;
    gap: 2px;
}

.ffp-seg[b-errnnm21uu] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

    .ffp-seg:hover[b-errnnm21uu] { color: var(--d-ink); }

    .ffp-seg.is-active[b-errnnm21uu] {
        background: var(--d-surface);
        color: var(--d-accent);
        box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--d-line);
        font-weight: 600;
    }

.ffp-seg-arrow[b-errnnm21uu] {
    width: 9px;
    height: 6px;
    color: var(--d-accent);
    transition: transform .2s;
}

    .ffp-seg-arrow.is-desc[b-errnnm21uu] { transform: rotate(180deg); }

/* Range slider */
.ffp-range-wrap[b-errnnm21uu] { position: relative; height: 28px; margin: 4px 0; }

.ffp-range-track[b-errnnm21uu] {
    position: absolute;
    top: 12px; left: 0; right: 0;
    height: 4px;
    background: var(--d-line);
    border-radius: 9999px;
    pointer-events: none;
}

.ffp-range-fill[b-errnnm21uu] {
    position: absolute;
    top: 12px;
    height: 4px;
    background: var(--d-accent-grad);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 1;
}

.ffp-range-input[b-errnnm21uu] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 28px;
    margin: 0; padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    pointer-events: none;
    outline: none;
    z-index: 3;
}

.ffp-range-max[b-errnnm21uu] { z-index: 4; }

.ffp-range-input[b-errnnm21uu]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: 0;
}

.ffp-range-input[b-errnnm21uu]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--d-accent);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: all;
    margin-top: -7px;
    transition: box-shadow .15s;
}

.ffp-range-input[b-errnnm21uu]::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 8px rgba(255, 107, 0,0.4), 0 0 0 3px rgba(255, 107, 0,0.12);
}

.ffp-range-input[b-errnnm21uu]::-moz-range-track { height: 4px; background: transparent; border: 0; }

.ffp-range-input[b-errnnm21uu]::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--d-accent);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: all;
}

.ffp-range-vals[b-errnnm21uu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.ffp-pill-accent[b-errnnm21uu] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ffp-range-dash[b-errnnm21uu] {
    flex: 1;
    border-top: 1px dashed var(--d-line);
}

.ffp-range-bounds[b-errnnm21uu] {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

/* Airlines */
.ffp-airline-list[b-errnnm21uu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ffp-airline-row[b-errnnm21uu] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}

    .ffp-airline-row:hover[b-errnnm21uu] { background: var(--d-surface-2); }

    .ffp-airline-row.is-checked[b-errnnm21uu] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 30%, transparent);
    }

.ffp-checkbox[b-errnnm21uu] {
    width: 16px; height: 16px;
    border: 2px solid var(--d-line);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--d-surface);
}

    .ffp-checkbox.is-checked[b-errnnm21uu] {
        background: var(--d-accent);
        border-color: var(--d-accent);
    }

    .ffp-checkbox svg[b-errnnm21uu] {
        width: 10px; height: 10px;
        color: #fff;
    }

.ffp-airline-logo[b-errnnm21uu] { height: 16px; width: auto; flex-shrink: 0; }

/* Cột thông tin: hàng trên (logo + tên) rồi hàng dưới (tóm tắt) */
.ffp-airline-info[b-errnnm21uu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Hàng trên: logo + tên hãng trên cùng một dòng */
.ffp-airline-top[b-errnnm21uu] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ffp-airline-name[b-errnnm21uu] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tóm tắt: số chuyến · từ giá thấp nhất — luôn gói gọn 1 dòng (cắt … nếu quá dài) */
.ffp-airline-meta[b-errnnm21uu] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time grid */
.ffp-time-grid[b-errnnm21uu] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ffp-time[b-errnnm21uu] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .ffp-time:hover[b-errnnm21uu] {
        background: var(--d-surface-2);
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
    }

    .ffp-time svg[b-errnnm21uu] {
        width: 16px; height: 16px;
        color: var(--d-ink-4);
    }

    .ffp-time.is-active[b-errnnm21uu] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 40%, transparent);
        box-shadow: 0 1px 2px rgba(255, 107, 0,0.08);
    }

        .ffp-time.is-active svg[b-errnnm21uu] { color: var(--d-accent); }

.ffp-time-lbl[b-errnnm21uu] {
    font-size: 10px;
    font-weight: 600;
    color: var(--d-ink-2);
}

.ffp-time.is-active .ffp-time-lbl[b-errnnm21uu] { color: var(--d-accent); }

.ffp-time-cnt[b-errnnm21uu] {
    font-size: 9px;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

.ffp-time.is-active .ffp-time-cnt[b-errnnm21uu] {
    color: var(--d-accent);
    font-weight: 600;
}

/* Stops */
.ffp-stops[b-errnnm21uu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ffp-chip[b-errnnm21uu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 11px;
    font-weight: 500;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .ffp-chip:hover[b-errnnm21uu] {
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
    }

    .ffp-chip.is-active[b-errnnm21uu] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 40%, transparent);
        color: var(--d-accent);
    }

.ffp-chip-cnt[b-errnnm21uu] {
    font-size: 10px;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

.ffp-chip.is-active .ffp-chip-cnt[b-errnnm21uu] {
    color: color-mix(in srgb, var(--d-accent) 80%, var(--d-ink-3));
}
/* /src/Features/_Shared/Flight/FlightHeader.razor.rz.scp.css */
/* ── Header dùng chung luồng vé máy bay — phong cách xăm Nhật cổ, tông cam ── */
.fh-hero[b-j6wzcorat6] {
    --fh-r: 12px;
    --ire-orange: #f56f0a;
    --ire-orange-lt: #ff8f2b;
    --ire-orange-dk: #db5600;
    --ire-cream: #fff6ea;
    --ire-vermilion: #c1272d;

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 7px 20px;
    border: 0;
    border-radius: var(--fh-r);
    color: var(--ire-cream);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(118deg, var(--ire-orange-lt) 0%, var(--ire-orange) 54%, var(--ire-orange-dk) 100%);
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 246, 234, .45),
        0 6px 20px -12px rgba(224, 96, 16, .45);
}

/* Hoa mai (5 cánh tròn, nhụy đỏ) điểm xuyết — gió cuốn hoa về phía sóng */
.fh-petals[b-j6wzcorat6] {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    opacity: .34;
    pointer-events: none;
    user-select: none;
    animation: fh-drift-b-j6wzcorat6 22s ease-in-out infinite alternate;
}

@keyframes fh-drift-b-j6wzcorat6 {
    from { transform: translate(0, 0) rotate(0deg); }
    to   { transform: translate(-14px, -8px) rotate(1.2deg); }
}

/* Dải sáng ánh kim quét ngang panel */
.fh-hero[b-j6wzcorat6]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
    transform: translateX(-160%) skewX(-14deg);
    animation: fh-sheen-b-j6wzcorat6 7s ease-in-out infinite;
}

@keyframes fh-sheen-b-j6wzcorat6 {
    0%, 62% { transform: translateX(-160%) skewX(-14deg); }
    82%, 100% { transform: translateX(320%) skewX(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fh-petals[b-j6wzcorat6],
    .fh-hero[b-j6wzcorat6]::after {
        animation: none;
    }
}

/* Sóng cuộn kiểu Hokusai — line-art trắng kem, mô-típ chủ đạo bên phải */
.fh-wave[b-j6wzcorat6] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 58%;
    max-width: 420px;
    pointer-events: none;
    user-select: none;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 34%, #000 100%);
    mask: linear-gradient(90deg, transparent 0, #000 34%, #000 100%);
}

.fh-wave-sun[b-j6wzcorat6] {
    fill: rgba(255, 246, 234, .12);
}

.fh-wave-line path[b-j6wzcorat6] {
    fill: none;
    stroke: var(--ire-cream);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .62;
}

/* Nét sóng ngoài cùng dày hơn để tạo tầng lớp */
.fh-wave-line path:first-child[b-j6wzcorat6] {
    stroke-width: 3;
    opacity: .78;
}

.fh-wave-foam circle[b-j6wzcorat6] {
    fill: var(--ire-cream);
    opacity: .75;
}

.fh-lead[b-j6wzcorat6] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Con dấu (hanko) — thẻ ngà đóng dấu son trên nền cam */
.fh-seal[b-j6wzcorat6] {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    transform: rotate(-4deg);
    color: var(--ire-vermilion);
    background: var(--ire-cream);
    box-shadow:
        inset 0 0 0 2px var(--ire-vermilion),
        inset 0 0 0 3.5px rgba(255, 244, 226, .9),
        0 3px 10px -3px rgba(143, 29, 33, .45);
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.fh-seal:hover[b-j6wzcorat6] {
    transform: rotate(0deg) scale(1.08);
}

.fh-mark[b-j6wzcorat6] {
    font-family: 'Yu Mincho', 'Noto Serif JP', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    transform: rotate(4deg);
}

.fh-text[b-j6wzcorat6] {
    min-width: 0;
}

.fh-hero h1[b-j6wzcorat6] {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 6px;
    font-family: 'Yu Mincho', 'Noto Serif JP', Georgia, serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    background: linear-gradient(178deg, #fffaf0 0%, #ffeec4 55%, #ffdf8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 1px rgba(143, 63, 0, .35));
}

/* Gạch chân nét cọ (brush stroke) nhũ vàng, vuốt nhọn hai đầu */
.fh-hero h1[b-j6wzcorat6]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-radius: 3px 8px 4px 9px / 4px 3px 5px 3px;
    background: linear-gradient(90deg, #fff4e2, #ffdf8a 70%, #f6c95a);
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 10%, #000 74%, transparent 100%);
    mask: linear-gradient(90deg, transparent 0, #000 10%, #000 74%, transparent 100%);
}

.fh-sub[b-j6wzcorat6] {
    margin: 4px 0 0;
    color: rgba(255, 244, 226, .88);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .fh-hero[b-j6wzcorat6] {
        padding: 9px 24px;
    }

    .fh-seal[b-j6wzcorat6] {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .fh-mark[b-j6wzcorat6] {
        font-size: 19px;
    }

    .fh-hero h1[b-j6wzcorat6] {
        font-size: 24px;
    }

    .fh-sub[b-j6wzcorat6] {
        font-size: 14px;
    }
}

/* Slot nội dung tuỳ biến bên phải (vd: tab của trang danh sách) */
.fh-actions[b-j6wzcorat6] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fh-btn[b-j6wzcorat6] {
    position: relative;
    z-index: 1;
    height: 38px;
    padding: 0 15px;
    border-radius: var(--fh-r);
    border: 1px solid rgba(255, 244, 226, .6);
    background: rgba(255, 244, 226, .12);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ire-cream);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}

.fh-btn svg[b-j6wzcorat6] {
    transition: transform .16s ease;
}

.fh-btn:hover[b-j6wzcorat6] {
    background: var(--ire-cream);
    border-color: var(--ire-cream);
    color: var(--ire-orange-dk);
    text-decoration: none;
}

.fh-btn:hover svg[b-j6wzcorat6] {
    transform: translateX(-3px);
}
/* /src/Features/_Shared/Flight/FlightPassengerForm.razor.rz.scp.css */
/* FlightPassengerForm — Manager Dashboard v4 theme tokens */
.fpf-root[b-pdi6koevuj] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    /* Viền control nhập liệu — đậm hơn --d-line (viền card) để field nổi rõ, khớp DateMaskInput */
    --d-line-input: #d1d5db;
    color: var(--d-ink);
    /* ★ 'Twemoji Country Flags' PHẢI đứng đầu — nếu không, ô Quốc tịch trên Windows hiện
       "vn Việt Nam (VNM)" (2 chữ Regional Indicator) thay vì lá cờ 🇻🇳. Windows không có
       glyph cờ trong Segoe UI Emoji; app đã nạp sẵn font này ở wwwroot/app.css nhưng
       `.fpf-root` tự khai font-family riêng nên con của nó KHÔNG thừa hưởng được stack
       của body. Font khai `unicode-range: U+1F1E6-1F1FF` nên chỉ phủ đúng dải cờ, mọi
       chữ/số khác vẫn là Inter y như cũ. (Quy ước chung: xem khối "Cờ quốc gia" trong
       wwwroot/app.css — element có font-family riêng thì phải tự thêm font này hoặc
       gắn class .nm-flag.) */
    font-family: 'Twemoji Country Flags', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

/* ---------- Card primitive ---------- */
.fpf-card[b-pdi6koevuj] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    /* Bóng nghỉ nhẹ để thẻ nổi trên nền (wrapper trang giờ trong suốt) — đồng bộ thẻ trang kết quả */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
    /* overflow: visible — dropdown autocomplete được phép tràn ra khỏi card */
}
.fpf-card-hd[b-pdi6koevuj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.5rem;
    padding: 10px 16px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
    /* Bo góc top khi card không còn overflow:hidden */
    border-top-left-radius: var(--d-r);
    border-top-right-radius: var(--d-r);
}
.fpf-card-hd h3[b-pdi6koevuj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--d-ink);
    margin: 0;
}

/* ---------- Thanh tiêu đề THẺ HÀNH KHÁCH ----------
   Nổi hơn thân thẻ và hơn các thẻ phụ (liên hệ / giá / điều kiện vé — vẫn nền xám trung
   tính) bằng nền kem ấm + gạch chân cùng tông; màu đổi theo loại khách (người lớn cam ·
   trẻ em xanh · em bé tím) đồng bộ với số thứ tự.
   KHÔNG dùng vạch dọc bên trái (user bác) và KHÔNG overflow:hidden — dropdown tìm nhân
   viên nằm trong header này, cắt là mất. */
.fpf-pax-hd[b-pdi6koevuj] {
    --pax-c: var(--d-accent);
    --pax-tint: #fff4ea;
    padding-top: 11px;
    padding-bottom: 11px;
    background: linear-gradient(180deg, var(--pax-tint) 0%, color-mix(in srgb, var(--pax-tint) 30%, #fff) 100%);
    border-bottom-color: color-mix(in srgb, var(--pax-c) 22%, var(--d-line));
}
.fpf-pax-hd.child[b-pdi6koevuj] { --pax-c: #2563eb; --pax-tint: #eef3ff; }
.fpf-pax-hd.infant[b-pdi6koevuj] { --pax-c: #7c3aed; --pax-tint: #f5f0ff; }
.fpf-card-bd[b-pdi6koevuj] {
    padding: 14px 16px;
}

/* ---------- Accent icon (small inline svg) ---------- */
.fpf-ico-accent[b-pdi6koevuj] { color: var(--d-accent); width: 1rem; height: 1rem; flex-shrink: 0; }
.fpf-ico-accent-sm[b-pdi6koevuj] { color: var(--d-accent); width: 0.75rem; height: 0.75rem; flex-shrink: 0; }

/* ---------- Pax index badge ---------- */
/* Số thứ tự khách: đặc màu + chữ trắng (trước là nền nhạt chữ màu → chìm nghỉm trên
   thanh tiêu đề). Đây là mỏ neo thị giác để đếm khách khi cuộn qua nhiều thẻ. */
.fpf-pax-badge[b-pdi6koevuj] {
    width: 26px; height: 26px;
    border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12.5px; font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.fpf-pax-badge.adult[b-pdi6koevuj] {
    background: var(--d-accent-grad);
    box-shadow: 0 3px 8px -3px rgba(255, 107, 0, 0.65);
}
.fpf-pax-badge.child[b-pdi6koevuj] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 3px 8px -3px rgba(37, 99, 235, 0.6);
}
.fpf-pax-badge.infant[b-pdi6koevuj] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 3px 8px -3px rgba(124, 58, 237, 0.6);
}

/* ---------- Buttons ---------- */
.fpf-btn[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.fpf-btn:hover[b-pdi6koevuj] { background: var(--d-surface-2); }
.fpf-btn:disabled[b-pdi6koevuj] { opacity: 0.5; cursor: not-allowed; }
/* Phản hồi nhấn nhẹ (tactile) cho mọi nút — trừ khi disabled */
.fpf-btn:active:not(:disabled)[b-pdi6koevuj] { transform: translateY(1px); }

.fpf-btn-accent[b-pdi6koevuj] {
    background: var(--d-accent-grad);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px -6px rgba(255, 107, 0, 0.45);
}
/* Hover: bóng cam đậm hơn → nút hành động chính rõ là "hero" của trang */
.fpf-btn-accent:hover[b-pdi6koevuj] {
    background: var(--d-accent-grad-hover);
    box-shadow: 0 9px 22px -6px rgba(255, 107, 0, 0.55);
}
.fpf-btn-accent:disabled[b-pdi6koevuj] { opacity: 0.55; box-shadow: none; }

.fpf-btn-ghost[b-pdi6koevuj] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
}
.fpf-btn-ghost:hover[b-pdi6koevuj] { background: var(--d-line-2); }

.fpf-btn-lg[b-pdi6koevuj] { height: 44px; font-size: 14px; }

/* ---------- Skeleton primary tile ---------- */
.fpf-skeleton-accent[b-pdi6koevuj] {
    background: var(--d-accent-grad-soft);
    border-radius: var(--d-r);
}
.fpf-skeleton-circle-accent[b-pdi6koevuj] {
    background: var(--d-accent-grad-soft);
    border-radius: 9999px;
}
.fpf-spinner-accent[b-pdi6koevuj] { color: var(--d-accent); }

/* ---------- Banners ---------- */
.fpf-banner[b-pdi6koevuj] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 12px 16px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    margin-top: 1rem;
}
.fpf-banner-good[b-pdi6koevuj] {
    background: color-mix(in srgb, var(--d-good) 8%, white);
    border-color: color-mix(in srgb, var(--d-good) 25%, var(--d-line));
    color: #166534;
}
.fpf-banner-good .fpf-banner-ico[b-pdi6koevuj] { color: var(--d-good); }

.fpf-banner-danger[b-pdi6koevuj] {
    background: color-mix(in srgb, var(--d-danger) 8%, white);
    border-color: color-mix(in srgb, var(--d-danger) 25%, var(--d-line));
    color: #991b1b;
}
.fpf-banner-danger .fpf-banner-ico[b-pdi6koevuj] { color: var(--d-danger); }

.fpf-banner-ico[b-pdi6koevuj] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ---------- Eyebrow / uppercase mini-title ---------- */
.fpf-eyebrow[b-pdi6koevuj] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
}
.fpf-eyebrow.accent[b-pdi6koevuj] { color: var(--d-accent); }
.fpf-eyebrow.cool[b-pdi6koevuj] { color: #1d4ed8; }

/* ---------- Total / sidebar grand total band ---------- */
.fpf-total-band[b-pdi6koevuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--d-accent-grad-soft);
    border-top: 1px solid color-mix(in srgb, var(--d-line) 25%, var(--d-line));
}
.fpf-total-band-label[b-pdi6koevuj] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink-2);
}
.fpf-total-band-value[b-pdi6koevuj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 700;
    /* Nhấn con số tổng bằng cam thương hiệu (đồng bộ total ở panel "Chuyến đã chọn") */
    color: var(--d-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Loading overlay (saving) ---------- */
.fpf-overlay[b-pdi6koevuj] {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(4px);
    animation: fpf-ov-in-b-pdi6koevuj 180ms ease-out;
}
@keyframes fpf-ov-in-b-pdi6koevuj { from { opacity: 0; } to { opacity: 1; } }

.fpf-ov-card[b-pdi6koevuj] {
    position: relative;
    width: 100%; max-width: 30rem;
    /* Khứ hồi 2 chặng trên máy màn nhỏ → thân thẻ cuộn, header/footer đứng yên */
    max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column;
    background: var(--d-surface);
    border-radius: 18px;
    box-shadow: 0 32px 70px -20px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    animation: fpf-ov-rise-b-pdi6koevuj 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fpf-ov-rise-b-pdi6koevuj {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* Thanh chạy vô định ở mép trên — báo "đang chạy" mà KHÔNG hứa hẹn % nào */
.fpf-ov-beam[b-pdi6koevuj] {
    height: 3px;
    flex-shrink: 0;
    background: var(--d-line-2);
    overflow: hidden;
}
.fpf-ov-beam span[b-pdi6koevuj] {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 9999px;
    background: linear-gradient(90deg, rgba(255,107,0,0) 0%, #ff7d1f 35%, #ff6b00 65%, rgba(255,107,0,0) 100%);
    animation: fpf-ov-beam-b-pdi6koevuj 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes fpf-ov-beam-b-pdi6koevuj {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(355%); }
}

/* ---------- Overlay header ---------- */
.fpf-ov-hd[b-pdi6koevuj] {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
    padding: 20px 22px 16px;
}
.fpf-ov-orb[b-pdi6koevuj] {
    position: relative;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    display: flex; align-items: center; justify-content: center;
}
.fpf-ov-orb svg[b-pdi6koevuj] { width: 22px; height: 22px; transform: rotate(45deg); }
/* Vòng sáng quay quanh icon — thay cho spinner rời rạc */
.fpf-ov-orb[b-pdi6koevuj]::before {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 9999px;
    border: 2px solid transparent;
    border-top-color: var(--d-accent);
    border-right-color: color-mix(in srgb, var(--d-accent) 35%, transparent);
    animation: fpf-ov-spin-b-pdi6koevuj 0.9s linear infinite;
}
@keyframes fpf-ov-spin-b-pdi6koevuj { to { transform: rotate(360deg); } }

.fpf-ov-hd-tx[b-pdi6koevuj] { min-width: 0; }
.fpf-ov-hd-tx h3[b-pdi6koevuj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    margin: 0;
}
.fpf-ov-hd-tx p[b-pdi6koevuj] {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--d-ink-3);
    margin: 3px 0 0;
}

.fpf-ov-bd[b-pdi6koevuj] { padding: 0 22px 4px; overflow-y: auto; }

/* ---------- Chặng bay (thẻ kiểu cuống vé) ---------- */
.fpf-ov-leg[b-pdi6koevuj] {
    border: 1px solid var(--d-line);
    border-radius: 14px;
    background: var(--d-surface-2);
    padding: 10px 14px 12px;
    margin-bottom: 10px;
}
.fpf-ov-leg-top[b-pdi6koevuj] {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 9px;
    margin-bottom: 9px;
    border-bottom: 1px dashed var(--d-line-input);
}
.fpf-ov-tag[b-pdi6koevuj] {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    border-radius: 6px;
    padding: 3px 7px;
    flex-shrink: 0;
}
.fpf-ov-tag--rt[b-pdi6koevuj] { color: #1d4ed8; background: #e8efff; }
.fpf-ov-logo[b-pdi6koevuj] { height: 16px; width: auto; flex-shrink: 0; margin-left: 2px; }
.fpf-ov-air[b-pdi6koevuj] {
    font-size: 12px; font-weight: 600;
    color: var(--d-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpf-ov-fno[b-pdi6koevuj] {
    margin-left: auto;
    font-size: 11.5px; font-weight: 600;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.fpf-ov-route[b-pdi6koevuj] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
}
.fpf-ov-pt b[b-pdi6koevuj] {
    display: block;
    font-size: 19px; font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}
.fpf-ov-pt span[b-pdi6koevuj] {
    display: block;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--d-ink-3);
    margin-top: 1px;
}
.fpf-ov-pt--end[b-pdi6koevuj] { text-align: right; }

.fpf-ov-path[b-pdi6koevuj] {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px;
    min-width: 0;
}
.fpf-ov-path em[b-pdi6koevuj] {
    font-style: normal;
    font-size: 11px; font-weight: 600;
    color: var(--d-ink-2);
}
.fpf-ov-path > span[b-pdi6koevuj] {
    font-size: 10.5px;
    color: var(--d-ink-4);
}
.fpf-ov-line[b-pdi6koevuj] {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--d-ink-4) 0 3px, transparent 3px 7px);
    opacity: 0.75;
}
/* Chấm sáng chạy dọc chặng — gợi ý hệ thống đang làm việc trên đúng chặng này */
.fpf-ov-line[b-pdi6koevuj]::after {
    content: '';
    position: absolute; top: 50%; left: 0;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 9999px;
    background: var(--d-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-accent) 18%, transparent);
    animation: fpf-ov-travel-b-pdi6koevuj 2.6s ease-in-out infinite;
}
@keyframes fpf-ov-travel-b-pdi6koevuj {
    0%   { left: 0; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.fpf-ov-date[b-pdi6koevuj] {
    grid-column: 1 / -1;
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-ink-4);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- Tóm tắt đơn ---------- */
.fpf-ov-sum[b-pdi6koevuj] {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    padding: 10px 2px 12px;
}
.fpf-ov-sum-i[b-pdi6koevuj] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    color: var(--d-ink-2);
}
.fpf-ov-sum-i svg[b-pdi6koevuj] { width: 14px; height: 14px; color: var(--d-ink-4); }
.fpf-ov-dot[b-pdi6koevuj] {
    width: 3px; height: 3px;
    border-radius: 9999px;
    background: var(--d-ink-4);
}
.fpf-ov-sum-money[b-pdi6koevuj] {
    margin-left: auto;
    display: inline-flex; align-items: baseline; gap: 6px;
}
.fpf-ov-sum-money em[b-pdi6koevuj] {
    font-style: normal;
    font-size: 11px;
    color: var(--d-ink-3);
}
.fpf-ov-sum-money b[b-pdi6koevuj] {
    font-size: 15px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--d-accent);
    font-variant-numeric: tabular-nums;
}

/* ---------- Các bước xử lý ---------- */
.fpf-ov-steps[b-pdi6koevuj] {
    list-style: none;
    margin: 0;
    padding: 12px 0 4px;
    border-top: 1px solid var(--d-line);
}
.fpf-ov-steps li[b-pdi6koevuj] {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0;
}
/* Đường nối giữa các bước */
.fpf-ov-steps li:not(:last-child)[b-pdi6koevuj]::before {
    content: '';
    position: absolute;
    left: 8px; top: 50%;
    width: 2px; height: 100%;
    background: var(--d-line);
}
.fpf-ov-steps li.is-done:not(:last-child)[b-pdi6koevuj]::before { background: color-mix(in srgb, var(--d-accent) 40%, var(--d-line)); }

.fpf-ov-stepdot[b-pdi6koevuj] {
    position: relative; z-index: 1;
    width: 18px; height: 18px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--d-surface);
    border: 2px solid var(--d-line-input);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.fpf-ov-stepdot svg[b-pdi6koevuj] { width: 10px; height: 10px; }
.is-done .fpf-ov-stepdot[b-pdi6koevuj] { background: var(--d-accent); border-color: var(--d-accent); }
.is-active .fpf-ov-stepdot[b-pdi6koevuj] {
    background: var(--d-surface);
    border-color: var(--d-accent);
    animation: fpf-ov-pulse-b-pdi6koevuj 1.5s ease-out infinite;
}
@keyframes fpf-ov-pulse-b-pdi6koevuj {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--d-accent) 45%, transparent); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 107, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

.fpf-ov-steptx[b-pdi6koevuj] {
    font-size: 12.5px;
    color: var(--d-ink-4);
    transition: color 160ms ease;
}
.is-done .fpf-ov-steptx[b-pdi6koevuj] { color: var(--d-ink-3); }
.is-active .fpf-ov-steptx[b-pdi6koevuj] { color: var(--d-ink); font-weight: 600; }

/* ---------- Footer: thời gian chờ ---------- */
.fpf-ov-ft[b-pdi6koevuj] {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
    padding: 11px 22px;
    margin-top: 8px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line);
    font-size: 11.5px;
    color: var(--d-ink-3);
}
.fpf-ov-ft > span:last-child[b-pdi6koevuj] {
    margin-left: auto;
    text-align: right;
    color: var(--d-ink-4);
}
.fpf-ov-timer[b-pdi6koevuj] {
    font-weight: 700;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .fpf-ov-hd[b-pdi6koevuj] { padding: 16px 16px 12px; gap: 11px; }
    .fpf-ov-orb[b-pdi6koevuj] { width: 38px; height: 38px; }
    .fpf-ov-orb svg[b-pdi6koevuj] { width: 19px; height: 19px; }
    .fpf-ov-hd-tx h3[b-pdi6koevuj] { font-size: 15.5px; }
    .fpf-ov-bd[b-pdi6koevuj] { padding: 0 16px 4px; }
    .fpf-ov-ft[b-pdi6koevuj] { padding: 10px 16px; }
    .fpf-ov-pt b[b-pdi6koevuj] { font-size: 17px; }
    .fpf-ov-sum-money[b-pdi6koevuj] { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .fpf-overlay[b-pdi6koevuj], .fpf-ov-card[b-pdi6koevuj] { animation: none; }
    .fpf-ov-line[b-pdi6koevuj]::after, .fpf-ov-orb[b-pdi6koevuj]::before, .fpf-ov-beam span[b-pdi6koevuj] { animation-duration: 0s; }
    .fpf-ov-orb[b-pdi6koevuj]::before { border-top-color: transparent; }
    .fpf-ov-beam span[b-pdi6koevuj] { width: 100%; }
    .is-active .fpf-ov-stepdot[b-pdi6koevuj] { animation: none; }
}

/* ---------- Error modal ---------- */
.fpf-error-icon-wrap[b-pdi6koevuj] {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--d-danger) 10%, white);
    display: flex; align-items: center; justify-content: center;
}
.fpf-error-icon-wrap svg[b-pdi6koevuj] { color: var(--d-danger); width: 28px; height: 28px; }

/* ---------- Sidebar collapsible header ---------- */
.fpf-sidebar-toggle[b-pdi6koevuj] {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--d-surface-2);
    border: 0;
    border-bottom: 1px solid var(--d-line);
    cursor: pointer;
    transition: background-color .15s ease;
}
.fpf-sidebar-toggle:hover[b-pdi6koevuj] { background: var(--d-line-2); }
.fpf-sidebar-toggle h3[b-pdi6koevuj] {
    font-size: 14px; font-weight: 600;
    color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0;
}
.fpf-chev[b-pdi6koevuj] { width: 1rem; height: 1rem; color: var(--d-ink-4); transition: transform .2s ease; }
.fpf-chev.open[b-pdi6koevuj] { transform: rotate(180deg); }

/* ---------- Inputs (basic theming for native controls inside form) ---------- */
.fpf-root input[type="text"][b-pdi6koevuj],
.fpf-root input[type="email"][b-pdi6koevuj],
.fpf-root input[type="tel"][b-pdi6koevuj],
.fpf-root select[b-pdi6koevuj] {
    background: var(--d-surface);
}
.fpf-root input[type="text"]:focus[b-pdi6koevuj],
.fpf-root input[type="email"]:focus[b-pdi6koevuj],
.fpf-root input[type="tel"]:focus[b-pdi6koevuj],
.fpf-root select:focus[b-pdi6koevuj] {
    outline: none;
    border-color: var(--d-accent) !important;
    /* Vòng focus rõ hơn chút → control đang nhập nổi bật (vẫn dịu, đúng tông cam) */
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.16);
}

/* ---------- Form control chuẩn hoá (thay utility soup rải rác) ---------- */
.fpf-label[b-pdi6koevuj] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.fpf-err[b-pdi6koevuj] {
    font-size: 10.5px;
    color: var(--d-danger);
    margin: 3px 0 0;
}
.fpf-input[b-pdi6koevuj] {
    width: 100%;
    /* Chiều cao CHỐT 38px = đúng bằng DateMaskInput → mọi ô trên cùng một hàng lưới có
       mép trên/dưới trùng nhau. Trước đây input 34px đứng cạnh ô ngày 38px, hàng field
       lởm chởm dù đã căn lưới. */
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--d-line-input);
    border-radius: 8px;
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fpf-input:hover:not(:focus):not(.is-err)[b-pdi6koevuj] { border-color: #b8bec9; }
/* Focus đồng bộ toàn form theo đúng hệ DateMaskInput (viền accent + ring mềm 3px) —
   trước đây .fpf-input KHÔNG có luật :focus nên rơi về outline mặc định trình duyệt
   (xanh dương), lệch hẳn ô ngày ngay bên cạnh. */
.fpf-input:focus[b-pdi6koevuj] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.fpf-input.is-err[b-pdi6koevuj] { border-color: var(--d-danger); }
.fpf-input.is-err:focus[b-pdi6koevuj] { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.fpf-input--sm[b-pdi6koevuj] { height: 32px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }

/* Đồng bộ DateMaskInput (component con) với .fpf-input — cùng bo góc & màu viền.
   Component tự khai --d-line #eceef2 (nhạt hơn --d-line-input) và bo 12px nên ô ngày
   trông "khác hệ" so với ô kế bên. Specificity phải cao hơn .dmi-input[b-yyy] của
   chính component → thêm một cấp .dmi-root. */
.fpf-root[b-pdi6koevuj]  .dmi-root .dmi-input {
    border-radius: 8px;
    border-color: var(--d-line-input);
}
.fpf-root[b-pdi6koevuj]  .dmi-root .dmi-input:hover:not(:focus):not(.is-invalid) { border-color: #b8bec9; }
.fpf-root[b-pdi6koevuj]  .dmi-root .dmi-input:focus { border-color: var(--d-accent); }
.fpf-root[b-pdi6koevuj]  .dmi-root .dmi-input.is-invalid { border-color: var(--d-danger); }
/* Ghép addon trái (mã vùng ĐT, ngôn ngữ email) — input/select bên phải bo phải.
   (Addon IATA của ô hành lý đã bỏ: chặng bay giờ là NHÃN phía trên ô chọn, đồng bộ
   với mọi trường khác trong thẻ — nhãn trên, control dưới.) */
.fpf-input--joined[b-pdi6koevuj] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fpf-addon-select[b-pdi6koevuj] {
    /* 38px khớp .fpf-input để cặp ghép [mã vùng | số ĐT] không so le mép */
    height: 38px;
    border: 1px solid var(--d-line-input);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--d-surface-2);
    font-size: 13px;
    padding: 0 6px;
    color: var(--d-ink-2);
}
/* Cùng hệ focus với .fpf-input — addon là select thật, cũng nhận bàn phím */
.fpf-addon-select:focus[b-pdi6koevuj] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

/* Chip trạng thái nhỏ trong header hành khách (độ tuổi, yêu cầu hộ chiếu) */
.fpf-chip[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.fpf-chip.warn[b-pdi6koevuj] {
    color: var(--d-warn);
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 25%, transparent);
}
.fpf-chip.info[b-pdi6koevuj] {
    color: #1d4ed8;
    background: color-mix(in srgb, #2563eb 10%, white);
    border: 1px solid color-mix(in srgb, #2563eb 22%, transparent);
}

/* Nút "Giữ chỗ, trả sau" — biến thể outline cam nhạt (bỏ inline style) */
.fpf-btn-hold[b-pdi6koevuj] {
    background: var(--d-surface);
    border: 1px solid #ffd9bd;
    color: #c2410c;
}
.fpf-btn-hold:hover[b-pdi6koevuj] { background: var(--d-accent-soft); }

/* ---------- Purpose pill toggle (Công ty / Cá nhân) — mirror fsb-trip-toggle ---------- */
.fpf-purpose-toggle[b-pdi6koevuj] {
    display: inline-flex;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    padding: 3px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.fpf-purpose-toggle[b-pdi6koevuj]::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: var(--d-surface);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.fpf-purpose-toggle.is-personal[b-pdi6koevuj]::before {
    transform: translateX(100%);
}

.fpf-purpose-btn[b-pdi6koevuj] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: color .2s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

    .fpf-purpose-btn:hover[b-pdi6koevuj] {
        color: var(--d-ink-2);
    }

    .fpf-purpose-btn.is-active[b-pdi6koevuj] {
        color: var(--d-accent);
    }

    .fpf-purpose-btn svg[b-pdi6koevuj] {
        width: 14px;
        height: 14px;
        transition: transform .25s ease;
    }

    .fpf-purpose-btn.is-active svg[b-pdi6koevuj] {
        transform: scale(1.05);
    }

/* ── Điều kiện vé trên trang Hành khách (card rộng) ──────────────────────────────
   FareCardConditions vẫn tôn trọng chế độ hiển thị (Chi tiết / Tóm tắt / Ẩn). Riêng card
   rộng này trình bày dạng LƯỚI 2 CỘT (≥640px) để lấp khoảng trống & rút ngắn chiều cao;
   mỗi điều kiện 1 dòng (nhãn trái · giá trị phải), tiêu đề nhóm trải hết hàng.
   Mobile: 1 cột. Override qua ::deep vì .fcc-* thuộc component FareCardConditions. */
.fpf-cond[b-pdi6koevuj]  .fcc-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 32px;
}

@media (min-width: 640px) {
    .fpf-cond[b-pdi6koevuj]  .fcc-list {
        grid-template-columns: 1fr 1fr;
    }
}

.fpf-cond[b-pdi6koevuj]  .fcc-grp {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 10px;
}

    /* nhóm đầu tiên: không đẩy xuống, không viền trên (đặt rõ để thắng rule :first-child của component) */
    .fpf-cond[b-pdi6koevuj]  .fcc-grp:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.fpf-cond[b-pdi6koevuj]  .fcc-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--d-line-2);
}

.fpf-cond[b-pdi6koevuj]  .fcc-lbl {
    font-size: 12px;
    color: var(--d-ink-3);
}

.fpf-cond[b-pdi6koevuj]  .fcc-val {
    font-size: 12.5px;
    text-align: right;
    flex-shrink: 0;
    max-width: 60%;
    /* KHÔNG đặt color ở đây — để tông ngữ nghĩa (.yes/.muted) của component quyết định màu */
}

/* ---------- Itinerary detail (sidebar "Chi tiết hành trình") ---------- */
.fpf-itin[b-pdi6koevuj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hãng bay + số hiệu */
.fpf-itin-air[b-pdi6koevuj] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fpf-itin-air-logo[b-pdi6koevuj] {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}
.fpf-itin-air-name[b-pdi6koevuj] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink-2);
    line-height: 1.25;
    /* Hiện đủ tên hãng, xuống dòng khi hẹp thay vì cắt bằng "…". */
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}
.fpf-itin-flightno[b-pdi6koevuj] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Hàng giờ bay + sân bay */
.fpf-itin-route[b-pdi6koevuj] {
    display: grid;
    grid-template-columns: auto minmax(64px, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.fpf-itin-route.is-leg[b-pdi6koevuj] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--d-line);
}
.fpf-itin-time[b-pdi6koevuj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.fpf-itin-end[b-pdi6koevuj] {
    text-align: right;
}
.fpf-itin-iata[b-pdi6koevuj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-2);
    margin: 2px 0 0;
}
.fpf-itin-city[b-pdi6koevuj] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    margin: 1px 0 0;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fpf-itin-end .fpf-itin-city[b-pdi6koevuj] {
    margin-left: auto;
}
.fpf-itin-term[b-pdi6koevuj] {
    font-size: 9px;
    color: var(--d-ink-4);
    margin: 1px 0 0;
}

/* Đường nối hành trình (chấm — đường — máy bay) */
.fpf-itin-path[b-pdi6koevuj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.fpf-itin-dur[b-pdi6koevuj] {
    font-size: 10px;
    font-weight: 500;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.fpf-itin-line[b-pdi6koevuj] {
    position: relative;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, transparent, var(--d-accent) 18%, var(--d-accent) 82%, transparent);
}
.fpf-itin-line[b-pdi6koevuj]::before,
.fpf-itin-line[b-pdi6koevuj]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--d-accent);
    transform: translateY(-50%);
}
.fpf-itin-line[b-pdi6koevuj]::before { left: 0; }
.fpf-itin-line[b-pdi6koevuj]::after { right: 0; }
.fpf-itin-plane[b-pdi6koevuj] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--d-accent);
    background: var(--d-surface);
    padding: 0 4px;
    display: inline-flex;
}
.fpf-itin-plane svg[b-pdi6koevuj] {
    width: 13px;
    height: 13px;
    display: block;
}
.fpf-itin-stops[b-pdi6koevuj] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--d-good);
    white-space: nowrap;
}
.fpf-itin-legno[b-pdi6koevuj] {
    font-size: 9.5px;
    color: var(--d-ink-4);
    white-space: nowrap;
}

/* Điểm dừng (transit) */
.fpf-itin-transit[b-pdi6koevuj] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, #2563eb 7%, white);
    border: 1px solid color-mix(in srgb, #2563eb 18%, var(--d-line));
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10.5px;
    color: #1d4ed8;
}
.fpf-itin-transit svg[b-pdi6koevuj] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Chip thông tin: ngày · hạng vé · máy bay · hành lý */
.fpf-itin-meta[b-pdi6koevuj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
    border-top: 1px dashed var(--d-line-2);
}
.fpf-itin-chip[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--d-ink-3);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}
.fpf-itin-chip svg[b-pdi6koevuj] {
    width: 12px;
    height: 12px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}
.fpf-itin-chip.is-fare[b-pdi6koevuj] {
    color: var(--d-accent);
    background: var(--d-accent-soft);
    border-color: color-mix(in srgb, var(--d-accent) 22%, var(--d-line));
    font-weight: 600;
}
.fpf-itin-chip.is-bag[b-pdi6koevuj] {
    color: #166534;
    background: var(--d-good-soft);
    border-color: color-mix(in srgb, var(--d-good) 25%, var(--d-line));
}
.fpf-itin-chip.is-bag svg[b-pdi6koevuj] {
    color: var(--d-good);
}

/* ---------- Thanh hành động cố định đáy màn (mobile/tablet <1024px) ----------
   Tổng tiền + CTA luôn trong tầm mắt khi form dài; desktop ẩn (sidebar sticky đã có nút). */
.fpf-mobilebar[b-pdi6koevuj] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40; /* dưới overlay (50) — modal vẫn phủ được thanh */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--d-surface);
    border-top: 1px solid var(--d-line);
    box-shadow: 0 -6px 20px -8px rgba(16, 24, 40, 0.18);
}
.fpf-mobilebar-main[b-pdi6koevuj] {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Nút Giữ chỗ mảnh trong thanh — cùng chỗ với hành động chính, phân cấp bằng kích thước */
.fpf-mobilebar-hold[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    border: 1px solid #ffd9bd;
    border-radius: 10px;
    background: var(--d-surface);
    color: #c2410c;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
.fpf-mobilebar-hold:hover[b-pdi6koevuj] { background: var(--d-accent-soft); }
.fpf-mobilebar-hold:disabled[b-pdi6koevuj] { opacity: .5; cursor: not-allowed; }
.fpf-mobilebar-hold svg[b-pdi6koevuj] { width: 14px; height: 14px; flex-shrink: 0; }
.fpf-mobilebar-total[b-pdi6koevuj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.fpf-mobilebar-label[b-pdi6koevuj] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.fpf-mobilebar-value[b-pdi6koevuj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fpf-mobilebar-cta[b-pdi6koevuj] {
    flex: 1;
    min-width: 0;
    height: 48px; /* touch target chuẩn */
}
/* Desktop ≥1024px: ẩn thanh (CSS scoped thắng specificity của utility lg:hidden nên phải tự ẩn ở đây) */
@media (min-width: 1024px) {
    .fpf-mobilebar[b-pdi6koevuj] { display: none; }
}
/* Chừa khoảng đáy cho thanh cố định — chỉ khi thanh còn hiển thị (<1024px);
   có thêm hàng Giữ chỗ thì thanh cao hơn → chừa nhiều hơn (:has, browser hiện đại đều hỗ trợ) */
@media (max-width: 1023.98px) {
    .fpf-main-row[b-pdi6koevuj] { padding-bottom: 92px; }
    .fpf-root:has(.fpf-mobilebar-hold) .fpf-main-row[b-pdi6koevuj] { padding-bottom: 140px; }
}

/* ---------- Nút quay lại đầu trang (mobile/tablet) ---------- */
.fpf-back-top[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: 999px;
    background: var(--d-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.fpf-back-top:hover[b-pdi6koevuj] { background: var(--d-surface-2); }
.fpf-back-top svg[b-pdi6koevuj] { width: 14px; height: 14px; color: var(--d-ink-3); }
/* CSS scoped thắng specificity lg:hidden → tự ẩn ở desktop */
@media (min-width: 1024px) {
    .fpf-back-top[b-pdi6koevuj] { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LƯỚI TRƯỜNG NHẬP DÙNG CHUNG — 12 cột
   Trước đây mỗi hàng tự khai một khổ cột riêng (tên: 70/80/90px + 2fr + 130px;
   CCCD: 1 ô max-width 28rem; hộ chiếu: 3 cột; hành lý: 2 cột + addon IATA) → mép
   trái/phải các ô so le nhau suốt chiều dọc thẻ, mắt không bám được cột nào ⇒ "loạn".
   Nay MỌI hàng (nhân thân · giấy tờ · hành lý · liên hệ) đổ vào cùng 1 lưới 12 cột
   nên các mép cột trùng nhau, đọc theo một nhịp.
   ══════════════════════════════════════════════════════════════════════════════ */
.fpf-fieldgrid[b-pdi6koevuj] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* minmax(0,1fr) — KHÔNG dùng 1fr thô: min-content của input (~20ch) nống cột tràn thẻ */
    gap: 14px 12px;
    /* start: thông báo lỗi dưới 1 ô không đẩy lệch các ô cùng hàng */
    align-items: start;
}

/* ── BỀ RỘNG THEO NỘI DUNG, VẪN CHUNG MÉP CỘT (≥641px) ──
   Chia đều tăm tắp thì ô "Tên đệm & tên" (có thể 20+ ký tự) chật bằng ô ngày sinh vốn chỉ
   chứa đúng 10 ký tự "dd/mm/yyyy" — nhìn vô lý và gõ tên thì cụt. Nên phân 2 hạng bề rộng,
   nhưng CHỌN bội số sao cho mép cột vẫn trùng nhau ở mọi hàng:
     · HẸP  (span 3) — ô có độ dài cố định/ngắn: danh xưng, Họ, ngày sinh, CCCD, số HC, hạn HC
     · RỘNG (span 6) — ô văn bản tự do dài: Tên đệm & tên, Quốc tịch (tên nước + mã)
   Nhịp mỗi hàng: 3|3|6 → mọi đường cắt đều rơi vào cột 3, 6, 12 nên các hàng vẫn thẳng mép:
     Danh xưng · Họ · Tên đệm & tên
     Ngày sinh · Số CCCD · Quốc tịch
     Số hộ chiếu · Hạn HC · (trống)
   Hàng thiếu ô thì chừa TRỐNG cột cuối, KHÔNG giãn ô cho đầy hàng — giãn là lệch mép lại. */
/* ── Nhịp cột ≥641px: mọi NHÃN rơi vào 4 cột mốc 1 · 3 · 6 · 10 ──
   Hàng tên+ngày sinh : Danh xưng 2 | Họ 3 | Tên 4 | Ngày sinh 3   (mốc 1·3·6·10)
   Hàng CCCD (chỉ VJ) : CCCD 3 + hint                              (mốc 1)
   Hàng hộ chiếu      : Quốc tịch 5 | Số hộ chiếu 4 | Hạn HC 3     (mốc 1·6·10)
   Hành lý            : mỗi chiều 5                                (mốc 1·6)
   Ngày sinh nhập chung hàng tên để case KHÔNG có CCCD (mọi hãng trừ VJ nội địa,
   là case phổ biến nhất) không còn hàng mồ côi 1 ô + 3/4 hàng trống — nguồn
   "rối mắt" user chỉ ra. Ô ngày và Hạn HC cùng đóng cột 10-12 nên mép phải phẳng. */
.fpf-fieldgrid > .fpf-f-title[b-pdi6koevuj] { grid-column: span 2; }
.fpf-fieldgrid > .fpf-f-last[b-pdi6koevuj],
.fpf-fieldgrid > .fpf-f-dob[b-pdi6koevuj],
.fpf-fieldgrid > .fpf-f-pexp[b-pdi6koevuj] { grid-column: span 3; }
.fpf-fieldgrid > .fpf-f-first[b-pdi6koevuj] { grid-column: span 4; }
/* CCCD ghim cột 1: mở hàng riêng (hàng 1 đã kín), mang theo hint luật VJ */
.fpf-fieldgrid > .fpf-f-cccd[b-pdi6koevuj] { grid-column: 1 / span 3; }
/* Hàng hộ chiếu: Số hộ chiếu MỞ ĐẦU (ghim cột 1 để không leo lên lấp chỗ trống sau ô
   CCCD), Quốc tịch span 4, Hạn HC span 3 tự chảy theo sau (6-9, 10-12).
   Quốc tịch KHÔNG lấy suất rộng span 5 (user chê "select nhỏ mà dài"): mặc định
   "Việt Nam (VNM)" chỉ cần ~142px. Cũng không xuống được span 3: khổ 641px chỉ còn
   ~118px là CỤT chữ mặc định (select thuần cụt hẳn, không "…") — span 4 ≈ 161px là
   mức nhỏ nhất an toàn, và bằng đúng khổ ô Tên nên nhìn đồng bộ. */
.fpf-fieldgrid > .fpf-f-pno[b-pdi6koevuj] { grid-column: 1 / span 5; }
.fpf-fieldgrid > .fpf-f-nat[b-pdi6koevuj] { grid-column: span 4; }

/* Hành lý: mỗi chiều span 5 để nhãn "Chiều về" rơi đúng cột mốc 6 — thẳng nhãn
   "Tên"/"Số hộ chiếu" phía trên (khứ hồi = cột 1-5 | 6-10, một chiều = 1-5).
   Bề rộng vẫn dư cho nội dung dài nhất "20 KG ký gửi (250.000 ₫)" ~205px: span 5
   ở khổ ngặt nhất 641px ≈ 253px, select thuần cụt hẳn không có "…" nên phải dư.
   Liên hệ giữ 1/2 (span 6): nằm ở THẺ riêng, không chung lưới thẻ hành khách. */
.fpf-fieldgrid > .fpf-f-bag[b-pdi6koevuj] { grid-column: span 5; }
.fpf-fieldgrid > .fpf-f-half[b-pdi6koevuj] { grid-column: span 6; }

/* ---------- Nhóm phụ trong thẻ hành khách (hành lý) ----------
   Chỉ còn đường đứt phân nhóm — tiêu đề section riêng (icon + chữ hoa cam) đã bỏ,
   nhãn từng ô tự mô tả "Hành lý ký gửi · SGN → HAN" cùng hệ .fpf-label với form trên. */
.fpf-section[b-pdi6koevuj] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--d-line);
}

/* Dấu * bắt buộc — thay text-red-500 rải rác */
.fpf-req[b-pdi6koevuj] { color: var(--d-danger); font-weight: 700; }

/* Dòng nhắc dưới tiêu đề thẻ (nhập tên khớp giấy tờ) */
.fpf-cardnote[b-pdi6koevuj] {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d-ink-3);
}

/* Nhãn chung cho một CỤM ô cùng loại (hành lý chiều đi | chiều về). Đứng ra hứng phần chữ
   lặp lại của các nhãn con, để nhãn con chỉ còn phần phân biệt. Cùng hệ chữ với .fpf-label,
   chỉ đậm & đậm màu hơn một bậc — KHÔNG icon, KHÔNG chữ hoa cam như .fpf-section-hd cũ. */
.fpf-grouplabel[b-pdi6koevuj] {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--d-ink-2);
    letter-spacing: 0.01em;
}

/* Chú thích phụ dưới một ô nhập (vd luật "CCCD HOẶC hộ chiếu" của Vietjet) */
.fpf-hint[b-pdi6koevuj] {
    margin: 4px 0 0;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--d-warn);
}

/* ---------- Cụm liên kết nhân viên trên thanh tiêu đề hành khách ----------
   Ở trên thanh "Người lớn N" và CĂN SANG PHẢI (user chốt) — `margin-left:auto`.
   Cả switch + ô tìm + nút gỡ nằm trong MỘT khối để khi hẹp xuống dòng nguyên cụm, thay vì
   mỗi control tự rớt một chỗ. */
.fpf-hd-link[b-pdi6koevuj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

.fpf-switch[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}
.fpf-switch-track[b-pdi6koevuj] {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .18s ease;
}
.fpf-switch-knob[b-pdi6koevuj] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
    transition: transform .18s ease;
}
.fpf-switch-tx[b-pdi6koevuj] { font-size: 12px; font-weight: 600; color: var(--d-ink-3); }
.fpf-switch.is-on .fpf-switch-track[b-pdi6koevuj] { background: var(--d-accent); }
.fpf-switch.is-on .fpf-switch-knob[b-pdi6koevuj] { transform: translateX(16px); }
.fpf-switch.is-on .fpf-switch-tx[b-pdi6koevuj] { color: var(--d-accent); }

.fpf-linked-chip[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    max-width: 260px;
    /* pill mềm — trên nền kem của header, hộp vuông viền đậm trông như một nút bấm nữa */
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--d-accent) 24%, #fff);
    background: var(--d-surface);
    color: #c2410c;
    font-size: 12px;
    font-weight: 600;
}
.fpf-linked-chip svg[b-pdi6koevuj] { width: 13px; height: 13px; flex-shrink: 0; }

/* Ô tìm nhân viên: khoá bề rộng, KHÔNG giãn hết hàng (ô tìm dài bằng cả thẻ trông như
   một trường nhập chính, gây hiểu nhầm thứ tự thao tác) */
.fpf-empsearch[b-pdi6koevuj] { position: relative; flex: 1 1 200px; max-width: 260px; min-width: 0; }
.fpf-empsearch-busy[b-pdi6koevuj] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--d-ink-4);
    pointer-events: none;
}
.fpf-empdd[b-pdi6koevuj] {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 16rem;
    overflow: auto;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 10px;
    box-shadow: 0 14px 30px -14px rgba(16, 24, 40, .30), 0 0 0 1px rgba(16, 24, 40, .03);
}
.fpf-empdd-item[b-pdi6koevuj] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--d-line-2);
    background: transparent;
    cursor: pointer;
}
.fpf-empdd-item:last-child[b-pdi6koevuj] { border-bottom: 0; }
.fpf-empdd-item:hover[b-pdi6koevuj] { background: var(--d-accent-soft); }
.fpf-empdd-name[b-pdi6koevuj] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpf-empdd-meta[b-pdi6koevuj] {
    display: block;
    font-size: 10.5px;
    color: var(--d-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fpf-unlink[b-pdi6koevuj] {
    /* đứng SÁT ô tìm chứ không dạt mép phải: nút gỡ liên kết thuộc về ô tìm, đẩy ra xa
       trông như một hành động rời của cả thẻ */
    width: 30px; height: 30px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--d-ink-4);
    font-size: 12px;
    cursor: pointer;
}
.fpf-unlink:hover[b-pdi6koevuj] {
    color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 8%, white);
}

/* ---------- Thanh "Mục đích đặt vé" ----------
   Chỉ 1 hàng thông tin → thanh mảnh thay vì card đầy đủ (bớt một tầng khung).
   Hint XUỐNG DÒNG chứ không truncate: câu giải thích ngân sách bị cắt cụt gây hiểu nhầm. */
.fpf-purpose-bar[b-pdi6koevuj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 9px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.fpf-purpose-lb[b-pdi6koevuj] {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-ink-2);
    flex-shrink: 0;
}
.fpf-purpose-tag[b-pdi6koevuj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid #ffd9bd;
    background: var(--d-accent-soft);
    color: #c2410c;
    font-size: 11.5px;
    font-weight: 600;
}
.fpf-purpose-tag.is-personal[b-pdi6koevuj] {
    border-color: var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}
.fpf-purpose-tag svg[b-pdi6koevuj] { width: 12px; height: 12px; flex-shrink: 0; }
.fpf-purpose-hint[b-pdi6koevuj] {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--d-ink-3);
}

/* ---------- Điện thoại ≤640px ----------
   Xuống 2 tầng: [danh xưng | Họ] rồi Tên / Ngày sinh full; giấy tờ & hành lý & liên hệ
   mỗi ô một hàng. Số HC | hạn HC KHÔNG còn ghép cặp 6|6: thứ tự DOM giờ là
   pno → nat → pexp (Quốc tịch chen giữa) nên ghép cặp là hở nửa hàng. */
@media (max-width: 640px) {
    .fpf-fieldgrid[b-pdi6koevuj] { gap: 12px 10px; }
    .fpf-fieldgrid > .fpf-f-title[b-pdi6koevuj] { grid-column: span 4; }
    .fpf-fieldgrid > .fpf-f-last[b-pdi6koevuj] { grid-column: span 8; }
    .fpf-fieldgrid > .fpf-f-first[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-dob[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-cccd[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-nat[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-pno[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-pexp[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-bag[b-pdi6koevuj],
    .fpf-fieldgrid > .fpf-f-half[b-pdi6koevuj] { grid-column: span 12; }
    /* Cụm liên kết NV chiếm trọn dòng 2 của thanh tiêu đề */
    .fpf-hd-link[b-pdi6koevuj] { width: 100%; margin-left: 0; }
    .fpf-empsearch[b-pdi6koevuj] { max-width: none; }
    .fpf-purpose-hint[b-pdi6koevuj] { flex-basis: 100%; }
}

/* ---------- Responsive form controls (mobile ≤640px) ----------
   - iOS Safari tự zoom khi focus input <16px → ép 16px trên mobile.
   - Touch target tối thiểu ~40px cho control. */
@media (max-width: 640px) {
    .fpf-root input[type="text"][b-pdi6koevuj],
    .fpf-root input[type="email"][b-pdi6koevuj],
    .fpf-root input[type="tel"][b-pdi6koevuj],
    .fpf-root select[b-pdi6koevuj] {
        font-size: 16px;
        min-height: 40px;
    }
    /* DateMaskInput là component con → cần ::deep */
    .fpf-root[b-pdi6koevuj]  input { font-size: 16px; min-height: 40px; }
    .fpf-btn-lg[b-pdi6koevuj] { height: 48px; }
}

/* ---------- Trạng thái không có chuyến bay đã chọn (chặn form) ---------- */
.fpf-empty[b-pdi6koevuj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}
.fpf-empty-ico[b-pdi6koevuj] {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--d-warn) 12%, white);
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}
.fpf-empty-ico svg[b-pdi6koevuj] {
    width: 32px;
    height: 32px;
    color: var(--d-warn);
}
.fpf-empty h3[b-pdi6koevuj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--d-ink);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
}
.fpf-empty p[b-pdi6koevuj] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.5;
    margin: 0 0 20px;
    max-width: 400px;
}
.fpf-empty-actions[b-pdi6koevuj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
/* /src/Features/_Shared/Flight/FlightPaymentStep.razor.rz.scp.css */
/* FlightPaymentStep — Manager Dashboard v4 theme tokens + targeted overrides */
.fps-root[b-4uhwjdyi4l] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

/* Payment method tile — compact horizontal: icon + name */
.fps-method[b-4uhwjdyi4l] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: 12px;
    background: var(--d-surface);
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .15s ease, background .15s ease;
    text-align: left;
    min-height: 60px;
    position: relative;
    overflow: hidden;
}

    .fps-method:hover[b-4uhwjdyi4l] {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--d-accent) 40%, var(--d-line));
        box-shadow: 0 8px 18px -10px rgba(255, 107, 0, 0.28),
                    0 2px 5px -2px rgba(16, 24, 40, 0.06);
    }

    .fps-method.is-selected[b-4uhwjdyi4l] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
        box-shadow: 0 0 0 1px var(--d-accent),
                    0 10px 22px -10px rgba(255, 107, 0, 0.32);
    }

        .fps-method.is-selected:hover[b-4uhwjdyi4l] {
            transform: translateY(-2px);
        }

/* ─── Numeric / display utility ─── */
.fps-num[b-4uhwjdyi4l] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

.fps-mono[b-4uhwjdyi4l] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fps-display[b-4uhwjdyi4l] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.025em;
}

/* ─── Card primitive ─── */
.fps-card[b-4uhwjdyi4l] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nghỉ nhẹ để thẻ nổi trên nền (wrapper trang giờ trong suốt) — đồng bộ thẻ trang kết quả */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
}

.fps-card-hd[b-4uhwjdyi4l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    /* .fps-card-toggle h2 nằm cùng danh sách: header thu/mở (Chi tiết hành trình, Thông tin hành
       khách) dùng <button class="fps-card-toggle"><h2>, trước đây KHÔNG có rule nào cho h2 đó nên
       nó rơi về style mặc định của trình duyệt — chữ to, không uppercase, và Tailwind preflight đặt
       `svg { display: block }` khiến icon bị đẩy xuống dòng riêng. */
    .fps-card-hd h2[b-4uhwjdyi4l],
    .fps-card-hd h3[b-4uhwjdyi4l],
    .fps-card-toggle h2[b-4uhwjdyi4l] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .fps-card-hd h2 svg[b-4uhwjdyi4l],
        .fps-card-hd h3 svg[b-4uhwjdyi4l],
        .fps-card-toggle h2 svg[b-4uhwjdyi4l] {
            flex-shrink: 0;
            color: var(--d-accent);
        }

.fps-card-hd-meta[b-4uhwjdyi4l] {
    font-size: 11px;
    font-weight: 500;
    color: var(--d-ink-3);
    letter-spacing: 0;
    text-transform: none;
}

.fps-card-toggle[b-4uhwjdyi4l] {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background .12s;
}

    .fps-card-toggle:hover[b-4uhwjdyi4l] {
        background: var(--d-surface-2);
    }

    .fps-card-toggle .chev[b-4uhwjdyi4l] {
        color: var(--d-ink-4);
        transition: transform .15s;
    }

    .fps-card-toggle.is-open .chev[b-4uhwjdyi4l] {
        transform: rotate(180deg);
    }

.fps-card-body[b-4uhwjdyi4l] {
    padding: 14px 16px;
}

/* ─── Booking summary ─── */
.fps-summary[b-4uhwjdyi4l] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px 16px;
}

.fps-summary-item[b-4uhwjdyi4l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fps-summary-lbl[b-4uhwjdyi4l] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fps-summary-val[b-4uhwjdyi4l] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.fps-summary-code[b-4uhwjdyi4l] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.fps-summary-expire[b-4uhwjdyi4l] {
    color: var(--d-danger);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ─── Notice (warn / danger banner) ─── */
.fps-notice[b-4uhwjdyi4l] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 16px 14px;
}

    .fps-notice.warn[b-4uhwjdyi4l] {
        background: #fef3c7;
        border: 1px solid #fde68a;
        color: #92400e;
    }

    .fps-notice.warn svg[b-4uhwjdyi4l] {
        color: #d97706;
    }

/* ─── Passenger / contact ─── */
.fps-pax-contact[b-4uhwjdyi4l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line-2);
    margin-bottom: 12px;
}

.fps-pax-contact-item .lbl[b-4uhwjdyi4l] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fps-pax-contact-item .val[b-4uhwjdyi4l] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    margin: 2px 0 0;
}

.fps-pax-table[b-4uhwjdyi4l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .fps-pax-table thead th[b-4uhwjdyi4l] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid var(--d-line);
    }

    .fps-pax-table tbody td[b-4uhwjdyi4l] {
        padding: 9px 10px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

    .fps-pax-table tbody tr:last-child td[b-4uhwjdyi4l] {
        border-bottom: 0;
    }

    .fps-pax-table .idx[b-4uhwjdyi4l] {
        color: var(--d-ink-4);
        font-variant-numeric: tabular-nums;
    }

    .fps-pax-table .name[b-4uhwjdyi4l] {
        font-weight: 500;
        color: var(--d-ink);
    }

/* ─── Itinerary section ─── */
.fps-itin-section + .fps-itin-section[b-4uhwjdyi4l] {
    border-top: 1px solid var(--d-line-2);
}

.fps-itin-label[b-4uhwjdyi4l] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--d-surface-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-ink-3);
}

    .fps-itin-label .bar[b-4uhwjdyi4l] {
        width: 3px;
        height: 14px;
        border-radius: 2px;
        background: var(--d-accent-grad);
    }

    .fps-itin-label .bar.alt[b-4uhwjdyi4l] {
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
    }

    .fps-itin-label .name.accent[b-4uhwjdyi4l] {
        color: var(--d-accent);
    }

    .fps-itin-label .name.alt[b-4uhwjdyi4l] {
        color: #2563eb;
    }

    .fps-itin-label .route[b-4uhwjdyi4l] {
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-3);
        text-transform: none;
        letter-spacing: 0;
    }

    .fps-itin-label .date[b-4uhwjdyi4l] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-left: auto;
        font-variant-numeric: tabular-nums;
        text-transform: none;
        letter-spacing: 0;
    }

.fps-itin-body[b-4uhwjdyi4l] {
    padding: 14px 16px;
}

.fps-airline-row[b-4uhwjdyi4l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .fps-airline-row .name[b-4uhwjdyi4l] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .fps-airline-row .code[b-4uhwjdyi4l] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        color: var(--d-ink-3);
        background: var(--d-surface-2);
        border: 1px solid var(--d-line);
        padding: 2px 7px;
        border-radius: 999px;
        margin-left: 6px;
    }

.fps-itin-row[b-4uhwjdyi4l] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fps-itin-end[b-4uhwjdyi4l] {
    flex: 1;
    min-width: 0;
}

    .fps-itin-end.right[b-4uhwjdyi4l] {
        text-align: right;
    }

    .fps-itin-end .iata-lbl[b-4uhwjdyi4l] {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--d-ink-4);
        margin: 0 0 2px;
    }

    .fps-itin-end .time[b-4uhwjdyi4l] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.025em;
        color: var(--d-ink);
        margin: 0;
        font-variant-numeric: tabular-nums;
    }

    .fps-itin-end .date[b-4uhwjdyi4l] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin: 2px 0 0;
        font-variant-numeric: tabular-nums;
    }

    .fps-itin-end .term[b-4uhwjdyi4l] {
        font-size: 10.5px;
        color: var(--d-ink-4);
        margin: 1px 0 0;
    }

.fps-itin-mid[b-4uhwjdyi4l] {
    flex: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 14px;
    min-width: 0;
}

    .fps-itin-mid .dur[b-4uhwjdyi4l] {
        font-size: 11px;
        color: var(--d-ink-3);
        font-variant-numeric: tabular-nums;
    }

    /* Đường nối: chấm 2 đầu + line gradient + máy bay ở giữa (đồng bộ các bước khác) */
    .fps-itin-mid .line[b-4uhwjdyi4l] {
        position: relative;
        width: 100%;
        height: 1.5px;
        background: linear-gradient(to right, transparent, var(--d-accent) 18%, var(--d-accent) 82%, transparent);
    }

        .fps-itin-mid .line[b-4uhwjdyi4l]::before,
        .fps-itin-mid .line[b-4uhwjdyi4l]::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--d-accent);
            transform: translateY(-50%);
        }

        .fps-itin-mid .line[b-4uhwjdyi4l]::before { left: 0; }
        .fps-itin-mid .line[b-4uhwjdyi4l]::after { right: 0; }

        .fps-itin-mid .line .plane[b-4uhwjdyi4l] {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: var(--d-surface);
            color: var(--d-accent);
            padding: 0 4px;
            display: inline-flex;
        }

            .fps-itin-mid .line .plane svg[b-4uhwjdyi4l] {
                display: block;
            }

    .fps-itin-mid .stop[b-4uhwjdyi4l] {
        font-size: 11px;
        color: var(--d-ink-3);
    }

/* ─── Multi-leg timeline ─── */
.fps-leg-timeline[b-4uhwjdyi4l] {
    position: relative;
    padding-left: 22px;
}

    .fps-leg-timeline[b-4uhwjdyi4l]::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 6px;
        bottom: 6px;
        width: 1px;
        background: color-mix(in srgb, var(--d-accent) 40%, var(--d-line));
    }

.fps-leg-point[b-4uhwjdyi4l] {
    position: relative;
}

    .fps-leg-point .marker[b-4uhwjdyi4l] {
        position: absolute;
        left: -22px;
        top: 4px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 2px solid var(--d-line);
        background: var(--d-surface);
        z-index: 2;
        display: grid;
        place-items: center;
    }

        .fps-leg-point .marker .inner[b-4uhwjdyi4l] {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--d-accent);
        }

        .fps-leg-point .marker.last[b-4uhwjdyi4l] {
            background: var(--d-accent-grad);
            border-color: transparent;
        }

        .fps-leg-point .marker.last svg[b-4uhwjdyi4l] {
            color: #fff;
            width: 8px;
            height: 8px;
        }

        .fps-leg-point .marker.transit[b-4uhwjdyi4l] {
            border-color: var(--d-ink-4);
        }

        .fps-leg-point .marker.transit .inner[b-4uhwjdyi4l] {
            background: var(--d-ink-4);
        }

.fps-leg-time[b-4uhwjdyi4l] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

    .fps-leg-time .hh[b-4uhwjdyi4l] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
    }

    .fps-leg-time .iata[b-4uhwjdyi4l] {
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-2);
    }

    .fps-leg-time .city[b-4uhwjdyi4l] {
        font-size: 11px;
        color: var(--d-ink-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.fps-leg-meta[b-4uhwjdyi4l] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    margin-top: 2px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.fps-leg-flight[b-4uhwjdyi4l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10.5px;
    color: var(--d-ink-3);
    margin: 8px 0 8px 4px;
}

    .fps-leg-flight svg[b-4uhwjdyi4l] {
        color: var(--d-accent);
        width: 11px;
        height: 11px;
    }

    .fps-leg-flight .num[b-4uhwjdyi4l] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--d-ink-2);
        font-weight: 600;
    }

.fps-leg-transit[b-4uhwjdyi4l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    margin: 6px 0 6px 4px;
}

/* ─── Fare summary strip ─── */
.fps-fare-strip[b-4uhwjdyi4l] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 16px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line-2);
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12px;
    color: var(--d-ink-3);
}

    .fps-fare-strip strong[b-4uhwjdyi4l] {
        color: var(--d-ink);
        font-weight: 600;
    }

    .fps-fare-strip .sep[b-4uhwjdyi4l] {
        color: var(--d-ink-4);
    }

/* ─── Price breakdown table ─── */
.fps-price-wrap[b-4uhwjdyi4l] {
    padding: 12px 16px 14px;
}

.fps-price-tbl-shell[b-4uhwjdyi4l] {
    border: 1px solid var(--d-line);
    border-radius: 8px;
    overflow: hidden;
}

.fps-price-tbl[b-4uhwjdyi4l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .fps-price-tbl thead th[b-4uhwjdyi4l] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        background: var(--d-surface-2);
        border-bottom: 1px solid var(--d-line);
        padding: 8px 12px;
        text-align: left;
    }

        .fps-price-tbl thead th.right[b-4uhwjdyi4l] {
            text-align: right;
        }

    .fps-price-tbl tbody td[b-4uhwjdyi4l] {
        padding: 8px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

        .fps-price-tbl tbody td.right[b-4uhwjdyi4l] {
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum';
        }

        .fps-price-tbl tbody td.total[b-4uhwjdyi4l] {
            font-weight: 600;
            color: var(--d-ink);
        }

    .fps-price-tbl tbody tr:last-child td[b-4uhwjdyi4l] {
        border-bottom: 0;
    }

.fps-price-foot[b-4uhwjdyi4l] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 14px;
    background: var(--d-accent-grad-soft);
    border-top: 1px solid color-mix(in srgb, var(--d-accent) 25%, transparent);
}

    .fps-price-foot .lbl[b-4uhwjdyi4l] {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .fps-price-foot .val[b-4uhwjdyi4l] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.01em;
    }

/* ─── Right-side total card ─── */
.fps-total-card[b-4uhwjdyi4l] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nhẹ để thẻ tổng nổi như thẻ kết quả (wrapper giờ trong suốt) */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
    /* Là grid-item: phải align-self:start để KHÔNG bị kéo cao bằng cột trái (stretch) — nếu stretch
       thì sticky vô hiệu (thẻ đã cao hết cột). start cho thẻ cao tự nhiên → sticky mới chạy. */
    align-self: start;
    position: sticky;
    /* 88px để vượt header cố định (~80px) khi cuộn — top:16px cũ làm thẻ bị header che */
    top: 88px;
}

.fps-total-hd[b-4uhwjdyi4l] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .fps-total-hd h3[b-4uhwjdyi4l] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.fps-total-body[b-4uhwjdyi4l] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fps-leg-block-lbl[b-4uhwjdyi4l] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

    .fps-leg-block-lbl .route[b-4uhwjdyi4l] {
        color: var(--d-accent);
    }

    .fps-leg-block-lbl .route.alt[b-4uhwjdyi4l] {
        color: #2563eb;
    }

.fps-leg-line[b-4uhwjdyi4l] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 2px 0;
}

    .fps-leg-line .k[b-4uhwjdyi4l] {
        color: var(--d-ink-3);
    }

    .fps-leg-line .v[b-4uhwjdyi4l] {
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

    .fps-leg-line.bag[b-4uhwjdyi4l] {
        color: var(--d-good);
        font-size: 12px;
    }

        .fps-leg-line.bag .k[b-4uhwjdyi4l],
        .fps-leg-line.bag .v[b-4uhwjdyi4l] {
            color: var(--d-good);
        }

.fps-leg-subtot[b-4uhwjdyi4l] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
}

    .fps-leg-subtot .k[b-4uhwjdyi4l] {
        color: var(--d-ink-2);
    }

    .fps-leg-subtot .v[b-4uhwjdyi4l] {
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

.fps-divider[b-4uhwjdyi4l] {
    border-top: 1px dashed var(--d-line);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fps-grand[b-4uhwjdyi4l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--d-line);
}

    .fps-grand .k[b-4uhwjdyi4l] {
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink-2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .fps-grand .v[b-4uhwjdyi4l] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 22px;
        font-weight: 700;
        color: var(--d-accent);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

.fps-pax-meta[b-4uhwjdyi4l] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

    .fps-pax-meta svg[b-4uhwjdyi4l] {
        color: var(--d-ink-4);
    }

/* ─── Pay button (primary CTA) ─── */
.fps-pay-wrap[b-4uhwjdyi4l] {
    padding: 0 16px 16px;
}

.fps-error-banner[b-4uhwjdyi4l] {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12px;
    color: #b91c1c;
}

.fps-pay-btn[b-4uhwjdyi4l] {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: filter .12s, box-shadow .12s, transform .04s;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 6px 16px -4px rgba(255, 107, 0, 0.28);
}

    .fps-pay-btn:hover:not(:disabled)[b-4uhwjdyi4l] {
        background: var(--d-accent-grad-hover);
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.22), 0 8px 22px -4px rgba(255, 107, 0, 0.34);
    }

    .fps-pay-btn:active:not(:disabled)[b-4uhwjdyi4l] {
        transform: translateY(1px);
    }

    .fps-pay-btn:disabled[b-4uhwjdyi4l] {
        cursor: not-allowed;
        filter: saturate(.55) brightness(1.05);
        box-shadow: none;
    }

.fps-spinner[b-4uhwjdyi4l] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fps-spin-b-4uhwjdyi4l .7s linear infinite;
}

.fps-spinner.dark[b-4uhwjdyi4l] {
    border-color: rgba(255, 107, 0,.25);
    border-top-color: var(--d-accent);
}

@keyframes fps-spin-b-4uhwjdyi4l {
    to { transform: rotate(360deg); }
}

/* ─── Loading & status panels (booking error / pending pnr) ─── */
.fps-loading-panel[b-4uhwjdyi4l] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 32px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
}

.fps-status-panel[b-4uhwjdyi4l] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    max-width: 540px;
    margin: 0 auto;
    overflow: hidden;
}

    .fps-status-panel.warn[b-4uhwjdyi4l] {
        border-color: #fde68a;
    }

.fps-status-hd[b-4uhwjdyi4l] {
    padding: 28px 28px 12px;
    text-align: center;
}

.fps-status-icon[b-4uhwjdyi4l] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
}

    .fps-status-icon.danger[b-4uhwjdyi4l] {
        background: #fef2f2;
        color: #dc2626;
    }

    .fps-status-icon.warn[b-4uhwjdyi4l] {
        background: #fef3c7;
        color: #d97706;
    }

.fps-status-title[b-4uhwjdyi4l] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

.fps-status-msg[b-4uhwjdyi4l] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.55;
    margin: 0;
}

    .fps-status-msg strong[b-4uhwjdyi4l] {
        color: var(--d-ink);
        font-weight: 600;
    }

.fps-status-actions[b-4uhwjdyi4l] {
    padding: 14px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fps-btn[b-4uhwjdyi4l] {
    width: 100%;
    height: 40px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .12s, border-color .12s;
}

    .fps-btn:hover[b-4uhwjdyi4l] {
        background: var(--d-surface-2);
    }

.fps-btn-accent[b-4uhwjdyi4l] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .fps-btn-accent:hover[b-4uhwjdyi4l] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

/* ─── Payment categories ─── */
.fps-cat-lbl[b-4uhwjdyi4l] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 14px 0 8px;
}

    .fps-cat-lbl:first-child[b-4uhwjdyi4l] {
        margin-top: 0;
    }

.fps-method-grid[b-4uhwjdyi4l] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .fps-method-grid[b-4uhwjdyi4l] { grid-template-columns: repeat(2, 1fr); }
}

/* Featured method (QrBank MB) — nổi bật bằng gradient + sparkle glow */
    .fps-method-featured .fps-method[b-4uhwjdyi4l] {
        background: linear-gradient(135deg, #fff8f2 0%, #ffe8d6 100%);
        border-color: color-mix(in srgb, var(--d-accent) 35%, var(--d-line));
    }

        .fps-method-featured .fps-method[b-4uhwjdyi4l]::after {
            content: '';
            position: absolute;
            top: -28px;
            right: -28px;
            width: 110px;
            height: 110px;
            background: radial-gradient(circle, rgba(255, 107, 0, 0.14) 0%, rgba(255, 107, 0, 0.04) 45%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .fps-method-featured .fps-method > *[b-4uhwjdyi4l] {
            position: relative;
            z-index: 1;
        }

        .fps-method-featured .fps-method:hover[b-4uhwjdyi4l] {
            border-color: color-mix(in srgb, var(--d-accent) 60%, var(--d-line));
            box-shadow: 0 10px 22px -10px rgba(255, 107, 0, 0.40),
                        0 2px 6px -2px rgba(16, 24, 40, 0.08);
        }

.fps-method-featured-badge[b-4uhwjdyi4l] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6b00 0%, #ff7d1f 60%, #ff9a52 100%);
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 2px 5px -1px rgba(255, 107, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

    .fps-method-featured-badge[b-4uhwjdyi4l]::before {
        content: '★';
        font-size: 10px;
        line-height: 1;
        color: #fff;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    }

/* Icon chip — khung uniform cho mọi logo */
.fps-method-ico[b-4uhwjdyi4l] {
    width: 40px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.fps-method .name[b-4uhwjdyi4l] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fps-method .ico-fb[b-4uhwjdyi4l] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 11px;
}

    .fps-method .ico-fb.momo[b-4uhwjdyi4l] { background: #d82d8b; }
    .fps-method .ico-fb.wallet[b-4uhwjdyi4l] { background: #16a34a; }
    .fps-method .ico-fb.qr[b-4uhwjdyi4l] { background: #2563eb; }

.fps-method img[b-4uhwjdyi4l] {
    max-height: 28px;
    max-width: 40px;
    object-fit: contain;
}

/* Check mark khi tile được chọn — huy hiệu tròn nền cam, dấu trắng */
.fps-method-check[b-4uhwjdyi4l] {
    width: 20px;
    height: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--d-accent) 0%, #ff7d1f 100%);
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 2px 5px -1px rgba(255, 107, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: fps-check-pop-b-4uhwjdyi4l .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes fps-check-pop-b-4uhwjdyi4l {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* ─── Layout grid ─── */
.fps-grid[b-4uhwjdyi4l] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .fps-grid[b-4uhwjdyi4l] {
        grid-template-columns: 2fr 1fr;
    }
}

/* Khoảng cách giữa các thẻ đặt bằng `gap` của CONTAINER, không dùng `> * + * { margin-top }`.
   Lý do: CSS isolation gắn scope attribute vào phần tử CUỐI của selector, nên rule cũ thành
   `.fps-stack > * + *[b-fps]` — chỉ áp cho thẻ do CHÍNH FlightPaymentStep render. Mọi component
   con (InsuranceOptionsBlock, PaymentMethodSelector) đều bị trượt và dính vào thẻ trước nó.
   `gap` là thuộc tính của container (container thuộc scope này) nên áp cho MỌI con bất kể scope. */
.fps-stack[b-4uhwjdyi4l] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /src/Features/_Shared/Flight/FlightResultCard.razor.rz.scp.css */
/* FlightResultCard — Manager Dashboard v4 theme */
.frc-root[b-86s8rwn466] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-danger: #dc2626;
    --d-r: 12px;
    margin-top: 4px;
    color: var(--d-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}

.frc-root.is-bookable[b-86s8rwn466] { cursor: pointer; }
.frc-root.is-disabled[b-86s8rwn466] { cursor: not-allowed; opacity: 0.6; }

.frc-root.is-bookable:hover[b-86s8rwn466] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(16, 24, 40, 0.18), 0 2px 6px -1px rgba(16, 24, 40, 0.08);
}

/* Banner: not bookable */
.frc-banner[b-86s8rwn466] {
    background: var(--d-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-top-left-radius: var(--d-r);
    border-top-right-radius: var(--d-r);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .frc-banner svg[b-86s8rwn466] { width: 14px; height: 14px; }

/* Body wrapper */
.frc-body[b-86s8rwn466] {
    display: flex;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    position: relative;
}

.frc-root.is-selected .frc-body[b-86s8rwn466] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 1px var(--d-accent), 0 4px 14px -4px rgba(255, 107, 0, 0.25);
}

/* Info section */
.frc-info[b-86s8rwn466] {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.frc-info-grid[b-86s8rwn466] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .frc-info-grid[b-86s8rwn466] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

.frc-airline[b-86s8rwn466] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .frc-airline[b-86s8rwn466] { flex: 0 0 auto; min-width: 140px; }
}

.frc-airline-logo[b-86s8rwn466] {
    height: 22px;
    width: auto;
}

.frc-airline-name[b-86s8rwn466] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-2);
    line-height: 1.25;
    /* Hiện đủ tên hãng, xuống dòng khi hẹp thay vì cắt bằng "…". */
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    display: none;
}

@media (min-width: 768px) {
    .frc-airline-name[b-86s8rwn466] { display: inline; }
}

.frc-itinerary[b-86s8rwn466] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 0;
}

.frc-time[b-86s8rwn466] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.frc-time.frc-time-r[b-86s8rwn466] { align-items: flex-end; }

.frc-hh[b-86s8rwn466] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--d-ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .frc-hh[b-86s8rwn466] { font-size: 19px; }
}

.frc-iata[b-86s8rwn466] {
    font-size: 12px;
    color: var(--d-ink-3);
    font-weight: 500;
}

.frc-duration[b-86s8rwn466] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.frc-dur-lbl[b-86s8rwn466] {
    font-size: 11px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
}

.frc-dur-line[b-86s8rwn466] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 2px;
}

.frc-dot[b-86s8rwn466] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-line);
    flex-shrink: 0;
}

.frc-line[b-86s8rwn466] {
    flex: 1;
    height: 2px;
    background: var(--d-accent-grad);
    border-radius: 9999px;
    position: relative;
}

.frc-line-icon[b-86s8rwn466] {
    width: 14px;
    height: 14px;
    fill: var(--d-ink-3);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.frc-stops[b-86s8rwn466] {
    font-size: 10px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Meta row */
.frc-meta[b-86s8rwn466] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--d-line-2);
    flex-wrap: wrap;
}

.frc-flight-no[b-86s8rwn466] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 2px 8px;
    border-radius: 9999px;
}

.frc-baggage[b-86s8rwn466] {
    font-size: 10px;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .frc-baggage svg[b-86s8rwn466] { width: 12px; height: 12px; }

.frc-mock[b-86s8rwn466] {
    font-size: 9px;
    color: #a16207;
    background: #fef9c3;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 600;
}

/* "Điều kiện vé" link */
.frc-conditions-link[b-86s8rwn466] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #e85f00;
    background: #fff8f2;
    border: 1px solid #ffe0c7;
    padding: 2px 8px;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s ease;
}

.frc-conditions-link:hover[b-86s8rwn466] {
    background: #ffe8d6;
    color: #c2540a;
}

.frc-conditions-link .frc-chev[b-86s8rwn466] {
    transition: transform 0.15s ease;
}

.frc-conditions-link .frc-chev.is-up[b-86s8rwn466] {
    transform: rotate(180deg);
}

/* Conditions expand panel */
.frc-conditions-panel[b-86s8rwn466] {
    padding: 12px 16px 16px 16px;
    border-top: 1px dashed #ffe0c7;
    background: linear-gradient(to bottom, #fffbf6, white);
    cursor: default;
}

.frc-root.is-expanded[b-86s8rwn466] {
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.12);
}

/* Price pane */
.frc-price-pane[b-86s8rwn466] {
    flex-shrink: 0;
    min-width: 112px;
    padding: 10px 12px;
    background: var(--d-accent-grad-soft);
    border-left: 1px dashed color-mix(in srgb, var(--d-line) 30%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .frc-price-pane[b-86s8rwn466] { min-width: 144px; }
}

@media (min-width: 1024px) {
    .frc-price-pane[b-86s8rwn466] { min-width: 184px; }
}

.frc-price-wrap[b-86s8rwn466] { text-align: center; }

.frc-price[b-86s8rwn466] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--d-ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .frc-price[b-86s8rwn466] { font-size: 18px; }
}

.frc-price-unit[b-86s8rwn466] {
    margin: 0;
    font-size: 10px;
    color: var(--d-ink-3);
}

.frc-cta[b-86s8rwn466] {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--d-accent) 50%, transparent);
    background: var(--d-surface);
    color: var(--d-accent);
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
}

    .frc-cta:hover[b-86s8rwn466] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    }

    .frc-cta.is-selected[b-86s8rwn466] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    }
/* /src/Features/_Shared/Flight/FlightSearchResults.razor.rz.scp.css */
/* FlightSearchResults — Manager Dashboard v4 theme tokens */
.fsr-root[b-kym8pc0e79] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

.fsr-num[b-kym8pc0e79] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Alerts ─── */
.fsr-alert[b-kym8pc0e79] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
}

.fsr-alert-danger[b-kym8pc0e79] {
    border-color: #fecaca;
    background: #fef2f2;
}

    .fsr-alert-danger .fsr-alert-ico[b-kym8pc0e79] {
        color: #dc2626;
    }

.fsr-alert-warn[b-kym8pc0e79] {
    border-color: #fde68a;
    background: #fffbeb;
}

    .fsr-alert-warn .fsr-alert-ico[b-kym8pc0e79] {
        color: #d97706;
    }

.fsr-alert-ico[b-kym8pc0e79] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fsr-alert-body[b-kym8pc0e79] {
    flex: 1;
    min-width: 0;
}

    .fsr-alert-body p[b-kym8pc0e79] {
        margin: 0;
        font-size: 14px;
    }

    .fsr-alert-body .ttl[b-kym8pc0e79] {
        font-weight: 600;
        color: var(--d-ink);
    }

    .fsr-alert-body .desc[b-kym8pc0e79] {
        margin-top: 2px;
        color: var(--d-ink-2);
    }

.fsr-alert-action[b-kym8pc0e79] {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0 4px;
}

    .fsr-alert-action:hover[b-kym8pc0e79] {
        color: var(--d-ink);
    }

.fsr-alert-close[b-kym8pc0e79] {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    cursor: pointer;
    padding: 2px;
}

    .fsr-alert-close:hover[b-kym8pc0e79] {
        color: var(--d-ink);
    }

/* ─── 7-day price bar ─── */
.fsr-daybar[b-kym8pc0e79] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fsr-daybar-scroll[b-kym8pc0e79] {
    overflow-x: auto;
}

.fsr-daybar-grid[b-kym8pc0e79] {
    display: grid;
    grid-template-columns: repeat(7, minmax(68px, 1fr));
    min-width: 480px;
    background: var(--d-accent-grad);
}

.fsr-day[b-kym8pc0e79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    text-align: center;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: filter .15s, background .15s;
    font-family: inherit;
}

    .fsr-day:last-child[b-kym8pc0e79] {
        border-right: 0;
    }

    .fsr-day:hover:not(:disabled):not(.is-active):not(.is-past)[b-kym8pc0e79] {
        background: rgba(0, 0, 0, 0.08);
    }

.fsr-day-dow[b-kym8pc0e79] {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.92;
    line-height: 1.2;
}

.fsr-day-date[b-kym8pc0e79] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1px;
}

.fsr-day-price[b-kym8pc0e79] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

    .fsr-day-price.muted[b-kym8pc0e79] {
        color: rgba(255, 255, 255, 0.6);
    }

.fsr-day.is-past[b-kym8pc0e79] {
    background: #f1ece6;
    color: var(--d-ink-4);
    cursor: not-allowed;
    border-right-color: var(--d-line);
}

.fsr-day.is-active[b-kym8pc0e79] {
    background: var(--d-surface);
    color: var(--d-ink);
    box-shadow: inset 0 -2px 0 var(--d-accent), 0 2px 8px rgba(16, 24, 40, 0.06);
    z-index: 1;
    border-right-color: var(--d-line);
}

    .fsr-day.is-active .fsr-day-dow[b-kym8pc0e79] {
        color: var(--d-accent);
        font-weight: 600;
    }

    .fsr-day.is-active .fsr-day-price[b-kym8pc0e79] {
        color: var(--d-accent);
        font-weight: 600;
    }

/* ─── Search box wrapper ─── */
.fsr-searchbox[b-kym8pc0e79] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06);
    position: relative;
    z-index: 50;
}

.fsr-searchbox-close[b-kym8pc0e79] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid transparent;
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .fsr-searchbox-close svg[b-kym8pc0e79] {
        width: 13px;
        height: 13px;
    }

    .fsr-searchbox-close:hover[b-kym8pc0e79] {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
    }

/* ─── Trip phase tabs (round-trip) ─── */
.fsr-phase-tabs[b-kym8pc0e79] {
    display: flex;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-phase[b-kym8pc0e79] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    color: var(--d-ink-2);
}

    .fsr-phase:hover:not(:disabled):not(.is-active)[b-kym8pc0e79] {
        background: var(--d-surface-2);
    }

    .fsr-phase:disabled[b-kym8pc0e79] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.fsr-phase.is-active[b-kym8pc0e79] {
    border-bottom-color: var(--d-accent);
    background: var(--d-accent-soft);
}

.fsr-phase.is-done[b-kym8pc0e79] {
    border-bottom-color: var(--d-good);
    background: rgba(220, 252, 231, 0.45);
}

.fsr-phase-step[b-kym8pc0e79] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}

.fsr-phase.is-active .fsr-phase-step[b-kym8pc0e79] {
    background: var(--d-accent-grad);
    color: #fff;
}

.fsr-phase.is-done .fsr-phase-step[b-kym8pc0e79] {
    background: var(--d-good);
    color: #fff;
}

.fsr-phase-divider[b-kym8pc0e79] {
    width: 1px;
    background: var(--d-line);
    margin: 6px 0;
    flex-shrink: 0;
}

.fsr-phase-line[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    flex-wrap: wrap;
}

    .fsr-phase-line .lbl[b-kym8pc0e79] {
        font-weight: 600;
        color: var(--d-ink-2);
    }

.fsr-phase.is-active .fsr-phase-line .lbl[b-kym8pc0e79] {
    color: var(--d-accent);
}

.fsr-phase.is-done .fsr-phase-line .lbl[b-kym8pc0e79] {
    color: var(--d-good);
}

.fsr-phase-line .sep[b-kym8pc0e79] {
    color: var(--d-ink-4);
}

.fsr-phase-line .iata[b-kym8pc0e79] {
    color: var(--d-ink-3);
}

.fsr-phase-line .date[b-kym8pc0e79] {
    color: var(--d-ink-4);
}

.fsr-phase-sub[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

    .fsr-phase-sub .price[b-kym8pc0e79] {
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

/* ─── One-way indicator ─── */
.fsr-oneway[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px 12px;
}

.fsr-oneway-ico[b-kym8pc0e79] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563eb;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fsr-oneway .lbl[b-kym8pc0e79] {
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
}

.fsr-oneway .iata[b-kym8pc0e79] {
    font-size: 11px;
    color: var(--d-ink-3);
}

.fsr-oneway .sep[b-kym8pc0e79] {
    color: var(--d-ink-4);
}

.fsr-oneway .date[b-kym8pc0e79] {
    font-size: 11px;
    color: var(--d-ink-4);
}

/* ─── Header / route summary ─── */
.fsr-route[b-kym8pc0e79] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fsr-route-row[b-kym8pc0e79] {
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fsr-route-info[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--d-ink-2);
}

.fsr-route-city[b-kym8pc0e79] {
    font-weight: 700;
    color: var(--d-ink);
}

.fsr-route-iata[b-kym8pc0e79] {
    color: var(--d-accent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: var(--d-accent-soft);
    padding: 1px 6px;
    border-radius: 5px;
}

.fsr-route-sep[b-kym8pc0e79] {
    color: var(--d-ink-4);
    margin: 0 2px;
}

.fsr-plane-ico[b-kym8pc0e79] {
    width: 15px;
    height: 15px;
    fill: var(--d-accent);
    flex-shrink: 0;
    margin: 0 4px;
}

.fsr-route-meta[b-kym8pc0e79] {
    color: var(--d-ink-3);
    font-size: 12px;
}

.fsr-trip-badge[b-kym8pc0e79] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.fsr-trip-badge.round[b-kym8pc0e79] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border-color: #ffe0c7;
}

.fsr-trip-badge.oneway[b-kym8pc0e79] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.fsr-route-actions[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsr-link-btn[b-kym8pc0e79] {
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
}

    .fsr-link-btn:hover[b-kym8pc0e79] {
        color: #e85f00;
    }

.fsr-count-pill[b-kym8pc0e79] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}

.fsr-route-summary[b-kym8pc0e79] {
    padding: 4px 16px 8px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .fsr-route-summary strong[b-kym8pc0e79] {
        color: var(--d-ink);
        font-weight: 600;
    }

/* ─── Back-to-top floating button (desktop + mobile) ─── */
/* Vị trí mặc định = desktop (góc dưới-phải, FAB lọc bị ẩn nên không vướng).
   Hiện/ẩn do JS bật/tắt thuộc tính data-visible theo scroll (xem window.fsrBackToTop). */
.fsr-totop[b-kym8pc0e79] {
    position: fixed;
    right: 16px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 44;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -4px rgba(16, 24, 40, 0.25), 0 1px 3px rgba(16, 24, 40, 0.12);
    cursor: pointer;
    /* Che máy bay khi nó "bay" ra ngoài mép tròn để hiệu ứng gọn trong nút */
    overflow: hidden;
    /* Ẩn mặc định — JS thêm data-visible khi cuộn quá 400px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s, bottom .2s ease, color .12s, border-color .12s;
}

    .fsr-totop[data-visible][b-kym8pc0e79] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .fsr-totop:hover[b-kym8pc0e79] {
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .fsr-totop:active[b-kym8pc0e79] {
        transform: scale(0.94);
    }

    .fsr-totop svg[b-kym8pc0e79] {
        width: 19px;
        height: 19px;
        /* Lúc nghỉ: máy bay nhấp nhô nhẹ như đang lơ lửng */
        animation: fsrPlaneBob-b-kym8pc0e79 2.6s ease-in-out infinite;
    }

    /* Hover: máy bay "cất cánh" bay vọt lên khỏi nút rồi xuất hiện lại từ dưới — loop liên tục */
    .fsr-totop:hover svg[b-kym8pc0e79] {
        animation: fsrPlaneFly-b-kym8pc0e79 .75s ease-in infinite;
    }

    /* Đã chọn chuyến → có thanh "Tiếp tục" ở đáy: nâng nút lên trên thanh đó (desktop) */
    .fsr-totop.has-bar[b-kym8pc0e79] {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

@keyframes fsrPlaneBob-b-kym8pc0e79 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes fsrPlaneFly-b-kym8pc0e79 {
    0% { transform: translateY(0); opacity: 1; }
    55% { transform: translateY(-150%); opacity: 0; }
    56% { transform: translateY(150%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Tôn trọng người dùng tắt chuyển động */
@media (prefers-reduced-motion: reduce) {
    .fsr-totop svg[b-kym8pc0e79],
    .fsr-totop:hover svg[b-kym8pc0e79] {
        animation: none;
    }
}

@media (max-width: 767px) {
    /* Mobile có FAB lọc (52px) ở góc dưới-phải → xếp nút lên-đầu-trang phía TRÊN nó */
    .fsr-totop[b-kym8pc0e79] {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

        .fsr-totop.has-bar[b-kym8pc0e79] {
            bottom: calc(152px + env(safe-area-inset-bottom, 0px));
        }
}

/* ─── Mobile filter: floating button (FAB) + bottom sheet ─── */
/* Hiển thị/ẩn điều khiển hoàn toàn bằng media query (không dùng Tailwind md:hidden) —
   vì scoped CSS có specificity cao hơn util nên md:hidden sẽ bị display:flex ghi đè. */
.fsr-filter-fab[b-kym8pc0e79],
.fsr-sheet-overlay[b-kym8pc0e79],
.fsr-sheet[b-kym8pc0e79] {
    display: none;
}

@media (max-width: 767px) {
    .fsr-filter-fab[b-kym8pc0e79] {
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 45;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 0;
        background: var(--d-accent-grad);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 16px -4px rgba(255, 107, 0, 0.45), 0 2px 6px rgba(16, 24, 40, 0.18);
        cursor: pointer;
        transition: bottom .2s ease, transform .12s ease;
    }

        .fsr-filter-fab:active[b-kym8pc0e79] {
            transform: scale(0.94);
        }

        .fsr-filter-fab svg[b-kym8pc0e79] {
            width: 22px;
            height: 22px;
        }

        /* Đã chọn chuyến → có thanh "Tiếp tục" (.fsr-sticky-bar ~60px + 12px) ở đáy:
           đẩy FAB lên trên thanh đó để không che nhau. */
        .fsr-filter-fab.has-bar[b-kym8pc0e79] {
            bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        }

    .fsr-filter-fab-badge[b-kym8pc0e79] {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 999px;
        background: #fff;
        color: var(--d-accent);
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
        border: 1.5px solid var(--d-accent-soft);
        font-variant-numeric: tabular-nums;
    }

    .fsr-sheet-overlay[b-kym8pc0e79] {
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, 0.45);
        z-index: 60;
        display: block;
        animation: fsrSheetFade-b-kym8pc0e79 .2s ease;
    }

    .fsr-sheet[b-kym8pc0e79] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 61;
        background: var(--d-surface);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.20);
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        animation: fsrSheetUp-b-kym8pc0e79 .26s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes fsrSheetFade-b-kym8pc0e79 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fsrSheetUp-b-kym8pc0e79 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.fsr-sheet-grip[b-kym8pc0e79] {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--d-line);
    margin: 8px auto 2px;
    flex-shrink: 0;
}

.fsr-sheet-hd[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

    .fsr-sheet-hd h4[b-kym8pc0e79] {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--d-ink);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .fsr-sheet-hd h4 svg[b-kym8pc0e79] {
            color: var(--d-accent);
        }

.fsr-sheet-hd-actions[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fsr-sheet-close[b-kym8pc0e79] {
    background: var(--d-surface-2);
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-ink-3);
    cursor: pointer;
    flex-shrink: 0;
}

    .fsr-sheet-close:hover[b-kym8pc0e79] {
        color: var(--d-ink);
    }

.fsr-sheet-body[b-kym8pc0e79] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px;
}

.fsr-sheet-foot[b-kym8pc0e79] {
    flex-shrink: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
}

    /* Nút Áp dụng đã nằm trong foot có padding riêng — bỏ margin-top mặc định của .fsr-btn-block */
    .fsr-sheet-foot .fsr-btn-block[b-kym8pc0e79] {
        margin-top: 0;
    }

.fsr-btn-accent[b-kym8pc0e79] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s;
}

    .fsr-btn-accent:hover[b-kym8pc0e79] {
        background: var(--d-accent-grad-hover);
    }

.fsr-btn-block[b-kym8pc0e79] {
    width: 100%;
    margin-top: 16px;
}

/* ─── Two-column layout ─── */
.fsr-layout[b-kym8pc0e79] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.fsr-results[b-kym8pc0e79] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Chừa khoảng dưới cho .fsr-sticky-bar (fixed) — tránh che row cuối */
    padding-bottom: 96px;
}

    /* Chưa chọn chuyến → không có thanh "Tiếp tục" → thu nhỏ padding đáy để bớt khoảng trống */
    .fsr-results.no-bar[b-kym8pc0e79] {
        padding-bottom: 24px;
    }

.fsr-sidebar[b-kym8pc0e79] {
    width: 288px;
    flex-shrink: 0;
    position: sticky;
    /* Offset tránh fixed header (~80px) + chừa thanh "Tiếp tục" cố định ở đáy (88px).
       Là cột flex giới hạn theo viewport: panel "Chuyến đã chọn" cố định trên, thẻ Lọc
       co giãn và cuộn phần còn lại — không khối nào bị che/tràn. */
    top: 88px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Luôn kéo dài gần chân màn hình (chừa 24px), không co lại khi chọn chuyến —
       thanh "Tiếp tục" nằm giữa (fixed, min(960px)), không che cột sidebar bên phải. */
    max-height: calc(100vh - 88px - 24px);
    /* "Rail" xám nhạt bao quanh → cột phải là VÙNG CÔNG CỤ phụ, tách biệt rõ với
       danh sách chuyến bay (thẻ trắng nổi bóng) bên trái. */
    background: #eceff4;
    border: 1px solid #e3e7ee;
    border-radius: 14px;
    padding: 10px;
}

@media (max-width: 767px) {
    .fsr-sidebar[b-kym8pc0e79] {
        display: none;
    }
}

.fsr-sidebar-card[b-kym8pc0e79] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Phẳng (không bóng) — là widget bên trong rail, không "nổi" như thẻ chuyến bay bên trái */
    /* Chiếm phần cao còn lại của cột sidebar và cuộn nội bộ (chiều cao tổng do .fsr-sidebar ràng).
       min-height:0 cho phép co trong flex column để body cuộn được. Tiêu đề ghim, body cuộn. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Panel "Chuyến đã chọn" (sidebar desktop) ── */
.fsr-selsum[b-kym8pc0e79] {
    flex-shrink: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-selsum-hd[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-bottom: 1px solid #ffe0c7;
    background: var(--d-accent-soft);
}

    .fsr-selsum-hd svg[b-kym8pc0e79] {
        color: var(--d-accent);
        flex-shrink: 0;
    }

    .fsr-selsum-hd h4[b-kym8pc0e79] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-accent);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.fsr-selsum-body[b-kym8pc0e79] {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fsr-selsum-leg[b-kym8pc0e79] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .fsr-selsum-leg + .fsr-selsum-leg[b-kym8pc0e79] {
        padding-top: 10px;
        border-top: 1px solid var(--d-line-2);
    }

    .fsr-selsum-leg .hd[b-kym8pc0e79] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .fsr-selsum-leg .lbl[b-kym8pc0e79] {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--d-ink-3);
    }

    .fsr-selsum-leg .route[b-kym8pc0e79] {
        font-size: 11px;
        font-weight: 700;
        color: var(--d-ink);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

        .fsr-selsum-leg .route .ar[b-kym8pc0e79] {
            color: var(--d-accent);
        }

    /* Hãng bay + số hiệu (hàng đầu, bên phải nhãn ĐI/VỀ) */
    .fsr-selsum-leg .air[b-kym8pc0e79] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        font-size: 11px;
        color: var(--d-ink-3);
        overflow: hidden;
    }

        .fsr-selsum-leg .air img[b-kym8pc0e79] {
            height: 16px;
            width: auto;
            flex-shrink: 0;
        }

        .fsr-selsum-leg .air span[b-kym8pc0e79] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fsr-selsum-leg .air b[b-kym8pc0e79] {
            flex-shrink: 0;
            color: var(--d-ink-2);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

    /* Hàng hành trình: giờ đầu | đường nối (máy bay) | giờ cuối */
    .fsr-selsum-leg .trip[b-kym8pc0e79] {
        display: grid;
        grid-template-columns: auto minmax(52px, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 3px;
    }

        .fsr-selsum-leg .ep .t[b-kym8pc0e79] {
            display: block;
            font-family: 'Inter Tight', 'Inter', sans-serif;
            font-size: 17px;
            font-weight: 700;
            color: var(--d-ink);
            line-height: 1.1;
            letter-spacing: -0.015em;
            font-variant-numeric: tabular-nums;
        }

        .fsr-selsum-leg .ep .c[b-kym8pc0e79] {
            display: block;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--d-ink-3);
            margin-top: 1px;
        }

        .fsr-selsum-leg .ep.end[b-kym8pc0e79] {
            text-align: right;
        }

        .fsr-selsum-leg .path[b-kym8pc0e79] {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

            .fsr-selsum-leg .path .dur[b-kym8pc0e79] {
                font-size: 9.5px;
                font-weight: 500;
                color: var(--d-ink-3);
                white-space: nowrap;
            }

            .fsr-selsum-leg .path .line[b-kym8pc0e79] {
                position: relative;
                width: 100%;
                height: 1.5px;
                background: linear-gradient(to right, transparent, var(--d-accent) 18%, var(--d-accent) 82%, transparent);
            }

                .fsr-selsum-leg .path .line[b-kym8pc0e79]::before,
                .fsr-selsum-leg .path .line[b-kym8pc0e79]::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    width: 4px;
                    height: 4px;
                    border-radius: 9999px;
                    background: var(--d-accent);
                    transform: translateY(-50%);
                }

                .fsr-selsum-leg .path .line[b-kym8pc0e79]::before { left: 0; }
                .fsr-selsum-leg .path .line[b-kym8pc0e79]::after { right: 0; }

                .fsr-selsum-leg .path .pl[b-kym8pc0e79] {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: var(--d-accent);
                    background: var(--d-surface);
                    padding: 0 3px;
                    display: inline-flex;
                }

                    .fsr-selsum-leg .path .pl svg[b-kym8pc0e79] {
                        width: 11px;
                        height: 11px;
                        display: block;
                    }

            .fsr-selsum-leg .path .st[b-kym8pc0e79] {
                font-size: 9px;
                font-weight: 600;
                color: var(--d-good);
                white-space: nowrap;
            }

    /* Chiều về chưa chọn — dòng gợi ý mờ */
    .fsr-selsum-leg.pending .pending-txt[b-kym8pc0e79] {
        font-size: 11px;
        font-style: italic;
        color: var(--d-ink-4);
    }

.fsr-selsum-total[b-kym8pc0e79] {
    padding-top: 8px;
    border-top: 1px dashed var(--d-line);
}

    .fsr-selsum-total .row[b-kym8pc0e79] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }

    .fsr-selsum-total .lbl[b-kym8pc0e79] {
        font-size: 12px;
        color: var(--d-ink-3);
    }

    .fsr-selsum-total .amt-wrap[b-kym8pc0e79] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.15;
    }

    /* Giá gốc trước giảm — gạch ngang, mờ, nằm trên giá đã giảm */
    .fsr-selsum-total .strike[b-kym8pc0e79] {
        font-size: 11px;
        color: var(--d-ink-4);
        text-decoration: line-through;
        font-variant-numeric: tabular-nums;
    }

    /* Dòng "Tiết kiệm X₫" — màu xanh báo có giảm giá */
    .fsr-selsum-total .save[b-kym8pc0e79] {
        margin-top: 3px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-good);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    /* Ghi chú dưới tổng: "Chiều đi + Chiều về" (tổng 2 chiều) hoặc "Đã gồm cả 2 chiều" (Combine) */
    .fsr-selsum-total .note[b-kym8pc0e79] {
        margin-top: 3px;
        font-size: 10.5px;
        color: var(--d-ink-3);
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .fsr-selsum-total .note.combined[b-kym8pc0e79] {
            color: var(--d-accent);
        }

        .fsr-selsum-total .note svg[b-kym8pc0e79] {
            flex-shrink: 0;
        }

    .fsr-selsum-total .amt[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-accent);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

        .fsr-selsum-total .amt .unit[b-kym8pc0e79] {
            font-size: 11px;
            font-weight: 400;
        }

.fsr-sidebar-hd[b-kym8pc0e79] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Tiêu đề lọc luôn cố định — không cuộn cùng body */
    flex-shrink: 0;
}

    .fsr-sidebar-hd h4[b-kym8pc0e79] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.fsr-sidebar-body[b-kym8pc0e79] {
    /* Chiếm phần cao còn lại của card và cuộn — min-height:0 cho phép co trong flex column,
       nếu thiếu sẽ không bao giờ cuộn được. overscroll-behavior chặn cuộn lan ra trang. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
}

/* ─── Search progress card ─── */
.fsr-progress[b-kym8pc0e79] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05);
}

.fsr-progress-accent[b-kym8pc0e79] {
    height: 3px;
    background: var(--d-accent-grad);
    background-size: 200% 100%;
    animation: fsr-grad-slide-b-kym8pc0e79 2s linear infinite;
}

@keyframes fsr-grad-slide-b-kym8pc0e79 {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.fsr-progress-body[b-kym8pc0e79] {
    padding: 12px 16px 10px;
}

.fsr-progress-head[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fsr-radar[b-kym8pc0e79] {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .fsr-radar .pulse[b-kym8pc0e79] {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(255, 107, 0, 0.15);
        animation: fsr-radar-b-kym8pc0e79 1.6s ease-out infinite;
    }

    .fsr-radar .pulse2[b-kym8pc0e79] {
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: rgba(255, 107, 0, 0.10);
        animation: fsr-radar-b-kym8pc0e79 1.6s ease-out 0.4s infinite;
    }

    .fsr-radar svg[b-kym8pc0e79] {
        width: 16px;
        height: 16px;
        color: var(--d-accent);
        position: relative;
        z-index: 1;
    }

@keyframes fsr-radar-b-kym8pc0e79 {
    0% { transform: scale(0.5); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 0; }
}

.fsr-progress-title[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .fsr-progress-title p[b-kym8pc0e79] {
        margin: 0;
    }

    .fsr-progress-title .ttl[b-kym8pc0e79] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .fsr-progress-title .sub[b-kym8pc0e79] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 1px;
    }

.fsr-pct[b-kym8pc0e79] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff7d1f, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

    .fsr-pct .unit[b-kym8pc0e79] {
        font-size: 14px;
    }

.fsr-track[b-kym8pc0e79] {
    position: relative;
    height: 8px;
    background: var(--d-surface-2);
    border-radius: 999px;
    overflow: visible;
    margin-bottom: 12px;
}

.fsr-track-fill[b-kym8pc0e79] {
    height: 100%;
    border-radius: 999px;
    background: var(--d-accent-grad);
    transition: width .7s ease-out;
    position: relative;
    overflow: hidden;
}

    .fsr-track-fill[b-kym8pc0e79]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
        animation: fsr-shimmer-b-kym8pc0e79 1.2s ease-in-out infinite;
    }

@keyframes fsr-shimmer-b-kym8pc0e79 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fsr-plane-marker[b-kym8pc0e79] {
    position: absolute;
    top: -10px;
    transition: left .7s ease-out;
    z-index: 2;
}

    .fsr-plane-marker svg[b-kym8pc0e79] {
        width: 18px;
        height: 18px;
        color: var(--d-accent);
        filter: drop-shadow(0 1px 2px rgba(255, 107, 0, 0.3));
        transform: rotate(90deg);
        animation: fsr-plane-float-b-kym8pc0e79 1s ease-in-out infinite;
    }

@keyframes fsr-plane-float-b-kym8pc0e79 {
    0%, 100% { transform: rotate(90deg) translateY(0); }
    50% { transform: rotate(90deg) translateY(-3px); }
}

.fsr-airline-chips[b-kym8pc0e79] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fsr-airline-chip[b-kym8pc0e79] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border: 1px solid #ffe0c7;
}

    .fsr-airline-chip.is-done[b-kym8pc0e79] {
        background: #ecfdf5;
        color: #15803d;
        border-color: #bbf7d0;
    }

    .fsr-airline-chip.is-error[b-kym8pc0e79] {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .fsr-airline-chip img[b-kym8pc0e79] {
        height: 12px;
        width: auto;
    }

.fsr-spin[b-kym8pc0e79] {
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fsr-spin-b-kym8pc0e79 0.6s linear infinite;
}

@keyframes fsr-spin-b-kym8pc0e79 {
    to { transform: rotate(360deg); }
}

/* ─── Empty / no-result ─── */
.fsr-empty[b-kym8pc0e79] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 16px;
    text-align: center;
    color: var(--d-ink-3);
}

    .fsr-empty svg[b-kym8pc0e79] {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        color: var(--d-ink-4);
    }

    .fsr-empty h3[b-kym8pc0e79] {
        margin: 0 0 4px;
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 15px;
        font-weight: 600;
        color: var(--d-ink);
        letter-spacing: -0.02em;
    }

    .fsr-empty p[b-kym8pc0e79] {
        margin: 0;
        font-size: 14px;
    }

/* ─── Flight result list ─── */
.fsr-list[b-kym8pc0e79] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fsr-flight[b-kym8pc0e79] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nghỉ nhẹ để mỗi chuyến bay tự nổi trên nền web (vùng kết quả không còn thẻ bao ngoài) */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
    transition: border-color .25s ease, box-shadow .25s ease;
}

    /* Đã chọn: viền cam + vạch cam đậm bên trái (inset) làm cue mạnh, không lẫn với hover */
    .fsr-flight.is-selected[b-kym8pc0e79] {
        border-color: var(--d-accent);
        box-shadow: inset 3px 0 0 var(--d-accent), 0 4px 12px -2px rgba(255, 107, 0, 0.18);
    }

    /* Hover nổi nhẹ — bóng sâu + viền cam nhạt (không dùng transform để tránh
       bẫy containing-block cho popup fixed của FareCardConditions) */
    .fsr-flight:hover[b-kym8pc0e79] {
        border-color: #ffd9bd;
        box-shadow: 0 8px 20px -10px rgba(16, 24, 40, 0.22);
    }

    .fsr-flight.is-selected:hover[b-kym8pc0e79] {
        border-color: var(--d-accent);
        box-shadow: inset 3px 0 0 var(--d-accent), 0 8px 20px -10px rgba(16, 24, 40, 0.22);
    }

.fsr-flight-row[b-kym8pc0e79] {
    cursor: pointer;
    transition: background .2s ease;
}

/* ─── Animation expand: slide-down + fade nhẹ khi click chọn chuyến ─── */
/* Không đặt `transform` ở keyframe `to`: với fill-mode `both`, translateY(0) vẫn là
   một transform != none → biến container thành containing-block cho popup `position:fixed`
   bên trong (tooltip cảnh báo chính sách, FareCardConditions) khiến tooltip bị .fsr-flight
   overflow:hidden CẮT MẤT. Dùng max-height làm hiệu ứng trượt để khi kết thúc transform = none. */
@keyframes fsrExpandIn-b-kym8pc0e79 {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 1200px;
    }
}

.fsr-fares[b-kym8pc0e79],
.fsr-toggles[b-kym8pc0e79],
.fsr-itin[b-kym8pc0e79],
.fsr-price-detail[b-kym8pc0e79] {
    animation: fsrExpandIn-b-kym8pc0e79 .28s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: top center;
    /* KHÔNG will-change: transform — sẽ tạo containing-block bẫy popup fixed vĩnh viễn */
    will-change: opacity, max-height;
}

/* Stagger nhẹ — toggle bar xuất hiện sau fare cards 60ms để mắt theo dõi tự nhiên */
.fsr-toggles[b-kym8pc0e79] {
    animation-delay: .06s;
}

/* Itin/Price detail có animation riêng (mở từ toggle bar) — không stagger */
.fsr-itin[b-kym8pc0e79],
.fsr-price-detail[b-kym8pc0e79] {
    animation-duration: .22s;
}

/* Chevron expand icon — rotate mượt khi mở/đóng */
.fsr-flight-mobile-expand svg[b-kym8pc0e79],
.fsr-flight-desktop-expand svg[b-kym8pc0e79],
.fsr-flight-price .fares-toggle svg[b-kym8pc0e79],
.fsr-toggle .chev[b-kym8pc0e79] {
    transition: transform .25s ease;
}

    .fsr-flight-row:hover[b-kym8pc0e79] {
        background: var(--d-surface-2);
    }

.fsr-flight.is-selected .fsr-flight-row[b-kym8pc0e79] {
    background: var(--d-accent-soft);
}

.fsr-flight-mobile[b-kym8pc0e79] {
    padding: 12px;
}

@media (min-width: 768px) {
    .fsr-flight-mobile[b-kym8pc0e79] {
        display: none;
    }
}

.fsr-flight-mobile-top[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fsr-air[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .fsr-air img[b-kym8pc0e79] {
        height: 16px;
        width: auto;
        flex-shrink: 0;
    }

    .fsr-air .name[b-kym8pc0e79] {
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-2);
        line-height: 1.3;
        /* Hiện đủ tên hãng, xuống dòng khi hẹp thay vì cắt bằng "…". */
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

.fsr-flightno[b-kym8pc0e79] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

.fsr-price-min[b-kym8pc0e79] {
    color: var(--d-ink);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

    .fsr-price-min .unit[b-kym8pc0e79] {
        font-size: 10px;
        font-weight: 400;
    }

.fsr-time-route[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsr-time-block[b-kym8pc0e79] {
    flex-shrink: 0;
}

    .fsr-time-block .t[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .fsr-time-block .iata[b-kym8pc0e79] {
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.03em;
        color: var(--d-accent);
        background: var(--d-accent-soft);
        padding: 0 5px;
        border-radius: 4px;
        margin-top: 3px;
    }

.fsr-time-block.right[b-kym8pc0e79] {
    text-align: right;
}

.fsr-leg[b-kym8pc0e79] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

    .fsr-leg .dur[b-kym8pc0e79],
    .fsr-leg .stops[b-kym8pc0e79] {
        font-size: 10.5px;
        color: var(--d-ink-3);
        line-height: 1;
    }

    /* Bay thẳng = điểm cộng → nhấn xanh nhẹ; chuyến có điểm dừng giữ trung tính */
    .fsr-leg .stops.direct[b-kym8pc0e79] {
        color: var(--d-good);
        font-weight: 600;
    }

.fsr-leg-line[b-kym8pc0e79] {
    width: 100%;
    display: flex;
    align-items: center;
    height: 10px;
    margin: 2px 0;
}

    .fsr-leg-line .dot[b-kym8pc0e79] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--d-accent);
        flex-shrink: 0;
    }

    .fsr-leg-line .ln[b-kym8pc0e79] {
        flex: 1;
        height: 2px;
        background-image: repeating-linear-gradient(to right, #ffd0ac 0 5px, transparent 5px 9px);
        position: relative;
        margin: 0 3px;
    }

    .fsr-leg-line .ln svg[b-kym8pc0e79] {
        width: 12px;
        height: 12px;
        fill: var(--d-accent);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.fsr-flight-mobile-expand[b-kym8pc0e79] {
    flex-shrink: 0;
    margin-left: 4px;
    text-align: center;
}

    .fsr-flight-mobile-expand .fc[b-kym8pc0e79] {
        font-size: 9px;
        color: var(--d-accent);
        font-weight: 500;
        display: block;
    }

    .fsr-flight-mobile-expand svg[b-kym8pc0e79] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-3);
        margin: 0 auto;
        transition: transform .2s;
    }

.fsr-flight-row.is-expanded .fsr-flight-mobile-expand svg[b-kym8pc0e79],
.fsr-flight-row.is-expanded .fsr-flight-desktop-expand svg[b-kym8pc0e79] {
    transform: rotate(180deg);
}

/* desktop layout */
.fsr-flight-desktop[b-kym8pc0e79] {
    display: none;
    align-items: center;
}

@media (min-width: 768px) {
    .fsr-flight-desktop[b-kym8pc0e79] {
        display: flex;
    }
}

.fsr-flight-airline[b-kym8pc0e79] {
    /* Đủ rộng để tên hãng dài nhất ("Vietravel Airlines") nằm gọn 1 dòng
       ở mức hẹp nhất; rộng thêm theo viewport. */
    width: clamp(184px, 14vw, 240px);
    flex-shrink: 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fsr-flight-airline img[b-kym8pc0e79] {
        height: 22px;
        width: auto;
        max-width: 40px;
        /* Giữ đúng tỉ lệ logo — tránh bị bóp ngang khi logo rộng chạm max-width. */
        object-fit: contain;
        flex-shrink: 0;
    }

    .fsr-flight-airline .name[b-kym8pc0e79] {
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink-2);
        line-height: 1.25;
        /* Luôn hiện đủ tên hãng — xuống dòng khi hẹp, KHÔNG cắt chữ. */
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

.fsr-flight-time[b-kym8pc0e79] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    min-width: 0;
    max-width: 480px;
    margin: 0 auto;
}

    .fsr-flight-time .t[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .fsr-flight-time .iata[b-kym8pc0e79] {
        display: inline-block;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.03em;
        color: var(--d-accent);
        background: var(--d-accent-soft);
        padding: 0 6px;
        border-radius: 5px;
        margin-top: 3px;
    }

.fsr-flight-no[b-kym8pc0e79] {
    width: 96px;
    flex-shrink: 0;
    text-align: center;
    padding: 8px 4px;
}

    .fsr-flight-no .pill[b-kym8pc0e79] {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-2);
        background: var(--d-surface-2);
        padding: 2px 10px;
        border-radius: 999px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

.fsr-flight-price[b-kym8pc0e79] {
    width: 176px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    /* Khối giá = vùng quyết định: nền gradient ấm + đường ngăn nét đứt tông cam → gắn thương hiệu */
    border-left: 1px dashed #ffd0ac;
    background: var(--d-accent-grad-soft);
}

    .fsr-flight-price .from[b-kym8pc0e79] {
        font-size: 10px;
        color: var(--d-ink-3);
        line-height: 1;
    }

    .fsr-flight-price .strike[b-kym8pc0e79] {
        font-size: 10px;
        color: var(--d-ink-4);
        text-decoration: line-through;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .fsr-flight-price .amt[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 19px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
    }

        .fsr-flight-price .amt .unit[b-kym8pc0e79] {
            font-size: 11px;
            font-weight: 400;
            vertical-align: top;
        }

    .fsr-flight-price .fares-toggle[b-kym8pc0e79] {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 10px;
        color: var(--d-ink);
        font-weight: 500;
        line-height: 1;
    }

        .fsr-flight-price .fares-toggle svg[b-kym8pc0e79] {
            width: 12px;
            height: 12px;
            transition: transform .2s;
        }

.fsr-flight-row.is-expanded .fsr-flight-price .fares-toggle svg[b-kym8pc0e79] {
    transform: rotate(180deg);
}

.fsr-flight-price .per[b-kym8pc0e79] {
    font-size: 10px;
    color: var(--d-ink-4);
    line-height: 1;
}

/* ─── Fare class cards ─── */
.fsr-fares[b-kym8pc0e79] {
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    padding: 10px 12px;
}

.fsr-fares-wrap[b-kym8pc0e79] {
    position: relative;
}

.fsr-fares-arrow[b-kym8pc0e79] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    color: var(--d-accent);
    padding: 0;
}

    .fsr-fares-arrow:hover[b-kym8pc0e79] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
    }

    .fsr-fares-arrow.left[b-kym8pc0e79] {
        left: -4px;
    }

    .fsr-fares-arrow.right[b-kym8pc0e79] {
        right: -4px;
    }

    .fsr-fares-arrow svg[b-kym8pc0e79] {
        width: 14px;
        height: 14px;
    }

.fsr-fares-scroll[b-kym8pc0e79] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

    .fsr-fares-scroll[b-kym8pc0e79]::-webkit-scrollbar {
        display: none;
    }

.fsr-fare[b-kym8pc0e79] {
    position: relative;
    width: 160px;
    flex-shrink: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

@media (min-width: 768px) {
    .fsr-fare[b-kym8pc0e79] {
        width: 208px;
    }
}

    .fsr-fare:hover:not(.is-disabled):not(.is-selected)[b-kym8pc0e79] {
        border-color: #ffe0c7;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    }

.fsr-fare.is-selected[b-kym8pc0e79] {
    border-color: var(--d-accent);
    box-shadow: 0 4px 12px -2px rgba(255, 107, 0, 0.20);
}

.fsr-fare.is-disabled[b-kym8pc0e79] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.5);
    background: #fef2f2;
    border-color: #fecaca;
}

.fsr-fare-banner[b-kym8pc0e79] {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 2;
    background: var(--d-danger);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.25;
}

    .fsr-fare-banner svg[b-kym8pc0e79] {
        width: 11px;
        height: 11px;
        display: inline;
        margin-right: 2px;
        vertical-align: -2px;
    }

.fsr-fare-head[b-kym8pc0e79] {
    padding: 10px 12px 8px;
    text-align: center;
    border-bottom: 1px solid var(--d-line-2);
}

.fsr-fare.is-selected .fsr-fare-head[b-kym8pc0e79] {
    border-bottom-color: #ffe0c7;
}

.fsr-radio[b-kym8pc0e79] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--d-line);
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsr-fare.is-selected .fsr-radio[b-kym8pc0e79] {
    border-color: var(--d-accent);
}

.fsr-radio-dot[b-kym8pc0e79] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d-accent);
}

.fsr-fare-strike[b-kym8pc0e79] {
    font-size: 10px;
    color: var(--d-ink-4);
    text-decoration: line-through;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fsr-fare-price[b-kym8pc0e79] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.fsr-fare.is-selected .fsr-fare-price[b-kym8pc0e79] {
    color: var(--d-accent);
}

.fsr-fare-price .unit[b-kym8pc0e79] {
    font-size: 10px;
    font-weight: 400;
}

.fsr-fare-class[b-kym8pc0e79] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.fsr-fare.is-selected .fsr-fare-class[b-kym8pc0e79] {
    color: var(--d-accent);
}

.fsr-fare-body[b-kym8pc0e79] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

.fsr-fare-body-row[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fsr-fare-body-row svg[b-kym8pc0e79] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
        flex-shrink: 0;
    }

    .fsr-fare-body-row strong[b-kym8pc0e79] {
        color: var(--d-ink-2);
        font-weight: 600;
    }

/* Khối điều kiện vé bên trong fare card — ngăn cách bằng border nét đứt */
.fsr-fare-cond[b-kym8pc0e79] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--d-line-2);
}

/* ─── Toggle bar (itinerary / price detail) ─── */
.fsr-toggles[b-kym8pc0e79] {
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface);
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.fsr-toggle[b-kym8pc0e79] {
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .fsr-toggle:hover[b-kym8pc0e79] {
        background: var(--d-surface-2);
        color: var(--d-ink-2);
    }

    .fsr-toggle.is-on[b-kym8pc0e79] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .fsr-toggle svg[b-kym8pc0e79] {
        width: 14px;
        height: 14px;
    }

    .fsr-toggle .chev[b-kym8pc0e79] {
        width: 12px;
        height: 12px;
        transition: transform .2s;
    }

    .fsr-toggle.is-on .chev[b-kym8pc0e79] {
        transform: rotate(180deg);
    }

/* ─── Itinerary detail ─── */
.fsr-itin[b-kym8pc0e79] {
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    padding: 12px 20px;
}

.fsr-timeline[b-kym8pc0e79] {
    position: relative;
    padding-left: 20px;
}

    .fsr-timeline[b-kym8pc0e79]::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 8px;
        bottom: 8px;
        width: 1px;
        background: #ffe0c7;
    }

.fsr-tl-row[b-kym8pc0e79] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 8px;
}

.fsr-tl-dot[b-kym8pc0e79] {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--d-accent);
    background: var(--d-surface);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsr-tl-dot .inner[b-kym8pc0e79] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-accent);
}

.fsr-tl-dot.last[b-kym8pc0e79] {
    background: var(--d-accent);
}

    .fsr-tl-dot.last svg[b-kym8pc0e79] {
        width: 8px;
        height: 8px;
        color: #fff;
    }

.fsr-tl-dot.transit[b-kym8pc0e79] {
    border-color: var(--d-line);
}

    .fsr-tl-dot.transit .inner[b-kym8pc0e79] {
        background: var(--d-ink-4);
    }

.fsr-tl-info[b-kym8pc0e79] {
    flex: 1;
    min-width: 0;
}

    .fsr-tl-info .head[b-kym8pc0e79] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

        .fsr-tl-info .head .t[b-kym8pc0e79] {
            font-family: 'Inter Tight', 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--d-ink);
            letter-spacing: -0.02em;
        }

        .fsr-tl-info .head .iata[b-kym8pc0e79] {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.03em;
            color: var(--d-accent);
            background: var(--d-accent-soft);
            padding: 0 5px;
            border-radius: 4px;
        }

        .fsr-tl-info .head .city[b-kym8pc0e79] {
            font-size: 11px;
            color: var(--d-ink-3);
        }

    .fsr-tl-info .meta[b-kym8pc0e79] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        color: var(--d-ink-4);
        margin-top: 2px;
    }

.fsr-tl-leg[b-kym8pc0e79] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-left: 4px;
}

    .fsr-tl-leg .info[b-kym8pc0e79] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        color: var(--d-ink-3);
        background: var(--d-surface-2);
        border: 1px solid var(--d-line-2);
        border-radius: 6px;
        padding: 4px 8px;
    }

        .fsr-tl-leg .info svg[b-kym8pc0e79] {
            width: 11px;
            height: 11px;
            fill: var(--d-accent);
        }

        .fsr-tl-leg .info .fno[b-kym8pc0e79] {
            font-weight: 600;
            color: var(--d-ink-2);
        }

    .fsr-tl-leg img[b-kym8pc0e79] {
        height: 14px;
        width: auto;
        flex-shrink: 0;
    }

.fsr-transit[b-kym8pc0e79] {
    margin: 8px 0;
    margin-left: 4px;
}

    .fsr-transit .badge[b-kym8pc0e79] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 11px;
        color: #1d4ed8;
    }

        .fsr-transit .badge svg[b-kym8pc0e79] {
            width: 11px;
            height: 11px;
        }

/* Direct itinerary (single leg) */
.fsr-itin-direct[b-kym8pc0e79] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

@media (min-width: 768px) {
    .fsr-itin-direct[b-kym8pc0e79] {
        gap: 24px;
    }
}

.fsr-itin-side[b-kym8pc0e79] {
    flex: 1;
    min-width: 0;
}

    .fsr-itin-side.right[b-kym8pc0e79] {
        text-align: right;
    }

    .fsr-itin-side .lbl[b-kym8pc0e79] {
        font-size: 10px;
        color: var(--d-ink-4);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }

        .fsr-itin-side .lbl .iata[b-kym8pc0e79] {
            display: inline-block;
            text-transform: none;
            letter-spacing: 0.03em;
            font-size: 10.5px;
            font-weight: 800;
            color: var(--d-accent);
            background: var(--d-accent-soft);
            padding: 0 5px;
            border-radius: 4px;
            margin-right: 3px;
        }

    .fsr-itin-side .t[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .fsr-itin-side .date[b-kym8pc0e79] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 2px;
    }

    .fsr-itin-side .term[b-kym8pc0e79] {
        font-size: 10px;
        color: var(--d-ink-4);
    }

@media (min-width: 768px) {
    .fsr-itin-side .t[b-kym8pc0e79] {
        font-size: 20px;
    }
}

.fsr-itin-mid[b-kym8pc0e79] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 12px;
    min-width: 0;
}

    .fsr-itin-mid .dur[b-kym8pc0e79],
    .fsr-itin-mid .stops[b-kym8pc0e79] {
        font-size: 11px;
        color: var(--d-ink-3);
    }

    .fsr-itin-mid .ln[b-kym8pc0e79] {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 4px 0;
    }

        .fsr-itin-mid .ln .dot[b-kym8pc0e79] {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--d-accent);
        }

        .fsr-itin-mid .ln .bar[b-kym8pc0e79] {
            flex: 1;
            height: 2px;
            background-image: repeating-linear-gradient(to right, #ffd0ac 0 5px, transparent 5px 9px);
            position: relative;
        }

        .fsr-itin-mid .ln .bar svg[b-kym8pc0e79] {
            width: 14px;
            height: 14px;
            fill: var(--d-accent);
            position: absolute;
            right: 0;
            top: -7px;
        }

.fsr-itin-carrier[b-kym8pc0e79] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--d-line-2);
    font-size: 11px;
    color: var(--d-ink-3);
}

    .fsr-itin-carrier img[b-kym8pc0e79] {
        height: 16px;
        width: auto;
    }

    .fsr-itin-carrier .fno[b-kym8pc0e79] {
        font-weight: 600;
        color: var(--d-ink-2);
    }

/* ─── Price breakdown ─── */
.fsr-price-detail[b-kym8pc0e79] {
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    padding: 12px 16px;
}


.fsr-price-meta[b-kym8pc0e79] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--d-ink-3);
    margin-bottom: 8px;
}

    .fsr-price-meta strong[b-kym8pc0e79] {
        color: var(--d-ink-2);
        font-weight: 600;
    }

    .fsr-price-meta .sep[b-kym8pc0e79] {
        color: var(--d-ink-4);
    }

.fsr-price-tbl-wrap[b-kym8pc0e79] {
    border: 1px solid var(--d-line);
    border-radius: 8px;
    overflow-x: auto;
}

.fsr-price-tbl[b-kym8pc0e79] {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-size: 12px;
}

    .fsr-price-tbl thead tr[b-kym8pc0e79] {
        background: var(--d-surface-2);
        border-bottom: 1px solid var(--d-line);
    }

    .fsr-price-tbl thead th[b-kym8pc0e79] {
        padding: 8px 12px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
    }

        .fsr-price-tbl thead th.right[b-kym8pc0e79] {
            text-align: right;
        }

    .fsr-price-tbl tbody td[b-kym8pc0e79] {
        padding: 8px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        font-variant-numeric: tabular-nums;
    }

        .fsr-price-tbl tbody td.right[b-kym8pc0e79] {
            text-align: right;
        }

        .fsr-price-tbl tbody td.total[b-kym8pc0e79] {
            font-weight: 600;
            color: var(--d-ink);
        }

    .fsr-price-tbl tbody tr:last-child td[b-kym8pc0e79] {
        border-bottom: 0;
    }

.fsr-price-total[b-kym8pc0e79] {
    background: var(--d-accent-soft);
    border-top: 1px solid #ffe0c7;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .fsr-price-total .lbl[b-kym8pc0e79] {
        font-size: 12px;
        color: var(--d-ink-2);
    }

    .fsr-price-total .amt[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

/* ─── Sticky outbound summary / continue bar ─── */
/* Dùng position: fixed để bar luôn ghim đáy viewport ngay khi user vừa chọn chuyến,
   thay vì sticky-bottom (chỉ kích hoạt khi cuộn gần cuối list — gây cảm giác "không thấy bar") */
.fsr-sticky-bar[b-kym8pc0e79] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    background: var(--d-surface);
    /* Stand out as the "what to do next" bar: accent ring + warm elevation. */
    border: 1.5px solid var(--d-accent);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.22), 0 2px 8px rgba(16, 24, 40, 0.06);
}

@media (min-width: 768px) {
    .fsr-sticky-bar[b-kym8pc0e79] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(960px, calc(100% - 32px));
    }
}

.fsr-sticky-row[b-kym8pc0e79] {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.fsr-sticky-info[b-kym8pc0e79] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Tô nền cho thông tin chuyến đã chọn để nổi bật khỏi nền trắng của thanh. */
    background: var(--d-accent-soft);
    border: 1px solid var(--d-accent-line, rgba(255, 107, 0, 0.22));
    border-radius: 10px;
    padding: 8px 12px;
}

    .fsr-sticky-info img[b-kym8pc0e79] {
        height: 20px;
        width: auto;
        flex-shrink: 0;
    }

    .fsr-sticky-info .lbl[b-kym8pc0e79] {
        font-size: 10px;
        color: var(--d-accent);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    .fsr-sticky-info .ttl[b-kym8pc0e79] {
        font-size: 14px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1.2;
        margin-top: 2px;
        /* Không cho "VU774 · 07:05 → 09:15" gãy dòng khi hẹp — cắt ellipsis */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .fsr-sticky-info .ttl .sep[b-kym8pc0e79] {
            color: var(--d-ink-4);
            margin: 0 4px;
            font-weight: 400;
        }

        .fsr-sticky-info .ttl .light[b-kym8pc0e79] {
            font-weight: 400;
            color: var(--d-ink-2);
        }

.fsr-out-chip[b-kym8pc0e79] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #bbf7d0;
    flex-shrink: 0;
}

    .fsr-out-chip svg[b-kym8pc0e79] {
        width: 11px;
        height: 11px;
    }

@media (max-width: 767px) {
    .fsr-out-chip[b-kym8pc0e79] {
        display: none;
    }

    .fsr-sticky-info img[b-kym8pc0e79] {
        display: none;
    }

    /* Mobile: 1 hàng không đủ chỗ cho info + giá + nút (giá+nút ~260px, info còn ~40px
       → giờ bay gãy dọc, các khối chèn nhau). Xuống 2 TẦNG: info full-width, dưới là
       giá (trái) + nút (phải). */
    .fsr-sticky-row[b-kym8pc0e79] {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 10px 12px;
    }

    .fsr-sticky-info[b-kym8pc0e79] {
        flex: 1 1 100%;
    }

    .fsr-sticky-price[b-kym8pc0e79] {
        flex: 1 1 auto;
        text-align: left;
    }
}

.fsr-sticky-price[b-kym8pc0e79] {
    text-align: right;
    flex-shrink: 0;
}

    .fsr-sticky-price .amt[b-kym8pc0e79] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.025em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

        .fsr-sticky-price .amt .unit[b-kym8pc0e79] {
            font-size: 11px;
            font-weight: 400;
        }

    .fsr-sticky-price .sub[b-kym8pc0e79] {
        font-size: 10px;
        color: var(--d-ink-4);
        margin-top: 2px;
        line-height: 1;
    }

    /* Giá gốc trước giảm — gạch ngang, mờ, nằm trên giá đã giảm */
    .fsr-sticky-price .strike[b-kym8pc0e79] {
        font-size: 11px;
        color: var(--d-ink-4);
        text-decoration: line-through;
        line-height: 1;
        margin-bottom: 1px;
        font-variant-numeric: tabular-nums;
    }
/* /src/Features/_Shared/Inputs/AirportSelector.razor.rz.scp.css */
/* AirportSelector — Manager Dashboard v4 theme */
.aps-root[b-pbw3p8tt2t] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-danger: #dc2626;
    --d-r: 12px;

    position: relative;
    width: 100%;
}

/* ── Trigger ── */
.aps-trigger[b-pbw3p8tt2t] {
    width: 100%;
    height: 100%;
    min-height: 56px;
    padding: 6px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
}

    .aps-trigger.is-compact[b-pbw3p8tt2t] {
        min-height: 40px;
        padding: 4px 10px;
    }

    /* Có icon dẫn đầu → bố cục ngang: [chip icon][cột nhãn + giá trị] */
    .aps-trigger.has-lead[b-pbw3p8tt2t] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .aps-trigger:hover[b-pbw3p8tt2t] {
        background: var(--d-surface-2);
    }

.aps-text[b-pbw3p8tt2t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.aps-trigger.has-lead .aps-text[b-pbw3p8tt2t] {
    flex: 1;
    width: auto;
}

.aps-lead-ico[b-pbw3p8tt2t] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    transition: background .12s, color .12s, border-color .12s;
}

    .aps-lead-ico[b-pbw3p8tt2t]  svg {
        width: 15px;
        height: 15px;
    }

.aps-trigger.is-open .aps-lead-ico[b-pbw3p8tt2t] {
    background: var(--d-accent-soft);
    border-color: #ffd9bd;
    color: var(--d-accent);
}

    .aps-trigger.is-open[b-pbw3p8tt2t] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        background: var(--d-surface);
    }

.aps-label[b-pbw3p8tt2t] {
    font-size: 10px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.aps-trigger.is-compact .aps-label[b-pbw3p8tt2t] {
    font-size: 9px;
}

.aps-value[b-pbw3p8tt2t] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aps-trigger.is-compact .aps-value[b-pbw3p8tt2t] {
    font-size: 12px;
}

/* Tên thành phố + mã sân bay dạng "vé" — mã là token cam nổi bật */
.aps-value-city[b-pbw3p8tt2t] {
    color: var(--d-ink);
}

.aps-value-code[b-pbw3p8tt2t] {
    margin-left: 7px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.aps-trigger.is-compact .aps-value-code[b-pbw3p8tt2t] {
    margin-left: 5px;
    padding: 0 5px;
    font-size: 10.5px;
}

.aps-placeholder[b-pbw3p8tt2t] {
    color: var(--d-ink-4);
    font-weight: 400;
}

/* ── Backdrop & Panel ── */
.aps-backdrop[b-pbw3p8tt2t] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.aps-panel[b-pbw3p8tt2t] {
    /* position:fixed + toạ độ tính bằng JS (ComputePanelPositionAsync)
       → thoát mọi stacking/scroll context (CaLayout/ManagerLayout có overflow-y:auto). */
    position: fixed;
    z-index: 1000;
    width: 520px;
    max-width: 95vw;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 18px 40px -8px rgba(16, 24, 40, 0.18), 0 6px 12px -4px rgba(16, 24, 40, 0.10);
    overflow: hidden;
}

.aps-search-wrap[b-pbw3p8tt2t] {
    padding: 12px;
    border-bottom: 1px solid var(--d-line-2);
}

.aps-search[b-pbw3p8tt2t] {
    position: relative;
}

.aps-search-icon[b-pbw3p8tt2t] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.aps-search-input[b-pbw3p8tt2t] {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .aps-search-input[b-pbw3p8tt2t]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .aps-search-input:focus[b-pbw3p8tt2t] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

/* ── Body layout ── */
.aps-body[b-pbw3p8tt2t] {
    display: flex;
    height: 360px;
}

.aps-sidebar[b-pbw3p8tt2t] {
    width: 144px;
    flex-shrink: 0;
    border-right: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    overflow-y: auto;
    padding: 6px;
}

.aps-tab[b-pbw3p8tt2t] {
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 2px;
    transition: background .12s, color .12s;
    line-height: 1.25;
}

    .aps-tab:hover[b-pbw3p8tt2t] {
        background: var(--d-surface);
        color: var(--d-ink);
    }

    .aps-tab.is-active[b-pbw3p8tt2t] {
        background: var(--d-surface);
        color: var(--d-accent);
        font-weight: 600;
        box-shadow: inset 2px 0 0 var(--d-accent);
    }

.aps-list[b-pbw3p8tt2t] {
    flex: 1;
    overflow-y: auto;
}

/* Chiều cao GHIM 54px: <Virtualize ItemSize="54"> trong AirportSelector.razor dựa vào con số này để
   tính vị trí cuộn. Đổi padding/font ở đây thì phải đổi APS_ROW_HEIGHT theo, kẻo cuộn bị giật. */
.aps-row[b-pbw3p8tt2t] {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    border-bottom: 1px solid var(--d-line-2);
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

    .aps-row:last-child[b-pbw3p8tt2t] {
        border-bottom: 0;
    }

    .aps-row:hover:not(:disabled)[b-pbw3p8tt2t] {
        background: var(--d-surface-2);
    }

    .aps-row:disabled[b-pbw3p8tt2t] {
        opacity: 0.4;
        cursor: not-allowed;
        background: var(--d-surface-2);
    }

.aps-row-info[b-pbw3p8tt2t] {
    min-width: 0;
    flex: 1;
}

.aps-row-city[b-pbw3p8tt2t] {
    font-size: 14px;
    line-height: 17px; /* ghim để tổng dòng luôn = 54px, xem .aps-row */
    font-weight: 500;
    color: var(--d-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.aps-row-name[b-pbw3p8tt2t] {
    font-size: 11.5px;
    line-height: 14px; /* ghim để tổng dòng luôn = 54px, xem .aps-row */
    color: var(--d-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0;
}

.aps-row-code[b-pbw3p8tt2t] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--d-accent);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.aps-row:disabled .aps-row-code[b-pbw3p8tt2t] {
    color: var(--d-ink-4);
}

/* Search results */
.aps-results[b-pbw3p8tt2t] {
    max-height: 320px;
    overflow-y: auto;
}

.aps-group-hd[b-pbw3p8tt2t] {
    padding: 12px 14px 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.aps-message[b-pbw3p8tt2t] {
    padding: 32px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--d-ink-3);
}

    .aps-message.is-error[b-pbw3p8tt2t] {
        color: var(--d-danger);
    }

.aps-spin-wrap[b-pbw3p8tt2t] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.aps-spin[b-pbw3p8tt2t] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: aps-spin-b-pbw3p8tt2t 0.9s linear infinite;
}

@keyframes aps-spin-b-pbw3p8tt2t {
    to { transform: rotate(360deg); }
}

/* ── Skeleton loading ── */
.aps-skel-sidebar[b-pbw3p8tt2t] {
    width: 144px;
    flex-shrink: 0;
    border-right: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aps-skel-tab[b-pbw3p8tt2t] {
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ede9e3, #f4f5f8, #ede9e3);
    background-size: 200% 100%;
    animation: aps-shimmer-b-pbw3p8tt2t 1.5s ease-in-out infinite;
}

.aps-skel-list[b-pbw3p8tt2t] {
    flex: 1;
    padding: 8px;
    overflow: hidden;
}

.aps-skel-loader[b-pbw3p8tt2t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 0 18px;
    color: var(--d-ink-4);
}

.aps-skel-plane[b-pbw3p8tt2t] {
    position: relative;
    width: 36px;
    height: 36px;
    color: var(--d-accent);
}

    .aps-skel-plane svg[b-pbw3p8tt2t] {
        width: 36px;
        height: 36px;
        animation: aps-plane-b-pbw3p8tt2t 2s ease-in-out infinite;
    }

.aps-skel-plane-ping[b-pbw3p8tt2t] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.18);
    animation: aps-ping-b-pbw3p8tt2t 1.5s ease-in-out infinite;
}

.aps-skel-text[b-pbw3p8tt2t] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-3);
}

.aps-skel-row[b-pbw3p8tt2t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 6px;
}

.aps-skel-line[b-pbw3p8tt2t] {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ede9e3, #f4f5f8, #ede9e3);
    background-size: 200% 100%;
    animation: aps-shimmer-b-pbw3p8tt2t 1.5s ease-in-out infinite;
}

    .aps-skel-line.w-2-3[b-pbw3p8tt2t] { width: 66%; }
    .aps-skel-line.w-1-2[b-pbw3p8tt2t] { width: 50%; height: 8px; margin-top: 6px; }
    .aps-skel-line.w-code[b-pbw3p8tt2t] { width: 36px; height: 14px; flex-shrink: 0; background: linear-gradient(90deg, #ffe0c7, #fff2e8, #ffe0c7); background-size: 200% 100%; }

@keyframes aps-shimmer-b-pbw3p8tt2t {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes aps-plane-b-pbw3p8tt2t {
    0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
    25% { transform: translateX(3px) translateY(-4px) rotate(2deg); }
    50% { transform: translateX(0) translateY(-2px) rotate(0deg); }
    75% { transform: translateX(-3px) translateY(-4px) rotate(-2deg); }
}

@keyframes aps-ping-b-pbw3p8tt2t {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0.6; }
}
/* /src/Features/_Shared/Inputs/CurrencyInput.razor.rz.scp.css */
/* CurrencyInput — Manager Dashboard v4 theme */
.ci-input[b-mgbetu8zvo] {
    --d-surface: #ffffff;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-r: 12px;

    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .ci-input[b-mgbetu8zvo]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .ci-input:hover:not(:disabled)[b-mgbetu8zvo] {
        border-color: #dde1e8;
    }

    .ci-input:focus[b-mgbetu8zvo] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .ci-input:disabled[b-mgbetu8zvo] {
        background: #f4f5f8;
        color: #7b8190;
        cursor: not-allowed;
    }
/* /src/Features/_Shared/Inputs/DateMaskInput.razor.rz.scp.css */
/* DateMaskInput — Manager Dashboard v4 theme */
.dmi-root[b-uyqtf6ql88] {
    --d-surface: #ffffff;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-danger: #dc2626;
    --d-r: 12px;

    position: relative;
    width: 100%;
}

.dmi-input[b-uyqtf6ql88] {
    width: 100%;
    height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .dmi-input[b-uyqtf6ql88]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .dmi-input:hover[b-uyqtf6ql88] {
        border-color: #dde1e8;
    }

    .dmi-input:focus[b-uyqtf6ql88] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .dmi-input.is-invalid[b-uyqtf6ql88] {
        border-color: var(--d-danger);
    }

        .dmi-input.is-invalid:focus[b-uyqtf6ql88] {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
        }

.dmi-guide[b-uyqtf6ql88] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: #dde1e8;
    pointer-events: none;
    letter-spacing: 0.01em;
}

.dmi-hidden[b-uyqtf6ql88] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.dmi-icon-btn[b-uyqtf6ql88] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--d-ink-4);
    cursor: pointer;
    transition: color .12s;
}

    .dmi-icon-btn:hover[b-uyqtf6ql88] {
        color: var(--d-accent);
    }

    .dmi-icon-btn svg[b-uyqtf6ql88] {
        width: 16px;
        height: 16px;
    }

.dmi-error[b-uyqtf6ql88] {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--d-danger);
    line-height: 1.3;
}
/* /src/Features/_Shared/Inputs/DateRangePicker.razor.rz.scp.css */
/* DateRangePicker — Manager Dashboard v4 theme */
.drp-root[b-t71pb9stht] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-r: 12px;

    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.drp-fields[b-t71pb9stht] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.drp-input[b-t71pb9stht] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .drp-input:hover[b-t71pb9stht] {
        border-color: #dde1e8;
    }

    .drp-input:focus[b-t71pb9stht] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.drp-sep[b-t71pb9stht] {
    color: var(--d-ink-4);
    font-size: 14px;
    font-weight: 500;
}

.drp-presets[b-t71pb9stht] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.drp-preset[b-t71pb9stht] {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .drp-preset:hover[b-t71pb9stht] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: #dde1e8;
    }
/* /src/Features/_Shared/Inputs/DebouncedSearchInput.razor.rz.scp.css */
/* DebouncedSearchInput — Manager Dashboard v4 theme */
.dsi-root[b-9yr4ymqtl3] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-r: 12px;

    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.dsi-icon[b-9yr4ymqtl3] {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.dsi-input[b-9yr4ymqtl3] {
    width: 100%;
    height: 38px;
    padding: 0 36px 0 36px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: border-color .12s, box-shadow .12s, background .12s;
    outline: none;
}

    .dsi-input[b-9yr4ymqtl3]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .dsi-input:hover[b-9yr4ymqtl3] {
        border-color: #dde1e8;
    }

    .dsi-input:focus[b-9yr4ymqtl3] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        background: var(--d-surface);
    }

.dsi-clear[b-9yr4ymqtl3] {
    position: absolute;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--d-ink-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .dsi-clear:hover[b-9yr4ymqtl3] {
        background: var(--d-surface-2);
        color: var(--d-ink-2);
    }
/* /src/Features/_Shared/Inputs/Field.razor.rz.scp.css */
/* Field — Manager Dashboard v4 theme */
.fld-root[b-5iyx76ee5z] {
    --d-ink: #121212;
    --d-ink-3: #7b8190;
    --d-danger: #dc2626;
    display: block;
}

.fld-label[b-5iyx76ee5z] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    line-height: 1.2;
}

.fld-req[b-5iyx76ee5z] {
    color: var(--d-danger);
    margin-left: 2px;
    font-weight: 600;
}
/* /src/Features/_Shared/Inputs/FileUploadComponent.razor.rz.scp.css */
/* FileUploadComponent — Manager Dashboard v4 theme */
.fuc-root[b-7vpkg546g1] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;

    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--d-ink);
}

/* Hidden input */
.fuc-input[b-7vpkg546g1] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

/* ─── Drop zone ─── */
.fuc-drop[b-7vpkg546g1] {
    border: 1.5px dashed var(--d-line);
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    transition: border-color .15s, background .15s;
}

    .fuc-drop:hover[b-7vpkg546g1] {
        border-color: var(--d-ink-4);
        background: var(--d-surface);
    }

    .fuc-drop.is-dragging[b-7vpkg546g1] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
    }

    .fuc-drop.is-uploading[b-7vpkg546g1] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

.fuc-drop-label[b-7vpkg546g1] {
    display: block;
    cursor: pointer;
}

.fuc-drop-body[b-7vpkg546g1] {
    text-align: center;
    padding: 28px 20px;
}

.fuc-drop-ico[b-7vpkg546g1] {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    color: var(--d-ink-4);
}

.fuc-drop-spinner[b-7vpkg546g1] {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 3px solid var(--d-accent-soft);
    border-top-color: var(--d-accent);
    border-radius: 50%;
    animation: fuc-spin-b-7vpkg546g1 0.7s linear infinite;
}

@keyframes fuc-spin-b-7vpkg546g1 {
    to { transform: rotate(360deg); }
}

.fuc-drop-title[b-7vpkg546g1] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    margin: 0 0 4px;
}

    .fuc-drop-title .accent[b-7vpkg546g1] {
        color: var(--d-accent);
        font-weight: 600;
    }

    .fuc-drop-title .muted[b-7vpkg546g1] {
        color: var(--d-ink-3);
        font-weight: 400;
    }

.fuc-drop-hint[b-7vpkg546g1] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
}

.fuc-drop-uploading-text[b-7vpkg546g1] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-accent);
    margin: 0;
}

/* ─── File list ─── */
.fuc-list[b-7vpkg546g1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fuc-item[b-7vpkg546g1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, background .12s;
}

    .fuc-item:hover[b-7vpkg546g1] {
        border-color: #dde1e8;
        background: var(--d-surface);
    }

.fuc-item-ico[b-7vpkg546g1] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--d-ink-2);
    flex-shrink: 0;
    background: var(--d-ink-3);
}

    .fuc-item-ico.is-pdf[b-7vpkg546g1] { background: var(--d-danger); }
    .fuc-item-ico.is-doc[b-7vpkg546g1] { background: #2563eb; }
    .fuc-item-ico.is-xls[b-7vpkg546g1] { background: var(--d-good); }
    .fuc-item-ico.is-img[b-7vpkg546g1] { background: var(--d-accent-grad); }
    .fuc-item-ico.is-zip[b-7vpkg546g1] { background: var(--d-warn); }

    .fuc-item-ico svg[b-7vpkg546g1] {
        width: 18px;
        height: 18px;
    }

.fuc-item-info[b-7vpkg546g1] {
    flex: 1;
    min-width: 0;
}

.fuc-item-name[b-7vpkg546g1] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuc-item-size[b-7vpkg546g1] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Progress */
.fuc-progress[b-7vpkg546g1] {
    margin-top: 6px;
}

.fuc-progress-bar[b-7vpkg546g1] {
    height: 4px;
    background: var(--d-line-2);
    border-radius: 999px;
    overflow: hidden;
}

.fuc-progress-fill[b-7vpkg546g1] {
    height: 100%;
    background: var(--d-accent-grad);
    transition: width .25s ease;
}

.fuc-progress-text[b-7vpkg546g1] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--d-ink-3);
    margin-top: 3px;
}

/* Status */
.fuc-status[b-7vpkg546g1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

    .fuc-status.is-good[b-7vpkg546g1] { color: var(--d-good); }
    .fuc-status.is-error[b-7vpkg546g1] { color: var(--d-danger); }

    .fuc-status svg[b-7vpkg546g1] {
        width: 12px;
        height: 12px;
    }

/* Remove button */
.fuc-remove[b-7vpkg546g1] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--d-ink-4);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .fuc-remove:hover[b-7vpkg546g1] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

    .fuc-remove svg[b-7vpkg546g1] {
        width: 16px;
        height: 16px;
    }

/* ─── Errors ─── */
.fuc-errors[b-7vpkg546g1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fuc-error[b-7vpkg546g1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d-danger-soft);
    border: 1px solid #fecaca;
    border-radius: var(--d-r);
    font-size: 12.5px;
    color: #991b1b;
}

    .fuc-error svg[b-7vpkg546g1] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--d-danger);
    }
/* /src/Features/_Shared/Inputs/MoneyInput.razor.rz.scp.css */
/* MoneyInput — Manager Dashboard v4 theme */
.mi-root[b-yicshyfwl2] {
    --d-surface: #ffffff;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-r: 12px;

    position: relative;
    width: 100%;
}

.mi-input[b-yicshyfwl2] {
    width: 100%;
    height: 38px;
    padding: 0 56px 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .mi-input[b-yicshyfwl2]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .mi-input:hover:not(:disabled)[b-yicshyfwl2] {
        border-color: #dde1e8;
    }

    .mi-input:focus[b-yicshyfwl2] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .mi-input:disabled[b-yicshyfwl2] {
        background: #f4f5f8;
        color: var(--d-ink-3);
        cursor: not-allowed;
    }

.mi-suffix[b-yicshyfwl2] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
}
/* /src/Features/_Shared/Inputs/NmDatePicker.razor.rz.scp.css */
/* ── Leading icon chip (chỉ FlightSearchBox truyền) ──────────── */
.dp-lead-ico[b-qzpvy8dfcp] {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    align-self: center;
    margin-left: 12px;
    border-radius: 8px;
    background: #f4f5f8;
    border: 1px solid #eceef2;
    color: #3d4250;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .dp-lead-ico[b-qzpvy8dfcp]  svg {
        width: 15px;
        height: 15px;
    }

.range-trigger.dp-open .dp-lead-ico[b-qzpvy8dfcp],
.single-trigger.dp-open .dp-lead-ico[b-qzpvy8dfcp] {
    background: #fff2e8;
    border-color: #ffd9bd;
    color: #ff6b00;
}

/* ── Trigger area ─────────────────────────────────────────── */
.range-trigger.dp-open[b-qzpvy8dfcp],
.single-trigger.dp-open[b-qzpvy8dfcp] {
    border: 2px solid #FF6B35;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2),
                0 0 12px rgba(255, 107, 53, 0.12);
}

/* Nhãn + giá trị luôn 1 dòng: màn hẹp thì cắt bớt bằng "…" thay vì xuống dòng
   làm cao ô ngày lệch với các ô còn lại. flex item mặc định không co dưới
   min-content nên phải min-width:0 ở cả ô lẫn phần tử chữ. */
.date-field[b-qzpvy8dfcp],
.single-trigger > div[b-qzpvy8dfcp] {
    min-width: 0;
}

.dp-label[b-qzpvy8dfcp],
.dp-value[b-qzpvy8dfcp] {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Blinking cursor on the active field */
@keyframes blink-b-qzpvy8dfcp {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.field-active[b-qzpvy8dfcp]::after {
    content: '|';
    animation: blink-b-qzpvy8dfcp 1s infinite;
    color: #FF6B35;
    display: inline-block;
    margin-left: 1px;
}

/* ── Calendar panel position ──────────────────────────────── */
.calendar-panel[b-qzpvy8dfcp] {
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    max-width: fit-content;
}

@media (max-width: 768px) {
    .calendar-panel[b-qzpvy8dfcp] {
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 32px);
    }
}

/* ── Day cells ────────────────────────────────────────────── */
.day-cell[b-qzpvy8dfcp] {
    position: relative;
    aspect-ratio: 1;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.day-num[b-qzpvy8dfcp] {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: #111827;
}

/* Today */
.today-day[b-qzpvy8dfcp] {
    background-color: transparent;
}
.today-day:hover[b-qzpvy8dfcp] {
    background-color: #f3f4f6;
}
.today-day .day-num[b-qzpvy8dfcp] {
    color: #FF6B35;
    font-weight: 700;
}

/* Selected / Start / End */
.day-cell.bg-\[\#FF6B35\] .day-num[b-qzpvy8dfcp],
.day-cell.bg-\[\#FF6B35\] .lunar-label[b-qzpvy8dfcp] {
    color: #ffffff !important;
}

/* In range */
.day-cell.bg-orange-100:hover[b-qzpvy8dfcp] {
    background-color: rgba(255, 107, 53, 0.18);
}

/* Preview range (while hovering before confirming end date) */
@keyframes previewPulse-b-qzpvy8dfcp {
    0%, 100% { background-color: rgba(255, 107, 53, 0.14); }
    50%       { background-color: rgba(255, 107, 53, 0.24); }
}
@keyframes previewEndPulse-b-qzpvy8dfcp {
    0%, 100% {
        background-color: rgba(255, 107, 53, 0.24);
        box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3);
    }
    50% {
        background-color: rgba(255, 107, 53, 0.36);
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.4);
    }
}

.preview-range-day[b-qzpvy8dfcp] {
    animation: previewPulse-b-qzpvy8dfcp 1.5s ease-in-out infinite;
}

.preview-end-date[b-qzpvy8dfcp] {
    animation: previewEndPulse-b-qzpvy8dfcp 1.5s ease-in-out infinite;
    border: 2px dashed rgba(255, 107, 53, 0.5);
    border-radius: 6px;
}
.preview-end-date .day-num[b-qzpvy8dfcp] {
    color: #FF6B35;
    font-weight: 700;
}

/* ── Lunar date label ─────────────────────────────────────── */
.lunar-label[b-qzpvy8dfcp] {
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 7.5px;
    line-height: 1;
    color: #9ca3af;
    pointer-events: none;
    white-space: nowrap;
}

/* When day is selected (orange bg), lunar label should be white */
.day-cell.bg-\[\#FF6B35\] .lunar-label[b-qzpvy8dfcp] {
    color: rgba(255,255,255,0.75);
}

/* ── Navigation button ────────────────────────────────────── */
.nav-btn[b-qzpvy8dfcp] {
    color: #374151;
    flex-shrink: 0;
}
.nav-btn:hover:not(:disabled)[b-qzpvy8dfcp] {
    background-color: #f3f4f6;
    color: #111827;
}
.nav-btn:disabled[b-qzpvy8dfcp] {
    opacity: 0.3;
    cursor: not-allowed;
}
/* /src/Features/_Shared/Inputs/SaveButton.razor.rz.scp.css */
/* SaveButton — Manager Dashboard v4 theme */
.sb-btn[b-4777ugit4t] {
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: background .12s, box-shadow .12s, opacity .12s;
    width: 100%;
}

@media (min-width: 640px) {
    .sb-btn[b-4777ugit4t] {
        width: auto;
    }
}

    .sb-btn:hover:not(:disabled)[b-4777ugit4t] {
        background: var(--d-accent-grad-hover);
    }

    .sb-btn:disabled[b-4777ugit4t] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.sb-spin[b-4777ugit4t] {
    display: inline-block;
    animation: sb-spin-b-4777ugit4t 0.9s linear infinite;
}

@keyframes sb-spin-b-4777ugit4t {
    to { transform: rotate(360deg); }
}
/* /src/Features/_Shared/Insurance/InsuranceBenefitText.razor.rz.scp.css */
/* Con số quyền lợi — bút dạ quang tông emerald, cùng họ màu với dấu tick và giá của khối bảo
   hiểm. Chỉ đậm chữ thôi thì trên nền trắng vẫn dễ trượt mắt; thêm nền nhạt là mắt bắt được ngay
   "được bao nhiêu tiền / trong bao lâu" mà không phải đọc hết câu.

   Nền để rất nhạt (14% emerald) và bo nhỏ: đủ nổi trên cả thẻ chưa chọn (nền trắng) lẫn thẻ đang
   chọn (nền #ecfdf5), nhưng không biến gạch đầu dòng thành dải màu rực. */
.ins-key[b-1sfw09bp61] {
    font-weight: 700;
    color: #047857;
    background: rgba(16, 185, 129, .14);
    padding: 0 4px;
    border-radius: 4px;
    /* "1.000.000.000 đồng" bị ngắt giữa số và đơn vị thì mất luôn tác dụng tô */
    white-space: nowrap;
}
/* /src/Features/_Shared/Insurance/InsuranceOptionsBlock.razor.rz.scp.css */
/* Insurance block — fps-card theme (dùng trong FlightPaymentStep slot BeforePaymentMethods).
   Tone emerald để tách khỏi accent cam của hệ thống.

   Khoảng cách với các thẻ khác KHÔNG còn set ở đây: `.fps-stack` của FlightPaymentStep đã đổi sang
   dùng `gap`, vốn là thuộc tính container nên áp được cho cả component con. */

/* ── Bản sao các rule fps-card của FlightPaymentStep ──
   Vì sao phải khai lại dù dùng đúng tên class: CSS isolation gắn rule của FlightPaymentStep với
   scope attribute của CHÍNH nó, nên chúng không match markup do component này render.
   Không khai lại thì <h2> rơi về style mặc định của trình duyệt (chữ to, không uppercase), và
   Tailwind preflight đặt `svg { display: block }` khiến icon bị đẩy xuống DÒNG RIÊNG. */
.ins-block.fps-card[b-3sy8ma7vd4] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px -6px rgba(16, 24, 40, .10);
}

.ins-block .fps-card-hd[b-3sy8ma7vd4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

.ins-block .fps-card-hd h2[b-3sy8ma7vd4] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ins-block .fps-card-hd h2 svg[b-3sy8ma7vd4] {
    color: #10b981;
    flex-shrink: 0;
}

.ins-brand[b-3sy8ma7vd4] {
    font-size: 10px;
    font-weight: 400;
    color: var(--d-ink-4);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 2px;
}

.ins-deselect[b-3sy8ma7vd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--d-line);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1;
    transition: color .12s, background .12s, border-color .12s;
}

.ins-deselect:hover[b-3sy8ma7vd4] {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.ins-deselect svg[b-3sy8ma7vd4] {
    color: currentColor;
}

.ins-body[b-3sy8ma7vd4] {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ins-loading[b-3sy8ma7vd4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-size: 14px;
    color: var(--d-ink-3);
}

.ins-spinner[b-3sy8ma7vd4] {
    width: 14px;
    height: 14px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ins-spin-b-3sy8ma7vd4 .9s linear infinite;
}

@keyframes ins-spin-b-3sy8ma7vd4 {
    to { transform: rotate(360deg); }
}

.ins-desc[b-3sy8ma7vd4] {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

.ins-option[b-3sy8ma7vd4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1.5px solid var(--d-line);
    border-radius: 10px;
    background: var(--d-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.ins-option:hover[b-3sy8ma7vd4] {
    border-color: #34d399;
}

.ins-option.is-selected[b-3sy8ma7vd4] {
    border-color: #10b981;
    background: #ecfdf5;
}

.ins-option input[type="radio"][b-3sy8ma7vd4] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ins-radio[b-3sy8ma7vd4] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s, background .12s;
}

.ins-option.is-selected .ins-radio[b-3sy8ma7vd4] {
    border-color: #10b981;
    background: #10b981;
}

.ins-radio-dot[b-3sy8ma7vd4] {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

.ins-option-body[b-3sy8ma7vd4] {
    flex: 1;
    min-width: 0;
}

.ins-option-top[b-3sy8ma7vd4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ins-name[b-3sy8ma7vd4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.3;
}

.ins-price[b-3sy8ma7vd4] {
    font-size: 14px;
    font-weight: 700;
    color: #059669;
    flex-shrink: 0;
}

/* Mô tả riêng của gói — chỉ hiện khi khối chào từ 2 gói trở lên (1 gói thì mô tả đã nằm ở .ins-desc) */
.ins-card-desc[b-3sy8ma7vd4] {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

/* Gạch đầu dòng quyền lợi — dấu tick thay bullet tròn để đọc ra "được gì" ngay.
   Đây là phần khách dựa vào để quyết mua nên cố ý đặt nặng hơn mấy dòng thông tin quanh nó
   (điều kiện tuổi, đơn vị cung cấp): chữ to hơn, đậm hơn, màu đen hơn. Con số trong câu còn được
   tô riêng — xem InsuranceBenefitText.razor.css. */
.ins-benefits[b-3sy8ma7vd4] {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ins-benefits li[b-3sy8ma7vd4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink);
    line-height: 1.5;
}

.ins-benefits svg[b-3sy8ma7vd4] {
    flex-shrink: 0;
    margin-top: 3px;
    color: #059669;
}

.ins-insurer[b-3sy8ma7vd4] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
}

.ins-links[b-3sy8ma7vd4] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.ins-links a[b-3sy8ma7vd4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #059669;
    text-decoration: none;
}

.ins-links a:hover[b-3sy8ma7vd4] {
    text-decoration: underline;
}

.ins-links a svg[b-3sy8ma7vd4] {
    flex-shrink: 0;
}

/* Trạng thái rỗng: tải xong mà không có gói nào. Nền nhạt để rõ là một thông báo,
   không phải khối nội dung bị lỗi render. */
.ins-empty[b-3sy8ma7vd4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: var(--d-surface-2, #fafafa);
    font-size: 12.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

.ins-empty svg[b-3sy8ma7vd4] { flex-shrink: 0; }

/* Lỗi gọi đối tác — tông cam cảnh báo, phân biệt với "chuyến này vốn không có gói" */
.ins-empty.is-warn[b-3sy8ma7vd4] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.ins-retry[b-3sy8ma7vd4] {
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #059669;
    cursor: pointer;
    text-decoration: underline;
}

.ins-error[b-3sy8ma7vd4] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

.ins-error-banner[b-3sy8ma7vd4] {
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 14px;
    color: #92400e;
}

/* Điều kiện tuổi được bảo hiểm — dòng thông tin, tông xám nhạt như .ins-insurer */
.ins-age[b-3sy8ma7vd4] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.45;
}

/* Cảnh báo có hành khách KHÔNG được bảo hiểm. Nền hổ phách vì đây là thông tin khách
   phải đọc trước khi trả tiền — để cùng tông xám sẽ bị trượt mắt. */
.ins-excluded[b-3sy8ma7vd4] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    font-size: 11.5px;
    color: #92400e;
    line-height: 1.5;
}

.ins-excluded svg[b-3sy8ma7vd4] { flex-shrink: 0; margin-top: 2px; }
/* /src/Features/_Shared/Insurance/InsuranceScheduleChangeBlock.razor.rz.scp.css */
/* Khối "hãng đổi giờ bay → cập nhật bảo hiểm" — token-only, dùng chung 2 màn quản trị.
   Bordered=false khi host đã có khung (NmCard/tab): khi đó bỏ viền + padding riêng. */

.inssc[b-rpui6zmgcg] {
    display: flex;
    flex-direction: column;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.inssc--boxed[b-rpui6zmgcg] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.inssc-head[b-rpui6zmgcg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nm-border);
}
.inssc--boxed .inssc-head[b-rpui6zmgcg] { padding: 14px 16px; }

.inssc-head__text[b-rpui6zmgcg] { max-width: 64ch; }
.inssc-head__act[b-rpui6zmgcg] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.inssc-lastscan[b-rpui6zmgcg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ok);
    white-space: nowrap;
}
.inssc-title[b-rpui6zmgcg] { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.inssc-hint[b-rpui6zmgcg] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }

.inssc-body[b-rpui6zmgcg] { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.inssc--boxed .inssc-body[b-rpui6zmgcg] { padding: 14px 16px; }

.inssc-note[b-rpui6zmgcg] {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    font-size: 12.5px;
    color: var(--nm-muted);
}

/* ── Đang rà hành trình ──────────────────────────────────────────────
   Chiếm hẳn chỗ của vùng kết quả: lượt rà đi qua hãng rồi Saladin, mất vài chục giây, mà
   spinner trong nút Sm thì gần như không thấy. */
.inssc-scan[b-rpui6zmgcg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--nm-brand-100);
    border-radius: var(--nm-r-card);
    background: var(--nm-brand-50);
}

.inssc-scan__head[b-rpui6zmgcg] { display: flex; align-items: center; gap: 10px; }

.inssc-scan__ico[b-rpui6zmgcg] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--nm-surface);
    color: var(--nm-brand-600);
    font-size: 14px;
}

.inssc-scan__ico i[b-rpui6zmgcg] { display: block; animation: inssc-spin-b-rpui6zmgcg 1.1s linear infinite; }

@keyframes inssc-spin-b-rpui6zmgcg { to { transform: rotate(360deg); } }

.inssc-scan__text[b-rpui6zmgcg] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inssc-scan__step[b-rpui6zmgcg] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.inssc-scan__note[b-rpui6zmgcg] { font-size: 11.5px; color: var(--nm-ink-2); line-height: 1.45; }

/* Đồng hồ đếm lên là bằng chứng rõ nhất "máy vẫn đang chạy" khi chờ lâu. */
.inssc-scan__timer[b-rpui6zmgcg] {
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-brand-700);
    flex-shrink: 0;
    align-self: flex-start;
}

.inssc-scan__skel[b-rpui6zmgcg] { display: flex; flex-direction: column; gap: 6px; opacity: .5; }

/* Chốt xong mới đổi số — làm mờ bảng cũ để không ai đọc nhầm số sắp bị thay. */
.inssc-body.is-applying .inssc-sec[b-rpui6zmgcg] { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .inssc-scan__ico i[b-rpui6zmgcg] { animation: none; }
}

/* ── Section ── */
.inssc-sec[b-rpui6zmgcg] { display: flex; flex-direction: column; gap: 8px; }
.inssc-sec--history[b-rpui6zmgcg] { padding-top: 12px; border-top: 1px solid var(--nm-border); }

.inssc-sec-head[b-rpui6zmgcg] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.inssc-sec-lbl[b-rpui6zmgcg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.inssc-count[b-rpui6zmgcg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ── Cell ── */
.inssc-mono[b-rpui6zmgcg] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; }
.inssc-stamp[b-rpui6zmgcg] { font-size: 12px; color: var(--nm-ink); white-space: nowrap; }
.inssc-num[b-rpui6zmgcg] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    white-space: nowrap;
    color: var(--nm-ink);
}
/* Không phát sinh thu thêm — làm nhạt để mắt chỉ dừng ở dòng có tiền */
.inssc-zero[b-rpui6zmgcg] { color: var(--nm-muted); }
.inssc-em[b-rpui6zmgcg] { color: var(--nm-brand-700); font-weight: 700; }
.inssc-bad[b-rpui6zmgcg] { color: var(--nm-bad); }

.inssc-2line[b-rpui6zmgcg] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.inssc-2line__main[b-rpui6zmgcg] { font-weight: 500; color: var(--nm-ink); }
.inssc-2line__sub[b-rpui6zmgcg] {
    font-size: 11px;
    color: var(--nm-muted);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-rpui6zmgcg] .inssc-row-bad .nm-grid__td:first-child { box-shadow: inset 2px 0 0 var(--nm-bad); }

/* Ghi chú của một dòng bảng (lỗi cấp lại / giá Saladin giảm) */
.inssc-row-note[b-rpui6zmgcg] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--nm-surface-2);
    font-size: 11.5px;
    color: var(--nm-muted);
    line-height: 1.5;
}
.inssc-row-note b[b-rpui6zmgcg] { color: var(--nm-ink); font-weight: 600; }
.inssc-row-note--bad[b-rpui6zmgcg] { background: color-mix(in srgb, var(--nm-bad) 8%, transparent); color: var(--nm-bad); }
.inssc-row-note--bad b[b-rpui6zmgcg] { color: var(--nm-bad); }

/* ── Chốt cập nhật ── */
.inssc-apply[b-rpui6zmgcg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px;
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.inssc-apply__sum[b-rpui6zmgcg] { margin: 0; font-size: 12.5px; color: var(--nm-ink); }
.inssc-apply__sum b[b-rpui6zmgcg] { font-family: ui-monospace, 'JetBrains Mono', monospace; }

/* ── Đang chờ nhà bảo hiểm chốt ──
   Khối trạng thái của ĐƠN, không phải kết quả một lượt bấm: luôn nằm trên cùng vùng nội dung và tự
   làm mới, nên phải đọc được ngay mà không cướp sự chú ý như một cảnh báo lỗi. */
.inssc-await[b-rpui6zmgcg] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border-radius: var(--nm-r-card);
    border: 1px solid color-mix(in srgb, var(--nm-warn) 35%, transparent);
    background: color-mix(in srgb, var(--nm-warn) 7%, transparent);
}
.inssc-await__head[b-rpui6zmgcg] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inssc-await__ico[b-rpui6zmgcg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nm-warn) 18%, transparent);
    color: var(--nm-warn);
    font-size: 14px;
}
.inssc-await__text[b-rpui6zmgcg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.inssc-await__text b[b-rpui6zmgcg] { font-size: 12.5px; color: var(--nm-ink); font-weight: 600; }
.inssc-await__meta[b-rpui6zmgcg] { font-size: 11.5px; color: var(--nm-muted); }

.inssc-await__list[b-rpui6zmgcg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inssc-await__row[b-rpui6zmgcg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inssc-await__name[b-rpui6zmgcg] { font-size: 12px; color: var(--nm-ink); }
.inssc-await__pid[b-rpui6zmgcg] { font-size: 11px; color: var(--nm-muted); }

.inssc-await__note[b-rpui6zmgcg] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }
.inssc-await__partner[b-rpui6zmgcg] { font-size: 11px; color: var(--nm-muted); font-style: italic; }
/* /src/Features/_Shared/Insurance/InsuranceUpsellBlock.razor.rz.scp.css */
/* Khối chào mua bảo hiểm sau khi vé đã xuất (trang kết quả thanh toán + chi tiết booking CA).
   Tông emerald như khối chọn bảo hiểm lúc đặt vé để khách nhận ra cùng một dịch vụ. */

.insup-wrap[b-i645e5klhf] {
    background: #fff;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insup-head[b-i645e5klhf] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.insup-ico[b-i645e5klhf] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insup-title[b-i645e5klhf] { margin: 0; font-size: 15px; font-weight: 700; color: #121212; }
.insup-sub[b-i645e5klhf] { margin: 2px 0 0; font-size: 12.5px; color: #7b8190; line-height: 1.5; }

.insup-loading[b-i645e5klhf] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7b8190;
}

.insup-spinner[b-i645e5klhf] {
    width: 14px;
    height: 14px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: insup-spin-b-i645e5klhf .9s linear infinite;
}

@keyframes insup-spin-b-i645e5klhf { to { transform: rotate(360deg); } }

/* Đơn đã tạo nhưng bỏ ngang — tông hổ phách để tách khỏi khối chào bán bình thường */
.insup-pending[b-i645e5klhf] { border-color: #fde68a; background: #fffbeb; }
.insup-pending .insup-ico[b-i645e5klhf] { background: #fef3c7; color: #b45309; }

.insup-card[b-i645e5klhf] {
    border: 1px solid #f0f0ef;
    border-radius: 10px;
    padding: 13px 15px;
    background: #fafaf9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insup-card-top[b-i645e5klhf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.insup-name[b-i645e5klhf] { font-size: 14px; font-weight: 600; color: #121212; line-height: 1.3; }
.insup-price[b-i645e5klhf] { font-size: 15px; font-weight: 700; color: #059669; flex-shrink: 0; }

.insup-benefits[b-i645e5klhf] {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Cùng lý do như .ins-benefits bên InsuranceOptionsBlock: quyền lợi phải nặng hơn các dòng
   thông tin quanh nó, con số trong câu tô riêng ở InsuranceBenefitText.razor.css */
.insup-benefits li[b-i645e5klhf] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: #22262f;
    line-height: 1.5;
}

.insup-benefits svg[b-i645e5klhf] { flex-shrink: 0; margin-top: 3px; color: #059669; }

.insup-insurer[b-i645e5klhf] { font-size: 11px; color: #7b8190; }

.insup-card-foot[b-i645e5klhf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.insup-links[b-i645e5klhf] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.insup-links a[b-i645e5klhf] { font-size: 11.5px; color: #059669; text-decoration: none; }
.insup-links a:hover[b-i645e5klhf] { text-decoration: underline; }

.insup-actions[b-i645e5klhf] { display: flex; justify-content: flex-end; }

.insup-btn[b-i645e5klhf] {
    border: 1px solid #dde1e8;
    background: #fff;
    color: #3d4250;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.insup-btn-primary[b-i645e5klhf] { background: #059669; border-color: #059669; color: #fff; }
.insup-btn-primary:hover:not(:disabled)[b-i645e5klhf] { background: #047857; border-color: #047857; }
.insup-btn:disabled[b-i645e5klhf] { opacity: .6; cursor: default; }

.insup-note[b-i645e5klhf] { margin: 0; font-size: 11.5px; color: #a5abb8; line-height: 1.5; }

.insup-error[b-i645e5klhf] {
    padding: 9px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 12.5px;
}

@media (max-width: 560px) {
    .insup-card-foot[b-i645e5klhf] { flex-direction: column; align-items: stretch; }
    .insup-btn[b-i645e5klhf] { width: 100%; }
}

/* Điều kiện tuổi + cảnh báo người không được bảo hiểm (đối xứng với khối chọn lúc đặt vé). */
.insup-age[b-i645e5klhf] { font-size: 11px; color: #7b8190; line-height: 1.45; }

.insup-excluded[b-i645e5klhf] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    font-size: 11.5px;
    color: #92400e;
    line-height: 1.5;
}

.insup-excluded svg[b-i645e5klhf] { flex-shrink: 0; margin-top: 2px; }
/* /src/Features/_Shared/Marketing/BannerComponent.razor.rz.scp.css */
.title[b-moqresz7s2]{
    font-weight: 600;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mobile / tablet: text fill bằng gradient lẫn với ảnh nền → làm trắng đặc + shadow cho dễ đọc */
@media (max-width: 1023px) {
    .title[b-moqresz7s2] {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: none !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6);
    }

    .title-advance svg path[b-moqresz7s2] {
        stroke: #fff !important;
        stroke-width: 0.4 !important;
        fill: #fff !important;
        opacity: 0.95 !important;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
        animation: none !important;
    }

    .title-advance svg stop:first-child[b-moqresz7s2],
    .title-advance svg stop:last-child[b-moqresz7s2] {
        animation: none !important;
    }
}

.animate-cloud-idle[b-moqresz7s2]{
    animation: cloud-idle-b-moqresz7s2 60s infinite alternate;
}


@keyframes cloud-idle-b-moqresz7s2 {
    25% {
        transform: translate3d(80px,0,0)
    }

    50% {
        transform: translate3d(75px,-20px,0)
    }

    75% {
        transform: translate3d(55px,25px,0)
    }

    to {
        transform: translate3d(35px,-15px,0)
    }
}

.title-advance svg path[b-moqresz7s2]{
    fill: transparent;
    stroke: #fff;
    stroke-width: 0.1;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: textAnimation-b-moqresz7s2 1s ease-in-out 1 forwards;
}

.title-advance svg stop:first-child[b-moqresz7s2]{
    animation: gradientStop1Animation-b-moqresz7s2 1s ease-in-out 1 forwards;
}

.title-advance svg stop:last-child[b-moqresz7s2]{
    animation: gradientStop2Animation-b-moqresz7s2 1s ease-in-out 1 forwards;
}

@keyframes textAnimation-b-moqresz7s2 {
    0% {
        stroke-dashoffset: 50;
        fill: transparent;
    }
    80% {
        fill: transparent;
    }
    100% {
        fill: url(#textGradient);
        opacity: 60%;
        stroke-dashoffset: 0;
    }
}

@keyframes gradientStop1Animation-b-moqresz7s2 {
    0% {
        stop-opacity: 0;
    }
    80% {
        stop-opacity: 0;
    }
    100% {
        stop-opacity: 1;
    }
}

@keyframes gradientStop2Animation-b-moqresz7s2 {
    0% {
        stop-opacity: 0;
    }
    80% {
        stop-opacity: 0;
    }
    100% {
        stop-opacity: 0;
    }
}
/* /src/Features/_Shared/Marketing/BestAddressCarousel.razor.rz.scp.css */
/* BestAddressCarousel — Manager Dashboard v4 theme */
.bac-root[b-ofyhldtoml] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    padding: 64px 0;
    background: var(--d-surface);
    color: var(--d-ink);
    overflow: hidden;
    position: relative;
}

@media (min-width: 768px) {
    .bac-root[b-ofyhldtoml] { padding: 80px 0; }
}

.bac-inner[b-ofyhldtoml] {
    width: 100%;
    position: relative;
    z-index: 10;
}

/* Header */
.bac-header[b-ofyhldtoml] {
    text-align: center;
    margin-bottom: 36px;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .bac-header[b-ofyhldtoml] {
        padding: 0 32px;
        margin-bottom: 56px;
    }
}

.bac-title[b-ofyhldtoml] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0 0 10px;
    opacity: 1;
    animation: bacFadeInLeft-b-ofyhldtoml 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (min-width: 768px) {
    .bac-title[b-ofyhldtoml] { font-size: 34px; }
}

.bac-subtitle[b-ofyhldtoml] {
    font-size: 14px;
    color: var(--d-ink-3);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
    opacity: 1;
    animation: bacFadeInRight-b-ofyhldtoml 1s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both;
}

@keyframes bacFadeInLeft-b-ofyhldtoml {
    from { opacity: 0; transform: translateX(-30px) translateY(8px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes bacFadeInRight-b-ofyhldtoml {
    from { opacity: 0; transform: translateX(30px) translateY(8px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Carousel */
.bac-carousel[b-ofyhldtoml] {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.bac-fade-left[b-ofyhldtoml],
.bac-fade-right[b-ofyhldtoml] {
    position: absolute;
    inset-block: 0;
    width: 15%;
    z-index: 10;
    pointer-events: none;
}

.bac-fade-left[b-ofyhldtoml]  { left: 0;  background: linear-gradient(to right, #ffffff 12%, transparent 100%); }
.bac-fade-right[b-ofyhldtoml] { right: 0; background: linear-gradient(to left,  #ffffff 12%, transparent 100%); }

.bac-track-wrap[b-ofyhldtoml] { overflow: hidden; }

.bac-track[b-ofyhldtoml] {
    display: flex;
    align-items: center;
    padding: 32px 0;
}

@media (max-width: 767px) {
    .bac-track[b-ofyhldtoml] { padding: 16px 0; }
}

.bac-track.transition-enabled[b-ofyhldtoml] {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slide */
.bac-slide[b-ofyhldtoml] {
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(24px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

    .bac-slide.visible[b-ofyhldtoml] {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }

.bac-slide-inner[b-ofyhldtoml] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bac-card[b-ofyhldtoml] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

    .bac-card.is-active[b-ofyhldtoml] {
        box-shadow: 0 24px 48px -16px rgba(16, 24, 40, 0.30), 0 8px 16px -8px rgba(16, 24, 40, 0.15);
        z-index: 10;
        border-color: transparent;
    }

.bac-card img[b-ofyhldtoml] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-out;
}

.bac-card:hover img[b-ofyhldtoml] { transform: scale(1.05); }

.bac-card-overlay[b-ofyhldtoml] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 24, 40, 0.80) 0%, rgba(16, 24, 40, 0.18) 55%, transparent 100%);
}

.bac-info[b-ofyhldtoml] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    color: #fff;
}

    .bac-info.is-active[b-ofyhldtoml] {
        animation: bacSlideUp-b-ofyhldtoml 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

@keyframes bacSlideUp-b-ofyhldtoml {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bac-tag[b-ofyhldtoml] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bac-info-row[b-ofyhldtoml] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

    .bac-info-row.is-active[b-ofyhldtoml] { margin-bottom: 14px; }

.bac-city[b-ofyhldtoml] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    font-size: 17px;
}

    .bac-city.is-active[b-ofyhldtoml] { font-size: 24px; }

.bac-country[b-ofyhldtoml] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 2px;
}

    .bac-country svg[b-ofyhldtoml] {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

.bac-price-from[b-ofyhldtoml] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: right;
}

.bac-price[b-ofyhldtoml] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    color: #fff;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: right;
    letter-spacing: -0.02em;
}

    .bac-price.is-active[b-ofyhldtoml] { font-size: 16px; }

.bac-cta[b-ofyhldtoml] {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.25);
}

    .bac-cta:hover[b-ofyhldtoml] {
        filter: brightness(1.05);
    }

    .bac-cta:active[b-ofyhldtoml] {
        transform: translateY(1px);
    }

/* Navigation */
.bac-nav[b-ofyhldtoml] {
    margin: 16px auto 0;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (min-width: 640px) {
    .bac-nav[b-ofyhldtoml] { margin-top: 32px; }
}

.bac-nav-row[b-ofyhldtoml] {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (min-width: 640px) {
    .bac-nav-row[b-ofyhldtoml] { gap: 24px; }
}

.bac-arrow[b-ofyhldtoml] {
    width: 80px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    color: var(--d-ink-2);
}

@media (min-width: 640px) {
    .bac-arrow[b-ofyhldtoml] {
        width: 128px;
        height: 48px;
    }
}

    .bac-arrow:hover[b-ofyhldtoml] {
        background: var(--d-surface-2);
        border-color: var(--d-ink-4);
        color: var(--d-ink);
    }

    .bac-arrow svg[b-ofyhldtoml] {
        width: 16px;
        height: 16px;
    }

@media (min-width: 640px) {
    .bac-arrow svg[b-ofyhldtoml] {
        width: 20px;
        height: 20px;
    }
}

.bac-flip-in[b-ofyhldtoml] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.bac-flip-in-delayed[b-ofyhldtoml] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}

.bac-nav.visible .bac-flip-in[b-ofyhldtoml],
.bac-nav.visible .bac-flip-in-delayed[b-ofyhldtoml] {
    opacity: 1;
    transform: translateY(0);
}

/* Dots */
.bac-dots[b-ofyhldtoml] {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 640px) {
    .bac-dots[b-ofyhldtoml] { gap: 8px; }
}

.bac-dot[b-ofyhldtoml] {
    display: inline-block;
    height: 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                background-color 0.4s ease;
    flex-shrink: 0;
    border: 0;
    padding: 0;
}

.bac-dot.is-active[b-ofyhldtoml] {
    width: 32px;
    background: var(--d-accent-grad);
}

.bac-dot.is-inactive[b-ofyhldtoml] {
    width: 8px;
    background: var(--d-line);
}

    .bac-dot.is-inactive:hover[b-ofyhldtoml] {
        background: var(--d-ink-4);
    }
/* /src/Features/_Shared/Marketing/DestinationGallery.razor.rz.scp.css */
/* DestinationGallery — Manager Dashboard v4 theme */
.dgl-root[b-kv056qgf1a] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    padding: 64px 16px;
    background: var(--d-surface);
    color: var(--d-ink);
}

@media (min-width: 640px) {
    .dgl-root[b-kv056qgf1a] { padding: 80px 24px; }
}

.dgl-container[b-kv056qgf1a] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.dgl-header[b-kv056qgf1a] {
    text-align: center;
    margin-bottom: 28px;
}

.dgl-title[b-kv056qgf1a] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0 0 10px;
}

@media (min-width: 768px) {
    .dgl-title[b-kv056qgf1a] { font-size: 32px; }
}

.dgl-desc[b-kv056qgf1a] {
    font-size: 14px;
    color: var(--d-ink-3);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Tabs */
.dgl-tabs[b-kv056qgf1a] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.dgl-tab[b-kv056qgf1a] {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}

    .dgl-tab:hover[b-kv056qgf1a] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .dgl-tab.is-active[b-kv056qgf1a] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

/* Grid */
.dgl-grid[b-kv056qgf1a] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    grid-auto-rows: 180px;
}

@media (min-width: 768px) {
    .dgl-grid[b-kv056qgf1a] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Tile */
.dgl-tile[b-kv056qgf1a] {
    position: relative;
    overflow: hidden;
    border-radius: var(--d-r);
    cursor: pointer;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    text-align: left;
    padding: 0;
    min-height: 180px;
    transition: border-color .15s, box-shadow .15s;
}

    .dgl-tile:hover[b-kv056qgf1a] {
        border-color: #dde1e8;
        box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.12);
    }

@media (min-width: 768px) {
    .dgl-tile.is-feature[b-kv056qgf1a] { grid-row: span 2; }
    .dgl-tile.is-wide[b-kv056qgf1a] { grid-column: span 2; }
}

.dgl-tile img[b-kv056qgf1a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-out;
}

.dgl-tile:hover img[b-kv056qgf1a] {
    transform: scale(1.06);
}

.dgl-tile-fallback[b-kv056qgf1a] {
    width: 100%;
    height: 100%;
    background: var(--d-accent-grad);
    position: relative;
}

    .dgl-tile-fallback svg[b-kv056qgf1a] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.12;
    }

.dgl-tile-overlay[b-kv056qgf1a] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 24, 40, 0.78) 0%, rgba(16, 24, 40, 0.18) 55%, transparent 100%);
    transition: background .25s;
}

.dgl-tile:hover .dgl-tile-overlay[b-kv056qgf1a] {
    background: linear-gradient(to top, rgba(16, 24, 40, 0.85) 0%, rgba(16, 24, 40, 0.25) 60%, transparent 100%);
}

.dgl-tile-info[b-kv056qgf1a] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    color: #fff;
}

@media (min-width: 768px) {
    .dgl-tile-info[b-kv056qgf1a] { padding: 18px 20px; }
}

.dgl-tile-info-left[b-kv056qgf1a] {
    flex: 1;
    min-width: 0;
}

.dgl-iata-row[b-kv056qgf1a] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

    .dgl-iata-row svg[b-kv056qgf1a] {
        width: 14px;
        height: 14px;
        color: #ffe0c7;
        flex-shrink: 0;
    }

.dgl-route[b-kv056qgf1a] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dgl-city[b-kv056qgf1a] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .dgl-city[b-kv056qgf1a] { font-size: 20px; }
}

.dgl-tile-info-right[b-kv056qgf1a] {
    flex-shrink: 0;
    text-align: right;
}

.dgl-price-from[b-kv056qgf1a] {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.dgl-price-val[b-kv056qgf1a] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    white-space: nowrap;
    margin-top: 2px;
}

@media (min-width: 768px) {
    .dgl-price-val[b-kv056qgf1a] { font-size: 17px; }
}
/* /src/Features/_Shared/Marketing/FeaturedNewsSection.razor.rz.scp.css */
/* FeaturedNewsSection — Manager Dashboard v4 theme */
.fns-root[b-2gl3a02pw9] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    padding: 64px 0;
    color: var(--d-ink);
}

.fns-container[b-2gl3a02pw9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ─── Header ─── */
.fns-hero[b-2gl3a02pw9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

.fns-hero-left[b-2gl3a02pw9] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.fns-hero-ico[b-2gl3a02pw9] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -2px rgba(16, 24, 40, .08);
}

    .fns-hero-ico svg[b-2gl3a02pw9] {
        width: 20px;
        height: 20px;
    }

.fns-hero-eyebrow[b-2gl3a02pw9] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
}

.fns-hero-title[b-2gl3a02pw9] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0;
}

.fns-btn[b-2gl3a02pw9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    font-weight: 500;
    background: var(--d-accent-grad);
    color: #fff;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .12s;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .fns-btn:hover[b-2gl3a02pw9] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        text-decoration: none;
    }

    .fns-btn svg[b-2gl3a02pw9] {
        width: 14px;
        height: 14px;
    }

.fns-btn-mobile[b-2gl3a02pw9] {
    display: none;
}

@media (max-width: 640px) {
    .fns-btn-desktop[b-2gl3a02pw9] { display: none; }
    .fns-btn-mobile[b-2gl3a02pw9] {
        display: inline-flex;
        margin: 28px auto 0;
    }
    .fns-mobile-cta[b-2gl3a02pw9] {
        text-align: center;
    }
}

/* ─── Tabs ─── */
.fns-tabs[b-2gl3a02pw9] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.fns-tab[b-2gl3a02pw9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--d-r);
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .fns-tab:hover[b-2gl3a02pw9] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .fns-tab.is-active[b-2gl3a02pw9] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.fns-tab-count[b-2gl3a02pw9] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    opacity: 0.75;
}

/* ─── Grid ─── */
.fns-grid[b-2gl3a02pw9] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .fns-grid[b-2gl3a02pw9] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .fns-grid[b-2gl3a02pw9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ─── Card ─── */
.fns-card[b-2gl3a02pw9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    text-decoration: none;
    color: var(--d-ink);
    display: block;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

    .fns-card:hover[b-2gl3a02pw9] {
        border-color: #dde1e8;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.10);
        text-decoration: none;
        color: var(--d-ink);
    }

.fns-card-img[b-2gl3a02pw9] {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--d-surface-2);
}

    .fns-card-img img[b-2gl3a02pw9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

.fns-card:hover .fns-card-img img[b-2gl3a02pw9] {
    transform: scale(1.05);
}

.fns-card-featured[b-2gl3a02pw9] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}

.fns-card-body[b-2gl3a02pw9] {
    padding: 14px 16px;
}

.fns-card-meta[b-2gl3a02pw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.fns-card-cat[b-2gl3a02pw9] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fns-card-date[b-2gl3a02pw9] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--d-ink-4);
}

.fns-card-title[b-2gl3a02pw9] {
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .12s;
}

.fns-card:hover .fns-card-title[b-2gl3a02pw9] {
    color: var(--d-accent);
}

.fns-card-summary[b-2gl3a02pw9] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fns-card-more[b-2gl3a02pw9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d-accent);
    transition: gap .12s;
}

.fns-card:hover .fns-card-more[b-2gl3a02pw9] {
    gap: 8px;
}

.fns-card-more svg[b-2gl3a02pw9] {
    width: 12px;
    height: 12px;
}

/* ─── Skeleton ─── */
.fns-skel[b-2gl3a02pw9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    animation: fns-pulse-b-2gl3a02pw9 1.6s ease-in-out infinite;
}

.fns-skel-img[b-2gl3a02pw9] {
    height: 200px;
    background: var(--d-surface-2);
}

.fns-skel-body[b-2gl3a02pw9] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fns-skel-line[b-2gl3a02pw9] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
}

    .fns-skel-line.w-1-3[b-2gl3a02pw9] { width: 33%; }
    .fns-skel-line.w-3-4[b-2gl3a02pw9] { width: 75%; }
    .fns-skel-line.w-full[b-2gl3a02pw9] { width: 100%; }

@keyframes fns-pulse-b-2gl3a02pw9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ─── Empty ─── */
.fns-empty[b-2gl3a02pw9] {
    text-align: center;
    padding: 56px 24px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    color: var(--d-ink-3);
}

    .fns-empty svg[b-2gl3a02pw9] {
        width: 40px;
        height: 40px;
        margin: 0 auto 12px;
        color: var(--d-ink-4);
    }

    .fns-empty p[b-2gl3a02pw9] {
        font-size: 14px;
        font-weight: 500;
        color: var(--d-ink-2);
        margin: 0 0 12px;
    }

.fns-empty-link[b-2gl3a02pw9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-accent);
    text-decoration: none;
}

    .fns-empty-link:hover[b-2gl3a02pw9] {
        text-decoration: underline;
        color: var(--d-accent);
    }
/* /src/Features/_Shared/Marketing/FloatingContact.razor.rz.scp.css */
/* Nút liên hệ nhanh nổi (public/khách lẻ) — pill mở rộng nhãn khi hover.
   Hiệu ứng: vào trang trượt lên lần lượt; nút gọi rung chuông + vòng sóng cam,
   nút Zalo vòng sóng xanh LỆCH PHA (2 nút không nháy cùng lúc); hover icon
   phóng nhẹ; bấm nhún xuống. Mọi loop nằm trong prefers-reduced-motion. */

.nm-qc[b-p0k9hs8r6v] {
    position: fixed;
    right: 18px;
    bottom: 22px;
    /* dưới modal/drawer hệ Nm (z-index cao hơn nhiều), trên nội dung trang */
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Trang kết quả vé khách lẻ (/flight/results, .defr-root) ghim sẵn 2 nút chức năng
   ở ĐÚNG góc này với z thấp hơn: FAB lọc chuyến (.fsr-filter-fab, mobile, z-45)
   và nút lên đầu trang (.fsr-totop, z-44) → cụm gọi+Zalo (z-80) đè mất chức năng
   lọc. User chốt 06/08: ẨN HẲN cụm liên hệ ở màn này (lọc chuyến quan trọng hơn,
   nâng lên trên thì chồng 3-4 nút nổi rối góc phải); các trang public khác giữ.
   `:has()` cần Chromium 105+/Safari 15.4+ — ngưỡng app đã yêu cầu sẵn. */
body:has(.defr-root) .nm-qc[b-p0k9hs8r6v] {
    display: none;
}

.nm-qc__btn[b-p0k9hs8r6v] {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}

.nm-qc__btn:hover[b-p0k9hs8r6v] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .3);
    color: #fff;
}

/* Nhún xuống khi bấm — phản hồi xúc giác */
.nm-qc__btn:active[b-p0k9hs8r6v] { transform: translateY(0) scale(.95); }

/* Gradient cam đúng brand (đồng bộ badge máy bay giấy trang chủ) */
.nm-qc__btn--call[b-p0k9hs8r6v] { background: linear-gradient(135deg, #f97316, #ea580c); }
/* Xanh nhận diện Zalo */
.nm-qc__btn--zalo[b-p0k9hs8r6v] { background: #0068ff; }

.nm-qc__icon[b-p0k9hs8r6v] {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease;
}

.nm-qc__btn:hover .nm-qc__icon[b-p0k9hs8r6v] { transform: scale(1.1); }

.nm-qc__icon svg[b-p0k9hs8r6v] {
    width: 22px;
    height: 22px;
}

/* Logo Zalo bản mono trắng có sẵn trong repo (img/partner/zalo.png) */
.nm-qc__zalo-logo[b-p0k9hs8r6v] {
    width: 28px;
    height: auto;
    display: block;
}

/* Nhãn trượt mở về bên phải icon khi hover/focus (chỉ máy có hover thật) */
.nm-qc__label[b-p0k9hs8r6v] {
    max-width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    transition: max-width .28s ease, opacity .2s ease, padding .28s ease;
}

@media (hover: hover) {
    .nm-qc__btn:hover .nm-qc__label[b-p0k9hs8r6v],
    .nm-qc__btn:focus-visible .nm-qc__label[b-p0k9hs8r6v] {
        max-width: 170px;
        padding-right: 18px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Vào trang: trượt lên + nở ra, Zalo trước, nút gọi sau.
       fill BACKWARDS (không phải both): trạng thái cuối = trạng thái tự nhiên,
       fill forwards sẽ đè transform hover + tạo stacking context vĩnh viễn. */
    .nm-qc__btn[b-p0k9hs8r6v] { animation: nm-qc-in-b-p0k9hs8r6v .5s cubic-bezier(.16, 1, .3, 1) backwards; }
    .nm-qc__btn--zalo[b-p0k9hs8r6v] { animation-delay: .35s; }
    .nm-qc__btn--call[b-p0k9hs8r6v] { animation-delay: .5s; }

    /* Vòng sóng lan toả: cam ở nút gọi, xanh ở Zalo — cùng chu kỳ 3.2s
       nhưng Zalo trễ nửa chu kỳ để 2 nút thay phiên nhau "thở" */
    .nm-qc__btn--call[b-p0k9hs8r6v]::after,
    .nm-qc__btn--zalo[b-p0k9hs8r6v]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        animation: nm-qc-ring-b-p0k9hs8r6v 3.2s ease-out 1s infinite;
    }

    .nm-qc__btn--zalo[b-p0k9hs8r6v]::after {
        animation-name: nm-qc-ring-blue-b-p0k9hs8r6v;
        animation-delay: 2.6s;
    }

    /* Chuông rung "reng reng" đầu mỗi chu kỳ sóng — cùng nhịp với vòng cam */
    .nm-qc__btn--call .nm-qc__icon svg[b-p0k9hs8r6v] {
        transform-origin: 50% 50%;
        animation: nm-qc-wiggle-b-p0k9hs8r6v 3.2s ease-in-out 1s infinite;
    }
}

@keyframes nm-qc-in-b-p0k9hs8r6v {
    from { opacity: 0; transform: translateY(16px) scale(.7); }
    to { opacity: 1; transform: none; }
}

@keyframes nm-qc-ring-b-p0k9hs8r6v {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); }
    55% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
}

@keyframes nm-qc-ring-blue-b-p0k9hs8r6v {
    0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, .4); }
    55% { box-shadow: 0 0 0 14px rgba(0, 104, 255, 0); }
    100% { box-shadow: 0 0 0 14px rgba(0, 104, 255, 0); }
}

@keyframes nm-qc-wiggle-b-p0k9hs8r6v {
    0%, 20%, 100% { transform: rotate(0); }
    3% { transform: rotate(-16deg); }
    7% { transform: rotate(13deg); }
    11% { transform: rotate(-9deg); }
    15% { transform: rotate(5deg); }
}
/* /src/Features/_Shared/Marketing/HeaderComponent.razor.rz.scp.css */
/* ===== Header hệ "Bầu trời Ngọc Mai" (đồng bộ 5 trang public: navy + sky + cam mai) =====
   Thanh washi ecru cũ bị chê lệch tông trên hero xanh trời — đổi sang frosted trắng
   viền sky + mực navy. Trạng thái transparent trên hero trang chủ giữ nguyên. */

.hd-bar[b-erwmdc1p5s] {
    background: rgba(255, 255, 255, .92);
    border: 1px solid #d8e6f2;
    box-shadow: 0 10px 30px -14px rgba(15, 36, 56, .25);
}

/* Thang mực navy cho chữ điều hướng */
.hd-ink[b-erwmdc1p5s] { color: #0f2438 !important; }
.hd-ink-2[b-erwmdc1p5s] { color: #6b7f95 !important; }

/* Track cụm ngôn ngữ + tiền tệ: sky nhạt */
.hd-pill[b-erwmdc1p5s] { background: #e8f2fb; }

/* Panel menu mobile: navy hàng không (đồng bộ bảng thông tin sân bay) — chữ trắng đọc tốt */
.hd-mobile-panel[b-erwmdc1p5s] { background: linear-gradient(170deg, #16324f 0%, #0f2438 100%); }

/* Company Name Animations */
.company[b-erwmdc1p5s] {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.company h1:nth-child(2)[b-erwmdc1p5s] {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    letter-spacing: 0.3px;
    animation: type-b-erwmdc1p5s 3s steps(20, end) forwards, blink-b-erwmdc1p5s 0.75s step-end infinite;
    border-right: 1px solid orange;
    animation-delay: 0.5s;
}

.company h1:nth-child(1)[b-erwmdc1p5s] {
    font-family: "Inter", "Work Sans", sans-serif;
    margin: 0;
    color: #ea580c; /* đúng son thương hiệu --d-accent */
    font-weight: 800;
    min-width: 140px;
    background-clip: text;
    overflow: hidden;
    letter-spacing: -0.5px;
}


@keyframes type-b-erwmdc1p5s {
    0% {
        width: 0;
    }
    1%, 99% {
        border-right: 1px solid orange;
    }
    100% {
        /* 170px: đủ chỗ "Đồng hành cùng bạn" ở cỡ chữ hiệu dụng 14.4px (text-xs × html 120%) — 140px cũ cắt mất chữ "n" */
        width: 170px;
        border-right: none;
    }
}

@keyframes blink-b-erwmdc1p5s {
    50% {
        border-color: transparent;
    }
}

/* Mobile: tên + tagline chiếm 140/170px cứng làm cụm phải ĐÈ LÊN chữ (overlap ~43px ở 375px)
   và header thành 2 tầng — ẩn tagline, bỏ khoá bề rộng tên (specificity h1[b-]:nth-child
   thắng .w-\[140px\]/.text-xl của Tailwind nên không cần !important). */
@media (max-width: 767px) {
    .company h1:nth-child(2)[b-erwmdc1p5s] { display: none; }
    .company h1:nth-child(1)[b-erwmdc1p5s] {
        min-width: 0;
        width: auto;
        font-size: 17px;
    }
}

/* <480px: cụm phải (pill + giỏ + login + menu) ~215px + logo 73px + tên 74px = 362px
   vượt 343px khả dụng → chỉ giữ LOGO (tự nhận diện thương hiệu), như chuẩn mobile phổ biến. */
@media (max-width: 479px) {
    .company[b-erwmdc1p5s] { display: none; }
}

/* Popover ngôn ngữ + tiền tệ: mobile pill nằm gần GIỮA thanh → neo right-0 theo pill
   làm panel 230px tràn -9px khỏi mép trái + treo lơ lửng giữa hero. Chuyển thành
   sheet full-width dưới header (đáy bar ~58px). Header mobile không transform nên
   position:fixed tính theo viewport chuẩn. */
@media (max-width: 639px) {
    .locale-popover[b-erwmdc1p5s] {
        position: fixed;
        top: 66px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* Flag Styles */
.flag-vn[b-erwmdc1p5s] {
    background: linear-gradient(to bottom, #da251d 0%, #da251d 100%);
}

.flag-uk[b-erwmdc1p5s] {
    background: linear-gradient(to bottom, 
        #012169 0%, #012169 30%, 
        white 30%, white 40%, 
        #C8102E 40%, #C8102E 60%, 
        white 60%, white 70%, 
        #012169 70%, #012169 100%);
}

/* Header Hide/Show Animation */
/* ★ Thang lớp phủ (z-index): nội dung trang < 900 (header) < 1000 (NmModal /
   hộp thoại của trang) < 1100 (dropdown) < 1200 (tooltip) < 1300 (command palette).
   CẤM đẩy header lên 9999/999999 — làm vậy mọi hộp thoại public sẽ bị header đè lên. */
.header-scroll[b-erwmdc1p5s] {
    transition: transform 0.3s ease-in-out;
    z-index: 900;
}

.header-hidden[b-erwmdc1p5s] {
    transform: translateY(-100%);
}

/* Menu Icon Animation */
@keyframes fade-in-b-erwmdc1p5s {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.animate-fade-in[b-erwmdc1p5s] {
    animation: fade-in-b-erwmdc1p5s 0.3s ease-out forwards;
}

/* Mobile Menu Animations */
@keyframes slideInRight-b-erwmdc1p5s {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-erwmdc1p5s {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mobile-menu-overlay[b-erwmdc1p5s] {
    animation: fadeIn-b-erwmdc1p5s 0.3s ease-out forwards;
}

.mobile-menu-panel[b-erwmdc1p5s] {
    animation: slideInRight-b-erwmdc1p5s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
}

/* Smooth transitions for menu items */
.mobile-menu-panel nav a[b-erwmdc1p5s] {
    transition: all 0.2s ease;
    opacity: 0;
    animation: fadeInUp-b-erwmdc1p5s 0.4s ease-out forwards;
}

.mobile-menu-panel nav a:nth-child(1)[b-erwmdc1p5s] {
    animation-delay: 0.1s;
}

.mobile-menu-panel nav a:nth-child(2)[b-erwmdc1p5s] {
    animation-delay: 0.15s;
}

.mobile-menu-panel nav a:nth-child(3)[b-erwmdc1p5s] {
    animation-delay: 0.2s;
}

.mobile-menu-panel nav a:nth-child(4)[b-erwmdc1p5s] {
    animation-delay: 0.25s;
}

.mobile-menu-panel nav a:nth-child(5)[b-erwmdc1p5s] {
    animation-delay: 0.3s;
}

.mobile-menu-panel nav a:nth-child(6)[b-erwmdc1p5s] {
    animation-delay: 0.35s;
}

.mobile-menu-panel nav a:active[b-erwmdc1p5s] {
    transform: scale(0.98);
}

@keyframes fadeInUp-b-erwmdc1p5s {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header and content animations */
.mobile-menu-header[b-erwmdc1p5s] {
    animation: fadeInDown-b-erwmdc1p5s 0.4s ease-out 0.1s forwards;
    opacity: 0;
}

@keyframes fadeInDown-b-erwmdc1p5s {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-erwmdc1p5s {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

:deep(.animate-slide-up)[b-erwmdc1p5s] {
    animation: slideUp-b-erwmdc1p5s 0.3s ease-out;
}
/* /src/Features/_Shared/Marketing/MaiPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   MaiPanel — vỏ "thẻ cành mai" dùng chung (trang chủ + khu tin tức).
   Tách nguyên xi từ .home-sub-* của Index.razor.css (08/08).

   ⚠ VÌ SAO CÒN MÀU LITERAL: đây là một BỨC MINH HOẠ (nền trời, thân cành nâu,
   hoa/cánh mai bốn sắc cam, triện, máy bay giấy) chứ không phải khối UI —
   các sắc này không có trong token vocabulary. Giữ đúng literal của bản trang
   chủ để 3 chỗ dùng trùng khít pixel; đổi màu ở ĐÂY là đổi cả 3 chỗ.
   Riêng chữ/khoảng cách thì bám --nm-font để cùng hệ chữ với phần còn lại.
   ═══════════════════════════════════════════════════════════════════ */
.mp[b-3koudc52o9] {
    /* Cam của bản trang chủ — CỐ Ý không phải --nm-brand-500: đổi sẽ làm lệch
       khối này khỏi 5 trang public khác vốn cùng hệ #ea580c. */
    --mp-accent: #ea580c;
    --mp-accent-deep: #c2410c;
    --mp-ink: #0f2438;
    --mp-ink-3: #6b7f95;

    position: relative;
    padding: 3rem 1rem;
    font-family: var(--nm-font);
}

@media (min-width: 640px) {
    .mp[b-3koudc52o9] { padding: 4rem 1.5rem; }
}

/* Thẻ: góc trên-trái bo lớn kiểu cánh quạt, trời nhạt */
.mp-card[b-3koudc52o9] {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    border-radius: 5rem 1rem 1rem 1rem;
    background: linear-gradient(165deg, #f3f8fd 0%, #e2edf8 100%);
    box-shadow: 0 24px 48px -24px rgba(15, 36, 56, .3), 0 2px 8px rgba(15, 36, 56, .05);
    overflow: visible;
}

@media (min-width: 640px) {
    .mp-card[b-3koudc52o9] { padding: 4rem 2.5rem; }
}

@media (min-width: 768px) {
    .mp-card[b-3koudc52o9] { border-radius: 10rem 1rem 1rem 1rem; }
}

/* Khung tranh mỏng viền trong + vệt loang (bokashi) cam nhẹ sau gốc cành mai */
.mp-card[b-3koudc52o9]::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(15, 36, 56, .1);
    border-radius: inherit;
    background: radial-gradient(320px 230px at 10% 96%, rgba(251, 146, 60, .12), transparent 70%);
    pointer-events: none;
}

/* Badge máy bay giấy nhô ra mép phải trên */
.mp-plane[b-3koudc52o9] {
    position: absolute;
    top: 0;
    right: -1rem;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316 0%, var(--mp-accent) 100%);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.mp-plane svg[b-3koudc52o9] { width: 28px; height: 28px; }

@media (min-width: 640px) {
    .mp-plane[b-3koudc52o9] { right: -1.25rem; }
}

/* Cành mai góc dưới-trái — decor nền, nằm dưới nội dung */
.mp-card[b-3koudc52o9]  .mp-branch {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 320px;
    height: auto;
    opacity: .9;
    pointer-events: none;
    display: none;
}

/* Cánh mai rơi */
.mp-card[b-3koudc52o9]  .mp-petal {
    position: absolute;
    opacity: .7;
    pointer-events: none;
    display: none;
}

/* Vị trí cánh rơi: né vùng tiêu đề/form, thả vào khoảng trống;
   mỗi cánh một góc xoay riêng (--r0/--r1) cho tự nhiên */
.mp-card[b-3koudc52o9]  .mp-petal--1 { width: 13px; left: 15%; top: 24%; --r0: -10deg; --r1: 26deg; }
.mp-card[b-3koudc52o9]  .mp-petal--2 { width: 10px; right: 12%; top: 56%; --r0: 48deg; --r1: 76deg; }
.mp-card[b-3koudc52o9]  .mp-petal--3 { width: 11px; left: 30%; bottom: 12%; --r0: -42deg; --r1: -12deg; }
.mp-card[b-3koudc52o9]  .mp-petal--4 { width: 9px; left: 27%; top: 42%; --r0: 100deg; --r1: 128deg; }

/* Ấn chìm hoa mai trong khoảng trống góc cong lớn trên-trái */
.mp-card[b-3koudc52o9]  .mp-mark {
    position: absolute;
    left: 7%;
    top: 12%;
    width: 150px;
    height: 150px;
    opacity: .1;
    pointer-events: none;
    display: none;
}

/* Decor chỉ bật ở màn đủ rộng — màn hẹp cành mai đè lên chữ */
@media (min-width: 768px) {
    .mp-card[b-3koudc52o9]  .mp-branch,
    .mp-card[b-3koudc52o9]  .mp-petal,
    .mp-card[b-3koudc52o9]  .mp-mark { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
    .mp-card[b-3koudc52o9]  .mp-petal { animation: mp-petal-sway-b-3koudc52o9 8s ease-in-out infinite alternate; }
    .mp-card[b-3koudc52o9]  .mp-petal--2 { animation-duration: 11s; animation-delay: -3s; }
    .mp-card[b-3koudc52o9]  .mp-petal--3 { animation-duration: 9.5s; animation-delay: -6s; }
    .mp-card[b-3koudc52o9]  .mp-petal--4 { animation-duration: 12.5s; animation-delay: -8s; }
}

@keyframes mp-petal-sway-b-3koudc52o9 {
    from { transform: translateY(-8px) rotate(var(--r0, -12deg)); }
    to { transform: translateY(12px) rotate(var(--r1, 24deg)); }
}

/* ───── Nội dung ───── */
.mp-body[b-3koudc52o9] {
    position: relative;
    z-index: 20;
    text-align: center;
}

.mp-heading[b-3koudc52o9] {
    max-width: 48rem;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.375;
    letter-spacing: -.02em;
    color: var(--mp-ink);
    text-wrap: balance;
}

@media (min-width: 640px) { .mp-heading[b-3koudc52o9] { font-size: 28px; } }
@media (min-width: 1024px) { .mp-heading[b-3koudc52o9] { font-size: 33px; } }

/* Dấu triện đóng sau chữ ký cuối tiêu đề */
.mp-seal[b-3koudc52o9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 12px;
    padding: 4px;
    background: var(--mp-accent);
    border-radius: 7px;
    transform: rotate(5deg) translateY(4px);
    box-shadow: 0 2px 6px rgba(234, 88, 12, .3);
}

.mp-seal svg[b-3koudc52o9] { width: 100%; height: 100%; }
.mp-seal-eye[b-3koudc52o9] { fill: var(--mp-accent); }

.mp-sub[b-3koudc52o9] {
    max-width: 40rem;
    margin: .85rem auto 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--mp-ink-3);
}

/* Khối hành động — form hoặc cặp nút, luôn căn giữa */
.mp-actions[b-3koudc52o9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

.mp-note[b-3koudc52o9] {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--mp-ink-3);
}

/* ───── Nút CTA cho nơi dùng truyền nút thay vì form ─────
   ::deep bắt buộc: nút do TRANG cha render nên không mang scope-id của file này. */
.mp-actions[b-3koudc52o9]  .mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--mp-accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}

.mp-actions[b-3koudc52o9]  .mp-btn:hover {
    background: var(--mp-accent-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.mp-actions[b-3koudc52o9]  .mp-btn--ghost {
    background: #fff;
    color: var(--mp-ink);
    border-color: rgba(15, 36, 56, .12);
    box-shadow: 0 1px 2px 0 rgba(15, 36, 56, .06);
}

.mp-actions[b-3koudc52o9]  .mp-btn--ghost:hover {
    background: #fff;
    color: var(--mp-accent-deep);
    border-color: var(--mp-accent);
}
/* /src/Features/_Shared/Marketing/NewsCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   NewsCard — thẻ bài viết dùng chung khu Tin tức
   Hệ "NM EDITORIAL" (v4, 07/08): token-only theo SSOT `--nm-*`.
   Bản v3 tự khai lại cả bảng màu (--ink/--accent/--mono) "vì CSS isolation
   không kế thừa từ trang cha" — SAI: token khai ở :root (tokens.css) nên
   biến CSS vẫn tới được component scoped. Đã bỏ hẳn bảng màu riêng.
   ⚠ Không dùng --nm-accent/--nm-bg/--nm-shadow-sm: wwwroot/app.css khai lại
   các tên này ở :root và nạp SAU tokens → giá trị khác SSOT.
   ═══════════════════════════════════════════════════════════════════ */
/* Lớp phủ đọc chữ ở dáng lead cần rgba() mà token là hex → các gradient bên dưới
   viết thẳng rgb(18, 24, 38) = --nm-ink (#121826). Đổi token ink thì sửa cả đây. */
.nc[b-phgul35ujf] {
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    font-family: var(--nm-font);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}

.nc:hover[b-phgul35ujf] {
    transform: translateY(-3px);
    border-color: var(--nm-brand-300);
    box-shadow: var(--nm-shadow-pop);
}

.nc:focus-visible[b-phgul35ujf] {
    outline: 2px solid var(--nm-brand-500);
    outline-offset: 3px;
}

/* ───── Ảnh ───── */
.nc-img[b-phgul35ujf] {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--nm-surface-2);
    overflow: hidden;
    flex: none;
}

.nc-img img[b-phgul35ujf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.nc:hover .nc-img img[b-phgul35ujf] { transform: scale(1.05); }

/* Không có ảnh bìa → bông mai cam nhạt trên nền cam soft, không để mảng xám trống */
.nc-fb[b-phgul35ujf] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-brand-50);
    color: var(--nm-brand-300);
}
.nc-fb svg[b-phgul35ujf] { width: 34%; max-width: 74px; opacity: .55; }

/* Nhãn "Nổi bật" = pill cam thương hiệu */
.nc-badge[b-phgul35ujf] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: .22rem .6rem;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: var(--nm-shadow);
}

/* ───── Nội dung ───── */
.nc-body[b-phgul35ujf] {
    padding: .95rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nc-meta[b-phgul35ujf] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nm-muted);
    min-width: 0;
}

/* Cắt bằng flex-shrink chứ KHÔNG bằng max-width cố định: trong cột phải hẹp,
   trần 60% từng cắt "VÉ MÁY BAY" thành "VÉ MÁY…" dù còn thừa chỗ. */
.nc-cat[b-phgul35ujf] {
    color: var(--nm-brand-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.nc-meta > :last-child[b-phgul35ujf] { flex: none; }

.nc-dot[b-phgul35ujf] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex: none;
}

.nc-title[b-phgul35ujf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -.013em;
    color: var(--nm-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}

.nc:hover .nc-title[b-phgul35ujf] { color: var(--nm-brand-700); }

.nc-sum[b-phgul35ujf] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--nm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═════════ Dáng LEAD — ảnh tràn khung, chữ đè nền tối ═════════ */
.nc--lead[b-phgul35ujf] {
    position: relative;
    justify-content: flex-end;
    min-height: 340px;
}

.nc--lead .nc-img[b-phgul35ujf] {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

/* Dìm chung cả ảnh một chút cho khối thẻ trầm lại — KHÔNG gánh việc đọc chữ. */
.nc--lead[b-phgul35ujf]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 24, 38, 0) 45%, rgba(18, 24, 38, .3) 100%);
    pointer-events: none;
}

/* flex:none — .nc-body mặc định là flex:1 nên ở dáng lead nó CĂNG HẾT chiều cao
   thẻ, đẩy chữ lên sát mép trên và đè vào nhãn "Nổi bật". Phải ôm sát nội dung
   thì justify-content:flex-end mới dìm được khối chữ xuống đáy như thiết kế. */
.nc--lead .nc-body[b-phgul35ujf] {
    position: relative;
    z-index: 1;
    flex: none;
    padding: 1.5rem 1.5rem 1.6rem;
    gap: .6rem;
    /* Chốt chặn cho ảnh bìa sáng bất thường mà lớp phủ chưa đủ dìm */
    text-shadow: 0 1px 10px rgba(18, 24, 38, .45);
}

/* Lớp phủ đọc chữ neo vào KHỐI CHỮ, không vào thẻ: tiêu đề dài ngắn khác nhau
   nên khối chữ khi thì bắt đầu ở 30% khi thì 45% chiều cao thẻ — gradient cắm
   mốc cứng theo thẻ thì kiểu gì cũng có bài bị nhãn nằm trên vùng ảnh sáng
   (đã đo: nền sau dòng nhãn L=156, chữ nhoè hẳn trên ảnh bản đồ).
   z-index -1: nằm sau chữ nhưng vẫn trong ngăn xếp của .nc-body nên phủ lên ảnh. */
.nc--lead .nc-body[b-phgul35ujf]::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -3.25rem;
    z-index: -1;
    /* Mốc dốc tính bằng ĐỘ DÀI TUYỆT ĐỐI, không phải phần trăm: khối chữ cao
       250–300px nên mốc 42% rơi tuốt xuống giữa tiêu đề, dòng nhãn phía trên
       vẫn nằm trên ảnh trần (đo được 1,68:1 — chuẩn tối thiểu là 3:1).
       Đặt dốc kết thúc đúng ở mép trên khối chữ thì MỌI dòng đều đủ nền. */
    background: linear-gradient(180deg,
        rgba(18, 24, 38, 0) 0,
        rgba(18, 24, 38, .72) 3.25rem,
        rgba(18, 24, 38, .88) 100%);
    pointer-events: none;
}

.nc--lead .nc-meta[b-phgul35ujf] { color: rgba(255, 255, 255, .74); }
.nc--lead .nc-cat[b-phgul35ujf] { color: var(--nm-brand-300); }

.nc--lead .nc-title[b-phgul35ujf] {
    color: #fff;
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.022em;
    -webkit-line-clamp: 3;
}

.nc--lead:hover .nc-title[b-phgul35ujf] { color: #fff; }

.nc--lead .nc-sum[b-phgul35ujf] {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    -webkit-line-clamp: 2;
}

.nc--lead .nc-badge[b-phgul35ujf] {
    top: 14px;
    left: 14px;
}

.nc-cta[b-phgul35ujf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: .2rem;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}
.nc-cta svg[b-phgul35ujf] { width: 14px; height: 14px; transition: transform .2s ease; }
.nc--lead:hover .nc-cta svg[b-phgul35ujf] { transform: translateX(3px); }

@media (min-width: 1024px) {
    .nc--lead[b-phgul35ujf] { min-height: 420px; }
    .nc--lead .nc-body[b-phgul35ujf] { padding: 1.9rem 2rem 2rem; }
}

/* ═════════ Dáng SIDE — hàng ngang gọn cho cột phải ═════════ */
.nc--side[b-phgul35ujf] {
    flex-direction: row;
    gap: .7rem;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.nc--side:hover[b-phgul35ujf] {
    transform: none;
    box-shadow: none;
}

.nc--side .nc-img[b-phgul35ujf] {
    width: 88px;
    height: 64px;
    aspect-ratio: auto;
    border-radius: var(--nm-r-input);
    flex: none;
}

.nc--side .nc-body[b-phgul35ujf] {
    padding: 0;
    gap: .25rem;
    justify-content: center;
}

.nc--side .nc-title[b-phgul35ujf] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.nc--side .nc-meta[b-phgul35ujf] { font-size: 10px; }

/* ═════════ Dáng RAIL — ô trong dải trượt ngang ═════════ */
.nc--rail[b-phgul35ujf] {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.nc--rail:hover[b-phgul35ujf] {
    transform: translateY(-2px);
    box-shadow: none;
}

.nc--rail .nc-img[b-phgul35ujf] {
    border-radius: var(--nm-r-input);
    border: 1px solid var(--nm-border);
}

.nc--rail:hover .nc-img[b-phgul35ujf] { border-color: var(--nm-brand-300); }

.nc--rail .nc-body[b-phgul35ujf] {
    padding: .7rem 0 0;
    gap: .3rem;
}

.nc--rail .nc-title[b-phgul35ujf] {
    font-size: 14px;
    line-height: 1.4;
}

/* Màn hẹp: tiêu đề tràn 3 dòng nên khối chữ cao gần 270px — nếu thẻ chỉ 300px
   thì chữ dâng lên đè đúng vào nhãn "Nổi bật" ở góc trên. Phải chừa đủ ảnh. */
@media (max-width: 640px) {
    .nc--lead[b-phgul35ujf] { min-height: 380px; }
    .nc--lead .nc-body[b-phgul35ujf] { padding: 1.2rem 1.15rem 1.3rem; }
    .nc-body[b-phgul35ujf] { padding: .85rem .9rem 1rem; }
}
/* /src/Features/_Shared/Marketing/NewsletterPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   NewsletterPanel — form đăng ký nhận tin bên trong MaiPanel.
   Tách nguyên xi từ .home-sub-mail/.home-sub-btn của Index.razor.css (08/08).
   Cam literal #ea580c: xem chú thích "VÌ SAO CÒN MÀU LITERAL" ở MaiPanel.razor.css.
   ═══════════════════════════════════════════════════════════════════ */
.nlp-form[b-gedva5zape] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    font-family: var(--nm-font);
}

@media (min-width: 640px) {
    .nlp-form[b-gedva5zape] { flex-direction: row; }
}

/* Ô email: label bọc icon + input nên bấm đâu trong pill cũng focus, ring focus
   vẽ quanh NGUYÊN pill (input bên trong đã outline:none nên không có ring lẻ). */
.nlp-mail[b-gedva5zape] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 16px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(15, 36, 56, .06);
    cursor: text;
    transition: box-shadow .15s ease;
}

.nlp-mail:focus-within[b-gedva5zape] {
    box-shadow: 0 1px 2px 0 rgba(15, 36, 56, .06),
                inset 0 0 0 1px #ea580c,
                0 0 0 3px rgba(234, 88, 12, .12);
}

.nlp-mail svg[b-gedva5zape] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex: none;
    color: #9ca3af;
}

.nlp-mail input[b-gedva5zape] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
}

.nlp-mail input[b-gedva5zape]::placeholder { color: #9ca3af; }
.nlp-mail input:disabled[b-gedva5zape] { opacity: .6; }

.nlp-btn[b-gedva5zape] {
    flex: none;
    padding: 16px 40px;
    border: none;
    border-radius: 12px;
    background: #ea580c;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.nlp-btn:hover:not(:disabled)[b-gedva5zape] {
    background: #c2410c;
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.nlp-btn:disabled[b-gedva5zape] { opacity: .6; cursor: not-allowed; }

.nlp-msg[b-gedva5zape] {
    margin: 1rem 0 0;
    font-size: 14px;
    font-weight: 500;
}

.nlp-msg--ok[b-gedva5zape] { color: #059669; }
.nlp-msg--err[b-gedva5zape] { color: #dc2626; }
/* /src/Features/_Shared/Marketing/NewsSubNav.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   NewsSubNav — dải điều hướng khu Tin tức
   Hệ "NM EDITORIAL" (v4, 07/08): token-only theo SSOT `--nm-*`, breadcrumb
   và ô tìm là primitive NM. Bản v3 tự khai lại bảng màu + IBM Plex Mono —
   đã bỏ (token :root vẫn tới được component scoped).
   ⚠ HeaderComponent là fixed (desktop) / absolute (mobile) và KHÔNG chiếm
   chỗ trong dòng chảy → padding-top ở đây chính là khoảng chừa cho header
   (104px / 88px mobile).
   ⚠ NmBreadcrumb/NmInput/NmIconButton render markup của RIÊNG chúng nên
   không mang scope-id của file này → mọi rule chạm vào chúng phải qua ::deep.
   ═══════════════════════════════════════════════════════════════════ */
.nsn[b-twauaxggop] {
    position: relative;
    padding: 104px 0 0;
    background: var(--nm-surface);
    border-bottom: 1px solid var(--nm-border);
    font-family: var(--nm-font);
}

.nsn-wrap[b-twauaxggop] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ───── Breadcrumb (NmBreadcrumb) ───── */
.nsn[b-twauaxggop]  .nsn-crumb {
    min-width: 0;
    padding: .15rem 0 .8rem;
}

/* ───── Thanh chính ───── */
.nsn-bar[b-twauaxggop] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: .9rem;
    min-width: 0;
}

.nsn-brand[b-twauaxggop] {
    flex: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.018em;
    color: var(--nm-ink);
    transition: color .15s ease;
}

.nsn-brand:hover[b-twauaxggop] { color: var(--nm-brand-700); }

/* ───── Dải chuyên mục ───── */
.nsn-rail[b-twauaxggop] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
    /* Mép phải mờ dần: báo hiệu còn chuyên mục phía sau khi tràn */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}

.nsn-rail[b-twauaxggop]::-webkit-scrollbar { display: none; }

/* Chip chuyên mục — sao chép diện mạo .nm-chip (NmChip là <button>, đây là <a>) */
.nsn-chip[b-twauaxggop] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink-2);
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.nsn-chip:hover[b-twauaxggop] { border-color: var(--nm-border-strong); color: var(--nm-ink); }

.nsn-chip--on[b-twauaxggop] {
    background: var(--nm-brand-50);
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
}

.nsn-chip--on:hover[b-twauaxggop] { border-color: var(--nm-brand-500); color: var(--nm-brand-700); }

.nsn-ct[b-twauaxggop] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.nsn-chip--on .nsn-ct[b-twauaxggop] { color: var(--nm-brand-600); }

/* ───── Ô tìm kiếm (NmInput + NmIconButton) ───── */
.nsn-search[b-twauaxggop] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    width: 250px;
}

.nsn-search-field[b-twauaxggop] { flex: 1 1 auto; min-width: 0; }

/* Ô search của trình duyệt có nút × riêng, trùng với icon kính lúp của NmInput */
.nsn-search[b-twauaxggop]  input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ───── Thu hẹp ───── */
@media (max-width: 1024px) {
    .nsn-search[b-twauaxggop] { width: 210px; }
}

@media (max-width: 860px) {
    .nsn-bar[b-twauaxggop] { flex-wrap: wrap; gap: .8rem 1rem; }
    .nsn-rail[b-twauaxggop] { order: 3; flex-basis: 100%; }
    .nsn-search[b-twauaxggop] { flex: 1 1 auto; width: auto; min-width: 170px; }
}

@media (max-width: 640px) {
    .nsn[b-twauaxggop] { padding-top: 88px; }
    .nsn-wrap[b-twauaxggop] { padding: 0 1.15rem; }
    .nsn-brand[b-twauaxggop] { font-size: 15px; }
}
/* /src/Features/_Shared/Marketing/PageBackgroundBanner.razor.rz.scp.css */
/* PageBackgroundBanner — Manager Dashboard v4 theme */
.pbb-root[b-zles2hu316] {
    --d-bg: #f7f8fa;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);

    position: relative;
    width: 100%;
}

.pbb-bg[b-zles2hu316] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pbb-fallback[b-zles2hu316] {
    background: linear-gradient(135deg, #fafaf7 0%, #fff2e8 60%, #ffe0c7 100%);
}

.pbb-overlay[b-zles2hu316] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 40, 0.10) 0%, rgba(16, 24, 40, 0.35) 100%);
}

.pbb-content[b-zles2hu316] {
    position: relative;
    z-index: 10;
}
/* /src/Features/_Shared/Marketing/PromotionsSlider.razor.rz.scp.css */
/* PromotionsSlider — Manager Dashboard v4 theme */
.psl-root[b-y1pttb7q2z] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    overflow: hidden;
    position: relative;
    padding: 8px;
    color: var(--d-ink);
}

@media (min-width: 768px) {
    .psl-root[b-y1pttb7q2z] { padding: 32px 16px 16px; }
}

.psl-container[b-y1pttb7q2z] {
    width: 100%;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Track */
.psl-track[b-y1pttb7q2z] {
    display: flex;
    align-items: stretch;
    min-height: 200px;
}

/* Item */
.psl-item[b-y1pttb7q2z] {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: visible;
    cursor: pointer;
}

.psl-item-inner[b-y1pttb7q2z] {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    flex: 1;
    transform-origin: center center;
    will-change: transform, box-shadow;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-radius: 16px;
    overflow: hidden;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
}

.psl-item img[b-y1pttb7q2z] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    min-height: 100%;
}

/* Right fade overlay */
.psl-fade-right[b-y1pttb7q2z] {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to left, var(--d-surface), rgba(255, 255, 255, 0));
}

/* Navigation buttons */
.psl-nav-btn[b-y1pttb7q2z] {
    background: var(--d-surface);
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10);
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
}

    .psl-nav-btn:hover[b-y1pttb7q2z] {
        transform: translateY(-50%) scale(1.06);
        box-shadow: 0 8px 20px rgba(16, 24, 40, 0.14);
        background: var(--d-surface-2);
        border-color: var(--d-ink-4);
        color: var(--d-ink);
    }

    .psl-nav-btn:active[b-y1pttb7q2z] {
        transform: translateY(-50%) scale(0.96);
        transition-duration: 0.1s;
    }

    .psl-nav-btn svg[b-y1pttb7q2z] {
        width: 16px;
        height: 16px;
    }

.psl-nav-btn.psl-prev[b-y1pttb7q2z] { left: 12px; }
.psl-nav-btn.psl-next[b-y1pttb7q2z] { right: 12px; }

/* Dots */
.psl-dots[b-y1pttb7q2z] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    margin-top: 24px;
}

.psl-dot[b-y1pttb7q2z] {
    background: var(--d-line);
    display: inline-block;
    height: 4px;
    width: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease,
                opacity 0.4s ease,
                transform 0.3s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

    .psl-dot:hover[b-y1pttb7q2z] {
        background: var(--d-ink-4);
        opacity: 1;
        transform: scaleY(1.3);
    }

    .psl-dot.is-active[b-y1pttb7q2z] {
        background: var(--d-accent-grad);
        width: 24px;
        height: 4px;
        opacity: 1;
    }

/* Entrance animations */
.psl-flip-in[b-y1pttb7q2z] {
    opacity: 0;
    transform: perspective(800px) rotateX(-30deg) translateY(8px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.psl-flip-in-delayed[b-y1pttb7q2z] {
    opacity: 0;
    transform: perspective(800px) rotateX(-30deg) translateY(8px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s,
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
}

.psl-nav.visible .psl-flip-in[b-y1pttb7q2z],
.psl-nav.visible .psl-flip-in-delayed[b-y1pttb7q2z] {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) translateY(0);
}

.psl-spacer-loop[b-y1pttb7q2z] {
    height: 12px;
}

.psl-spacer-static[b-y1pttb7q2z] {
    height: 8px;
}

/* Desktop */
@media (min-width: 769px) {
    .psl-track[b-y1pttb7q2z] { min-height: 240px; height: 240px; }
    .psl-item[b-y1pttb7q2z] { height: 240px; }
    .psl-item-inner[b-y1pttb7q2z] { height: 100%; min-height: 240px; }
    .psl-item img[b-y1pttb7q2z] { height: 100%; min-height: 240px; max-height: none; }
}

/* Mobile */
@media (max-width: 768px) {
    .psl-track[b-y1pttb7q2z] { min-height: 200px; padding: 0; }
    .psl-item[b-y1pttb7q2z] { padding: 2px; }
    .psl-item-inner[b-y1pttb7q2z] {
        border-radius: 14px;
        box-shadow: 0 4px 8px rgba(16, 24, 40, 0.10);
        min-height: 200px;
        height: 200px;
    }
    .psl-item img[b-y1pttb7q2z] { min-height: 200px; height: 200px; object-fit: cover; }
    .psl-nav-btn[b-y1pttb7q2z] { display: none; }
    .psl-dots[b-y1pttb7q2z] { margin-top: 20px; padding: 0 8px; }
    .psl-dot[b-y1pttb7q2z] { width: 12px; height: 3px; }
    .psl-dot.is-active[b-y1pttb7q2z] { width: 24px; height: 3px; }
}
/* /src/Features/_Shared/Modals/EmployeeImportModal.razor.rz.scp.css */
/* EmployeeImportModal — Manager Dashboard v4 theme */
.eim-overlay[b-bwctmg83ek] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

.eim-panel[b-bwctmg83ek] {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 90vh;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--d-ink);
}

.eim-head[b-bwctmg83ek] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    flex-shrink: 0;
}

.eim-title[b-bwctmg83ek] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.eim-subtitle[b-bwctmg83ek] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

    .eim-subtitle code[b-bwctmg83ek] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11.5px;
        background: var(--d-surface-2);
        border: 1px solid var(--d-line);
        padding: 1px 6px;
        border-radius: 6px;
        color: var(--d-ink-2);
    }

.eim-close[b-bwctmg83ek] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}

    .eim-close:hover[b-bwctmg83ek] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.eim-body[b-bwctmg83ek] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eim-error[b-bwctmg83ek] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.eim-tpl-card[b-bwctmg83ek] {
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.eim-tpl-text[b-bwctmg83ek] {
    font-size: 12px;
    color: var(--d-ink-2);
    line-height: 1.5;
    min-width: 0;
}

    .eim-tpl-text b[b-bwctmg83ek] {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
    }

.eim-tier[b-bwctmg83ek] {
    display: block;
    margin-top: 3px;
    line-height: 1.5;
}

    .eim-tier strong[b-bwctmg83ek] {
        margin-right: 4px;
    }

.eim-tier-note[b-bwctmg83ek] {
    display: block;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px dashed var(--d-line);
    color: var(--d-ink-3);
    font-style: italic;
    line-height: 1.5;
}

.eim-tpl-btn[b-bwctmg83ek] {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .eim-tpl-btn:hover[b-bwctmg83ek] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

.eim-field-label[b-bwctmg83ek] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.eim-file[b-bwctmg83ek] {
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .eim-file[b-bwctmg83ek]::file-selector-button {
        margin-right: 12px;
        height: 32px;
        padding: 0 14px;
        border: 0;
        border-radius: 8px;
        background: var(--d-accent-grad);
        color: #fff;
        font-size: 12.5px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

        .eim-file[b-bwctmg83ek]::file-selector-button:hover {
            background: var(--d-accent-grad-hover);
        }

.eim-file-info[b-bwctmg83ek] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .eim-file-info b[b-bwctmg83ek] {
        font-weight: 500;
        color: var(--d-ink);
    }

/* ── Chế độ nhập: chỉ tạo mới / tạo mới + cập nhật ── */
.eim-mode-grid[b-bwctmg83ek] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.eim-mode[b-bwctmg83ek] {
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: border-color .12s, background .12s;
}

    .eim-mode:hover[b-bwctmg83ek] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

    .eim-mode.is-on[b-bwctmg83ek] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .eim-mode:disabled[b-bwctmg83ek] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.eim-mode-name[b-bwctmg83ek] {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
}

.eim-mode-desc[b-bwctmg83ek] {
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.45;
}

/* ── Vai trò mặc định ── */
.eim-role-grid[b-bwctmg83ek] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.eim-role[b-bwctmg83ek] {
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color .12s, background .12s;
}

    .eim-role:hover[b-bwctmg83ek] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

    .eim-role.is-on[b-bwctmg83ek] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

.eim-role-name[b-bwctmg83ek] {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
}

.eim-role-desc[b-bwctmg83ek] {
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.4;
}

.eim-hint[b-bwctmg83ek] {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

    /* Câu giải thích đứng TRƯỚC lưới vai trò — đảo lề để không dính vào nhãn phía trên */
    .eim-hint--lead[b-bwctmg83ek] {
        margin: 0 0 8px;
    }

    .eim-hint.is-warn[b-bwctmg83ek] {
        color: #b45309;
        font-weight: 500;
    }

/* ── Tổng kết kiểm tra tại chỗ ── */
.eim-check[b-bwctmg83ek] {
    padding: 9px 12px;
    border-radius: var(--d-r);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

    .eim-check.is-ok[b-bwctmg83ek] {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .eim-check.is-bad[b-bwctmg83ek] {
        border-color: #fed7aa;
        background: #fff7ed;
        color: #b45309;
    }

    /* Đang gọi máy chủ kiểm tra */
    .eim-check.is-run[b-bwctmg83ek] {
        border-color: var(--d-line);
        background: var(--d-surface-2);
        color: var(--d-ink-2);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Thiết lập đã đổi sau lần kiểm tra gần nhất — kết quả trên màn không còn đáng tin */
    .eim-check.is-stale[b-bwctmg83ek] {
        border-color: #fde68a;
        background: #fffbeb;
        color: #92400e;
    }

/* ── Chẩn đoán đọc file: cột nào hiểu được, cột nào bị bỏ ── */
.eim-diag[b-bwctmg83ek] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--d-ink-2);
}

    .eim-diag b[b-bwctmg83ek] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 5px;
    }

.eim-diag-ok[b-bwctmg83ek],
.eim-diag-warn[b-bwctmg83ek] {
    display: block;
}

.eim-diag-ok[b-bwctmg83ek] { color: #15803d; }

.eim-diag-warn[b-bwctmg83ek] {
    color: #b45309;
    font-weight: 500;
}

/* ── Nhãn trạng thái từng dòng ── */
.eim-badge[b-bwctmg83ek] {
    display: inline-block;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    .eim-badge.is-ok[b-bwctmg83ek] {
        background: #f0fdf4;
        color: #15803d;
        border: 1px solid #bbf7d0;
    }

    .eim-badge.is-bad[b-bwctmg83ek] {
        background: #fef2f2;
        color: #b91c1c;
        border: 1px solid #fecaca;
        cursor: help;
    }

    /* Dòng sẽ TẠO MỚI nhân viên */
    .eim-badge.is-new[b-bwctmg83ek] {
        background: #f0fdf4;
        color: #15803d;
        border: 1px solid #bbf7d0;
    }

    /* Dòng sẽ CẬP NHẬT nhân viên có sẵn (chế độ cập nhật) */
    .eim-badge.is-upd[b-bwctmg83ek] {
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
    }

.eim-tbl tbody tr.is-bad td[b-bwctmg83ek] {
    background: #fffbfb;
}

/* ── Mức sẵn sàng dùng hệ thống ── */
.eim-ready[b-bwctmg83ek] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}

    .eim-ready b[b-bwctmg83ek] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #b45309;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .eim-ready ul[b-bwctmg83ek] {
        margin: 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .eim-ready li[b-bwctmg83ek] {
        font-size: 12.5px;
        color: var(--d-ink-2);
        line-height: 1.5;
    }

.eim-ready-n[b-bwctmg83ek] {
    display: inline-block;
    min-width: 26px;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fed7aa;
    color: #9a3412;
    font-weight: 600;
    font-size: 11.5px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Ô trống ở cột quyết định đặt được vé hay không */
.eim-tbl td.eim-gap[b-bwctmg83ek] {
    color: #b45309;
    background: #fff7ed;
}

.eim-result-actions[b-bwctmg83ek] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.eim-section-title[b-bwctmg83ek] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}

.eim-tbl-wrap[b-bwctmg83ek] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: auto;
    max-height: 320px;
}

.eim-tbl[b-bwctmg83ek] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .eim-tbl thead th[b-bwctmg83ek] {
        position: sticky;
        top: 0;
        background: var(--d-surface);
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--d-line);
        white-space: nowrap;
    }

    .eim-tbl tbody td[b-bwctmg83ek] {
        padding: 8px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
    }

    .eim-tbl tbody tr:last-child td[b-bwctmg83ek] {
        border-bottom: 0;
    }

    .eim-tbl tbody tr:hover[b-bwctmg83ek] {
        background: var(--d-surface-2);
    }

    .eim-tbl td.center[b-bwctmg83ek] {
        text-align: center;
        color: var(--d-ink-4);
    }

    .eim-tbl td.code[b-bwctmg83ek] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11.5px;
        color: var(--d-ink);
    }

    .eim-tbl td.muted[b-bwctmg83ek] {
        color: var(--d-ink-3);
    }

.eim-more[b-bwctmg83ek] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin: 6px 0 0;
}

.eim-result[b-bwctmg83ek] {
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

    .eim-result h3[b-bwctmg83ek] {
        margin: 0 0 6px;
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .eim-result p[b-bwctmg83ek] {
        margin: 0;
        font-size: 14px;
        color: var(--d-ink-2);
    }

    .eim-result .ok[b-bwctmg83ek] {
        font-weight: 600;
        color: #16a34a;
        font-variant-numeric: tabular-nums;
    }

    .eim-result .err[b-bwctmg83ek] {
        font-weight: 600;
        color: #dc2626;
        font-variant-numeric: tabular-nums;
    }

    .eim-result .warn[b-bwctmg83ek] {
        font-weight: 600;
        color: #d97706;
        font-variant-numeric: tabular-nums;
    }

    .eim-result details[b-bwctmg83ek] {
        margin-top: 8px;
        font-size: 12px;
    }

        .eim-result details summary[b-bwctmg83ek] {
            cursor: pointer;
            font-weight: 500;
            padding: 4px 0;
        }

        .eim-result details ul[b-bwctmg83ek] {
            margin: 6px 0 0;
            padding-left: 18px;
        }

    .eim-result .eim-err-list[b-bwctmg83ek] { color: #b91c1c; }
    .eim-result .eim-err-list li[b-bwctmg83ek] { line-height: 1.6; }
    .eim-result .eim-warn-list[b-bwctmg83ek] { color: #92400e; }
    .eim-result .eim-warn-list li[b-bwctmg83ek] { line-height: 1.6; }

.eim-foot[b-bwctmg83ek] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    flex-shrink: 0;
}

.eim-btn[b-bwctmg83ek] {
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .12s, color .12s, filter .12s;
}

    .eim-btn:hover[b-bwctmg83ek] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.eim-btn-primary[b-bwctmg83ek] {
    border-color: transparent;
    color: #ffffff;
    background: var(--d-accent-grad);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .eim-btn-primary:hover[b-bwctmg83ek] {
        background: var(--d-accent-grad-hover);
        color: #ffffff;
    }

.eim-btn:disabled[b-bwctmg83ek] {
    opacity: 0.55;
    cursor: not-allowed;
}

.eim-spin[b-bwctmg83ek] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eim-spin-b-bwctmg83ek 0.7s linear infinite;
}

/* Variant cho nút secondary (chữ cam trên nền trắng) — viền cam nhạt */
.eim-spin--sm[b-bwctmg83ek] {
    width: 13px;
    height: 13px;
    border-color: rgba(255, 107, 0, 0.25);
    border-top-color: #ff6b00;
}

@keyframes eim-spin-b-bwctmg83ek {
    to { transform: rotate(360deg); }
}
/* /src/Features/_Shared/Modals/QrPaymentModal.razor.rz.scp.css */
/* QrPaymentModal — Manager Dashboard v4 theme (warm-neutral + orange) */
.qrm-overlay[b-7tsjmoef3q] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-surface-3: #faf8f5;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-2: #ff7d1f;
    --d-accent-soft: #fff8f2;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(3px);
}

.qrm-panel[b-7tsjmoef3q] {
    width: 100%;
    max-width: 420px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28);
    overflow: hidden;
}

.qrm-head[b-7tsjmoef3q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 14px;
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
}

.qrm-head-icon[b-7tsjmoef3q] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid #ffe0c7;
}

.qrm-head-text[b-7tsjmoef3q] {
    flex: 1;
    min-width: 0;
}

.qrm-title[b-7tsjmoef3q] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.qrm-subtitle[b-7tsjmoef3q] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.qrm-close[b-7tsjmoef3q] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
}

    .qrm-close:hover[b-7tsjmoef3q] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: #dde1e8;
    }

.qrm-body[b-7tsjmoef3q] {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* QR image */
.qrm-qr-wrap[b-7tsjmoef3q] {
    display: flex;
    justify-content: center;
}

.qrm-qr-frame[b-7tsjmoef3q] {
    padding: 10px;
    background: var(--d-surface);
    border: 1.5px solid var(--d-line);
    border-radius: 12px;
    box-shadow: 0 4px 14px -4px rgba(255, 107, 0, 0.18);
}

.qrm-qr-img[b-7tsjmoef3q] {
    width: 220px;
    height: 220px;
    display: block;
    image-rendering: pixelated;
}

/* Info rows */
.qrm-info[b-7tsjmoef3q] {
    background: var(--d-surface-3);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qrm-info-row[b-7tsjmoef3q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    letter-spacing: -0.01em;
}

.qrm-info-label[b-7tsjmoef3q] {
    color: var(--d-ink-3);
}

.qrm-info-value[b-7tsjmoef3q] {
    color: var(--d-ink);
    font-weight: 500;
}

.qrm-mono[b-7tsjmoef3q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

.qrm-amount[b-7tsjmoef3q] {
    color: var(--d-ink);
    font-weight: 600;
}

.qrm-countdown[b-7tsjmoef3q] {
    color: #b91c1c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Steps */
.qrm-steps[b-7tsjmoef3q] {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: decimal;
    color: var(--d-ink-2);
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

    .qrm-steps li + li[b-7tsjmoef3q] {
        margin-top: 3px;
    }

/* Pulse indicator */
.qrm-pulse[b-7tsjmoef3q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--d-ink-3);
    padding-top: 2px;
}

.qrm-pulse-dot[b-7tsjmoef3q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    animation: qrm-pulse-b-7tsjmoef3q 1.6s ease-out infinite;
}

@keyframes qrm-pulse-b-7tsjmoef3q {
    0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Success / Error state */
.qrm-state[b-7tsjmoef3q] {
    text-align: center;
    padding: 18px 4px 8px;
}

.qrm-state-icon[b-7tsjmoef3q] {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--d-line);
}

    .qrm-state-icon.is-success[b-7tsjmoef3q] {
        background: #ecfdf5;
        border-color: #a7f3d0;
        color: #059669;
    }

    .qrm-state-icon.is-error[b-7tsjmoef3q] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

.qrm-state-title[b-7tsjmoef3q] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
}

.qrm-state-msg[b-7tsjmoef3q] {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

/* Mobile */
@media (max-width: 480px) {
    .qrm-qr-img[b-7tsjmoef3q] {
        width: 190px;
        height: 190px;
    }

    .qrm-panel[b-7tsjmoef3q] {
        max-width: 100%;
    }
}
/* /src/Features/_Shared/Modals/QuickAddModal.razor.rz.scp.css */
/* QuickAddModal — "Nhập nhanh" dán danh sách. Token-only, đi cùng NmModal/DataGrid. */
.qa-head[b-uxcnhuvi4q] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qa-head-sub[b-uxcnhuvi4q] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

.qa-body[b-uxcnhuvi4q] { display: flex; flex-direction: column; gap: 12px; }
.qa-options[b-uxcnhuvi4q] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}

/* ── Nhắc định dạng ── */
.qa-format[b-uxcnhuvi4q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--nm-border-strong);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-brand-50);
}
.qa-format-text[b-uxcnhuvi4q] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qa-format-text b[b-uxcnhuvi4q] { font-size: 12px; font-weight: 700; color: var(--nm-ink); }
.qa-format-text small[b-uxcnhuvi4q] { font-size: 11.5px; color: var(--nm-ink-2); line-height: 1.5; }
.qa-format-cols[b-uxcnhuvi4q] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.qa-format-col[b-uxcnhuvi4q] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    border: 1px solid var(--nm-border);
    white-space: nowrap;
}
.qa-format-col.is-req[b-uxcnhuvi4q] { color: var(--nm-brand-700); border-color: var(--nm-brand-300); font-weight: 700; }
.qa-format-sep[b-uxcnhuvi4q] { color: var(--nm-muted); font-size: 11px; }

/* ── Ô nhập ── */
[b-uxcnhuvi4q] .qa-textarea {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
}

/* ── Thống kê nhanh dưới ô nhập ── */
.qa-meta[b-uxcnhuvi4q] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qa-stat[b-uxcnhuvi4q] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.qa-stat b[b-uxcnhuvi4q] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.qa-stat.is-ok b[b-uxcnhuvi4q] { color: var(--nm-ok); }
.qa-stat.is-bad b[b-uxcnhuvi4q] { color: var(--nm-bad); }
.qa-meta-clear[b-uxcnhuvi4q] { margin-left: auto; }

/* ── Bảng xem trước ── */
.qa-preview[b-uxcnhuvi4q] {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
}
.qa-line[b-uxcnhuvi4q] { font-size: 11.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.qa-cell[b-uxcnhuvi4q] {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 12.5px;
    color: var(--nm-ink-2);
}
.qa-cell.is-main[b-uxcnhuvi4q] { font-weight: 600; color: var(--nm-ink); }
.qa-status[b-uxcnhuvi4q] { display: inline-flex; }

[b-uxcnhuvi4q] .qa-row-bad .nm-grid__td { background: var(--nm-bad-soft); }
[b-uxcnhuvi4q] .qa-row-created .nm-grid__td { background: var(--nm-ok-soft); }

/* Footer: nút "Sửa lại dòng lỗi" đứng riêng bên trái */
.qa-foot[b-uxcnhuvi4q] { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-end; }
[b-uxcnhuvi4q] .qa-foot .nm-btn.qa-foot-retry { margin-right: auto; }

@media (max-width: 640px) {
    .qa-format[b-uxcnhuvi4q] { flex-direction: column; align-items: stretch; }
    .qa-cell[b-uxcnhuvi4q] { max-width: 130px; }
}
/* /src/Features/_Shared/Modals/ServiceRequestViolationModal.razor.rz.scp.css */
/* ServiceRequestViolationModal — Manager Dashboard v4 theme */
.srvm-overlay[b-zfs5xpuv6c] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

.srvm-backdrop[b-zfs5xpuv6c] {
    position: absolute;
    inset: 0;
}

.srvm-panel[b-zfs5xpuv6c] {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28);
    color: var(--d-ink);
}

.srvm-head[b-zfs5xpuv6c] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.srvm-icon[b-zfs5xpuv6c] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #b45309;
}

.srvm-title[b-zfs5xpuv6c] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.srvm-subtitle[b-zfs5xpuv6c] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.srvm-body[b-zfs5xpuv6c] {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.srvm-violations[b-zfs5xpuv6c] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
}

    .srvm-violations .lbl[b-zfs5xpuv6c] {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .srvm-violations ul[b-zfs5xpuv6c] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .srvm-violations li[b-zfs5xpuv6c] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #92400e;
        line-height: 1.5;
    }

    .srvm-violations svg[b-zfs5xpuv6c] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #d97706;
    }

.srvm-info[b-zfs5xpuv6c] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
    font-size: 14px;
}

.srvm-info-row[b-zfs5xpuv6c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .srvm-info-row + .srvm-info-row[b-zfs5xpuv6c] {
        border-top: 1px solid var(--d-line-2);
    }

    .srvm-info-row .k[b-zfs5xpuv6c] {
        color: var(--d-ink-3);
    }

    .srvm-info-row .v[b-zfs5xpuv6c] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .srvm-info-row .v.amount[b-zfs5xpuv6c] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 14px;
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.srvm-field-label[b-zfs5xpuv6c] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.srvm-textarea[b-zfs5xpuv6c] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    resize: vertical;
    transition: border-color .12s, box-shadow .12s;
    font-family: inherit;
}

    .srvm-textarea:focus[b-zfs5xpuv6c] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.srvm-error[b-zfs5xpuv6c] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.srvm-success[b-zfs5xpuv6c] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

    .srvm-success .t[b-zfs5xpuv6c] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #15803d;
    }

    .srvm-success .d[b-zfs5xpuv6c] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #166534;
    }

.srvm-actions[b-zfs5xpuv6c] {
    padding: 16px 22px;
    border-top: 1px solid var(--d-line);
    display: flex;
    gap: 8px;
}

.srvm-btn[b-zfs5xpuv6c] {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .12s, color .12s;
}

    .srvm-btn:hover[b-zfs5xpuv6c] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.srvm-btn-primary[b-zfs5xpuv6c] {
    border-color: transparent;
    color: #fff;
    background: var(--d-accent-grad);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .srvm-btn-primary:hover[b-zfs5xpuv6c] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.srvm-btn:disabled[b-zfs5xpuv6c] {
    opacity: 0.55;
    cursor: not-allowed;
}

.srvm-btn-grow[b-zfs5xpuv6c] {
    flex: 1;
}

.srvm-spin[b-zfs5xpuv6c] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: srvm-spin-b-zfs5xpuv6c 0.7s linear infinite;
}

@keyframes srvm-spin-b-zfs5xpuv6c {
    to { transform: rotate(360deg); }
}
/* /src/Features/_Shared/PaymentResult/ESimPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ESimPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.epr-root[b-n06rnt7fre] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.epr-num[b-n06rnt7fre] {
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -0.01em;
}

/* ─── Card primitive ─── */
.epr-card[b-n06rnt7fre] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.epr-card-hd[b-n06rnt7fre] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--d-surface);
}

.epr-card-hd-info[b-n06rnt7fre] {
    min-width: 0;
}

.epr-card-title[b-n06rnt7fre] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.epr-card-sub[b-n06rnt7fre] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

.epr-card-body[b-n06rnt7fre] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Status pill ─── */
.epr-pill[b-n06rnt7fre] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    flex-shrink: 0;
}

    .epr-pill.good[b-n06rnt7fre] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .epr-pill.warn[b-n06rnt7fre] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: #fde68a;
    }

    .epr-pill.muted[b-n06rnt7fre] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

/* ─── QR / Activation block ─── */
.epr-qr-row[b-n06rnt7fre] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--d-good-soft);
    border: 1px solid color-mix(in srgb, var(--d-good) 25%, transparent);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

@media (min-width: 768px) {
    .epr-qr-row[b-n06rnt7fre] {
        flex-direction: row;
        align-items: center;
    }
}

.epr-qr-img[b-n06rnt7fre] {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--d-good) 30%, transparent);
    background: #fff;
    flex-shrink: 0;
}

.epr-qr-info[b-n06rnt7fre] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.epr-qr-eyebrow[b-n06rnt7fre] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-good);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.epr-kv[b-n06rnt7fre] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .epr-kv .k[b-n06rnt7fre] {
        color: var(--d-ink-3);
    }

    .epr-kv .v[b-n06rnt7fre] {
        color: var(--d-ink);
        font-weight: 500;
        word-break: break-all;
        text-align: right;
    }

    .epr-kv .v.mono[b-n06rnt7fre] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

.epr-link[b-n06rnt7fre] {
    color: var(--d-accent);
    font-size: 12px;
    text-decoration: none;
    word-break: break-all;
}

    .epr-link:hover[b-n06rnt7fre] {
        text-decoration: underline;
    }

/* ─── Pending box ─── */
.epr-pending[b-n06rnt7fre] {
    background: var(--d-warn-soft);
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.epr-pending-hd[b-n06rnt7fre] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--d-warn);
    font-weight: 600;
    font-size: 14px;
}

    .epr-pending-hd svg[b-n06rnt7fre] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

.epr-pending-hint[b-n06rnt7fre] {
    font-size: 12px;
    color: var(--d-ink-2);
    margin: 0 0 10px;
}

.epr-error[b-n06rnt7fre] {
    background: var(--d-danger-soft);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
    color: var(--d-danger);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    margin-bottom: 10px;
}

/* ─── Buttons ─── */
.epr-btn-accent[b-n06rnt7fre] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--d-r);
    border: 1px solid transparent;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, background .12s;
}

    .epr-btn-accent:hover:not(:disabled)[b-n06rnt7fre] {
        background: var(--d-accent-grad-hover);
    }

    .epr-btn-accent:disabled[b-n06rnt7fre] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .epr-btn-accent svg[b-n06rnt7fre] {
        width: 16px;
        height: 16px;
    }

.epr-spin[b-n06rnt7fre] {
    animation: epr-spin-b-n06rnt7fre 0.7s linear infinite;
}

@keyframes epr-spin-b-n06rnt7fre {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Detail grid ─── */
.epr-grid[b-n06rnt7fre] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .epr-grid[b-n06rnt7fre] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.epr-cell-lbl[b-n06rnt7fre] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.epr-cell-val[b-n06rnt7fre] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
    /* Chuỗi dài không dấu cách (danh sách mã quốc gia "BF,CD,CF,…") từng tràn đè lên ô bên cạnh. */
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* Ô quá dài: kẹp 2 dòng, xem đầy đủ khi rê chuột (title). */
.epr-cell-val--clamp[b-n06rnt7fre] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.epr-grid > div[b-n06rnt7fre] {
    min-width: 0;
}

/* ─── Date row ─── */
.epr-dates[b-n06rnt7fre] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .epr-dates strong[b-n06rnt7fre] {
        color: var(--d-ink-2);
        font-weight: 500;
    }

/* ─── Guide ─── */
.epr-guide[b-n06rnt7fre] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.epr-guide-hd[b-n06rnt7fre] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

.epr-guide-list[b-n06rnt7fre] {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}
/* /src/Features/_Shared/PaymentResult/FastTrackPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrackPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.ftpr-root[b-wexoa99nmk] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.ftpr-hero[b-wexoa99nmk] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftpr-hero-ico[b-wexoa99nmk] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -3px rgba(16, 24, 40, .08);
}

    .ftpr-hero-ico svg[b-wexoa99nmk] {
        width: 22px;
        height: 22px;
    }

.ftpr-hero-text h2[b-wexoa99nmk] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.ftpr-hero-text p[b-wexoa99nmk] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.ftpr-card[b-wexoa99nmk] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftpr-card-hd[b-wexoa99nmk] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--d-line);
}

.ftpr-card-hd-info[b-wexoa99nmk] {
    min-width: 0;
}

.ftpr-card-title[b-wexoa99nmk] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftpr-card-sub[b-wexoa99nmk] {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.ftpr-pill[b-wexoa99nmk] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border: 1px solid color-mix(in srgb, var(--d-accent) 22%, transparent);
    flex-shrink: 0;
}

.ftpr-card-body[b-wexoa99nmk] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Code chip ─── */
.ftpr-code[b-wexoa99nmk] {
    display: inline-flex;
    flex-direction: column;
    background: var(--d-accent-grad-soft);
    border: 1px solid #ffe0c7;
    border-radius: var(--d-r);
    padding: 8px 12px;
}

.ftpr-code-lbl[b-wexoa99nmk] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftpr-code-val[b-wexoa99nmk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
    margin-top: 2px;
}

/* ─── Detail grid ─── */
.ftpr-grid[b-wexoa99nmk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .ftpr-grid[b-wexoa99nmk] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ftpr-cell-lbl[b-wexoa99nmk] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.ftpr-cell-val[b-wexoa99nmk] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .ftpr-cell-val.mono[b-wexoa99nmk] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

.ftpr-money[b-wexoa99nmk] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

    .ftpr-money .unit[b-wexoa99nmk] {
        margin-left: 3px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-3);
    }

/* ─── Notes ─── */
.ftpr-notes[b-wexoa99nmk] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.ftpr-notes-hd[b-wexoa99nmk] {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ftpr-notes-hd svg[b-wexoa99nmk] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

.ftpr-notes-list[b-wexoa99nmk] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .ftpr-notes-list li[b-wexoa99nmk] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .ftpr-notes-list li[b-wexoa99nmk]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Features/_Shared/PaymentResult/FlightPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FlightPaymentResult — Manager Dashboard v4 theme
   FlightTicketFace giữ nguyên (file CSS riêng)
   ═══════════════════════════════════════════════════════════════ */

.flpr-root[b-4p8flhrzdg] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Header ─── */
.flpr-hd[b-4p8flhrzdg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flpr-hd-ico[b-4p8flhrzdg] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-3);
}

    .flpr-hd-ico.good[b-4p8flhrzdg] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
        color: var(--d-good);
    }

    .flpr-hd-ico svg[b-4p8flhrzdg] {
        width: 20px;
        height: 20px;
    }

.flpr-hd-text h2[b-4p8flhrzdg] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.flpr-hd-text p[b-4p8flhrzdg] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

/* ─── Card primitive ─── */
.flpr-card[b-4p8flhrzdg] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.flpr-card-hd[b-4p8flhrzdg] {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .flpr-card-hd svg[b-4p8flhrzdg] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* ─── Passenger table ─── */
.flpr-tbl-wrap[b-4p8flhrzdg] {
    overflow-x: auto;
    margin: 0 -16px -14px;
}

.flpr-tbl[b-4p8flhrzdg] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

    .flpr-tbl thead th[b-4p8flhrzdg] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 12px;
        border-top: 1px solid var(--d-line);
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
    }

        .flpr-tbl thead th:first-child[b-4p8flhrzdg] {
            padding-left: 16px;
        }

        .flpr-tbl thead th:last-child[b-4p8flhrzdg] {
            padding-right: 16px;
        }

    .flpr-tbl tbody td[b-4p8flhrzdg] {
        padding: 11px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        vertical-align: middle;
        white-space: nowrap;
    }

        .flpr-tbl tbody td:first-child[b-4p8flhrzdg] {
            padding-left: 16px;
        }

        .flpr-tbl tbody td:last-child[b-4p8flhrzdg] {
            padding-right: 16px;
        }

    .flpr-tbl tbody tr:last-child td[b-4p8flhrzdg] {
        border-bottom: 0;
    }

    .flpr-tbl tbody tr:hover[b-4p8flhrzdg] {
        background: var(--d-surface-2);
    }

.flpr-tbl-idx[b-4p8flhrzdg] {
    color: var(--d-ink-4);
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.flpr-tbl-name[b-4p8flhrzdg] {
    color: var(--d-ink);
    font-weight: 500;
}

.flpr-tbl-mono[b-4p8flhrzdg] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.flpr-seat-tag[b-4p8flhrzdg] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    font-size: 11px;
    font-weight: 500;
}

/* ─── Contact grid ─── */
.flpr-contact-grid[b-4p8flhrzdg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .flpr-contact-grid[b-4p8flhrzdg] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.flpr-cell-lbl[b-4p8flhrzdg] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.flpr-cell-val[b-4p8flhrzdg] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
    word-break: break-word;
}

/* ─── Notes ─── */
.flpr-notes-list[b-4p8flhrzdg] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .flpr-notes-list li[b-4p8flhrzdg] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .flpr-notes-list li[b-4p8flhrzdg]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-ink-4);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Features/_Shared/PaymentResult/FlightTicketFace.razor.rz.scp.css */
/* ================================================================
   ui-ticket-international — scoped CSS
   ================================================================ */

.ticket[b-tzd6bjwo3j] {
    /* Chiều cao badge ngày bay (absolute top-right): py-1.5 + text-sm ≈ 34px.
       Cột phải chừa đúng khoảng này + hở 18px để badge không đè giờ bay. */
    --ticket-badge-h: 34px;
    display: flex;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(255, 152, 0, 0.15);
    overflow: visible;
    position: relative;
    z-index: 10;
    border: 2px solid #ff9800;
    width: 100%;
}

/* Notch: vòng tròn 28px, dịch ra ngoài 14px.
   clip-path cắt tại ~43% → phần fill trắng bên trong lấn 2px
   qua mép ticket, che kín border cam. */
.notch[b-tzd6bjwo3j] {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 40%;
    transform: translateX(-50%);
    background: var(--ticket-bg, #ffffff);
    border-radius: 50%;
    z-index: 30;
    border: 2px solid #ff9800;
}

.notch-top[b-tzd6bjwo3j] {
    top: -14px;
    clip-path: polygon(0 42%, 100% 42%, 100% 100%, 0 100%);
}

.notch-bottom[b-tzd6bjwo3j] {
    bottom: -14px;
    clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%);
}

/* LEFT — 40% gradient panel */
.left[b-tzd6bjwo3j] {
    padding: 12px 16px;
    width: 40%;
    color: #fff2e8;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    border-radius: 18px 0 0 18px;
}

.left[b-tzd6bjwo3j]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 60%, #fff2e8 100%);
    z-index: 0;
}

.left[b-tzd6bjwo3j]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 152, 0, 0.7) 0px,
        rgba(255, 152, 0, 0.7) 6px,
        transparent 6px,
        transparent 12px
    );
    z-index: 3;
}

.left .background-layer[b-tzd6bjwo3j] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 60%, #fff2e8 100%);
    z-index: 0;
}

.left .pattern-layer[b-tzd6bjwo3j] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='passport-pattern' x='0' y='0' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M15 15 L25 10 L35 20 L25 30 Z'/%3E%3Cpath d='M45 25 L50 15 L55 25 L50 35 Z'/%3E%3Ccircle cx='15' cy='45' r='3'/%3E%3Ccircle cx='45' cy='45' r='3'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23passport-pattern)'/%3E%3C/svg%3E");
    opacity: 0.8;
    z-index: 1;
}

.left .content[b-tzd6bjwo3j] {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.left h2[b-tzd6bjwo3j] {
    margin: 0;
    font-size: 15px;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.left .logo[b-tzd6bjwo3j] {
    margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.left .logo img[b-tzd6bjwo3j] {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(255, 253, 253, 0.8));
}

.info[b-tzd6bjwo3j] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* RIGHT — 60% cream panel */
.right[b-tzd6bjwo3j] {
    padding: calc(var(--ticket-badge-h) + 18px) 16px 0;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, #fff2e8 0%, #ffe0b2 100%);
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 0 18px 18px 0;
}

.flight-time[b-tzd6bjwo3j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    flex: 1;
    gap: 6px;
}

.time[b-tzd6bjwo3j] {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.time.start[b-tzd6bjwo3j] {
    color: #ff7d1f;
}

.time.end[b-tzd6bjwo3j] {
    color: #ff9a52;
    text-align: end;
}

.airport[b-tzd6bjwo3j] {
    font-size: 14px;
    margin-top: 3px;
    color: #475569;
    line-height: 1.5;
}

.airport.end[b-tzd6bjwo3j] {
    text-align: end;
}

.route[b-tzd6bjwo3j] {
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 2;
    min-width: 60px;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    align-self: center;
}

.route .fare-label[b-tzd6bjwo3j] {
    font-size: 11px;
    color: #ff9800;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
}

.route .plane-row[b-tzd6bjwo3j] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
}

.route .plane-line[b-tzd6bjwo3j] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #ff7d1f;
}

.route .plane-icon[b-tzd6bjwo3j] {
    width: 18px;
    height: 18px;
    fill: #ff7d1f;
    flex-shrink: 0;
}

.route .duration-pill[b-tzd6bjwo3j] {
    font-size: 11px;
    line-height: 15px;
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.25);
    font-weight: 600;
    white-space: nowrap;
}

.bottom[b-tzd6bjwo3j] {
    border-top: 1px dashed #cbd5e1;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
    gap: 6px;
}
/* /src/Features/_Shared/PaymentResult/HotelPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HotelPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.hpr-root[b-zu0hy8mywj] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.hpr-hero[b-zu0hy8mywj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hpr-hero-ico[b-zu0hy8mywj] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -3px rgba(16, 24, 40, .08);
}

    .hpr-hero-ico svg[b-zu0hy8mywj] {
        width: 22px;
        height: 22px;
    }

.hpr-hero-text h2[b-zu0hy8mywj] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.hpr-hero-text p[b-zu0hy8mywj] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.hpr-card[b-zu0hy8mywj] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.hpr-card-hd[b-zu0hy8mywj] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line);
}

.hpr-card-title[b-zu0hy8mywj] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.hpr-card-sub[b-zu0hy8mywj] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.hpr-card-body[b-zu0hy8mywj] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Code chips ─── */
.hpr-codes[b-zu0hy8mywj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hpr-code[b-zu0hy8mywj] {
    display: inline-flex;
    flex-direction: column;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px 12px;
}

    .hpr-code.good[b-zu0hy8mywj] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .hpr-code.accent[b-zu0hy8mywj] {
        background: var(--d-accent-grad-soft);
        border-color: #ffe0c7;
    }

.hpr-code-lbl[b-zu0hy8mywj] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-ink-3);
}

.hpr-code.good .hpr-code-lbl[b-zu0hy8mywj] {
    color: var(--d-good);
}

.hpr-code.accent .hpr-code-lbl[b-zu0hy8mywj] {
    color: var(--d-accent);
}

.hpr-code-val[b-zu0hy8mywj] {
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.hpr-code.good .hpr-code-val[b-zu0hy8mywj] {
    color: var(--d-good);
}

.hpr-code.accent .hpr-code-val[b-zu0hy8mywj] {
    color: var(--d-accent);
}

/* ─── Detail grid ─── */
.hpr-grid[b-zu0hy8mywj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .hpr-grid[b-zu0hy8mywj] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hpr-cell-lbl[b-zu0hy8mywj] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.hpr-cell-val[b-zu0hy8mywj] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .hpr-cell-val.mono[b-zu0hy8mywj] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

/* ─── Timeline ─── */
.hpr-timeline[b-zu0hy8mywj] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
}

.hpr-tl-side[b-zu0hy8mywj] {
    text-align: center;
    flex-shrink: 0;
}

.hpr-tl-lbl[b-zu0hy8mywj] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hpr-tl-date[b-zu0hy8mywj] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.hpr-tl-time[b-zu0hy8mywj] {
    font-size: 11px;
    color: var(--d-ink-4);
}

.hpr-tl-mid[b-zu0hy8mywj] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hpr-tl-line[b-zu0hy8mywj] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

.hpr-tl-mid-lbl[b-zu0hy8mywj] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    white-space: nowrap;
}

/* ─── Guests list ─── */
.hpr-guests[b-zu0hy8mywj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hpr-guest-row[b-zu0hy8mywj] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.hpr-avatar[b-zu0hy8mywj] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    flex-shrink: 0;
    border: 1px solid #ffe0c7;
}

.hpr-guest-name[b-zu0hy8mywj] {
    color: var(--d-ink);
    font-weight: 500;
}

.hpr-guest-id[b-zu0hy8mywj] {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

/* ─── Notes ─── */
.hpr-notes-hd[b-zu0hy8mywj] {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hpr-notes-list[b-zu0hy8mywj] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .hpr-notes-list li[b-zu0hy8mywj] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .hpr-notes-list li[b-zu0hy8mywj]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Features/_Shared/PaymentResult/TourPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TourPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.tpr-root[b-z3hatb9rem] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.tpr-hero[b-z3hatb9rem] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tpr-hero-ico[b-z3hatb9rem] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -3px rgba(16, 24, 40, .08);
}

    .tpr-hero-ico svg[b-z3hatb9rem] {
        width: 22px;
        height: 22px;
    }

.tpr-hero-text h2[b-z3hatb9rem] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.tpr-hero-text p[b-z3hatb9rem] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.tpr-card[b-z3hatb9rem] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.tpr-card-hd[b-z3hatb9rem] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-line);
}

.tpr-card-title[b-z3hatb9rem] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.tpr-card-sub[b-z3hatb9rem] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

.tpr-card-body[b-z3hatb9rem] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Code chips ─── */
.tpr-codes[b-z3hatb9rem] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tpr-code[b-z3hatb9rem] {
    display: inline-flex;
    flex-direction: column;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px 12px;
}

    .tpr-code.good[b-z3hatb9rem] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .tpr-code.accent[b-z3hatb9rem] {
        background: var(--d-accent-grad-soft);
        border-color: #ffe0c7;
    }

.tpr-code-lbl[b-z3hatb9rem] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-ink-3);
}

.tpr-code.good .tpr-code-lbl[b-z3hatb9rem] {
    color: var(--d-good);
}

.tpr-code.accent .tpr-code-lbl[b-z3hatb9rem] {
    color: var(--d-accent);
}

.tpr-code-val[b-z3hatb9rem] {
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.tpr-code.good .tpr-code-val[b-z3hatb9rem] {
    color: var(--d-good);
}

.tpr-code.accent .tpr-code-val[b-z3hatb9rem] {
    color: var(--d-accent);
}

/* ─── Timeline ─── */
.tpr-timeline[b-z3hatb9rem] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
}

.tpr-tl-side[b-z3hatb9rem] {
    text-align: center;
    flex-shrink: 0;
}

.tpr-tl-lbl[b-z3hatb9rem] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-tl-date[b-z3hatb9rem] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.tpr-tl-mid[b-z3hatb9rem] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--d-ink-4);
}

.tpr-tl-line[b-z3hatb9rem] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

.tpr-tl-mid svg[b-z3hatb9rem] {
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}

/* ─── Travelers grid ─── */
.tpr-travelers[b-z3hatb9rem] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .tpr-travelers[b-z3hatb9rem] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tpr-trav[b-z3hatb9rem] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 10px 12px;
    text-align: center;
}

.tpr-trav-lbl[b-z3hatb9rem] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-trav-count[b-z3hatb9rem] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.025em;
    margin-top: 2px;
    line-height: 1;
}

.tpr-trav-price[b-z3hatb9rem] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ─── Passengers ─── */
.tpr-pax-list[b-z3hatb9rem] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpr-pax[b-z3hatb9rem] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.tpr-avatar[b-z3hatb9rem] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    flex-shrink: 0;
    border: 1px solid #ffe0c7;
}

.tpr-pax-name[b-z3hatb9rem] {
    color: var(--d-ink);
    font-weight: 500;
}

.tpr-pax-id[b-z3hatb9rem] {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

/* ─── Notes ─── */
.tpr-notes-hd[b-z3hatb9rem] {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-notes-list[b-z3hatb9rem] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .tpr-notes-list li[b-z3hatb9rem] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .tpr-notes-list li[b-z3hatb9rem]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Features/_Shared/PaymentResult/VisaPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VisaPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.vpr-root[b-bklatws456] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.vpr-hero[b-bklatws456] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vpr-hero-ico[b-bklatws456] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -3px rgba(16, 24, 40, .08);
}

    .vpr-hero-ico svg[b-bklatws456] {
        width: 22px;
        height: 22px;
    }

.vpr-hero-text h2[b-bklatws456] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
}

.vpr-hero-text p[b-bklatws456] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.vpr-card[b-bklatws456] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.vpr-card-hd[b-bklatws456] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--d-line);
}

.vpr-card-hd-info[b-bklatws456] {
    min-width: 0;
}

.vpr-card-title[b-bklatws456] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.vpr-card-sub[b-bklatws456] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

.vpr-card-body[b-bklatws456] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Status pill ─── */
.vpr-pill[b-bklatws456] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    flex-shrink: 0;
}

    .vpr-pill.good[b-bklatws456] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .vpr-pill.danger[b-bklatws456] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
        border-color: color-mix(in srgb, var(--d-danger) 22%, transparent);
    }

    .vpr-pill.warn[b-bklatws456] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: #fde68a;
    }

    .vpr-pill.muted[b-bklatws456] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

/* ─── Code chip ─── */
.vpr-code[b-bklatws456] {
    display: inline-flex;
    flex-direction: column;
    background: var(--d-accent-grad-soft);
    border: 1px solid #ffe0c7;
    border-radius: var(--d-r);
    padding: 8px 12px;
    align-self: flex-start;
}

.vpr-code-lbl[b-bklatws456] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-code-val[b-bklatws456] {
    margin-top: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

/* ─── Detail grid ─── */
.vpr-grid[b-bklatws456] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .vpr-grid[b-bklatws456] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vpr-cell-lbl[b-bklatws456] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
}

.vpr-cell-val[b-bklatws456] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .vpr-cell-val.mono[b-bklatws456] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

/* ─── Timeline ─── */
.vpr-timeline[b-bklatws456] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
}

.vpr-tl-side[b-bklatws456] {
    text-align: center;
    flex-shrink: 0;
}

.vpr-tl-lbl[b-bklatws456] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-tl-date[b-bklatws456] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.vpr-tl-line[b-bklatws456] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

/* ─── Result block ─── */
.vpr-result[b-bklatws456] {
    background: var(--d-good-soft);
    border: 1px solid color-mix(in srgb, var(--d-good) 25%, transparent);
    border-radius: var(--d-r);
    padding: 12px 14px;
}

.vpr-result-hd[b-bklatws456] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-good);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.vpr-result-grid[b-bklatws456] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 14px;
}

@media (min-width: 640px) {
    .vpr-result-grid[b-bklatws456] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vpr-result-grid .k[b-bklatws456] {
    color: var(--d-ink-3);
    margin-right: 4px;
}

.vpr-result-grid .v[b-bklatws456] {
    color: var(--d-ink);
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ─── Documents tag ─── */
.vpr-docs[b-bklatws456] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .vpr-docs svg[b-bklatws456] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* ─── Notes ─── */
.vpr-notes-hd[b-bklatws456] {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-notes-list[b-bklatws456] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .vpr-notes-list li[b-bklatws456] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .vpr-notes-list li[b-bklatws456]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Features/_Shared/Payment/PaymentMethodSelector.razor.rz.scp.css */
/* PaymentMethodSelector — giao diện chuẩn tách từ FlightPaymentStep (fps-* → pms-*).
   Token tự chứa trên .pms-root để dùng được ở mọi host (kể cả trang không có token fps). */
.pms-root[b-rhljli07bs] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

/* ─── Card primitive ─── */
.pms-card[b-rhljli07bs] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
}

.pms-card-hd[b-rhljli07bs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .pms-card-hd h2[b-rhljli07bs] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .pms-card-hd h2 svg[b-rhljli07bs] {
            color: var(--d-accent);
        }

.pms-card-body[b-rhljli07bs] {
    padding: 14px 16px;
}

/* ─── Category label ─── */
.pms-cat-lbl[b-rhljli07bs] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 14px 0 8px;
}

    .pms-cat-lbl:first-child[b-rhljli07bs] {
        margin-top: 0;
    }

/* ─── Method grid ─── */
.pms-method-grid[b-rhljli07bs] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .pms-method-grid[b-rhljli07bs] { grid-template-columns: repeat(2, 1fr); }
}

/* Tile trong lưới phải cao bằng nhau — tile "khuyên dùng" có thêm 1 dòng nhãn. */
.pms-method-grid > label[b-rhljli07bs] {
    height: 100%;
}

/* Method tile — horizontal: icon + name (+ optional balance) */
.pms-method[b-rhljli07bs] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    height: 100%;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: 12px;
    background: var(--d-surface);
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .15s ease, background .15s ease;
    text-align: left;
    min-height: 60px;
    position: relative;
    overflow: hidden;
}

    .pms-method:hover[b-rhljli07bs] {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--d-accent) 40%, var(--d-line));
        box-shadow: 0 8px 18px -10px rgba(255, 107, 0, 0.28),
                    0 2px 5px -2px rgba(16, 24, 40, 0.06);
    }

    .pms-method.is-selected[b-rhljli07bs] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
        box-shadow: 0 0 0 1px var(--d-accent),
                    0 10px 22px -10px rgba(255, 107, 0, 0.32);
    }

        .pms-method.is-selected:hover[b-rhljli07bs] {
            transform: translateY(-2px);
        }

/* Tile bị khoá (ví không đủ số dư) */
.pms-method-featured.is-disabled .pms-method[b-rhljli07bs],
label.is-disabled .pms-method[b-rhljli07bs] {
    opacity: .55;
    filter: grayscale(.4);
}

    label.is-disabled .pms-method:hover[b-rhljli07bs] {
        transform: none;
        border-color: var(--d-line);
        box-shadow: none;
    }

/* Featured method (QrBank) — nổi bật gradient + glow */
.pms-method-featured .pms-method[b-rhljli07bs] {
    background: linear-gradient(135deg, #fff8f2 0%, #ffe8d6 100%);
    border-color: color-mix(in srgb, var(--d-accent) 35%, var(--d-line));
}

    .pms-method-featured .pms-method[b-rhljli07bs]::after {
        content: '';
        position: absolute;
        top: -28px;
        right: -28px;
        width: 110px;
        height: 110px;
        background: radial-gradient(circle, rgba(255, 107, 0, 0.14) 0%, rgba(255, 107, 0, 0.04) 45%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    .pms-method-featured .pms-method > *[b-rhljli07bs] {
        position: relative;
        z-index: 1;
    }

    .pms-method-featured .pms-method:hover[b-rhljli07bs] {
        border-color: color-mix(in srgb, var(--d-accent) 60%, var(--d-line));
        box-shadow: 0 10px 22px -10px rgba(255, 107, 0, 0.40),
                    0 2px 6px -2px rgba(16, 24, 40, 0.08);
    }

/* Nằm dưới tên (trong .pms-method-text) — align-self để chip chỉ rộng bằng nội dung. */
.pms-method-featured-badge[b-rhljli07bs] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: 3px;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff6b00 0%, #ff7d1f 60%, #ff9a52 100%);
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 2px 5px -1px rgba(255, 107, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

    .pms-method-featured-badge[b-rhljli07bs]::before {
        content: '★';
        font-size: 10px;
        line-height: 1;
        color: #fff;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    }

/* Icon chip uniform */
.pms-method-ico[b-rhljli07bs] {
    width: 40px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pms-method-text[b-rhljli07bs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Tên dài (thẻ quốc tế, QR ngân hàng…) tối đa 2 dòng — quá đó thì cắt bằng "…",
   không để tile cao lêu nghêu 3 dòng khi cột hẹp. */
.pms-method .name[b-rhljli07bs] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    min-width: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Phí giao dịch của phương thức — cam khi có phí, xanh khi miễn phí */
.pms-method-fee[b-rhljli07bs] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-accent);
    line-height: 1.2;
}

    .pms-method-fee.is-free[b-rhljli07bs] {
        color: #059669;
        font-weight: 500;
    }

.pms-method .ico-fb[b-rhljli07bs] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    color: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-size: 11px;
}

    .pms-method .ico-fb.momo[b-rhljli07bs] { background: #d82d8b; }
    .pms-method .ico-fb.wallet[b-rhljli07bs] { background: #16a34a; }
    .pms-method .ico-fb.qr[b-rhljli07bs] { background: #2563eb; }

.pms-method img[b-rhljli07bs] {
    max-height: 28px;
    max-width: 40px;
    object-fit: contain;
}

/* Check mark khi chọn */
.pms-method-check[b-rhljli07bs] {
    width: 20px;
    height: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--d-accent) 0%, #ff7d1f 100%);
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 2px 5px -1px rgba(255, 107, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: pms-check-pop-b-rhljli07bs .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes pms-check-pop-b-rhljli07bs {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* Loading / empty */
.pms-loading[b-rhljli07bs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.pms-spinner[b-rhljli07bs] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 999px;
    animation: pms-spin-b-rhljli07bs .7s linear infinite;
}

@keyframes pms-spin-b-rhljli07bs {
    to { transform: rotate(360deg); }
}

.pms-empty[b-rhljli07bs] {
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--d-ink-4);
}
/* /src/Features/_Shared/Payment/WalletPinModal.razor.rz.scp.css */
/* WalletPinModal — nội dung modal xác nhận mã 6 số (token-only theo tokens.css SSOT). */

.wpin-body[b-g6zaxyy3v2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wpin-lead[b-g6zaxyy3v2] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--nm-ink-2);
}

/* ---- Số tiền sắp trừ ---- */
.wpin-amount[b-g6zaxyy3v2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
}

.wpin-amount-lbl[b-g6zaxyy3v2] { font-size: 12px; color: var(--nm-muted); }
.wpin-amount-val[b-g6zaxyy3v2] { font-size: 17px; font-weight: 700; color: var(--nm-brand-600); }

/* ---- Lỗi lần gửi trước ---- */
.wpin-alert[b-g6zaxyy3v2] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--nm-r-input);
    background: var(--nm-bad-soft);
    border: 1px solid var(--nm-bad);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--nm-ink-2);
}

.wpin-alert svg[b-g6zaxyy3v2] { flex-shrink: 0; margin-top: 2px; color: var(--nm-bad); }

/* ---- Quên mã ---- */
.wpin-forgot[b-g6zaxyy3v2] {
    align-self: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    text-decoration: none;
}

.wpin-forgot:hover[b-g6zaxyy3v2] { text-decoration: underline; }
/* /src/Features/_Shared/Policy/PolicyConfirmModal.razor.rz.scp.css */
/* PolicyConfirmModal — Manager Dashboard v4 theme */
.pcm-overlay[b-r47euupk6t] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-info-grad: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

.pcm-backdrop[b-r47euupk6t] {
    position: absolute;
    inset: 0;
}

.pcm-panel[b-r47euupk6t] {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    box-shadow: 0 18px 48px -12px rgba(16, 24, 40, 0.28);
    color: var(--d-ink);
}

.pcm-head[b-r47euupk6t] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pcm-icon[b-r47euupk6t] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #b45309;
}

.pcm-title[b-r47euupk6t] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink);
}

.pcm-subtitle[b-r47euupk6t] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.pcm-section[b-r47euupk6t] {
    padding: 14px 22px 0;
}

.pcm-violations[b-r47euupk6t] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
}

    .pcm-violations .lbl[b-r47euupk6t] {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .pcm-violations ul[b-r47euupk6t] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pcm-violations li[b-r47euupk6t] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #92400e;
        line-height: 1.5;
    }

    .pcm-violations svg[b-r47euupk6t] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #d97706;
    }

.pcm-info[b-r47euupk6t] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 14px;
    font-size: 14px;
}

.pcm-info-row[b-r47euupk6t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .pcm-info-row + .pcm-info-row[b-r47euupk6t] {
        border-top: 1px solid var(--d-line-2);
    }

    .pcm-info-row .k[b-r47euupk6t] {
        color: var(--d-ink-3);
    }

    .pcm-info-row .v[b-r47euupk6t] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .pcm-info-row .v.amount[b-r47euupk6t] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.pcm-field-label[b-r47euupk6t] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.pcm-textarea[b-r47euupk6t] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    resize: vertical;
    transition: border-color .12s, box-shadow .12s;
    font-family: inherit;
}

    .pcm-textarea:focus[b-r47euupk6t] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.pcm-error[b-r47euupk6t] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.pcm-success[b-r47euupk6t] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

    .pcm-success .t[b-r47euupk6t] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #15803d;
    }

    .pcm-success .d[b-r47euupk6t] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #166534;
    }

.pcm-actions[b-r47euupk6t] {
    padding: 16px 22px;
    border-top: 1px solid var(--d-line);
    margin-top: 14px;
}

.pcm-btn-row[b-r47euupk6t] {
    display: flex;
    gap: 8px;
}

.pcm-btn[b-r47euupk6t] {
    height: 40px;
    padding: 0 16px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .12s, color .12s, filter .12s;
}

    .pcm-btn:hover[b-r47euupk6t] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.pcm-btn-primary[b-r47euupk6t] {
    border-color: transparent;
    color: #fff;
    background: var(--d-accent-grad);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .pcm-btn-primary:hover[b-r47euupk6t] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.pcm-btn-info[b-r47euupk6t] {
    border-color: transparent;
    color: #fff;
    background: var(--d-info-grad);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2), 0 4px 12px -2px rgba(37, 99, 235, 0.22);
}

    .pcm-btn-info:hover[b-r47euupk6t] {
        filter: brightness(0.95);
        color: #fff;
    }

.pcm-btn:disabled[b-r47euupk6t] {
    opacity: 0.55;
    cursor: not-allowed;
}

.pcm-btn-grow[b-r47euupk6t] {
    flex: 1;
}

.pcm-divider[b-r47euupk6t] {
    border-top: 1px solid var(--d-line-2);
    margin-top: 12px;
    padding-top: 12px;
}

.pcm-personal-hint[b-r47euupk6t] {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.pcm-spin[b-r47euupk6t] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcm-spin-b-r47euupk6t 0.7s linear infinite;
}

@keyframes pcm-spin-b-r47euupk6t {
    to { transform: rotate(360deg); }
}
/* /src/Features/_Shared/Policy/PolicyViolationBadge.razor.rz.scp.css */
/* PolicyViolationBadge — warm-neutral approved/violation surfaces */
.pvb-root[b-4z7qb5gk7d] {
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-line: #eceef2;
    --d-surface: #ffffff;
    --d-good: #16a34a;
    --d-warn: #d97706;
}

.pvb-pill[b-4z7qb5gk7d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: -0.005em;
}

.pvb-pill-good[b-4z7qb5gk7d] {
    background: color-mix(in srgb, var(--d-good) 14%, #fff);
    color: #15803d;
    border: 1px solid color-mix(in srgb, var(--d-good) 28%, #fff);
}

.pvb-pill-warn[b-4z7qb5gk7d] {
    background: color-mix(in srgb, var(--d-warn) 14%, #fff);
    color: #92400e;
    border: 1px solid color-mix(in srgb, var(--d-warn) 32%, #fff);
    cursor: help;
}

.pvb-ico[b-4z7qb5gk7d] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.pvb-ico-md[b-4z7qb5gk7d] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Compact tooltip */
.pvb-tip[b-4z7qb5gk7d] {
    width: 288px;
    padding: 12px;
    background: var(--d-surface);
    border: 1px solid color-mix(in srgb, var(--d-warn) 32%, #fff);
    border-radius: 10px;
    box-shadow: 0 12px 28px -6px rgba(16, 24, 40, 0.18), 0 4px 10px -2px rgba(16, 24, 40, 0.10);
    font-size: 11px;
    color: var(--d-ink-2);
    line-height: 1.5;
}

    .pvb-tip .pvb-tip-title[b-4z7qb5gk7d] {
        font-weight: 600;
        color: #92400e;
        margin: 0 0 6px;
    }

    .pvb-tip ul[b-4z7qb5gk7d] {
        margin: 0;
        padding-left: 16px;
        list-style: disc;
    }

    .pvb-tip ul li + li[b-4z7qb5gk7d] {
        margin-top: 3px;
    }

    .pvb-tip .pvb-tip-hint[b-4z7qb5gk7d] {
        margin: 8px 0 0;
        padding-top: 8px;
        border-top: 1px solid color-mix(in srgb, var(--d-warn) 18%, #fff);
        color: #92400e;
        font-style: italic;
    }

/* Full mode warning box */
.pvb-box[b-4z7qb5gk7d] {
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--d-warn) 32%, #fff);
    background: color-mix(in srgb, var(--d-warn) 10%, #fff);
    padding: 10px 12px;
    font-size: 11.5px;
    color: #92400e;
}

.pvb-box-row[b-4z7qb5gk7d] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pvb-box-icon[b-4z7qb5gk7d] {
    color: #b45309;
    flex-shrink: 0;
    margin-top: 1px;
}

.pvb-box-body[b-4z7qb5gk7d] {
    flex: 1;
    min-width: 0;
}

.pvb-box-title[b-4z7qb5gk7d] {
    font-weight: 600;
    color: #92400e;
    line-height: 1.3;
    margin: 0;
}

.pvb-box-list[b-4z7qb5gk7d] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: #78350f;
}

    .pvb-box-list li[b-4z7qb5gk7d] {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.45;
    }

        .pvb-box-list li + li[b-4z7qb5gk7d] {
            margin-top: 2px;
        }

    .pvb-box-list .pvb-bullet[b-4z7qb5gk7d] {
        color: #b45309;
        flex-shrink: 0;
    }

.pvb-box-hint[b-4z7qb5gk7d] {
    margin: 6px 0 0;
    color: #92400e;
    font-style: italic;
    line-height: 1.3;
}
/* /src/Features/_Shared/Reports/FinanceReportsView.razor.rz.scp.css */
/* FinanceReportsView — shared /manager + /ca reports, chuẩn nm-list token-only:
   head (xuất Excel) + NmToolbar khoảng ngày (áp cho mọi phần) + NmTabs 4 phần;
   trong mỗi tab: dải thống kê mỏng + NmCard (DataGrid / dòng phân rã / biểu đồ SVG). */
.nm-list-page[b-m1chmqmavq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-m1chmqmavq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-m1chmqmavq] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.frv-title[b-m1chmqmavq] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-m1chmqmavq] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-m1chmqmavq] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-m1chmqmavq] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar 1 hàng: NmDateRange mặc định xếp cột (fields trên, preset dưới) →
   trong toolbar ép nằm ngang cùng hàng, preset thành dải pill cạnh ô ngày ── */
[b-m1chmqmavq] .frv-toolbar .nm-daterange {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
[b-m1chmqmavq] .frv-toolbar .nm-daterange__fields .nm-input-wrap { width: 128px; }
[b-m1chmqmavq] .frv-toolbar .nm-daterange__presets { flex-wrap: nowrap; }

/* Nhãn "Khoảng thời gian" + số ngày đang lọc: nói rõ thanh này áp cho MỌI tab. */
.frv-tb-lbl[b-m1chmqmavq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
}
.frv-tb-lbl i[b-m1chmqmavq] { color: var(--nm-brand-600); font-size: 13px; }
.frv-tb-note[b-m1chmqmavq] {
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Thanh tab: nội dung mỗi tab giữ đúng nhịp 16px như các khối ngoài ── */
[b-m1chmqmavq] .frv-tabs .nm-tabs__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Dải thống kê mỏng — 1 hàng thay lưới NmKpi (pattern cabk-stats đã duyệt ở /ca/bookings) ── */
.frv-stats[b-m1chmqmavq] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.frv-stats[b-m1chmqmavq]::-webkit-scrollbar { display: none; }

.frv-stat[b-m1chmqmavq] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.frv-stat + .frv-stat[b-m1chmqmavq] { border-left: 1px solid var(--nm-border); }

.frv-stat__dot[b-m1chmqmavq] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.frv-stat__dot--accent[b-m1chmqmavq] { background: var(--nm-brand-500); }
.frv-stat__dot--good[b-m1chmqmavq]   { background: var(--nm-ok); }
.frv-stat__dot--info[b-m1chmqmavq]   { background: var(--nm-info); }
.frv-stat__dot--warn[b-m1chmqmavq]   { background: var(--nm-warn); }
.frv-stat__dot--bad[b-m1chmqmavq]    { background: var(--nm-bad); }

.frv-stat__lbl[b-m1chmqmavq] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.frv-stat__val[b-m1chmqmavq] {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.frv-stat__val small[b-m1chmqmavq] { font-size: 11px; font-weight: 500; color: var(--nm-muted); }

/* Delta so với kỳ trước — mũi tên + dấu đi kèm nên không phụ thuộc màu để đọc chiều. */
.frv-stat__delta[b-m1chmqmavq] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.frv-stat__delta i[b-m1chmqmavq] { font-size: 13px; }
.frv-stat__delta.is-bad[b-m1chmqmavq] { color: var(--nm-bad); }
.frv-stat__delta.is-good[b-m1chmqmavq] { color: var(--nm-ok); }

.frv-compare-note[b-m1chmqmavq] {
    margin: -4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--nm-muted);
}
.frv-compare-note i[b-m1chmqmavq] { color: var(--nm-info); }

/* ── Biểu đồ xu hướng (SVG thuần) ─────────────────────────────────────────
   Một chuỗi → một màu; lưới/trục là nét mảnh liền, lùi hẳn về sau so với cột. */
.frv-chart[b-m1chmqmavq] { padding: 12px 14px 6px; }
.frv-chart svg[b-m1chmqmavq] { width: 100%; height: auto; display: block; overflow: visible; }

.frv-chart-grid[b-m1chmqmavq], .frv-chart-axis[b-m1chmqmavq] { stroke: var(--nm-border); stroke-width: 1; }

.frv-chart-fill[b-m1chmqmavq] { fill: var(--nm-brand-500); transition: fill .12s; }
.frv-chart-bar:hover .frv-chart-fill[b-m1chmqmavq] { fill: var(--nm-brand-700); }
.frv-chart-hit[b-m1chmqmavq] { fill: transparent; }

.frv-chart-tip[b-m1chmqmavq] { opacity: 0; pointer-events: none; transition: opacity .1s; }
.frv-chart-bar:hover .frv-chart-tip[b-m1chmqmavq] { opacity: 1; }
.frv-chart-tip rect[b-m1chmqmavq] { fill: var(--nm-ink); opacity: .92; }
/* Kiểu chữ của <text> nằm NỘI TUYẾN trong SvgText (xem FinanceReportsView.razor):
   phần tử dựng bằng RenderTreeBuilder không có thuộc tính scope nên rule ở đây không với tới. */

/* ── Card ── */
[b-m1chmqmavq] .frv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frv-card-ico[b-m1chmqmavq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.frv-card-title[b-m1chmqmavq] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.frv-card-count[b-m1chmqmavq] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.frv-card-hint[b-m1chmqmavq] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }
/* Điều khiển/hành động của RIÊNG một thẻ (chọn kỳ, xuất CSV) — đứng cuối hàng tiêu đề thẻ.
   Bề rộng đặt trên div BỌC NGOÀI: Class của NmSelect rơi vào thẻ <select> bên trong, còn
   .nm-select-wrap vẫn width:100% nên đặt ở đó là hụt (xem ghi chú nm-list-toolbar). */
.frv-card-ctl[b-m1chmqmavq] { flex-shrink: 0; width: 150px; }
[b-m1chmqmavq] .frv-card-act { flex-shrink: 0; }

/* Bảng số theo kỳ gập ở cuối thân thẻ biểu đồ — kẻ vạch tách khỏi biểu đồ phía trên. */
[b-m1chmqmavq] .frv-trend-table { border-top: 1px solid var(--nm-border); }

/* Khối chờ trong thẻ (NmSkeleton) — cùng padding với nội dung thật để không nhảy chiều cao. */
.frv-skel[b-m1chmqmavq] { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }

/* ── Dòng phân rã theo nhóm — DÙNG CHUNG cho "theo dịch vụ" và "theo phòng ban" ──
   Cùng một khoản tiền chia theo hai chiều thì phải đọc giống nhau: tên · số tiền · tỷ trọng,
   thanh nền NmProgress, rồi hàng nhãn phụ. */
.frv-break[b-m1chmqmavq] { display: flex; flex-direction: column; }
.frv-break-row[b-m1chmqmavq] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--nm-border);
}
.frv-break-row:last-child[b-m1chmqmavq] { border-bottom: 0; }
/* Nhóm "chưa gán" là việc cần xử lý, không phải một nhóm để so sánh — làm nhạt đi */
.frv-break-row.is-muted[b-m1chmqmavq] { background: color-mix(in srgb, var(--nm-warn) 6%, transparent); }

.frv-break-hd[b-m1chmqmavq] { display: flex; align-items: baseline; gap: 8px; }
.frv-break-name[b-m1chmqmavq] {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.frv-break-flag[b-m1chmqmavq] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--nm-warn);
    cursor: help;
}
.frv-break-amt[b-m1chmqmavq] {
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.frv-break-pct[b-m1chmqmavq] {
    min-width: 46px;
    text-align: right;
    font-size: 11.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* NmProgress mặc định track 8px — trong dòng danh sách hạ xuống 6px cho đỡ nặng. */
[b-m1chmqmavq] .frv-break-bar { margin: 7px 0; }
[b-m1chmqmavq] .frv-break-bar .nm-progress__track { height: 6px; }

.frv-break-meta[b-m1chmqmavq] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.frv-break-count[b-m1chmqmavq] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }
[b-m1chmqmavq] .frv-break-meta .nm-tag { font-size: 11px; }
.frv-break-meta b[b-m1chmqmavq] { font-variant-numeric: tabular-nums; }

/* ── Cell trong DataGrid ── */
.cell-2line[b-m1chmqmavq] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__sub[b-m1chmqmavq] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }
.frv-name[b-m1chmqmavq] { font-weight: 500; color: var(--nm-ink); }
.frv-viol-type[b-m1chmqmavq] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.frv-desc[b-m1chmqmavq] {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.frv-money[b-m1chmqmavq] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.frv-money.is-good[b-m1chmqmavq] { color: var(--nm-ok); font-weight: 600; }
.frv-money.is-bad[b-m1chmqmavq] { color: var(--nm-bad); font-weight: 600; }
.frv-time[b-m1chmqmavq] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}

/* ── Footer phân trang ── */
.frv-foot[b-m1chmqmavq] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

@media (max-width: 640px) {
    .nm-list-page[b-m1chmqmavq] { padding: 16px 14px 22px; }
    /* Mobile: cho khối ngày + preset xuống dòng thoải mái, ô ngày giãn hết bề ngang */
    [b-m1chmqmavq] .frv-toolbar .nm-daterange { flex-wrap: wrap; width: 100%; }
    [b-m1chmqmavq] .frv-toolbar .nm-daterange__fields { width: 100%; }
    [b-m1chmqmavq] .frv-toolbar .nm-daterange__fields .nm-input-wrap { width: auto; flex: 1 1 0; }
    [b-m1chmqmavq] .frv-toolbar .nm-daterange__presets { flex-wrap: wrap; }
    /* Ô chọn kỳ trên tiêu đề thẻ biểu đồ: hẹp quá thì cho chiếm trọn dòng của nó */
    .frv-card-ctl[b-m1chmqmavq] { width: 100%; }
    /* Thanh tab trượt ngang thay vì xuống 2 dòng */
    [b-m1chmqmavq] .frv-tabs .nm-tabs__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    [b-m1chmqmavq] .frv-tabs .nm-tabs__bar::-webkit-scrollbar { display: none; }
    [b-m1chmqmavq] .frv-tabs .nm-tabs__tab { white-space: nowrap; }
}
/* /src/Features/_Shared/Search/EsimSearchBox.razor.rz.scp.css */
/* EsimSearchBox — corporate connectivity search bar */
.esb-root[b-5wh8shlke4] {
    --d-surface: #ffffff;
    --d-surface-2: #f5f6f9;
    --d-line: #e7eaf0;
    --d-line-2: #f0f2f6;
    --d-ink: #101319;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a7adba;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff3ea;
    --d-accent-line: #ffd9bd;
    --d-accent-grad: linear-gradient(135deg, #ff8a33 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff7a1a 0%, #ef6000 100%);
    --d-r: 13px;

    width: 100%;
    padding: 14px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .esb-root[b-5wh8shlke4] {
        padding: 14px 16px;
    }
}

/* ───────── Fields row (desktop: 3 ô + nút submit inline) ───────── */
.esb-row[b-5wh8shlke4] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .esb-row[b-5wh8shlke4] {
        grid-template-columns: 1.15fr 1.25fr 0.95fr auto;
        gap: 10px;
        align-items: stretch;
    }
}

.esb-field[b-5wh8shlke4] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .14s, box-shadow .14s;
}

    .esb-field:hover[b-5wh8shlke4] {
        border-color: #d4d9e2;
    }

    .esb-field.is-open[b-5wh8shlke4],
    .esb-field:focus-within[b-5wh8shlke4] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.13);
    }

.esb-trigger[b-5wh8shlke4] {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.esb-trigger-inner[b-5wh8shlke4] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.esb-ico[b-5wh8shlke4] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .14s, color .14s, border-color .14s;
}

    .esb-ico svg[b-5wh8shlke4] {
        width: 15px;
        height: 15px;
    }

.esb-field.is-open .esb-ico[b-5wh8shlke4],
.esb-field:focus-within .esb-ico[b-5wh8shlke4] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border-color: var(--d-accent-line);
}

.esb-meta[b-5wh8shlke4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.esb-lbl[b-5wh8shlke4] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esb-val[b-5wh8shlke4] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .esb-val.is-placeholder[b-5wh8shlke4] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.esb-input[b-5wh8shlke4] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

    .esb-input[b-5wh8shlke4]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.esb-caret[b-5wh8shlke4] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .18s, color .14s;
}

    .esb-caret.is-open[b-5wh8shlke4] {
        transform: rotate(180deg);
        color: var(--d-accent);
    }

.esb-clear[b-5wh8shlke4] {
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 0;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background .12s, color .12s;
}

    .esb-clear:hover[b-5wh8shlke4] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .esb-clear svg[b-5wh8shlke4] {
        width: 12px;
        height: 12px;
    }

/* ───────── Dropdown popups ───────── */
.esb-overlay[b-5wh8shlke4] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.esb-pop[b-5wh8shlke4] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.05);
    padding: 12px;
    animation: esb-pop-in-b-5wh8shlke4 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .esb-pop.esb-pop-left[b-5wh8shlke4] {
        right: auto;
        width: 420px;
    }

    .esb-pop.esb-pop-right[b-5wh8shlke4] {
        left: auto;
        right: 0;
        width: 240px;
    }
}

@keyframes esb-pop-in-b-5wh8shlke4 {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.esb-pop-hd[b-5wh8shlke4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .esb-pop-hd p[b-5wh8shlke4] {
        margin: 0;
        font-size: 10px;
        font-weight: 700;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.09em;
    }

.esb-pop-clear[b-5wh8shlke4] {
    border: 0;
    background: transparent;
    color: var(--d-accent);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

    .esb-pop-clear:hover[b-5wh8shlke4] {
        background: var(--d-accent-soft);
    }

.esb-chips[b-5wh8shlke4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.esb-chip[b-5wh8shlke4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .esb-chip:hover[b-5wh8shlke4] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: var(--d-accent-line);
    }

    .esb-chip.is-selected[b-5wh8shlke4] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.esb-list[b-5wh8shlke4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.esb-list-item[b-5wh8shlke4] {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .esb-list-item:hover[b-5wh8shlke4] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .esb-list-item.is-selected[b-5wh8shlke4] {
        background: var(--d-accent-grad);
        color: #fff;
    }

/* ───────── Smart popular-destination rail ───────── */
.esb-rail[b-5wh8shlke4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    min-width: 0;
}

.esb-rail-lbl[b-5wh8shlke4] {
    display: none;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

@media (min-width: 768px) {
    .esb-rail-lbl[b-5wh8shlke4] {
        display: inline;
    }
}

.esb-rail-track[b-5wh8shlke4] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 93%, transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 93%, transparent);
}

    .esb-rail-track[b-5wh8shlke4]::-webkit-scrollbar {
        display: none;
    }

.esb-rail-chip[b-5wh8shlke4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 11px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, color .14s, border-color .14s, transform .12s, box-shadow .14s;
}

    .esb-rail-chip .fl[b-5wh8shlke4] {
        font-size: 14px;
        line-height: 1;
    }

    .esb-rail-chip:hover[b-5wh8shlke4] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: var(--d-accent-line);
        transform: translateY(-1px);
    }

    .esb-rail-chip.is-selected[b-5wh8shlke4] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 3px 10px -3px rgba(255, 107, 0, 0.5);
    }

/* ───────── Submit — inline trong hàng ô ───────── */
.esb-submit[b-5wh8shlke4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.2), 0 8px 18px -6px rgba(255, 107, 0, 0.5);
    transition: background .14s, transform .08s, box-shadow .14s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .esb-submit[b-5wh8shlke4] {
        width: auto;
        height: auto;
        align-self: stretch;
        white-space: nowrap;
    }
}

.esb-submit:hover[b-5wh8shlke4] {
    background: var(--d-accent-grad-hover);
    box-shadow: 0 2px 4px rgba(255, 107, 0, 0.24), 0 12px 24px -6px rgba(255, 107, 0, 0.6);
    transform: translateY(-1px);
}

.esb-submit:active[b-5wh8shlke4] {
    transform: translateY(0);
}

.esb-submit svg[b-5wh8shlke4] {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .esb-field[b-5wh8shlke4],
    .esb-caret[b-5wh8shlke4],
    .esb-rail-chip[b-5wh8shlke4],
    .esb-submit[b-5wh8shlke4],
    .esb-pop[b-5wh8shlke4] {
        transition: none;
        animation: none;
    }

    .esb-rail-chip:hover[b-5wh8shlke4],
    .esb-submit:hover[b-5wh8shlke4] {
        transform: none;
    }
}
/* /src/Features/_Shared/Search/FlightSearchBox.razor.rz.scp.css */
/* FlightSearchBox — Manager Dashboard v4 theme */
.fsb-root[b-zhmn715tdw] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;

    width: 100%;
    padding: 10px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 640px) {
    .fsb-root[b-zhmn715tdw] {
        padding: 14px;
    }
}

@media (min-width: 768px) {
    .fsb-root[b-zhmn715tdw] {
        padding: 18px 20px;
    }
}

.fsb-root.fsb-vertical[b-zhmn715tdw] {
    padding: 14px;
}

/* ── Trip type toggle ── */
.fsb-trip-toggle[b-zhmn715tdw] {
    display: inline-flex;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

/* Sliding pill — trượt giữa 2 nút */
.fsb-trip-toggle[b-zhmn715tdw]::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    background: var(--d-surface);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06), inset 0 0 0 1px rgba(255, 107, 0, 0.10);
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.fsb-trip-toggle.is-oneway[b-zhmn715tdw]::before {
    transform: translateX(100%);
}

.fsb-trip-btn[b-zhmn715tdw] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .2s ease;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

    .fsb-trip-btn:hover[b-zhmn715tdw] {
        color: var(--d-ink-2);
    }

    .fsb-trip-btn.is-active[b-zhmn715tdw] {
        color: var(--d-accent);
    }

    .fsb-trip-btn svg[b-zhmn715tdw] {
        width: 14px;
        height: 14px;
        transition: transform .25s ease;
    }

    .fsb-trip-btn.is-active svg[b-zhmn715tdw] {
        transform: scale(1.05);
    }

.fsb-vertical .fsb-trip-btn[b-zhmn715tdw] {
    padding: 5px 12px;
    font-size: 11.5px;
}

/* ── Field row ── */
.fsb-row[b-zhmn715tdw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

@media (min-width: 1024px) {
    .fsb-row.fsb-row-horiz[b-zhmn715tdw] {
        position: relative;
        grid-template-columns: 1.6fr 1.2fr 0.9fr;
        gap: 0;
        background: var(--d-surface);
        border: 1px solid var(--d-line);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px -6px rgba(16, 24, 40, 0.10);
        align-items: stretch;
        padding: 0;
        overflow: visible;
        transition: grid-template-columns .28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Một chiều: ô ngày chỉ còn 1 trường → thu hẹp cột ngày, nhường chỗ cho
       cặp sân bay & hành khách để hàng cân đối, không bị khoảng trống lớn */
    .fsb-row.fsb-row-horiz.is-oneway[b-zhmn715tdw] {
        grid-template-columns: 1.9fr 0.85fr 0.95fr;
    }

    /* Dấu ấn hàng không: đường bay nét đứt + điểm khởi hành + máy bay,
       chìm rất nhẹ ở góc phải (sau nội dung) tạo không khí "đặt vé bay" */
    .fsb-row.fsb-row-horiz[b-zhmn715tdw]::before {
        content: '';
        position: absolute;
        top: 9px;
        right: 14px;
        width: 172px;
        height: 84px;
        z-index: 0;
        pointer-events: none;
        opacity: 0.09;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='172' height='84' viewBox='0 0 172 84' fill='none'%3E%3Cpath d='M12 76 Q 94 2 164 28' stroke='%23ff6b00' stroke-width='2.5' stroke-dasharray='6 7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='76' r='5' fill='none' stroke='%23ff6b00' stroke-width='2.5'/%3E%3Cpath d='M152 16 l16 9 -15 6 2 -8 z' fill='%23ff6b00'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* Inner cells: drop their own card chrome, rely on container */
    .fsb-row.fsb-row-horiz > .fsb-field[b-zhmn715tdw],
    .fsb-row.fsb-row-horiz > .fsb-airport-pair[b-zhmn715tdw] {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        position: relative;
    }

    .fsb-row.fsb-row-horiz > .fsb-field:hover[b-zhmn715tdw] {
        border-color: transparent;
    }

    .fsb-row.fsb-row-horiz > .fsb-field.is-error[b-zhmn715tdw] {
        background: transparent;
        box-shadow: inset 0 0 0 1px var(--d-danger);
        border-radius: 10px;
    }

    .fsb-row.fsb-row-horiz > .fsb-field.is-open[b-zhmn715tdw] {
        background: var(--d-accent-soft);
        border-radius: 10px;
        box-shadow: inset 0 0 0 2px var(--d-accent),
                    0 0 0 3px rgba(255, 107, 0, 0.2),
                    0 0 12px rgba(255, 107, 0, 0.12);
    }

    /* Reserve breathing room around the swap button so field highlights
       don't bleed under it */
    .fsb-row.fsb-row-horiz > .fsb-airport-pair > .fsb-field:first-child[b-zhmn715tdw] {
        padding-right: 22px;
    }

    .fsb-row.fsb-row-horiz > .fsb-airport-pair > .fsb-field:last-child[b-zhmn715tdw] {
        padding-left: 22px;
    }

    /* Strip AirportSelector's own card chrome — container provides it */
    .fsb-row.fsb-row-horiz[b-zhmn715tdw]  .aps-trigger {
        border-color: transparent;
        background: transparent;
        border-radius: 10px;
        min-height: 60px;
    }

    .fsb-row.fsb-row-horiz[b-zhmn715tdw]  .aps-trigger:hover {
        background: var(--d-accent-soft);
    }

    .fsb-row.fsb-row-horiz[b-zhmn715tdw]  .aps-trigger.is-open {
        background: var(--d-accent-soft);
        border-color: var(--d-accent);
        box-shadow: inset 0 0 0 1px var(--d-accent),
                    0 0 0 3px rgba(255, 107, 0, 0.2),
                    0 0 12px rgba(255, 107, 0, 0.12);
    }

    /* Vạch ngăn dạng tem cuống vé: nét đứt dọc gợi đường xé boarding pass */
    .fsb-row.fsb-row-horiz > .fsb-field + .fsb-field[b-zhmn715tdw]::before,
    .fsb-row.fsb-row-horiz > .fsb-airport-pair + .fsb-field[b-zhmn715tdw]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 1px;
        background-image: repeating-linear-gradient(to bottom, rgba(16, 24, 40, 0.14) 0 4px, transparent 4px 8px);
        pointer-events: none;
        z-index: 1;
    }
}

.fsb-field[b-zhmn715tdw] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s, background .12s;
    overflow: visible;
}

    .fsb-field:hover[b-zhmn715tdw] {
        border-color: #dde1e8;
    }

    .fsb-field.is-open[b-zhmn715tdw] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .fsb-field.is-error[b-zhmn715tdw] {
        border-color: var(--d-danger);
        background: var(--d-danger-soft);
        animation: fsb-shake-b-zhmn715tdw 0.5s ease-in-out;
    }

@keyframes fsb-shake-b-zhmn715tdw {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-3px); }
    30%, 70% { transform: translateX(3px); }
}

.fsb-field-error-text[b-zhmn715tdw] {
    margin: 4px 0 0 4px;
    font-size: 11.5px;
    color: var(--d-danger);
}

/* ── Airport pair ── */
/* Mobile (<1024px): stack vertical để có chỗ thở; desktop horizontal giữ nguyên */
.fsb-airport-pair[b-zhmn715tdw] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

@media (min-width: 1024px) {
    .fsb-airport-pair[b-zhmn715tdw] {
        flex-direction: row;
        gap: 0;
    }
}

.fsb-airport-pair > .fsb-field[b-zhmn715tdw] {
    flex: 1;
    min-width: 0;
}

/* AirportSelector tự render trigger có border riêng — bỏ border/bg
   ở .fsb-field bao ngoài để tránh viền đôi và lệch dropdown */
.fsb-airport-pair > .fsb-field[b-zhmn715tdw],
.fsb-airport-stack > .fsb-field[b-zhmn715tdw] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .fsb-airport-pair > .fsb-field:hover[b-zhmn715tdw],
    .fsb-airport-stack > .fsb-field:hover[b-zhmn715tdw] {
        border-color: transparent;
    }

    .fsb-airport-pair > .fsb-field.is-error[b-zhmn715tdw],
    .fsb-airport-stack > .fsb-field.is-error[b-zhmn715tdw] {
        background: transparent;
        border-color: transparent;
    }

.fsb-airport-pair-divider[b-zhmn715tdw] {
    width: 1px;
    background: var(--d-line);
    margin: 10px 0;
    flex-shrink: 0;
}

.fsb-swap-btn[b-zhmn715tdw] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* Node trung chuyển hành trình — cam gradient nổi bật, hiện đại */
    background: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    border: 2px solid #ffffff;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .15s, border-color .12s, transform .25s, box-shadow .15s;
    flex-shrink: 0;
    z-index: 5;
    box-shadow: 0 4px 12px -3px rgba(255, 107, 0, 0.5), 0 1px 2px rgba(16, 24, 40, 0.08);
    /* Mobile (stack vertical): tự căn giữa ngang, kéo lên/xuống một chút để đè giữa 2 ô */
    align-self: center;
    margin: -16px 0;
}

@media (min-width: 1024px) {
    .fsb-swap-btn[b-zhmn715tdw] {
        /* Desktop horizontal: overlap ngang giữa 2 ô */
        margin: 0 -16px;
    }
}

    .fsb-swap-btn:hover[b-zhmn715tdw] {
        background: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
        border-color: #ffffff;
        color: #fff;
        box-shadow: 0 6px 16px -3px rgba(255, 107, 0, 0.55), 0 0 0 4px rgba(255, 107, 0, 0.15);
    }

    .fsb-swap-btn.is-rotating[b-zhmn715tdw] {
        transform: rotate(180deg);
    }

    .fsb-swap-btn svg[b-zhmn715tdw] {
        width: 14px;
        height: 14px;
        /* Mobile: mũi tên dọc (90deg); desktop CSS inline đã rotate 90deg để ra ngang */
        transform: rotate(0deg);
    }

@media (min-width: 1024px) {
    .fsb-swap-btn svg[b-zhmn715tdw] {
        transform: rotate(90deg);
    }
}

/* Vertical airport pair */
.fsb-airport-stack[b-zhmn715tdw] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fsb-swap-btn-stack[b-zhmn715tdw] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

    .fsb-swap-btn-stack.is-rotating[b-zhmn715tdw] {
        transform: translate(-50%, -50%) rotate(180deg);
    }

/* Date wrapper — let NmDatePicker render inside */
.fsb-field-date[b-zhmn715tdw] {
    overflow: visible;
    /* Grid item mặc định không co dưới min-content → nhãn "NGÀY ĐI/DEPARTURE DATE"
       đội cột rộng ra hoặc xuống dòng. Cho phép co để NmDatePicker tự cắt "…". */
    min-width: 0;
}

/* Đồng bộ hiệu ứng "open" của NmDatePicker với airport/passenger:
   cùng color (--d-accent), cùng background soft, cùng ring + glow, cùng radius. */
.fsb-field-date[b-zhmn715tdw]  .range-trigger.dp-open,
.fsb-field-date[b-zhmn715tdw]  .single-trigger.dp-open {
    background: var(--d-accent-soft);
    border-color: var(--d-accent);
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2),
                0 0 12px rgba(255, 107, 0, 0.12);
}

.fsb-field-date[b-zhmn715tdw]  .field-active::after {
    color: var(--d-accent);
}

/* FIX ô "Ngày đi": NmDatePicker mặc định xếp LeadingIcon CHỒNG LÊN TRÊN label (flex-col)
   → lệch hàng so với "Ngày về" và các ô khác. Đưa icon sang TRÁI, bọc tile giống .fsb-ico. */
.fsb-field-date[b-zhmn715tdw]  .range-trigger .date-field:has(.dp-field-icon),
.fsb-field-date[b-zhmn715tdw]  .single-trigger > div:has(.dp-field-icon) {
    display: grid;
    /* minmax(0,1fr) chứ KHÔNG phải 1fr: track auto-min-size mặc định giữ cột
       rộng bằng min-content nên chữ không bao giờ cắt được. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    align-content: center;
}

.fsb-field-date[b-zhmn715tdw]  .dp-field-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
}

.fsb-field-date[b-zhmn715tdw]  .date-field:has(.dp-field-icon) .dp-label,
.fsb-field-date[b-zhmn715tdw]  .single-trigger > div:has(.dp-field-icon) .dp-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.fsb-field-date[b-zhmn715tdw]  .date-field:has(.dp-field-icon) .dp-value,
.fsb-field-date[b-zhmn715tdw]  .single-trigger > div:has(.dp-field-icon) .dp-value {
    grid-column: 2;
    grid-row: 2;
}

/* ── Passenger trigger ── */
.fsb-trigger[b-zhmn715tdw] {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.fsb-trigger-inner[b-zhmn715tdw] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.fsb-ico[b-zhmn715tdw] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .fsb-ico svg[b-zhmn715tdw] {
        width: 14px;
        height: 14px;
    }

.fsb-field.is-open .fsb-ico[b-zhmn715tdw] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.fsb-meta[b-zhmn715tdw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

/*
 * ★★ line-height PHẢI đủ chỗ cho dấu chữ HOA tiếng Việt.
 *
 * Nhãn viết hoa bằng text-transform, mà chữ hoa có dấu (Ể Ệ À Á Ộ…) cao hơn chữ hoa trơn.
 * line-height: 1 cho hộp đúng 10.5px trong khi nội dung cần 12px, overflow: hidden (vốn để cắt
 * ngang cho text-overflow: ellipsis) liền xén luôn phần TRÊN — đúng chỗ đặt dấu. Kết quả:
 * "ĐIỂM ĐI" hiện thành "ĐIEM ĐI", "HÀNH KHÁCH" thành "HANH KHACH". Chữ trong DOM vẫn đủ dấu nên
 * soi Inspector không thấy gì sai, và tiếng Anh thì hoàn toàn bình thường.
 */
.fsb-lbl[b-zhmn715tdw] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsb-val[b-zhmn715tdw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fsb-caret[b-zhmn715tdw] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .fsb-caret.is-open[b-zhmn715tdw] {
        transform: rotate(180deg);
    }

/* ── Pop / Pax dropdown ── */
.fsb-overlay[b-zhmn715tdw] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* Panel dùng position:fixed + toạ độ tính bằng JS (ComputePaxPanelPositionAsync)
   → thoát mọi stacking/scroll ancestor. Inline style override z-index/position. */
.fsb-pop[b-zhmn715tdw] {
    position: fixed;
    z-index: 1000;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    padding: 12px;
    animation: fsb-pop-in-b-zhmn715tdw 0.15s ease-out;
}

@keyframes fsb-pop-in-b-zhmn715tdw {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Pax stepper ── */
.fsb-pax-row[b-zhmn715tdw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

    .fsb-pax-row + .fsb-pax-row[b-zhmn715tdw] {
        border-top: 1px solid var(--d-line-2);
    }

.fsb-pax-info[b-zhmn715tdw] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fsb-pax-ico[b-zhmn715tdw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid #ffe0c7;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .fsb-pax-ico.is-blue[b-zhmn715tdw] {
        background: #eff6ff;
        color: #2563eb;
        border-color: #bfdbfe;
    }

    .fsb-pax-ico.is-pink[b-zhmn715tdw] {
        background: #fdf2f8;
        color: #db2777;
        border-color: #fbcfe8;
    }

    .fsb-pax-ico svg[b-zhmn715tdw] {
        width: 16px;
        height: 16px;
    }

.fsb-pax-text p[b-zhmn715tdw] {
    margin: 0;
}

.fsb-pax-name[b-zhmn715tdw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.fsb-pax-desc[b-zhmn715tdw] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.fsb-pax-ctrl[b-zhmn715tdw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsb-step-btn[b-zhmn715tdw] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .fsb-step-btn:hover:not(:disabled)[b-zhmn715tdw] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .fsb-step-btn:disabled[b-zhmn715tdw] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .fsb-step-btn svg[b-zhmn715tdw] {
        width: 12px;
        height: 12px;
    }

.fsb-step-val[b-zhmn715tdw] {
    width: 24px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.fsb-pax-foot[b-zhmn715tdw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--d-line-2);
}

.fsb-pax-total[b-zhmn715tdw] {
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.fsb-pax-done[b-zhmn715tdw] {
    height: 34px;
    padding: 0 16px;
    border-radius: 8px;
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
}

    .fsb-pax-done:hover[b-zhmn715tdw] {
        background: var(--d-accent-grad-hover);
    }

/* ── Error banner ── */
.fsb-err-banner[b-zhmn715tdw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d-danger-soft);
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: var(--d-danger);
    font-size: 12.5px;
    margin-bottom: 12px;
    animation: fsb-shake-b-zhmn715tdw 0.5s ease-in-out;
}

    .fsb-err-banner svg[b-zhmn715tdw] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ── Submit ── */
.fsb-actions[b-zhmn715tdw] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Máy bay lượn dọc đường bay nét đứt ở khoảng trống giữa hàng nút — chuyển động hiện đại */
.fsb-fly-route[b-zhmn715tdw] {
    display: none;
}

@media (min-width: 1024px) {
    .fsb-fly-route[b-zhmn715tdw] {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 210px;
        height: 18px;
        z-index: 0;
        opacity: 0.6;
        pointer-events: none;
    }

    .fsb-fly-route[b-zhmn715tdw]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-top: 2px dashed rgba(255, 107, 0, 0.38);
    }

    .fsb-fly-route[b-zhmn715tdw]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 15px;
        height: 15px;
        margin-top: -8px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b00'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
        transform: rotate(90deg);
        animation: fsb-fly-b-zhmn715tdw 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
}

@keyframes fsb-fly-b-zhmn715tdw {
    0% { left: -4%; opacity: 0; }
    14% { opacity: 1; }
    86% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Desktop: tagline (nếu có) sát trái, button luôn dạt phải bằng margin-left:auto */
@media (min-width: 768px) {
    .fsb-actions .fsb-submit[b-zhmn715tdw] {
        margin-left: auto;
    }
}

.fsb-actions.is-vertical[b-zhmn715tdw] {
    justify-content: center;
}

.fsb-tagline[b-zhmn715tdw] {
    display: none;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

@media (min-width: 768px) {
    .fsb-tagline[b-zhmn715tdw] {
        display: inline-flex;
    }
}

.fsb-tagline b[b-zhmn715tdw] {
    color: var(--d-accent);
    font-weight: 600;
}

.fsb-submit[b-zhmn715tdw] {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 24px;
    border-radius: 999px;
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, transform .08s, box-shadow .15s;
    width: 100%;
    letter-spacing: -0.005em;
}

/* Máy bay "cất cánh" khi hover — dấu ấn tìm vé thay cho icon kính lúp generic */
.fsb-submit-plane[b-zhmn715tdw] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fsb-submit-txt[b-zhmn715tdw] {
    position: relative;
    z-index: 1;
}

.fsb-submit:hover .fsb-submit-plane[b-zhmn715tdw] {
    transform: translate(3px, -3px) rotate(8deg);
}

.fsb-submit:hover[b-zhmn715tdw] {
    box-shadow: 0 2px 4px rgba(255, 107, 0, 0.24), 0 10px 22px -6px rgba(255, 107, 0, 0.4);
}

/* Vệt sáng quét ngang — chất liệu premium */
.fsb-submit-sheen[b-zhmn715tdw] {
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left .6s ease;
    pointer-events: none;
    z-index: 0;
}

.fsb-submit:hover .fsb-submit-sheen[b-zhmn715tdw] {
    left: 125%;
}

@media (min-width: 768px) {
    .fsb-submit[b-zhmn715tdw] {
        width: auto;
    }
}

.fsb-submit:hover[b-zhmn715tdw] {
    background: var(--d-accent-grad-hover);
}

.fsb-submit:active[b-zhmn715tdw] {
    transform: translateY(1px);
}

.fsb-submit svg[b-zhmn715tdw] {
    width: 16px;
    height: 16px;
}

/* ============================================================
   Theme: minimal — Minimal Premium Enterprise SaaS 2026 (CA)
   Cool palette · floating unified bar · prominent orange CTA.
   Only active when Theme="minimal" → other usages untouched.
   ============================================================ */
.fsb-root.fsb-minimal[b-zhmn715tdw] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: #ff6b00;
    --d-accent-grad-hover: #e85f00;
    --d-r: 12px;
    padding: 0;
}
@media (min-width: 640px) { .fsb-root.fsb-minimal[b-zhmn715tdw] { padding: 0; } }
@media (min-width: 768px) { .fsb-root.fsb-minimal[b-zhmn715tdw] { padding: 0; } }

/* Trip toggle — cleaner active in brand */
.fsb-minimal .fsb-trip-btn.is-active[b-zhmn715tdw] { color: var(--d-accent); }

/* Floating unified container (desktop) — larger radius, soft cool depth */
@media (min-width: 1024px) {
    .fsb-minimal .fsb-row.fsb-row-horiz[b-zhmn715tdw] {
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 32px -14px rgba(16, 24, 40, 0.14);
    }
    /* Field "open" highlight — soft brand ring, no heavy glow */
    .fsb-minimal .fsb-row.fsb-row-horiz > .fsb-field.is-open[b-zhmn715tdw] {
        box-shadow: inset 0 0 0 1.5px var(--d-accent), 0 0 0 3px rgba(255, 107, 0, 0.14);
    }
    .fsb-minimal .fsb-row.fsb-row-horiz[b-zhmn715tdw]  .aps-trigger.is-open {
        box-shadow: inset 0 0 0 1px var(--d-accent), 0 0 0 3px rgba(255, 107, 0, 0.14);
    }
}

/* Field focus / open states — cool brand ring */
.fsb-minimal .fsb-field:hover[b-zhmn715tdw] { border-color: var(--d-line); }
/* Ô sân bay là wrapper trong suốt (AirportSelector tự vẽ chrome) — không để
   rule hover phía trên tô lại viền (cùng đặc hiệu, viết sau sẽ thắng → viền xám dư) */
.fsb-minimal .fsb-airport-pair > .fsb-field:hover[b-zhmn715tdw],
.fsb-minimal .fsb-airport-stack > .fsb-field:hover[b-zhmn715tdw] { border-color: transparent; }
.fsb-minimal .fsb-field.is-open[b-zhmn715tdw] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.fsb-minimal .fsb-field-date[b-zhmn715tdw]  .range-trigger.dp-open,
.fsb-minimal .fsb-field-date[b-zhmn715tdw]  .single-trigger.dp-open {
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.14);
}

/* Swap / pax / step accents — drop warm peach borders */
.fsb-minimal .fsb-swap-btn:hover[b-zhmn715tdw],
.fsb-minimal .fsb-step-btn:hover:not(:disabled)[b-zhmn715tdw] { border-color: var(--d-accent-soft); }
.fsb-minimal .fsb-field.is-open .fsb-ico[b-zhmn715tdw],
.fsb-minimal .fsb-pax-ico[b-zhmn715tdw] { border-color: transparent; }

/* Search CTA — prominent, premium subtle gradient, modern rounded */
.fsb-minimal .fsb-submit[b-zhmn715tdw] {
    background: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 10px 22px -10px rgba(16, 24, 40, .08);
    transition: transform .12s ease, box-shadow .15s ease, filter .12s ease;
}
.fsb-minimal .fsb-submit:hover[b-zhmn715tdw] {
    background: linear-gradient(135deg, #ff6f12 0%, #e85f00 100%);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25), 0 14px 28px -10px rgba(255, 107, 0, 0.5);
}
.fsb-minimal .fsb-submit:active[b-zhmn715tdw] { transform: translateY(0); }

.fsb-minimal .fsb-pax-done[b-zhmn715tdw] {
    background: var(--d-accent);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}
.fsb-minimal .fsb-pax-done:hover[b-zhmn715tdw] { background: var(--d-accent-grad-hover); }
/* /src/Features/_Shared/Search/GlobalSearchBox.razor.rz.scp.css */
/* GlobalSearchBox — ô tìm kiếm tổng hợp ở header (dùng chung mọi khu).
   CSS isolation nên các luật dưới đây chỉ chạm vào markup của chính component. */

.nm-gsearch-root[b-lv2kz1ct3q] {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 36rem;
    position: relative;
}

.nm-gsearch[b-lv2kz1ct3q] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    background: rgba(248, 249, 251, 0.85);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    transition: background .15s, border-color .15s, box-shadow .15s;
    cursor: text;
}

@media (min-width: 640px) {
    .nm-gsearch[b-lv2kz1ct3q] {
        gap: 8px;
        height: 38px;
        padding: 0 12px;
    }
}

.nm-gsearch:hover[b-lv2kz1ct3q] {
    background: #fff;
    border-color: #D1D5DB;
}

.nm-gsearch:focus-within[b-lv2kz1ct3q] {
    background: #fff;
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .15);
}

.nm-gsearch-ico[b-lv2kz1ct3q] {
    color: #9CA3AF;
    flex-shrink: 0;
    transition: color .15s;
}

.nm-gsearch:focus-within .nm-gsearch-ico[b-lv2kz1ct3q] {
    color: #FF6B00;
}

.nm-gsearch input[b-lv2kz1ct3q] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    /* 16px trên thiết bị cảm ứng: dưới 16px Safari/iOS TỰ PHÓNG TO trang khi focus ô nhập. */
    font-size: 16px;
    color: #1F2937;
    font-family: inherit;
}

@media (pointer: fine) {
    .nm-gsearch input[b-lv2kz1ct3q] {
        font-size: 12.5px;
    }
}

@media (pointer: fine) and (min-width: 640px) {
    .nm-gsearch input[b-lv2kz1ct3q] {
        font-size: 13.5px;
    }
}

.nm-gsearch input[b-lv2kz1ct3q]::placeholder {
    color: #9CA3AF;
}

.nm-gsearch input[b-lv2kz1ct3q]::-webkit-search-cancel-button {
    display: none;
}

.nm-gsearch-clear[b-lv2kz1ct3q] {
    flex-shrink: 0;
    padding: 2px;
    color: #9CA3AF;
    border-radius: 4px;
    transition: color .15s;
}

.nm-gsearch-clear:hover[b-lv2kz1ct3q] {
    color: #4B5563;
}

.nm-gsearch-kbd[b-lv2kz1ct3q] {
    display: none;
    align-items: center;
    padding: 1px 6px;
    height: 20px;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    background: #fff;
    color: #9CA3AF;
    font-size: 10.5px;
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', monospace;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .nm-gsearch-kbd[b-lv2kz1ct3q] {
        display: inline-flex;
    }
}

.nm-gsearch:focus-within .nm-gsearch-kbd[b-lv2kz1ct3q] {
    opacity: 0;
}

/* Panel kết quả. Luôn `absolute` bám theo ô search — KHÔNG dùng `fixed`: với position:fixed thì
   `top: 100%` tính theo VIEWPORT chứ không theo ô search, panel rơi xuống dưới đáy màn hình. */
.nm-gsearch-panel[b-lv2kz1ct3q] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06);
    border-radius: 16px;
    overflow-y: auto;
    max-height: 70vh;
}
/* /src/Features/_Shared/Search/HotelSearchBox.razor.rz.scp.css */
/* HotelSearchBox — Manager Dashboard v4 theme */
.hsb-root[b-g8rhbzsywo] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    width: 100%;
    padding: 16px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .hsb-root[b-g8rhbzsywo] {
        padding: 18px 20px;
    }
}

.hsb-row[b-g8rhbzsywo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 1024px) {
    .hsb-row[b-g8rhbzsywo] {
        grid-template-columns: 1.3fr 1.2fr 0.8fr 1fr;
        gap: 12px;
    }
}

.hsb-field[b-g8rhbzsywo] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .hsb-field:hover[b-g8rhbzsywo] {
        border-color: #dde1e8;
    }

    .hsb-field.is-open[b-g8rhbzsywo] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.hsb-trigger[b-g8rhbzsywo] {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.hsb-trigger-inner[b-g8rhbzsywo] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.hsb-ico[b-g8rhbzsywo] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .hsb-ico svg[b-g8rhbzsywo] {
        width: 14px;
        height: 14px;
    }

.hsb-field.is-open .hsb-ico[b-g8rhbzsywo],
.hsb-field:focus-within .hsb-ico[b-g8rhbzsywo] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.hsb-meta[b-g8rhbzsywo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
    flex: 1;
}

.hsb-lbl[b-g8rhbzsywo] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.hsb-val[b-g8rhbzsywo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .hsb-val.is-placeholder[b-g8rhbzsywo] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.hsb-input[b-g8rhbzsywo] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

    .hsb-input[b-g8rhbzsywo]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.hsb-caret[b-g8rhbzsywo] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .hsb-caret.is-open[b-g8rhbzsywo] {
        transform: rotate(180deg);
    }

.hsb-clear-inline[b-g8rhbzsywo] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}

    .hsb-clear-inline:hover[b-g8rhbzsywo] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .hsb-clear-inline svg[b-g8rhbzsywo] {
        width: 12px;
        height: 12px;
    }

.hsb-overlay[b-g8rhbzsywo] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.hsb-pop[b-g8rhbzsywo] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    padding: 12px;
    animation: hsb-pop-in-b-g8rhbzsywo 0.15s ease-out;
    max-height: 420px;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .hsb-pop.hsb-pop-right[b-g8rhbzsywo] {
        left: auto;
        right: 0;
        width: 320px;
    }

    .hsb-pop.hsb-pop-stars[b-g8rhbzsywo] {
        left: auto;
        right: 0;
        width: 240px;
    }

    .hsb-pop.hsb-pop-city[b-g8rhbzsywo] {
        width: 380px;
    }
}

@keyframes hsb-pop-in-b-g8rhbzsywo {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.hsb-pop-hd[b-g8rhbzsywo] {
    margin-bottom: 8px;
}

    .hsb-pop-hd p[b-g8rhbzsywo] {
        margin: 0;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0 4px;
    }

.hsb-chips[b-g8rhbzsywo] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hsb-chip[b-g8rhbzsywo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .hsb-chip:hover[b-g8rhbzsywo] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .hsb-chip.is-selected[b-g8rhbzsywo] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.hsb-city-item[b-g8rhbzsywo] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

    .hsb-city-item:hover[b-g8rhbzsywo] {
        background: var(--d-surface-2);
    }

.hsb-city-emoji[b-g8rhbzsywo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.hsb-city-info[b-g8rhbzsywo] {
    min-width: 0;
    flex: 1;
}

    .hsb-city-info p[b-g8rhbzsywo] {
        margin: 0;
    }

.hsb-city-name[b-g8rhbzsywo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hsb-city-region[b-g8rhbzsywo] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 1px;
}

.hsb-city-count[b-g8rhbzsywo] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

.hsb-city-empty[b-g8rhbzsywo] {
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
    padding: 16px 0;
}

.hsb-city-custom[b-g8rhbzsywo] {
    border-top: 1px solid var(--d-line-2);
    margin-top: 6px;
    padding-top: 6px;
}

.hsb-stepper-row[b-g8rhbzsywo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

    .hsb-stepper-row + .hsb-stepper-row[b-g8rhbzsywo] {
        border-top: 1px solid var(--d-line-2);
    }

.hsb-stepper-info[b-g8rhbzsywo] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hsb-stepper-ico[b-g8rhbzsywo] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid #ffe0c7;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .hsb-stepper-ico svg[b-g8rhbzsywo] {
        width: 16px;
        height: 16px;
    }

.hsb-stepper-text p[b-g8rhbzsywo] {
    margin: 0;
}

.hsb-stepper-name[b-g8rhbzsywo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.hsb-stepper-desc[b-g8rhbzsywo] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.hsb-stepper-ctrl[b-g8rhbzsywo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hsb-step-btn[b-g8rhbzsywo] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .hsb-step-btn:hover:not(:disabled)[b-g8rhbzsywo] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .hsb-step-btn:disabled[b-g8rhbzsywo] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .hsb-step-btn svg[b-g8rhbzsywo] {
        width: 12px;
        height: 12px;
    }

.hsb-step-val[b-g8rhbzsywo] {
    width: 28px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.hsb-actions[b-g8rhbzsywo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hsb-tagline[b-g8rhbzsywo] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

@media (min-width: 768px) {
    .hsb-tagline[b-g8rhbzsywo] {
        display: inline-flex;
    }
}

.hsb-tagline b[b-g8rhbzsywo] {
    color: var(--d-accent);
    font-weight: 600;
}

.hsb-submit[b-g8rhbzsywo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, transform .08s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .hsb-submit[b-g8rhbzsywo] {
        width: auto;
    }
}

.hsb-submit:hover[b-g8rhbzsywo] {
    background: var(--d-accent-grad-hover);
}

.hsb-submit:active[b-g8rhbzsywo] {
    transform: translateY(1px);
}

.hsb-submit svg[b-g8rhbzsywo] {
    width: 16px;
    height: 16px;
}

/* Wrap NmDatePicker neatly inside field */
.hsb-field-date[b-g8rhbzsywo] {
    overflow: visible;
}
/* /src/Features/_Shared/Search/NmSearchBox.razor.rz.scp.css */
/* NmSearchBox — Manager Dashboard v4 theme (warm-neutral + cam accent) */
.nmsb-root[b-ehrxtm5yuc] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Glass nổi: kính mờ ĐỤC, rõ ràng — blur nền trời nhẹ phía sau (banner hero) */
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
                0 0 0 1px rgba(16, 24, 40, 0.04),
                0 2px 6px rgba(16, 24, 40, 0.07),
                0 26px 54px -20px rgba(16, 24, 40, 0.34);
    overflow: visible;
    color: var(--d-ink);
    position: relative;
    z-index: 30;
}

/* Không khí ấm hiện đại: quầng cam rất nhẹ góc trên-trái, đẩy thẻ khỏi cảm giác phẳng trắng */
.nmsb-root[b-ehrxtm5yuc]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(130% 90% at 0% 0%, rgba(255, 107, 0, 0.07) 0%, transparent 46%);
}

.nmsb-tabs[b-ehrxtm5yuc] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(244, 245, 248, 0.82);
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: hidden;
}

.nmsb-tab[b-ehrxtm5yuc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    cursor: pointer;
    color: var(--d-ink-3);
    background: transparent;
    transition: background .15s, color .15s;
    position: relative;
}

    .nmsb-tab:hover[b-ehrxtm5yuc] {
        background: rgba(255, 255, 255, 0.6);
        color: var(--d-ink-2);
    }

    .nmsb-tab.is-active[b-ehrxtm5yuc] {
        background: rgba(255, 255, 255, 0.96);
        color: var(--d-accent);
        position: relative;
        z-index: 1;
        box-shadow: 0 12px 24px -16px rgba(255, 107, 0, 0.55);
    }

    .nmsb-tab.is-active .nmsb-tab-lbl[b-ehrxtm5yuc] {
        font-weight: 700;
    }

@media (min-width: 640px) {
    .nmsb-tab[b-ehrxtm5yuc] {
        flex-direction: row;
        gap: 8px;
        padding: 12px 14px;
        min-height: 56px;
    }
}

.nmsb-tab-ico[b-ehrxtm5yuc] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #eef0f4;
    border: 1px solid transparent;
    color: var(--d-ink-3);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
    flex-shrink: 0;
}

.nmsb-tab:hover .nmsb-tab-ico[b-ehrxtm5yuc] {
    color: var(--d-ink-2);
    transform: translateY(-1px);
}

/* Tab đang chọn: chip cam gradient + icon trắng — hiện đại, nổi bật */
.nmsb-tab.is-active .nmsb-tab-ico[b-ehrxtm5yuc] {
    background: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 12px -3px rgba(255, 107, 0, 0.5);
}

.nmsb-tab-ico svg[b-ehrxtm5yuc] {
    width: 16px;
    height: 16px;
}

.nmsb-tab-lbl[b-ehrxtm5yuc] {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .nmsb-tab-lbl[b-ehrxtm5yuc] {
        font-size: 14px;
    }
}

.nmsb-tab-underline[b-ehrxtm5yuc] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 40px;
    background: var(--d-accent-grad);
    border-radius: 2px 2px 0 0;
}

.nmsb-body[b-ehrxtm5yuc] {
    width: 100%;
    background: transparent;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    overflow: visible;
    position: relative;
}

/* ── Khi FlightSearchBox nằm trong thẻ glass: ô trường mờ nhẹ để hoà vào kính,
   không thành "hộp trắng đặc trong hộp". Chỉ áp dụng trong NmSearchBox →
   các chỗ dùng FlightSearchBox độc lập (dashboard) giữ nguyên. ── */
@media (min-width: 1024px) {
    .nmsb-body[b-ehrxtm5yuc]  .fsb-row.fsb-row-horiz {
        background: rgba(255, 255, 255, 0.95);
        border-color: var(--d-line);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                    0 1px 2px rgba(16, 24, 40, 0.04),
                    0 12px 26px -14px rgba(16, 24, 40, 0.24);
    }
}

/* Pill chọn Khứ hồi/Một chiều — nền rõ, viền xám nhạt */
.nmsb-body[b-ehrxtm5yuc]  .fsb-trip-toggle {
    background: rgba(244, 245, 248, 0.9);
    border-color: var(--d-line);
}

.nmsb-body[b-ehrxtm5yuc]  .fsb-trip-toggle::before {
    background: #ffffff;
}
/* /src/Features/_Shared/Search/TourSearchBox.razor.rz.scp.css */
/* TourSearchBox — Manager Dashboard v4 theme */
.tsb-root[b-a7o3hu2qpc] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    width: 100%;
    padding: 16px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .tsb-root[b-a7o3hu2qpc] {
        padding: 18px 20px;
    }
}

.tsb-row[b-a7o3hu2qpc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .tsb-row[b-a7o3hu2qpc] {
        grid-template-columns: 1.5fr 1fr;
        gap: 12px;
    }
}

.tsb-field[b-a7o3hu2qpc] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .tsb-field:hover[b-a7o3hu2qpc] {
        border-color: #dde1e8;
    }

    .tsb-field.is-open[b-a7o3hu2qpc],
    .tsb-field:focus-within[b-a7o3hu2qpc] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.tsb-trigger[b-a7o3hu2qpc] {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.tsb-trigger-inner[b-a7o3hu2qpc] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.tsb-ico[b-a7o3hu2qpc] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .tsb-ico svg[b-a7o3hu2qpc] {
        width: 14px;
        height: 14px;
    }

.tsb-field.is-open .tsb-ico[b-a7o3hu2qpc],
.tsb-field:focus-within .tsb-ico[b-a7o3hu2qpc] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.tsb-meta[b-a7o3hu2qpc] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.tsb-lbl[b-a7o3hu2qpc] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.tsb-val[b-a7o3hu2qpc] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .tsb-val.is-placeholder[b-a7o3hu2qpc] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.tsb-input[b-a7o3hu2qpc] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

    .tsb-input[b-a7o3hu2qpc]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.tsb-caret[b-a7o3hu2qpc] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .tsb-caret.is-open[b-a7o3hu2qpc] {
        transform: rotate(180deg);
    }

.tsb-overlay[b-a7o3hu2qpc] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.tsb-pop[b-a7o3hu2qpc] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    padding: 8px;
    animation: tsb-pop-in-b-a7o3hu2qpc 0.15s ease-out;
}

@media (min-width: 768px) {
    .tsb-pop.tsb-pop-right[b-a7o3hu2qpc] {
        left: auto;
        right: 0;
        width: 260px;
    }
}

@keyframes tsb-pop-in-b-a7o3hu2qpc {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tsb-list[b-a7o3hu2qpc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.tsb-list-item[b-a7o3hu2qpc] {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tsb-list-item:hover[b-a7o3hu2qpc] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .tsb-list-item.is-selected[b-a7o3hu2qpc] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        font-weight: 600;
    }

.tsb-actions[b-a7o3hu2qpc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tsb-tagline[b-a7o3hu2qpc] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 0;
}

@media (min-width: 768px) {
    .tsb-tagline[b-a7o3hu2qpc] {
        display: inline-flex;
    }
}

.tsb-tagline b[b-a7o3hu2qpc] {
    color: var(--d-accent);
    font-weight: 600;
}

.tsb-submit[b-a7o3hu2qpc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, transform .08s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .tsb-submit[b-a7o3hu2qpc] {
        width: auto;
    }
}

.tsb-submit:hover[b-a7o3hu2qpc] {
    background: var(--d-accent-grad-hover);
}

.tsb-submit:active[b-a7o3hu2qpc] {
    transform: translateY(1px);
}

.tsb-submit svg[b-a7o3hu2qpc] {
    width: 16px;
    height: 16px;
}
/* /src/Features/_Shared/Search/VisaSearchBox.razor.rz.scp.css */
/* VisaSearchBox — Manager Dashboard v4 theme */
.vsb-root[b-xfar7snxxh] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    width: 100%;
    padding: 16px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .vsb-root[b-xfar7snxxh] {
        padding: 18px 20px;
    }
}

.vsb-row[b-xfar7snxxh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .vsb-row[b-xfar7snxxh] {
        grid-template-columns: 1.2fr 1.2fr 0.8fr;
        gap: 12px;
    }
}

.vsb-field[b-xfar7snxxh] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .vsb-field:hover[b-xfar7snxxh] {
        border-color: #dde1e8;
    }

    .vsb-field.is-open[b-xfar7snxxh] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.vsb-trigger[b-xfar7snxxh] {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.vsb-trigger-inner[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.vsb-ico[b-xfar7snxxh] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .vsb-ico svg[b-xfar7snxxh] {
        width: 14px;
        height: 14px;
    }

.vsb-field.is-open .vsb-ico[b-xfar7snxxh],
.vsb-field:focus-within .vsb-ico[b-xfar7snxxh] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.vsb-meta[b-xfar7snxxh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.vsb-lbl[b-xfar7snxxh] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.vsb-val[b-xfar7snxxh] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .vsb-val.is-placeholder[b-xfar7snxxh] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.vsb-input[b-xfar7snxxh] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

    .vsb-input[b-xfar7snxxh]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.vsb-caret[b-xfar7snxxh] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .vsb-caret.is-open[b-xfar7snxxh] {
        transform: rotate(180deg);
    }

.vsb-clear-inline[b-xfar7snxxh] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}

    .vsb-clear-inline:hover[b-xfar7snxxh] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .vsb-clear-inline svg[b-xfar7snxxh] {
        width: 12px;
        height: 12px;
    }

.vsb-pop[b-xfar7snxxh] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    padding: 12px;
    animation: vsb-pop-in-b-xfar7snxxh 0.15s ease-out;
}

@media (min-width: 768px) {
    .vsb-pop.vsb-pop-left[b-xfar7snxxh] {
        right: auto;
        width: 380px;
    }

    .vsb-pop.vsb-pop-right[b-xfar7snxxh] {
        left: auto;
        right: 0;
        width: 280px;
    }
}

@keyframes vsb-pop-in-b-xfar7snxxh {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vsb-pop-hd[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .vsb-pop-hd p[b-xfar7snxxh] {
        margin: 0;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

.vsb-pop-clear[b-xfar7snxxh] {
    border: 0;
    background: transparent;
    color: var(--d-accent);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .vsb-pop-clear:hover[b-xfar7snxxh] {
        background: var(--d-accent-soft);
    }

    .vsb-pop-clear svg[b-xfar7snxxh] {
        width: 10px;
        height: 10px;
    }

.vsb-loading[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.vsb-spinner[b-xfar7snxxh] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: vsb-spin-b-xfar7snxxh 0.7s linear infinite;
}

@keyframes vsb-spin-b-xfar7snxxh {
    to { transform: rotate(360deg); }
}

.vsb-empty[b-xfar7snxxh] {
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
    padding: 12px 0;
}

.vsb-chips[b-xfar7snxxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vsb-chip[b-xfar7snxxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .vsb-chip:hover[b-xfar7snxxh] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .vsb-chip.is-selected[b-xfar7snxxh] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.vsb-stepper-row[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vsb-stepper-info[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vsb-stepper-ico[b-xfar7snxxh] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid #ffe0c7;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .vsb-stepper-ico svg[b-xfar7snxxh] {
        width: 16px;
        height: 16px;
    }

.vsb-stepper-text p[b-xfar7snxxh] {
    margin: 0;
}

.vsb-stepper-name[b-xfar7snxxh] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.vsb-stepper-desc[b-xfar7snxxh] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.vsb-stepper-ctrl[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vsb-step-btn[b-xfar7snxxh] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .vsb-step-btn:hover:not(:disabled)[b-xfar7snxxh] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .vsb-step-btn:disabled[b-xfar7snxxh] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .vsb-step-btn svg[b-xfar7snxxh] {
        width: 12px;
        height: 12px;
    }

.vsb-step-val[b-xfar7snxxh] {
    width: 28px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.vsb-actions[b-xfar7snxxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vsb-tagline[b-xfar7snxxh] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

@media (min-width: 768px) {
    .vsb-tagline[b-xfar7snxxh] {
        display: inline-flex;
    }
}

.vsb-tagline b[b-xfar7snxxh] {
    color: var(--d-accent);
    font-weight: 600;
}

.vsb-submit[b-xfar7snxxh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, transform .08s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .vsb-submit[b-xfar7snxxh] {
        width: auto;
    }
}

.vsb-submit:hover[b-xfar7snxxh] {
    background: var(--d-accent-grad-hover);
}

.vsb-submit:active[b-xfar7snxxh] {
    transform: translateY(1px);
}

.vsb-submit svg[b-xfar7snxxh] {
    width: 16px;
    height: 16px;
}
/* /src/Features/_Shared/ServiceRequests/MyServiceRequestsView.razor.rz.scp.css */
/* My Service Requests — Manager Dashboard v4 theme (ftc-style pattern) */
.mysr-root[b-c9f2vy71jg] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 28px;
    min-height: calc(100vh - 64px);
}

/* ── ftc-style header ── */
.mysr-header[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 14px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    flex-wrap: wrap;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.mysr-header-left[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.mysr-header-ico[b-c9f2vy71jg] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(16, 24, 40, .08);
}

.mysr-header-ico svg[b-c9f2vy71jg] { width: 22px; height: 22px; }

.mysr-header-titles[b-c9f2vy71jg] { min-width: 0; }

.mysr-header-titles h1[b-c9f2vy71jg] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mysr-code-chip[b-c9f2vy71jg] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #ffe0c7;
    font-variant-numeric: tabular-nums;
}

.mysr-header-sub[b-c9f2vy71jg] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

.mysr-header-right[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Header pills */
.mysr-hpill[b-c9f2vy71jg] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 10px;
    border: 1.5px solid;
    line-height: 1.1;
    min-height: 36px;
}

.mysr-hpill small[b-c9f2vy71jg] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--d-ink-4);
    text-transform: uppercase;
}

.mysr-hpill b[b-c9f2vy71jg] {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.mysr-hpill--good[b-c9f2vy71jg] {
    border-color: color-mix(in srgb, var(--d-good) 30%, transparent);
    background: color-mix(in srgb, var(--d-good) 7%, var(--d-surface));
}
.mysr-hpill--good b[b-c9f2vy71jg] { color: var(--d-good); }

.mysr-hpill--warn[b-c9f2vy71jg] {
    border-color: color-mix(in srgb, var(--d-warn) 30%, transparent);
    background: color-mix(in srgb, var(--d-warn) 9%, var(--d-surface));
}
.mysr-hpill--warn b[b-c9f2vy71jg] { color: var(--d-warn); }

.mysr-hpill--accent[b-c9f2vy71jg] {
    border-color: transparent;
    background: var(--d-accent-grad);
}
.mysr-hpill--accent small[b-c9f2vy71jg] { color: rgba(255, 255, 255, .75); }
.mysr-hpill--accent b[b-c9f2vy71jg] { color: #fff; }

/* ---------- Filter bar (inside filter card body) ---------- */
.mysr-filterbar[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.mysr-pills[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.mysr-pill[b-c9f2vy71jg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .mysr-pill:hover[b-c9f2vy71jg] {
        background: var(--d-surface-2);
    }

    .mysr-pill.is-active[b-c9f2vy71jg] {
        background: var(--d-ink);
        border-color: var(--d-ink);
        color: #fff;
    }

    .mysr-pill.is-active.st-pending[b-c9f2vy71jg] {
        background: #92400e;
        border-color: #92400e;
    }

    .mysr-pill.is-active.st-approved[b-c9f2vy71jg] {
        background: #166534;
        border-color: #166534;
    }

    .mysr-pill.is-active.st-rejected[b-c9f2vy71jg] {
        background: #991b1b;
        border-color: #991b1b;
    }

    .mysr-pill.is-active.st-revision[b-c9f2vy71jg] {
        background: #b45309;
        border-color: #b45309;
    }

    .mysr-pill.is-active.st-booking[b-c9f2vy71jg] {
        background: #1e40af;
        border-color: #1e40af;
    }

    .mysr-pill.is-active.st-cancel[b-c9f2vy71jg] {
        background: var(--d-ink-3);
        border-color: var(--d-ink-3);
    }

.mysr-pill-count[b-c9f2vy71jg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
}

.mysr-pill.is-active .mysr-pill-count[b-c9f2vy71jg] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.mysr-filter-actions[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.mysr-search[b-c9f2vy71jg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    width: 220px;
}

    .mysr-search svg[b-c9f2vy71jg] {
        position: absolute;
        left: 9px;
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .mysr-search input[b-c9f2vy71jg] {
        width: 100%;
        height: 30px;
        padding: 0 28px 0 28px;
        border: 1px solid var(--d-line);
        border-radius: 8px;
        background: var(--d-surface);
        font-size: 12.5px;
        color: var(--d-ink);
        outline: 0;
        transition: border-color .15s, box-shadow .15s;
    }

        .mysr-search input[b-c9f2vy71jg]::placeholder {
            color: var(--d-ink-4);
        }

        .mysr-search input:focus[b-c9f2vy71jg] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        }

.mysr-search-x[b-c9f2vy71jg] {
    position: absolute;
    right: 4px;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--d-ink-3);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mysr-search-x:hover[b-c9f2vy71jg] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.mysr-iconbtn[b-c9f2vy71jg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

    .mysr-iconbtn:hover[b-c9f2vy71jg] {
        background: var(--d-surface-2);
    }

    .mysr-iconbtn.has-value[b-c9f2vy71jg] {
        border-color: var(--d-ink);
        color: var(--d-ink);
        background: var(--d-accent-soft);
    }

    .mysr-iconbtn svg[b-c9f2vy71jg] {
        flex-shrink: 0;
    }

.mysr-iconbtn-badge[b-c9f2vy71jg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--d-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mysr-pop[b-c9f2vy71jg] {
    position: relative;
}

.mysr-pop-panel[b-c9f2vy71jg] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 200px;
    padding: 8px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.mysr-check[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--d-ink);
}

    .mysr-check:hover[b-c9f2vy71jg] {
        background: var(--d-surface-2);
    }

    .mysr-check input[type=checkbox][b-c9f2vy71jg] {
        accent-color: var(--d-accent);
        cursor: pointer;
    }

.mysr-pop-date[b-c9f2vy71jg] {
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .mysr-pop-date label[b-c9f2vy71jg] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

    .mysr-pop-date input[type=date][b-c9f2vy71jg] {
        height: 30px;
        padding: 0 8px;
        border: 1px solid var(--d-line);
        border-radius: 6px;
        font-size: 12.5px;
        color: var(--d-ink);
        background: var(--d-surface);
        outline: 0;
    }

        .mysr-pop-date input[type=date]:focus[b-c9f2vy71jg] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        }

.mysr-pop-actions[b-c9f2vy71jg] {
    display: flex;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed var(--d-line);
    margin-top: 2px;
}

.mysr-pop-quick[b-c9f2vy71jg] {
    flex: 1;
    height: 26px;
    border: 1px solid var(--d-line);
    border-radius: 6px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 11.5px;
    cursor: pointer;
}

    .mysr-pop-quick:hover[b-c9f2vy71jg] {
        background: var(--d-accent-soft);
        border-color: var(--d-accent);
        color: var(--d-accent);
    }

.mysr-reset[b-c9f2vy71jg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--d-ink-3);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}

    .mysr-reset:hover[b-c9f2vy71jg] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* Card (ftc-card style with warm-cream gradient head + icon) */
.mysr-card[b-c9f2vy71jg] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    overflow: hidden;
}

/* Filter card phải cho phép overflow để popover (Loại dịch vụ / Khoảng ngày) không bị clip */
.mysr-card.mysr-card--filter[b-c9f2vy71jg] {
    overflow: visible;
}

.mysr-card-hd[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--d-line-2);
    background: linear-gradient(180deg, #fff8f2 0%, #fff 100%);
}

.mysr-card-hd h2[b-c9f2vy71jg] {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    font-family: 'Inter Tight', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

.mysr-card-hd small[b-c9f2vy71jg] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-left: 2px;
}

.mysr-card-ico[b-c9f2vy71jg] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mysr-card-ico svg[b-c9f2vy71jg] { width: 15px; height: 15px; }

.mysr-card-count[b-c9f2vy71jg] {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
}

.mysr-card-action[b-c9f2vy71jg] {
    margin-left: auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mysr-card-action:hover[b-c9f2vy71jg] {
    border-color: var(--d-accent);
    color: var(--d-accent);
    background: var(--d-accent-soft);
}

.mysr-loading[b-c9f2vy71jg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.mysr-spin[b-c9f2vy71jg] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    animation: mysr-spin-b-c9f2vy71jg 0.8s linear infinite;
}

@keyframes mysr-spin-b-c9f2vy71jg {
    to {
        transform: rotate(360deg);
    }
}

.mysr-empty[b-c9f2vy71jg] {
    text-align: center;
    padding: 56px 16px;
    color: var(--d-ink-3);
}

    .mysr-empty p[b-c9f2vy71jg] {
        margin: 0;
    }

        .mysr-empty p.b[b-c9f2vy71jg] {
            color: var(--d-ink);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .mysr-empty p.s[b-c9f2vy71jg] {
            font-size: 12.5px;
        }

.mysr-tbl-wrap[b-c9f2vy71jg] {
    overflow-x: auto;
}

.mysr-tbl[b-c9f2vy71jg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .mysr-tbl thead th[b-c9f2vy71jg] {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 10px 14px;
        border-bottom: 1px solid var(--d-line);
        background: var(--d-surface);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .mysr-tbl thead th.right[b-c9f2vy71jg] {
            text-align: right;
        }

        .mysr-tbl thead th.center[b-c9f2vy71jg] {
            text-align: center;
        }

/* CA portal: header dùng gradient cam liền mạch + chữ trắng (ngoại lệ đã duyệt, đồng bộ với /ca/bookings).
   Gradient đặt trên cả hàng để không bị đứt khúc theo từng ô; Manager giữ header trung tính. */
.mysr-root.is-ca .mysr-tbl thead tr[b-c9f2vy71jg] {
    background: var(--d-surface-2);
}

.mysr-root.is-ca .mysr-tbl thead th[b-c9f2vy71jg] {
    color: var(--d-ink-3);
    font-weight: 600;
    background: transparent;
    border-bottom: 0;
    position: static;
}

    .mysr-tbl tbody td[b-c9f2vy71jg] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

        .mysr-tbl tbody td.right[b-c9f2vy71jg] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .mysr-tbl tbody td.center[b-c9f2vy71jg] {
            text-align: center;
        }

    .mysr-tbl tbody tr[b-c9f2vy71jg] {
        cursor: pointer;
    }

        .mysr-tbl tbody tr:hover[b-c9f2vy71jg] {
            background: var(--d-surface-2);
        }

.mysr-num[b-c9f2vy71jg] {
    color: var(--d-ink-4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mysr-code[b-c9f2vy71jg] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-accent);
    font-weight: 500;
}

.mysr-meta[b-c9f2vy71jg] {
    color: var(--d-ink-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mysr-tag[b-c9f2vy71jg] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
}

    .mysr-tag.svc-flight[b-c9f2vy71jg] {
        background: #f0f9ff;
        color: #0369a1;
        border-color: #bae6fd;
    }

    .mysr-tag.svc-hotel[b-c9f2vy71jg] {
        background: #eef2ff;
        color: #4338ca;
        border-color: #c7d2fe;
    }

    .mysr-tag.svc-tour[b-c9f2vy71jg] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .mysr-tag.svc-visa[b-c9f2vy71jg] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .mysr-tag.svc-esim[b-c9f2vy71jg] {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

    .mysr-tag.svc-fasttrack[b-c9f2vy71jg] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-pending[b-c9f2vy71jg] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-approved[b-c9f2vy71jg],
    .mysr-tag.st-ready[b-c9f2vy71jg] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .mysr-tag.st-rejected[b-c9f2vy71jg] {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .mysr-tag.st-revision[b-c9f2vy71jg] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-booking[b-c9f2vy71jg] {
        background: #eff6ff;
        color: #1e40af;
        border-color: #bfdbfe;
    }

    .mysr-tag.st-cancel[b-c9f2vy71jg] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

.mysr-pager[b-c9f2vy71jg] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--d-line-2);
    background: linear-gradient(180deg, #fff 0%, #fff8f2 100%);
}

.mysr-hint[b-c9f2vy71jg] {
    font-size: 11px;
    font-weight: 600;
}

    .mysr-hint.warn[b-c9f2vy71jg] {
        color: var(--d-warn);
    }

    .mysr-hint.good[b-c9f2vy71jg] {
        color: var(--d-good);
    }
/* /src/Features/_Shared/ServiceRequests/ServiceRequestDetailView.razor.rz.scp.css */
/* Chi tiết yêu cầu dịch vụ — dựng trên token NM (--nm-*), không tự đặt bảng màu riêng.
   Nhắc: `nm-list-head/title/sub` KHÔNG phải class toàn cục (CSS Blazor là scoped) nên phải khai lại
   ở đây; và token chữ là --nm-ink / --nm-muted, KHÔNG có --nm-text-muted. */

.srd-page[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Đầu trang ── */
.nm-list-head[b-f6g8ksyimd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.srd-head-left[b-f6g8ksyimd] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.nm-list-title[b-f6g8ksyimd] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.nm-list-sub[b-f6g8ksyimd] {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nm-muted);
}

.srd-dot[b-f6g8ksyimd] {
    color: var(--nm-border-strong);
}

.srd-head-right[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.srd-amount[b-f6g8ksyimd] {
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.srd-act-row[b-f6g8ksyimd] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Bố cục 2 cột ── */
.srd-grid[b-f6g8ksyimd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.srd-col-main[b-f6g8ksyimd],
.srd-col-side[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .srd-grid[b-f6g8ksyimd] {
        grid-template-columns: 1fr;
    }
}

/* ── Thẻ ── */
[b-f6g8ksyimd] .srd-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.srd-card-ico[b-f6g8ksyimd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nm-accent-soft);
    color: var(--nm-accent);
    font-size: 14px;
    flex-shrink: 0;
}

.srd-card-title[b-f6g8ksyimd] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.srd-card-count[b-f6g8ksyimd] {
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
}

.srd-card-hint[b-f6g8ksyimd] {
    margin-left: auto;
}

.srd-muted[b-f6g8ksyimd] {
    margin: 0;
    font-size: 14px;
    color: var(--nm-muted);
    font-style: italic;
}

/* ── Khối nổi bật của dịch vụ ── */
.srd-hero[b-f6g8ksyimd] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nm-border);
}

.srd-hero-img[b-f6g8ksyimd] {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--nm-border);
    flex-shrink: 0;
}

.srd-hero-text[b-f6g8ksyimd] {
    min-width: 0;
}

.srd-hero-title[b-f6g8ksyimd] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--nm-ink);
}

.srd-hero-sub[b-f6g8ksyimd] {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--nm-muted);
}

/* Hành trình A → B (vé máy bay, fast track) */
.srd-route[b-f6g8ksyimd] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
    letter-spacing: .01em;
}

    .srd-route i[b-f6g8ksyimd] {
        color: var(--nm-accent);
        font-size: 16px;
    }

.srd-chips[b-f6g8ksyimd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.srd-chip[b-f6g8ksyimd] {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
}

    .srd-chip small[b-f6g8ksyimd] {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--nm-muted);
    }

    .srd-chip b[b-f6g8ksyimd] {
        font-size: 13px;
        font-weight: 700;
        color: var(--nm-ink);
    }

/* ── Chặng bay thật (nạp từ đơn hàng) ── */
.srd-legs[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.srd-leg[b-f6g8ksyimd] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    padding: 12px 14px;
}

.srd-leg-air[b-f6g8ksyimd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--nm-border);
}

/* Nhãn chiều đi / chiều về — chỉ hiện khi hành trình có nhiều chiều */
.srd-leg-way[b-f6g8ksyimd] {
    padding: 2px 8px;
    border-radius: var(--nm-r-pill);
    /* Nền lấy từ thang BRAND chứ không phải --nm-accent-soft: app.css đè --nm-accent thành cam
       #ea580c nhưng KHÔNG đè --nm-accent-soft (vẫn là mint của bộ token gốc) ⇒ chữ cam nền mint. */
    background: var(--nm-brand-50);
    color: var(--nm-accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.srd-leg-no[b-f6g8ksyimd] {
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* Hành lý: đẩy về cuối hàng hãng bay thay vì nằm riêng một dòng dưới đáy thẻ */
.srd-leg-bag[b-f6g8ksyimd] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--nm-muted);
}

.srd-leg-body[b-f6g8ksyimd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 168px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.srd-leg-end[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    /* GIỜ đứng trước mã sân bay: người duyệt quét cột giờ để biết chuyến sáng hay đêm,
       còn mã sân bay đã lặp lại ở cả tiêu đề yêu cầu. */
    .srd-leg-end time[b-f6g8ksyimd] {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.15;
        color: var(--nm-ink);
        font-variant-numeric: tabular-nums;
        letter-spacing: -.01em;
    }

    .srd-leg-end b[b-f6g8ksyimd] {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--nm-ink);
    }

    .srd-leg-end span[b-f6g8ksyimd] {
        font-size: 12px;
        color: var(--nm-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .srd-leg-end small[b-f6g8ksyimd] {
        margin-top: 3px;
        font-size: 11.5px;
        color: var(--nm-muted);
    }

.srd-leg-end--to[b-f6g8ksyimd] {
    text-align: right;
    align-items: flex-end;
}

.srd-leg-mid[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.srd-leg-dur[b-f6g8ksyimd],
.srd-leg-stops[b-f6g8ksyimd] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

.srd-leg-stops[b-f6g8ksyimd] {
    font-weight: 600;
}

/* Đường bay: hai vạch đứt + máy bay CHÍNH GIỮA.
   Cách cũ (border-top trên một block, icon kê bằng top:-9px) phụ thuộc vào baseline của chữ nên
   icon luôn lệch khỏi vạch và lệch khác nhau tuỳ cỡ chữ. Flex + hai pseudo-element thì máy bay
   nằm đúng tâm ở mọi bề rộng. */
.srd-leg-line[b-f6g8ksyimd] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    color: var(--nm-accent);
}

    .srd-leg-line[b-f6g8ksyimd]::before,
    .srd-leg-line[b-f6g8ksyimd]::after {
        content: "";
        flex: 1 1 auto;
        border-top: 1px dashed var(--nm-border-strong);
    }

    /* bi-airplane-fill vẽ máy bay hướng LÊN; chặng bay đọc từ trái sang phải nên phải xoay 90°. */
    .srd-leg-line i[b-f6g8ksyimd] {
        font-size: 13px;
        line-height: 1;
        transform: rotate(90deg);
    }

/* ── PNR / người liên hệ: ô nhãn-trên-giá-trị ── */
.srd-meta-grid[b-f6g8ksyimd] {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 16px;
    padding: 12px 14px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}

.srd-meta[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.srd-meta__lbl[b-f6g8ksyimd] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-muted);
}

.srd-meta__val[b-f6g8ksyimd] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

a.srd-meta__val[b-f6g8ksyimd] {
    color: var(--nm-accent);
    text-decoration: none;
}

    a.srd-meta__val:hover[b-f6g8ksyimd] {
        text-decoration: underline;
    }

.srd-meta__val--code[b-f6g8ksyimd] {
    font-size: 14px;
    letter-spacing: .08em;
    font-weight: 700;
}

.srd-meta__val--email[b-f6g8ksyimd] {
    font-weight: 500;
    word-break: break-all;
}

/* ── Hành khách ── */
.srd-sec--pax[b-f6g8ksyimd] {
    margin-top: 16px;
}

.srd-sec-count[b-f6g8ksyimd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-ink);
    letter-spacing: 0;
}

.srd-pax[b-f6g8ksyimd] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

/* Mỗi khách một dòng có vạch ngăn: danh sách trước đây chỉ là mấy dòng chữ trôi nổi ngay dưới khối
   PNR nên nhìn không ra đâu là hết mục này, bắt đầu mục kia. */
.srd-pax-item[b-f6g8ksyimd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--nm-border);
}

    .srd-pax-item:last-child[b-f6g8ksyimd] {
        border-bottom: none;
    }

.srd-pax-no[b-f6g8ksyimd] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.srd-pax-name[b-f6g8ksyimd] {
    font-weight: 600;
    color: var(--nm-ink);
    min-width: 0;
}

/* Nhãn dồn về mép phải để cột tên thẳng hàng, dễ dò */
.srd-pax-meta[b-f6g8ksyimd] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.srd-pax-tag[b-f6g8ksyimd] {
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

.srd-pax-tkt[b-f6g8ksyimd] {
    font-size: 12px;
    color: var(--nm-ok);
    font-variant-numeric: tabular-nums;
}

.srd-linked-foot[b-f6g8ksyimd] {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--nm-muted);
    flex-wrap: wrap;
}

    .srd-linked-foot a[b-f6g8ksyimd] {
        color: var(--nm-accent);
        text-decoration: none;
        font-weight: 600;
    }

/* Hẹp: xếp dọc điểm đi → điểm đến, đường bay xoay đứng chứ KHÔNG ẩn đi — ẩn thì hai mốc giờ dính
   vào nhau, không còn thấy đâu là chặng bay. */
@media (max-width: 560px) {
    .srd-leg-body[b-f6g8ksyimd] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .srd-leg-end--to[b-f6g8ksyimd] {
        text-align: left;
        align-items: flex-start;
    }

    .srd-leg-mid[b-f6g8ksyimd] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 2px 0;
    }

    .srd-leg-line[b-f6g8ksyimd] {
        width: auto;
        flex: 1 1 auto;
    }

    .srd-pax-meta[b-f6g8ksyimd] {
        margin-left: 30px;
        width: 100%;
    }
}

/* ── Các mục thông tin ── */
.srd-sections[b-f6g8ksyimd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding-top: 14px;
}

.srd-sec-title[b-f6g8ksyimd] {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--nm-muted);
}

.srd-rows[b-f6g8ksyimd] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.srd-row[b-f6g8ksyimd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

    .srd-row dt[b-f6g8ksyimd] {
        color: var(--nm-muted);
        flex-shrink: 0;
    }

    .srd-row dd[b-f6g8ksyimd] {
        margin: 0;
        text-align: right;
        color: var(--nm-ink);
        font-weight: 500;
    }

    .srd-row dd ul[b-f6g8ksyimd] {
        margin: 0;
        padding-left: 16px;
        text-align: left;
    }

    .srd-row.is-total[b-f6g8ksyimd] {
        padding-top: 6px;
        border-top: 1px dashed var(--nm-border);
    }

        .srd-row.is-total dd[b-f6g8ksyimd] {
            font-weight: 800;
            color: var(--nm-accent);
        }

/* ── Quy trình duyệt ── */
.srd-steps[b-f6g8ksyimd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.srd-step[b-f6g8ksyimd] {
    display: flex;
    gap: 10px;
}

.srd-step-dot[b-f6g8ksyimd] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    color: var(--nm-muted);
    flex-shrink: 0;
}

.srd-step-dot--approved[b-f6g8ksyimd] {
    background: var(--nm-ok-soft);
    border-color: var(--nm-ok);
    color: var(--nm-ok);
}

.srd-step-dot--rejected[b-f6g8ksyimd] {
    background: var(--nm-bad-soft);
    border-color: var(--nm-bad);
    color: var(--nm-bad);
}

.srd-step-dot--current[b-f6g8ksyimd] {
    background: var(--nm-pending-soft);
    border-color: var(--nm-pending);
    color: var(--nm-pending);
}

.srd-step-body[b-f6g8ksyimd] {
    min-width: 0;
    flex: 1;
}

.srd-step-head[b-f6g8ksyimd] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.srd-step-mode[b-f6g8ksyimd] {
    font-size: 12px;
    color: var(--nm-muted);
}

.srd-approvers[b-f6g8ksyimd] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .srd-approvers li[b-f6g8ksyimd] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 13px;
    }

.srd-appr-name[b-f6g8ksyimd] {
    font-weight: 600;
    color: var(--nm-ink);
}

.srd-appr-st[b-f6g8ksyimd] {
    font-size: 12px;
    color: var(--nm-muted);
}

.srd-appr-st--approved[b-f6g8ksyimd] {
    color: var(--nm-ok);
}

.srd-appr-st--rejected[b-f6g8ksyimd] {
    color: var(--nm-bad);
}

.srd-appr-when[b-f6g8ksyimd] {
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.srd-appr-cmt[b-f6g8ksyimd] {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--nm-muted);
}

/* ── Khác ── */
.srd-violations[b-f6g8ksyimd] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13.5px;
}

.srd-alert-text[b-f6g8ksyimd] {
    margin: 4px 0 0;
    font-size: 13.5px;
}

.srd-notes[b-f6g8ksyimd] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
}

    .srd-notes p[b-f6g8ksyimd] {
        margin: 0;
        font-size: 13.5px;
        color: var(--nm-ink-2);
    }

.srd-side-act[b-f6g8ksyimd] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
    display: flex;
    justify-content: flex-end;
}

/* Banner "gắn vào chuyến" nằm trong thân thẻ NM: bỏ margin dọc riêng của nó để không thừa khoảng
   trắng trên/dưới, và bỏ viền/nền vàng vì thẻ đã có khung — giữ lại đúng phần nội dung. */
[b-f6g8ksyimd] .srd-card .lt-banner {
    margin: 0;
    background: none;
    border: 0;
    padding: 0;
}

.srd-trip[b-f6g8ksyimd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.srd-trip-code[b-f6g8ksyimd] {
    font-weight: 700;
    color: var(--nm-accent);
    text-decoration: none;
}

    .srd-trip-code:hover[b-f6g8ksyimd] {
        text-decoration: underline;
    }

.srd-trip-name[b-f6g8ksyimd] {
    font-size: 13px;
    color: var(--nm-muted);
}

@media (max-width: 720px) {
    .srd-page[b-f6g8ksyimd] {
        padding: 16px 14px 22px;
    }

    .srd-head-right[b-f6g8ksyimd] {
        align-items: flex-start;
        width: 100%;
    }
}
/* /src/Features/_Shared/Trips/LinkToTripBanner.razor.rz.scp.css */
/* LinkToTripBanner — Banner CTA gắn vào trip sau-success.

   ★ PHẢI tự xuống dòng: banner này được đặt ở nhiều nơi rộng hẹp khác nhau (thân trang đơn hàng rộng
   ~900px, cột phụ trang chi tiết yêu cầu chỉ ~320px). Trước đây là một hàng ngang CỨNG — icon và nút
   đều `flex-shrink: 0` nên trong cột hẹp phần chữ bị bóp còn ~90px và tiêu đề vỡ thành mỗi dòng một
   từ. Dùng flex-wrap + min-width cho phần chữ để nút tự rớt xuống hàng dưới khi không đủ chỗ; media
   query KHÔNG giải quyết được vì nó đo bề rộng MÀN HÌNH chứ không phải bề rộng ô chứa. */
.lt-banner[b-hpgmtwhg64] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #ffe0c7;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 14px 0;
    container-type: inline-size;   /* cho phép các rule @container bên dưới đo BỀ RỘNG Ô CHỨA */
}
.lt-banner-soft[b-hpgmtwhg64] {
    background: #f7f8fa;
    border-color: #e2e8f0;
}
.lt-banner-icon[b-hpgmtwhg64] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ff7d1f;
    /* Trước dùng var(--d-ink-2) — token của theme Manager cũ, KHÔNG được khai ở đâu trong hệ thống
       (đã grep toàn bộ css) nên màu rơi về màu chữ kế thừa: icon sẫm nằm trên nền cam đậm. */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lt-banner-icon-muted[b-hpgmtwhg64] {
    background: #cbd5e1;
    color: #475569;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.lt-banner-body[b-hpgmtwhg64] {
    flex: 1 1 160px;   /* dưới 160px thì nút rớt xuống dòng thay vì bóp chữ vỡ từng từ */
    min-width: 0;
}
.lt-banner-title[b-hpgmtwhg64] {
    font-size: 13.5px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 2px;
    line-height: 1.3;
}
.lt-banner-soft .lt-banner-title[b-hpgmtwhg64] { color: #1f2937; }
.lt-banner-desc[b-hpgmtwhg64] {
    font-size: 12.5px;
    color: #78350f;
    margin: 0;
    line-height: 1.4;
}
.lt-banner-soft .lt-banner-desc[b-hpgmtwhg64] { color: #475569; }
.lt-banner-cta[b-hpgmtwhg64] {
    background: #ff7d1f;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s;
    flex-shrink: 0;
    margin-left: auto;      /* rộng: nằm bên phải — hẹp: tự rớt xuống hàng riêng */
    justify-content: center;
}

/* Khi đã rớt xuống hàng riêng thì trải hết bề ngang cho dễ bấm (ngón tay trên mobile) */
@container (max-width: 380px) {
    .lt-banner-cta[b-hpgmtwhg64] {
        width: 100%;
    }
}
.lt-banner-cta:hover:not(:disabled)[b-hpgmtwhg64] { background: #ff6b00; }
.lt-banner-cta:disabled[b-hpgmtwhg64] { opacity: 0.6; cursor: not-allowed; }
.lt-banner-link[b-hpgmtwhg64] {
    font-size: 12.5px;
    font-weight: 600;
    color: #ff7d1f;
    text-decoration: none;
    flex-shrink: 0;
}
.lt-banner-link:hover[b-hpgmtwhg64] { color: #ff6b00; text-decoration: underline; }

.lt-spinner-sm[b-hpgmtwhg64] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lt-spin-b-hpgmtwhg64 0.8s linear infinite;
    display: inline-block;
}
@keyframes lt-spin-b-hpgmtwhg64 {
    to { transform: rotate(360deg); }
}

.lt-error[b-hpgmtwhg64] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-top: -6px;
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .lt-banner[b-hpgmtwhg64] {
        flex-wrap: wrap;
    }
    .lt-banner-cta[b-hpgmtwhg64] {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}
/* /src/Features/_Shared/Trips/TripCalendarView.razor.rz.scp.css */
/* Lịch công tác — chuẩn NM, TOKEN-ONLY (không hex, không --d-*, không class Bootstrap).
   Khung shell dựng theo GdsIndex để cùng một hệ với các trang đã migrate.
   Prefix riêng: tcal-

   ★ Tránh các token bị wwwroot/app.css khai đè (--nm-accent, --nm-bg, --nm-shadow-sm/md/lg,
     --nm-text*, --nm-radius*). Ở đây chỉ dùng bộ chắc chắn đúng SSOT tokens.css:
     --nm-brand-*, --nm-ink/-2, --nm-muted, --nm-surface/-2, --nm-border/-strong,
     --nm-r-card/-input/-pill, --nm-shadow, --nm-font và từ vựng trạng thái --nm-ok/warn/bad/info/pending. */

.nm-list-page[b-sjfqm3qqey] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* ── Head ── */
.nm-list-head[b-sjfqm3qqey] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-sjfqm3qqey] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-sjfqm3qqey] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-sjfqm3qqey] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Bộ điều khiển tháng — một khối liền, nền surface + viền + bóng nhẹ */
.tcal-monthnav[b-sjfqm3qqey] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow);
}

.tcal-period[b-sjfqm3qqey] {
    min-width: 132px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Ba con số của tháng — NmKpi lo phần thẻ; đây chỉ nhấc bóng cho cụm nổi khỏi nền trang ── */
.tcal-kpis[b-sjfqm3qqey]  .nm-kpi { box-shadow: var(--nm-shadow); }
.tcal-kpis[b-sjfqm3qqey]  .nm-kpi__val { font-size: 24px; }

/* ── Chú giải kiêm bộ lọc — mỗi chip MANG MÀU tông của nó, nên bản thân dải này
      chính là bảng màu; trước đây chip trắng trơn với một chấm 9px thì gần như vô hình. ── */
.tcal-legend[b-sjfqm3qqey] { display: flex; flex-wrap: wrap; gap: 7px; }

.tcal-chip[b-sjfqm3qqey] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--tone-fg) 28%, transparent);
    border-radius: var(--nm-r-pill);
    background: var(--tone-bg);
    box-shadow: var(--nm-shadow);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tone-fg);
    cursor: pointer;
    transition: opacity .12s, border-color .12s, box-shadow .12s;
}

.tcal-chip:hover[b-sjfqm3qqey] { border-color: color-mix(in srgb, var(--tone-fg) 55%, transparent); }
.tcal-chip:focus-visible[b-sjfqm3qqey] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; }

/* Đang tắt: rút hết màu về xám để phân biệt tức thì với chip đang bật */
.tcal-chip.is-off[b-sjfqm3qqey] {
    background: var(--nm-surface-2);
    border-color: var(--nm-border);
    color: var(--nm-muted);
    box-shadow: none;
    text-decoration: line-through;
}

.tcal-chip b[b-sjfqm3qqey] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, var(--tone-fg) 14%, transparent);
}

.tcal-chip.is-off b[b-sjfqm3qqey] { background: var(--nm-border); }

.tcal-chip__dot[b-sjfqm3qqey] {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: var(--nm-r-pill);
    background: var(--tone-fg);
}

.tcal-chip.is-off .tcal-chip__dot[b-sjfqm3qqey] { background: var(--nm-border-strong); }

/* ── Khung thẻ ── */
.tcal-card[b-sjfqm3qqey] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
    overflow: hidden;
}

.tcal-weekhead[b-sjfqm3qqey] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border-strong);
}

.tcal-weekhead span[b-sjfqm3qqey] {
    padding: 10px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-ink-2);
    text-transform: uppercase;
    letter-spacing: .09em;
}

/* Cuối tuần nhạt hơn — đọc ra nhịp tuần mà không cần thêm đường kẻ nào */
.tcal-weekhead span:nth-child(6)[b-sjfqm3qqey],
.tcal-weekhead span:nth-child(7)[b-sjfqm3qqey] { color: var(--nm-muted); }

/* ── Một tuần ── */
.tcal-week[b-sjfqm3qqey] {
    border-bottom: 1px solid var(--nm-border);
    padding-bottom: 8px;
    /* Vạch dọc chia 7 cột vẽ bằng nền — khỏi cần 7 phần tử rỗng */
    background-image: repeating-linear-gradient(to right, var(--nm-border) 0 1px, transparent 1px calc(100% / 7));
}

.tcal-week:last-child[b-sjfqm3qqey] { border-bottom: 0; }

.tcal-dates[b-sjfqm3qqey] { display: grid; grid-template-columns: repeat(7, 1fr); }

.tcal-date[b-sjfqm3qqey] {
    height: 42px;   /* đủ chỗ hai dòng: dương lịch + âm lịch */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.tcal-solar[b-sjfqm3qqey] {
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nm-r-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

/* Âm lịch: lớp phụ, cố ý nhỏ và nhạt để không tranh chỗ với dải chuyến */
.tcal-lunar[b-sjfqm3qqey] {
    font-size: 9.5px;
    line-height: 1;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* Mùng 1 và rằm — đậm hơn một nấc, KHÔNG tô màu để khỏi đọ với màu trạng thái chuyến */
.tcal-lunar.is-marked[b-sjfqm3qqey] { color: var(--nm-ink-2); font-weight: 700; }

/* Ngày của tháng khác — mờ đi, vẫn hiện để dải chuyến không bị cụt vô cớ */
.tcal-date.is-out .tcal-solar[b-sjfqm3qqey] { color: var(--nm-muted); opacity: .7; }
.tcal-date.is-out .tcal-lunar[b-sjfqm3qqey] { opacity: .5; }

.tcal-date.is-today .tcal-solar[b-sjfqm3qqey] {
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-weight: 800;
}

.tcal-date.is-today .tcal-lunar[b-sjfqm3qqey] { color: var(--nm-brand-700); font-weight: 700; }

/* ── Dải chuyến: điểm nhấn của trang ── */
.tcal-lanes[b-sjfqm3qqey] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 26px;
    gap: 3px 0;
    padding: 0 2px 2px;
}

.tcal-bar[b-sjfqm3qqey] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0 2px;
    padding: 0 8px;
    border-radius: var(--nm-r-input);
    border: 1px solid var(--tone-bd);
    /* Vạch đậm ở mép trái = ngày ĐI. Bị cắt ở biên tuần thì bỏ (xem .cut-l) vì lúc đó
       mép trái không phải ngày đi thật. */
    border-left: 3px solid var(--tone-fg);
    background: var(--tone-bg);
    color: var(--tone-fg);
    text-decoration: none;
    overflow: hidden;
    transition: filter .12s, box-shadow .12s;
}

.tcal-bar:hover[b-sjfqm3qqey] {
    filter: brightness(.97);
    box-shadow: var(--nm-shadow);
    text-decoration: none;
    color: var(--tone-fg);
}
.tcal-bar:focus-visible[b-sjfqm3qqey] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; }

/* Chuyến kéo dài qua biên tuần: cắt vuông + viền đứt để biết còn tiếp.
   Mép trái không phải ngày đi nữa nên HẠ vạch đậm xuống như viền thường. */
.tcal-bar.cut-l[b-sjfqm3qqey] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
    border-left: 1px dashed var(--tone-bd);
}

.tcal-bar.cut-r[b-sjfqm3qqey] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    border-right-style: dashed;
}

.tcal-bar__name[b-sjfqm3qqey] {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcal-bar__loc[b-sjfqm3qqey] {
    font-size: 10px;
    line-height: 1.15;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcal-more[b-sjfqm3qqey] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 0 0 6px;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--nm-r-pill);
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--nm-muted);
    cursor: pointer;
}

.tcal-more:hover[b-sjfqm3qqey] { color: var(--nm-brand-700); background: var(--nm-brand-50); }
.tcal-more:focus-visible[b-sjfqm3qqey] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; }

/* ── Từ vựng trạng thái — CHÉP ĐÚNG bảng màu của NmBadge để một trạng thái chỉ có một màu
      trên toàn màn hình (dải trên lưới, chip ở chú giải, badge trong danh sách).
      Viền lấy chính màu tông pha loãng (không dùng xám trung tính) — trước đây viền xám
      làm dải chìm hẳn vào nền thẻ, nhìn như mảng màu nhạt chứ không ra "thanh". ── */
.t-ok[b-sjfqm3qqey]      { --tone-fg: var(--nm-ok);      --tone-bg: var(--nm-ok-soft); }
.t-warn[b-sjfqm3qqey]    { --tone-fg: var(--nm-warn);    --tone-bg: var(--nm-warn-soft); }
.t-bad[b-sjfqm3qqey]     { --tone-fg: var(--nm-bad);     --tone-bg: var(--nm-bad-soft); }
.t-info[b-sjfqm3qqey]    { --tone-fg: var(--nm-info);    --tone-bg: var(--nm-info-soft); }
.t-pending[b-sjfqm3qqey] { --tone-fg: var(--nm-pending); --tone-bg: var(--nm-pending-soft); }
.t-neutral[b-sjfqm3qqey] { --tone-fg: var(--nm-ink-2);   --tone-bg: var(--nm-surface-2); }

.t-ok[b-sjfqm3qqey], .t-warn[b-sjfqm3qqey], .t-bad[b-sjfqm3qqey], .t-info[b-sjfqm3qqey], .t-pending[b-sjfqm3qqey], .t-neutral[b-sjfqm3qqey] {
    --tone-bd: color-mix(in srgb, var(--tone-fg) 34%, transparent);
}

/* ── Danh sách (màn hẹp) ── */
.tcal-agenda[b-sjfqm3qqey] { display: none; }

.tcal-item[b-sjfqm3qqey] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-border);
    border-left: 3px solid var(--tone-fg);
    text-decoration: none;
    color: var(--nm-ink);
}

.tcal-item:last-child[b-sjfqm3qqey] { border-bottom: 0; }
.tcal-item:hover[b-sjfqm3qqey] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }
.tcal-item:focus-visible[b-sjfqm3qqey] { outline: 2px solid var(--nm-brand-500); outline-offset: -2px; }

.tcal-item__range[b-sjfqm3qqey] {
    flex: none;
    min-width: 88px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

.tcal-item__main[b-sjfqm3qqey] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.tcal-item__main b[b-sjfqm3qqey] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcal-item__main small[b-sjfqm3qqey] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.tcal-sep[b-sjfqm3qqey] {
    width: 3px;
    height: 3px;
    flex: none;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
}

.tcal-lunar-inline[b-sjfqm3qqey] { white-space: nowrap; }

.tcal-note[b-sjfqm3qqey] {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--nm-muted);
}

/* ── Màn hẹp: bỏ lưới, dùng danh sách. Ép cuộn ngang một lịch tháng là cách chắc chắn
      nhất để không ai đọc được nó trên điện thoại. ── */
@media (max-width: 760px) {
    .nm-list-page[b-sjfqm3qqey] { padding: 16px 14px 24px; gap: 12px; }
    .nm-list-title[b-sjfqm3qqey] { font-size: 18px; }
    .tcal-stat[b-sjfqm3qqey] { padding: 2px 14px; }
    .tcal-stat__val[b-sjfqm3qqey] { font-size: 19px; }
    .tcal-gridview[b-sjfqm3qqey] { display: none; }
    .tcal-agenda[b-sjfqm3qqey] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .tcal-chip[b-sjfqm3qqey], .tcal-bar[b-sjfqm3qqey] { transition: none; }
}
/* /src/Features/_Shared/Trips/TripPicker.razor.rz.scp.css */
/* TripPicker — Modal chọn trip eligible.
   Theme: warm-neutral + orange accent ONLY ở selected + primary CTA.
*/
.tripick-overlay[b-1k9vflr6t3] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tripick-backdrop[b-1k9vflr6t3] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.tripick-panel[b-1k9vflr6t3] {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tripick-in-b-1k9vflr6t3 0.18s ease-out;
}
@keyframes tripick-in-b-1k9vflr6t3 {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.tripick-head[b-1k9vflr6t3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #ffe8d6 100%);
    border-bottom: 1px solid #ffe0c7;
}
.tripick-head-icon[b-1k9vflr6t3] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ff7d1f;
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tripick-head-text[b-1k9vflr6t3] { flex: 1; min-width: 0; }
.tripick-head-text h3[b-1k9vflr6t3] {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.tripick-head-text p[b-1k9vflr6t3] {
    font-size: 12.5px;
    color: #6b7280;
    margin: 2px 0 0;
}
.tripick-close[b-1k9vflr6t3] {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.tripick-close:hover[b-1k9vflr6t3] { background: rgba(0,0,0,0.05); color: #1f2937; }

.tripick-body[b-1k9vflr6t3] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.tripick-state[b-1k9vflr6t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 10px;
}
.tripick-state h4[b-1k9vflr6t3] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 4px 0 0;
}
.tripick-state p[b-1k9vflr6t3] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    max-width: 320px;
}
.tripick-empty-icon[b-1k9vflr6t3] { color: #cbd5e1; }
.tripick-spinner[b-1k9vflr6t3] {
    width: 32px;
    height: 32px;
    border: 3px solid #ffe0c7;
    border-top-color: #ff7d1f;
    border-radius: 50%;
    animation: tripick-spin-b-1k9vflr6t3 0.8s linear infinite;
}
.tripick-spinner-sm[b-1k9vflr6t3] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tripick-spin-b-1k9vflr6t3 0.8s linear infinite;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
@keyframes tripick-spin-b-1k9vflr6t3 {
    to { transform: rotate(360deg); }
}

/* ── Search ── */
.tripick-search[b-1k9vflr6t3] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.tripick-search > svg[b-1k9vflr6t3] {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}
.tripick-search-input[b-1k9vflr6t3] {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 36px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    font-size: 13.5px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.tripick-search-input[b-1k9vflr6t3]::placeholder { color: #94a3b8; }
.tripick-search-input:focus[b-1k9vflr6t3] {
    border-color: #ff7d1f;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.tripick-search-clear[b-1k9vflr6t3] {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.tripick-search-clear:hover[b-1k9vflr6t3] { background: #e2e8f0; color: #1f2937; }

.tripick-list[b-1k9vflr6t3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tripick-card[b-1k9vflr6t3] {
    text-align: left;
    background: #f7f8fa;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.12s ease;
    width: 100%;
}
.tripick-card:hover[b-1k9vflr6t3] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.tripick-card.selected[b-1k9vflr6t3] {
    background: #fff8f2;
    border-color: #ff7d1f;
    box-shadow: 0 0 0 3px rgba(255, 107, 0,0.12);
}
.tripick-card-head[b-1k9vflr6t3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.tripick-card-head-left[b-1k9vflr6t3] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.tripick-badge-purpose[b-1k9vflr6t3] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.tripick-badge-purpose.is-company[b-1k9vflr6t3] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}
.tripick-badge-purpose.is-personal[b-1k9vflr6t3] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}
.tripick-card-code[b-1k9vflr6t3] {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #ff7d1f;
    letter-spacing: 0.3px;
}
.tripick-badge-match[b-1k9vflr6t3] {
    font-size: 10.5px;
    font-weight: 600;
    color: #047857;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tripick-card-name[b-1k9vflr6t3] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1.3;
}
.tripick-card-meta[b-1k9vflr6t3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}
.tripick-meta-item[b-1k9vflr6t3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tripick-card-budget[b-1k9vflr6t3] { margin-top: 6px; }
.tripick-budget-bar[b-1k9vflr6t3] {
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.tripick-budget-fill[b-1k9vflr6t3] {
    height: 100%;
    background: linear-gradient(90deg, #ff7d1f, #ff9a52);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.tripick-budget-text[b-1k9vflr6t3] {
    font-size: 11px;
    color: #64748b;
    font-family: ui-monospace, monospace;
}

.tripick-planned[b-1k9vflr6t3] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ffe0c7;
}
.tripick-planned-label[b-1k9vflr6t3] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 4px;
}
.tripick-planned-select[b-1k9vflr6t3] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ffe0c7;
    border-radius: 7px;
    font-size: 14px;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
}
.tripick-planned-select:focus[b-1k9vflr6t3] {
    outline: none;
    border-color: #ff7d1f;
    box-shadow: 0 0 0 3px rgba(255, 107, 0,0.15);
}

.tripick-footer[b-1k9vflr6t3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: #f7f8fa;
    border-top: 1px solid #e2e8f0;
}
.tripick-btn[b-1k9vflr6t3] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    transition: all 0.12s ease;
}
.tripick-btn:hover:not(:disabled)[b-1k9vflr6t3] {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.tripick-btn:disabled[b-1k9vflr6t3] {
    opacity: 0.55;
    cursor: not-allowed;
}
.tripick-btn-primary[b-1k9vflr6t3] {
    background: #ff7d1f;
    color: #fff;
    border-color: #ff7d1f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tripick-btn-primary:hover:not(:disabled)[b-1k9vflr6t3] {
    background: #ff6b00;
    border-color: #ff6b00;
}
/* /src/Features/_Shared/Wallet/WalletAdminActions.razor.rz.scp.css */
/* Modal thao tác tiền của kế toán — style đứng cạnh component vì nó được dùng ở nhiều trang;
   để ở .razor.css của trang thì trang thứ hai render ra khối trắng trơn. */

.wa-form[b-ob0dx8k8bw] { display: flex; flex-direction: column; gap: 14px; }

.wa-ctx[b-ob0dx8k8bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2, var(--nm-surface));
}
.wa-ctx__co[b-ob0dx8k8bw] { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nm-ink); }
.wa-ctx__bal[b-ob0dx8k8bw] { font-size: 13px; color: var(--nm-muted); }
.wa-ctx__bal b[b-ob0dx8k8bw] { color: var(--nm-ink); font-variant-numeric: tabular-nums; }

.nm-code-pill[b-ob0dx8k8bw] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.wa-quick[b-ob0dx8k8bw] { display: flex; gap: 8px; flex-wrap: wrap; }

.wa-preview[b-ob0dx8k8bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
    font-size: 13px;
    color: var(--nm-muted);
}
.wa-preview b[b-ob0dx8k8bw] { font-size: 16px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.wa-preview b.is-good[b-ob0dx8k8bw] { color: var(--nm-ok, #16a34a); }
.wa-preview b.is-bad[b-ob0dx8k8bw] { color: var(--nm-bad, #dc2626); }

.wa-modal-sub[b-ob0dx8k8bw] { margin: 0; font-size: 14px; color: var(--nm-ink); line-height: 1.55; }

/* CurrencyInput là <input> trần (không phải NmInput) nên khung phải tự khai ở đây */
.wa-form[b-ob0dx8k8bw]  .ci-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* /src/Features/_Shared/Wallet/WalletSummaryView.razor.rz.scp.css */
/* WalletSummaryView — shared /manager/wallet/summary + /ca/wallet/summary, chuẩn nm-list token-only:
   head + NmStatGrid 5 KPI + card tỉ lệ phân bổ (thanh chồng lớp) + NmCard DataGrid cost center. */
.nm-list-page[b-hnwv23njpu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-hnwv23njpu] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-hnwv23njpu] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.wsv-title[b-hnwv23njpu] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-hnwv23njpu] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-hnwv23njpu] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-hnwv23njpu] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Card ── */
[b-hnwv23njpu] .wsv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wsv-card-ico[b-hnwv23njpu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.wsv-card-title[b-hnwv23njpu] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.wsv-card-count[b-hnwv23njpu] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.wsv-card-hint[b-hnwv23njpu] { font-size: 11.5px; color: var(--nm-muted); }
.wsv-card-meta[b-hnwv23njpu] {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Thanh tỉ lệ phân bổ/chi tiêu chồng lớp trên số dư ── */
.wsv-progress[b-hnwv23njpu] {
    position: relative;
    height: 14px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    overflow: hidden;
}
.wsv-progress-alloc[b-hnwv23njpu] {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--nm-brand-500) 30%, transparent);
    border-radius: var(--nm-r-pill);
}
.wsv-progress-spent[b-hnwv23njpu] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--nm-brand-500);
    border-radius: var(--nm-r-pill);
}
.wsv-legend[b-hnwv23njpu] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.wsv-legend-row[b-hnwv23njpu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--nm-ink-2);
}
.wsv-legend-sw[b-hnwv23njpu] { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.wsv-legend-sw.spent[b-hnwv23njpu] { background: var(--nm-brand-500); }
.wsv-legend-sw.alloc[b-hnwv23njpu] { background: color-mix(in srgb, var(--nm-brand-500) 30%, transparent); }
.wsv-legend-sw.unused[b-hnwv23njpu] { background: var(--nm-surface-2); border: 1px solid var(--nm-border); }

/* ── Cell trong DataGrid ── */
.cell-2line[b-hnwv23njpu] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-hnwv23njpu] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub[b-hnwv23njpu] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub i[b-hnwv23njpu] { color: var(--nm-brand-700); font-size: 10px; }
.wsv-period[b-hnwv23njpu] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.wsv-money[b-hnwv23njpu] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wsv-money.is-spent[b-hnwv23njpu] { color: var(--nm-bad); }
.wsv-money.is-reserved[b-hnwv23njpu] { color: var(--nm-warn); }
.wsv-money.is-good[b-hnwv23njpu] { color: var(--nm-ok); font-weight: 600; }
.wsv-money.is-bad[b-hnwv23njpu] { color: var(--nm-bad); font-weight: 600; }

.wsv-usage[b-hnwv23njpu] { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
[b-hnwv23njpu] .wsv-usage-bar { flex: 1; min-width: 60px; }
.wsv-usage-pct[b-hnwv23njpu] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .nm-list-page[b-hnwv23njpu] { padding: 16px 14px 22px; }
    .wsv-card-meta[b-hnwv23njpu] { margin-left: 0; }
}
/* /src/Features/_Shared/Wallet/WalletView.razor.rz.scp.css */
/* WalletView — shared /manager/wallet + /ca/wallet, chuẩn nm-list token-only, bám khung của cụm
   tài chính CA (/ca/budget, /ca/invoices): head + thẻ ví + NmStatGrid KPI + NmToolbar lọc +
   NmCard DataGrid (yêu cầu nạp / lịch sử giao dịch) + NmModal nạp tiền.
   Chrome của từng khối do Nm* lo — file này chỉ dựng bố cục và các ô chữ trong cell. */
.nm-list-page[b-m6eu60r75e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-m6eu60r75e] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-m6eu60r75e] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.wv-title[b-m6eu60r75e] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nm-list-sub[b-m6eu60r75e] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-m6eu60r75e] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nm-code-pill[b-m6eu60r75e] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Thẻ ví (cockpit): số dư | ngân sách, + dải dòng tiền mỏng ở chân ──
   Hành động (Nạp tiền / Tổng quan) đã lên nm-list-head nên vùng trái chỉ còn con số + nhịp dùng. */
.wv-balance[b-m6eu60r75e] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(280px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 16px 18px;
}

.wv-balance__main[b-m6eu60r75e] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.wv-balance__lbl[b-m6eu60r75e] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.wv-balance__val[b-m6eu60r75e] {
    font-size: 32px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    word-break: break-word;
}
/* Nhãn runway + nút "nạp ngay" (chỉ hiện khi sắp cạn) nằm cùng hàng ngay dưới số dư. */
.wv-balance__meta[b-m6eu60r75e] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.wv-balance__side[b-m6eu60r75e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid var(--nm-border);
}

/* NmProgress tự lo track/fill/nhãn — chỉ chỉnh cỡ chữ dòng nhãn cho khớp mật độ thẻ. */
[b-m6eu60r75e] .wv-usage .nm-progress__head { font-size: 12px; }

/* NmDescriptionList (is-inline) mặc định cột nhãn 140px cho trang chi tiết — trong thẻ ví
   4 ô xếp 2 cột nên cần hẹp hơn, và bỏ viền dưới của hàng cuối cho gọn.
   Selector phải nêu đủ .nm-dl.is-inline mới thắng được rule gốc của component (cùng cấp class). */
[b-m6eu60r75e] .wv-budget-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
[b-m6eu60r75e] .wv-budget-dl.nm-dl.is-inline .nm-dl__item { grid-template-columns: minmax(96px, auto) 1fr; padding: 7px 0; }
[b-m6eu60r75e] .wv-budget-dl.nm-dl .nm-dl__item:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }

.wv-num[b-m6eu60r75e] {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wv-num.is-good[b-m6eu60r75e] { color: var(--nm-ok); }
.wv-num.is-warn[b-m6eu60r75e] { color: var(--nm-warn); }
.wv-num.is-bad[b-m6eu60r75e] { color: var(--nm-bad); }

.wv-nobudget[b-m6eu60r75e] { display: flex; align-items: center; gap: 10px; color: var(--nm-muted); }
.wv-nobudget > i[b-m6eu60r75e] { font-size: 20px; color: var(--nm-brand-500); flex-shrink: 0; }
.wv-nobudget b[b-m6eu60r75e] { display: block; font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.wv-nobudget small[b-m6eu60r75e] { font-size: 12px; }

/* ── Dải dòng tiền: 1 hàng mỏng ở chân thẻ ví (cùng ngôn ngữ với .cabk-stats của /ca/bookings).
   Trên màn hẹp thì trượt ngang chứ KHÔNG xuống dòng — 4 con số này đọc theo hàng mới ra nghĩa
   "vào – ra – ròng – nhịp". */
.wv-flow[b-m6eu60r75e] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 8px 6px;
    border-top: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.wv-flow[b-m6eu60r75e]::-webkit-scrollbar { display: none; }

.wv-flow__item[b-m6eu60r75e] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 14px;
    white-space: nowrap;
    min-width: max-content;
}
.wv-flow__item + .wv-flow__item[b-m6eu60r75e] { border-left: 1px solid var(--nm-border); }

.wv-flow__dot[b-m6eu60r75e] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.wv-flow__dot--accent[b-m6eu60r75e] { background: var(--nm-brand-500); }
.wv-flow__dot--good[b-m6eu60r75e] { background: var(--nm-ok); }
.wv-flow__dot--info[b-m6eu60r75e] { background: var(--nm-info); }
.wv-flow__dot--warn[b-m6eu60r75e] { background: var(--nm-warn); }
.wv-flow__dot--bad[b-m6eu60r75e] { background: var(--nm-bad); }

.wv-flow__lbl[b-m6eu60r75e] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.wv-flow__val[b-m6eu60r75e] {
    margin-left: auto;
    font-size: 14px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.wv-flow__hint[b-m6eu60r75e] {
    align-self: center;
    padding: 0 12px 0 14px;
    border-left: 1px solid var(--nm-border);
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
}

/* ── Card ── */
[b-m6eu60r75e] .wv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wv-card-ico[b-m6eu60r75e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.wv-card-title[b-m6eu60r75e] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.wv-card-count[b-m6eu60r75e] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.wv-card-hint[b-m6eu60r75e] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid ── */
.wv-money[b-m6eu60r75e] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wv-money.up[b-m6eu60r75e] { color: var(--nm-ok); font-weight: 600; }
.wv-money.down[b-m6eu60r75e] { color: var(--nm-bad); font-weight: 600; }
.wv-time[b-m6eu60r75e] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.wv-desc[b-m6eu60r75e] {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.nm-row-actions[b-m6eu60r75e] { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* Hàng yêu cầu chờ duyệt — nền cam nhạt để nhận ra chỗ cần thao tác */
[b-m6eu60r75e] .wv-row-pending .nm-grid__td { background: color-mix(in srgb, var(--nm-warn) 6%, transparent); }

/* ── Accordion "Yêu cầu nạp tiền" ──
   Tiêu đề accordion là <button> nên các phần tử con phải xếp hàng ngang thủ công; thân accordion
   bỏ đệm hai bên để DataGrid chạm mép như trong NmCard. */
   Selector phải kèm .nm-accordion mới hơn được rule gốc (cùng số class thì thứ tự bundle định đoạt). */
.wv-acc-title[b-m6eu60r75e] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }
[b-m6eu60r75e] .wv-req-acc.nm-accordion .nm-acc__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[b-m6eu60r75e] .wv-req-acc.nm-accordion .nm-acc__head { padding: 11px 16px; }
[b-m6eu60r75e] .wv-req-acc.nm-accordion .nm-acc__body { padding: 0; }

/* ── Toolbar lọc lịch sử giao dịch (NmToolbar Boxed) ──
   NmInput/NmDateRange mặc định giãn 100% → khoá bề rộng để nằm chung một hàng. */
[b-m6eu60r75e] .wv-toolbar .nm-input-wrap { width: 240px; flex: 0 0 auto; }
[b-m6eu60r75e] .wv-toolbar .nm-daterange { flex: 0 0 auto; }
.wv-tx-chips[b-m6eu60r75e] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wv-foot[b-m6eu60r75e] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal nạp tiền ── */
.wv-form[b-m6eu60r75e] { display: flex; flex-direction: column; gap: 12px; }
.wv-form-ctx[b-m6eu60r75e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nm-muted);
}
.wv-form-bal b[b-m6eu60r75e] { color: var(--nm-brand-700); font-weight: 700; font-variant-numeric: tabular-nums; }
.wv-quick[b-m6eu60r75e] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wv-method[b-m6eu60r75e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.wv-method-ico[b-m6eu60r75e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 15px;
    flex-shrink: 0;
}
.wv-method-info[b-m6eu60r75e] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wv-method-info b[b-m6eu60r75e] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.wv-method-info small[b-m6eu60r75e] { font-size: 11.5px; color: var(--nm-muted); }

/* Lưới cổng thanh toán do PaymentMethodSelector (pms-*) tự lo — modal chỉ cần bỏ khoảng đệm thừa. */
.wv-form[b-m6eu60r75e]  .pms-root { width: 100%; }
.wv-form[b-m6eu60r75e]  .pms-cat-lbl:first-child { margin-top: 0; }

/* Thẻ ví hết chỗ cho 2 cột trước cả mốc mobile (sidebar CA ăn mất bề ngang) → xuống hàng sớm hơn. */
@media (max-width: 960px) {
    .wv-balance[b-m6eu60r75e] { grid-template-columns: 1fr; gap: 14px; }
    .wv-balance__side[b-m6eu60r75e] { padding-left: 0; border-left: 0; border-top: 1px solid var(--nm-border); padding-top: 12px; }
}

@media (max-width: 640px) {
    .nm-list-page[b-m6eu60r75e] { padding: 16px 14px 22px; }
    .wv-balance[b-m6eu60r75e] { padding: 14px; }
    .wv-balance__val[b-m6eu60r75e] { font-size: 26px; }
    [b-m6eu60r75e] .wv-budget-dl { grid-template-columns: 1fr; }
    [b-m6eu60r75e] .wv-budget-dl.nm-dl .nm-dl__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--nm-border); padding-bottom: 7px; }
    [b-m6eu60r75e] .wv-budget-dl.nm-dl .nm-dl__item:last-child { border-bottom: 0; padding-bottom: 0; }
    [b-m6eu60r75e] .wv-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
    .wv-card-hint[b-m6eu60r75e] { margin-left: 0; }
    /* Dải dòng tiền đã trượt ngang được rồi — bỏ nốt dòng "30 ngày" để không tốn thêm chiều rộng. */
    .wv-flow__hint[b-m6eu60r75e] { display: none; }
}
/* /src/Portals/Auth/AuthLayout.razor.rz.scp.css */
/* AuthLayout — vỏ "boarding pass" cho portal Auth. Token-only (tokens.css SSOT). */

.auth-shell[b-khe28dmn57] {
    /* Nền sẫm hơn surface một nấc để card nổi khối và notch "thủng" rõ.
       --auth-bg dùng chung cho nền + notch → luôn khớp màu tuyệt đối. */
    --auth-bg: var(--nm-bg);
    /* Khoang ảnh desktop: khoá theo px để giữ ĐÚNG 3:4 với --auth-card-h (banner
       auth là ảnh dọc). Đổi 1 trong 2 giá trị thì phải đổi cả cặp — media width,
       card min-height và toạ độ notch trên mask đều đọc từ đây. */
    --auth-media-w: 420px;
    --auth-card-h: 560px; /* = 420 / 3 * 4 */
    min-height: 100vh;
    display: flex;
    padding: 24px 16px;
    background: var(--auth-bg);
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .auth-shell[b-khe28dmn57] {
        --auth-bg: color-mix(in srgb, var(--nm-bg) 90%, var(--nm-ink));
    }
}

/* margin:auto thay cho align/justify center: nội dung cao hơn viewport
   vẫn scroll tới đỉnh được (center + overflow sẽ cắt mất phần đầu). */
.auth-wrap[b-khe28dmn57] {
    width: 100%;
    max-width: 960px;
    margin: auto;
}

/* ---- Top bar ---- */
.auth-topbar[b-khe28dmn57] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 14px;
    /* ⚠ animation `auth-fade both` (fill forward) làm topbar TỰ tạo stacking context
       vĩnh viễn (spec: animation đang áp opacity/transform ⇒ context, kể cả khi giá
       trị cuối là 1/none). .auth-card phía sau cũng vậy ⇒ card đè lên dropdown
       ngôn ngữ (z-50 bị nhốt trong context topbar). Nâng topbar lên trên card. */
    position: relative;
    z-index: 30;
}

.auth-logo[b-khe28dmn57] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.auth-logo img[b-khe28dmn57] {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.auth-logo__text[b-khe28dmn57] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}

.auth-logo__name[b-khe28dmn57] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--nm-ink);
}

.auth-logo__name em[b-khe28dmn57] {
    font-style: normal;
    color: var(--nm-brand-500);
}

.auth-logo__tag[b-khe28dmn57] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nm-muted);
}

.auth-topbar__right[b-khe28dmn57] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-topbar__link[b-khe28dmn57] {
    display: none;
    font-size: 12px;
    color: var(--nm-ink-2);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-topbar__link:hover[b-khe28dmn57] { color: var(--nm-brand-600); }

@media (min-width: 640px) {
    .auth-topbar__link[b-khe28dmn57] { display: inline; }
}

/* ---- Card boarding pass ---- */
.auth-card[b-khe28dmn57] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    /* KHÔNG border: overflow chỉ cắt ở mép trong border nên notch không đè lên
       được dải 1px → sinh lằn trắng ngang tại miệng lỗ khoét. Mép card do shadow
       + tương phản nền đảm nhận. */
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-pop);
    overflow: hidden; /* cắt nửa ngoài của notch trên seam → vết khuyết vé */
}

/* Khoét lỗ THẬT bằng mask: box-shadow phủ sẫm nền sát mép card, còn lòng notch
   (fill phẳng --auth-bg) không có bóng → lộ quầng tròn lệch màu. Mask đục thủng
   card + drop-shadow bám theo hình ĐÃ khoét ⇒ trong lỗ thấy đúng nền thật, bóng
   và nền liền mạch. Giá trị drop-shadow = --nm-shadow-pop (token là chuỗi
   box-shadow, không tái dùng được trong filter). Notch 26px → bán kính 13. */
@supports (mask-composite: intersect) {
    .auth-card[b-khe28dmn57] {
        box-shadow: none;
        filter: drop-shadow(0 12px 40px rgba(16, 24, 40, .14));
        /* Mobile: seam ngang tại y = 216px media + 7px nửa seam = 223px */
        mask-image:
            radial-gradient(circle at 0 223px, transparent 12px, #000 13px),
            radial-gradient(circle at 100% 223px, transparent 12px, #000 13px);
        mask-composite: intersect;
    }
}

@media (min-width: 1024px) {
    /* height (KHÔNG min-height): khoang ảnh stretch theo card, nên card cao lên là
       tỉ lệ 3:4 của khoang ảnh vỡ ngay — ảnh contain giữ nguyên cỡ, phần dư thành
       dải nền mờ ở đáy (lỗi trang /register). Khoá cứng chiều cao = 420/3*4 ⇒ ảnh
       luôn lấp trọn khoang; form dài hơn thì cuộn trong .auth-card__form-scroll. */
    .auth-card[b-khe28dmn57] {
        flex-direction: row;
        height: var(--auth-card-h);
    }

    /* Không có khoang ảnh ⇒ không có tỉ lệ nào phải giữ: trả card về cao theo nội dung,
       tránh ép form ngắn phải cuộn vô cớ. */
    .auth-card--solo[b-khe28dmn57] { height: auto; }

    @supports (mask-composite: intersect) {
        .auth-card[b-khe28dmn57] {
            /* Desktop: seam dọc tại x = bề rộng media + 7px nửa seam */
            mask-image:
                radial-gradient(circle at calc(var(--auth-media-w) + 7px) 0, transparent 12px, #000 13px),
                radial-gradient(circle at calc(var(--auth-media-w) + 7px) 100%, transparent 12px, #000 13px);
        }
    }
}

/* Chưa cấu hình banner slider ⇒ không có khoang ảnh, cũng không có seam. Notch
   được khoét theo TOẠ ĐỘ SEAM nên phải gỡ mask, trả card về bóng đổ thường —
   để nguyên sẽ thành 2 vết cắn lơ lửng giữa khoang form. */
.auth-card--solo[b-khe28dmn57] {
    mask-image: none;
    filter: none;
    box-shadow: var(--nm-shadow-pop);
}

/* ---- Khoang ảnh (slideshow banner) ---- */
.auth-card__media[b-khe28dmn57] {
    position: relative;
    height: 216px;
    background: var(--nm-ink);
    overflow: hidden;
    /* nhốt z-index nội bộ (overlay/caption) trong media — không cho đè lên seam/notch */
    isolation: isolate;
}

@media (min-width: 1024px) {
    .auth-card__media[b-khe28dmn57] {
        /* Banner auth là ảnh DỌC 3:4 → khoang ảnh phải đúng tỉ lệ đó thì object-fit:cover
           mới hiển thị trọn ảnh (không cắt). Card desktop luôn rộng 960px (--auth-card-w
           = max-width của .auth-wrap) nên chốt px cho khớp tuyệt đối:
           420px × 560px = 3:4, đúng bằng min-height sẵn có của card.
           Khoang form còn 960 - 420 - 14(seam) = 526px, vẫn dư cho form 380px. */
        width: var(--auth-media-w);
        height: auto;
        flex: none;
    }
}

/* ---- Skeleton khoang ảnh (đang hỏi API banner / ảnh chưa tải xong) ----
   Mục đích: giữ NGUYÊN bố cục 2 khoang ngay từ nhịp render đầu tiên. Không có nó,
   card tụt về .auth-card--solo (form nằm giữa) rồi giật sang 2 khoang khi ảnh về. */
.auth-card__media.is-loading[b-khe28dmn57] {
    /* nền sáng cho khớp tông skeleton — nền ink mặc định là bệ cho ẢNH, không phải placeholder */
    background: var(--nm-surface-2);
}

/* Lớp phủ tối đáy ảnh: lúc skeleton không có ảnh để phủ, để nguyên sẽ thành vệt
   xám bẩn đè lên các thanh giữ chỗ. */
.auth-card__media.is-loading[b-khe28dmn57]::after { opacity: 0; }

.auth-media-skel[b-khe28dmn57] {
    position: absolute;
    inset: 0;
    /* trên cả caption thật (z-index 2): banner đã về nhưng ảnh chưa tải thì caption
       nằm sẵn dưới skeleton, hiện ra cùng lúc với ảnh */
    z-index: 3;
}

/* ⚠ 2 cái bẫy khi đè style lên NmSkeleton:
   1. .nm-skel là CSS scoped của NmSkeleton ⇒ class truyền vào chỉ tới được bằng ::deep.
   2. Bundle scoped-css xếp theo đường dẫn file, Portals/… đứng TRƯỚC Ui/NmSkeleton nên
      cùng độ đặc hiệu là primitive thắng. Phải thêm .auth-card__media cho nặng hơn,
      không thì .nm-skel--rect kéo tấm giữ chỗ về 80px + bo góc. */
.auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.auth-media-skel__caption[b-khe28dmn57] {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 20px 22px;
}

@media (min-width: 1024px) {
    .auth-media-skel__caption[b-khe28dmn57] { padding: 26px 28px; }
}

/* Các thanh giữ chỗ mô phỏng đúng badge / tiêu đề 2 dòng / mô tả của caption thật,
   nhờ vậy lúc ảnh về nội dung không nhảy chỗ.
   Màu ĐẶC đậm hơn (không shimmer): tấm photo phía sau cũng là .nm-skel nên nếu để
   nguyên gradient mặc định thì thanh và nền trùng hệt nhau, nhìn như không có gì. */
.auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__bar {
    height: 12px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
    animation: none;
}

.auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__bar--badge {
    width: 96px;
    height: 17px;
    margin-bottom: 2px;
}

.auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__bar--title { width: 82%; height: 15px; }
.auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__bar--title2 { width: 58%; height: 15px; }

/* dòng mô tả chỉ hiện ở desktop — khớp .auth-slide__desc */
.auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__bar--line { display: none; }

@media (min-width: 1024px) {
    .auth-card__media .auth-media-skel[b-khe28dmn57]  .auth-media-skel__bar--line {
        display: block;
        width: 70%;
        height: 10px;
        margin-top: 4px;
    }
}

/* Lớp phủ tối đáy ảnh cho chữ đọc được — nằm trên slide, dưới caption */
.auth-card__media[b-khe28dmn57]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(18, 24, 38, 0) 32%, rgba(18, 24, 38, .5) 66%, rgba(18, 24, 38, .86) 100%);
    pointer-events: none;
}

.auth-slide[b-khe28dmn57] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}

.auth-slide.is-active[b-khe28dmn57] { opacity: 1; }

/* Nền lấp = chính ảnh, phóng to + làm mờ. Khung media đã đúng 3:4 nên ở /login
   lớp này bị ảnh che kín hoàn toàn; chỉ lộ ra ở trang form cao hơn (Register)
   và với banner tỉ lệ khác — thay cho việc cắt ảnh. inset âm để mép blur không hở.
   background-position ĐÁY: phần dư luôn nằm dưới ảnh (xem object-position bên dưới)
   nên nền mờ phải lấy màu từ ĐÁY ảnh thì dải lấp mới nối màu liền với mép ảnh —
   lấy giữa ảnh sẽ ra một vệt lệch tông ngay chỗ tiếp giáp. */
.auth-slide[b-khe28dmn57]::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: var(--slide-img);
    background-size: cover;
    background-position: center bottom;
    filter: blur(28px) saturate(1.15) brightness(.92);
}

/* contain (không cover): ảnh banner luôn hiện TRỌN, không bị cắt cạnh nào.
   object-position ĐỈNH (không center): khi form dài hơn khoang ảnh (thông báo
   nhiều dòng, trang Register) card cao lên kéo khoang ảnh cao theo, phần dư của
   contain nếu căn giữa sẽ tách làm ĐÔI — nửa trên hở ngay góc bo sáng của card
   thành "dải xám thừa". Neo đỉnh ⇒ mép trên ảnh luôn khít mép card, toàn bộ phần
   dư dồn xuống đáy, nơi đã có lớp phủ tối + caption nên đọc như bệ đỡ chữ. */
.auth-slide img[b-khe28dmn57] {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
}

.auth-slide__caption[b-khe28dmn57] {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px;
}

@media (min-width: 1024px) {
    .auth-slide__caption[b-khe28dmn57] { padding: 26px 28px; }
}

.auth-slide__badge[b-khe28dmn57] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-slide__title[b-khe28dmn57] {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #fff;
}

@media (min-width: 1024px) {
    .auth-slide__title[b-khe28dmn57] { font-size: 18px; }
}

.auth-slide__desc[b-khe28dmn57] {
    display: none;
    margin: 0 0 14px;
    max-width: 300px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .68);
}

@media (min-width: 1024px) {
    .auth-slide__desc[b-khe28dmn57] { display: block; }
}

.auth-slide__dots[b-khe28dmn57] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.auth-slide__dot[b-khe28dmn57] {
    height: 4px;
    width: 14px;
    padding: 0;
    border: 0;
    border-radius: var(--nm-r-pill);
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: width .4s ease, background .4s ease;
}

.auth-slide__dot:hover[b-khe28dmn57] { background: rgba(255, 255, 255, .5); }

.auth-slide__dot.is-active[b-khe28dmn57] {
    width: 26px;
    background: var(--nm-brand-300);
}

.auth-slide__dot:focus-visible[b-khe28dmn57] {
    outline: 2px solid var(--nm-brand-300);
    outline-offset: 2px;
}

/* ---- Seam: dải ráp vé + đường đục lỗ + 2 notch khuyết ----
   Seam là dải surface mỏng giữa 2 khoang; đường đục lỗ vẽ bằng repeating-gradient
   và dừng trước 2 notch. Notch = hình tròn màu nền trang (--auth-bg), tâm đặt đúng
   mép card; overflow:hidden của card cắt nửa ngoài → vết khuyết như lỗ bấm vé.
   Nền trang phải là MÀU PHẲNG thì notch mới khớp ở mọi kích thước màn hình. */
.auth-card__seam[b-khe28dmn57] {
    position: relative;
    z-index: 1; /* trên media để notch cắn sang phần ảnh không bị gradient/caption đè */
    flex: none;
    height: 14px;
    background: var(--nm-surface);
}

.auth-card__seam-line[b-khe28dmn57] {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    /* Dấu đục lỗ đậm hơn border-strong — trên dải surface trắng dashes cũ gần như tàng hình */
    background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--nm-ink) 26%, transparent) 0 5px, transparent 5px 11px);
}

.auth-card__seam[b-khe28dmn57]::before,
.auth-card__seam[b-khe28dmn57]::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* Lỗ đục = TRÙNG TUYỆT ĐỐI màu nền trang (--auth-bg), fill phẳng. Bản v3
       (đậm hơn nền + viền + bóng inset) bị chê "đĩa xám lệch màu nền" — vì nửa
       hở của notch nằm cạnh nền trang nên mọi sai khác đều lộ. Cảm giác "thủng"
       do vết cắn vào card trắng đảm nhận, không cần tô đậm lòng lỗ. */
    background: var(--auth-bg);
    top: 50%;
}

/* Mobile: seam ngang, notch 2 bên trái/phải */
.auth-card__seam[b-khe28dmn57]::before {
    left: 0;
    transform: translate(-50%, -50%);
}

.auth-card__seam[b-khe28dmn57]::after {
    right: 0;
    transform: translate(50%, -50%);
}

@media (min-width: 1024px) {
    /* Desktop: seam dọc giữa khoang ảnh và khoang form, notch trên/dưới */
    .auth-card__seam[b-khe28dmn57] {
        height: auto;
        width: 14px;
    }

    .auth-card__seam-line[b-khe28dmn57] {
        left: 50%;
        right: auto;
        top: 22px;
        bottom: 22px;
        width: 2px;
        height: auto;
        transform: translateX(-50%);
        background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--nm-ink) 26%, transparent) 0 5px, transparent 5px 11px);
    }

    .auth-card__seam[b-khe28dmn57]::before {
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .auth-card__seam[b-khe28dmn57]::after {
        left: 50%;
        right: auto;
        top: auto;
        bottom: 0;
        transform: translate(-50%, 50%);
    }
}

/* ---- Khoang form ---- */
.auth-card__form[b-khe28dmn57] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
}

@media (min-width: 1024px) {
    /* đáy chừa chỗ cho khối hỗ trợ định vị tuyệt đối (cao ~57px tính từ mép dưới)
       — 64px là mức tối thiểu còn an toàn. Nội dung căn giữa nên rút padding
       KHÔNG đổi bố cục lúc form ngắn, chỉ nới thêm ~24px sức chứa trước khi form
       đẩy card cao quá --auth-card-h và làm khoang ảnh lệch khỏi tỉ lệ 3:4.
       Padding ngang giữ 24px cho thoáng — không ép chữ dính vào vạch. */
    .auth-card__form[b-khe28dmn57] {
        padding: 24px 24px 64px;
        /* stretch: khu cuộn phải cao bằng khoang form thì overflow mới có tác dụng.
           min-height/min-width 0: mặc định flex item không co dưới cỡ nội dung ⇒
           form dài sẽ tràn ra ngoài thay vì sinh thanh cuộn. */
        align-items: stretch;
        min-height: 0;
    }
}

/* Khu cuộn: mobile chỉ là lớp bọc trong suốt (trang tự cuộn), desktop là khung cuộn thật. */
.auth-card__form-scroll[b-khe28dmn57] {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .auth-card__form-scroll[b-khe28dmn57] {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--nm-border-strong) transparent;
    }

    .auth-card__form-scroll[b-khe28dmn57]::-webkit-scrollbar { width: 6px; }
    .auth-card__form-scroll[b-khe28dmn57]::-webkit-scrollbar-track { background: transparent; }

    .auth-card__form-scroll[b-khe28dmn57]::-webkit-scrollbar-thumb {
        background: var(--nm-border-strong);
        border-radius: var(--nm-r-pill);
    }

    .auth-card__form-scroll[b-khe28dmn57]::-webkit-scrollbar-thumb:hover { background: var(--nm-muted); }

    /* margin auto trục dọc THAY cho align-items:center — căn giữa khi form ngắn,
       nhưng khi form cao hơn khung thì auto rút về 0 nên KHÔNG bị cắt cụt đầu form
       (bẫy kinh điển của centering + overflow trong flexbox). */
    .auth-card__form-scroll > .auth-card__form-inner[b-khe28dmn57] { margin: auto 0; }
}

.auth-card__form-inner[b-khe28dmn57] {
    width: 100%;
    max-width: 380px;
    /* nổi trên cành mai trang trí */
    position: relative;
    z-index: 1;
}

/* ---- Cành mai trang trí (motif brand, dùng chung <MaiBranch/>) ----
   Desktop-only: mobile khoang form kín chữ, không còn khoảng thở cho decor.
   scaleX(-1): cành vẽ gốc ở dưới–TRÁI nên phải lật để gốc mọc từ mép PHẢI card,
   ngọn vươn về khoảng trống dưới link "Đăng nhập"; right âm để mép card cắt nhẹ gốc.
   ⚠ .auth-mai là class của COMPONENT CON ⇒ bắt buộc ::deep, viết trần không ăn. */
.auth-card__form[b-khe28dmn57]  .auth-mai,
.auth-card__form[b-khe28dmn57]  .auth-mai-petal { display: none; }

@media (min-width: 1024px) {
    .auth-card__form[b-khe28dmn57]  .auth-mai {
        display: block;
        position: absolute;
        right: -26px;
        bottom: -10px;
        width: 268px;
        height: auto;
        transform: scaleX(-1);
        pointer-events: none;
        /* Bản vẽ chi tiết đậm nét hơn motif cũ — hạ nhẹ để không tranh chấp với form */
        opacity: .92;
    }

    .auth-card__form[b-khe28dmn57]  .auth-mai-petal {
        display: block;
        position: absolute;
        /* viewBox 24×28 — chốt cả 2 chiều theo đúng tỉ lệ, để height:auto sẽ
           phụ thuộc cách trình duyệt suy tỉ lệ từ viewBox */
        width: 10px;
        height: 11.6px;
        pointer-events: none;
        opacity: .9;
    }

    .auth-card__form[b-khe28dmn57]  .auth-mai-petal--1 { right: 210px; bottom: 118px; transform: rotate(24deg); }
    .auth-card__form[b-khe28dmn57]  .auth-mai-petal--2 { right: 96px; bottom: 170px; transform: rotate(-40deg) scale(.8); }

    @media (prefers-reduced-motion: no-preference) {
        .auth-card__form[b-khe28dmn57]  .auth-mai-petal { animation: auth-petal-sway-b-khe28dmn57 5.5s ease-in-out infinite; }
        .auth-card__form[b-khe28dmn57]  .auth-mai-petal--2 { animation-duration: 7s; animation-delay: 1.2s; }
    }
}

@keyframes auth-petal-sway-b-khe28dmn57 {
    0%, 100% { translate: 0 0; }
    50% { translate: -7px 9px; }
}

/* ---- Hỗ trợ đăng nhập: kênh liên hệ thật ở đáy khoang form (desktop) ----
   Mobile ẩn vì footer trang đã có mailto hỗ trợ. */
.auth-card__support[b-khe28dmn57] { display: none; }

@media (min-width: 1024px) {
    .auth-card__support[b-khe28dmn57] {
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }
}

.auth-card__support span[b-khe28dmn57] {
    font-size: 11.5px;
    color: var(--nm-muted);
}

.auth-card__support a[b-khe28dmn57] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-card__support a:hover[b-khe28dmn57] { color: var(--nm-brand-600); }
.auth-card__support a .bi[b-khe28dmn57] { font-size: 12px; color: var(--nm-muted); }

/* ---- Footer ---- */
.auth-foot[b-khe28dmn57] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding: 0 2px;
}

@media (min-width: 640px) {
    .auth-foot[b-khe28dmn57] { flex-direction: row; }
}

.auth-foot p[b-khe28dmn57] {
    margin: 0;
    font-size: 11px;
    color: var(--nm-muted);
}

.auth-foot__links[b-khe28dmn57] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-foot__links a[b-khe28dmn57] {
    font-size: 11px;
    color: var(--nm-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.auth-foot__links a:hover[b-khe28dmn57] { color: var(--nm-brand-600); }

/* ---- Chuỗi vào trang (1 nhịp duy nhất, tôn trọng reduced-motion) ---- */
@media (prefers-reduced-motion: no-preference) {
    .auth-topbar[b-khe28dmn57] { animation: auth-fade-b-khe28dmn57 .45s ease-out both; }
    .auth-card[b-khe28dmn57] { animation: auth-card-in-b-khe28dmn57 .55s cubic-bezier(.16, 1, .3, 1) both; }
    .auth-foot[b-khe28dmn57] { animation: auth-fade-b-khe28dmn57 .6s ease-out .15s both; }
}

@keyframes auth-card-in-b-khe28dmn57 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes auth-fade-b-khe28dmn57 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /src/Portals/Ca/CaLayout.razor.rz.scp.css */
/* ============================================================
   CA-only sidebar refinements — Minimal Premium 2026
   Scoped overrides so Manager/Partner layouts stay untouched.
   Active item = light brand highlight (no heavy orange gradient).
   ============================================================ */

/* Brand mark — cam dồn vào ô logo nhỏ, phần còn lại của brand card để lặng
   (cam là màu hành động; mảng cam lớn cũ lấn át banner/CTA của trang) */
[b-t5r3fmozp3] .nm-brand-mark {
    background: linear-gradient(145deg, #ea580c 0%, var(--ca-brand, #ff6b00) 90%);
    box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--ca-brand, #ff6b00) 55%, transparent);
    transition: box-shadow .2s;
}
[b-t5r3fmozp3] a:hover .nm-brand-mark {
    box-shadow: 0 5px 14px -3px color-mix(in srgb, var(--ca-brand, #ff6b00) 65%, transparent);
}

    [b-t5r3fmozp3] .nm-brand-modern::after {
        opacity: .8;
    }

/* Active nav pill — soft, light highlight (Linear/Notion feel) */
[b-t5r3fmozp3] .nm-nav-pill-active {
    background: #fff2e8 !important;
    color: #c2540a !important;
    border-radius: 12px;
    box-shadow: none !important;
    font-weight: 600;
}

    [b-t5r3fmozp3] .nm-nav-pill-active svg {
        color: #ff6b00 !important;
    }

    [b-t5r3fmozp3] .nm-nav-pill-active .nm-icon-bubble {
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    }

/* Idle icon bubble — nét icon đậm hơn (hết "nhạt nhòa"), nền neutral mát */
[b-t5r3fmozp3] .nm-icon-bubble {
    background: #f4f5f8;
    border-radius: 10px;
    color: var(--ca-ink-2, #475569);
}

/* Tone theo NHÓM nghiệp vụ — 4 tone đúng từ vựng CA, không thêm hue mới.
   Cam = giao dịch/dịch vụ · teal = hành trình · emerald = tiền & phê duyệt · slate = quản trị. */
[b-t5r3fmozp3] .nm-icon-bubble.tone-brand {
    background: var(--ca-brand-soft, #fff3eb);
    color: var(--ca-brand-strong, #e85d00);
}
[b-t5r3fmozp3] .nm-icon-bubble.tone-teal {
    background: var(--ca-accent-soft, #f0fdfa);
    color: var(--ca-accent, #0d9488);
}
[b-t5r3fmozp3] .nm-icon-bubble.tone-ok {
    background: var(--ca-ok-soft, #ecfdf5);
    color: var(--ca-ok, #059669);
}
/* blue = tổ chức & quản trị — mượn accent theme-manager trong tokens.css */
[b-t5r3fmozp3] .nm-icon-bubble.tone-blue {
    background: #eff6ff;
    color: #2563eb;
}
/* Các tone bổ sung theo nghĩa từng mục (cặp soft-50/đậm-600, cùng độ nhạt với tone gốc) */
[b-t5r3fmozp3] .nm-icon-bubble.tone-sky {
    background: #f0f9ff;
    color: #0284c7;
}
[b-t5r3fmozp3] .nm-icon-bubble.tone-amber {
    background: #fffbeb;
    color: #d97706;
}
[b-t5r3fmozp3] .nm-icon-bubble.tone-violet {
    background: #f5f3ff;
    color: #7c3aed;
}
[b-t5r3fmozp3] .nm-icon-bubble.tone-indigo {
    background: #eef2ff;
    color: #4f46e5;
}
/* cyan & rose — khớp quy ước badge dịch vụ toàn app (eSIM=cyan, Visa=rose) */
[b-t5r3fmozp3] .nm-icon-bubble.tone-cyan {
    background: #ecfeff;
    color: #0891b2;
}
[b-t5r3fmozp3] .nm-icon-bubble.tone-rose {
    background: #fff1f2;
    color: #e11d48;
}

/* Active pill thắng mọi tone: bubble trắng nổi trên nền cam nhạt (đặt SAU các rule tone) */
[b-t5r3fmozp3] .nm-nav-pill-active .nm-icon-bubble {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

/* Chữ các mục menu ở chế độ PC (≥1024px = breakpoint `lg` mà sidebar dùng để chuyển
   từ drawer sang cột cố định). Mọi nhãn mục — link lá (NavItem), module có nhóm con,
   mục con — đều là <span class="truncate"> nên một luật là đủ; tiêu đề nhóm viết hoa
   11px KHÔNG có .truncate nên không bị ảnh hưởng.
   Đè lên tiện ích text-[14px] của Tailwind: Tailwind nằm trong @layer, CSS isolation
   thì không, mà style ngoài layer luôn thắng style trong layer. */
@media (min-width: 1024px) {
    [b-t5r3fmozp3] nav span.truncate {
        font-size: 15px;
        font-weight: 500;
    }

    /* Mục đang mở vẫn đậm hơn phần còn lại — pill active đặt font-weight 600 ở thẻ <a>,
       luật trên nằm ở <span> con nên phải nhắc lại, không thì mục hiện tại bị nhạt đi. */
    [b-t5r3fmozp3] nav .nm-nav-pill-active span.truncate {
        font-weight: 600;
    }
}
/* /src/Portals/Manager/ManagerLayout.razor.rz.scp.css */
/* ============================================================
   Manager sidebar — brand mark
   ============================================================
   Ô logo cam nhỏ ở đầu sidebar, ĐỒNG BỘ với CaLayout: trước đây Manager dùng thẻ
   `.nm-brand-modern` (mảng gradient cam to trùm cả khối "Ngọc Mai / Manager Portal"),
   nay chỉ còn ô logo là cam, chữ đọc trên nền sidebar trắng.

   ⚠ PHẢI khai lại ở đây, KHÔNG dùng chung được với CaLayout.razor.css: Blazor CSS
   isolation gắn thuộc tính scope riêng cho từng component, rule của CaLayout không
   với sang được ManagerLayout. Sửa màu thì sửa CẢ HAI file.

   `::deep` vì rule nhắm vào phần tử con nằm trong khối bọc (giống hệt CaLayout).
   ============================================================ */

[b-9kse7mqftj] .nm-brand-mark {
    background: linear-gradient(145deg, #ea580c 0%, #ff6b00 90%);
    box-shadow: 0 3px 10px -3px color-mix(in srgb, #ff6b00 55%, transparent);
    transition: box-shadow .2s;
}

[b-9kse7mqftj] a:hover .nm-brand-mark {
    box-shadow: 0 5px 14px -3px color-mix(in srgb, #ff6b00 65%, transparent);
}
/* /src/Ui/DataGrid.razor.rz.scp.css */
/* DataGrid — token-only. */
.nm-grid-wrap[b-bkbwrhf3x5] {
    overflow-x: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.nm-grid[b-bkbwrhf3x5] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nm-font);
    font-size: 13.5px;
}

.nm-grid__th[b-bkbwrhf3x5] {
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--nm-muted);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border);
    white-space: nowrap;
    text-align: left;
}
.nm-grid__th--right[b-bkbwrhf3x5] { text-align: right; }
.nm-grid__th--center[b-bkbwrhf3x5] { text-align: center; }

/* ── Tiêu đề cột sắp xếp được ──
   Nút trong suốt kế thừa typography của <th> để không lệch khỏi các cột thường. */
.nm-grid__sort[b-bkbwrhf3x5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}
.nm-grid__sort:hover[b-bkbwrhf3x5] { color: var(--nm-ink); }
.nm-grid__sort:focus-visible[b-bkbwrhf3x5] {
    outline: 2px solid var(--nm-brand-500);
    outline-offset: 2px;
    border-radius: var(--nm-r-sm, 4px);
}

/* mũi tên: mờ khi chưa sắp xếp theo cột này, đậm màu brand khi đang sắp xếp */
.nm-grid__sort-ico[b-bkbwrhf3x5] { font-size: 12px; opacity: .35; }
.nm-grid__sort:hover .nm-grid__sort-ico[b-bkbwrhf3x5] { opacity: .7; }
.nm-grid__th--sorted[b-bkbwrhf3x5] { color: var(--nm-ink); }
.nm-grid__th--sorted .nm-grid__sort-ico[b-bkbwrhf3x5] { opacity: 1; color: var(--nm-brand-500); }

.nm-grid__td[b-bkbwrhf3x5] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--nm-border);
    color: var(--nm-ink);
    vertical-align: middle;
    text-align: left;
}
.nm-grid__td--right[b-bkbwrhf3x5] { text-align: right; }
.nm-grid__td--center[b-bkbwrhf3x5] { text-align: center; }

.nm-grid__row:hover .nm-grid__td[b-bkbwrhf3x5] { background: var(--nm-surface-2); }
.nm-grid__row:last-child .nm-grid__td[b-bkbwrhf3x5] { border-bottom: none; }

/* Dòng mở được bằng nhấn đúp (RowDoubleClick + CanOpenRow).
   CỐ Ý KHÔNG đổi con trỏ thành pointer: pointer hứa hẹn "bấm một lần là đi", ở đây phải nhấn đúp —
   đổi con trỏ sẽ khiến người dùng bấm một lần rồi tưởng bảng bị treo. Thay vào đó dùng một vệt sáng
   bên trái khi rê chuột, đủ để phân biệt dòng mở được với dòng chỉ đọc; chú thích nằm ở title của <tr>. */
.nm-grid__row--openable:hover .nm-grid__td:first-child[b-bkbwrhf3x5] {
    box-shadow: inset 3px 0 0 0 var(--nm-brand-500);
}

.nm-grid__idx[b-bkbwrhf3x5] { color: var(--nm-muted); font-variant-numeric: tabular-nums; }

/* ── Cột ghim trái (StickyLeft) — nền đục để không lộ nội dung cuộn bên dưới ──
   left được set inline theo offset dồn từ Width các cột ghim. */
.nm-grid__th--sticky[b-bkbwrhf3x5],
.nm-grid__td--sticky[b-bkbwrhf3x5] {
    position: sticky;
    z-index: 2;
}
.nm-grid__td--sticky[b-bkbwrhf3x5] { background: var(--nm-surface); }
.nm-grid__th--sticky[b-bkbwrhf3x5] { background: var(--nm-surface-2); z-index: 3; }

/* hover: giữ nguyên hiệu ứng dòng cho cả cột ghim (nền đục nên phải khai lại) */
.nm-grid__row:hover .nm-grid__td--sticky[b-bkbwrhf3x5] { background: var(--nm-surface-2); }

/* mép phải khối ghim: đường kẻ + bóng nhẹ báo hiệu còn nội dung phía sau */
.nm-grid__th--sticky-last[b-bkbwrhf3x5],
.nm-grid__td--sticky-last[b-bkbwrhf3x5] {
    border-right: 1px solid var(--nm-border);
    box-shadow: 6px 0 8px -6px rgb(0 0 0 / .16);
}

/* mobile: 2 cột ghim đã chiếm gần hết màn — bỏ ghim, cuộn bình thường */
@media (max-width: 640px) {
    .nm-grid__th--sticky[b-bkbwrhf3x5],
    .nm-grid__td--sticky[b-bkbwrhf3x5] {
        position: static;
    }
    .nm-grid__th--sticky-last[b-bkbwrhf3x5],
    .nm-grid__td--sticky-last[b-bkbwrhf3x5] {
        border-right: none;
        box-shadow: none;
    }
}

.nm-grid__state[b-bkbwrhf3x5] { padding: 28px 14px; text-align: center; color: var(--nm-muted); }

.nm-grid__spinner[b-bkbwrhf3x5] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--nm-border-strong);
    border-right-color: var(--nm-brand-500);
    border-radius: var(--nm-r-pill);
    display: inline-block;
    animation: nm-grid-spin-b-bkbwrhf3x5 .6s linear infinite;
}

@keyframes nm-grid-spin-b-bkbwrhf3x5 { to { transform: rotate(360deg); } }
/* /src/Ui/NmAccordion.razor.rz.scp.css */
/* NmAccordion — token-only.
   Phần thân item do NmAccordionItem (component con) render → phải dùng ::deep để style. */
.nm-accordion[b-kyy34jyl1f] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    background: var(--nm-surface);
}

.nm-accordion[b-kyy34jyl1f]  .nm-acc__item + .nm-acc__item { border-top: 1px solid var(--nm-border); }

.nm-accordion[b-kyy34jyl1f]  .nm-acc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    font-family: var(--nm-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    text-align: left;
    cursor: pointer;
    transition: background .1s ease;
}
.nm-accordion[b-kyy34jyl1f]  .nm-acc__head:hover:not(:disabled) { background: var(--nm-surface-2); }
.nm-accordion[b-kyy34jyl1f]  .nm-acc__head:disabled { opacity: .55; cursor: not-allowed; }

.nm-accordion[b-kyy34jyl1f]  .nm-acc__lead { color: var(--nm-brand-500); font-size: 16px; }
.nm-accordion[b-kyy34jyl1f]  .nm-acc__title { flex: 1; }

.nm-accordion[b-kyy34jyl1f]  .nm-acc__chev {
    color: var(--nm-muted);
    font-size: 14px;
    transition: transform .18s ease;
}
.nm-accordion[b-kyy34jyl1f]  .nm-acc__item.is-open .nm-acc__chev { transform: rotate(180deg); }

.nm-accordion[b-kyy34jyl1f]  .nm-acc__body {
    padding: 2px 16px 16px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
    line-height: 1.55;
}
/* /src/Ui/NmAlert.razor.rz.scp.css */
/* NmAlert — token-only. Tone dùng status vocabulary (nền soft + accent màu trạng thái). */
.nm-alert[b-mlr3uuusby] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--nm-r-input);
    border: 1px solid transparent;
    font-family: var(--nm-font);
    font-size: 13.5px;
    line-height: 1.5;
}

.nm-alert__icon[b-mlr3uuusby] { font-size: 16px; line-height: 1.4; flex: none; }
.nm-alert__content[b-mlr3uuusby] { flex: 1; min-width: 0; }
.nm-alert__title[b-mlr3uuusby] { font-weight: 700; margin-bottom: 2px; color: var(--nm-ink); }
.nm-alert__body[b-mlr3uuusby] { color: var(--nm-ink-2); }

.nm-alert__close[b-mlr3uuusby] {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--nm-muted);
    cursor: pointer;
    padding: 0 2px;
    flex: none;
}
.nm-alert__close:hover[b-mlr3uuusby] { color: var(--nm-ink); }

/* Tones */
.nm-alert--info[b-mlr3uuusby] { background: var(--nm-info-soft); border-color: var(--nm-info); }
.nm-alert--info .nm-alert__icon[b-mlr3uuusby] { color: var(--nm-info); }

.nm-alert--ok[b-mlr3uuusby] { background: var(--nm-ok-soft); border-color: var(--nm-ok); }
.nm-alert--ok .nm-alert__icon[b-mlr3uuusby] { color: var(--nm-ok); }

.nm-alert--warn[b-mlr3uuusby] { background: var(--nm-warn-soft); border-color: var(--nm-warn); }
.nm-alert--warn .nm-alert__icon[b-mlr3uuusby] { color: var(--nm-warn); }

.nm-alert--bad[b-mlr3uuusby] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.nm-alert--bad .nm-alert__icon[b-mlr3uuusby] { color: var(--nm-bad); }
/* /src/Ui/NmAvatar.razor.rz.scp.css */
/* NmAvatar — token-only. */
.nm-avatar[b-g3oyprko6c] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: var(--nm-font);
    font-weight: 700;
    overflow: visible;
    user-select: none;
}

.nm-avatar__img[b-g3oyprko6c] {
    width: 100%;
    height: 100%;
    border-radius: var(--nm-r-pill);
    object-fit: cover;
}

.nm-avatar__initials[b-g3oyprko6c] {
    line-height: 1;
}

/* Sizes */
.nm-avatar--sm[b-g3oyprko6c] { width: 28px; height: 28px; font-size: 11px; }
.nm-avatar--md[b-g3oyprko6c] { width: 38px; height: 38px; font-size: 14px; }
.nm-avatar--lg[b-g3oyprko6c] { width: 52px; height: 52px; font-size: 18px; }

/* Status dot */
.nm-avatar__status[b-g3oyprko6c] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28%;
    height: 28%;
    min-width: 8px;
    min-height: 8px;
    border-radius: var(--nm-r-pill);
    border: 2px solid var(--nm-surface);
    background: var(--nm-pending);
}
.nm-avatar__status--ok[b-g3oyprko6c] { background: var(--nm-ok); }
.nm-avatar__status--warn[b-g3oyprko6c] { background: var(--nm-warn); }
.nm-avatar__status--bad[b-g3oyprko6c] { background: var(--nm-bad); }
.nm-avatar__status--pending[b-g3oyprko6c] { background: var(--nm-pending); }
/* /src/Ui/NmBadge.razor.rz.scp.css */
/* NmBadge — token-only. Là nơi duy nhất khai báo CSS badge (status vocabulary). */
.nm-badge[b-e3ahlay6tj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.nm-badge__dot[b-e3ahlay6tj] {
    width: 6px;
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: currentColor;
    flex: none;
}

.nm-badge--ok[b-e3ahlay6tj]      { background: var(--nm-ok-soft);      color: var(--nm-ok); }
.nm-badge--warn[b-e3ahlay6tj]    { background: var(--nm-warn-soft);    color: var(--nm-warn); }
.nm-badge--bad[b-e3ahlay6tj]     { background: var(--nm-bad-soft);     color: var(--nm-bad); }
.nm-badge--info[b-e3ahlay6tj]    { background: var(--nm-info-soft);    color: var(--nm-info); }
.nm-badge--pending[b-e3ahlay6tj] { background: var(--nm-pending-soft); color: var(--nm-pending); }
.nm-badge--violet[b-e3ahlay6tj]  { background: var(--nm-violet-soft);  color: var(--nm-violet); }
.nm-badge--neutral[b-e3ahlay6tj] { background: var(--nm-surface-2);    color: var(--nm-ink-2); }
/* /src/Ui/NmBreadcrumb.razor.rz.scp.css */
/* NmBreadcrumb — token-only. */
.nm-crumbs[b-29iw8dhg93] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--nm-font);
    font-size: 12.5px;
}

.nm-crumbs__item[b-29iw8dhg93] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nm-crumbs__link[b-29iw8dhg93] {
    color: var(--nm-ink-2);
    text-decoration: none;
    transition: color .12s ease;
}
.nm-crumbs__link:hover[b-29iw8dhg93] { color: var(--nm-brand-600); }

.nm-crumbs__sep[b-29iw8dhg93] { color: var(--nm-muted); font-size: 10px; }

.nm-crumbs__current[b-29iw8dhg93] {
    color: var(--nm-ink);
    font-weight: 600;
}
/* /src/Ui/NmButton.razor.rz.scp.css */
/* NmButton — token-only (chỉ var(--nm-*) + giá trị shape). KHÔNG hard-code màu. */
.nm-btn[b-7hvsha0u2w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--nm-font);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.nm-btn:disabled[b-7hvsha0u2w],
.nm-btn.is-loading[b-7hvsha0u2w] {
    opacity: .6;
    cursor: not-allowed;
}

/* Sizes */
.nm-btn--sm[b-7hvsha0u2w] { padding: 4px 10px; font-size: 12.5px; }
.nm-btn--md[b-7hvsha0u2w] { padding: 8px 14px; font-size: 14px; }
.nm-btn--lg[b-7hvsha0u2w] { padding: 11px 18px; font-size: 15px; }

/* Variants */
.nm-btn--primary[b-7hvsha0u2w] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.nm-btn--primary:hover:not(:disabled)[b-7hvsha0u2w] { background: var(--nm-brand-600); }

.nm-btn--secondary[b-7hvsha0u2w] { background: var(--nm-surface); color: var(--nm-ink); border-color: var(--nm-border-strong); }
.nm-btn--secondary:hover:not(:disabled)[b-7hvsha0u2w] { background: var(--nm-surface-2); }

.nm-btn--ghost[b-7hvsha0u2w] { background: transparent; color: var(--nm-ink-2); }
.nm-btn--ghost:hover:not(:disabled)[b-7hvsha0u2w] { background: var(--nm-surface-2); }

.nm-btn--danger[b-7hvsha0u2w] { background: var(--nm-bad); color: var(--nm-on-brand); }
.nm-btn--danger:hover:not(:disabled)[b-7hvsha0u2w] { background: var(--nm-bad); filter: brightness(.95); }

/* Spinner khi Loading */
.nm-btn__spinner[b-7hvsha0u2w] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--nm-r-pill);
    display: inline-block;
    animation: nm-btn-spin-b-7hvsha0u2w .6s linear infinite;
}

@keyframes nm-btn-spin-b-7hvsha0u2w { to { transform: rotate(360deg); } }
/* /src/Ui/NmButtonGroup.razor.rz.scp.css */
/* NmButtonGroup — token-only segmented control. */
.nm-bgroup[b-bz2gv3taut] {
    display: inline-flex;
    padding: 3px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    gap: 2px;
}
.nm-bgroup.is-block[b-bz2gv3taut] { display: flex; width: 100%; }

.nm-bgroup__seg[b-bz2gv3taut] {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: calc(var(--nm-r-input) - 2px);
    font-family: var(--nm-font);
    font-weight: 600;
    color: var(--nm-ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}

.nm-bgroup__seg:hover:not(:disabled):not(.is-active)[b-bz2gv3taut] { color: var(--nm-ink); }
.nm-bgroup__seg:disabled[b-bz2gv3taut] { opacity: .5; cursor: not-allowed; }

.nm-bgroup__seg.is-active[b-bz2gv3taut] {
    background: var(--nm-surface);
    color: var(--nm-brand-600);
    box-shadow: var(--nm-shadow-sm);
}

/* Sizes */
.nm-bgroup--sm .nm-bgroup__seg[b-bz2gv3taut] { padding: 4px 10px; font-size: 12.5px; }
.nm-bgroup--md .nm-bgroup__seg[b-bz2gv3taut] { padding: 6px 14px; font-size: 13.5px; }
.nm-bgroup--lg .nm-bgroup__seg[b-bz2gv3taut] { padding: 9px 18px; font-size: 14px; }
/* /src/Ui/NmCard.razor.rz.scp.css */
/* NmCard — token-only. */
.nm-card[b-xl3xrucmsb] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

.nm-card.is-elevated[b-xl3xrucmsb] { box-shadow: var(--nm-shadow); }

.nm-card__head[b-xl3xrucmsb] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
    font-weight: 600;
    color: var(--nm-ink);
}

.nm-card__body[b-xl3xrucmsb] { color: var(--nm-ink-2); }
.nm-card.is-padded .nm-card__body[b-xl3xrucmsb] { padding: 18px; }

.nm-card__foot[b-xl3xrucmsb] {
    padding: 14px 18px;
    border-top: 1px solid var(--nm-border);
}
/* /src/Ui/NmCheckbox.razor.rz.scp.css */
/* NmCheckbox — token-only. Input gốc ẩn, vẽ ô tick tuỳ biến. */
.nm-check[b-sdk7fma0e5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    user-select: none;
}
.nm-check.is-disabled[b-sdk7fma0e5] { cursor: not-allowed; opacity: .55; }

.nm-check__box[b-sdk7fma0e5] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-check__mark[b-sdk7fma0e5] {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--nm-border-strong);
    border-radius: 5px;
    background: var(--nm-surface);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.nm-check__mark[b-sdk7fma0e5]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 9px;
    border: solid var(--nm-on-brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .15s ease;
}

.nm-check__box:checked + .nm-check__mark[b-sdk7fma0e5] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
}
.nm-check__box:checked + .nm-check__mark[b-sdk7fma0e5]::after { transform: rotate(45deg) scale(1); }

.nm-check__box:focus-visible + .nm-check__mark[b-sdk7fma0e5] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-check__label[b-sdk7fma0e5] { line-height: 1.3; }
/* /src/Ui/NmChip.razor.rz.scp.css */
/* NmChip — token-only filter chip. */
.nm-chip[b-41jrdptsch] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--nm-font);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.nm-chip:hover[b-41jrdptsch] { border-color: var(--nm-border-strong); }
.nm-chip:disabled[b-41jrdptsch] { opacity: .55; cursor: not-allowed; }

.nm-chip--active[b-41jrdptsch] {
    background: var(--nm-brand-50);
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
}

.nm-chip__dot[b-41jrdptsch] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); display: inline-block; }
.nm-chip__dot--good[b-41jrdptsch] { background: var(--nm-ok); }
.nm-chip__dot--bad[b-41jrdptsch] { background: var(--nm-bad); }
.nm-chip__dot--accent[b-41jrdptsch] { background: var(--nm-brand-500); }
.nm-chip__dot--info[b-41jrdptsch] { background: var(--nm-info); }
.nm-chip__dot--warn[b-41jrdptsch] { background: var(--nm-warn); }
/* pending/violet: bổ sung 2026-07-29 — thiếu 2 lớp này thì Dot="pending" ra chấm VÔ HÌNH
   (cùng bẫy đã vá ở NmKpi). Giữ đủ bộ tone của BadgeTone để chip dùng chung vocabulary. */
.nm-chip__dot--pending[b-41jrdptsch] { background: var(--nm-pending); }
.nm-chip__dot--violet[b-41jrdptsch] { background: var(--nm-violet); }
/* /src/Ui/NmCombobox.razor.rz.scp.css */
/* NmCombobox — searchable select, token-only.
   Backdrop trong suốt bắt click-outside (không JS). Diện mạo ô đồng bộ với NmInput/NmSelect. */
.nm-combobox[b-i4p1x55k81] {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-combobox__control[b-i4p1x55k81] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-combobox:not(.is-disabled):hover .nm-combobox__control[b-i4p1x55k81] { border-color: var(--nm-ink-2); }

.nm-combobox.is-open .nm-combobox__control[b-i4p1x55k81],
.nm-combobox .nm-combobox__control:focus-within[b-i4p1x55k81] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-combobox.is-invalid .nm-combobox__control[b-i4p1x55k81] { border-color: var(--nm-bad); }
.nm-combobox.is-invalid.is-open .nm-combobox__control[b-i4p1x55k81],
.nm-combobox.is-invalid .nm-combobox__control:focus-within[b-i4p1x55k81] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-combobox.is-disabled .nm-combobox__control[b-i4p1x55k81] {
    background: var(--nm-surface-2);
    cursor: not-allowed;
}

.nm-combobox__icon[b-i4p1x55k81] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    font-size: 14px;
    pointer-events: none;
}

.nm-combobox__input[b-i4p1x55k81] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nm-ink);
    font-family: inherit;
}
.nm-combobox__input[b-i4p1x55k81]::placeholder { color: var(--nm-muted); }
.nm-combobox__input:disabled[b-i4p1x55k81] { cursor: not-allowed; color: var(--nm-muted); }

/* Sizes — chừa chỗ icon search trái + caret/clear phải */
.nm-combobox--sm .nm-combobox__input[b-i4p1x55k81] { padding: 5px 6px 5px 30px; font-size: 12.5px; }
.nm-combobox--md .nm-combobox__input[b-i4p1x55k81] { padding: 8px 6px 8px 34px; font-size: 14px; }
.nm-combobox--lg .nm-combobox__input[b-i4p1x55k81] { padding: 11px 8px 11px 38px; font-size: 15px; }

.nm-combobox__clear[b-i4p1x55k81] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--nm-muted);
    cursor: pointer;
    padding: 4px;
    margin-right: 2px;
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    transition: background .1s ease, color .1s ease;
}
.nm-combobox__clear:hover[b-i4p1x55k81] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-combobox__caret[b-i4p1x55k81] {
    flex: none;
    padding-right: 12px;
    color: var(--nm-muted);
    font-size: 12px;
    pointer-events: none;
    transition: transform .15s ease;
}
.nm-combobox.is-open .nm-combobox__caret[b-i4p1x55k81] { transform: rotate(180deg); }

/* Backdrop trong suốt + panel kết quả */
.nm-combobox__backdrop[b-i4p1x55k81] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-combobox__panel[b-i4p1x55k81] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1101;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    box-shadow: var(--nm-shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nm-combobox__option[b-i4p1x55k81] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--nm-r-input);
    font-family: var(--nm-font);
    font-size: 13.5px;
    color: var(--nm-ink);
    text-align: left;
    cursor: pointer;
    transition: background .1s ease;
}
.nm-combobox__option-label[b-i4p1x55k81] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-combobox__option.is-active:not(:disabled)[b-i4p1x55k81] { background: var(--nm-surface-2); }
.nm-combobox__option.is-selected[b-i4p1x55k81] { color: var(--nm-brand-700); font-weight: 600; }
.nm-combobox__option:disabled[b-i4p1x55k81] { opacity: .5; cursor: not-allowed; }
.nm-combobox__check[b-i4p1x55k81] { flex: none; color: var(--nm-brand-500); font-size: 14px; }

.nm-combobox__empty[b-i4p1x55k81] {
    padding: 14px 10px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
}
/* /src/Ui/NmCommandPalette.razor.rz.scp.css */
/* NmCommandPalette — token-only overlay kiểu Ctrl+K. Nổi trên cùng (z trên Modal/Drawer). */
.nm-cmdk__backdrop[b-rvdzdseub6] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(16, 24, 40, .45);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}

.nm-cmdk[b-rvdzdseub6] {
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-pop);
    overflow: hidden;
    font-family: var(--nm-font);
}

/* Ô tìm kiếm */
.nm-cmdk__search[b-rvdzdseub6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.nm-cmdk__search-ico[b-rvdzdseub6] { color: var(--nm-muted); font-size: 16px; flex: none; }
.nm-cmdk__input[b-rvdzdseub6] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nm-ink);
    font-family: inherit;
    font-size: 15px;
}
.nm-cmdk__input[b-rvdzdseub6]::placeholder { color: var(--nm-muted); }

.nm-cmdk__esc[b-rvdzdseub6],
.nm-cmdk__item-kbd[b-rvdzdseub6] {
    flex: none;
    font-family: var(--nm-font);
    font-size: 11px;
    font-weight: 600;
    color: var(--nm-ink-2);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: 6px;
    padding: 2px 6px;
    line-height: 1.4;
}

/* Danh sách */
.nm-cmdk__list[b-rvdzdseub6] {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.nm-cmdk__group[b-rvdzdseub6] {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.nm-cmdk__item[b-rvdzdseub6] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: var(--nm-r-input);
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    text-align: left;
    cursor: pointer;
    transition: background .1s ease;
}
.nm-cmdk__item.is-active[b-rvdzdseub6] { background: var(--nm-surface-2); }
.nm-cmdk__item.is-active .nm-cmdk__item-ico[b-rvdzdseub6] { color: var(--nm-brand-500); }

.nm-cmdk__item-ico[b-rvdzdseub6] { flex: none; font-size: 16px; color: var(--nm-ink-2); width: 18px; text-align: center; }
.nm-cmdk__item-label[b-rvdzdseub6] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-cmdk__item-go[b-rvdzdseub6] { flex: none; color: var(--nm-muted); font-size: 14px; }

.nm-cmdk__empty[b-rvdzdseub6] {
    padding: 28px 12px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 13.5px;
}
/* /src/Ui/NmDateInput.razor.rz.scp.css */
/* NmDateInput — token-only, diện mạo đồng bộ với NmInput/NmSelect (native <input type="date">). */
.nm-dateinput-wrap[b-p1sd1itpde] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-dateinput[b-p1sd1itpde] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--nm-font);
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: none;
    accent-color: var(--nm-brand-500);
    color-scheme: light;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-dateinput:hover:not(:disabled)[b-p1sd1itpde] { border-color: var(--nm-ink-2); }

.nm-dateinput:focus[b-p1sd1itpde] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-dateinput:disabled[b-p1sd1itpde] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-dateinput.is-invalid[b-p1sd1itpde] { border-color: var(--nm-bad); }
.nm-dateinput.is-invalid:focus[b-p1sd1itpde] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

/* Sizes */
.nm-dateinput--sm[b-p1sd1itpde] { padding: 5px 10px; font-size: 12.5px; }
.nm-dateinput--md[b-p1sd1itpde] { padding: 8px 12px; font-size: 14px; }
.nm-dateinput--lg[b-p1sd1itpde] { padding: 11px 14px; font-size: 15px; }

/* Nút mở lịch của trình duyệt */
.nm-dateinput[b-p1sd1itpde]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.nm-dateinput[b-p1sd1itpde]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* /src/Ui/NmDateRange.razor.rz.scp.css */
/* NmDateRange — token-only. Bố cục 2 ô ngày + dải nút preset. */
.nm-daterange[b-7xjgmpa4bc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nm-daterange__fields[b-7xjgmpa4bc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nm-daterange__sep[b-7xjgmpa4bc] {
    flex: none;
    color: var(--nm-muted);
    font-size: 14px;
}

.nm-daterange__presets[b-7xjgmpa4bc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nm-daterange__preset[b-7xjgmpa4bc] {
    border: 1px solid var(--nm-border-strong);
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    border-radius: var(--nm-r-pill);
    padding: 4px 12px;
    font-family: var(--nm-font);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.nm-daterange__preset:hover[b-7xjgmpa4bc] {
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
    background: var(--nm-brand-50);
}
/* /src/Ui/NmDescriptionList.razor.rz.scp.css */
/* NmDescriptionList — token-only.
   Các .nm-dl__* do NmDescriptionItem (component con) render → dùng ::deep để style. */
.nm-dl[b-78rfjlls6e] {
    margin: 0;
    display: grid;
    gap: 0;
    font-family: var(--nm-font);
}

.nm-dl[b-78rfjlls6e]  .nm-dl__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--nm-border);
    min-width: 0;
}

.nm-dl[b-78rfjlls6e]  .nm-dl__term {
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    margin: 0 0 2px;
}

.nm-dl[b-78rfjlls6e]  .nm-dl__desc {
    margin: 0;
    font-size: 14px;
    color: var(--nm-ink);
    word-break: break-word;
}

/* Inline: nhãn cùng dòng giá trị */
.nm-dl.is-inline[b-78rfjlls6e]  .nm-dl__item {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: 12px;
}
.nm-dl.is-inline[b-78rfjlls6e]  .nm-dl__term { margin: 0; }
/* /src/Ui/NmDivider.razor.rz.scp.css */
/* NmDivider — token-only. */
.nm-divider--h[b-lwavt0w9kb] {
    border: none;
    border-top: 1px solid var(--nm-border);
    margin: 16px 0;
    width: 100%;
}

.nm-divider--v[b-lwavt0w9kb] {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1em;
    background: var(--nm-border);
    margin: 0 4px;
}

.nm-divider--labeled[b-lwavt0w9kb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.nm-divider__line[b-lwavt0w9kb] {
    flex: 1;
    height: 1px;
    background: var(--nm-border);
}

.nm-divider__text[b-lwavt0w9kb] {
    font-family: var(--nm-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
}
/* /src/Ui/NmDrawer.razor.rz.scp.css */
/* NmDrawer — token-only. */
.nm-drawer-overlay[b-yoxjuf3zrb] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    background: rgba(16, 24, 40, .45);
}

.nm-drawer-panel[b-yoxjuf3zrb] {
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow-pop);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

.nm-drawer-panel--right[b-yoxjuf3zrb] {
    margin-left: auto;
    animation: nm-drawer-in-right-b-yoxjuf3zrb .2s ease;
}
.nm-drawer-panel--left[b-yoxjuf3zrb] {
    margin-right: auto;
    animation: nm-drawer-in-left-b-yoxjuf3zrb .2s ease;
}

@keyframes nm-drawer-in-right-b-yoxjuf3zrb { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nm-drawer-in-left-b-yoxjuf3zrb  { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.nm-drawer__head[b-yoxjuf3zrb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nm-border);
    flex: none;
}

.nm-drawer__title[b-yoxjuf3zrb] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-drawer__close[b-yoxjuf3zrb] {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--nm-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--nm-r-input);
}
.nm-drawer__close:hover[b-yoxjuf3zrb] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-drawer__body[b-yoxjuf3zrb] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    color: var(--nm-ink-2);
}

.nm-drawer__foot[b-yoxjuf3zrb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--nm-border);
    flex: none;
}
/* /src/Ui/NmDropdown.razor.rz.scp.css */
/* NmDropdown — token-only. Backdrop trong suốt để bắt click-outside (không cần JS).
   Các .nm-menu__* do NmMenuItem (component con) render → dùng ::deep để style. */
.nm-dropdown[b-rvzu3xugwc] {
    position: relative;
    display: inline-flex;
}

.nm-dropdown__trigger[b-rvzu3xugwc] { display: inline-flex; cursor: pointer; }

.nm-dropdown__backdrop[b-rvzu3xugwc] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-dropdown__menu[b-rvzu3xugwc] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 1101;
    min-width: 180px;
    padding: 6px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    box-shadow: var(--nm-shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nm-dropdown__menu--start[b-rvzu3xugwc] { left: 0; }
.nm-dropdown__menu--end[b-rvzu3xugwc] { right: 0; }

.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--nm-r-input);
    font-family: var(--nm-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nm-ink);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s ease;
}

.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__item:hover:not(:disabled) { background: var(--nm-surface-2); }
.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__item:disabled { opacity: .5; cursor: not-allowed; }

.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__item.is-danger { color: var(--nm-bad); }
.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__item.is-danger:hover:not(:disabled) { background: var(--nm-bad-soft); }

.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__icon { font-size: 15px; width: 16px; text-align: center; }
.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__text { flex: 1; }

.nm-dropdown__menu[b-rvzu3xugwc]  .nm-menu__sep {
    height: 1px;
    background: var(--nm-border);
    margin: 4px 0;
}
/* /src/Ui/NmEmptyState.razor.rz.scp.css */
/* NmEmptyState — token-only. */
.nm-empty[b-vmd5hzgt4b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 48px 24px;
    font-family: var(--nm-font);
}
.nm-empty.is-compact[b-vmd5hzgt4b] { padding: 28px 16px; }

.nm-empty__icon[b-vmd5hzgt4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    font-size: 26px;
}
.nm-empty.is-compact .nm-empty__icon[b-vmd5hzgt4b] { width: 44px; height: 44px; font-size: 20px; }

.nm-empty__title[b-vmd5hzgt4b] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-empty__desc[b-vmd5hzgt4b] {
    margin: 0;
    font-size: 14px;
    color: var(--nm-muted);
    max-width: 420px;
}

.nm-empty__actions[b-vmd5hzgt4b] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
/* /src/Ui/NmField.razor.rz.scp.css */
/* NmField — token-only. */
.nm-field[b-wanvybaczu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nm-field__label[b-wanvybaczu] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.nm-field__req[b-wanvybaczu] {
    color: var(--nm-bad);
    margin-left: 2px;
}

.nm-field__hint[b-wanvybaczu] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.nm-field__error[b-wanvybaczu] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-bad);
}
/* /src/Ui/NmFileUpload.razor.rz.scp.css */
/* NmFileUpload — token-only. Dropzone + danh sách tệp. InputFile phủ trong suốt lên vùng thả. */
.nm-fileupload[b-gdb26tbkaa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-fileupload__drop[b-gdb26tbkaa] {
    position: relative;
    display: flex;
    border: 1.5px dashed var(--nm-border-strong);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    transition: border-color .15s ease, background .15s ease;
}
.nm-fileupload__drop.is-dragging[b-gdb26tbkaa] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
}
.nm-fileupload:not(.is-disabled) .nm-fileupload__drop:hover[b-gdb26tbkaa] {
    border-color: var(--nm-brand-500);
}
.nm-fileupload.is-disabled .nm-fileupload__drop[b-gdb26tbkaa] {
    opacity: .6;
    cursor: not-allowed;
}

/* Input file phủ kín dropzone, trong suốt → bắt click + kéo thả.
   <InputFile> là COMPONENT con → <input> nó render KHÔNG mang scope-id của component này,
   nên phải dùng ::deep (sau 1 phần tử do mình render: .nm-fileupload__drop) để style được. */
.nm-fileupload__drop[b-gdb26tbkaa]  .nm-fileupload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.nm-fileupload.is-disabled[b-gdb26tbkaa]  .nm-fileupload__input { cursor: not-allowed; }

.nm-fileupload__label[b-gdb26tbkaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 26px 16px;
    text-align: center;
    pointer-events: none;
}

.nm-fileupload__icon[b-gdb26tbkaa] {
    font-size: 28px;
    color: var(--nm-brand-500);
    margin-bottom: 2px;
}
.nm-fileupload__title[b-gdb26tbkaa] { font-size: 14px; }
.nm-fileupload__accent[b-gdb26tbkaa] { color: var(--nm-brand-700); font-weight: 600; }
.nm-fileupload__muted[b-gdb26tbkaa] { color: var(--nm-ink-2); }
.nm-fileupload__hint[b-gdb26tbkaa] { font-size: 12px; color: var(--nm-muted); }

/* Danh sách tệp */
.nm-fileupload__list[b-gdb26tbkaa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nm-fileupload__item[b-gdb26tbkaa] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
}
.nm-fileupload__item-ico[b-gdb26tbkaa] { font-size: 18px; color: var(--nm-ink-2); flex: none; }
.nm-fileupload__item-info[b-gdb26tbkaa] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nm-fileupload__item-name[b-gdb26tbkaa] {
    font-size: 13.5px;
    color: var(--nm-ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-fileupload__item-size[b-gdb26tbkaa] { font-size: 12px; color: var(--nm-muted); }

.nm-fileupload__remove[b-gdb26tbkaa] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--nm-muted);
    border-radius: var(--nm-r-pill);
    font-size: 12px;
    cursor: pointer;
    transition: background .1s ease, color .1s ease;
}
.nm-fileupload__remove:hover[b-gdb26tbkaa] { background: var(--nm-bad-soft); color: var(--nm-bad); }

/* Lỗi */
.nm-fileupload__errors[b-gdb26tbkaa] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nm-fileupload__error[b-gdb26tbkaa] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--nm-bad);
}
/* /src/Ui/NmFormGrid.razor.rz.scp.css */
/* NmFormGrid — token-only. */
.nm-formgrid[b-u36isfyjpp] {
    display: grid;
    gap: 14px 16px;
}

/* Field chiếm trọn hàng (textarea, ghi chú dài) */
.nm-formgrid[b-u36isfyjpp]  .nm-col-full { grid-column: 1 / -1; }
/* /src/Ui/NmIconButton.razor.rz.scp.css */
/* NmIconButton — token-only. */
.nm-iconbtn[b-343xz1mnj8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--nm-r-input);
    cursor: pointer;
    flex: none;
    color: var(--nm-ink-2);
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.nm-iconbtn.is-round[b-343xz1mnj8] { border-radius: var(--nm-r-pill); }
.nm-iconbtn:disabled[b-343xz1mnj8], .nm-iconbtn.is-loading[b-343xz1mnj8] { opacity: .6; cursor: not-allowed; }

/* Sizes (vuông) */
.nm-iconbtn--sm[b-343xz1mnj8] { width: 28px; height: 28px; font-size: 14px; }
.nm-iconbtn--md[b-343xz1mnj8] { width: 34px; height: 34px; font-size: 16px; }
.nm-iconbtn--lg[b-343xz1mnj8] { width: 40px; height: 40px; font-size: 18px; }

/* Variants */
.nm-iconbtn--ghost[b-343xz1mnj8] { background: transparent; }
.nm-iconbtn--ghost:hover:not(:disabled)[b-343xz1mnj8] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-iconbtn--secondary[b-343xz1mnj8] { background: var(--nm-surface); border-color: var(--nm-border-strong); }
.nm-iconbtn--secondary:hover:not(:disabled)[b-343xz1mnj8] { background: var(--nm-surface-2); }

.nm-iconbtn--primary[b-343xz1mnj8] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.nm-iconbtn--primary:hover:not(:disabled)[b-343xz1mnj8] { background: var(--nm-brand-600); }

.nm-iconbtn--danger[b-343xz1mnj8] { background: transparent; color: var(--nm-bad); }
.nm-iconbtn--danger:hover:not(:disabled)[b-343xz1mnj8] { background: var(--nm-bad-soft); }

/* Spinner */
.nm-iconbtn__spinner[b-343xz1mnj8] {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--nm-r-pill);
    display: inline-block;
    animation: nm-iconbtn-spin-b-343xz1mnj8 .6s linear infinite;
}
@keyframes nm-iconbtn-spin-b-343xz1mnj8 { to { transform: rotate(360deg); } }
/* /src/Ui/NmInput.razor.rz.scp.css */
/* NmInput — token-only. Base style dùng chung diện mạo với NmTextArea/NmSelect. */
.nm-input-wrap[b-chvtwl5ume] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-input[b-chvtwl5ume] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--nm-font);
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-input[b-chvtwl5ume]::placeholder { color: var(--nm-muted); }

.nm-input:hover:not(:disabled)[b-chvtwl5ume] { border-color: var(--nm-ink-2); }

.nm-input:focus[b-chvtwl5ume] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-input:disabled[b-chvtwl5ume] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-input.is-invalid[b-chvtwl5ume] {
    border-color: var(--nm-bad);
}
.nm-input.is-invalid:focus[b-chvtwl5ume] {
    box-shadow: 0 0 0 3px var(--nm-bad-soft);
}

/* Sizes */
.nm-input--sm[b-chvtwl5ume] { padding: 5px 10px; font-size: 12.5px; }
.nm-input--md[b-chvtwl5ume] { padding: 8px 12px; font-size: 14px; }
.nm-input--lg[b-chvtwl5ume] { padding: 11px 14px; font-size: 15px; }

/* Icon đầu ô */
.nm-input.has-icon.nm-input--sm[b-chvtwl5ume] { padding-left: 30px; }
.nm-input.has-icon.nm-input--md[b-chvtwl5ume] { padding-left: 36px; }
.nm-input.has-icon.nm-input--lg[b-chvtwl5ume] { padding-left: 40px; }

.nm-input__icon[b-chvtwl5ume] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 15px;
}
.nm-input__icon--start[b-chvtwl5ume] { left: 11px; }
/* /src/Ui/NmInputGroup.razor.rz.scp.css */
/* NmInputGroup — token-only. Khung group giữ viền; control con bị bỏ viền (::deep). */
.nm-ig[b-d0vaxbaoty] {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-ig:focus-within[b-d0vaxbaoty] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-ig.is-invalid[b-d0vaxbaoty] { border-color: var(--nm-bad); }
.nm-ig.is-invalid:focus-within[b-d0vaxbaoty] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-ig__control[b-d0vaxbaoty] { flex: 1; min-width: 0; display: flex; }

.nm-ig__addon[b-d0vaxbaoty] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-family: var(--nm-font);
    font-weight: 600;
    white-space: nowrap;
}
.nm-ig__addon:first-child[b-d0vaxbaoty] { border-right: 1px solid var(--nm-border); }
.nm-ig__addon:last-child[b-d0vaxbaoty] { border-left: 1px solid var(--nm-border); }

/* Sizes */
.nm-ig--sm[b-d0vaxbaoty] { font-size: 12.5px; }
.nm-ig--sm .nm-ig__addon[b-d0vaxbaoty] { padding: 0 10px; }
.nm-ig--md[b-d0vaxbaoty] { font-size: 14px; }
.nm-ig--lg[b-d0vaxbaoty] { font-size: 15px; }
.nm-ig--lg .nm-ig__addon[b-d0vaxbaoty] { padding: 0 14px; }

/* Bỏ viền/bo góc/ring của control con để liền khối */
.nm-ig[b-d0vaxbaoty]  input,
.nm-ig[b-d0vaxbaoty]  textarea,
.nm-ig[b-d0vaxbaoty]  select,
.nm-ig[b-d0vaxbaoty]  .nm-input,
.nm-ig[b-d0vaxbaoty]  .nm-select {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
}
.nm-ig[b-d0vaxbaoty]  .nm-input-wrap,
.nm-ig[b-d0vaxbaoty]  .nm-select-wrap { width: 100%; }
/* /src/Ui/NmKpi.razor.rz.scp.css */
/* NmKpi — token-only. */
.nm-kpi[b-d0ub79tm5k] {
    padding: 12px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.nm-kpi__lbl[b-d0ub79tm5k] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--nm-muted);
    font-weight: 600;
}

.nm-kpi__val[b-d0ub79tm5k] {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.nm-kpi__dot[b-d0ub79tm5k] { width: 8px; height: 8px; border-radius: var(--nm-r-pill); display: inline-block; }
.nm-kpi__dot--accent[b-d0ub79tm5k] { background: var(--nm-brand-500); }
.nm-kpi__dot--good[b-d0ub79tm5k] { background: var(--nm-ok); }
.nm-kpi__dot--info[b-d0ub79tm5k] { background: var(--nm-info); }
.nm-kpi__dot--warn[b-d0ub79tm5k] { background: var(--nm-warn); }
.nm-kpi__dot--bad[b-d0ub79tm5k] { background: var(--nm-bad); }
.nm-kpi__dot--pending[b-d0ub79tm5k] { background: var(--nm-pending); }
/* /src/Ui/NmModal.razor.rz.scp.css */
/* NmModal — token-only. */
.nm-modal-overlay[b-vw7srwv0zn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 7vh 16px 16px;
    background: rgba(16, 24, 40, .45);
    overflow-y: auto;
    /* Cuộn hết nội dung hộp thoại thì DỪNG, không "lây" sang trang phía sau.
       Không chặn, trên điện thoại vuốt tiếp là trang nền trôi mất chỗ đang đọc,
       đóng hộp thoại xong thấy màn hình đã nhảy đi nơi khác. */
    overscroll-behavior: contain;
}

.nm-modal-panel[b-vw7srwv0zn] {
    width: 100%;
    background: var(--nm-surface);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-pop);
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}

.nm-modal-panel--sm[b-vw7srwv0zn] { max-width: 420px; }
.nm-modal-panel--md[b-vw7srwv0zn] { max-width: 560px; }
.nm-modal-panel--lg[b-vw7srwv0zn] { max-width: 820px; }

.nm-modal__head[b-vw7srwv0zn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nm-border);
}

.nm-modal__title[b-vw7srwv0zn] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-modal__close[b-vw7srwv0zn] {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--nm-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--nm-r-input);
}
.nm-modal__close:hover[b-vw7srwv0zn] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-modal__body[b-vw7srwv0zn] {
    padding: 20px;
    overflow-y: auto;
    /* Cùng lý do như .nm-modal-overlay: chặn cuộn lây sang lớp ngoài. */
    overscroll-behavior: contain;
    color: var(--nm-ink-2);
}

.nm-modal__foot[b-vw7srwv0zn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--nm-border);
}
/* /src/Ui/NmMultiSelect.razor.rz.scp.css */
/* NmMultiSelect — chọn nhiều dạng chip, token-only.
   Backdrop trong suốt bắt click-outside (không JS). Control bọc chip (NmTag) + ô nhập inline. */
.nm-multiselect[b-zq5glom613] {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-multiselect__control[b-zq5glom613] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-multiselect:not(.is-disabled):hover .nm-multiselect__control[b-zq5glom613] { border-color: var(--nm-ink-2); }

.nm-multiselect.is-open .nm-multiselect__control[b-zq5glom613],
.nm-multiselect .nm-multiselect__control:focus-within[b-zq5glom613] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-multiselect.is-invalid .nm-multiselect__control[b-zq5glom613] { border-color: var(--nm-bad); }
.nm-multiselect.is-invalid.is-open .nm-multiselect__control[b-zq5glom613],
.nm-multiselect.is-invalid .nm-multiselect__control:focus-within[b-zq5glom613] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-multiselect.is-disabled .nm-multiselect__control[b-zq5glom613] {
    background: var(--nm-surface-2);
    cursor: not-allowed;
}

.nm-multiselect__chips[b-zq5glom613] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.nm-multiselect__input[b-zq5glom613] {
    flex: 1 1 70px;
    min-width: 70px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nm-ink);
    font-family: inherit;
    padding: 2px 0;
}
.nm-multiselect__input[b-zq5glom613]::placeholder { color: var(--nm-muted); }
.nm-multiselect__input:disabled[b-zq5glom613] { cursor: not-allowed; }

/* Sizes — padding của vùng chips + cỡ chữ ô nhập */
.nm-multiselect--sm .nm-multiselect__chips[b-zq5glom613] { padding: 4px 6px; }
.nm-multiselect--sm .nm-multiselect__input[b-zq5glom613] { font-size: 12.5px; }
.nm-multiselect--md .nm-multiselect__chips[b-zq5glom613] { padding: 6px 8px; }
.nm-multiselect--md .nm-multiselect__input[b-zq5glom613] { font-size: 14px; }
.nm-multiselect--lg .nm-multiselect__chips[b-zq5glom613] { padding: 8px 10px; }
.nm-multiselect--lg .nm-multiselect__input[b-zq5glom613] { font-size: 15px; }

.nm-multiselect__clear[b-zq5glom613] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--nm-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    transition: background .1s ease, color .1s ease;
}
.nm-multiselect__clear:hover[b-zq5glom613] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-multiselect__caret[b-zq5glom613] {
    flex: none;
    padding: 0 12px;
    color: var(--nm-muted);
    font-size: 12px;
    pointer-events: none;
    transition: transform .15s ease;
}
.nm-multiselect.is-open .nm-multiselect__caret[b-zq5glom613] { transform: rotate(180deg); }

/* Backdrop trong suốt + panel kết quả */
.nm-multiselect__backdrop[b-zq5glom613] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-multiselect__panel[b-zq5glom613] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1101;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    box-shadow: var(--nm-shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nm-multiselect__option[b-zq5glom613] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: var(--nm-r-input);
    font-family: var(--nm-font);
    font-size: 13.5px;
    color: var(--nm-ink);
    text-align: left;
    cursor: pointer;
    transition: background .1s ease;
}
.nm-multiselect__box[b-zq5glom613] { flex: none; font-size: 15px; color: var(--nm-muted); }
.nm-multiselect__option.is-selected .nm-multiselect__box[b-zq5glom613] { color: var(--nm-brand-500); }
.nm-multiselect__option-label[b-zq5glom613] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-multiselect__option.is-active:not(:disabled)[b-zq5glom613] { background: var(--nm-surface-2); }
.nm-multiselect__option.is-selected[b-zq5glom613] { color: var(--nm-brand-700); font-weight: 600; }
.nm-multiselect__option:disabled[b-zq5glom613] { opacity: .5; cursor: not-allowed; }

.nm-multiselect__empty[b-zq5glom613] {
    padding: 14px 10px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
}
/* /src/Ui/NmNumberStepper.razor.rz.scp.css */
/* NmNumberStepper — token-only. */
.nm-num[b-f9nv9ap9ku] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    overflow: hidden;
}
.nm-num.is-disabled[b-f9nv9ap9ku] { opacity: .6; }

.nm-num__btn[b-f9nv9ap9ku] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.nm-num__btn:hover:not(:disabled)[b-f9nv9ap9ku] { background: var(--nm-surface-2); color: var(--nm-ink); }
.nm-num__btn:disabled[b-f9nv9ap9ku] { color: var(--nm-muted); cursor: not-allowed; }

.nm-num__field[b-f9nv9ap9ku] {
    width: 48px;
    border: none;
    border-left: 1px solid var(--nm-border);
    border-right: 1px solid var(--nm-border);
    text-align: center;
    font-family: var(--nm-font);
    font-weight: 600;
    color: var(--nm-ink);
    background: var(--nm-surface);
    outline: none;
    font-variant-numeric: tabular-nums;
}
.nm-num__field:focus[b-f9nv9ap9ku] { background: var(--nm-brand-50); }

/* Sizes */
.nm-num--sm .nm-num__btn[b-f9nv9ap9ku] { width: 28px; font-size: 12px; }
.nm-num--sm .nm-num__field[b-f9nv9ap9ku] { height: 28px; font-size: 14px; }
.nm-num--md .nm-num__btn[b-f9nv9ap9ku] { width: 34px; font-size: 14px; }
.nm-num--md .nm-num__field[b-f9nv9ap9ku] { height: 34px; font-size: 14px; }
.nm-num--lg .nm-num__btn[b-f9nv9ap9ku] { width: 40px; font-size: 14px; }
.nm-num--lg .nm-num__field[b-f9nv9ap9ku] { width: 56px; height: 40px; font-size: 15px; }
/* /src/Ui/NmPageHeader.razor.rz.scp.css */
/* NmPageHeader — token-only. */
.nm-pageheader[b-5q4h4i9pm5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.nm-pageheader__crumb[b-5q4h4i9pm5] { margin-bottom: 2px; }

.nm-pageheader__row[b-5q4h4i9pm5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-pageheader__titles[b-5q4h4i9pm5] { min-width: 0; }

.nm-pageheader__title[b-5q4h4i9pm5] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    line-height: 1.2;
}

.nm-pageheader__icon[b-5q4h4i9pm5] { color: var(--nm-brand-500); font-size: 20px; }

.nm-pageheader__sub[b-5q4h4i9pm5] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nm-muted);
}

.nm-pageheader__actions[b-5q4h4i9pm5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* /src/Ui/NmPagination.razor.rz.scp.css */
/* NmPagination — token-only. */
.nm-pager[b-i8x6dhjboz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--nm-font);
}

.nm-pager__summary[b-i8x6dhjboz] {
    font-size: 12.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.nm-pager__list[b-i8x6dhjboz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nm-pager__btn[b-i8x6dhjboz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--nm-font);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.nm-pager__btn:hover:not(:disabled):not(.is-active)[b-i8x6dhjboz] {
    border-color: var(--nm-border-strong);
    background: var(--nm-surface-2);
}

.nm-pager__btn:disabled[b-i8x6dhjboz] { opacity: .45; cursor: not-allowed; }

.nm-pager__btn.is-active[b-i8x6dhjboz] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
    color: var(--nm-on-brand);
    cursor: default;
}

.nm-pager__gap[b-i8x6dhjboz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--nm-muted);
}
/* /src/Ui/NmPopover.razor.rz.scp.css */
/* NmPopover — token-only. Backdrop trong suốt bắt click-outside (không JS). */
.nm-pop[b-3ib8xr3l0j] {
    position: relative;
    display: inline-flex;
}

.nm-pop__trigger[b-3ib8xr3l0j] { display: inline-flex; cursor: pointer; }

.nm-pop__backdrop[b-3ib8xr3l0j] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-pop__panel[b-3ib8xr3l0j] {
    position: absolute;
    top: calc(100% + 8px);
    z-index: 1101;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow-pop);
    font-family: var(--nm-font);
    overflow: hidden;
}

.nm-pop__panel--start[b-3ib8xr3l0j]  { left: 0; }
.nm-pop__panel--end[b-3ib8xr3l0j]    { right: 0; }
.nm-pop__panel--center[b-3ib8xr3l0j] { left: 50%; transform: translateX(-50%); }

.nm-pop__head[b-3ib8xr3l0j] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.nm-pop__title[b-3ib8xr3l0j] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }

.nm-pop__body[b-3ib8xr3l0j] {
    padding: 14px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
    line-height: 1.5;
}
/* /src/Ui/NmProgress.razor.rz.scp.css */
/* NmProgress — token-only. */
.nm-progress[b-6n2vu7qbtz] { font-family: var(--nm-font); width: 100%; }

.nm-progress__head[b-6n2vu7qbtz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
.nm-progress__label[b-6n2vu7qbtz] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); }
.nm-progress__pct[b-6n2vu7qbtz] { font-size: 12px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

.nm-progress__track[b-6n2vu7qbtz] {
    height: 8px;
    background: var(--nm-surface-2);
    border-radius: var(--nm-r-pill);
    overflow: hidden;
}

.nm-progress__fill[b-6n2vu7qbtz] {
    height: 100%;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    transition: width .3s ease;
}

/* Tones */
.nm-progress--accent .nm-progress__fill[b-6n2vu7qbtz] { background: var(--nm-brand-500); }
.nm-progress--ok .nm-progress__fill[b-6n2vu7qbtz] { background: var(--nm-ok); }
.nm-progress--warn .nm-progress__fill[b-6n2vu7qbtz] { background: var(--nm-warn); }
.nm-progress--bad .nm-progress__fill[b-6n2vu7qbtz] { background: var(--nm-bad); }
.nm-progress--info .nm-progress__fill[b-6n2vu7qbtz] { background: var(--nm-info); }

/* Indeterminate: dải chạy lướt */
.nm-progress.is-indeterminate .nm-progress__fill[b-6n2vu7qbtz] {
    width: 40%;
    animation: nm-progress-slide-b-6n2vu7qbtz 1.1s ease-in-out infinite;
}

@keyframes nm-progress-slide-b-6n2vu7qbtz {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}
/* /src/Ui/NmRadioGroup.razor.rz.scp.css */
/* NmRadioGroup — token-only. Input gốc ẩn, vẽ vòng radio tuỳ biến. */
.nm-radio-group[b-otez011rxx] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.nm-radio-group.is-vertical[b-otez011rxx] {
    flex-direction: column;
    gap: 10px;
}

.nm-radio[b-otez011rxx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    user-select: none;
}
.nm-radio.is-disabled[b-otez011rxx] { cursor: not-allowed; opacity: .55; }

.nm-radio__input[b-otez011rxx] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-radio__mark[b-otez011rxx] {
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--nm-border-strong);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    position: relative;
    transition: border-color .15s ease;
}

.nm-radio__mark[b-otez011rxx]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    transform: scale(0);
    transition: transform .15s ease;
}

.nm-radio__input:checked + .nm-radio__mark[b-otez011rxx] { border-color: var(--nm-brand-500); }
.nm-radio__input:checked + .nm-radio__mark[b-otez011rxx]::after { transform: scale(1); }

.nm-radio__input:focus-visible + .nm-radio__mark[b-otez011rxx] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-radio__label[b-otez011rxx] { line-height: 1.3; }
/* /src/Ui/NmRangeSlider.razor.rz.scp.css */
/* NmRangeSlider — token-only. 2 input range chồng nhau, element pointer-events:none,
   chỉ thumb bắt sự kiện → kéo độc lập. Track + fill vẽ bằng div riêng. */
.nm-rangeslider-wrap[b-kodmm46lcm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.nm-rangeslider[b-kodmm46lcm] {
    position: relative;
    height: 18px;
    width: 100%;
}
.nm-rangeslider.is-disabled[b-kodmm46lcm] { opacity: .5; }

.nm-rangeslider__track[b-kodmm46lcm],
.nm-rangeslider__fill[b-kodmm46lcm] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: var(--nm-r-pill);
    pointer-events: none;
}
.nm-rangeslider__track[b-kodmm46lcm] {
    left: 0;
    right: 0;
    background: var(--nm-border-strong);
}
.nm-rangeslider__fill[b-kodmm46lcm] {
    background: var(--nm-brand-500);
}

/* Hai input chồng khít, trong suốt, không bắt chuột trừ thumb */
.nm-rangeslider__input[b-kodmm46lcm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}
.nm-rangeslider__input--end[b-kodmm46lcm] { z-index: 3; }
.nm-rangeslider__input--start[b-kodmm46lcm] { z-index: 3; }

/* Track của input để trong suốt (đã có track div riêng) */
.nm-rangeslider__input[b-kodmm46lcm]::-webkit-slider-runnable-track {
    height: 18px;
    background: transparent;
}
.nm-rangeslider__input[b-kodmm46lcm]::-moz-range-track {
    height: 18px;
    background: transparent;
}

/* Thumb — chỉ phần tử này bắt chuột */
.nm-rangeslider__input[b-kodmm46lcm]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nm-surface);
    border: 2px solid var(--nm-brand-500);
    box-shadow: var(--nm-shadow-sm);
    cursor: pointer;
    transition: box-shadow .12s ease;
}
.nm-rangeslider__input:focus[b-kodmm46lcm]::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

.nm-rangeslider__input[b-kodmm46lcm]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nm-surface);
    border: 2px solid var(--nm-brand-500);
    box-shadow: var(--nm-shadow-sm);
    cursor: pointer;
}
.nm-rangeslider__input:focus[b-kodmm46lcm]::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

.nm-rangeslider.is-disabled .nm-rangeslider__input[b-kodmm46lcm]::-webkit-slider-thumb { cursor: not-allowed; }
.nm-rangeslider.is-disabled .nm-rangeslider__input[b-kodmm46lcm]::-moz-range-thumb { cursor: not-allowed; }

/* Nhãn 2 đầu */
.nm-rangeslider__labels[b-kodmm46lcm] {
    display: flex;
    justify-content: space-between;
    font-family: var(--nm-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
/* /src/Ui/NmRating.razor.rz.scp.css */
/* NmRating — token-only. */
.nm-rating[b-9yavhim044] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nm-font);
}

/* Readonly: lớp nền xám + lớp vàng cắt theo % */
.nm-rating__stars[b-9yavhim044] {
    position: relative;
    display: inline-flex;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 2px;
}

.nm-rating__base[b-9yavhim044] { color: var(--nm-border-strong); }

.nm-rating__fill[b-9yavhim044] {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f59e0b;
}

/* Interactive */
.nm-rating__stars--interactive[b-9yavhim044] { letter-spacing: 0; gap: 2px; }

.nm-rating__btn[b-9yavhim044] {
    border: none;
    background: transparent;
    padding: 0 1px;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: var(--nm-border-strong);
    transition: color .1s ease, transform .1s ease;
}
.nm-rating__btn:hover[b-9yavhim044] { transform: scale(1.12); }
.nm-rating__btn .is-on[b-9yavhim044] { color: #f59e0b; }

.nm-rating__num[b-9yavhim044] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
/* /src/Ui/NmSelect.razor.rz.scp.css */
/* NmSelect — token-only. Ẩn caret mặc định, vẽ caret riêng. */
.nm-select-wrap[b-dd6p918dnh] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-select[b-dd6p918dnh] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--nm-font);
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-select:hover:not(:disabled)[b-dd6p918dnh] { border-color: var(--nm-ink-2); }

.nm-select:focus[b-dd6p918dnh] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-select:disabled[b-dd6p918dnh] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-select.is-invalid[b-dd6p918dnh] { border-color: var(--nm-bad); }
.nm-select.is-invalid:focus[b-dd6p918dnh] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

/* Sizes — chừa chỗ caret bên phải */
.nm-select--sm[b-dd6p918dnh] { padding: 5px 30px 5px 10px; font-size: 12.5px; }
.nm-select--md[b-dd6p918dnh] { padding: 8px 34px 8px 12px; font-size: 14px; }
.nm-select--lg[b-dd6p918dnh] { padding: 11px 38px 11px 14px; font-size: 15px; }

.nm-select__caret[b-dd6p918dnh] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 12px;
}
/* /src/Ui/NmSkeleton.razor.rz.scp.css */
/* NmSkeleton — token-only. Shimmer dùng gradient trên nền surface-2. */
.nm-skel[b-69h41cc36b] {
    display: block;
    background: linear-gradient(90deg, var(--nm-surface-2) 25%, var(--nm-border) 37%, var(--nm-surface-2) 63%);
    background-size: 400% 100%;
    animation: nm-skel-shimmer-b-69h41cc36b 1.4s ease infinite;
}

.nm-skel--text[b-69h41cc36b] {
    height: 0.85em;
    border-radius: var(--nm-r-input);
    margin: 3px 0;
}

.nm-skel--rect[b-69h41cc36b] {
    width: 100%;
    height: 80px;
    border-radius: var(--nm-r-input);
}

.nm-skel--circle[b-69h41cc36b] {
    width: 40px;
    height: 40px;
    border-radius: var(--nm-r-pill);
}

.nm-skel-lines[b-69h41cc36b] { display: block; }
.nm-skel-lines .nm-skel--text[b-69h41cc36b] { width: 100%; }

@keyframes nm-skel-shimmer-b-69h41cc36b {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Ui/NmSlider.razor.rz.scp.css */
/* NmSlider — token-only. Track 6px bo tròn, fill theo --nm-slider-pct (webkit) / ::-moz-range-progress (FF). */
.nm-slider-wrap[b-uyli4vvo4m] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.nm-slider[b-uyli4vvo4m] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 18px;
    background: transparent;
    cursor: pointer;
    outline: none;
}
.nm-slider:disabled[b-uyli4vvo4m] { cursor: not-allowed; opacity: .5; }

/* ── WebKit / Blink ── */
.nm-slider[b-uyli4vvo4m]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: linear-gradient(to right,
        var(--nm-brand-500) var(--nm-slider-pct, 0%),
        var(--nm-border-strong) var(--nm-slider-pct, 0%));
}
.nm-slider[b-uyli4vvo4m]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* (6 track - 18 thumb) / 2 */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nm-surface);
    border: 2px solid var(--nm-brand-500);
    box-shadow: var(--nm-shadow-sm);
    transition: box-shadow .12s ease;
}
.nm-slider:focus[b-uyli4vvo4m]::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }
.nm-slider:hover:not(:disabled)[b-uyli4vvo4m]::-webkit-slider-thumb { border-color: var(--nm-brand-600); }

/* ── Firefox ── */
.nm-slider[b-uyli4vvo4m]::-moz-range-track {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
}
.nm-slider[b-uyli4vvo4m]::-moz-range-progress {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
}
.nm-slider[b-uyli4vvo4m]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--nm-surface);
    border: 2px solid var(--nm-brand-500);
    box-shadow: var(--nm-shadow-sm);
}
.nm-slider:focus[b-uyli4vvo4m]::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

/* Ô giá trị */
.nm-slider__value[b-uyli4vvo4m] {
    flex: none;
    min-width: 56px;
    text-align: right;
    font-family: var(--nm-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
/* /src/Ui/NmSpinner.razor.rz.scp.css */
/* NmSpinner — token-only. */
.nm-spin-wrap[b-4rlx8u2l0x] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nm-font);
}
.nm-spin-wrap.is-center[b-4rlx8u2l0x] { display: flex; justify-content: center; width: 100%; }

.nm-spin[b-4rlx8u2l0x] {
    display: inline-block;
    border-radius: var(--nm-r-pill);
    border: 2.5px solid var(--nm-border);
    border-top-color: var(--nm-brand-500);
    animation: nm-spin-rot-b-4rlx8u2l0x .65s linear infinite;
}

.nm-spin--sm[b-4rlx8u2l0x] { width: 16px; height: 16px; border-width: 2px; }
.nm-spin--md[b-4rlx8u2l0x] { width: 24px; height: 24px; }
.nm-spin--lg[b-4rlx8u2l0x] { width: 36px; height: 36px; border-width: 3px; }

.nm-spin__label[b-4rlx8u2l0x] { font-size: 14px; color: var(--nm-muted); }

@keyframes nm-spin-rot-b-4rlx8u2l0x { to { transform: rotate(360deg); } }
/* /src/Ui/NmStatGrid.razor.rz.scp.css */
/* NmStatGrid — token-only. */
.nm-statgrid[b-jl9g7wm2dr] {
    display: grid;
    gap: 12px;
}
/* /src/Ui/NmSteps.razor.rz.scp.css */
/* NmSteps — token-only. */
.nm-steps[b-fpx12c7f5s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    font-family: var(--nm-font);
}

.nm-step[b-fpx12c7f5s] {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0 6px;
}

/* Đường nối tới bước trước (nửa trái) */
.nm-step__line[b-fpx12c7f5s] {
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--nm-border);
}
.nm-step--done .nm-step__line[b-fpx12c7f5s],
.nm-step--current .nm-step__line[b-fpx12c7f5s] { background: var(--nm-brand-500); }

.nm-step__dot[b-fpx12c7f5s] {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: var(--nm-r-pill);
    border: 2px solid var(--nm-border-strong);
    background: var(--nm-surface);
    color: var(--nm-muted);
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--nm-font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nm-step__dot:not(:disabled)[b-fpx12c7f5s] { cursor: pointer; }

.nm-step--done .nm-step__dot[b-fpx12c7f5s] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
    color: var(--nm-on-brand);
}
.nm-step--current .nm-step__dot[b-fpx12c7f5s] {
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-600);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-step__text[b-fpx12c7f5s] { display: flex; flex-direction: column; gap: 1px; }

.nm-step__label[b-fpx12c7f5s] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}
.nm-step--current .nm-step__label[b-fpx12c7f5s] { color: var(--nm-ink); }

.nm-step__desc[b-fpx12c7f5s] { font-size: 11px; color: var(--nm-muted); }
/* /src/Ui/NmSwitch.razor.rz.scp.css */
/* NmSwitch — token-only. Input gốc ẩn, vẽ track + thumb. */
.nm-switch[b-r61asdbr54] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-family: var(--nm-font);
    font-size: 14px;
    color: var(--nm-ink);
    user-select: none;
}
.nm-switch.is-disabled[b-r61asdbr54] { cursor: not-allowed; opacity: .55; }

.nm-switch__input[b-r61asdbr54] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-switch__track[b-r61asdbr54] {
    flex: none;
    width: 40px;
    height: 22px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
    position: relative;
    transition: background .18s ease;
}

.nm-switch__thumb[b-r61asdbr54] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow-sm);
    transition: transform .18s ease;
}

.nm-switch__input:checked + .nm-switch__track[b-r61asdbr54] { background: var(--nm-brand-500); }
.nm-switch__input:checked + .nm-switch__track .nm-switch__thumb[b-r61asdbr54] { transform: translateX(18px); }

.nm-switch__input:focus-visible + .nm-switch__track[b-r61asdbr54] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-switch__label[b-r61asdbr54] { line-height: 1.3; }
/* /src/Ui/NmTabs.razor.rz.scp.css */
/* NmTabs — token-only. */
.nm-tabs__bar[b-yoe9bnnhhy] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--nm-border);
}

.nm-tabs__tab[b-yoe9bnnhhy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: none;
    background: transparent;
    font-family: var(--nm-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s ease, border-color .12s ease;
}

.nm-tabs__tab:hover:not(:disabled)[b-yoe9bnnhhy] { color: var(--nm-ink); }
.nm-tabs__tab:disabled[b-yoe9bnnhhy] { opacity: .5; cursor: not-allowed; }

.nm-tabs__tab.is-active[b-yoe9bnnhhy] {
    color: var(--nm-brand-600);
    border-bottom-color: var(--nm-brand-500);
}

.nm-tabs__badge[b-yoe9bnnhhy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 11px;
    font-weight: 700;
}
.nm-tabs__tab.is-active .nm-tabs__badge[b-yoe9bnnhhy] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.nm-tabs__panel[b-yoe9bnnhhy] { padding-top: 16px; }
/* /src/Ui/NmTag.razor.rz.scp.css */
/* NmTag — token-only. Tone dùng status vocabulary (giống NmBadge). */
.nm-tag[b-bcn0g6hg0s] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px 3px 10px;
    border-radius: var(--nm-r-pill);
    font-family: var(--nm-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Khi không closable, bỏ padding-right rộng */
.nm-tag:not(:has(.nm-tag__close))[b-bcn0g6hg0s] { padding-right: 10px; }

.nm-tag__text[b-bcn0g6hg0s] { display: inline-flex; }

.nm-tag__close[b-bcn0g6hg0s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border: none;
    background: transparent;
    border-radius: var(--nm-r-pill);
    color: currentColor;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    transition: opacity .12s ease, background .12s ease;
}
.nm-tag__close:hover[b-bcn0g6hg0s] { opacity: 1; background: rgba(0, 0, 0, .08); }

.nm-tag--ok[b-bcn0g6hg0s]      { background: var(--nm-ok-soft);      color: var(--nm-ok); }
.nm-tag--warn[b-bcn0g6hg0s]    { background: var(--nm-warn-soft);    color: var(--nm-warn); }
.nm-tag--bad[b-bcn0g6hg0s]     { background: var(--nm-bad-soft);     color: var(--nm-bad); }
.nm-tag--info[b-bcn0g6hg0s]    { background: var(--nm-info-soft);    color: var(--nm-info); }
.nm-tag--pending[b-bcn0g6hg0s] { background: var(--nm-pending-soft); color: var(--nm-pending); }
.nm-tag--violet[b-bcn0g6hg0s]  { background: var(--nm-violet-soft);  color: var(--nm-violet); }
.nm-tag--neutral[b-bcn0g6hg0s] { background: var(--nm-surface-2);    color: var(--nm-ink-2); }
/* /src/Ui/NmTextArea.razor.rz.scp.css */
/* NmTextArea — token-only. Đồng bộ diện mạo với NmInput. */
.nm-textarea[b-fgjnurdvl6] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--nm-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    padding: 8px 12px;
    outline: none;
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-textarea[b-fgjnurdvl6]::placeholder { color: var(--nm-muted); }
.nm-textarea:hover:not(:disabled)[b-fgjnurdvl6] { border-color: var(--nm-ink-2); }

.nm-textarea:focus[b-fgjnurdvl6] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-textarea:disabled[b-fgjnurdvl6] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-textarea.is-invalid[b-fgjnurdvl6] { border-color: var(--nm-bad); }
.nm-textarea.is-invalid:focus[b-fgjnurdvl6] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }
/* /src/Ui/NmTimeInput.razor.rz.scp.css */
/* NmTimeInput — token-only, diện mạo đồng bộ NmDateInput/NmInput (native <input type="time">). */
.nm-timeinput-wrap[b-7zjarb4tky] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-timeinput[b-7zjarb4tky] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--nm-font);
    color: var(--nm-ink);
    background: var(--nm-surface);
    border: 1px solid var(--nm-border-strong);
    border-radius: var(--nm-r-input);
    outline: none;
    accent-color: var(--nm-brand-500);
    color-scheme: light;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-timeinput:hover:not(:disabled)[b-7zjarb4tky] { border-color: var(--nm-ink-2); }

.nm-timeinput:focus[b-7zjarb4tky] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-timeinput:disabled[b-7zjarb4tky] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-timeinput.is-invalid[b-7zjarb4tky] { border-color: var(--nm-bad); }
.nm-timeinput.is-invalid:focus[b-7zjarb4tky] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-timeinput--sm[b-7zjarb4tky] { padding: 5px 10px; font-size: 12.5px; }
.nm-timeinput--md[b-7zjarb4tky] { padding: 8px 12px; font-size: 14px; }
.nm-timeinput--lg[b-7zjarb4tky] { padding: 11px 14px; font-size: 15px; }

.nm-timeinput[b-7zjarb4tky]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.nm-timeinput[b-7zjarb4tky]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* /src/Ui/NmTimeline.razor.rz.scp.css */
/* NmTimeline — token-only.
   Các .nm-tl__* do NmTimelineItem (component con) render → dùng ::deep để style. */
.nm-timeline[b-3skwsi6gfg] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--nm-font);
}

.nm-timeline[b-3skwsi6gfg]  .nm-tl__item {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 18px;
}
.nm-timeline[b-3skwsi6gfg]  .nm-tl__item:last-child { padding-bottom: 0; }

/* Đường nối dọc giữa các mốc */
.nm-timeline[b-3skwsi6gfg]  .nm-tl__marker {
    position: relative;
    display: flex;
    justify-content: center;
    flex: none;
    width: 18px;
}
.nm-timeline[b-3skwsi6gfg]  .nm-tl__item:not(:last-child) .nm-tl__marker::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: -18px;
    width: 2px;
    background: var(--nm-border);
}

.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: var(--nm-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    border: 2px solid var(--nm-surface);
}
.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot--accent  { background: var(--nm-brand-500); }
.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot--ok      { background: var(--nm-ok); }
.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot--warn    { background: var(--nm-warn); }
.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot--bad     { background: var(--nm-bad); }
.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot--info    { background: var(--nm-info); }
.nm-timeline[b-3skwsi6gfg]  .nm-tl__dot--pending { background: var(--nm-pending); }

.nm-timeline[b-3skwsi6gfg]  .nm-tl__content { flex: 1; min-width: 0; }

.nm-timeline[b-3skwsi6gfg]  .nm-tl__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.nm-timeline[b-3skwsi6gfg]  .nm-tl__title { font-size: 13.5px; font-weight: 600; color: var(--nm-ink); }
.nm-timeline[b-3skwsi6gfg]  .nm-tl__time { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }

.nm-timeline[b-3skwsi6gfg]  .nm-tl__body {
    margin-top: 2px;
    font-size: 14px;
    color: var(--nm-ink-2);
    line-height: 1.5;
}
/* /src/Ui/NmToolbar.razor.rz.scp.css */
/* NmToolbar — token-only. */
.nm-toolbar[b-mssvbl669c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nm-toolbar.is-boxed[b-mssvbl669c] {
    padding: 12px 14px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
}

.nm-toolbar__start[b-mssvbl669c],
.nm-toolbar__end[b-mssvbl669c] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* /src/Ui/NmTooltip.razor.rz.scp.css */
/* NmTooltip — token-only, thuần CSS (hover/focus). */
.nm-tip[b-6a7w6zarj1] {
    position: relative;
    display: inline-flex;
    align-items: center;
    outline: none;
}

.nm-tip__bubble[b-6a7w6zarj1] {
    position: absolute;
    z-index: 1200;
    background: var(--nm-ink);
    color: #fff;
    font-family: var(--nm-font);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: var(--nm-r-input);
    box-shadow: var(--nm-shadow-pop);
    white-space: nowrap;
    max-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}

.nm-tip:hover .nm-tip__bubble[b-6a7w6zarj1],
.nm-tip:focus-visible .nm-tip__bubble[b-6a7w6zarj1] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Positions */
.nm-tip--top .nm-tip__bubble[b-6a7w6zarj1]    { bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 2px); }
.nm-tip--top:hover .nm-tip__bubble[b-6a7w6zarj1],
.nm-tip--top:focus-visible .nm-tip__bubble[b-6a7w6zarj1] { transform: translate(-50%, 0); }

.nm-tip--bottom .nm-tip__bubble[b-6a7w6zarj1] { top: calc(100% + 7px); left: 50%; transform: translate(-50%, -2px); }
.nm-tip--bottom:hover .nm-tip__bubble[b-6a7w6zarj1],
.nm-tip--bottom:focus-visible .nm-tip__bubble[b-6a7w6zarj1] { transform: translate(-50%, 0); }

.nm-tip--left .nm-tip__bubble[b-6a7w6zarj1]   { right: calc(100% + 7px); top: 50%; transform: translate(2px, -50%); }
.nm-tip--left:hover .nm-tip__bubble[b-6a7w6zarj1],
.nm-tip--left:focus-visible .nm-tip__bubble[b-6a7w6zarj1] { transform: translate(0, -50%); }

.nm-tip--right .nm-tip__bubble[b-6a7w6zarj1]  { left: calc(100% + 7px); top: 50%; transform: translate(-2px, -50%); }
.nm-tip--right:hover .nm-tip__bubble[b-6a7w6zarj1],
.nm-tip--right:focus-visible .nm-tip__bubble[b-6a7w6zarj1] { transform: translate(0, -50%); }
/* /src/Ui/NmTreeView.razor.rz.scp.css */
/* NmTreeView — token-only. Component đệ quy → mọi cấp chung scope id, selector lồng nhau hoạt động. */
.nm-tree[b-92nh4hph8q] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--nm-font);
}

/* Nhánh con thụt vào + đường nối dọc */
.nm-tree .nm-tree[b-92nh4hph8q] {
    padding-left: 14px;
    margin-left: 11px;
    border-left: 1px solid var(--nm-border);
}

.nm-tree__item[b-92nh4hph8q] { position: relative; }

.nm-tree__row[b-92nh4hph8q] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: var(--nm-r-input);
    cursor: pointer;
    color: var(--nm-ink);
    transition: background .1s ease;
}
.nm-tree__row:hover[b-92nh4hph8q] { background: var(--nm-surface-2); }
.nm-tree__row.is-selected[b-92nh4hph8q] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-weight: 600;
}
.nm-tree__row.is-disabled[b-92nh4hph8q] {
    color: var(--nm-muted);
    cursor: not-allowed;
}
.nm-tree__row.is-disabled:hover[b-92nh4hph8q] { background: transparent; }

.nm-tree__toggle[b-92nh4hph8q] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--nm-muted);
    cursor: pointer;
    border-radius: 5px;
    font-size: 11px;
    transition: transform .12s ease, background .1s ease, color .1s ease;
}
.nm-tree__toggle:hover[b-92nh4hph8q] { background: var(--nm-border); color: var(--nm-ink); }
.nm-tree__toggle.is-open[b-92nh4hph8q] { transform: rotate(90deg); }
.nm-tree__toggle--leaf[b-92nh4hph8q] { cursor: default; }
.nm-tree__toggle--leaf:hover[b-92nh4hph8q] { background: transparent; }

.nm-tree__icon[b-92nh4hph8q] {
    flex: none;
    font-size: 14px;
    color: var(--nm-ink-2);
}
.nm-tree__row.is-selected .nm-tree__icon[b-92nh4hph8q] { color: var(--nm-brand-600); }

.nm-tree__label[b-92nh4hph8q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}