/* _content/NGOCMAI.B2E.FE.UI/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-2jl89pf6sq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.nm-list-head[b-2jl89pf6sq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nm-list-title[b-2jl89pf6sq] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-2jl89pf6sq] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); }
.nm-list-actions[b-2jl89pf6sq] { 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-2jl89pf6sq] {
    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-2jl89pf6sq]::-webkit-scrollbar { display: none; }

.aiv-stat[b-2jl89pf6sq] {
    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-2jl89pf6sq] { border-left: 1px solid var(--nm-border); }

.aiv-stat__dot[b-2jl89pf6sq] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); flex-shrink: 0; }
.aiv-stat__dot--accent[b-2jl89pf6sq] { background: var(--nm-brand-500); }
.aiv-stat__dot--good[b-2jl89pf6sq]   { background: var(--nm-ok); }
.aiv-stat__dot--info[b-2jl89pf6sq]   { background: var(--nm-info); }
.aiv-stat__dot--warn[b-2jl89pf6sq]   { background: var(--nm-warn); }
.aiv-stat__dot--bad[b-2jl89pf6sq]    { background: var(--nm-bad); }

.aiv-stat__lbl[b-2jl89pf6sq] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.aiv-stat__val[b-2jl89pf6sq] {
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar filter ── */
.nm-list-toolbar[b-2jl89pf6sq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tb-search[b-2jl89pf6sq] { width: 300px; max-width: 100%; }
.tb-select[b-2jl89pf6sq] { min-width: 190px; }
.tb-filters[b-2jl89pf6sq] { display: contents; }
[b-2jl89pf6sq] .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-2jl89pf6sq] .nm-btn.tb-filter-toggle { display: none; }
.tb-filter-count[b-2jl89pf6sq] {
    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-2jl89pf6sq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tb-chip-count[b-2jl89pf6sq] {
    margin-left: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    opacity: .75;
}
.aiv-urgency[b-2jl89pf6sq] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.aiv-urgency__lbl[b-2jl89pf6sq] {
    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-2jl89pf6sq] { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }

.aiv-list[b-2jl89pf6sq] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--nm-border);
}
.aiv-task[b-2jl89pf6sq] {
    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-2jl89pf6sq] { background: var(--nm-surface-2); }
/* Ưu tiên theo thời gian chờ: vạch trái cam/đỏ */
.aiv-task.is-warm[b-2jl89pf6sq] { border-left-color: var(--nm-warn); }
.aiv-task.is-hot[b-2jl89pf6sq]  { 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-2jl89pf6sq] { border-left-color: var(--nm-brand-500); }

.aiv-task__main[b-2jl89pf6sq] { flex: 1; min-width: 280px; }
.aiv-task__tags[b-2jl89pf6sq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.aiv-step[b-2jl89pf6sq] {
    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-2jl89pf6sq] {
    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-2jl89pf6sq] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nm-muted);
}
.aiv-meta[b-2jl89pf6sq] { display: inline-flex; align-items: center; gap: 5px; }
.aiv-meta i[b-2jl89pf6sq] { color: var(--nm-muted); flex-shrink: 0; }
.aiv-meta strong[b-2jl89pf6sq] { 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-2jl89pf6sq] { color: var(--nm-brand-500); }
.aiv-meta--amount strong[b-2jl89pf6sq] { color: var(--nm-brand-600); font-weight: 700; }

.aiv-wait[b-2jl89pf6sq] { font-weight: 500; color: var(--nm-muted); }
.aiv-wait.is-warm[b-2jl89pf6sq] { color: var(--nm-warn); font-weight: 600; }
.aiv-wait.is-hot[b-2jl89pf6sq]  { color: var(--nm-bad); font-weight: 700; }

.aiv-task__actions[b-2jl89pf6sq] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Footer: tổng + đã lọc ── */
.aiv-foot[b-2jl89pf6sq] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.aiv-foot strong[b-2jl89pf6sq] { color: var(--nm-ink); font-weight: 700; }

/* ── Modal (nội dung; khung do NmModal lo) ── */
[b-2jl89pf6sq] .aiv-modal-alert { margin-bottom: 10px; }
.aiv-label[b-2jl89pf6sq] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink);
    margin-bottom: 6px;
}
.aiv-req[b-2jl89pf6sq] { color: var(--nm-bad); }

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

    .tb-search[b-2jl89pf6sq] { flex: 1; width: auto; }
    [b-2jl89pf6sq] .nm-btn.tb-filter-toggle { display: inline-flex; }
    .tb-filters[b-2jl89pf6sq] { display: none; }
    .tb-filters.is-open[b-2jl89pf6sq] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .tb-filters.is-open .tb-select[b-2jl89pf6sq] { flex: 1; min-width: 0; }
    .tb-select[b-2jl89pf6sq]  .nm-select-wrap,
    .tb-select[b-2jl89pf6sq]  .nm-select { width: 100%; }

    /* Urgency xuống hàng riêng, chips trượt ngang */
    .aiv-urgency[b-2jl89pf6sq] { margin-left: 0; width: 100%; }
    .tb-status[b-2jl89pf6sq] {
        row-gap: 8px;
    }

    /* Task: actions xuống hàng, full-width */
    .aiv-task__actions[b-2jl89pf6sq] { width: 100%; justify-content: flex-end; }
}
/* _content/NGOCMAI.B2E.FE.UI/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-d9bwb2k9nh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 32px 20px;
    font-family: var(--nm-font);
}

.nm-403__card[b-d9bwb2k9nh] {
    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-d9bwb2k9nh] {
    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-d9bwb2k9nh] {
    margin: 20px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nm-ink);
}

.nm-403__desc[b-d9bwb2k9nh] {
    margin: 8px auto 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nm-ink-2);
}

.nm-403__meta[b-d9bwb2k9nh] {
    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-d9bwb2k9nh] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.nm-403__row dt[b-d9bwb2k9nh] {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nm-muted);
}

.nm-403__row dd[b-d9bwb2k9nh] {
    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-d9bwb2k9nh] {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.nm-403__hint[b-d9bwb2k9nh] {
    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-d9bwb2k9nh] {
    flex: none;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 480px) {
    .nm-403[b-d9bwb2k9nh] { min-height: 60vh; padding: 24px 14px; }
    .nm-403__card[b-d9bwb2k9nh] { padding: 30px 20px 22px; }
    .nm-403__row[b-d9bwb2k9nh] { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: no-preference) {
    .nm-403__card[b-d9bwb2k9nh] { animation: nm-403-in-b-d9bwb2k9nh .28s ease-out both; }
}

@keyframes nm-403-in-b-d9bwb2k9nh {
    from { opacity: 0; transform: translateY(6px); }
}
/* _content/NGOCMAI.B2E.FE.UI/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-ts692jrwrj] {
    --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-ts692jrwrj .18s ease-out;
}

@keyframes nm-idle-in-b-ts692jrwrj {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nm-idle-warn__card[b-ts692jrwrj] {
    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-ts692jrwrj] {
    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-ts692jrwrj] {
    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-ts692jrwrj] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--iw-ink-2);
}

.nm-idle-warn__actions[b-ts692jrwrj] {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.nm-idle-warn__ghost[b-ts692jrwrj],
.nm-idle-warn__primary[b-ts692jrwrj] {
    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-ts692jrwrj] {
    background: transparent;
    border: 1px solid var(--iw-line);
    color: var(--iw-ink-3);
}

.nm-idle-warn__ghost:hover[b-ts692jrwrj] {
    background: #f6f7f9;
    color: var(--iw-ink-2);
}

.nm-idle-warn__primary[b-ts692jrwrj] {
    background: var(--iw-accent);
    border: 1px solid var(--iw-accent);
    color: #ffffff;
}

.nm-idle-warn__primary:hover[b-ts692jrwrj] {
    background: #c2410c;
    border-color: #c2410c;
}

@media (max-width: 480px) {
    .nm-idle-warn[b-ts692jrwrj] {
        right: 12px;
        left: 12px;
        bottom: 12px;
    }

    .nm-idle-warn__card[b-ts692jrwrj] {
        width: 100%;
    }
}
/* _content/NGOCMAI.B2E.FE.UI/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-5jneibhslg] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
/* _content/NGOCMAI.B2E.FE.UI/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-x2glh2c07m] {
    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-x2glh2c07m] {
    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-x2glh2c07m]::selection { background: transparent; }
.pin-capture:disabled[b-x2glh2c07m] { cursor: not-allowed; }

.pin-cells[b-x2glh2c07m] {
    display: flex;
    gap: 8px;
}

.pin-cell[b-x2glh2c07m] {
    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-x2glh2c07m] { 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-x2glh2c07m] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.pin-cell.is-active[b-x2glh2c07m]::after {
    content: "";
    width: 2px;
    height: 22px;
    border-radius: 1px;
    background: var(--nm-brand-500);
    animation: pin-caret-b-x2glh2c07m 1s steps(1, end) infinite;
}

@keyframes pin-caret-b-x2glh2c07m {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pin-cell.is-active[b-x2glh2c07m]::after { animation: none; }
}

/* Trạng thái của cả khối */
.pin-field.is-invalid .pin-cell[b-x2glh2c07m] { border-color: var(--nm-bad); }
.pin-field.is-invalid .pin-cell.is-active[b-x2glh2c07m] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }
.pin-field.is-invalid .pin-cell.is-active[b-x2glh2c07m]::after { background: var(--nm-bad); }

.pin-field.is-disabled .pin-cell[b-x2glh2c07m] { background: var(--nm-surface-2); color: var(--nm-muted); border-color: var(--nm-border); }

/* ---- Nút ẩn/hiện ---- */
.pin-eye[b-x2glh2c07m] {
    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-x2glh2c07m] { background: var(--nm-surface-2); color: var(--nm-ink-2); }
.pin-eye:focus-visible[b-x2glh2c07m] { outline: 2px solid var(--nm-brand-300); outline-offset: 1px; }
.pin-eye:disabled[b-x2glh2c07m] { 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-x2glh2c07m] { gap: 5px; }
    .pin-cell[b-x2glh2c07m] { width: 38px; height: 46px; font-size: 19px; }
    .pin-capture[b-x2glh2c07m] { right: 40px; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Auth/SessionApprovalModal.razor.rz.scp.css */
/* SessionApprovalModal — Manager Dashboard v4 theme */
.sam-overlay[b-wbot4uj66n] {
    --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-wbot4uj66n .15s ease-out;
}

@keyframes sam-fadeIn-b-wbot4uj66n {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sam-panel[b-wbot4uj66n] {
    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-wbot4uj66n] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sam-icon[b-wbot4uj66n] {
    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-wbot4uj66n] {
    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-wbot4uj66n] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.sam-body[b-wbot4uj66n] {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.sam-row[b-wbot4uj66n] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .sam-row .k[b-wbot4uj66n] {
        color: var(--d-ink-3);
        font-size: 12.5px;
    }

    .sam-row .v[b-wbot4uj66n] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .sam-row .v.mono[b-wbot4uj66n] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

.sam-countdown[b-wbot4uj66n] {
    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-wbot4uj66n] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: #b45309;
    }

.sam-actions[b-wbot4uj66n] {
    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-wbot4uj66n] {
    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-wbot4uj66n] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.sam-btn-primary[b-wbot4uj66n] {
    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-wbot4uj66n] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.sam-btn:disabled[b-wbot4uj66n] {
    opacity: 0.55;
    cursor: not-allowed;
}

.sam-spin[b-wbot4uj66n] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sam-spin-b-wbot4uj66n 0.7s linear infinite;
}

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

.sam-hint[b-wbot4uj66n] {
    margin: 0;
    padding: 4px 22px 14px;
    font-size: 11.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
    background: var(--d-surface);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Common/ArticleEditor.razor.rz.scp.css */
/* ArticleEditor — Manager Dashboard v4 theme */
.aed-root[b-xlrrh9c8w2] {
    --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-xlrrh9c8w2]  .ql-toolbar,
.aed-host[b-xlrrh9c8w2]  [class*="toolbar"] {
    background: var(--d-surface-2);
    border: 0;
    border-bottom: 1px solid var(--d-line);
    padding: 8px 10px;
}

.aed-host[b-xlrrh9c8w2]  .ql-toolbar button,
.aed-host[b-xlrrh9c8w2]  [class*="toolbar"] button {
    height: 30px;
    min-width: 30px;
    border-radius: 6px;
    color: var(--d-ink-2);
    transition: background .12s, color .12s;
}

    .aed-host[b-xlrrh9c8w2]  .ql-toolbar button:hover,
    .aed-host[b-xlrrh9c8w2]  [class*="toolbar"] button:hover {
        background: var(--d-surface);
        color: var(--d-ink);
    }

    .aed-host[b-xlrrh9c8w2]  .ql-toolbar button.ql-active,
    .aed-host[b-xlrrh9c8w2]  [class*="toolbar"] button.is-active {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

.aed-host[b-xlrrh9c8w2]  .ql-container,
.aed-host[b-xlrrh9c8w2]  [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-xlrrh9c8w2]  .ql-editor {
    padding: 14px 16px;
}

    .aed-host[b-xlrrh9c8w2]  .ql-editor:focus {
        outline: none;
    }

.aed-host[b-xlrrh9c8w2]  .ql-editor.ql-blank::before {
    color: var(--d-ink-3);
    font-style: normal;
}
/* _content/NGOCMAI.B2E.FE.UI/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-7up9c63ajf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
}

.bkmail-title[b-7up9c63ajf] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bkmail-title i[b-7up9c63ajf] {
    color: var(--nm-brand-600);
}

.bkmail-body[b-7up9c63ajf] {
    padding: 14px 18px;
}

.bkmail-empty[b-7up9c63ajf] {
    margin: 0;
    font-size: 13px;
    color: var(--nm-muted);
}

.bkmail-list[b-7up9c63ajf] {
    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-7up9c63ajf] {
    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-7up9c63ajf] {
    border-left-color: var(--nm-bad);
}

.bkmail-item.is-warn[b-7up9c63ajf] {
    border-left-color: var(--nm-warn);
}

.bkmail-item__main[b-7up9c63ajf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bkmail-subject[b-7up9c63ajf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkmail-item__meta[b-7up9c63ajf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--nm-muted);
}

.bkmail-to[b-7up9c63ajf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkmail-when[b-7up9c63ajf] {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.bkmail-err[b-7up9c63ajf] {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--nm-bad);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bkmail-note[b-7up9c63ajf] {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--nm-muted);
}

.bkmail-item__act[b-7up9c63ajf] {
    margin: 8px 0 0;
}

/* ── Hộp xem nguyên văn thư ── */

.bkmail-detail__meta[b-7up9c63ajf] {
    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-7up9c63ajf] {
    flex: 1 1 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
}

.bkmail-detail__to[b-7up9c63ajf],
.bkmail-detail__when[b-7up9c63ajf] {
    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-7up9c63ajf] {
    display: block;
    width: 100%;
    height: 60vh;
    min-height: 320px;
    background: #fff;
    border: 1px solid var(--nm-line);
    border-radius: 8px;
}

.bkmail-source[b-7up9c63ajf] {
    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-7up9c63ajf] {
    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-7up9c63ajf] {
    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-7up9c63ajf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--nm-ink);
}

.bkmail-full__act[b-7up9c63ajf] {
    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-7up9c63ajf] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

.bkmail-full__body .bkmail-detail[b-7up9c63ajf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.bkmail-frame.is-full[b-7up9c63ajf],
.bkmail-source.is-full[b-7up9c63ajf] {
    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-7up9c63ajf],
    .bkmail-item__meta[b-7up9c63ajf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bkmail-subject[b-7up9c63ajf],
    .bkmail-to[b-7up9c63ajf] {
        max-width: 100%;
    }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Common/LanguageSwitcher.razor.rz.scp.css */
/* LanguageSwitcher — Manager Dashboard v4 theme */
.ls-root[b-r4y3b5aigo] {
    --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-r4y3b5aigo] {
    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-r4y3b5aigo] {
        background: var(--d-surface-2);
        color: var(--d-accent);
    }

.ls-flag[b-r4y3b5aigo] {
    font-size: 15px;
    line-height: 1;
}

.ls-code[b-r4y3b5aigo] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 639px) {
    .ls-code[b-r4y3b5aigo] { display: none; }
}

.ls-caret[b-r4y3b5aigo] {
    width: 12px;
    height: 12px;
    opacity: 0.8;
    color: var(--d-ink-3);
}

.ls-backdrop[b-r4y3b5aigo] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.ls-menu[b-r4y3b5aigo] {
    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-r4y3b5aigo] {
    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-r4y3b5aigo] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .ls-item.is-active[b-r4y3b5aigo] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        font-weight: 600;
    }

.ls-item-name[b-r4y3b5aigo] {
    flex: 1;
    text-align: left;
}

.ls-check[b-r4y3b5aigo] {
    width: 14px;
    height: 14px;
    color: var(--d-accent);
    margin-left: auto;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Feedback/ApiErrorAlert.razor.rz.scp.css */
/* ApiErrorAlert — Manager Dashboard v4 theme (warm-neutral) */
.aea-root[b-rh3lmweyvz] {
    --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-rh3lmweyvz] {
        border-color: #fde4c2;
        background: #fffbf3;
    }

    .aea-root.is-info[b-rh3lmweyvz] {
        border-color: #dbeafe;
        background: #f5f9ff;
    }

    .aea-root.is-danger[b-rh3lmweyvz] {
        border-color: #fecaca;
        background: #fff5f5;
    }

.aea-icon[b-rh3lmweyvz] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--d-ink-3);
}

.aea-root.is-warn .aea-icon[b-rh3lmweyvz] {
    color: #d97706;
}

.aea-root.is-info .aea-icon[b-rh3lmweyvz] {
    color: #2563eb;
}

.aea-root.is-danger .aea-icon[b-rh3lmweyvz] {
    color: #dc2626;
}

.aea-body[b-rh3lmweyvz] {
    flex: 1;
    min-width: 0;
}

.aea-title[b-rh3lmweyvz] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

.aea-msg[b-rh3lmweyvz] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
    line-height: 1.45;
}

.aea-close[b-rh3lmweyvz] {
    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-rh3lmweyvz] {
        background: rgba(0, 0, 0, 0.04);
        color: var(--d-ink);
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Feedback/ConfirmDialog.razor.rz.scp.css */
/* ConfirmDialog — Manager Dashboard v4 theme */
.cd-overlay[b-81hovhxqaw] {
    --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;
    /* Hộp xác nhận là cổng chặn cuối của một thao tác ⇒ luôn trên cùng. Từng để 50 nên hỏi từ TRONG
       NmModal/NmDrawer (1000) hay NmDropdown (1100) thì hộp hiện nhưng bị đè, không bấm được. */
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

.cd-panel[b-81hovhxqaw] {
    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-81hovhxqaw] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.cd-icon[b-81hovhxqaw] {
    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-81hovhxqaw] {
        background: #fff1f1;
        border-color: #fecaca;
        color: #dc2626;
    }

    .cd-icon.is-info[b-81hovhxqaw] {
        background: #eef4ff;
        border-color: #dbeafe;
        color: #2563eb;
    }

    .cd-icon.is-warning[b-81hovhxqaw] {
        background: #fef3c7;
        border-color: #fde68a;
        color: #b45309;
    }

.cd-text[b-81hovhxqaw] {
    flex: 1;
    min-width: 0;
}

.cd-title[b-81hovhxqaw] {
    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-81hovhxqaw] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.cd-actions[b-81hovhxqaw] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cd-btn[b-81hovhxqaw] {
    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-81hovhxqaw] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.cd-btn-primary[b-81hovhxqaw] {
    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-81hovhxqaw] {
        background: var(--d-accent-grad-hover);
        color: #ffffff;
    }

.cd-btn-primary.is-danger[b-81hovhxqaw] {
    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-81hovhxqaw] {
        filter: brightness(0.95);
    }

.cd-btn-primary.is-info[b-81hovhxqaw] {
    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-81hovhxqaw] {
        filter: brightness(0.95);
    }

.cd-btn-primary.is-warning[b-81hovhxqaw] {
    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-81hovhxqaw] {
        filter: brightness(0.95);
    }

.cd-btn:disabled[b-81hovhxqaw] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Feedback/Pagination.razor.rz.scp.css */
/* Pagination — Manager Dashboard v4 theme */
.pg-root[b-zg1y2wnj6a] {
    --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-zg1y2wnj6a] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.pg-info[b-zg1y2wnj6a] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

    .pg-info b[b-zg1y2wnj6a] {
        font-weight: 600;
        color: var(--d-ink);
    }

    .pg-info .pg-info-cur[b-zg1y2wnj6a] {
        color: var(--d-accent);
        font-weight: 600;
    }

.pg-controls[b-zg1y2wnj6a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pg-btn[b-zg1y2wnj6a] {
    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-zg1y2wnj6a] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .pg-btn:disabled[b-zg1y2wnj6a] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.pg-num[b-zg1y2wnj6a] {
    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-zg1y2wnj6a] {
        display: inline-flex;
    }
}

    .pg-num:hover:not(.is-current)[b-zg1y2wnj6a] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: var(--d-line);
    }

    .pg-num.is-current[b-zg1y2wnj6a] {
        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-zg1y2wnj6a] {
    display: none;
    padding: 0 6px;
    font-size: 12.5px;
    color: var(--d-ink-4);
}

@media (min-width: 640px) {
    .pg-ellipsis[b-zg1y2wnj6a] {
        display: inline-block;
    }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Feedback/SkeletonLoader.razor.rz.scp.css */
/* SkeletonLoader — Manager Dashboard v4 warm-neutral */
.sk-root[b-vbs528jx4w] {
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-ink-4: #a5abb8;
    --d-r: 12px;
}

.sk-pulse[b-vbs528jx4w] {
    animation: sk-pulse-b-vbs528jx4w 1.4s ease-in-out infinite;
}

@keyframes sk-pulse-b-vbs528jx4w {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Table skeleton */
.sk-table[b-vbs528jx4w] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.sk-thead[b-vbs528jx4w] {
    background: var(--d-surface);
    border-bottom: 1px solid var(--d-line);
    padding: 10px 16px;
    display: flex;
    gap: 16px;
}

    .sk-thead .sk-bar[b-vbs528jx4w] {
        height: 10px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--d-ink-4) 30%, var(--d-surface-2));
        flex: 1;
    }

.sk-trow[b-vbs528jx4w] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
    display: flex;
    gap: 16px;
}

    .sk-trow:last-child[b-vbs528jx4w] {
        border-bottom: 0;
    }

    .sk-trow .sk-bar[b-vbs528jx4w] {
        height: 10px;
        border-radius: 4px;
        background: var(--d-surface-2);
        flex: 1;
    }

/* Cards skeleton */
.sk-cards[b-vbs528jx4w] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .sk-cards.sk-cards-2[b-vbs528jx4w] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sk-cards.sk-cards-3[b-vbs528jx4w] {
        grid-template-columns: repeat(3, 1fr);
    }

    .sk-cards.sk-cards-4[b-vbs528jx4w] {
        grid-template-columns: repeat(4, 1fr);
    }

    .sk-cards.sk-cards-5[b-vbs528jx4w] {
        grid-template-columns: repeat(5, 1fr);
    }

    .sk-cards.sk-cards-6[b-vbs528jx4w] {
        grid-template-columns: repeat(6, 1fr);
    }
}

.sk-card[b-vbs528jx4w] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 16px;
}

    .sk-card .sk-bar[b-vbs528jx4w] {
        height: 10px;
        border-radius: 4px;
        background: var(--d-surface-2);
    }

    .sk-card .sk-bar-strong[b-vbs528jx4w] {
        background: color-mix(in srgb, var(--d-ink-4) 30%, var(--d-surface-2));
    }

    .sk-card .sk-bar + .sk-bar[b-vbs528jx4w] {
        margin-top: 8px;
    }

    .sk-card .sk-bar-w-1-3[b-vbs528jx4w] {
        width: 33%;
    }

    .sk-card .sk-bar-w-1-2[b-vbs528jx4w] {
        width: 50%;
    }

    .sk-card .sk-bar-w-2-3[b-vbs528jx4w] {
        width: 66%;
    }

    .sk-card .sk-bar-h-lg[b-vbs528jx4w] {
        height: 18px;
    }

/* Lines skeleton */
.sk-lines[b-vbs528jx4w] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .sk-lines .sk-bar[b-vbs528jx4w] {
        height: 10px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--d-ink-4) 26%, var(--d-surface-2));
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Feedback/ToastNotification.razor.rz.scp.css */
/* ToastNotification — Manager Dashboard v4 theme */
.tn-stack[b-db26vaefqb] {
    --d-surface: #ffffff;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-r: 12px;

    /* Tầng + mép trên do từng site đặt qua biến (mặc định giữ như cũ cho Ngọc Mai).
       Vitamin Go có header dính z 900 và hộp xác nhận 1400 — z 100 cứng làm toast nằm DƯỚI header,
       nên site đó đặt --nm-toast-z / --nm-toast-top ở Styles/tokens.css. */
    position: fixed;
    top: var(--nm-toast-top, 16px);
    right: 16px;
    z-index: var(--nm-toast-z, 100);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.tn-item[b-db26vaefqb] {
    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-db26vaefqb .18s ease-out both;
    color: var(--d-ink-2);
}

    .tn-item.is-success[b-db26vaefqb] {
        border-color: #bbf7d0;
    }

    .tn-item.is-error[b-db26vaefqb] {
        border-color: #fecaca;
    }

    .tn-item.is-warning[b-db26vaefqb] {
        border-color: #ffe0c7;
    }

    .tn-item.is-info[b-db26vaefqb] {
        border-color: #dbeafe;
    }

.tn-ico[b-db26vaefqb] {
    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-db26vaefqb] {
        background: #dcfce7;
        color: #15803d;
    }

    .tn-ico.is-error[b-db26vaefqb] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .tn-ico.is-warning[b-db26vaefqb] {
        background: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
        color: #d97706;
    }

    .tn-ico.is-info[b-db26vaefqb] {
        background: #dbeafe;
        color: #1d4ed8;
    }

.tn-body[b-db26vaefqb] {
    flex: 1;
    min-width: 0;
}

.tn-title[b-db26vaefqb] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.01em;
}

.tn-msg[b-db26vaefqb] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    line-height: 1.45;
}

.tn-close[b-db26vaefqb] {
    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-db26vaefqb] {
        background: rgba(0, 0, 0, 0.04);
        color: var(--d-ink);
    }

@keyframes tn-fade-in-b-db26vaefqb {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/NGOCMAI.B2E.FE.UI/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-7txa18jq02] {
    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-7txa18jq02] {
        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-7txa18jq02] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 0;
    line-height: 1.35;
}

.fcc-lbl[b-7txa18jq02] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.fcc-val[b-7txa18jq02] {
    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-7txa18jq02] {
    color: #15803d;
}

.fcc-val.muted[b-7txa18jq02] {
    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-7txa18jq02] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fcc-badge[b-7txa18jq02] {
    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-7txa18jq02] {
        background: #dcfce7;
        color: #15803d;
    }

    .fcc-badge.no[b-7txa18jq02] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .fcc-badge.unknown[b-7txa18jq02] {
        background: #f1f5f9;
        color: #475569;
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FareConditionsPanel.razor.rz.scp.css */
.fcp-root[b-01lthz7yzl] {
    background: #fff8f2;
    border: 1px solid #ffe0c7;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.825rem;
    color: #1f2937;
}

.fcp-header[b-01lthz7yzl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.fcp-title[b-01lthz7yzl] {
    margin: 0 0 0.125rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e85f00;
}

.fcp-effective[b-01lthz7yzl] {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.fcp-table-wrap[b-01lthz7yzl] {
    overflow-x: auto;
    border: 1px solid #ffe0c7;
    border-radius: 0.5rem;
    background: white;
}

.fcp-table[b-01lthz7yzl] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.fcp-table th[b-01lthz7yzl],
.fcp-table td[b-01lthz7yzl] {
    border: 1px solid #fde4cf;
    padding: 0.5rem 0.625rem;
    vertical-align: top;
    text-align: left;
}

.fcp-group-cell[b-01lthz7yzl] {
    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-01lthz7yzl] {
    background: #fff8f2;
    color: #c2540a;
    font-weight: 600;
    white-space: nowrap;
    text-align: center !important;
}

.fcp-col-header.is-highlighted[b-01lthz7yzl] {
    background: #ffb482;
    color: #7c2d12;
    box-shadow: inset 0 -3px 0 #ff6b00;
}

.fcp-fare-codes[b-01lthz7yzl] {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: #e85f00;
    margin-top: 0.125rem;
}

.fcp-row-header[b-01lthz7yzl] {
    background: #fff8f2;
}

.fcp-row-group[b-01lthz7yzl] {
    background: #fff8f2;
    font-weight: 600;
    color: #c2540a;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.fcp-row-label[b-01lthz7yzl] {
    background: #fffbf6;
    font-weight: 500;
    width: 220px;
    color: #374151;
}

.fcp-cell[b-01lthz7yzl] {
    text-align: center;
}

.fcp-cell.is-highlighted[b-01lthz7yzl] {
    background: #fff8f2;
    font-weight: 600;
    color: #c2540a;
}

/* ── Chế độ Tắt (preview admin) ── */
.fcp-hidden-note[b-01lthz7yzl] {
    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-01lthz7yzl] {
    color: #94a3b8;
    flex-shrink: 0;
}

.fcp-hidden-note b[b-01lthz7yzl] {
    color: #b91c1c;
}

/* ── Chế độ Tóm tắt ── */
.fcp-summary[b-01lthz7yzl] {
    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-01lthz7yzl] {
    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-01lthz7yzl] {
    border-bottom: none;
}

.fcp-sum-lbl[b-01lthz7yzl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    color: #374151;
}

.fcp-sum-ic[b-01lthz7yzl] {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    flex-shrink: 0;
}

.fcp-sum-val[b-01lthz7yzl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
    color: #1f2937;
    font-weight: 500;
}

.fcp-sum-detail[b-01lthz7yzl] {
    font-size: 0.72rem;
    font-weight: 400;
    color: #6b7280;
}

.fcp-badge[b-01lthz7yzl] {
    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-01lthz7yzl] {
    background: #dcfce7;
    color: #15803d;
}

.fcp-badge.no[b-01lthz7yzl] {
    background: #fee2e2;
    color: #b91c1c;
}

.fcp-badge.unknown[b-01lthz7yzl] {
    background: #f1f5f9;
    color: #475569;
}

.fcp-notes[b-01lthz7yzl] {
    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-01lthz7yzl] {
    color: #c2540a;
}

.fcp-loading[b-01lthz7yzl],
.fcp-empty[b-01lthz7yzl],
.fcp-error[b-01lthz7yzl] {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
}

.fcp-error[b-01lthz7yzl] {
    color: #dc2626;
}

.fcp-spinner[b-01lthz7yzl] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #ffe0c7;
    border-top-color: #ff6b00;
    border-radius: 50%;
    animation: fcp-spin-b-01lthz7yzl 0.8s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@keyframes fcp-spin-b-01lthz7yzl {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .fcp-table[b-01lthz7yzl] { font-size: 0.7rem; }
    .fcp-table th[b-01lthz7yzl], .fcp-table td[b-01lthz7yzl] { padding: 0.375rem 0.5rem; }
    .fcp-row-label[b-01lthz7yzl] { width: 140px; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightBookingStepper.razor.rz.scp.css */
/* FlightBookingStepper — Manager Dashboard v4 theme */
.fbs-root[b-nkbpy1ayy1] {
    --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-nkbpy1ayy1] { padding: 0 16px; }
}

.fbs-track[b-nkbpy1ayy1] {
    display: flex;
    align-items: stretch;
    max-width: 720px;
    margin: 0 auto;
    height: 32px;
}

@media (min-width: 640px) {
    .fbs-track[b-nkbpy1ayy1] { height: 36px; }
}

.fbs-cell[b-nkbpy1ayy1] {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.fbs-cell + .fbs-cell[b-nkbpy1ayy1] { margin-left: -8px; }

.fbs-chip[b-nkbpy1ayy1] {
    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-nkbpy1ayy1] {
    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-nkbpy1ayy1] {
    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-nkbpy1ayy1] {
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
    padding-left: 22px;
}

.fbs-cell.is-only .fbs-chip[b-nkbpy1ayy1] { clip-path: none; }

/* Pending — neutral warm */
.fbs-cell.is-pending .fbs-chip[b-nkbpy1ayy1] {
    background: var(--d-surface-2);
    color: var(--d-ink-4);
}

.fbs-cell.is-pending .fbs-num[b-nkbpy1ayy1] {
    background: var(--d-line);
    color: var(--d-ink-4);
}

/* Done — soft accent */
.fbs-cell.is-done .fbs-chip[b-nkbpy1ayy1] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
}

.fbs-cell.is-done .fbs-num[b-nkbpy1ayy1] {
    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-nkbpy1ayy1] {
    position: relative;
    z-index: 2;
}

.fbs-cell.is-active .fbs-chip[b-nkbpy1ayy1] {
    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-nkbpy1ayy1] {
    background: #fff;
    color: var(--d-accent);
}

.fbs-cell.is-active .fbs-lbl[b-nkbpy1ayy1] {
    font-weight: 700;
}

.fbs-num[b-nkbpy1ayy1] {
    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-nkbpy1ayy1] {
    width: 12px;
    height: 12px;
}

@media (min-width: 640px) {
    .fbs-num[b-nkbpy1ayy1] { width: 20px; height: 20px; font-size: 11px; }
}

.fbs-lbl[b-nkbpy1ayy1] {
    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-nkbpy1ayy1] { font-size: 11.5px; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightConfirmation.razor.rz.scp.css */
/* FlightConfirmation — Manager Dashboard v4 theme */
.fcfm-root[b-b3y6n5of9k] {
    --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-b3y6n5of9k] {
    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-b3y6n5of9k] {
    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-b3y6n5of9k] { width: 32px; height: 32px; }

.fcfm-title[b-b3y6n5of9k] {
    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-b3y6n5of9k] { font-size: 26px; }
}

.fcfm-sub[b-b3y6n5of9k] {
    color: var(--d-ink-3);
    font-size: 14px;
    margin: 0 0 16px;
}

.fcfm-codes[b-b3y6n5of9k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

@media (min-width: 640px) {
    .fcfm-codes[b-b3y6n5of9k] { flex-direction: row; gap: 28px; }
}

.fcfm-code-lbl[b-b3y6n5of9k] {
    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-b3y6n5of9k] {
    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-b3y6n5of9k] {
    font-size: 24px;
    color: var(--d-accent);
}

/* Card */
.dash-card[b-b3y6n5of9k] {
    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-b3y6n5of9k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

    .dash-card-hd h3[b-b3y6n5of9k] {
        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-b3y6n5of9k] {
    list-style: none;
    margin: 0;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .fcfm-info-list li[b-b3y6n5of9k] {
        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-b3y6n5of9k] {
        width: 16px;
        height: 16px;
        color: var(--d-accent);
        margin-top: 2px;
        flex-shrink: 0;
    }

/* Buttons */
.dash-btn[b-b3y6n5of9k] {
    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-b3y6n5of9k] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        text-decoration: none;
    }

    .dash-btn svg[b-b3y6n5of9k] {
        width: 16px;
        height: 16px;
    }

.dash-btn-accent[b-b3y6n5of9k] {
    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-b3y6n5of9k] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.fcfm-actions[b-b3y6n5of9k] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightFilterPanel.razor.rz.scp.css */
/* FlightFilterPanel — Manager Dashboard v4 theme */
.ffp-root[b-g0jpijldeb] {
    --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-g0jpijldeb] { display: flex; flex-direction: column; }

.ffp-h[b-g0jpijldeb] {
    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-g0jpijldeb] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* Segmented (sort) */
.ffp-segmented[b-g0jpijldeb] {
    display: flex;
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    padding: 3px;
    gap: 2px;
}

.ffp-seg[b-g0jpijldeb] {
    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-g0jpijldeb] { color: var(--d-ink); }

    .ffp-seg.is-active[b-g0jpijldeb] {
        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-g0jpijldeb] {
    width: 9px;
    height: 6px;
    color: var(--d-accent);
    transition: transform .2s;
}

    .ffp-seg-arrow.is-desc[b-g0jpijldeb] { transform: rotate(180deg); }

/* Range slider */
.ffp-range-wrap[b-g0jpijldeb] { position: relative; height: 28px; margin: 4px 0; }

.ffp-range-track[b-g0jpijldeb] {
    position: absolute;
    top: 12px; left: 0; right: 0;
    height: 4px;
    background: var(--d-line);
    border-radius: 9999px;
    pointer-events: none;
}

.ffp-range-fill[b-g0jpijldeb] {
    position: absolute;
    top: 12px;
    height: 4px;
    background: var(--d-accent-grad);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 1;
}

.ffp-range-input[b-g0jpijldeb] {
    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-g0jpijldeb] { z-index: 4; }

.ffp-range-input[b-g0jpijldeb]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: 0;
}

.ffp-range-input[b-g0jpijldeb]::-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-g0jpijldeb]::-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-g0jpijldeb]::-moz-range-track { height: 4px; background: transparent; border: 0; }

.ffp-range-input[b-g0jpijldeb]::-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-g0jpijldeb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}

.ffp-pill-accent[b-g0jpijldeb] {
    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-g0jpijldeb] {
    flex: 1;
    border-top: 1px dashed var(--d-line);
}

.ffp-range-bounds[b-g0jpijldeb] {
    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-g0jpijldeb] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ffp-airline-row[b-g0jpijldeb] {
    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-g0jpijldeb] { background: var(--d-surface-2); }

    .ffp-airline-row.is-checked[b-g0jpijldeb] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 30%, transparent);
    }

.ffp-checkbox[b-g0jpijldeb] {
    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-g0jpijldeb] {
        background: var(--d-accent);
        border-color: var(--d-accent);
    }

    .ffp-checkbox svg[b-g0jpijldeb] {
        width: 10px; height: 10px;
        color: #fff;
    }

.ffp-airline-logo[b-g0jpijldeb] { 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-g0jpijldeb] {
    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-g0jpijldeb] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ffp-airline-name[b-g0jpijldeb] {
    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-g0jpijldeb] {
    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-g0jpijldeb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ffp-time[b-g0jpijldeb] {
    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-g0jpijldeb] {
        background: var(--d-surface-2);
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
    }

    .ffp-time svg[b-g0jpijldeb] {
        width: 16px; height: 16px;
        color: var(--d-ink-4);
    }

    .ffp-time.is-active[b-g0jpijldeb] {
        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-g0jpijldeb] { color: var(--d-accent); }

.ffp-time-lbl[b-g0jpijldeb] {
    font-size: 10px;
    font-weight: 600;
    color: var(--d-ink-2);
}

.ffp-time.is-active .ffp-time-lbl[b-g0jpijldeb] { color: var(--d-accent); }

.ffp-time-cnt[b-g0jpijldeb] {
    font-size: 9px;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

.ffp-time.is-active .ffp-time-cnt[b-g0jpijldeb] {
    color: var(--d-accent);
    font-weight: 600;
}

/* Stops */
.ffp-stops[b-g0jpijldeb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ffp-chip[b-g0jpijldeb] {
    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-g0jpijldeb] {
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
    }

    .ffp-chip.is-active[b-g0jpijldeb] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 40%, transparent);
        color: var(--d-accent);
    }

.ffp-chip-cnt[b-g0jpijldeb] {
    font-size: 10px;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

.ffp-chip.is-active .ffp-chip-cnt[b-g0jpijldeb] {
    color: color-mix(in srgb, var(--d-accent) 80%, var(--d-ink-3));
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightFlowShell.razor.rz.scp.css */
/* FlightFlowShell — vỏ chung 4 trang đặt vé khách lẻ (Manager Dashboard v4 theme).
   Gộp từ 4 tệp gần trùng nhau: .defr- (kết quả) · .defp- (hành khách) · .defpay- (thanh toán)
   · .defc- (xác nhận) bên NM, và .vtgfl__ bên Vitamin Go.

   Một bản duy nhất trong 1.NGOCMAI.B2E.FE.UI, cả hai web dùng chung. */

.ffs-root[b-je2iwgs5n0] {
    /* Palette cool-slate + accent cam, đồng bộ với vùng nội dung vé (FlightSearchResults /
       PassengerForm / PaymentStep / Confirmation) để cả luồng đặt vé 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-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-r: 12px;

    color: var(--d-ink);
    max-width: 1280px;
    margin: 0 auto;
    position: relative;

    /* --ffs-hdr / --ffs-hdr-sm: chỗ chừa cho header của SITE, không phải của trang.
       Mặc định là header cố định của ngocmaitravel.vn; Vitamin Go (layout đã có spacer)
       đặt lại hai biến này trong Styles/app.css. */
    padding: var(--ffs-hdr, 5.25rem) 1rem var(--ffs-pb, 1rem);
}

@media (min-width: 640px) {
    .ffs-root[b-je2iwgs5n0] {
        padding: var(--ffs-hdr-sm, 6rem) 1.75rem var(--ffs-pb, 1rem);
    }
}

/* Trang kết quả: đệm ngang nhỏ hơn trên điện thoại để nhường tối đa bề ngang cho thẻ chuyến bay. */
.ffs-root--results[b-je2iwgs5n0] {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

@media (min-width: 640px) {
    .ffs-root--results[b-je2iwgs5n0] {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/* Hai trang cuối không có thẻ header nổi nên bắt đầu thấp hơn một nhịp và thở rộng hơn. */
.ffs-root--payment[b-je2iwgs5n0],
.ffs-root--confirmation[b-je2iwgs5n0] {
    padding-top: calc(var(--ffs-hdr, 5.25rem) + 0.75rem);
    padding-bottom: calc(var(--ffs-pb, 1rem) + 0.25rem);
}

@media (min-width: 640px) {
    .ffs-root--payment[b-je2iwgs5n0],
    .ffs-root--confirmation[b-je2iwgs5n0] {
        padding-top: calc(var(--ffs-hdr-sm, 6rem) + 1rem);
    }
}

.ffs-stack[b-je2iwgs5n0] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ffs-root--payment .ffs-stack[b-je2iwgs5n0],
.ffs-root--confirmation .ffs-stack[b-je2iwgs5n0] {
    gap: 1.25rem;
}

/* ── Thẻ header nổi (kết quả + hành khách) ─────────────────────────────── */
.ffs-head[b-je2iwgs5n0] {
    position: relative;
    background: var(--d-surface);
    /* Không viền — chỉ đổ bóng để nổi, đồng bộ với thẻ kết quả bên dưới. */
    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;
}

.ffs-steps[b-je2iwgs5n0] {
    margin: 9px 0 0;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.ffs-hero[b-je2iwgs5n0] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--d-line);
}

.ffs-hero-title[b-je2iwgs5n0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ffs-hero-ico[b-je2iwgs5n0] {
    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);
}

    .ffs-hero-ico svg[b-je2iwgs5n0] {
        width: 16px;
        height: 16px;
    }

.ffs-hero h1[b-je2iwgs5n0] {
    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;
}

.ffs-hero-sub[b-je2iwgs5n0] {
    margin: 1px 0 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.ffs-hero-actions[b-je2iwgs5n0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hero trần của hai trang cuối: chữ to hơn, icon to hơn, phụ đề luôn hiện. */
.ffs-root--payment .ffs-hero[b-je2iwgs5n0],
.ffs-root--confirmation .ffs-hero[b-je2iwgs5n0] {
    align-items: end;
    gap: 16px;
    padding-bottom: 14px;
}

.ffs-root--payment .ffs-hero-ico[b-je2iwgs5n0],
.ffs-root--confirmation .ffs-hero-ico[b-je2iwgs5n0] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

    .ffs-root--payment .ffs-hero-ico svg[b-je2iwgs5n0],
    .ffs-root--confirmation .ffs-hero-ico svg[b-je2iwgs5n0] {
        width: 20px;
        height: 20px;
    }

.ffs-root--payment .ffs-hero h1[b-je2iwgs5n0],
.ffs-root--confirmation .ffs-hero h1[b-je2iwgs5n0] {
    font-size: 24px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.ffs-root--payment .ffs-hero-sub[b-je2iwgs5n0],
.ffs-root--confirmation .ffs-hero-sub[b-je2iwgs5n0] {
    margin: 4px 0 0;
    font-size: 12.5px;
}

/* ── Nút ở góc phải hero (nội dung do TRANG truyền vào ⇒ phải ::deep) ───── */
.ffs-hero-actions[b-je2iwgs5n0]  .ffs-btn {
    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;
}

    .ffs-hero-actions[b-je2iwgs5n0]  .ffs-btn:hover {
        background: var(--d-surface-2);
        text-decoration: none;
        color: var(--d-ink);
    }

    .ffs-hero-actions[b-je2iwgs5n0]  .ffs-btn svg {
        width: 14px;
        height: 14px;
    }

/* ── Điện thoại ────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    /* Hai trang đầu: phụ đề nhường chỗ cho tiêu đề + nút. */
    .ffs-root--results .ffs-hero-sub[b-je2iwgs5n0],
    .ffs-root--passengers .ffs-hero-sub[b-je2iwgs5n0] {
        display: none;
    }

    /* Tiêu đề trang hành khách dài hơn — thu lại cho vừa đúng 1 dòng. */
    .ffs-root--passengers .ffs-hero h1[b-je2iwgs5n0] {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ffs-root--passengers .ffs-hero[b-je2iwgs5n0] {
        gap: 8px;
    }

    .ffs-root--passengers .ffs-hero-title[b-je2iwgs5n0] {
        gap: 8px;
    }

    .ffs-root--passengers .ffs-hero-ico[b-je2iwgs5n0] {
        width: 28px;
        height: 28px;
    }

        .ffs-root--passengers .ffs-hero-ico svg[b-je2iwgs5n0] {
            width: 14px;
            height: 14px;
        }

    .ffs-root--passengers .ffs-hero-actions[b-je2iwgs5n0]  .ffs-btn {
        height: 32px;
        padding: 0 10px;
        gap: 6px;
    }
}

/* ── Vùng nội dung ─────────────────────────────────────────────────────── */
.ffs-card[b-je2iwgs5n0] {
    background: transparent;
    padding: 0;
}

/* Thông báo khi trang không dựng được nội dung (thiếu tham số tìm kiếm chẳng hạn).
   Nội dung do TRANG truyền vào nên phải ::deep. Trước đây trang kết quả của NM quay
   vòng tròn chờ VĨNH VIỄN trong trường hợp này — không có lượt tải nào để chờ cả. */
.ffs-card[b-je2iwgs5n0]  .ffs-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 16px;
    text-align: center;
    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);
}

    .ffs-card[b-je2iwgs5n0]  .ffs-notice p {
        margin: 0;
        font-size: 14px;
        color: var(--d-ink-2);
    }

    .ffs-card[b-je2iwgs5n0]  .ffs-notice .ffs-btn {
        height: 38px;
        padding: 0 16px;
        border-radius: var(--d-r);
        border: 0;
        background: var(--d-accent-grad);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        text-decoration: none;
    }

        .ffs-card[b-je2iwgs5n0]  .ffs-notice .ffs-btn:hover {
            background: var(--d-accent-grad-hover);
            color: #fff;
            text-decoration: none;
        }
/* _content/NGOCMAI.B2E.FE.UI/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-dpq4vyp5p1] {
    --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-dpq4vyp5p1] {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    opacity: .34;
    pointer-events: none;
    user-select: none;
    animation: fh-drift-b-dpq4vyp5p1 22s ease-in-out infinite alternate;
}

@keyframes fh-drift-b-dpq4vyp5p1 {
    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-dpq4vyp5p1]::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-dpq4vyp5p1 7s ease-in-out infinite;
}

@keyframes fh-sheen-b-dpq4vyp5p1 {
    0%, 62% { transform: translateX(-160%) skewX(-14deg); }
    82%, 100% { transform: translateX(320%) skewX(-14deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fh-petals[b-dpq4vyp5p1],
    .fh-hero[b-dpq4vyp5p1]::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-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
    fill: rgba(255, 246, 234, .12);
}

.fh-wave-line path[b-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
    stroke-width: 3;
    opacity: .78;
}

.fh-wave-foam circle[b-dpq4vyp5p1] {
    fill: var(--ire-cream);
    opacity: .75;
}

.fh-lead[b-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
    transform: rotate(0deg) scale(1.08);
}

.fh-mark[b-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
    min-width: 0;
}

.fh-hero h1[b-dpq4vyp5p1] {
    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-dpq4vyp5p1]::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-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
        padding: 9px 24px;
    }

    .fh-seal[b-dpq4vyp5p1] {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .fh-mark[b-dpq4vyp5p1] {
        font-size: 19px;
    }

    .fh-hero h1[b-dpq4vyp5p1] {
        font-size: 24px;
    }

    .fh-sub[b-dpq4vyp5p1] {
        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-dpq4vyp5p1] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fh-btn[b-dpq4vyp5p1] {
    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-dpq4vyp5p1] {
    transition: transform .16s ease;
}

.fh-btn:hover[b-dpq4vyp5p1] {
    background: var(--ire-cream);
    border-color: var(--ire-cream);
    color: var(--ire-orange-dk);
    text-decoration: none;
}

.fh-btn:hover svg[b-dpq4vyp5p1] {
    transform: translateX(-3px);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightPassengerForm.razor.rz.scp.css */
/* FlightPassengerForm — Manager Dashboard v4 theme tokens */
.fpf-root[b-vawoe9hdv4] {
    --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. (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-vawoe9hdv4] {
    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 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-vawoe9hdv4] {
    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 vì card không dùng overflow:hidden */
    border-top-left-radius: var(--d-r);
    border-top-right-radius: var(--d-r);
}
.fpf-card-hd h3[b-vawoe9hdv4] {
    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 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-vawoe9hdv4] {
    --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-vawoe9hdv4] { --pax-c: #2563eb; --pax-tint: #eef3ff; }
.fpf-pax-hd.infant[b-vawoe9hdv4] { --pax-c: #7c3aed; --pax-tint: #f5f0ff; }
.fpf-card-bd[b-vawoe9hdv4] {
    padding: 14px 16px;
}

/* ---------- Accent icon (small inline svg) ---------- */
.fpf-ico-accent[b-vawoe9hdv4] { color: var(--d-accent); width: 1rem; height: 1rem; flex-shrink: 0; }
.fpf-ico-accent-sm[b-vawoe9hdv4] { 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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    background: var(--d-accent-grad);
    box-shadow: 0 3px 8px -3px rgba(255, 107, 0, 0.65);
}
.fpf-pax-badge.child[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 3px 8px -3px rgba(124, 58, 237, 0.6);
}

/* ---------- Buttons ---------- */
.fpf-btn[b-vawoe9hdv4] {
    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-vawoe9hdv4] { background: var(--d-surface-2); }
.fpf-btn:disabled[b-vawoe9hdv4] { 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-vawoe9hdv4] { transform: translateY(1px); }

.fpf-btn-accent[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    background: var(--d-accent-grad-hover);
    box-shadow: 0 9px 22px -6px rgba(255, 107, 0, 0.55);
}
.fpf-btn-accent:disabled[b-vawoe9hdv4] { opacity: 0.55; box-shadow: none; }

.fpf-btn-ghost[b-vawoe9hdv4] {
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
}
.fpf-btn-ghost:hover[b-vawoe9hdv4] { background: var(--d-line-2); }

.fpf-btn-lg[b-vawoe9hdv4] { height: 44px; font-size: 14px; }

/* ---------- Skeleton primary tile ---------- */
.fpf-skeleton-accent[b-vawoe9hdv4] {
    background: var(--d-accent-grad-soft);
    border-radius: var(--d-r);
}
.fpf-skeleton-circle-accent[b-vawoe9hdv4] {
    background: var(--d-accent-grad-soft);
    border-radius: 9999px;
}
.fpf-spinner-accent[b-vawoe9hdv4] { color: var(--d-accent); }

/* ---------- Banners ---------- */
.fpf-banner[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] { color: var(--d-good); }

.fpf-banner-danger[b-vawoe9hdv4] {
    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-vawoe9hdv4] { color: var(--d-danger); }

.fpf-banner-ico[b-vawoe9hdv4] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* ---------- Eyebrow / uppercase mini-title ---------- */
.fpf-eyebrow[b-vawoe9hdv4] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
}
.fpf-eyebrow.accent[b-vawoe9hdv4] { color: var(--d-accent); }
.fpf-eyebrow.cool[b-vawoe9hdv4] { color: #1d4ed8; }

/* ---------- Total / sidebar grand total band ---------- */
.fpf-total-band[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink-2);
}
.fpf-total-band-value[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4 180ms ease-out;
}
@keyframes fpf-ov-in-b-vawoe9hdv4 { from { opacity: 0; } to { opacity: 1; } }

.fpf-ov-card[b-vawoe9hdv4] {
    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-vawoe9hdv4 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fpf-ov-rise-b-vawoe9hdv4 {
    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-vawoe9hdv4] {
    height: 3px;
    flex-shrink: 0;
    background: var(--d-line-2);
    overflow: hidden;
}
.fpf-ov-beam span[b-vawoe9hdv4] {
    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-vawoe9hdv4 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes fpf-ov-beam-b-vawoe9hdv4 {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(355%); }
}

/* ---------- Overlay header ---------- */
.fpf-ov-hd[b-vawoe9hdv4] {
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
    padding: 20px 22px 16px;
}
.fpf-ov-orb[b-vawoe9hdv4] {
    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-vawoe9hdv4] { 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-vawoe9hdv4]::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-vawoe9hdv4 0.9s linear infinite;
}
@keyframes fpf-ov-spin-b-vawoe9hdv4 { to { transform: rotate(360deg); } }

.fpf-ov-hd-tx[b-vawoe9hdv4] { min-width: 0; }
.fpf-ov-hd-tx h3[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--d-ink-3);
    margin: 3px 0 0;
}

.fpf-ov-bd[b-vawoe9hdv4] { padding: 0 22px 4px; overflow-y: auto; }

/* ---------- Chặng bay (thẻ kiểu cuống vé) ---------- */
.fpf-ov-leg[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] { color: #1d4ed8; background: #e8efff; }
.fpf-ov-logo[b-vawoe9hdv4] { height: 16px; width: auto; flex-shrink: 0; margin-left: 2px; }
.fpf-ov-air[b-vawoe9hdv4] {
    font-size: 12px; font-weight: 600;
    color: var(--d-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpf-ov-fno[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 10px;
}
.fpf-ov-pt b[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] { text-align: right; }

.fpf-ov-path[b-vawoe9hdv4] {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px;
    min-width: 0;
}
.fpf-ov-path em[b-vawoe9hdv4] {
    font-style: normal;
    font-size: 11px; font-weight: 600;
    color: var(--d-ink-2);
}
.fpf-ov-path > span[b-vawoe9hdv4] {
    font-size: 10.5px;
    color: var(--d-ink-4);
}
.fpf-ov-line[b-vawoe9hdv4] {
    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-vawoe9hdv4]::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-vawoe9hdv4 2.6s ease-in-out infinite;
}
@keyframes fpf-ov-travel-b-vawoe9hdv4 {
    0%   { left: 0; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.fpf-ov-date[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    padding: 10px 2px 12px;
}
.fpf-ov-sum-i[b-vawoe9hdv4] {
    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-vawoe9hdv4] { width: 14px; height: 14px; color: var(--d-ink-4); }
.fpf-ov-dot[b-vawoe9hdv4] {
    width: 3px; height: 3px;
    border-radius: 9999px;
    background: var(--d-ink-4);
}
.fpf-ov-sum-money[b-vawoe9hdv4] {
    margin-left: auto;
    display: inline-flex; align-items: baseline; gap: 6px;
}
.fpf-ov-sum-money em[b-vawoe9hdv4] {
    font-style: normal;
    font-size: 11px;
    color: var(--d-ink-3);
}
.fpf-ov-sum-money b[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    list-style: none;
    margin: 0;
    padding: 12px 0 4px;
    border-top: 1px solid var(--d-line);
}
.fpf-ov-steps li[b-vawoe9hdv4] {
    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-vawoe9hdv4]::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-vawoe9hdv4]::before { background: color-mix(in srgb, var(--d-accent) 40%, var(--d-line)); }

.fpf-ov-stepdot[b-vawoe9hdv4] {
    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-vawoe9hdv4] { width: 10px; height: 10px; }
.is-done .fpf-ov-stepdot[b-vawoe9hdv4] { background: var(--d-accent); border-color: var(--d-accent); }
.is-active .fpf-ov-stepdot[b-vawoe9hdv4] {
    background: var(--d-surface);
    border-color: var(--d-accent);
    animation: fpf-ov-pulse-b-vawoe9hdv4 1.5s ease-out infinite;
}
@keyframes fpf-ov-pulse-b-vawoe9hdv4 {
    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-vawoe9hdv4] {
    font-size: 12.5px;
    color: var(--d-ink-4);
    transition: color 160ms ease;
}
.is-done .fpf-ov-steptx[b-vawoe9hdv4] { color: var(--d-ink-3); }
.is-active .fpf-ov-steptx[b-vawoe9hdv4] { color: var(--d-ink); font-weight: 600; }

/* ---------- Footer: thời gian chờ ---------- */
.fpf-ov-ft[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    margin-left: auto;
    text-align: right;
    color: var(--d-ink-4);
}
.fpf-ov-timer[b-vawoe9hdv4] {
    font-weight: 700;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .fpf-ov-hd[b-vawoe9hdv4] { padding: 16px 16px 12px; gap: 11px; }
    .fpf-ov-orb[b-vawoe9hdv4] { width: 38px; height: 38px; }
    .fpf-ov-orb svg[b-vawoe9hdv4] { width: 19px; height: 19px; }
    .fpf-ov-hd-tx h3[b-vawoe9hdv4] { font-size: 15.5px; }
    .fpf-ov-bd[b-vawoe9hdv4] { padding: 0 16px 4px; }
    .fpf-ov-ft[b-vawoe9hdv4] { padding: 10px 16px; }
    .fpf-ov-pt b[b-vawoe9hdv4] { font-size: 17px; }
    .fpf-ov-sum-money[b-vawoe9hdv4] { margin-left: 0; width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .fpf-overlay[b-vawoe9hdv4], .fpf-ov-card[b-vawoe9hdv4], .fpf-overlay-card[b-vawoe9hdv4] { animation: none; }
    .fpf-ov-line[b-vawoe9hdv4]::after, .fpf-ov-orb[b-vawoe9hdv4]::before, .fpf-ov-beam span[b-vawoe9hdv4] { animation-duration: 0s; }
    .fpf-ov-orb[b-vawoe9hdv4]::before { border-top-color: transparent; }
    .fpf-ov-beam span[b-vawoe9hdv4] { width: 100%; }
    .is-active .fpf-ov-stepdot[b-vawoe9hdv4] { animation: none; }
}

/* ---------- Modal chặn dùng chung: "chưa chọn chuyến" + "đặt vé không thành công" ----------
   Bẫy: markup gọi .fpf-overlay-card, khác .fpf-ov-card (thẻ overlay lúc đang lưu); thiếu luật này
   thì hộp thoại mất nền / mất bo / mất max-width → chữ và 2 nút tràn kín chiều ngang màn hình. */
.fpf-overlay-card[b-vawoe9hdv4] {
    position: relative;
    width: 100%; max-width: 30rem;
    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-vawoe9hdv4 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Thông báo dài (VD: liệt kê nhiều khách đã có chỗ) thì phần chữ tự cuộn, cụm nút luôn nhìn thấy */
.fpf-overlay-card .fpf-alert-body[b-vawoe9hdv4] { min-height: 0; overflow-y: auto; }
.fpf-overlay-card .fpf-alert-body p[b-vawoe9hdv4] { overflow-wrap: anywhere; }
.fpf-overlay-card .fpf-alert-actions[b-vawoe9hdv4] { flex-shrink: 0; }

/* ---------- Error modal ---------- */
.fpf-error-icon-wrap[b-vawoe9hdv4] {
    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-vawoe9hdv4] { color: var(--d-danger); width: 28px; height: 28px; }

/* ---------- Sidebar collapsible header ---------- */
.fpf-sidebar-toggle[b-vawoe9hdv4] {
    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-vawoe9hdv4] { background: var(--d-line-2); }
.fpf-sidebar-toggle h3[b-vawoe9hdv4] {
    font-size: 14px; font-weight: 600;
    color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0;
}
.fpf-chev[b-vawoe9hdv4] { width: 1rem; height: 1rem; color: var(--d-ink-4); transition: transform .2s ease; }
.fpf-chev.open[b-vawoe9hdv4] { transform: rotate(180deg); }

/* ---------- Inputs (basic theming for native controls inside form) ---------- */
.fpf-root input[type="text"][b-vawoe9hdv4],
.fpf-root input[type="email"][b-vawoe9hdv4],
.fpf-root input[type="tel"][b-vawoe9hdv4],
.fpf-root select[b-vawoe9hdv4] {
    background: var(--d-surface);
}
.fpf-root input[type="text"]:focus[b-vawoe9hdv4],
.fpf-root input[type="email"]:focus[b-vawoe9hdv4],
.fpf-root input[type="tel"]:focus[b-vawoe9hdv4],
.fpf-root select:focus[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.fpf-err[b-vawoe9hdv4] {
    font-size: 10.5px;
    color: var(--d-danger);
    margin: 3px 0 0;
}
.fpf-input[b-vawoe9hdv4] {
    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. */
    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-vawoe9hdv4] { border-color: #b8bec9; }
/* Focus đồng bộ toàn form theo đúng hệ DateMaskInput (viền accent + ring mềm 3px) —
   thiếu luật này thì .fpf-input 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-vawoe9hdv4] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.fpf-input.is-err[b-vawoe9hdv4] { border-color: var(--d-danger); }
.fpf-input.is-err:focus[b-vawoe9hdv4] { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.fpf-input--sm[b-vawoe9hdv4] { 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-vawoe9hdv4]  .dmi-root .dmi-input {
    border-radius: 8px;
    border-color: var(--d-line-input);
}
.fpf-root[b-vawoe9hdv4]  .dmi-root .dmi-input:hover:not(:focus):not(.is-invalid) { border-color: #b8bec9; }
.fpf-root[b-vawoe9hdv4]  .dmi-root .dmi-input:focus { border-color: var(--d-accent); }
.fpf-root[b-vawoe9hdv4]  .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.
   (Ô hành lý không có addon IATA: chặng bay 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-vawoe9hdv4] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fpf-addon-select[b-vawoe9hdv4] {
    /* 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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    background: var(--d-surface);
    border: 1px solid #ffd9bd;
    color: #c2410c;
}
.fpf-btn-hold:hover[b-vawoe9hdv4] { background: var(--d-accent-soft); }

/* ---------- Purpose pill toggle (Công ty / Cá nhân) — mirror fsb-trip-toggle ---------- */
.fpf-purpose-toggle[b-vawoe9hdv4] {
    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-vawoe9hdv4]::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-vawoe9hdv4]::before {
    transform: translateX(100%);
}

.fpf-purpose-btn[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
        color: var(--d-ink-2);
    }

    .fpf-purpose-btn.is-active[b-vawoe9hdv4] {
        color: var(--d-accent);
    }

    .fpf-purpose-btn svg[b-vawoe9hdv4] {
        width: 14px;
        height: 14px;
        transition: transform .25s ease;
    }

    .fpf-purpose-btn.is-active svg[b-vawoe9hdv4] {
        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-vawoe9hdv4]  .fcc-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 32px;
}

@media (min-width: 640px) {
    .fpf-cond[b-vawoe9hdv4]  .fcc-list {
        grid-template-columns: 1fr 1fr;
    }
}

.fpf-cond[b-vawoe9hdv4]  .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-vawoe9hdv4]  .fcc-grp:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.fpf-cond[b-vawoe9hdv4]  .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-vawoe9hdv4]  .fcc-lbl {
    font-size: 12px;
    color: var(--d-ink-3);
}

.fpf-cond[b-vawoe9hdv4]  .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-vawoe9hdv4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hãng bay + số hiệu */
.fpf-itin-air[b-vawoe9hdv4] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fpf-itin-air-logo[b-vawoe9hdv4] {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}
.fpf-itin-air-name[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    display: grid;
    grid-template-columns: auto minmax(64px, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.fpf-itin-route.is-leg[b-vawoe9hdv4] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--d-line);
}
.fpf-itin-time[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    text-align: right;
}
.fpf-itin-iata[b-vawoe9hdv4] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-2);
    margin: 2px 0 0;
}
.fpf-itin-city[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    margin-left: auto;
}
.fpf-itin-term[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.fpf-itin-dur[b-vawoe9hdv4] {
    font-size: 10px;
    font-weight: 500;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.fpf-itin-line[b-vawoe9hdv4] {
    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-vawoe9hdv4]::before,
.fpf-itin-line[b-vawoe9hdv4]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--d-accent);
    transform: translateY(-50%);
}
.fpf-itin-line[b-vawoe9hdv4]::before { left: 0; }
.fpf-itin-line[b-vawoe9hdv4]::after { right: 0; }
.fpf-itin-plane[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    width: 13px;
    height: 13px;
    display: block;
}
.fpf-itin-stops[b-vawoe9hdv4] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--d-good);
    white-space: nowrap;
}
.fpf-itin-legno[b-vawoe9hdv4] {
    font-size: 9.5px;
    color: var(--d-ink-4);
    white-space: nowrap;
}

/* Điểm dừng (transit) */
.fpf-itin-transit[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    width: 12px;
    height: 12px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}
.fpf-itin-chip.is-fare[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] { background: var(--d-accent-soft); }
.fpf-mobilebar-hold:disabled[b-vawoe9hdv4] { opacity: .5; cursor: not-allowed; }
.fpf-mobilebar-hold svg[b-vawoe9hdv4] { width: 14px; height: 14px; flex-shrink: 0; }
.fpf-mobilebar-total[b-vawoe9hdv4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.fpf-mobilebar-label[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] { 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-vawoe9hdv4] { padding-bottom: 92px; }
    .fpf-root:has(.fpf-mobilebar-hold) .fpf-main-row[b-vawoe9hdv4] { padding-bottom: 140px; }
}

/* ---------- Nút quay lại đầu trang (mobile/tablet) ---------- */
.fpf-back-top[b-vawoe9hdv4] {
    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-vawoe9hdv4] { background: var(--d-surface-2); }
.fpf-back-top svg[b-vawoe9hdv4] { 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-vawoe9hdv4] { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Lưới trường nhập dùng chung — 12 cột
   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; mỗi hàng tự khai khổ cột riêng là
   mép trái/phải so le suốt chiều dọc thẻ.
   ══════════════════════════════════════════════════════════════════════════════ */
.fpf-fieldgrid[b-vawoe9hdv4] {
    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ó hàng mồ côi 1 ô + 3/4 hàng trống. Ô 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-vawoe9hdv4] { grid-column: span 2; }
.fpf-fieldgrid > .fpf-f-last[b-vawoe9hdv4],
.fpf-fieldgrid > .fpf-f-dob[b-vawoe9hdv4],
.fpf-fieldgrid > .fpf-f-pexp[b-vawoe9hdv4] { grid-column: span 3; }
.fpf-fieldgrid > .fpf-f-first[b-vawoe9hdv4] { 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-vawoe9hdv4] { 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: 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-vawoe9hdv4] { grid-column: 1 / span 5; }
.fpf-fieldgrid > .fpf-f-nat[b-vawoe9hdv4] { 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-vawoe9hdv4] { grid-column: span 5; }
.fpf-fieldgrid > .fpf-f-half[b-vawoe9hdv4] { 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-vawoe9hdv4] {
    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-vawoe9hdv4] { 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-vawoe9hdv4] {
    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. */
.fpf-grouplabel[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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 — `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-vawoe9hdv4] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

.fpf-switch[b-vawoe9hdv4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}
.fpf-switch-track[b-vawoe9hdv4] {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .18s ease;
}
.fpf-switch-knob[b-vawoe9hdv4] {
    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-vawoe9hdv4] { font-size: 12px; font-weight: 600; color: var(--d-ink-3); }
.fpf-switch.is-on .fpf-switch-track[b-vawoe9hdv4] { background: var(--d-accent); }
.fpf-switch.is-on .fpf-switch-knob[b-vawoe9hdv4] { transform: translateX(16px); }
.fpf-switch.is-on .fpf-switch-tx[b-vawoe9hdv4] { color: var(--d-accent); }

.fpf-linked-chip[b-vawoe9hdv4] {
    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-vawoe9hdv4] { 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-vawoe9hdv4] { position: relative; flex: 1 1 200px; max-width: 260px; min-width: 0; }
.fpf-empsearch-busy[b-vawoe9hdv4] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--d-ink-4);
    pointer-events: none;
}
.fpf-empdd[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] { border-bottom: 0; }
.fpf-empdd-item:hover[b-vawoe9hdv4] { background: var(--d-accent-soft); }
.fpf-empdd-name[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    display: block;
    font-size: 10.5px;
    color: var(--d-ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fpf-unlink[b-vawoe9hdv4] {
    /* đứ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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    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-vawoe9hdv4] {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-ink-2);
    flex-shrink: 0;
}
.fpf-purpose-tag[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    border-color: var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}
.fpf-purpose-tag svg[b-vawoe9hdv4] { width: 12px; height: 12px; flex-shrink: 0; }
.fpf-purpose-hint[b-vawoe9hdv4] {
    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 ghép cặp 6|6: thứ tự DOM 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-vawoe9hdv4] { gap: 12px 10px; }
    .fpf-fieldgrid > .fpf-f-title[b-vawoe9hdv4] { grid-column: span 4; }
    .fpf-fieldgrid > .fpf-f-last[b-vawoe9hdv4] { grid-column: span 8; }
    .fpf-fieldgrid > .fpf-f-first[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-dob[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-cccd[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-nat[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-pno[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-pexp[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-bag[b-vawoe9hdv4],
    .fpf-fieldgrid > .fpf-f-half[b-vawoe9hdv4] { 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-vawoe9hdv4] { width: 100%; margin-left: 0; }
    .fpf-empsearch[b-vawoe9hdv4] { max-width: none; }
    .fpf-purpose-hint[b-vawoe9hdv4] { 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-vawoe9hdv4],
    .fpf-root input[type="email"][b-vawoe9hdv4],
    .fpf-root input[type="tel"][b-vawoe9hdv4],
    .fpf-root select[b-vawoe9hdv4] {
        font-size: 16px;
        min-height: 40px;
    }
    /* DateMaskInput là component con → cần ::deep */
    .fpf-root[b-vawoe9hdv4]  input { font-size: 16px; min-height: 40px; }
    .fpf-btn-lg[b-vawoe9hdv4] { height: 48px; }
}

/* ---------- Trạng thái không có chuyến bay đã chọn (chặn form) ---------- */
.fpf-empty[b-vawoe9hdv4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}
.fpf-empty-ico[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    width: 32px;
    height: 32px;
    color: var(--d-warn);
}
.fpf-empty h3[b-vawoe9hdv4] {
    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-vawoe9hdv4] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.5;
    margin: 0 0 20px;
    max-width: 400px;
}
.fpf-empty-actions[b-vawoe9hdv4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightPaymentStep.razor.rz.scp.css */
/* FlightPaymentStep — Manager Dashboard v4 theme tokens + targeted overrides */
.fps-root[b-jcrxnj0uq2] {
    --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-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
            transform: translateY(-2px);
        }

/* ─── Numeric / display utility ─── */
.fps-num[b-jcrxnj0uq2] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

.fps-mono[b-jcrxnj0uq2] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fps-display[b-jcrxnj0uq2] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.025em;
}

/* ─── Card primitive ─── */
.fps-card[b-jcrxnj0uq2] {
    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 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-jcrxnj0uq2] {
    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>; thiếu rule cho h2 đó thì
       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-jcrxnj0uq2],
    .fps-card-hd h3[b-jcrxnj0uq2],
    .fps-card-toggle h2[b-jcrxnj0uq2] {
        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-jcrxnj0uq2],
        .fps-card-hd h3 svg[b-jcrxnj0uq2],
        .fps-card-toggle h2 svg[b-jcrxnj0uq2] {
            flex-shrink: 0;
            color: var(--d-accent);
        }

.fps-card-hd-meta[b-jcrxnj0uq2] {
    font-size: 11px;
    font-weight: 500;
    color: var(--d-ink-3);
    letter-spacing: 0;
    text-transform: none;
}

.fps-card-toggle[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        background: var(--d-surface-2);
    }

    .fps-card-toggle .chev[b-jcrxnj0uq2] {
        color: var(--d-ink-4);
        transition: transform .15s;
    }

    .fps-card-toggle.is-open .chev[b-jcrxnj0uq2] {
        transform: rotate(180deg);
    }

.fps-card-body[b-jcrxnj0uq2] {
    padding: 14px 16px;
}

/* ─── Booking summary ─── */
.fps-summary[b-jcrxnj0uq2] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 14px 16px;
}

.fps-summary-item[b-jcrxnj0uq2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.fps-summary-val[b-jcrxnj0uq2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.fps-summary-code[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    color: var(--d-danger);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ─── Notice (warn / danger banner) ─── */
.fps-notice[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        background: #fef3c7;
        border: 1px solid #fde68a;
        color: #92400e;
    }

    .fps-notice.warn svg[b-jcrxnj0uq2] {
        color: #d97706;
    }

/* ─── Passenger / contact ─── */
.fps-pax-contact[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    margin: 2px 0 0;
}

.fps-pax-table[b-jcrxnj0uq2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .fps-pax-table thead th[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        border-bottom: 0;
    }

    .fps-pax-table .idx[b-jcrxnj0uq2] {
        color: var(--d-ink-4);
        font-variant-numeric: tabular-nums;
    }

    .fps-pax-table .name[b-jcrxnj0uq2] {
        font-weight: 500;
        color: var(--d-ink);
    }

/* ─── Itinerary section ─── */
.fps-itin-section + .fps-itin-section[b-jcrxnj0uq2] {
    border-top: 1px solid var(--d-line-2);
}

.fps-itin-label[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        width: 3px;
        height: 14px;
        border-radius: 2px;
        background: var(--d-accent-grad);
    }

    .fps-itin-label .bar.alt[b-jcrxnj0uq2] {
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
    }

    .fps-itin-label .name.accent[b-jcrxnj0uq2] {
        color: var(--d-accent);
    }

    .fps-itin-label .name.alt[b-jcrxnj0uq2] {
        color: #2563eb;
    }

    .fps-itin-label .route[b-jcrxnj0uq2] {
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-3);
        text-transform: none;
        letter-spacing: 0;
    }

    .fps-itin-label .date[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
    padding: 14px 16px;
}

.fps-airline-row[b-jcrxnj0uq2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

    .fps-airline-row .name[b-jcrxnj0uq2] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .fps-airline-row .code[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fps-itin-end[b-jcrxnj0uq2] {
    flex: 1;
    min-width: 0;
}

    .fps-itin-end.right[b-jcrxnj0uq2] {
        text-align: right;
    }

    .fps-itin-end .iata-lbl[b-jcrxnj0uq2] {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--d-ink-4);
        margin: 0 0 2px;
    }

    .fps-itin-end .time[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin: 2px 0 0;
        font-variant-numeric: tabular-nums;
    }

    .fps-itin-end .term[b-jcrxnj0uq2] {
        font-size: 10.5px;
        color: var(--d-ink-4);
        margin: 1px 0 0;
    }

.fps-itin-mid[b-jcrxnj0uq2] {
    flex: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-top: 14px;
    min-width: 0;
}

    .fps-itin-mid .dur[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        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-jcrxnj0uq2]::before,
        .fps-itin-mid .line[b-jcrxnj0uq2]::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-jcrxnj0uq2]::before { left: 0; }
        .fps-itin-mid .line[b-jcrxnj0uq2]::after { right: 0; }

        .fps-itin-mid .line .plane[b-jcrxnj0uq2] {
            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-jcrxnj0uq2] {
                display: block;
            }

    .fps-itin-mid .stop[b-jcrxnj0uq2] {
        font-size: 11px;
        color: var(--d-ink-3);
    }

/* ─── Multi-leg timeline ─── */
.fps-leg-timeline[b-jcrxnj0uq2] {
    position: relative;
    padding-left: 22px;
}

    .fps-leg-timeline[b-jcrxnj0uq2]::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-jcrxnj0uq2] {
    position: relative;
}

    .fps-leg-point .marker[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--d-accent);
        }

        .fps-leg-point .marker.last[b-jcrxnj0uq2] {
            background: var(--d-accent-grad);
            border-color: transparent;
        }

        .fps-leg-point .marker.last svg[b-jcrxnj0uq2] {
            color: #fff;
            width: 8px;
            height: 8px;
        }

        .fps-leg-point .marker.transit[b-jcrxnj0uq2] {
            border-color: var(--d-ink-4);
        }

        .fps-leg-point .marker.transit .inner[b-jcrxnj0uq2] {
            background: var(--d-ink-4);
        }

.fps-leg-time[b-jcrxnj0uq2] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

    .fps-leg-time .hh[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-2);
    }

    .fps-leg-time .city[b-jcrxnj0uq2] {
        font-size: 11px;
        color: var(--d-ink-3);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.fps-leg-meta[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        color: var(--d-accent);
        width: 11px;
        height: 11px;
    }

    .fps-leg-flight .num[b-jcrxnj0uq2] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--d-ink-2);
        font-weight: 600;
    }

.fps-leg-transit[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        color: var(--d-ink);
        font-weight: 600;
    }

    .fps-fare-strip .sep[b-jcrxnj0uq2] {
        color: var(--d-ink-4);
    }

/* ─── Price breakdown table ─── */
.fps-price-wrap[b-jcrxnj0uq2] {
    padding: 12px 16px 14px;
}

.fps-price-tbl-shell[b-jcrxnj0uq2] {
    border: 1px solid var(--d-line);
    border-radius: 8px;
    overflow: hidden;
}

.fps-price-tbl[b-jcrxnj0uq2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .fps-price-tbl thead th[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
            text-align: right;
        }

    .fps-price-tbl tbody td[b-jcrxnj0uq2] {
        padding: 8px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

        .fps-price-tbl tbody td.right[b-jcrxnj0uq2] {
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum';
        }

        .fps-price-tbl tbody td.total[b-jcrxnj0uq2] {
            font-weight: 600;
            color: var(--d-ink);
        }

    .fps-price-tbl tbody tr:last-child td[b-jcrxnj0uq2] {
        border-bottom: 0;
    }

.fps-price-foot[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .fps-price-foot .val[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
    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 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 nhỏ hơn thì thẻ bị header che */
    top: 88px;
}

.fps-total-hd[b-jcrxnj0uq2] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .fps-total-hd h3[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fps-leg-block-lbl[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        color: var(--d-accent);
    }

    .fps-leg-block-lbl .route.alt[b-jcrxnj0uq2] {
        color: #2563eb;
    }

.fps-leg-line[b-jcrxnj0uq2] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 2px 0;
}

    .fps-leg-line .k[b-jcrxnj0uq2] {
        color: var(--d-ink-3);
    }

    .fps-leg-line .v[b-jcrxnj0uq2] {
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

    .fps-leg-line.bag[b-jcrxnj0uq2] {
        color: var(--d-good);
        font-size: 12px;
    }

        .fps-leg-line.bag .k[b-jcrxnj0uq2],
        .fps-leg-line.bag .v[b-jcrxnj0uq2] {
            color: var(--d-good);
        }

.fps-leg-subtot[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        color: var(--d-ink-2);
    }

    .fps-leg-subtot .v[b-jcrxnj0uq2] {
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

.fps-divider[b-jcrxnj0uq2] {
    border-top: 1px dashed var(--d-line);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fps-grand[b-jcrxnj0uq2] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--d-line);
}

    .fps-grand .k[b-jcrxnj0uq2] {
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink-2);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .fps-grand .v[b-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

    .fps-pax-meta svg[b-jcrxnj0uq2] {
        color: var(--d-ink-4);
    }

/* ─── Pay button (primary CTA) ─── */
.fps-pay-wrap[b-jcrxnj0uq2] {
    padding: 0 16px 16px;
}

.fps-error-banner[b-jcrxnj0uq2] {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 12px;
    color: #b91c1c;
}

.fps-pay-btn[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        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-jcrxnj0uq2] {
        transform: translateY(1px);
    }

    .fps-pay-btn:disabled[b-jcrxnj0uq2] {
        cursor: not-allowed;
        filter: saturate(.55) brightness(1.05);
        box-shadow: none;
    }

.fps-spinner[b-jcrxnj0uq2] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.55);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fps-spin-b-jcrxnj0uq2 .7s linear infinite;
}

.fps-spinner.dark[b-jcrxnj0uq2] {
    border-color: rgba(255, 107, 0,.25);
    border-top-color: var(--d-accent);
}

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

/* ─── Loading & status panels (booking error / pending pnr) ─── */
.fps-loading-panel[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        border-color: #fde68a;
    }

.fps-status-hd[b-jcrxnj0uq2] {
    padding: 28px 28px 12px;
    text-align: center;
}

.fps-status-icon[b-jcrxnj0uq2] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
}

    .fps-status-icon.danger[b-jcrxnj0uq2] {
        background: #fef2f2;
        color: #dc2626;
    }

    .fps-status-icon.warn[b-jcrxnj0uq2] {
        background: #fef3c7;
        color: #d97706;
    }

    .fps-status-icon.ok[b-jcrxnj0uq2] {
        background: color-mix(in srgb, var(--d-good) 12%, white);
        color: var(--d-good);
    }

/* Đơn đã ghi nhận nhưng chưa giữ chỗ (đại lý chưa được bật giữ chỗ) — thẻ đầu trang đơn hàng thay cho khối mã đơn + hạn. */
.fps-recorded[b-jcrxnj0uq2] {
    border-color: color-mix(in srgb, var(--d-good) 35%, var(--d-line));
}

    .fps-recorded .fps-status-hd[b-jcrxnj0uq2] {
        padding: 24px 24px 20px;
    }

.fps-recorded-contact[b-jcrxnj0uq2] {
    margin-top: 8px;
    font-size: 13px;
}

.fps-recorded-actions[b-jcrxnj0uq2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fps-recorded-note[b-jcrxnj0uq2] {
    margin: 0 0 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d-ink-3);
}

.fps-status-title[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.55;
    margin: 0;
}

    .fps-status-msg strong[b-jcrxnj0uq2] {
        color: var(--d-ink);
        font-weight: 600;
    }

.fps-status-actions[b-jcrxnj0uq2] {
    padding: 14px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fps-btn[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        background: var(--d-surface-2);
    }

.fps-btn-accent[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

/* ─── Payment categories ─── */
.fps-cat-lbl[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
        margin-top: 0;
    }

.fps-method-grid[b-jcrxnj0uq2] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .fps-method-grid[b-jcrxnj0uq2] { 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-jcrxnj0uq2] {
        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-jcrxnj0uq2]::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-jcrxnj0uq2] {
            position: relative;
            z-index: 1;
        }

        .fps-method-featured .fps-method:hover[b-jcrxnj0uq2] {
            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-jcrxnj0uq2] {
    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-jcrxnj0uq2]::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-jcrxnj0uq2] {
    width: 40px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.fps-method .name[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    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-jcrxnj0uq2] { background: #d82d8b; }
    .fps-method .ico-fb.wallet[b-jcrxnj0uq2] { background: #16a34a; }
    .fps-method .ico-fb.qr[b-jcrxnj0uq2] { background: #2563eb; }

.fps-method img[b-jcrxnj0uq2] {
    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-jcrxnj0uq2] {
    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-jcrxnj0uq2 .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes fps-check-pop-b-jcrxnj0uq2 {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* ─── Layout grid ─── */
.fps-grid[b-jcrxnj0uq2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .fps-grid[b-jcrxnj0uq2] {
        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 đó 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-jcrxnj0uq2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightSearchResults.razor.rz.scp.css */
/* FlightSearchResults — Manager Dashboard v4 theme tokens */
.fsr-root[b-4y4r91k4y6] {
    --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-4y4r91k4y6] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum';
}

/* ─── Alerts ─── */
.fsr-alert[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    border-color: #fecaca;
    background: #fef2f2;
}

    .fsr-alert-danger .fsr-alert-ico[b-4y4r91k4y6] {
        color: #dc2626;
    }

.fsr-alert-warn[b-4y4r91k4y6] {
    border-color: #fde68a;
    background: #fffbeb;
}

    .fsr-alert-warn .fsr-alert-ico[b-4y4r91k4y6] {
        color: #d97706;
    }

.fsr-alert-ico[b-4y4r91k4y6] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fsr-alert-body[b-4y4r91k4y6] {
    flex: 1;
    min-width: 0;
}

    .fsr-alert-body p[b-4y4r91k4y6] {
        margin: 0;
        font-size: 14px;
    }

    .fsr-alert-body .ttl[b-4y4r91k4y6] {
        font-weight: 600;
        color: var(--d-ink);
    }

    .fsr-alert-body .desc[b-4y4r91k4y6] {
        margin-top: 2px;
        color: var(--d-ink-2);
    }

.fsr-alert-action[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        color: var(--d-ink);
    }

.fsr-alert-close[b-4y4r91k4y6] {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--d-ink-3);
    cursor: pointer;
    padding: 2px;
}

    .fsr-alert-close:hover[b-4y4r91k4y6] {
        color: var(--d-ink);
    }

/* ─── 7-day price bar ─── */
.fsr-daybar[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    overflow-x: auto;
}

.fsr-daybar-grid[b-4y4r91k4y6] {
    display: grid;
    grid-template-columns: repeat(7, minmax(68px, 1fr));
    min-width: 480px;
    background: var(--d-accent-grad);
}

.fsr-day[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        border-right: 0;
    }

    .fsr-day:hover:not(:disabled):not(.is-active):not(.is-past)[b-4y4r91k4y6] {
        background: rgba(0, 0, 0, 0.08);
    }

.fsr-day-dow[b-4y4r91k4y6] {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.92;
    line-height: 1.2;
}

.fsr-day-date[b-4y4r91k4y6] {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 1px;
}

.fsr-day-price[b-4y4r91k4y6] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

    .fsr-day-price.muted[b-4y4r91k4y6] {
        color: rgba(255, 255, 255, 0.6);
    }

.fsr-day.is-past[b-4y4r91k4y6] {
    background: #f1ece6;
    color: var(--d-ink-4);
    cursor: not-allowed;
    border-right-color: var(--d-line);
}

.fsr-day.is-active[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        color: var(--d-accent);
        font-weight: 600;
    }

    .fsr-day.is-active .fsr-day-price[b-4y4r91k4y6] {
        color: var(--d-accent);
        font-weight: 600;
    }

/* Ô rẻ nhất trong 7 ngày (chỉ so các ô cùng nghĩa giá 1 chiều) — viên trắng chữ cam trên nền cam của thanh */
.fsr-day-price[b-4y4r91k4y6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

    .fsr-day-price .fsr-kind-ico[b-4y4r91k4y6] {
        width: 10px;
        height: 10px;
    }

    .fsr-day-price.is-low[b-4y4r91k4y6] {
        padding: 0 6px;
        border-radius: 999px;
        background: #ffffff;
        color: var(--d-accent);
        font-weight: 700;
    }

.fsr-day.is-active .fsr-day-price.is-low[b-4y4r91k4y6] {
    background: var(--d-accent);
    color: #ffffff;
}

/* Dòng chú thích dưới thanh: con số là giá gì, ô nào rẻ nhất, ngày khác là giá tham khảo */
.fsr-daybar-note[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 6px 12px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.4;
}

    .fsr-daybar-note > span[b-4y4r91k4y6] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .fsr-daybar-note .what[b-4y4r91k4y6] {
        font-weight: 600;
        color: var(--d-ink-2);
    }

.fsr-day-lowtag[b-4y4r91k4y6] {
    padding: 0 6px;
    border: 1px solid var(--d-accent);
    border-radius: 999px;
    background: #ffffff;
    color: var(--d-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─── Search box wrapper ─── */
.fsr-searchbox[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        width: 13px;
        height: 13px;
    }

    .fsr-searchbox-close:hover[b-4y4r91k4y6] {
        color: #b91c1c;
        background: #fef2f2;
        border-color: #fecaca;
    }

/* ─── Trip phase tabs (round-trip) ─── */
.fsr-phase-tabs[b-4y4r91k4y6] {
    display: flex;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-phase[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        background: var(--d-surface-2);
    }

    .fsr-phase:disabled[b-4y4r91k4y6] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.fsr-phase.is-active[b-4y4r91k4y6] {
    border-bottom-color: var(--d-accent);
    background: var(--d-accent-soft);
}

.fsr-phase.is-done[b-4y4r91k4y6] {
    border-bottom-color: var(--d-good);
    background: rgba(220, 252, 231, 0.45);
}

.fsr-phase-step[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    background: var(--d-accent-grad);
    color: #fff;
}

.fsr-phase.is-done .fsr-phase-step[b-4y4r91k4y6] {
    background: var(--d-good);
    color: #fff;
}

.fsr-phase-divider[b-4y4r91k4y6] {
    width: 1px;
    background: var(--d-line);
    margin: 6px 0;
    flex-shrink: 0;
}

.fsr-phase-line[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    flex-wrap: wrap;
}

    .fsr-phase-line .lbl[b-4y4r91k4y6] {
        font-weight: 600;
        color: var(--d-ink-2);
    }

.fsr-phase.is-active .fsr-phase-line .lbl[b-4y4r91k4y6] {
    color: var(--d-accent);
}

.fsr-phase.is-done .fsr-phase-line .lbl[b-4y4r91k4y6] {
    color: var(--d-good);
}

.fsr-phase-line .sep[b-4y4r91k4y6] {
    color: var(--d-ink-4);
}

.fsr-phase-line .iata[b-4y4r91k4y6] {
    color: var(--d-ink-3);
}

.fsr-phase-line .date[b-4y4r91k4y6] {
    color: var(--d-ink-4);
}

.fsr-phase-sub[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

    .fsr-phase-sub .price[b-4y4r91k4y6] {
        font-weight: 600;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

/* ─── One-way indicator ─── */
.fsr-oneway[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    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-4y4r91k4y6] {
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
}

.fsr-oneway .iata[b-4y4r91k4y6] {
    font-size: 11px;
    color: var(--d-ink-3);
}

.fsr-oneway .sep[b-4y4r91k4y6] {
    color: var(--d-ink-4);
}

.fsr-oneway .date[b-4y4r91k4y6] {
    font-size: 11px;
    color: var(--d-ink-4);
}

/* ─── Header / route summary ─── */
.fsr-route[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fsr-route-info[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--d-ink-2);
}

.fsr-route-city[b-4y4r91k4y6] {
    font-weight: 700;
    color: var(--d-ink);
}

.fsr-route-iata[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    color: var(--d-ink-4);
    margin: 0 2px;
}

.fsr-plane-ico[b-4y4r91k4y6] {
    width: 15px;
    height: 15px;
    fill: var(--d-accent);
    flex-shrink: 0;
    margin: 0 4px;
}

.fsr-route-meta[b-4y4r91k4y6] {
    color: var(--d-ink-3);
    font-size: 12px;
}

.fsr-trip-badge[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border-color: #ffe0c7;
}

.fsr-trip-badge.oneway[b-4y4r91k4y6] {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.fsr-route-actions[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsr-link-btn[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        color: #e85f00;
    }

.fsr-count-pill[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .fsr-totop:hover[b-4y4r91k4y6] {
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .fsr-totop:active[b-4y4r91k4y6] {
        transform: scale(0.94);
    }

    .fsr-totop svg[b-4y4r91k4y6] {
        width: 19px;
        height: 19px;
        /* Lúc nghỉ: máy bay nhấp nhô nhẹ như đang lơ lửng */
        animation: fsrPlaneBob-b-4y4r91k4y6 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-4y4r91k4y6] {
        animation: fsrPlaneFly-b-4y4r91k4y6 .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-4y4r91k4y6] {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

@keyframes fsrPlaneBob-b-4y4r91k4y6 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes fsrPlaneFly-b-4y4r91k4y6 {
    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-4y4r91k4y6],
    .fsr-totop:hover svg[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

        .fsr-totop.has-bar[b-4y4r91k4y6] {
            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-4y4r91k4y6],
.fsr-sheet-overlay[b-4y4r91k4y6],
.fsr-sheet[b-4y4r91k4y6] {
    display: none;
}

@media (max-width: 767px) {
    .fsr-filter-fab[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            transform: scale(0.94);
        }

        .fsr-filter-fab svg[b-4y4r91k4y6] {
            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-4y4r91k4y6] {
            bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        }

    .fsr-filter-fab-badge[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 40, 0.45);
        z-index: 60;
        display: block;
        animation: fsrSheetFade-b-4y4r91k4y6 .2s ease;
    }

    .fsr-sheet[b-4y4r91k4y6] {
        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-4y4r91k4y6 .26s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes fsrSheetFade-b-4y4r91k4y6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fsrSheetUp-b-4y4r91k4y6 {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.fsr-sheet-grip[b-4y4r91k4y6] {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--d-line);
    margin: 8px auto 2px;
    flex-shrink: 0;
}

.fsr-sheet-hd[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        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-4y4r91k4y6] {
            color: var(--d-accent);
        }

.fsr-sheet-hd-actions[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fsr-sheet-close[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        color: var(--d-ink);
    }

.fsr-sheet-body[b-4y4r91k4y6] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px;
}

.fsr-sheet-foot[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        margin-top: 0;
    }

.fsr-btn-accent[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        background: var(--d-accent-grad-hover);
    }

.fsr-btn-block[b-4y4r91k4y6] {
    width: 100%;
    margin-top: 16px;
}

/* ─── Two-column layout ─── */
.fsr-layout[b-4y4r91k4y6] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.fsr-results[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        padding-bottom: 24px;
    }

.fsr-sidebar[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        display: none;
    }
}

.fsr-sidebar-card[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    flex-shrink: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-selsum-hd[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        color: var(--d-accent);
        flex-shrink: 0;
    }

    .fsr-selsum-hd h4[b-4y4r91k4y6] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-accent);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.fsr-selsum-body[b-4y4r91k4y6] {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fsr-selsum-leg[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .fsr-selsum-leg + .fsr-selsum-leg[b-4y4r91k4y6] {
        padding-top: 10px;
        border-top: 1px solid var(--d-line-2);
    }

    .fsr-selsum-leg .hd[b-4y4r91k4y6] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .fsr-selsum-leg .lbl[b-4y4r91k4y6] {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--d-ink-3);
    }

    .fsr-selsum-leg .route[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            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-4y4r91k4y6] {
        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-4y4r91k4y6] {
            height: 16px;
            width: auto;
            flex-shrink: 0;
        }

        .fsr-selsum-leg .air span[b-4y4r91k4y6] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fsr-selsum-leg .air b[b-4y4r91k4y6] {
            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-4y4r91k4y6] {
        display: grid;
        grid-template-columns: auto minmax(52px, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 3px;
    }

        .fsr-selsum-leg .ep .t[b-4y4r91k4y6] {
            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-4y4r91k4y6] {
            display: block;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--d-ink-3);
            margin-top: 1px;
        }

        .fsr-selsum-leg .ep.end[b-4y4r91k4y6] {
            text-align: right;
        }

        .fsr-selsum-leg .path[b-4y4r91k4y6] {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }

            .fsr-selsum-leg .path .dur[b-4y4r91k4y6] {
                font-size: 9.5px;
                font-weight: 500;
                color: var(--d-ink-3);
                white-space: nowrap;
            }

            .fsr-selsum-leg .path .line[b-4y4r91k4y6] {
                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-4y4r91k4y6]::before,
                .fsr-selsum-leg .path .line[b-4y4r91k4y6]::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-4y4r91k4y6]::before { left: 0; }
                .fsr-selsum-leg .path .line[b-4y4r91k4y6]::after { right: 0; }

                .fsr-selsum-leg .path .pl[b-4y4r91k4y6] {
                    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-4y4r91k4y6] {
                        width: 11px;
                        height: 11px;
                        display: block;
                    }

            .fsr-selsum-leg .path .st[b-4y4r91k4y6] {
                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-4y4r91k4y6] {
        font-size: 11px;
        font-style: italic;
        color: var(--d-ink-4);
    }

.fsr-selsum-total[b-4y4r91k4y6] {
    padding-top: 8px;
    border-top: 1px dashed var(--d-line);
}

    .fsr-selsum-total .row[b-4y4r91k4y6] {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }

    .fsr-selsum-total .lbl[b-4y4r91k4y6] {
        font-size: 12px;
        color: var(--d-ink-3);
    }

    .fsr-selsum-total .amt-wrap[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
            color: var(--d-accent);
        }

        .fsr-selsum-total .note svg[b-4y4r91k4y6] {
            flex-shrink: 0;
        }

    .fsr-selsum-total .amt[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            font-size: 11px;
            font-weight: 400;
        }

.fsr-sidebar-hd[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        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-4y4r91k4y6] {
    /* 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-4y4r91k4y6] {
    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-4y4r91k4y6] {
    height: 3px;
    background: var(--d-accent-grad);
    background-size: 200% 100%;
    animation: fsr-grad-slide-b-4y4r91k4y6 2s linear infinite;
}

@keyframes fsr-grad-slide-b-4y4r91k4y6 {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.fsr-progress-body[b-4y4r91k4y6] {
    padding: 12px 16px 10px;
}

.fsr-progress-head[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fsr-radar[b-4y4r91k4y6] {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .fsr-radar .pulse[b-4y4r91k4y6] {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(255, 107, 0, 0.15);
        animation: fsr-radar-b-4y4r91k4y6 1.6s ease-out infinite;
    }

    .fsr-radar .pulse2[b-4y4r91k4y6] {
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: rgba(255, 107, 0, 0.10);
        animation: fsr-radar-b-4y4r91k4y6 1.6s ease-out 0.4s infinite;
    }

    .fsr-radar svg[b-4y4r91k4y6] {
        width: 16px;
        height: 16px;
        color: var(--d-accent);
        position: relative;
        z-index: 1;
    }

@keyframes fsr-radar-b-4y4r91k4y6 {
    0% { transform: scale(0.5); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 0; }
}

.fsr-progress-title[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .fsr-progress-title p[b-4y4r91k4y6] {
        margin: 0;
    }

    .fsr-progress-title .ttl[b-4y4r91k4y6] {
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .fsr-progress-title .sub[b-4y4r91k4y6] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 1px;
    }

.fsr-pct[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        font-size: 14px;
    }

.fsr-track[b-4y4r91k4y6] {
    position: relative;
    height: 8px;
    background: var(--d-surface-2);
    border-radius: 999px;
    overflow: visible;
    margin-bottom: 12px;
}

.fsr-track-fill[b-4y4r91k4y6] {
    height: 100%;
    border-radius: 999px;
    background: var(--d-accent-grad);
    transition: width .7s ease-out;
    position: relative;
    overflow: hidden;
}

    .fsr-track-fill[b-4y4r91k4y6]::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-4y4r91k4y6 1.2s ease-in-out infinite;
    }

@keyframes fsr-shimmer-b-4y4r91k4y6 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fsr-plane-marker[b-4y4r91k4y6] {
    position: absolute;
    top: -10px;
    transition: left .7s ease-out;
    z-index: 2;
}

    .fsr-plane-marker svg[b-4y4r91k4y6] {
        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-4y4r91k4y6 1s ease-in-out infinite;
    }

@keyframes fsr-plane-float-b-4y4r91k4y6 {
    0%, 100% { transform: rotate(90deg) translateY(0); }
    50% { transform: rotate(90deg) translateY(-3px); }
}

.fsr-airline-chips[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fsr-airline-chip[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        background: #ecfdf5;
        color: #15803d;
        border-color: #bbf7d0;
    }

    .fsr-airline-chip.is-error[b-4y4r91k4y6] {
        background: #fef2f2;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .fsr-airline-chip img[b-4y4r91k4y6] {
        height: 12px;
        width: auto;
    }

.fsr-spin[b-4y4r91k4y6] {
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fsr-spin-b-4y4r91k4y6 0.6s linear infinite;
}

@keyframes fsr-spin-b-4y4r91k4y6 {
    to { transform: rotate(360deg); }
}

/* ─── Empty / no-result ─── */
.fsr-empty[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        color: var(--d-ink-4);
    }

    .fsr-empty h3[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        margin: 0;
        font-size: 14px;
    }

/* ─── Flight result list ─── */
.fsr-list[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fsr-flight[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        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-4y4r91k4y6] {
        border-color: #ffd9bd;
        box-shadow: 0 8px 20px -10px rgba(16, 24, 40, 0.22);
    }

    .fsr-flight.is-selected:hover[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
    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-4y4r91k4y6 {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 1200px;
    }
}

.fsr-fares[b-4y4r91k4y6],
.fsr-toggles[b-4y4r91k4y6],
.fsr-itin[b-4y4r91k4y6],
.fsr-price-detail[b-4y4r91k4y6] {
    animation: fsrExpandIn-b-4y4r91k4y6 .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-4y4r91k4y6] {
    animation-delay: .06s;
}

/* Itin/Price detail có animation riêng (mở từ toggle bar) — không stagger */
.fsr-itin[b-4y4r91k4y6],
.fsr-price-detail[b-4y4r91k4y6] {
    animation-duration: .22s;
}

/* Chevron expand icon — rotate mượt khi mở/đóng */
.fsr-flight-mobile-expand svg[b-4y4r91k4y6],
.fsr-flight-desktop-expand svg[b-4y4r91k4y6],
.fsr-flight-price .fares-toggle svg[b-4y4r91k4y6],
.fsr-toggle .chev[b-4y4r91k4y6] {
    transition: transform .25s ease;
}

    .fsr-flight-row:hover[b-4y4r91k4y6] {
        background: var(--d-surface-2);
    }

.fsr-flight.is-selected .fsr-flight-row[b-4y4r91k4y6] {
    background: var(--d-accent-soft);
}

.fsr-flight-mobile[b-4y4r91k4y6] {
    padding: 12px;
}

@media (min-width: 768px) {
    .fsr-flight-mobile[b-4y4r91k4y6] {
        display: none;
    }
}

.fsr-flight-mobile-top[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fsr-air[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .fsr-air img[b-4y4r91k4y6] {
        height: 16px;
        width: auto;
        flex-shrink: 0;
    }

    .fsr-air .name[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
    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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        font-size: 10px;
        font-weight: 400;
    }

.fsr-time-route[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsr-time-block[b-4y4r91k4y6] {
    flex-shrink: 0;
}

    .fsr-time-block .t[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
    text-align: right;
}

.fsr-leg[b-4y4r91k4y6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

    .fsr-leg .dur[b-4y4r91k4y6],
    .fsr-leg .stops[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        color: var(--d-good);
        font-weight: 600;
    }

.fsr-leg-line[b-4y4r91k4y6] {
    width: 100%;
    display: flex;
    align-items: center;
    height: 10px;
    margin: 2px 0;
}

    .fsr-leg-line .dot[b-4y4r91k4y6] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--d-accent);
        flex-shrink: 0;
    }

    .fsr-leg-line .ln[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        width: 12px;
        height: 12px;
        fill: var(--d-accent);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.fsr-flight-mobile-expand[b-4y4r91k4y6] {
    flex-shrink: 0;
    margin-left: 4px;
    text-align: center;
}

    .fsr-flight-mobile-expand .fc[b-4y4r91k4y6] {
        font-size: 9px;
        color: var(--d-accent);
        font-weight: 500;
        display: block;
    }

    .fsr-flight-mobile-expand svg[b-4y4r91k4y6] {
        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-4y4r91k4y6],
.fsr-flight-row.is-expanded .fsr-flight-desktop-expand svg[b-4y4r91k4y6] {
    transform: rotate(180deg);
}

/* desktop layout */
.fsr-flight-desktop[b-4y4r91k4y6] {
    display: none;
    align-items: center;
}

@media (min-width: 768px) {
    .fsr-flight-desktop[b-4y4r91k4y6] {
        display: flex;
    }
}

.fsr-flight-airline[b-4y4r91k4y6] {
    /* Đủ 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-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
    width: 96px;
    flex-shrink: 0;
    text-align: center;
    padding: 8px 4px;
}

    .fsr-flight-no .pill[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
    width: 176px;
    flex-shrink: 0;
    /* Phủ trọn chiều cao hàng (hàng căn giữa dọc — ô giá gọn 2 dòng thì thấp hơn hàng có điểm dừng, nền cam hở trên/dưới) */
    align-self: stretch;
    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-4y4r91k4y6] {
        font-size: 10px;
        color: var(--d-ink-3);
        line-height: 1;
    }

    .fsr-flight-price .strike[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
            font-size: 11px;
            font-weight: 400;
            vertical-align: top;
        }

    .fsr-flight-price .fares-toggle[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            width: 12px;
            height: 12px;
            transition: transform .2s;
        }

.fsr-flight-row.is-expanded .fsr-flight-price .fares-toggle svg[b-4y4r91k4y6] {
    transform: rotate(180deg);
}

.fsr-flight-price .per[b-4y4r91k4y6] {
    font-size: 10px;
    color: var(--d-ink-4);
    line-height: 1;
}

/* ─── Fare class cards ─── */
.fsr-fares[b-4y4r91k4y6] {
    border-top: 1px solid var(--d-line-2);
    background: var(--d-surface-2);
    padding: 10px 12px;
}

.fsr-fares-wrap[b-4y4r91k4y6] {
    position: relative;
}

.fsr-fares-arrow[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
    }

    .fsr-fares-arrow.left[b-4y4r91k4y6] {
        left: -4px;
    }

    .fsr-fares-arrow.right[b-4y4r91k4y6] {
        right: -4px;
    }

    .fsr-fares-arrow svg[b-4y4r91k4y6] {
        width: 14px;
        height: 14px;
    }

.fsr-fares-scroll[b-4y4r91k4y6] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

    .fsr-fares-scroll[b-4y4r91k4y6]::-webkit-scrollbar {
        display: none;
    }

.fsr-fare[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        width: 208px;
    }
}

    .fsr-fare:hover:not(.is-disabled):not(.is-selected)[b-4y4r91k4y6] {
        border-color: #ffe0c7;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    }

.fsr-fare.is-selected[b-4y4r91k4y6] {
    border-color: var(--d-accent);
    box-shadow: 0 4px 12px -2px rgba(255, 107, 0, 0.20);
}

.fsr-fare.is-disabled[b-4y4r91k4y6] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.5);
    background: #fef2f2;
    border-color: #fecaca;
}

.fsr-fare-banner[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        width: 11px;
        height: 11px;
        display: inline;
        margin-right: 2px;
        vertical-align: -2px;
    }

.fsr-fare-head[b-4y4r91k4y6] {
    padding: 10px 12px 8px;
    text-align: center;
    border-bottom: 1px solid var(--d-line-2);
}

.fsr-fare.is-selected .fsr-fare-head[b-4y4r91k4y6] {
    border-bottom-color: #ffe0c7;
}

.fsr-radio[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    border-color: var(--d-accent);
}

.fsr-radio-dot[b-4y4r91k4y6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d-accent);
}

.fsr-fare-strike[b-4y4r91k4y6] {
    font-size: 10px;
    color: var(--d-ink-4);
    text-decoration: line-through;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fsr-fare-price[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    color: var(--d-accent);
}

.fsr-fare-price .unit[b-4y4r91k4y6] {
    font-size: 10px;
    font-weight: 400;
}

.fsr-fare-class[b-4y4r91k4y6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-3);
    margin-top: 2px;
}

.fsr-fare.is-selected .fsr-fare-class[b-4y4r91k4y6] {
    color: var(--d-accent);
}

.fsr-fare-body[b-4y4r91k4y6] {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

.fsr-fare-body-row[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fsr-fare-body-row svg[b-4y4r91k4y6] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
        flex-shrink: 0;
    }

    .fsr-fare-body-row strong[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--d-line-2);
}

/* ─── Toggle bar (itinerary / price detail) ─── */
.fsr-toggles[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        background: var(--d-surface-2);
        color: var(--d-ink-2);
    }

    .fsr-toggle.is-on[b-4y4r91k4y6] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .fsr-toggle svg[b-4y4r91k4y6] {
        width: 14px;
        height: 14px;
    }

    .fsr-toggle .chev[b-4y4r91k4y6] {
        width: 12px;
        height: 12px;
        transition: transform .2s;
    }

    .fsr-toggle.is-on .chev[b-4y4r91k4y6] {
        transform: rotate(180deg);
    }

/* ─── Itinerary detail ─── */
.fsr-itin[b-4y4r91k4y6] {
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    padding: 12px 20px;
}

.fsr-timeline[b-4y4r91k4y6] {
    position: relative;
    padding-left: 20px;
}

    .fsr-timeline[b-4y4r91k4y6]::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 8px;
        bottom: 8px;
        width: 1px;
        background: #ffe0c7;
    }

.fsr-tl-row[b-4y4r91k4y6] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 8px;
}

.fsr-tl-dot[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-accent);
}

.fsr-tl-dot.last[b-4y4r91k4y6] {
    background: var(--d-accent);
}

    .fsr-tl-dot.last svg[b-4y4r91k4y6] {
        width: 8px;
        height: 8px;
        color: #fff;
    }

.fsr-tl-dot.transit[b-4y4r91k4y6] {
    border-color: var(--d-line);
}

    .fsr-tl-dot.transit .inner[b-4y4r91k4y6] {
        background: var(--d-ink-4);
    }

.fsr-tl-info[b-4y4r91k4y6] {
    flex: 1;
    min-width: 0;
}

    .fsr-tl-info .head[b-4y4r91k4y6] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
    }

        .fsr-tl-info .head .t[b-4y4r91k4y6] {
            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-4y4r91k4y6] {
            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-4y4r91k4y6] {
            font-size: 11px;
            color: var(--d-ink-3);
        }

    .fsr-tl-info .meta[b-4y4r91k4y6] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 10px;
        color: var(--d-ink-4);
        margin-top: 2px;
    }

.fsr-tl-leg[b-4y4r91k4y6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-left: 4px;
}

    .fsr-tl-leg .info[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            width: 11px;
            height: 11px;
            fill: var(--d-accent);
        }

        .fsr-tl-leg .info .fno[b-4y4r91k4y6] {
            font-weight: 600;
            color: var(--d-ink-2);
        }

    .fsr-tl-leg img[b-4y4r91k4y6] {
        height: 14px;
        width: auto;
        flex-shrink: 0;
    }

.fsr-transit[b-4y4r91k4y6] {
    margin: 8px 0;
    margin-left: 4px;
}

    .fsr-transit .badge[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            width: 11px;
            height: 11px;
        }

/* Direct itinerary (single leg) */
.fsr-itin-direct[b-4y4r91k4y6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

@media (min-width: 768px) {
    .fsr-itin-direct[b-4y4r91k4y6] {
        gap: 24px;
    }
}

.fsr-itin-side[b-4y4r91k4y6] {
    flex: 1;
    min-width: 0;
}

    .fsr-itin-side.right[b-4y4r91k4y6] {
        text-align: right;
    }

    .fsr-itin-side .lbl[b-4y4r91k4y6] {
        font-size: 10px;
        color: var(--d-ink-4);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }

        .fsr-itin-side .lbl .iata[b-4y4r91k4y6] {
            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-4y4r91k4y6] {
        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-4y4r91k4y6] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 2px;
    }

    .fsr-itin-side .term[b-4y4r91k4y6] {
        font-size: 10px;
        color: var(--d-ink-4);
    }

@media (min-width: 768px) {
    .fsr-itin-side .t[b-4y4r91k4y6] {
        font-size: 20px;
    }
}

.fsr-itin-mid[b-4y4r91k4y6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 12px;
    min-width: 0;
}

    .fsr-itin-mid .dur[b-4y4r91k4y6],
    .fsr-itin-mid .stops[b-4y4r91k4y6] {
        font-size: 11px;
        color: var(--d-ink-3);
    }

    .fsr-itin-mid .ln[b-4y4r91k4y6] {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 4px 0;
    }

        .fsr-itin-mid .ln .dot[b-4y4r91k4y6] {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--d-accent);
        }

        .fsr-itin-mid .ln .bar[b-4y4r91k4y6] {
            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-4y4r91k4y6] {
            width: 14px;
            height: 14px;
            fill: var(--d-accent);
            position: absolute;
            right: 0;
            top: -7px;
        }

.fsr-itin-carrier[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        height: 16px;
        width: auto;
    }

    .fsr-itin-carrier .fno[b-4y4r91k4y6] {
        font-weight: 600;
        color: var(--d-ink-2);
    }

/* ─── Price breakdown ─── */
.fsr-price-detail[b-4y4r91k4y6] {
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    padding: 12px 16px;
}


.fsr-price-meta[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        color: var(--d-ink-2);
        font-weight: 600;
    }

    .fsr-price-meta .sep[b-4y4r91k4y6] {
        color: var(--d-ink-4);
    }

.fsr-price-tbl-wrap[b-4y4r91k4y6] {
    border: 1px solid var(--d-line);
    border-radius: 8px;
    overflow-x: auto;
}

.fsr-price-tbl[b-4y4r91k4y6] {
    width: 100%;
    min-width: 400px;
    border-collapse: collapse;
    font-size: 12px;
}

    .fsr-price-tbl thead tr[b-4y4r91k4y6] {
        background: var(--d-surface-2);
        border-bottom: 1px solid var(--d-line);
    }

    .fsr-price-tbl thead th[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            text-align: right;
        }

    .fsr-price-tbl tbody td[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            text-align: right;
        }

        .fsr-price-tbl tbody td.total[b-4y4r91k4y6] {
            font-weight: 600;
            color: var(--d-ink);
        }

    .fsr-price-tbl tbody tr:last-child td[b-4y4r91k4y6] {
        border-bottom: 0;
    }

.fsr-price-total[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        font-size: 12px;
        color: var(--d-ink-2);
    }

    .fsr-price-total .amt[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
    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-4y4r91k4y6] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(960px, calc(100% - 32px));
    }
}

.fsr-sticky-row[b-4y4r91k4y6] {
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.fsr-sticky-info[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        height: 20px;
        width: auto;
        flex-shrink: 0;
    }

    .fsr-sticky-info .lbl[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        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-4y4r91k4y6] {
            color: var(--d-ink-4);
            margin: 0 4px;
            font-weight: 400;
        }

        .fsr-sticky-info .ttl .light[b-4y4r91k4y6] {
            font-weight: 400;
            color: var(--d-ink-2);
        }

.fsr-out-chip[b-4y4r91k4y6] {
    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-4y4r91k4y6] {
        width: 11px;
        height: 11px;
    }

@media (max-width: 767px) {
    .fsr-out-chip[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-sticky-info img[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 10px 12px;
    }

    .fsr-sticky-info[b-4y4r91k4y6] {
        flex: 1 1 100%;
    }

    .fsr-sticky-price[b-4y4r91k4y6] {
        flex: 1 1 auto;
        text-align: left;
    }
}

.fsr-sticky-price[b-4y4r91k4y6] {
    text-align: right;
    flex-shrink: 0;
}

    .fsr-sticky-price .amt[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
            font-size: 11px;
            font-weight: 400;
        }

    .fsr-sticky-price .sub[b-4y4r91k4y6] {
        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-4y4r91k4y6] {
        font-size: 11px;
        color: var(--d-ink-4);
        text-decoration: line-through;
        line-height: 1;
        margin-bottom: 1px;
        font-variant-numeric: tabular-nums;
    }

/* ─── Khứ hồi: giá trọn gói 2 chiều (vé Combine) vs giá từng chiều ───
   Màu chủ đạo là cam (--d-accent) — vé trọn gói nhận ra bằng chữ cam đậm + mũi tên hai chiều, không dùng màu khác. */
.fsr-kind[b-4y4r91k4y6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 600;
    color: var(--d-ink-2);
    white-space: nowrap;
}

    .fsr-kind.is-combo[b-4y4r91k4y6] {
        color: var(--d-accent);
        font-weight: 700;
    }

.fsr-kind-ico[b-4y4r91k4y6] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* "Từ" nhỏ đứng trước số tiền, cùng dòng */
.fsr-flight-price .amt .from[b-4y4r91k4y6] {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: 2px;
}

.fsr-flight-price .per.fsr-kind[b-4y4r91k4y6] {
    font-size: 10px;
    font-weight: 500;
    color: var(--d-ink-4);
}

    .fsr-flight-price .per.fsr-kind.is-combo[b-4y4r91k4y6] {
        color: var(--d-accent);
        font-weight: 700;
    }

.fsr-price-min-wrap .fsr-kind[b-4y4r91k4y6] {
    font-size: 10px;
}

.fsr-flight-price .both[b-4y4r91k4y6] {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--d-ink-2);
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.fsr-flight-price .fares-toggle[b-4y4r91k4y6] {
    margin-top: 4px;
}

.fsr-price-min-wrap[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.fsr-fare-unit[b-4y4r91k4y6] {
    font-size: 10px;
    color: var(--d-ink-3);
    line-height: 1.3;
}

    .fsr-fare-unit.is-combo[b-4y4r91k4y6] {
        color: var(--d-accent);
        font-weight: 700;
    }

.fsr-price-for[b-4y4r91k4y6] {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-2);
}

    .fsr-price-for.is-combo[b-4y4r91k4y6] {
        color: var(--d-accent);
    }

/* Dòng "Cách đọc giá" + lọc loại giá (bước chiều đi) / ghi chú giá (bước chiều về) */
.fsr-pguide[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 6px;
    padding: 9px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-2);
}

.fsr-pguide-txt[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

    .fsr-pguide-txt > span[b-4y4r91k4y6] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.fsr-pguide-ttl[b-4y4r91k4y6] {
    font-weight: 700;
    color: var(--d-ink);
}

.fsr-pguide-filter[b-4y4r91k4y6] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

    .fsr-pguide-filter button[b-4y4r91k4y6] {
        padding: 4px 10px;
        border: 1px solid var(--d-line);
        border-radius: 999px;
        background: var(--d-surface);
        font: inherit;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-2);
        cursor: pointer;
        white-space: nowrap;
    }

        .fsr-pguide-filter button:hover[b-4y4r91k4y6] {
            border-color: var(--d-accent);
        }

        .fsr-pguide-filter button.is-on[b-4y4r91k4y6] {
            border-color: var(--d-accent);
            background: var(--d-accent-soft);
            color: var(--d-accent);
        }

.fsr-pguide.is-return[b-4y4r91k4y6] {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

    .fsr-pguide.is-return svg[b-4y4r91k4y6] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--d-ink-3);
    }

    .fsr-pguide.is-return.is-combo[b-4y4r91k4y6] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

        .fsr-pguide.is-return.is-combo svg[b-4y4r91k4y6] {
            color: var(--d-accent);
        }

.fsr-sticky-price .sub.is-combo[b-4y4r91k4y6] {
    color: var(--d-accent);
    font-weight: 600;
}

/* Giá riêng từng chặng trong panel "Chuyến đã chọn" */
.fsr-selsum-leg .fare[b-4y4r91k4y6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
}

    .fsr-selsum-leg .fare b[b-4y4r91k4y6] {
        font-size: 12px;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
    }

    .fsr-selsum-leg .fare.is-combo[b-4y4r91k4y6] {
        color: var(--d-accent);
        font-weight: 600;
    }

/* ─── Số hiệu hành trình nối chuyến: "CZ7953 +1" ───
   Mặc định: chữ nhỏ cam ngay sau số hiệu. Trên thẻ kết quả: huy hiệu tròn nổi ở góc trên-phải của viên số hiệu. */
.fsr-fno-more[b-4y4r91k4y6] {
    margin-left: 3px;
    font-family: 'Inter', sans-serif;
    font-size: .8em;
    font-weight: 700;
    color: var(--d-accent);
}

.fsr-flight-no .pill[b-4y4r91k4y6],
.fsr-flightno[b-4y4r91k4y6] {
    position: relative;
}

    .fsr-flight-no .pill .fsr-fno-more[b-4y4r91k4y6],
    .fsr-flightno .fsr-fno-more[b-4y4r91k4y6] {
        position: absolute;
        top: -8px;
        right: -9px;
        min-width: 17px;
        height: 17px;
        margin: 0;
        padding: 0 4px;
        border: 2px solid var(--d-surface);
        border-radius: 999px;
        background: var(--d-accent);
        color: #ffffff;
        font-size: 9.5px;
        line-height: 13px;
        text-align: center;
        box-sizing: border-box;
    }

/* Viên số hiệu trên điện thoại hẹp (padding 6px) ⇒ huy hiệu nhỏ hơn và đẩy hẳn ra ngoài, không đè chữ số cuối */
.fsr-flightno .fsr-fno-more[b-4y4r91k4y6] {
    top: -9px;
    right: -14px;
    min-width: 15px;
    height: 15px;
    font-size: 9px;
    line-height: 11px;
}

.fsr-flightno:has(.fsr-fno-more)[b-4y4r91k4y6] {
    margin-right: 12px;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/AirportSelector.razor.rz.scp.css */
/* AirportSelector — Manager Dashboard v4 theme */
.aps-root[b-9dagi522kq] {
    --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-9dagi522kq] {
    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-9dagi522kq] {
        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-9dagi522kq] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .aps-trigger:hover[b-9dagi522kq] {
        background: var(--d-surface-2);
    }

.aps-text[b-9dagi522kq] {
    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-9dagi522kq] {
    flex: 1;
    width: auto;
}

.aps-lead-ico[b-9dagi522kq] {
    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-9dagi522kq]  svg {
        width: 15px;
        height: 15px;
    }

.aps-trigger.is-open .aps-lead-ico[b-9dagi522kq] {
    background: var(--d-accent-soft);
    border-color: #ffd9bd;
    color: var(--d-accent);
}

    .aps-trigger.is-open[b-9dagi522kq] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        background: var(--d-surface);
    }

.aps-label[b-9dagi522kq] {
    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-9dagi522kq] {
    font-size: 9px;
}

.aps-value[b-9dagi522kq] {
    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-9dagi522kq] {
    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-9dagi522kq] {
    color: var(--d-ink);
}

.aps-value-code[b-9dagi522kq] {
    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-9dagi522kq] {
    margin-left: 5px;
    padding: 0 5px;
    font-size: 10.5px;
}

.aps-placeholder[b-9dagi522kq] {
    color: var(--d-ink-4);
    font-weight: 400;
}

/* ── Backdrop & Panel ── */
.aps-backdrop[b-9dagi522kq] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.aps-panel[b-9dagi522kq] {
    /* 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-9dagi522kq] {
    padding: 12px;
    border-bottom: 1px solid var(--d-line-2);
}

.aps-search[b-9dagi522kq] {
    position: relative;
}

.aps-search-icon[b-9dagi522kq] {
    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-9dagi522kq] {
    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-9dagi522kq]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .aps-search-input:focus[b-9dagi522kq] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

/* ── Body layout ── */
.aps-body[b-9dagi522kq] {
    display: flex;
    height: 360px;
}

.aps-sidebar[b-9dagi522kq] {
    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-9dagi522kq] {
    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-9dagi522kq] {
        background: var(--d-surface);
        color: var(--d-ink);
    }

    .aps-tab.is-active[b-9dagi522kq] {
        background: var(--d-surface);
        color: var(--d-accent);
        font-weight: 600;
        box-shadow: inset 2px 0 0 var(--d-accent);
    }

.aps-list[b-9dagi522kq] {
    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-9dagi522kq] {
    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-9dagi522kq] {
        border-bottom: 0;
    }

    .aps-row:hover:not(:disabled)[b-9dagi522kq] {
        background: var(--d-surface-2);
    }

    .aps-row:disabled[b-9dagi522kq] {
        opacity: 0.4;
        cursor: not-allowed;
        background: var(--d-surface-2);
    }

.aps-row-info[b-9dagi522kq] {
    min-width: 0;
    flex: 1;
}

.aps-row-city[b-9dagi522kq] {
    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-9dagi522kq] {
    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-9dagi522kq] {
    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-9dagi522kq] {
    color: var(--d-ink-4);
}

/* Search results */
.aps-results[b-9dagi522kq] {
    max-height: 320px;
    overflow-y: auto;
}

.aps-group-hd[b-9dagi522kq] {
    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-9dagi522kq] {
    padding: 32px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--d-ink-3);
}

    .aps-message.is-error[b-9dagi522kq] {
        color: var(--d-danger);
    }

.aps-spin-wrap[b-9dagi522kq] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.aps-spin[b-9dagi522kq] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: aps-spin-b-9dagi522kq 0.9s linear infinite;
}

@keyframes aps-spin-b-9dagi522kq {
    to { transform: rotate(360deg); }
}

/* ── Skeleton loading ── */
.aps-skel-sidebar[b-9dagi522kq] {
    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-9dagi522kq] {
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ede9e3, #f4f5f8, #ede9e3);
    background-size: 200% 100%;
    animation: aps-shimmer-b-9dagi522kq 1.5s ease-in-out infinite;
}

.aps-skel-list[b-9dagi522kq] {
    flex: 1;
    padding: 8px;
    overflow: hidden;
}

.aps-skel-loader[b-9dagi522kq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 0 18px;
    color: var(--d-ink-4);
}

.aps-skel-plane[b-9dagi522kq] {
    position: relative;
    width: 36px;
    height: 36px;
    color: var(--d-accent);
}

    .aps-skel-plane svg[b-9dagi522kq] {
        width: 36px;
        height: 36px;
        animation: aps-plane-b-9dagi522kq 2s ease-in-out infinite;
    }

.aps-skel-plane-ping[b-9dagi522kq] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.18);
    animation: aps-ping-b-9dagi522kq 1.5s ease-in-out infinite;
}

.aps-skel-text[b-9dagi522kq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-3);
}

.aps-skel-row[b-9dagi522kq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 6px;
}

.aps-skel-line[b-9dagi522kq] {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ede9e3, #f4f5f8, #ede9e3);
    background-size: 200% 100%;
    animation: aps-shimmer-b-9dagi522kq 1.5s ease-in-out infinite;
}

    .aps-skel-line.w-2-3[b-9dagi522kq] { width: 66%; }
    .aps-skel-line.w-1-2[b-9dagi522kq] { width: 50%; height: 8px; margin-top: 6px; }
    .aps-skel-line.w-code[b-9dagi522kq] { width: 36px; height: 14px; flex-shrink: 0; background: linear-gradient(90deg, #ffe0c7, #fff2e8, #ffe0c7); background-size: 200% 100%; }

@keyframes aps-shimmer-b-9dagi522kq {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes aps-plane-b-9dagi522kq {
    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-9dagi522kq {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0.6; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/CurrencyInput.razor.rz.scp.css */
/* CurrencyInput — Manager Dashboard v4 theme */
.ci-input[b-pbvl8sdqwf] {
    --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-pbvl8sdqwf]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .ci-input:hover:not(:disabled)[b-pbvl8sdqwf] {
        border-color: #dde1e8;
    }

    .ci-input:focus[b-pbvl8sdqwf] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .ci-input:disabled[b-pbvl8sdqwf] {
        background: #f4f5f8;
        color: #7b8190;
        cursor: not-allowed;
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/DateMaskInput.razor.rz.scp.css */
/* DateMaskInput — Manager Dashboard v4 theme */
.dmi-root[b-kqm9o92xr5] {
    --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-kqm9o92xr5] {
    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-kqm9o92xr5]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .dmi-input:hover[b-kqm9o92xr5] {
        border-color: #dde1e8;
    }

    .dmi-input:focus[b-kqm9o92xr5] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .dmi-input.is-invalid[b-kqm9o92xr5] {
        border-color: var(--d-danger);
    }

        .dmi-input.is-invalid:focus[b-kqm9o92xr5] {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
        }

.dmi-guide[b-kqm9o92xr5] {
    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-kqm9o92xr5] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.dmi-icon-btn[b-kqm9o92xr5] {
    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-kqm9o92xr5] {
        color: var(--d-accent);
    }

    .dmi-icon-btn svg[b-kqm9o92xr5] {
        width: 16px;
        height: 16px;
    }

.dmi-error[b-kqm9o92xr5] {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--d-danger);
    line-height: 1.3;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/DebouncedSearchInput.razor.rz.scp.css */
/* DebouncedSearchInput — Manager Dashboard v4 theme */
.dsi-root[b-m8pm1iywno] {
    --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-m8pm1iywno] {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.dsi-input[b-m8pm1iywno] {
    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-m8pm1iywno]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .dsi-input:hover[b-m8pm1iywno] {
        border-color: #dde1e8;
    }

    .dsi-input:focus[b-m8pm1iywno] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        background: var(--d-surface);
    }

.dsi-clear[b-m8pm1iywno] {
    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-m8pm1iywno] {
        background: var(--d-surface-2);
        color: var(--d-ink-2);
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/FileUploadComponent.razor.rz.scp.css */
/* FileUploadComponent — Manager Dashboard v4 theme */
.fuc-root[b-plcjyx7qth] {
    --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);
}

/* Input file phủ kín vùng thả, trong suốt ⇒ nhận cả cú bấm lẫn tệp kéo-thả gốc của trình duyệt.
   <InputFile> là component con ⇒ thẻ <input> nó vẽ không mang scope-id của tệp này ⇒ phải qua ::deep. */
.fuc-drop[b-plcjyx7qth]  .fuc-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ─── Drop zone ─── */
.fuc-drop[b-plcjyx7qth] {
    position: relative;
    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-plcjyx7qth] {
        border-color: var(--d-ink-4);
        background: var(--d-surface);
    }

    /* Tab tới input trong suốt ⇒ vẫn thấy vùng đang được chọn. */
    .fuc-drop:focus-within[b-plcjyx7qth] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
    }

    .fuc-drop.is-dragging[b-plcjyx7qth] {
        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-plcjyx7qth] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

.fuc-drop-label[b-plcjyx7qth] {
    display: block;
    cursor: pointer;
    pointer-events: none;
}

.fuc-drop-body[b-plcjyx7qth] {
    text-align: center;
    padding: 28px 20px;
}

.fuc-drop-ico[b-plcjyx7qth] {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    color: var(--d-ink-4);
}

.fuc-drop-spinner[b-plcjyx7qth] {
    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-plcjyx7qth 0.7s linear infinite;
}

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

.fuc-drop-title[b-plcjyx7qth] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    margin: 0 0 4px;
}

    .fuc-drop-title .accent[b-plcjyx7qth] {
        color: var(--d-accent);
        font-weight: 600;
    }

    .fuc-drop-title .muted[b-plcjyx7qth] {
        color: var(--d-ink-3);
        font-weight: 400;
    }

.fuc-drop-hint[b-plcjyx7qth] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
}

.fuc-drop-uploading-text[b-plcjyx7qth] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-accent);
    margin: 0;
}

/* ─── File list ─── */
.fuc-list[b-plcjyx7qth] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fuc-item[b-plcjyx7qth] {
    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-plcjyx7qth] {
        border-color: #dde1e8;
        background: var(--d-surface);
    }

.fuc-item-ico[b-plcjyx7qth] {
    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-plcjyx7qth] { background: var(--d-danger); }
    .fuc-item-ico.is-doc[b-plcjyx7qth] { background: #2563eb; }
    .fuc-item-ico.is-xls[b-plcjyx7qth] { background: var(--d-good); }
    .fuc-item-ico.is-img[b-plcjyx7qth] { background: var(--d-accent-grad); }
    .fuc-item-ico.is-zip[b-plcjyx7qth] { background: var(--d-warn); }

    .fuc-item-ico svg[b-plcjyx7qth] {
        width: 18px;
        height: 18px;
    }

.fuc-item-info[b-plcjyx7qth] {
    flex: 1;
    min-width: 0;
}

.fuc-item-name[b-plcjyx7qth] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuc-item-size[b-plcjyx7qth] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Progress */
.fuc-progress[b-plcjyx7qth] {
    margin-top: 6px;
}

.fuc-progress-bar[b-plcjyx7qth] {
    height: 4px;
    background: var(--d-line-2);
    border-radius: 999px;
    overflow: hidden;
}

.fuc-progress-fill[b-plcjyx7qth] {
    height: 100%;
    background: var(--d-accent-grad);
    transition: width .25s ease;
}

.fuc-progress-text[b-plcjyx7qth] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--d-ink-3);
    margin-top: 3px;
}

/* Status */
.fuc-status[b-plcjyx7qth] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

    .fuc-status.is-good[b-plcjyx7qth] { color: var(--d-good); }
    .fuc-status.is-error[b-plcjyx7qth] { color: var(--d-danger); }

    .fuc-status svg[b-plcjyx7qth] {
        width: 12px;
        height: 12px;
    }

/* Remove button */
.fuc-remove[b-plcjyx7qth] {
    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-plcjyx7qth] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

    .fuc-remove svg[b-plcjyx7qth] {
        width: 16px;
        height: 16px;
    }

/* ─── Errors ─── */
.fuc-errors[b-plcjyx7qth] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fuc-error[b-plcjyx7qth] {
    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-plcjyx7qth] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--d-danger);
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/MoneyInput.razor.rz.scp.css */
/* MoneyInput — Manager Dashboard v4 theme */
.mi-root[b-65m197uchc] {
    --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-65m197uchc] {
    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-65m197uchc]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .mi-input:hover:not(:disabled)[b-65m197uchc] {
        border-color: #dde1e8;
    }

    .mi-input:focus[b-65m197uchc] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .mi-input:disabled[b-65m197uchc] {
        background: #f4f5f8;
        color: var(--d-ink-3);
        cursor: not-allowed;
    }

.mi-suffix[b-65m197uchc] {
    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;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Inputs/NmDatePicker.razor.rz.scp.css */
/* ── Leading icon chip (chỉ FlightSearchBox truyền) ──────────── */
.dp-lead-ico[b-1pxsb1gptt] {
    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-1pxsb1gptt]  svg {
        width: 15px;
        height: 15px;
    }

.range-trigger.dp-open .dp-lead-ico[b-1pxsb1gptt],
.single-trigger.dp-open .dp-lead-ico[b-1pxsb1gptt] {
    background: #fff2e8;
    border-color: #ffd9bd;
    color: #ff6b00;
}

/* ── Trigger area ─────────────────────────────────────────── */
.range-trigger.dp-open[b-1pxsb1gptt],
.single-trigger.dp-open[b-1pxsb1gptt] {
    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-1pxsb1gptt],
.single-trigger > div[b-1pxsb1gptt] {
    min-width: 0;
}

.dp-label[b-1pxsb1gptt],
.dp-value[b-1pxsb1gptt] {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Blinking cursor on the active field */
@keyframes blink-b-1pxsb1gptt {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.field-active[b-1pxsb1gptt]::after {
    content: '|';
    animation: blink-b-1pxsb1gptt 1s infinite;
    color: #FF6B35;
    display: inline-block;
    margin-left: 1px;
}

/* ── Calendar panel position ──────────────────────────────── */
.calendar-panel[b-1pxsb1gptt] {
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    max-width: fit-content;
}

/* top/left do NmDatePicker tính bằng JS (inline, đã kẹp trong viewport). KHÔNG dùng lại cặp left:50% + translateX(-50%) của
   thời panel còn absolute: inline left thắng left:50% nhưng transform vẫn áp ⇒ trên điện thoại lịch lệch nửa bề rộng ra ngoài mép trái. */
@media (max-width: 768px) {
    .calendar-panel[b-1pxsb1gptt] {
        max-width: calc(100vw - 16px);
    }
}

/* ── Day cells ────────────────────────────────────────────── */
.day-cell[b-1pxsb1gptt] {
    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-1pxsb1gptt] {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: #111827;
}

/* Today */
.today-day[b-1pxsb1gptt] {
    background-color: transparent;
}
.today-day:hover[b-1pxsb1gptt] {
    background-color: #f3f4f6;
}
.today-day .day-num[b-1pxsb1gptt] {
    color: #FF6B35;
    font-weight: 700;
}

/* Selected / Start / End */
.day-cell.bg-\[\#FF6B35\] .day-num[b-1pxsb1gptt],
.day-cell.bg-\[\#FF6B35\] .lunar-label[b-1pxsb1gptt] {
    color: #ffffff !important;
}

/* In range */
.day-cell.bg-orange-100:hover[b-1pxsb1gptt] {
    background-color: rgba(255, 107, 53, 0.18);
}

/* Preview range (while hovering before confirming end date) */
@keyframes previewPulse-b-1pxsb1gptt {
    0%, 100% { background-color: rgba(255, 107, 53, 0.14); }
    50%       { background-color: rgba(255, 107, 53, 0.24); }
}
@keyframes previewEndPulse-b-1pxsb1gptt {
    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-1pxsb1gptt] {
    animation: previewPulse-b-1pxsb1gptt 1.5s ease-in-out infinite;
}

.preview-end-date[b-1pxsb1gptt] {
    animation: previewEndPulse-b-1pxsb1gptt 1.5s ease-in-out infinite;
    border: 2px dashed rgba(255, 107, 53, 0.5);
    border-radius: 6px;
}
.preview-end-date .day-num[b-1pxsb1gptt] {
    color: #FF6B35;
    font-weight: 700;
}

/* ── Lunar date label ─────────────────────────────────────── */
.lunar-label[b-1pxsb1gptt] {
    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-1pxsb1gptt] {
    color: rgba(255,255,255,0.75);
}

/* ── Navigation button ────────────────────────────────────── */
.nav-btn[b-1pxsb1gptt] {
    color: #374151;
    flex-shrink: 0;
}
.nav-btn:hover:not(:disabled)[b-1pxsb1gptt] {
    background-color: #f3f4f6;
    color: #111827;
}
.nav-btn:disabled[b-1pxsb1gptt] {
    opacity: 0.3;
    cursor: not-allowed;
}
/* _content/NGOCMAI.B2E.FE.UI/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-42j1hthmur] {
    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;
}
/* _content/NGOCMAI.B2E.FE.UI/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-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    color: #10b981;
    flex-shrink: 0;
}

.ins-brand[b-o6wj2uzxcf] {
    font-size: 10px;
    font-weight: 400;
    color: var(--d-ink-4);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 2px;
}

.ins-deselect[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.ins-deselect svg[b-o6wj2uzxcf] {
    color: currentColor;
}

.ins-body[b-o6wj2uzxcf] {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ins-loading[b-o6wj2uzxcf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-size: 14px;
    color: var(--d-ink-3);
}

.ins-spinner[b-o6wj2uzxcf] {
    width: 14px;
    height: 14px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ins-spin-b-o6wj2uzxcf .9s linear infinite;
}

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

.ins-desc[b-o6wj2uzxcf] {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

.ins-option[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    border-color: #34d399;
}

.ins-option.is-selected[b-o6wj2uzxcf] {
    border-color: #10b981;
    background: #ecfdf5;
}

.ins-option input[type="radio"][b-o6wj2uzxcf] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ins-radio[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    border-color: #10b981;
    background: #10b981;
}

.ins-radio-dot[b-o6wj2uzxcf] {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

.ins-option-body[b-o6wj2uzxcf] {
    flex: 1;
    min-width: 0;
}

.ins-option-top[b-o6wj2uzxcf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ins-name[b-o6wj2uzxcf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.3;
}

.ins-price[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ins-benefits li[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    flex-shrink: 0;
    margin-top: 3px;
    color: #059669;
}

.ins-insurer[b-o6wj2uzxcf] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
}

.ins-links[b-o6wj2uzxcf] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.ins-links a[b-o6wj2uzxcf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #059669;
    text-decoration: none;
}

.ins-links a:hover[b-o6wj2uzxcf] {
    text-decoration: underline;
}

.ins-links a svg[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    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-o6wj2uzxcf] { 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-o6wj2uzxcf] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.ins-retry[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

.ins-error-banner[b-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    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-o6wj2uzxcf] {
    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-o6wj2uzxcf] { flex-shrink: 0; margin-top: 2px; }
/* _content/NGOCMAI.B2E.FE.UI/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-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.inssc--boxed[b-czh9kkd2e4] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.inssc-head[b-czh9kkd2e4] {
    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-czh9kkd2e4] { padding: 14px 16px; }

.inssc-head__text[b-czh9kkd2e4] { max-width: 64ch; }
.inssc-head__act[b-czh9kkd2e4] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.inssc-lastscan[b-czh9kkd2e4] {
    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-czh9kkd2e4] { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.inssc-hint[b-czh9kkd2e4] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }

.inssc-body[b-czh9kkd2e4] { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.inssc--boxed .inssc-body[b-czh9kkd2e4] { padding: 14px 16px; }

.inssc-note[b-czh9kkd2e4] {
    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-czh9kkd2e4] {
    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-czh9kkd2e4] { display: flex; align-items: center; gap: 10px; }

.inssc-scan__ico[b-czh9kkd2e4] {
    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-czh9kkd2e4] { display: block; animation: inssc-spin-b-czh9kkd2e4 1.1s linear infinite; }

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

.inssc-scan__text[b-czh9kkd2e4] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inssc-scan__step[b-czh9kkd2e4] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.inssc-scan__note[b-czh9kkd2e4] { 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-czh9kkd2e4] {
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-brand-700);
    flex-shrink: 0;
    align-self: flex-start;
}

.inssc-scan__skel[b-czh9kkd2e4] { 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-czh9kkd2e4] { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .inssc-scan__ico i[b-czh9kkd2e4] { animation: none; }
}

/* ── Section ── */
.inssc-sec[b-czh9kkd2e4] { display: flex; flex-direction: column; gap: 8px; }
.inssc-sec--history[b-czh9kkd2e4] { padding-top: 12px; border-top: 1px solid var(--nm-border); }

.inssc-sec-head[b-czh9kkd2e4] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.inssc-sec-lbl[b-czh9kkd2e4] {
    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-czh9kkd2e4] {
    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-czh9kkd2e4] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; }
.inssc-stamp[b-czh9kkd2e4] { font-size: 12px; color: var(--nm-ink); white-space: nowrap; }
.inssc-num[b-czh9kkd2e4] {
    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-czh9kkd2e4] { color: var(--nm-muted); }
.inssc-em[b-czh9kkd2e4] { color: var(--nm-brand-700); font-weight: 700; }
.inssc-bad[b-czh9kkd2e4] { color: var(--nm-bad); }

.inssc-2line[b-czh9kkd2e4] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.inssc-2line__main[b-czh9kkd2e4] { font-weight: 500; color: var(--nm-ink); }
.inssc-2line__sub[b-czh9kkd2e4] {
    font-size: 11px;
    color: var(--nm-muted);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-czh9kkd2e4] .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-czh9kkd2e4] {
    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-czh9kkd2e4] { color: var(--nm-ink); font-weight: 600; }
.inssc-row-note--bad[b-czh9kkd2e4] { background: color-mix(in srgb, var(--nm-bad) 8%, transparent); color: var(--nm-bad); }
.inssc-row-note--bad b[b-czh9kkd2e4] { color: var(--nm-bad); }

/* ── Chốt cập nhật ── */
.inssc-apply[b-czh9kkd2e4] {
    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-czh9kkd2e4] { margin: 0; font-size: 12.5px; color: var(--nm-ink); }
.inssc-apply__sum b[b-czh9kkd2e4] { 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-czh9kkd2e4] {
    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-czh9kkd2e4] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inssc-await__ico[b-czh9kkd2e4] {
    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-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.inssc-await__text b[b-czh9kkd2e4] { font-size: 12.5px; color: var(--nm-ink); font-weight: 600; }
.inssc-await__meta[b-czh9kkd2e4] { font-size: 11.5px; color: var(--nm-muted); }

.inssc-await__list[b-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inssc-await__row[b-czh9kkd2e4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inssc-await__name[b-czh9kkd2e4] { font-size: 12px; color: var(--nm-ink); }
.inssc-await__pid[b-czh9kkd2e4] { font-size: 11px; color: var(--nm-muted); }

.inssc-await__note[b-czh9kkd2e4] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }
.inssc-await__partner[b-czh9kkd2e4] { font-size: 11px; color: var(--nm-muted); font-style: italic; }

/* ── Nhà bảo hiểm báo THẤT BẠI → gửi lại ─────────────────────────────────
   Cùng khung với khối chờ nhưng tông "bad": chờ là bình thường, thất bại là việc phải xử lý. */
.inssc-fail[b-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border-radius: var(--nm-r-card);
    border: 1px solid color-mix(in srgb, var(--nm-bad) 35%, transparent);
    background: color-mix(in srgb, var(--nm-bad) 7%, transparent);
}
.inssc-fail__head[b-czh9kkd2e4] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inssc-fail__ico[b-czh9kkd2e4] {
    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-bad) 18%, transparent);
    color: var(--nm-bad);
    font-size: 14px;
}
.inssc-fail__text[b-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.inssc-fail__text b[b-czh9kkd2e4] { font-size: 12.5px; color: var(--nm-ink); font-weight: 600; }
.inssc-fail__meta[b-czh9kkd2e4] { font-size: 11.5px; color: var(--nm-muted); }

.inssc-fail__list[b-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inssc-fail__row[b-czh9kkd2e4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inssc-fail__name[b-czh9kkd2e4] { font-size: 12px; color: var(--nm-ink); }
.inssc-fail__pid[b-czh9kkd2e4] { font-size: 11px; color: var(--nm-muted); }
.inssc-fail__why[b-czh9kkd2e4] { font-size: 11px; color: var(--nm-bad); }

/* Ô xác nhận thu thêm — nền đặc hơn để tách khỏi khối đỏ nhạt bao ngoài. */
.inssc-fail__confirm[b-czh9kkd2e4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: var(--nm-r-input);
    border: 1px solid color-mix(in srgb, var(--nm-warn) 40%, transparent);
    background: var(--nm-surface);
}
.inssc-fail__confirm-text[b-czh9kkd2e4] { margin: 0; font-size: 12px; color: var(--nm-ink); line-height: 1.5; }
.inssc-fail__confirm-act[b-czh9kkd2e4] { display: flex; gap: 8px; justify-content: flex-end; }

.inssc-fail__note[b-czh9kkd2e4] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }
/* _content/NGOCMAI.B2E.FE.UI/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-jo556apcl5] {
    background: #fff;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insup-head[b-jo556apcl5] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.insup-ico[b-jo556apcl5] {
    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-jo556apcl5] { margin: 0; font-size: 15px; font-weight: 700; color: #121212; }
.insup-sub[b-jo556apcl5] { margin: 2px 0 0; font-size: 12.5px; color: #7b8190; line-height: 1.5; }

.insup-loading[b-jo556apcl5] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7b8190;
}

.insup-spinner[b-jo556apcl5] {
    width: 14px;
    height: 14px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: insup-spin-b-jo556apcl5 .9s linear infinite;
}

@keyframes insup-spin-b-jo556apcl5 { 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-jo556apcl5] { border-color: #fde68a; background: #fffbeb; }
.insup-pending .insup-ico[b-jo556apcl5] { background: #fef3c7; color: #b45309; }

.insup-card[b-jo556apcl5] {
    border: 1px solid #f0f0ef;
    border-radius: 10px;
    padding: 13px 15px;
    background: #fafaf9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insup-card-top[b-jo556apcl5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.insup-name[b-jo556apcl5] { font-size: 14px; font-weight: 600; color: #121212; line-height: 1.3; }
.insup-price[b-jo556apcl5] { font-size: 15px; font-weight: 700; color: #059669; flex-shrink: 0; }

.insup-benefits[b-jo556apcl5] {
    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-jo556apcl5] {
    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-jo556apcl5] { flex-shrink: 0; margin-top: 3px; color: #059669; }

.insup-insurer[b-jo556apcl5] { font-size: 11px; color: #7b8190; }

.insup-card-foot[b-jo556apcl5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.insup-links[b-jo556apcl5] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.insup-links a[b-jo556apcl5] { font-size: 11.5px; color: #059669; text-decoration: none; }
.insup-links a:hover[b-jo556apcl5] { text-decoration: underline; }

.insup-actions[b-jo556apcl5] { display: flex; justify-content: flex-end; }

.insup-btn[b-jo556apcl5] {
    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-jo556apcl5] { background: #059669; border-color: #059669; color: #fff; }
.insup-btn-primary:hover:not(:disabled)[b-jo556apcl5] { background: #047857; border-color: #047857; }
.insup-btn:disabled[b-jo556apcl5] { opacity: .6; cursor: default; }

.insup-note[b-jo556apcl5] { margin: 0; font-size: 11.5px; color: #a5abb8; line-height: 1.5; }

.insup-error[b-jo556apcl5] {
    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-jo556apcl5] { flex-direction: column; align-items: stretch; }
    .insup-btn[b-jo556apcl5] { 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-jo556apcl5] { font-size: 11px; color: #7b8190; line-height: 1.45; }

.insup-excluded[b-jo556apcl5] {
    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-jo556apcl5] { flex-shrink: 0; margin-top: 2px; }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Modals/EmployeeImportModal.razor.rz.scp.css */
/* EmployeeImportModal — Manager Dashboard v4 theme */
.eim-overlay[b-2d8k1fvl0x] {
    --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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

    .eim-subtitle code[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.eim-body[b-2d8k1fvl0x] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eim-error[b-2d8k1fvl0x] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.eim-tpl-card[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    font-size: 12px;
    color: var(--d-ink-2);
    line-height: 1.5;
    min-width: 0;
}

    .eim-tpl-text b[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
    display: block;
    margin-top: 3px;
    line-height: 1.5;
}

    .eim-tier strong[b-2d8k1fvl0x] {
        margin-right: 4px;
    }

.eim-tier-note[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

.eim-field-label[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .eim-file[b-2d8k1fvl0x]::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-2d8k1fvl0x]::file-selector-button:hover {
            background: var(--d-accent-grad-hover);
        }

.eim-file-info[b-2d8k1fvl0x] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .eim-file-info b[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.eim-mode[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

    .eim-mode.is-on[b-2d8k1fvl0x] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .eim-mode:disabled[b-2d8k1fvl0x] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.eim-mode-name[b-2d8k1fvl0x] {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
}

.eim-mode-desc[b-2d8k1fvl0x] {
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.45;
}

/* ── Vai trò mặc định ── */
.eim-role-grid[b-2d8k1fvl0x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.eim-role[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

    .eim-role.is-on[b-2d8k1fvl0x] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

.eim-role-name[b-2d8k1fvl0x] {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
}

.eim-role-desc[b-2d8k1fvl0x] {
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.4;
}

.eim-hint[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        margin: 0 0 8px;
    }

    .eim-hint.is-warn[b-2d8k1fvl0x] {
        color: #b45309;
        font-weight: 500;
    }

/* ── Tổng kết kiểm tra tại chỗ ── */
.eim-check[b-2d8k1fvl0x] {
    padding: 9px 12px;
    border-radius: var(--d-r);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

    .eim-check.is-ok[b-2d8k1fvl0x] {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .eim-check.is-bad[b-2d8k1fvl0x] {
        border-color: #fed7aa;
        background: #fff7ed;
        color: #b45309;
    }

    /* Đang gọi máy chủ kiểm tra */
    .eim-check.is-run[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        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-2d8k1fvl0x],
.eim-diag-warn[b-2d8k1fvl0x] {
    display: block;
}

.eim-diag-ok[b-2d8k1fvl0x] { color: #15803d; }

.eim-diag-warn[b-2d8k1fvl0x] {
    color: #b45309;
    font-weight: 500;
}

/* ── Nhãn trạng thái từng dòng ── */
.eim-badge[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        background: #f0fdf4;
        color: #15803d;
        border: 1px solid #bbf7d0;
    }

    .eim-badge.is-bad[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
    }

.eim-tbl tbody tr.is-bad td[b-2d8k1fvl0x] {
    background: #fffbfb;
}

/* ── Mức sẵn sàng dùng hệ thống ── */
.eim-ready[b-2d8k1fvl0x] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}

    .eim-ready b[b-2d8k1fvl0x] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #b45309;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .eim-ready ul[b-2d8k1fvl0x] {
        margin: 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .eim-ready li[b-2d8k1fvl0x] {
        font-size: 12.5px;
        color: var(--d-ink-2);
        line-height: 1.5;
    }

.eim-ready-n[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    color: #b45309;
    background: #fff7ed;
}

.eim-result-actions[b-2d8k1fvl0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.eim-section-title[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: auto;
    max-height: 320px;
}

.eim-tbl[b-2d8k1fvl0x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .eim-tbl thead th[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
        border-bottom: 0;
    }

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

    .eim-tbl td.center[b-2d8k1fvl0x] {
        text-align: center;
        color: var(--d-ink-4);
    }

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

    .eim-tbl td.muted[b-2d8k1fvl0x] {
        color: var(--d-ink-3);
    }

.eim-more[b-2d8k1fvl0x] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin: 6px 0 0;
}

.eim-result[b-2d8k1fvl0x] {
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

    .eim-result h3[b-2d8k1fvl0x] {
        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-2d8k1fvl0x] {
        margin: 0;
        font-size: 14px;
        color: var(--d-ink-2);
    }

    .eim-result .ok[b-2d8k1fvl0x] {
        font-weight: 600;
        color: #16a34a;
        font-variant-numeric: tabular-nums;
    }

    .eim-result .err[b-2d8k1fvl0x] {
        font-weight: 600;
        color: #dc2626;
        font-variant-numeric: tabular-nums;
    }

    .eim-result .warn[b-2d8k1fvl0x] {
        font-weight: 600;
        color: #d97706;
        font-variant-numeric: tabular-nums;
    }

    .eim-result details[b-2d8k1fvl0x] {
        margin-top: 8px;
        font-size: 12px;
    }

        .eim-result details summary[b-2d8k1fvl0x] {
            cursor: pointer;
            font-weight: 500;
            padding: 4px 0;
        }

        .eim-result details ul[b-2d8k1fvl0x] {
            margin: 6px 0 0;
            padding-left: 18px;
        }

    .eim-result .eim-err-list[b-2d8k1fvl0x] { color: #b91c1c; }
    .eim-result .eim-err-list li[b-2d8k1fvl0x] { line-height: 1.6; }
    .eim-result .eim-warn-list[b-2d8k1fvl0x] { color: #92400e; }
    .eim-result .eim-warn-list li[b-2d8k1fvl0x] { line-height: 1.6; }

.eim-foot[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.eim-btn-primary[b-2d8k1fvl0x] {
    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-2d8k1fvl0x] {
        background: var(--d-accent-grad-hover);
        color: #ffffff;
    }

.eim-btn:disabled[b-2d8k1fvl0x] {
    opacity: 0.55;
    cursor: not-allowed;
}

.eim-spin[b-2d8k1fvl0x] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eim-spin-b-2d8k1fvl0x 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-2d8k1fvl0x] {
    width: 13px;
    height: 13px;
    border-color: rgba(255, 107, 0, 0.25);
    border-top-color: #ff6b00;
}

@keyframes eim-spin-b-2d8k1fvl0x {
    to { transform: rotate(360deg); }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Modals/OverBudgetHoldConfirmModal.razor.rz.scp.css */
/* OverBudgetHoldConfirmModal — token-only (NM UI).

   BẪY đã sửa: markup cũ dùng .nm-form-stack / .nm-list-sub / .nm-form-grid, nhưng đó là
   class do TỪNG TRANG tự khai trong scoped css của nó — component này chưa hề có file
   .razor.css nào, nên cả 3 class đều CHẾT. Hệ quả: mọi dòng đổ về cùng một cỡ chữ, cùng
   một màu, không khoảng cách, không lưới → hộp thoại thành một khối chữ liền không phân cấp. */

.obh[b-1bnss1j9qx] { display: flex; flex-direction: column; gap: 14px; }

/* (1) Chuyện gì xảy ra — đoạn dẫn, nhạt hơn chữ chính để không tranh với khối cảnh báo */
.obh-lead[b-1bnss1j9qx] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nm-ink-2);
}

/* (2) Vượt ở đâu — nằm trong NmAlert tone Warn; ở đây chỉ lo phần danh sách lý do */
.obh-reasons[b-1bnss1j9qx] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.obh-reasons li[b-1bnss1j9qx] {
    position: relative;
    padding-left: 14px;
    line-height: 1.55;
}
/* Chấm đầu dòng vẽ bằng ::before để chữ xuống dòng thụt đúng lề, không bị kéo về sát mép */
.obh-reasons li[b-1bnss1j9qx]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nm-warn);
}
/* Một lý do thì cái chấm chỉ là nhiễu */
.obh-reasons li:only-child[b-1bnss1j9qx] { padding-left: 0; }
.obh-reasons li:only-child[b-1bnss1j9qx]::before { display: none; }

/* (3) Đơn này là gì, bao nhiêu — nhãn trái / giá trị phải, mỗi dòng một dữ kiện */
.obh-facts[b-1bnss1j9qx] {
    margin: 0;
    padding: 2px 14px;
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
}
.obh-fact[b-1bnss1j9qx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}
.obh-fact + .obh-fact[b-1bnss1j9qx] { border-top: 1px solid var(--nm-border); }
.obh-fact dt[b-1bnss1j9qx] {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--nm-muted);
}
.obh-fact dd[b-1bnss1j9qx] {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-ink);
    overflow-wrap: anywhere;
}
/* Số tiền là dữ kiện quyết định → to và đậm nhất trong hộp thoại */
.obh-fact dd.obh-amount[b-1bnss1j9qx] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* (4) Trấn an — cố ý nhỏ và mờ, KHÔNG dùng NmAlert kẻo nặng ngang khối cảnh báo thật */
.obh-note[b-1bnss1j9qx] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nm-muted);
}
.obh-note i[b-1bnss1j9qx] {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 14px;
    color: var(--nm-ok);
}

/* Máy hẹp: nhãn/giá trị chồng lên nhau còn hơn để tên dịch vụ vỡ chữ */
@media (max-width: 420px) {
    .obh-fact[b-1bnss1j9qx] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .obh-fact dd[b-1bnss1j9qx] { text-align: left; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Modals/QrPaymentModal.razor.rz.scp.css */
/* QrPaymentModal — Manager Dashboard v4 theme (warm-neutral + orange) */
.qrm-overlay[b-dnuco16hdn] {
    --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-dnuco16hdn] {
    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-dnuco16hdn] {
    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-dnuco16hdn] {
    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-dnuco16hdn] {
    flex: 1;
    min-width: 0;
}

.qrm-title[b-dnuco16hdn] {
    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-dnuco16hdn] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.qrm-close[b-dnuco16hdn] {
    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-dnuco16hdn] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: #dde1e8;
    }

.qrm-body[b-dnuco16hdn] {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* QR image */
.qrm-qr-wrap[b-dnuco16hdn] {
    display: flex;
    justify-content: center;
}

.qrm-qr-frame[b-dnuco16hdn] {
    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-dnuco16hdn] {
    width: 220px;
    height: 220px;
    display: block;
    image-rendering: pixelated;
}

/* Info rows */
.qrm-info[b-dnuco16hdn] {
    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-dnuco16hdn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    letter-spacing: -0.01em;
}

.qrm-info-label[b-dnuco16hdn] {
    color: var(--d-ink-3);
}

.qrm-info-value[b-dnuco16hdn] {
    color: var(--d-ink);
    font-weight: 500;
}

.qrm-mono[b-dnuco16hdn] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

.qrm-amount[b-dnuco16hdn] {
    color: var(--d-ink);
    font-weight: 600;
}

.qrm-countdown[b-dnuco16hdn] {
    color: #b91c1c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Steps */
.qrm-steps[b-dnuco16hdn] {
    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-dnuco16hdn] {
        margin-top: 3px;
    }

/* Pulse indicator */
.qrm-pulse[b-dnuco16hdn] {
    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-dnuco16hdn] {
    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-dnuco16hdn 1.6s ease-out infinite;
}

@keyframes qrm-pulse-b-dnuco16hdn {
    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-dnuco16hdn] {
    text-align: center;
    padding: 18px 4px 8px;
}

.qrm-state-icon[b-dnuco16hdn] {
    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-dnuco16hdn] {
        background: #ecfdf5;
        border-color: #a7f3d0;
        color: #059669;
    }

    .qrm-state-icon.is-error[b-dnuco16hdn] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

.qrm-state-title[b-dnuco16hdn] {
    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-dnuco16hdn] {
    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-dnuco16hdn] {
        width: 190px;
        height: 190px;
    }

    .qrm-panel[b-dnuco16hdn] {
        max-width: 100%;
    }
}
/* _content/NGOCMAI.B2E.FE.UI/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-7nxdt2j0j3] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qa-head-sub[b-7nxdt2j0j3] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

.qa-body[b-7nxdt2j0j3] { display: flex; flex-direction: column; gap: 12px; }
.qa-options[b-7nxdt2j0j3] {
    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-7nxdt2j0j3] {
    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-7nxdt2j0j3] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qa-format-text b[b-7nxdt2j0j3] { font-size: 12px; font-weight: 700; color: var(--nm-ink); }
.qa-format-text small[b-7nxdt2j0j3] { font-size: 11.5px; color: var(--nm-ink-2); line-height: 1.5; }
.qa-format-cols[b-7nxdt2j0j3] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.qa-format-col[b-7nxdt2j0j3] {
    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-7nxdt2j0j3] { color: var(--nm-brand-700); border-color: var(--nm-brand-300); font-weight: 700; }
.qa-format-sep[b-7nxdt2j0j3] { color: var(--nm-muted); font-size: 11px; }

/* ── Ô nhập ── */
[b-7nxdt2j0j3] .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-7nxdt2j0j3] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qa-stat[b-7nxdt2j0j3] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.qa-stat b[b-7nxdt2j0j3] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.qa-stat.is-ok b[b-7nxdt2j0j3] { color: var(--nm-ok); }
.qa-stat.is-bad b[b-7nxdt2j0j3] { color: var(--nm-bad); }
.qa-meta-clear[b-7nxdt2j0j3] { margin-left: auto; }

/* ── Bảng xem trước ── */
.qa-preview[b-7nxdt2j0j3] {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
}
.qa-line[b-7nxdt2j0j3] { font-size: 11.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.qa-cell[b-7nxdt2j0j3] {
    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-7nxdt2j0j3] { font-weight: 600; color: var(--nm-ink); }
.qa-status[b-7nxdt2j0j3] { display: inline-flex; }

[b-7nxdt2j0j3] .qa-row-bad .nm-grid__td { background: var(--nm-bad-soft); }
[b-7nxdt2j0j3] .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-7nxdt2j0j3] { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-end; }
[b-7nxdt2j0j3] .qa-foot .nm-btn.qa-foot-retry { margin-right: auto; }

@media (max-width: 640px) {
    .qa-format[b-7nxdt2j0j3] { flex-direction: column; align-items: stretch; }
    .qa-cell[b-7nxdt2j0j3] { max-width: 130px; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Modals/ServiceRequestViolationModal.razor.rz.scp.css */
/* ServiceRequestViolationModal — Manager Dashboard v4 theme */
.srvm-overlay[b-xjvts3gll0] {
    --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-xjvts3gll0] {
    position: absolute;
    inset: 0;
}

.srvm-panel[b-xjvts3gll0] {
    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-xjvts3gll0] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.srvm-icon[b-xjvts3gll0] {
    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-xjvts3gll0] {
    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-xjvts3gll0] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.srvm-body[b-xjvts3gll0] {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.srvm-violations[b-xjvts3gll0] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
}

    .srvm-violations .lbl[b-xjvts3gll0] {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .srvm-violations ul[b-xjvts3gll0] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .srvm-violations li[b-xjvts3gll0] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #92400e;
        line-height: 1.5;
    }

    .srvm-violations svg[b-xjvts3gll0] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #d97706;
    }

.srvm-info[b-xjvts3gll0] {
    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-xjvts3gll0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .srvm-info-row + .srvm-info-row[b-xjvts3gll0] {
        border-top: 1px solid var(--d-line-2);
    }

    .srvm-info-row .k[b-xjvts3gll0] {
        color: var(--d-ink-3);
    }

    .srvm-info-row .v[b-xjvts3gll0] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .srvm-info-row .v.amount[b-xjvts3gll0] {
        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-xjvts3gll0] {
    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-xjvts3gll0] {
    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-xjvts3gll0] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.srvm-error[b-xjvts3gll0] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.srvm-success[b-xjvts3gll0] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

    .srvm-success .t[b-xjvts3gll0] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #15803d;
    }

    .srvm-success .d[b-xjvts3gll0] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #166534;
    }

.srvm-actions[b-xjvts3gll0] {
    padding: 16px 22px;
    border-top: 1px solid var(--d-line);
    display: flex;
    gap: 8px;
}

.srvm-btn[b-xjvts3gll0] {
    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-xjvts3gll0] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.srvm-btn-primary[b-xjvts3gll0] {
    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-xjvts3gll0] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.srvm-btn:disabled[b-xjvts3gll0] {
    opacity: 0.55;
    cursor: not-allowed;
}

.srvm-btn-grow[b-xjvts3gll0] {
    flex: 1;
}

.srvm-spin[b-xjvts3gll0] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: srvm-spin-b-xjvts3gll0 0.7s linear infinite;
}

@keyframes srvm-spin-b-xjvts3gll0 {
    to { transform: rotate(360deg); }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/PaymentResult/ESimPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ESimPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.epr-root[b-fmg9fwtah8] {
    --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-fmg9fwtah8] {
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -0.01em;
}

/* ─── Card primitive ─── */
.epr-card[b-fmg9fwtah8] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.epr-card-hd[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
    min-width: 0;
}

.epr-card-title[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

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

/* ─── Status pill ─── */
.epr-pill[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .epr-pill.warn[b-fmg9fwtah8] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: #fde68a;
    }

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

/* ─── QR / Activation block ─── */
.epr-qr-row[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
        flex-direction: row;
        align-items: center;
    }
}

.epr-qr-img[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.epr-qr-eyebrow[b-fmg9fwtah8] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-good);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.epr-kv[b-fmg9fwtah8] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .epr-kv .k[b-fmg9fwtah8] {
        color: var(--d-ink-3);
    }

    .epr-kv .v[b-fmg9fwtah8] {
        color: var(--d-ink);
        font-weight: 500;
        word-break: break-all;
        text-align: right;
    }

    .epr-kv .v.mono[b-fmg9fwtah8] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

.epr-link[b-fmg9fwtah8] {
    color: var(--d-accent);
    font-size: 12px;
    text-decoration: none;
    word-break: break-all;
}

    .epr-link:hover[b-fmg9fwtah8] {
        text-decoration: underline;
    }

/* ─── Pending box ─── */
.epr-pending[b-fmg9fwtah8] {
    background: var(--d-warn-soft);
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.epr-pending-hd[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

.epr-pending-hint[b-fmg9fwtah8] {
    font-size: 12px;
    color: var(--d-ink-2);
    margin: 0 0 10px;
}

.epr-error[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
    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-fmg9fwtah8] {
        background: var(--d-accent-grad-hover);
    }

    .epr-btn-accent:disabled[b-fmg9fwtah8] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .epr-btn-accent svg[b-fmg9fwtah8] {
        width: 16px;
        height: 16px;
    }

.epr-spin[b-fmg9fwtah8] {
    animation: epr-spin-b-fmg9fwtah8 0.7s linear infinite;
}

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

/* ─── Detail grid ─── */
.epr-grid[b-fmg9fwtah8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .epr-grid[b-fmg9fwtah8] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.epr-cell-lbl[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
    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-fmg9fwtah8] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.epr-grid > div[b-fmg9fwtah8] {
    min-width: 0;
}

/* ─── Date row ─── */
.epr-dates[b-fmg9fwtah8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .epr-dates strong[b-fmg9fwtah8] {
        color: var(--d-ink-2);
        font-weight: 500;
    }

/* ─── Guide ─── */
.epr-guide[b-fmg9fwtah8] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.epr-guide-hd[b-fmg9fwtah8] {
    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-fmg9fwtah8] {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/PaymentResult/FastTrackPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrackPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.ftpr-root[b-gjhe9bq4xt] {
    --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-gjhe9bq4xt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftpr-hero-ico[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
        width: 22px;
        height: 22px;
    }

.ftpr-hero-text h2[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.ftpr-card[b-gjhe9bq4xt] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftpr-card-hd[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    min-width: 0;
}

.ftpr-card-title[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.ftpr-pill[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Code chip ─── */
.ftpr-code[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftpr-code-val[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .ftpr-grid[b-gjhe9bq4xt] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ftpr-cell-lbl[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .ftpr-cell-val.mono[b-gjhe9bq4xt] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

.ftpr-money[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
        margin-left: 3px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-3);
    }

/* ─── Notes ─── */
.ftpr-notes[b-gjhe9bq4xt] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.ftpr-notes-hd[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

.ftpr-notes-list[b-gjhe9bq4xt] {
    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-gjhe9bq4xt] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .ftpr-notes-list li[b-gjhe9bq4xt]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* _content/NGOCMAI.B2E.FE.UI/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-jx0l2jdlba] {
    --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-jx0l2jdlba] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flpr-hd-ico[b-jx0l2jdlba] {
    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-jx0l2jdlba] {
        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-jx0l2jdlba] {
        width: 20px;
        height: 20px;
    }

.flpr-hd-text h2[b-jx0l2jdlba] {
    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-jx0l2jdlba] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

/* ─── Card primitive ─── */
.flpr-card[b-jx0l2jdlba] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.flpr-card-hd[b-jx0l2jdlba] {
    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-jx0l2jdlba] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* ─── Passenger table ─── */
.flpr-tbl-wrap[b-jx0l2jdlba] {
    overflow-x: auto;
    margin: 0 -16px -14px;
}

.flpr-tbl[b-jx0l2jdlba] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

    .flpr-tbl thead th[b-jx0l2jdlba] {
        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-jx0l2jdlba] {
            padding-left: 16px;
        }

        .flpr-tbl thead th:last-child[b-jx0l2jdlba] {
            padding-right: 16px;
        }

    .flpr-tbl tbody td[b-jx0l2jdlba] {
        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-jx0l2jdlba] {
            padding-left: 16px;
        }

        .flpr-tbl tbody td:last-child[b-jx0l2jdlba] {
            padding-right: 16px;
        }

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

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

.flpr-tbl-idx[b-jx0l2jdlba] {
    color: var(--d-ink-4);
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.flpr-tbl-name[b-jx0l2jdlba] {
    color: var(--d-ink);
    font-weight: 500;
}

.flpr-tbl-mono[b-jx0l2jdlba] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.flpr-seat-tag[b-jx0l2jdlba] {
    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-jx0l2jdlba] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .flpr-contact-grid[b-jx0l2jdlba] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.flpr-cell-lbl[b-jx0l2jdlba] {
    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-jx0l2jdlba] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
    word-break: break-word;
}

/* ─── Notes ─── */
.flpr-notes-list[b-jx0l2jdlba] {
    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-jx0l2jdlba] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .flpr-notes-list li[b-jx0l2jdlba]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-ink-4);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/PaymentResult/FlightTicketFace.razor.rz.scp.css */
/* ================================================================
   ui-ticket-international — scoped CSS
   ================================================================ */

.ticket[b-5pjjelt2sj] {
    /* 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-5pjjelt2sj] {
    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-5pjjelt2sj] {
    top: -14px;
    clip-path: polygon(0 42%, 100% 42%, 100% 100%, 0 100%);
}

.notch-bottom[b-5pjjelt2sj] {
    bottom: -14px;
    clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%);
}

/* LEFT — 40% gradient panel */
.left[b-5pjjelt2sj] {
    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-5pjjelt2sj]::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-5pjjelt2sj]::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-5pjjelt2sj] {
    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-5pjjelt2sj] {
    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-5pjjelt2sj] {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.left h2[b-5pjjelt2sj] {
    margin: 0;
    font-size: 15px;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.left .logo[b-5pjjelt2sj] {
    margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.left .logo img[b-5pjjelt2sj] {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(255, 253, 253, 0.8));
}

.info[b-5pjjelt2sj] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* RIGHT — 60% cream panel */
.right[b-5pjjelt2sj] {
    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-5pjjelt2sj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    flex: 1;
    gap: 6px;
}

.time[b-5pjjelt2sj] {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.time.start[b-5pjjelt2sj] {
    color: #ff7d1f;
}

.time.end[b-5pjjelt2sj] {
    color: #ff9a52;
    text-align: end;
}

.airport[b-5pjjelt2sj] {
    font-size: 14px;
    margin-top: 3px;
    color: #475569;
    line-height: 1.5;
}

.airport.end[b-5pjjelt2sj] {
    text-align: end;
}

.route[b-5pjjelt2sj] {
    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-5pjjelt2sj] {
    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-5pjjelt2sj] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
}

.route .plane-line[b-5pjjelt2sj] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #ff7d1f;
}

.route .plane-icon[b-5pjjelt2sj] {
    width: 18px;
    height: 18px;
    fill: #ff7d1f;
    flex-shrink: 0;
}

.route .duration-pill[b-5pjjelt2sj] {
    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-5pjjelt2sj] {
    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;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/PaymentResult/HotelPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HotelPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.hpr-root[b-c6ej1vfzd3] {
    --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-c6ej1vfzd3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hpr-hero-ico[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
        width: 22px;
        height: 22px;
    }

.hpr-hero-text h2[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.hpr-card[b-c6ej1vfzd3] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

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

.hpr-card-title[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

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

/* ─── Code chips ─── */
.hpr-codes[b-c6ej1vfzd3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hpr-code[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .hpr-code.accent[b-c6ej1vfzd3] {
        background: var(--d-accent-grad-soft);
        border-color: #ffe0c7;
    }

.hpr-code-lbl[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    color: var(--d-good);
}

.hpr-code.accent .hpr-code-lbl[b-c6ej1vfzd3] {
    color: var(--d-accent);
}

.hpr-code-val[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    color: var(--d-good);
}

.hpr-code.accent .hpr-code-val[b-c6ej1vfzd3] {
    color: var(--d-accent);
}

/* ─── Detail grid ─── */
.hpr-grid[b-c6ej1vfzd3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .hpr-grid[b-c6ej1vfzd3] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hpr-cell-lbl[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .hpr-cell-val.mono[b-c6ej1vfzd3] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

/* ─── Timeline ─── */
.hpr-timeline[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    text-align: center;
    flex-shrink: 0;
}

.hpr-tl-lbl[b-c6ej1vfzd3] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hpr-tl-date[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    font-size: 11px;
    color: var(--d-ink-4);
}

.hpr-tl-mid[b-c6ej1vfzd3] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hpr-tl-line[b-c6ej1vfzd3] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

.hpr-tl-mid-lbl[b-c6ej1vfzd3] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    white-space: nowrap;
}

/* ─── Guests list ─── */
.hpr-guests[b-c6ej1vfzd3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hpr-guest-row[b-c6ej1vfzd3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.hpr-avatar[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    color: var(--d-ink);
    font-weight: 500;
}

.hpr-guest-id[b-c6ej1vfzd3] {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

/* ─── Notes ─── */
.hpr-notes-hd[b-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
    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-c6ej1vfzd3] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .hpr-notes-list li[b-c6ej1vfzd3]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/PaymentResult/TourPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TourPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.tpr-root[b-key07p0thh] {
    --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-key07p0thh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tpr-hero-ico[b-key07p0thh] {
    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-key07p0thh] {
        width: 22px;
        height: 22px;
    }

.tpr-hero-text h2[b-key07p0thh] {
    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-key07p0thh] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.tpr-card[b-key07p0thh] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

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

.tpr-card-title[b-key07p0thh] {
    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-key07p0thh] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

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

/* ─── Code chips ─── */
.tpr-codes[b-key07p0thh] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tpr-code[b-key07p0thh] {
    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-key07p0thh] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .tpr-code.accent[b-key07p0thh] {
        background: var(--d-accent-grad-soft);
        border-color: #ffe0c7;
    }

.tpr-code-lbl[b-key07p0thh] {
    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-key07p0thh] {
    color: var(--d-good);
}

.tpr-code.accent .tpr-code-lbl[b-key07p0thh] {
    color: var(--d-accent);
}

.tpr-code-val[b-key07p0thh] {
    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-key07p0thh] {
    color: var(--d-good);
}

.tpr-code.accent .tpr-code-val[b-key07p0thh] {
    color: var(--d-accent);
}

/* ─── Timeline ─── */
.tpr-timeline[b-key07p0thh] {
    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-key07p0thh] {
    text-align: center;
    flex-shrink: 0;
}

.tpr-tl-lbl[b-key07p0thh] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-tl-date[b-key07p0thh] {
    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-key07p0thh] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--d-ink-4);
}

.tpr-tl-line[b-key07p0thh] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

.tpr-tl-mid svg[b-key07p0thh] {
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}

/* ─── Travelers grid ─── */
.tpr-travelers[b-key07p0thh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .tpr-travelers[b-key07p0thh] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tpr-trav[b-key07p0thh] {
    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-key07p0thh] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-trav-count[b-key07p0thh] {
    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-key07p0thh] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ─── Tình hình thanh toán (tour trả theo kỳ) ─── */
.tpr-pay[b-key07p0thh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tpr-pay-cell[b-key07p0thh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface-2);
}

.tpr-pay-cell span[b-key07p0thh] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-pay-cell b[b-key07p0thh] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 600;
    color: var(--d-ink);
}

.tpr-pay-cell.good b[b-key07p0thh] { color: var(--d-good); }
.tpr-pay-cell.due b[b-key07p0thh] { color: var(--d-warn); }

.tpr-pay-next[b-key07p0thh] {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--d-ink-2);
}

.tpr-pay-next.good[b-key07p0thh] {
    color: var(--d-good);
    font-weight: 600;
}

/* ─── Passengers ─── */
.tpr-pax-list[b-key07p0thh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpr-pax[b-key07p0thh] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.tpr-avatar[b-key07p0thh] {
    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-key07p0thh] {
    color: var(--d-ink);
    font-weight: 500;
}

.tpr-pax-id[b-key07p0thh] {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

/* ─── Notes ─── */
.tpr-notes-hd[b-key07p0thh] {
    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-key07p0thh] {
    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-key07p0thh] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .tpr-notes-list li[b-key07p0thh]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/PaymentResult/VisaPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VisaPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.vpr-root[b-qvncnfh2d6] {
    --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-qvncnfh2d6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vpr-hero-ico[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
        width: 22px;
        height: 22px;
    }

.vpr-hero-text h2[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.vpr-card[b-qvncnfh2d6] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.vpr-card-hd[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    min-width: 0;
}

.vpr-card-title[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

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

/* ─── Status pill ─── */
.vpr-pill[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .vpr-pill.danger[b-qvncnfh2d6] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
        border-color: color-mix(in srgb, var(--d-danger) 22%, transparent);
    }

    .vpr-pill.warn[b-qvncnfh2d6] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: #fde68a;
    }

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

/* ─── Code chip ─── */
.vpr-code[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-code-val[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .vpr-grid[b-qvncnfh2d6] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vpr-cell-lbl[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .vpr-cell-val.mono[b-qvncnfh2d6] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

/* ─── Timeline ─── */
.vpr-timeline[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    text-align: center;
    flex-shrink: 0;
}

.vpr-tl-lbl[b-qvncnfh2d6] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-tl-date[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

/* ─── Result block ─── */
.vpr-result[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    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-qvncnfh2d6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 14px;
}

@media (min-width: 640px) {
    .vpr-result-grid[b-qvncnfh2d6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vpr-result-grid .k[b-qvncnfh2d6] {
    color: var(--d-ink-3);
    margin-right: 4px;
}

.vpr-result-grid .v[b-qvncnfh2d6] {
    color: var(--d-ink);
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ─── Documents tag ─── */
.vpr-docs[b-qvncnfh2d6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .vpr-docs svg[b-qvncnfh2d6] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* ─── Notes ─── */
.vpr-notes-hd[b-qvncnfh2d6] {
    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-qvncnfh2d6] {
    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-qvncnfh2d6] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .vpr-notes-list li[b-qvncnfh2d6]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* _content/NGOCMAI.B2E.FE.UI/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-45jz0wvcr9] {
    --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-45jz0wvcr9] {
    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-45jz0wvcr9] {
    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-45jz0wvcr9] {
        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-45jz0wvcr9] {
            color: var(--d-accent);
        }

.pms-card-body[b-45jz0wvcr9] {
    padding: 14px 16px;
}

/* ─── Category label ─── */
.pms-cat-lbl[b-45jz0wvcr9] {
    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-45jz0wvcr9] {
        margin-top: 0;
    }

/* ─── Method grid ─── */
.pms-method-grid[b-45jz0wvcr9] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .pms-method-grid[b-45jz0wvcr9] { 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-45jz0wvcr9] {
    height: 100%;
}

/* Method tile — horizontal: icon + name (+ optional balance) */
.pms-method[b-45jz0wvcr9] {
    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-45jz0wvcr9] {
        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-45jz0wvcr9] {
        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-45jz0wvcr9] {
            transform: translateY(-2px);
        }

/* Tile bị khoá (ví không đủ số dư) */
.pms-method-featured.is-disabled .pms-method[b-45jz0wvcr9],
label.is-disabled .pms-method[b-45jz0wvcr9] {
    opacity: .55;
    filter: grayscale(.4);
}

    label.is-disabled .pms-method:hover[b-45jz0wvcr9] {
        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-45jz0wvcr9] {
    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-45jz0wvcr9]::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-45jz0wvcr9] {
        position: relative;
        z-index: 1;
    }

    .pms-method-featured .pms-method:hover[b-45jz0wvcr9] {
        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-45jz0wvcr9] {
    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-45jz0wvcr9]::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-45jz0wvcr9] {
    width: 40px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pms-method-text[b-45jz0wvcr9] {
    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-45jz0wvcr9] {
    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-45jz0wvcr9] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-accent);
    line-height: 1.2;
}

    .pms-method-fee.is-free[b-45jz0wvcr9] {
        color: #059669;
        font-weight: 500;
    }

.pms-method .ico-fb[b-45jz0wvcr9] {
    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-45jz0wvcr9] { background: #d82d8b; }
    .pms-method .ico-fb.wallet[b-45jz0wvcr9] { background: #16a34a; }
    .pms-method .ico-fb.qr[b-45jz0wvcr9] { background: #2563eb; }

.pms-method img[b-45jz0wvcr9] {
    max-height: 28px;
    max-width: 40px;
    object-fit: contain;
}

/* Check mark khi chọn */
.pms-method-check[b-45jz0wvcr9] {
    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-45jz0wvcr9 .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes pms-check-pop-b-45jz0wvcr9 {
    0%   { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* Loading / empty */
.pms-loading[b-45jz0wvcr9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.pms-spinner[b-45jz0wvcr9] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 999px;
    animation: pms-spin-b-45jz0wvcr9 .7s linear infinite;
}

@keyframes pms-spin-b-45jz0wvcr9 {
    to { transform: rotate(360deg); }
}

.pms-empty[b-45jz0wvcr9] {
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--d-ink-4);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Payment/VoucherBox.razor.rz.scp.css */
/* VoucherBox — cùng khuôn thẻ với PaymentMethodSelector (pms-*); token tự chứa để gắn được vào mọi host. */
.vb-root[b-nmi1ixv5fa] {
    --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-ink: #c2410c;
    --d-accent-soft: #fff2e8;
    --d-accent-line: #ffd9bd;
    --d-ok: #059669;
    --d-bad: #b91c1c;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

.vb-card[b-nmi1ixv5fa] {
    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);
}

.vb-hd[b-nmi1ixv5fa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    .vb-hd h2[b-nmi1ixv5fa] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

        .vb-hd h2 svg[b-nmi1ixv5fa] {
            color: var(--d-accent);
            flex-shrink: 0;
        }

.vb-tag[b-nmi1ixv5fa] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ok);
    background: #ecfdf5;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.vb-body[b-nmi1ixv5fa] {
    padding: 14px 16px;
}

.vb-skel[b-nmi1ixv5fa] {
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--d-surface-2) 25%, #eceef2 37%, var(--d-surface-2) 63%);
    background-size: 400% 100%;
    animation: vb-shimmer-b-nmi1ixv5fa 1.4s ease infinite;
}

@keyframes vb-shimmer-b-nmi1ixv5fa {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.vb-form[b-nmi1ixv5fa] {
    display: flex;
    gap: 8px;
}

.vb-input[b-nmi1ixv5fa] {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--d-ink);
    background: var(--d-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .vb-input[b-nmi1ixv5fa]::placeholder {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 400;
        color: var(--d-ink-4);
    }

    .vb-input:focus[b-nmi1ixv5fa] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
    }

    .vb-input:disabled[b-nmi1ixv5fa] {
        background: var(--d-surface-2);
    }

.vb-btn[b-nmi1ixv5fa] {
    flex-shrink: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--d-accent);
    border-radius: 10px;
    background: var(--d-surface);
    color: var(--d-accent-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .vb-btn:hover:not(:disabled)[b-nmi1ixv5fa] {
        background: var(--d-accent);
        color: #fff;
    }

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

.vb-applied[b-nmi1ixv5fa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--d-accent-line);
    border-radius: 10px;
    background: var(--d-accent-soft);
}

.vb-applied-main[b-nmi1ixv5fa] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.vb-chip[b-nmi1ixv5fa] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--d-accent-ink);
    background: var(--d-surface);
    border: 1px dashed var(--d-accent);
    border-radius: 6px;
    padding: 2px 8px;
}

.vb-name[b-nmi1ixv5fa] {
    font-size: 13px;
    color: var(--d-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.vb-link[b-nmi1ixv5fa] {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-decoration: underline;
    cursor: pointer;
}

    .vb-link:hover:not(:disabled)[b-nmi1ixv5fa] {
        color: var(--d-bad);
    }

    .vb-link:disabled[b-nmi1ixv5fa] {
        opacity: .5;
        cursor: not-allowed;
    }

.vb-lines[b-nmi1ixv5fa] {
    margin: 10px 0 0;
    display: grid;
    gap: 6px;
}

    .vb-lines > div[b-nmi1ixv5fa] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 13.5px;
    }

    .vb-lines dt[b-nmi1ixv5fa] {
        color: var(--d-ink-3);
    }

    .vb-lines dd[b-nmi1ixv5fa] {
        margin: 0;
        font-variant-numeric: tabular-nums;
    }

.vb-minus[b-nmi1ixv5fa] {
    color: var(--d-ok);
    font-weight: 600;
}

.vb-strong[b-nmi1ixv5fa] {
    font-weight: 700;
}

.vb-error[b-nmi1ixv5fa] {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--d-bad);
}
/* _content/NGOCMAI.B2E.FE.UI/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-4k7c5aako2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wpin-lead[b-4k7c5aako2] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--nm-ink-2);
}

/* ---- Số tiền sắp trừ ---- */
.wpin-amount[b-4k7c5aako2] {
    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-4k7c5aako2] { font-size: 12px; color: var(--nm-muted); }
.wpin-amount-val[b-4k7c5aako2] { font-size: 17px; font-weight: 700; color: var(--nm-brand-600); }

/* ---- Lỗi lần gửi trước ---- */
.wpin-alert[b-4k7c5aako2] {
    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-4k7c5aako2] { flex-shrink: 0; margin-top: 2px; color: var(--nm-bad); }

/* ---- Quên mã ---- */
.wpin-forgot[b-4k7c5aako2] {
    align-self: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    text-decoration: none;
}

.wpin-forgot:hover[b-4k7c5aako2] { text-decoration: underline; }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Policy/PolicyConfirmModal.razor.rz.scp.css */
/* PolicyConfirmModal — Manager Dashboard v4 theme */
.pcm-overlay[b-3xt5cln1dv] {
    --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-3xt5cln1dv] {
    position: absolute;
    inset: 0;
}

.pcm-panel[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
    padding: 18px 22px;
    border-bottom: 1px solid var(--d-line);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pcm-icon[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
    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-3xt5cln1dv] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.pcm-section[b-3xt5cln1dv] {
    padding: 14px 22px 0;
}

.pcm-violations[b-3xt5cln1dv] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
}

    .pcm-violations .lbl[b-3xt5cln1dv] {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .pcm-violations ul[b-3xt5cln1dv] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pcm-violations li[b-3xt5cln1dv] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #92400e;
        line-height: 1.5;
    }

    .pcm-violations svg[b-3xt5cln1dv] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #d97706;
    }

.pcm-info[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .pcm-info-row + .pcm-info-row[b-3xt5cln1dv] {
        border-top: 1px solid var(--d-line-2);
    }

    .pcm-info-row .k[b-3xt5cln1dv] {
        color: var(--d-ink-3);
    }

    .pcm-info-row .v[b-3xt5cln1dv] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .pcm-info-row .v.amount[b-3xt5cln1dv] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.pcm-field-label[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
    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-3xt5cln1dv] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.pcm-error[b-3xt5cln1dv] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.pcm-success[b-3xt5cln1dv] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

    .pcm-success .t[b-3xt5cln1dv] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #15803d;
    }

    .pcm-success .d[b-3xt5cln1dv] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #166534;
    }

.pcm-actions[b-3xt5cln1dv] {
    padding: 16px 22px;
    border-top: 1px solid var(--d-line);
    margin-top: 14px;
}

.pcm-btn-row[b-3xt5cln1dv] {
    display: flex;
    gap: 8px;
}

.pcm-btn[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.pcm-btn-primary[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
        background: var(--d-accent-grad-hover);
        color: #fff;
    }

.pcm-btn-info[b-3xt5cln1dv] {
    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-3xt5cln1dv] {
        filter: brightness(0.95);
        color: #fff;
    }

.pcm-btn:disabled[b-3xt5cln1dv] {
    opacity: 0.55;
    cursor: not-allowed;
}

.pcm-btn-grow[b-3xt5cln1dv] {
    flex: 1;
}

.pcm-divider[b-3xt5cln1dv] {
    border-top: 1px solid var(--d-line-2);
    margin-top: 12px;
    padding-top: 12px;
}

.pcm-personal-hint[b-3xt5cln1dv] {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.pcm-spin[b-3xt5cln1dv] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pcm-spin-b-3xt5cln1dv 0.7s linear infinite;
}

@keyframes pcm-spin-b-3xt5cln1dv {
    to { transform: rotate(360deg); }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Policy/PolicyViolationBadge.razor.rz.scp.css */
/* PolicyViolationBadge — warm-neutral approved/violation surfaces */
.pvb-root[b-l7b97k3lo0] {
    --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-l7b97k3lo0] {
    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-l7b97k3lo0] {
    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-l7b97k3lo0] {
    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-l7b97k3lo0] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.pvb-ico-md[b-l7b97k3lo0] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Compact tooltip */
.pvb-tip[b-l7b97k3lo0] {
    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-l7b97k3lo0] {
        font-weight: 600;
        color: #92400e;
        margin: 0 0 6px;
    }

    .pvb-tip ul[b-l7b97k3lo0] {
        margin: 0;
        padding-left: 16px;
        list-style: disc;
    }

    .pvb-tip ul li + li[b-l7b97k3lo0] {
        margin-top: 3px;
    }

    .pvb-tip .pvb-tip-hint[b-l7b97k3lo0] {
        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-l7b97k3lo0] {
    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-l7b97k3lo0] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pvb-box-icon[b-l7b97k3lo0] {
    color: #b45309;
    flex-shrink: 0;
    margin-top: 1px;
}

.pvb-box-body[b-l7b97k3lo0] {
    flex: 1;
    min-width: 0;
}

.pvb-box-title[b-l7b97k3lo0] {
    font-weight: 600;
    color: #92400e;
    line-height: 1.3;
    margin: 0;
}

.pvb-box-list[b-l7b97k3lo0] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: #78350f;
}

    .pvb-box-list li[b-l7b97k3lo0] {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.45;
    }

        .pvb-box-list li + li[b-l7b97k3lo0] {
            margin-top: 2px;
        }

    .pvb-box-list .pvb-bullet[b-l7b97k3lo0] {
        color: #b45309;
        flex-shrink: 0;
    }

.pvb-box-hint[b-l7b97k3lo0] {
    margin: 6px 0 0;
    color: #92400e;
    font-style: italic;
    line-height: 1.3;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Search/FlightSearchBox.razor.rz.scp.css */
/* FlightSearchBox — Manager Dashboard v4 theme */
.fsb-root[b-y39sdwylhh] {
    --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-y39sdwylhh] {
        padding: 14px;
    }
}

@media (min-width: 768px) {
    .fsb-root[b-y39sdwylhh] {
        padding: 18px 20px;
    }
}

.fsb-root.fsb-vertical[b-y39sdwylhh] {
    padding: 14px;
}

/* ── Trip type toggle ── */
.fsb-trip-toggle[b-y39sdwylhh] {
    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-y39sdwylhh]::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-y39sdwylhh]::before {
    transform: translateX(100%);
}

.fsb-trip-btn[b-y39sdwylhh] {
    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-y39sdwylhh] {
        color: var(--d-ink-2);
    }

    .fsb-trip-btn.is-active[b-y39sdwylhh] {
        color: var(--d-accent);
    }

    .fsb-trip-btn svg[b-y39sdwylhh] {
        width: 14px;
        height: 14px;
        transition: transform .25s ease;
    }

    .fsb-trip-btn.is-active svg[b-y39sdwylhh] {
        transform: scale(1.05);
    }

.fsb-vertical .fsb-trip-btn[b-y39sdwylhh] {
    padding: 5px 12px;
    font-size: 11.5px;
}

/* ── Field row ── */
.fsb-row[b-y39sdwylhh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

@media (min-width: 1024px) {
    .fsb-row.fsb-row-horiz[b-y39sdwylhh] {
        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-y39sdwylhh] {
        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-y39sdwylhh]::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-y39sdwylhh],
    .fsb-row.fsb-row-horiz > .fsb-airport-pair[b-y39sdwylhh] {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        position: relative;
    }

    .fsb-row.fsb-row-horiz > .fsb-field:hover[b-y39sdwylhh] {
        border-color: transparent;
    }

    .fsb-row.fsb-row-horiz > .fsb-field.is-error[b-y39sdwylhh] {
        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-y39sdwylhh] {
        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-y39sdwylhh] {
        padding-right: 22px;
    }

    .fsb-row.fsb-row-horiz > .fsb-airport-pair > .fsb-field:last-child[b-y39sdwylhh] {
        padding-left: 22px;
    }

    /* Strip AirportSelector's own card chrome — container provides it */
    .fsb-row.fsb-row-horiz[b-y39sdwylhh]  .aps-trigger {
        border-color: transparent;
        background: transparent;
        border-radius: 10px;
        min-height: 60px;
    }

    .fsb-row.fsb-row-horiz[b-y39sdwylhh]  .aps-trigger:hover {
        background: var(--d-accent-soft);
    }

    .fsb-row.fsb-row-horiz[b-y39sdwylhh]  .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-y39sdwylhh]::before,
    .fsb-row.fsb-row-horiz > .fsb-airport-pair + .fsb-field[b-y39sdwylhh]::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-y39sdwylhh] {
    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-y39sdwylhh] {
        border-color: #dde1e8;
    }

    .fsb-field.is-open[b-y39sdwylhh] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .fsb-field.is-error[b-y39sdwylhh] {
        border-color: var(--d-danger);
        background: var(--d-danger-soft);
        animation: fsb-shake-b-y39sdwylhh 0.5s ease-in-out;
    }

@keyframes fsb-shake-b-y39sdwylhh {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-3px); }
    30%, 70% { transform: translateX(3px); }
}

.fsb-field-error-text[b-y39sdwylhh] {
    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-y39sdwylhh] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

@media (min-width: 1024px) {
    .fsb-airport-pair[b-y39sdwylhh] {
        flex-direction: row;
        gap: 0;
    }
}

.fsb-airport-pair > .fsb-field[b-y39sdwylhh] {
    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-y39sdwylhh],
.fsb-airport-stack > .fsb-field[b-y39sdwylhh] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .fsb-airport-pair > .fsb-field:hover[b-y39sdwylhh],
    .fsb-airport-stack > .fsb-field:hover[b-y39sdwylhh] {
        border-color: transparent;
    }

    .fsb-airport-pair > .fsb-field.is-error[b-y39sdwylhh],
    .fsb-airport-stack > .fsb-field.is-error[b-y39sdwylhh] {
        background: transparent;
        border-color: transparent;
    }

.fsb-airport-pair-divider[b-y39sdwylhh] {
    width: 1px;
    background: var(--d-line);
    margin: 10px 0;
    flex-shrink: 0;
}

.fsb-swap-btn[b-y39sdwylhh] {
    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-y39sdwylhh] {
        /* Desktop horizontal: overlap ngang giữa 2 ô */
        margin: 0 -16px;
    }
}

    .fsb-swap-btn:hover[b-y39sdwylhh] {
        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-y39sdwylhh] {
        transform: rotate(180deg);
    }

    .fsb-swap-btn svg[b-y39sdwylhh] {
        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-y39sdwylhh] {
        transform: rotate(90deg);
    }
}

/* Vertical airport pair */
.fsb-airport-stack[b-y39sdwylhh] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fsb-swap-btn-stack[b-y39sdwylhh] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

    .fsb-swap-btn-stack.is-rotating[b-y39sdwylhh] {
        transform: translate(-50%, -50%) rotate(180deg);
    }

/* Date wrapper — let NmDatePicker render inside */
.fsb-field-date[b-y39sdwylhh] {
    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-y39sdwylhh]  .range-trigger.dp-open,
.fsb-field-date[b-y39sdwylhh]  .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-y39sdwylhh]  .field-active::after {
    color: var(--d-accent);
}

/* Ô "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-y39sdwylhh]  .range-trigger .date-field:has(.dp-field-icon),
.fsb-field-date[b-y39sdwylhh]  .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-y39sdwylhh]  .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-y39sdwylhh]  .date-field:has(.dp-field-icon) .dp-label,
.fsb-field-date[b-y39sdwylhh]  .single-trigger > div:has(.dp-field-icon) .dp-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.fsb-field-date[b-y39sdwylhh]  .date-field:has(.dp-field-icon) .dp-value,
.fsb-field-date[b-y39sdwylhh]  .single-trigger > div:has(.dp-field-icon) .dp-value {
    grid-column: 2;
    grid-row: 2;
}

/* ── Passenger trigger ── */
.fsb-trigger[b-y39sdwylhh] {
    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-y39sdwylhh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.fsb-ico[b-y39sdwylhh] {
    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-y39sdwylhh] {
        width: 14px;
        height: 14px;
    }

.fsb-field.is-open .fsb-ico[b-y39sdwylhh] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.fsb-meta[b-y39sdwylhh] {
    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-y39sdwylhh] {
    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-y39sdwylhh] {
    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-y39sdwylhh] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .fsb-caret.is-open[b-y39sdwylhh] {
        transform: rotate(180deg);
    }

/* ── Pop / Pax dropdown ── */
.fsb-overlay[b-y39sdwylhh] {
    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-y39sdwylhh] {
    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-y39sdwylhh 0.15s ease-out;
}

@keyframes fsb-pop-in-b-y39sdwylhh {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Pax stepper ── */
.fsb-pax-row[b-y39sdwylhh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

    .fsb-pax-row + .fsb-pax-row[b-y39sdwylhh] {
        border-top: 1px solid var(--d-line-2);
    }

.fsb-pax-info[b-y39sdwylhh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fsb-pax-ico[b-y39sdwylhh] {
    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-y39sdwylhh] {
        background: #eff6ff;
        color: #2563eb;
        border-color: #bfdbfe;
    }

    .fsb-pax-ico.is-pink[b-y39sdwylhh] {
        background: #fdf2f8;
        color: #db2777;
        border-color: #fbcfe8;
    }

    .fsb-pax-ico svg[b-y39sdwylhh] {
        width: 16px;
        height: 16px;
    }

.fsb-pax-text p[b-y39sdwylhh] {
    margin: 0;
}

.fsb-pax-name[b-y39sdwylhh] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.fsb-pax-desc[b-y39sdwylhh] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.fsb-pax-ctrl[b-y39sdwylhh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsb-step-btn[b-y39sdwylhh] {
    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-y39sdwylhh] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .fsb-step-btn:disabled[b-y39sdwylhh] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .fsb-step-btn svg[b-y39sdwylhh] {
        width: 12px;
        height: 12px;
    }

.fsb-step-val[b-y39sdwylhh] {
    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-y39sdwylhh] {
    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-y39sdwylhh] {
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.fsb-pax-done[b-y39sdwylhh] {
    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-y39sdwylhh] {
        background: var(--d-accent-grad-hover);
    }

/* ── Error banner ── */
.fsb-err-banner[b-y39sdwylhh] {
    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-y39sdwylhh 0.5s ease-in-out;
}

    .fsb-err-banner svg[b-y39sdwylhh] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ── Submit ── */
.fsb-actions[b-y39sdwylhh] {
    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-y39sdwylhh] {
    display: none;
}

@media (min-width: 1024px) {
    .fsb-fly-route[b-y39sdwylhh] {
        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-y39sdwylhh]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-top: 2px dashed rgba(255, 107, 0, 0.38);
    }

    .fsb-fly-route[b-y39sdwylhh]::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-y39sdwylhh 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
}

@keyframes fsb-fly-b-y39sdwylhh {
    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-y39sdwylhh] {
        margin-left: auto;
    }
}

.fsb-actions.is-vertical[b-y39sdwylhh] {
    justify-content: center;
}

.fsb-tagline[b-y39sdwylhh] {
    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-y39sdwylhh] {
        display: inline-flex;
    }
}

.fsb-tagline b[b-y39sdwylhh] {
    color: var(--d-accent);
    font-weight: 600;
}

.fsb-submit[b-y39sdwylhh] {
    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-y39sdwylhh] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fsb-submit-txt[b-y39sdwylhh] {
    position: relative;
    z-index: 1;
}

.fsb-submit:hover .fsb-submit-plane[b-y39sdwylhh] {
    transform: translate(3px, -3px) rotate(8deg);
}

.fsb-submit:hover[b-y39sdwylhh] {
    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-y39sdwylhh] {
    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-y39sdwylhh] {
    left: 125%;
}

@media (min-width: 768px) {
    .fsb-submit[b-y39sdwylhh] {
        width: auto;
    }
}

.fsb-submit:hover[b-y39sdwylhh] {
    background: var(--d-accent-grad-hover);
}

.fsb-submit:active[b-y39sdwylhh] {
    transform: translateY(1px);
}

.fsb-submit svg[b-y39sdwylhh] {
    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-y39sdwylhh] {
    --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-y39sdwylhh] { padding: 0; } }
@media (min-width: 768px) { .fsb-root.fsb-minimal[b-y39sdwylhh] { padding: 0; } }

/* Trip toggle — cleaner active in brand */
.fsb-minimal .fsb-trip-btn.is-active[b-y39sdwylhh] { 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-y39sdwylhh] {
        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-y39sdwylhh] {
        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-y39sdwylhh]  .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-y39sdwylhh] { 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-y39sdwylhh],
.fsb-minimal .fsb-airport-stack > .fsb-field:hover[b-y39sdwylhh] { border-color: transparent; }
.fsb-minimal .fsb-field.is-open[b-y39sdwylhh] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.fsb-minimal .fsb-field-date[b-y39sdwylhh]  .range-trigger.dp-open,
.fsb-minimal .fsb-field-date[b-y39sdwylhh]  .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-y39sdwylhh],
.fsb-minimal .fsb-step-btn:hover:not(:disabled)[b-y39sdwylhh] { border-color: var(--d-accent-soft); }
.fsb-minimal .fsb-field.is-open .fsb-ico[b-y39sdwylhh],
.fsb-minimal .fsb-pax-ico[b-y39sdwylhh] { border-color: transparent; }

/* Search CTA — prominent, premium subtle gradient, modern rounded */
.fsb-minimal .fsb-submit[b-y39sdwylhh] {
    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-y39sdwylhh] {
    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-y39sdwylhh] { transform: translateY(0); }

.fsb-minimal .fsb-pax-done[b-y39sdwylhh] {
    background: var(--d-accent);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}
.fsb-minimal .fsb-pax-done:hover[b-y39sdwylhh] { background: var(--d-accent-grad-hover); }
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Search/VisaSearchBox.razor.rz.scp.css */
/* VisaSearchBox — Manager Dashboard v4 theme */
.vsb-root[b-cd3byt7za8] {
    --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-cd3byt7za8] {
        padding: 18px 20px;
    }
}

.vsb-row[b-cd3byt7za8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .vsb-row[b-cd3byt7za8] {
        grid-template-columns: 1.2fr 1.2fr 0.8fr;
        gap: 12px;
    }
}

.vsb-field[b-cd3byt7za8] {
    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-cd3byt7za8] {
        border-color: #dde1e8;
    }

    .vsb-field.is-open[b-cd3byt7za8] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.vsb-trigger[b-cd3byt7za8] {
    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-cd3byt7za8] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.vsb-ico[b-cd3byt7za8] {
    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-cd3byt7za8] {
        width: 14px;
        height: 14px;
    }

.vsb-field.is-open .vsb-ico[b-cd3byt7za8],
.vsb-field:focus-within .vsb-ico[b-cd3byt7za8] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.vsb-meta[b-cd3byt7za8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.vsb-lbl[b-cd3byt7za8] {
    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-cd3byt7za8] {
    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-cd3byt7za8] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.vsb-input[b-cd3byt7za8] {
    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-cd3byt7za8]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.vsb-caret[b-cd3byt7za8] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .vsb-caret.is-open[b-cd3byt7za8] {
        transform: rotate(180deg);
    }

.vsb-clear-inline[b-cd3byt7za8] {
    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-cd3byt7za8] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .vsb-clear-inline svg[b-cd3byt7za8] {
        width: 12px;
        height: 12px;
    }

.vsb-pop[b-cd3byt7za8] {
    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-cd3byt7za8 0.15s ease-out;
}

@media (min-width: 768px) {
    .vsb-pop.vsb-pop-left[b-cd3byt7za8] {
        right: auto;
        width: 380px;
    }

    .vsb-pop.vsb-pop-right[b-cd3byt7za8] {
        left: auto;
        right: 0;
        width: 280px;
    }
}

@keyframes vsb-pop-in-b-cd3byt7za8 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vsb-pop-hd[b-cd3byt7za8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .vsb-pop-hd p[b-cd3byt7za8] {
        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-cd3byt7za8] {
    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-cd3byt7za8] {
        background: var(--d-accent-soft);
    }

    .vsb-pop-clear svg[b-cd3byt7za8] {
        width: 10px;
        height: 10px;
    }

.vsb-loading[b-cd3byt7za8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.vsb-spinner[b-cd3byt7za8] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: vsb-spin-b-cd3byt7za8 0.7s linear infinite;
}

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

.vsb-empty[b-cd3byt7za8] {
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
    padding: 12px 0;
}

.vsb-chips[b-cd3byt7za8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vsb-chip[b-cd3byt7za8] {
    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-cd3byt7za8] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .vsb-chip.is-selected[b-cd3byt7za8] {
        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-cd3byt7za8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vsb-stepper-info[b-cd3byt7za8] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vsb-stepper-ico[b-cd3byt7za8] {
    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-cd3byt7za8] {
        width: 16px;
        height: 16px;
    }

.vsb-stepper-text p[b-cd3byt7za8] {
    margin: 0;
}

.vsb-stepper-name[b-cd3byt7za8] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.vsb-stepper-desc[b-cd3byt7za8] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.vsb-stepper-ctrl[b-cd3byt7za8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vsb-step-btn[b-cd3byt7za8] {
    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-cd3byt7za8] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .vsb-step-btn:disabled[b-cd3byt7za8] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .vsb-step-btn svg[b-cd3byt7za8] {
        width: 12px;
        height: 12px;
    }

.vsb-step-val[b-cd3byt7za8] {
    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-cd3byt7za8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vsb-tagline[b-cd3byt7za8] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

@media (min-width: 768px) {
    .vsb-tagline[b-cd3byt7za8] {
        display: inline-flex;
    }
}

.vsb-tagline b[b-cd3byt7za8] {
    color: var(--d-accent);
    font-weight: 600;
}

.vsb-submit[b-cd3byt7za8] {
    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-cd3byt7za8] {
        width: auto;
    }
}

.vsb-submit:hover[b-cd3byt7za8] {
    background: var(--d-accent-grad-hover);
}

.vsb-submit:active[b-cd3byt7za8] {
    transform: translateY(1px);
}

.vsb-submit svg[b-cd3byt7za8] {
    width: 16px;
    height: 16px;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/ServiceRequests/MyServiceRequestsView.razor.rz.scp.css */
/* My Service Requests — Manager Dashboard v4 theme (ftc-style pattern) */
.mysr-root[b-kabo9g05dt] {
    --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-kabo9g05dt] {
    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-kabo9g05dt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.mysr-header-ico[b-kabo9g05dt] {
    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-kabo9g05dt] { width: 22px; height: 22px; }

.mysr-header-titles[b-kabo9g05dt] { min-width: 0; }

.mysr-header-titles h1[b-kabo9g05dt] {
    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-kabo9g05dt] {
    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-kabo9g05dt] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

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

/* Header pills */
.mysr-hpill[b-kabo9g05dt] {
    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-kabo9g05dt] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--d-ink-4);
    text-transform: uppercase;
}

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

.mysr-hpill--good[b-kabo9g05dt] {
    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-kabo9g05dt] { color: var(--d-good); }

.mysr-hpill--warn[b-kabo9g05dt] {
    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-kabo9g05dt] { color: var(--d-warn); }

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

/* ---------- Filter bar (inside filter card body) ---------- */
.mysr-filterbar[b-kabo9g05dt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.mysr-pills[b-kabo9g05dt] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.mysr-pill[b-kabo9g05dt] {
    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-kabo9g05dt] {
        background: var(--d-surface-2);
    }

    .mysr-pill.is-active[b-kabo9g05dt] {
        background: var(--d-ink);
        border-color: var(--d-ink);
        color: #fff;
    }

    .mysr-pill.is-active.st-pending[b-kabo9g05dt] {
        background: #92400e;
        border-color: #92400e;
    }

    .mysr-pill.is-active.st-approved[b-kabo9g05dt] {
        background: #166534;
        border-color: #166534;
    }

    .mysr-pill.is-active.st-rejected[b-kabo9g05dt] {
        background: #991b1b;
        border-color: #991b1b;
    }

    .mysr-pill.is-active.st-revision[b-kabo9g05dt] {
        background: #b45309;
        border-color: #b45309;
    }

    .mysr-pill.is-active.st-booking[b-kabo9g05dt] {
        background: #1e40af;
        border-color: #1e40af;
    }

    .mysr-pill.is-active.st-cancel[b-kabo9g05dt] {
        background: var(--d-ink-3);
        border-color: var(--d-ink-3);
    }

.mysr-pill-count[b-kabo9g05dt] {
    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-kabo9g05dt] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.mysr-filter-actions[b-kabo9g05dt] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.mysr-search[b-kabo9g05dt] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    width: 220px;
}

    .mysr-search svg[b-kabo9g05dt] {
        position: absolute;
        left: 9px;
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .mysr-search input[b-kabo9g05dt] {
        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-kabo9g05dt]::placeholder {
            color: var(--d-ink-4);
        }

        .mysr-search input:focus[b-kabo9g05dt] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        }

.mysr-search-x[b-kabo9g05dt] {
    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-kabo9g05dt] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.mysr-iconbtn[b-kabo9g05dt] {
    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-kabo9g05dt] {
        background: var(--d-surface-2);
    }

    .mysr-iconbtn.has-value[b-kabo9g05dt] {
        border-color: var(--d-ink);
        color: var(--d-ink);
        background: var(--d-accent-soft);
    }

    .mysr-iconbtn svg[b-kabo9g05dt] {
        flex-shrink: 0;
    }

.mysr-iconbtn-badge[b-kabo9g05dt] {
    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-kabo9g05dt] {
    position: relative;
}

.mysr-pop-panel[b-kabo9g05dt] {
    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-kabo9g05dt] {
    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-kabo9g05dt] {
        background: var(--d-surface-2);
    }

    .mysr-check input[type=checkbox][b-kabo9g05dt] {
        accent-color: var(--d-accent);
        cursor: pointer;
    }

.mysr-pop-date[b-kabo9g05dt] {
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .mysr-pop-date label[b-kabo9g05dt] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

    .mysr-pop-date input[type=date][b-kabo9g05dt] {
        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-kabo9g05dt] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        }

.mysr-pop-actions[b-kabo9g05dt] {
    display: flex;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed var(--d-line);
    margin-top: 2px;
}

.mysr-pop-quick[b-kabo9g05dt] {
    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-kabo9g05dt] {
        background: var(--d-accent-soft);
        border-color: var(--d-accent);
        color: var(--d-accent);
    }

.mysr-reset[b-kabo9g05dt] {
    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-kabo9g05dt] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

/* Card (ftc-card style with warm-cream gradient head + icon) */
.mysr-card[b-kabo9g05dt] {
    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-kabo9g05dt] {
    overflow: visible;
}

.mysr-card-hd[b-kabo9g05dt] {
    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-kabo9g05dt] {
    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-kabo9g05dt] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-left: 2px;
}

.mysr-card-ico[b-kabo9g05dt] {
    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-kabo9g05dt] { width: 15px; height: 15px; }

.mysr-card-count[b-kabo9g05dt] {
    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-kabo9g05dt] {
    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-kabo9g05dt] {
    border-color: var(--d-accent);
    color: var(--d-accent);
    background: var(--d-accent-soft);
}

.mysr-loading[b-kabo9g05dt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.mysr-spin[b-kabo9g05dt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    animation: mysr-spin-b-kabo9g05dt 0.8s linear infinite;
}

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

.mysr-empty[b-kabo9g05dt] {
    text-align: center;
    padding: 56px 16px;
    color: var(--d-ink-3);
}

    .mysr-empty p[b-kabo9g05dt] {
        margin: 0;
    }

        .mysr-empty p.b[b-kabo9g05dt] {
            color: var(--d-ink);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .mysr-empty p.s[b-kabo9g05dt] {
            font-size: 12.5px;
        }

.mysr-tbl-wrap[b-kabo9g05dt] {
    overflow-x: auto;
}

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

    .mysr-tbl thead th[b-kabo9g05dt] {
        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-kabo9g05dt] {
            text-align: right;
        }

        .mysr-tbl thead th.center[b-kabo9g05dt] {
            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-kabo9g05dt] {
    background: var(--d-surface-2);
}

.mysr-root.is-ca .mysr-tbl thead th[b-kabo9g05dt] {
    color: var(--d-ink-3);
    font-weight: 600;
    background: transparent;
    border-bottom: 0;
    position: static;
}

    .mysr-tbl tbody td[b-kabo9g05dt] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

        .mysr-tbl tbody td.right[b-kabo9g05dt] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .mysr-tbl tbody td.center[b-kabo9g05dt] {
            text-align: center;
        }

    .mysr-tbl tbody tr[b-kabo9g05dt] {
        cursor: pointer;
    }

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

.mysr-num[b-kabo9g05dt] {
    color: var(--d-ink-4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

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

.mysr-meta[b-kabo9g05dt] {
    color: var(--d-ink-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mysr-tag[b-kabo9g05dt] {
    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-kabo9g05dt] {
        background: #f0f9ff;
        color: #0369a1;
        border-color: #bae6fd;
    }

    .mysr-tag.svc-hotel[b-kabo9g05dt] {
        background: #eef2ff;
        color: #4338ca;
        border-color: #c7d2fe;
    }

    .mysr-tag.svc-tour[b-kabo9g05dt] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .mysr-tag.svc-visa[b-kabo9g05dt] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .mysr-tag.svc-esim[b-kabo9g05dt] {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

    .mysr-tag.svc-fasttrack[b-kabo9g05dt] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-pending[b-kabo9g05dt] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-approved[b-kabo9g05dt],
    .mysr-tag.st-ready[b-kabo9g05dt] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .mysr-tag.st-rejected[b-kabo9g05dt] {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .mysr-tag.st-revision[b-kabo9g05dt] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-booking[b-kabo9g05dt] {
        background: #eff6ff;
        color: #1e40af;
        border-color: #bfdbfe;
    }

    .mysr-tag.st-cancel[b-kabo9g05dt] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

.mysr-pager[b-kabo9g05dt] {
    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-kabo9g05dt] {
    font-size: 11px;
    font-weight: 600;
}

    .mysr-hint.warn[b-kabo9g05dt] {
        color: var(--d-warn);
    }

    .mysr-hint.good[b-kabo9g05dt] {
        color: var(--d-good);
    }
/* _content/NGOCMAI.B2E.FE.UI/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-mibtyohim5] {
    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-mibtyohim5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.srd-head-left[b-mibtyohim5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.nm-list-title[b-mibtyohim5] {
    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-mibtyohim5] {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nm-muted);
}

.srd-dot[b-mibtyohim5] {
    color: var(--nm-border-strong);
}

.srd-head-right[b-mibtyohim5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.srd-amount[b-mibtyohim5] {
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.srd-act-row[b-mibtyohim5] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Bố cục 2 cột ── */
.srd-grid[b-mibtyohim5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.srd-col-main[b-mibtyohim5],
.srd-col-side[b-mibtyohim5] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .srd-grid[b-mibtyohim5] {
        grid-template-columns: 1fr;
    }
}

/* ── Thẻ ── */
[b-mibtyohim5] .srd-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.srd-card-ico[b-mibtyohim5] {
    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-mibtyohim5] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.srd-card-count[b-mibtyohim5] {
    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-mibtyohim5] {
    margin-left: auto;
}

.srd-muted[b-mibtyohim5] {
    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-mibtyohim5] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nm-border);
}

.srd-hero-img[b-mibtyohim5] {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--nm-border);
    flex-shrink: 0;
}

.srd-hero-text[b-mibtyohim5] {
    min-width: 0;
}

.srd-hero-title[b-mibtyohim5] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--nm-ink);
}

.srd-hero-sub[b-mibtyohim5] {
    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-mibtyohim5] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
    letter-spacing: .01em;
}

    .srd-route i[b-mibtyohim5] {
        color: var(--nm-accent);
        font-size: 16px;
    }

.srd-chips[b-mibtyohim5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.srd-chip[b-mibtyohim5] {
    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-mibtyohim5] {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--nm-muted);
    }

    .srd-chip b[b-mibtyohim5] {
        font-size: 13px;
        font-weight: 700;
        color: var(--nm-ink);
    }

/* ── Chặng bay thật (nạp từ đơn hàng) ── */
.srd-legs[b-mibtyohim5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.srd-leg[b-mibtyohim5] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    padding: 12px 14px;
}

.srd-leg-air[b-mibtyohim5] {
    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-mibtyohim5] {
    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-mibtyohim5] {
    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-mibtyohim5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--nm-muted);
}

.srd-leg-body[b-mibtyohim5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 168px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.srd-leg-end[b-mibtyohim5] {
    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-mibtyohim5] {
        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-mibtyohim5] {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--nm-ink);
    }

    .srd-leg-end span[b-mibtyohim5] {
        font-size: 12px;
        color: var(--nm-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .srd-leg-end small[b-mibtyohim5] {
        margin-top: 3px;
        font-size: 11.5px;
        color: var(--nm-muted);
    }

.srd-leg-end--to[b-mibtyohim5] {
    text-align: right;
    align-items: flex-end;
}

.srd-leg-mid[b-mibtyohim5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.srd-leg-dur[b-mibtyohim5],
.srd-leg-stops[b-mibtyohim5] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

.srd-leg-stops[b-mibtyohim5] {
    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-mibtyohim5] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    color: var(--nm-accent);
}

    .srd-leg-line[b-mibtyohim5]::before,
    .srd-leg-line[b-mibtyohim5]::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-mibtyohim5] {
        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-mibtyohim5] {
    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-mibtyohim5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.srd-meta__lbl[b-mibtyohim5] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-muted);
}

.srd-meta__val[b-mibtyohim5] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

a.srd-meta__val[b-mibtyohim5] {
    color: var(--nm-accent);
    text-decoration: none;
}

    a.srd-meta__val:hover[b-mibtyohim5] {
        text-decoration: underline;
    }

.srd-meta__val--code[b-mibtyohim5] {
    font-size: 14px;
    letter-spacing: .08em;
    font-weight: 700;
}

.srd-meta__val--email[b-mibtyohim5] {
    font-weight: 500;
    word-break: break-all;
}

/* ── Hành khách ── */
.srd-sec--pax[b-mibtyohim5] {
    margin-top: 16px;
}

.srd-sec-count[b-mibtyohim5] {
    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-mibtyohim5] {
    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 để tách rõ khỏi khối PNR phía trên. */
.srd-pax-item[b-mibtyohim5] {
    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-mibtyohim5] {
        border-bottom: none;
    }

.srd-pax-no[b-mibtyohim5] {
    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-mibtyohim5] {
    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-mibtyohim5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.srd-pax-tag[b-mibtyohim5] {
    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-mibtyohim5] {
    font-size: 12px;
    color: var(--nm-ok);
    font-variant-numeric: tabular-nums;
}

.srd-linked-foot[b-mibtyohim5] {
    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-mibtyohim5] {
        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-mibtyohim5] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .srd-leg-end--to[b-mibtyohim5] {
        text-align: left;
        align-items: flex-start;
    }

    .srd-leg-mid[b-mibtyohim5] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 2px 0;
    }

    .srd-leg-line[b-mibtyohim5] {
        width: auto;
        flex: 1 1 auto;
    }

    .srd-pax-meta[b-mibtyohim5] {
        margin-left: 30px;
        width: 100%;
    }
}

/* ── Các mục thông tin ── */
.srd-sections[b-mibtyohim5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding-top: 14px;
}

.srd-sec-title[b-mibtyohim5] {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--nm-muted);
}

.srd-rows[b-mibtyohim5] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.srd-row[b-mibtyohim5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

    .srd-row dt[b-mibtyohim5] {
        color: var(--nm-muted);
        flex-shrink: 0;
    }

    .srd-row dd[b-mibtyohim5] {
        margin: 0;
        text-align: right;
        color: var(--nm-ink);
        font-weight: 500;
    }

    .srd-row dd ul[b-mibtyohim5] {
        margin: 0;
        padding-left: 16px;
        text-align: left;
    }

    .srd-row.is-total[b-mibtyohim5] {
        padding-top: 6px;
        border-top: 1px dashed var(--nm-border);
    }

        .srd-row.is-total dd[b-mibtyohim5] {
            font-weight: 800;
            color: var(--nm-accent);
        }

/* ── Quy trình duyệt ── */
.srd-steps[b-mibtyohim5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.srd-step[b-mibtyohim5] {
    display: flex;
    gap: 10px;
}

.srd-step-dot[b-mibtyohim5] {
    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-mibtyohim5] {
    background: var(--nm-ok-soft);
    border-color: var(--nm-ok);
    color: var(--nm-ok);
}

.srd-step-dot--rejected[b-mibtyohim5] {
    background: var(--nm-bad-soft);
    border-color: var(--nm-bad);
    color: var(--nm-bad);
}

.srd-step-dot--current[b-mibtyohim5] {
    background: var(--nm-pending-soft);
    border-color: var(--nm-pending);
    color: var(--nm-pending);
}

.srd-step-body[b-mibtyohim5] {
    min-width: 0;
    flex: 1;
}

.srd-step-head[b-mibtyohim5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.srd-step-mode[b-mibtyohim5] {
    font-size: 12px;
    color: var(--nm-muted);
}

.srd-approvers[b-mibtyohim5] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .srd-approvers li[b-mibtyohim5] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 13px;
    }

.srd-appr-name[b-mibtyohim5] {
    font-weight: 600;
    color: var(--nm-ink);
}

.srd-appr-st[b-mibtyohim5] {
    font-size: 12px;
    color: var(--nm-muted);
}

.srd-appr-st--approved[b-mibtyohim5] {
    color: var(--nm-ok);
}

.srd-appr-st--rejected[b-mibtyohim5] {
    color: var(--nm-bad);
}

.srd-appr-when[b-mibtyohim5] {
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.srd-appr-cmt[b-mibtyohim5] {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--nm-muted);
}

/* ── Khác ── */
.srd-violations[b-mibtyohim5] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13.5px;
}

.srd-alert-text[b-mibtyohim5] {
    margin: 4px 0 0;
    font-size: 13.5px;
}

.srd-notes[b-mibtyohim5] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
}

    .srd-notes p[b-mibtyohim5] {
        margin: 0;
        font-size: 13.5px;
        color: var(--nm-ink-2);
    }

.srd-side-act[b-mibtyohim5] {
    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-mibtyohim5] .srd-card .lt-banner {
    margin: 0;
    background: none;
    border: 0;
    padding: 0;
}

.srd-trip[b-mibtyohim5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.srd-trip-code[b-mibtyohim5] {
    font-weight: 700;
    color: var(--nm-accent);
    text-decoration: none;
}

    .srd-trip-code:hover[b-mibtyohim5] {
        text-decoration: underline;
    }

.srd-trip-name[b-mibtyohim5] {
    font-size: 13px;
    color: var(--nm-muted);
}

@media (max-width: 720px) {
    .srd-page[b-mibtyohim5] {
        padding: 16px 14px 22px;
    }

    .srd-head-right[b-mibtyohim5] {
        align-items: flex-start;
        width: 100%;
    }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Status/CaStatusBadge.razor.rz.scp.css */
/* Tem trạng thái khu CA: style đi kèm component (chuyển từ app.css của web, bỏ tiền tố .ca-scope).
   Biến --ca-* do .ca-scope của layout CA khai báo. */
.ca-badge[b-go9twzzzi6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--ca-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.ca-badge--ok[b-go9twzzzi6] {
    background: var(--ca-ok-soft);
    color: var(--ca-ok);
}

.ca-badge--bad[b-go9twzzzi6] {
    background: var(--ca-bad-soft);
    color: var(--ca-bad);
}

.ca-badge--info[b-go9twzzzi6] {
    background: var(--ca-info-soft);
    color: var(--ca-info);
}

.ca-badge--pending[b-go9twzzzi6] {
    background: var(--ca-pending-soft);
    color: var(--ca-pending);
}

.ca-badge--brand[b-go9twzzzi6] {
    background: var(--ca-brand-soft);
    color: var(--ca-brand-strong);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/DataGrid.razor.rz.scp.css */
/* DataGrid — token-only. */
.nm-grid-wrap[b-rolxvpua50] {
    overflow-x: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.nm-grid[b-rolxvpua50] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nm-font);
    font-size: 13.5px;
}

.nm-grid__th[b-rolxvpua50] {
    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-rolxvpua50] { text-align: right; }
.nm-grid__th--center[b-rolxvpua50] { 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-rolxvpua50] {
    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-rolxvpua50] { color: var(--nm-ink); }
.nm-grid__sort:focus-visible[b-rolxvpua50] {
    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-rolxvpua50] { font-size: 12px; opacity: .35; }
.nm-grid__sort:hover .nm-grid__sort-ico[b-rolxvpua50] { opacity: .7; }
.nm-grid__th--sorted[b-rolxvpua50] { color: var(--nm-ink); }
.nm-grid__th--sorted .nm-grid__sort-ico[b-rolxvpua50] { opacity: 1; color: var(--nm-brand-500); }

.nm-grid__td[b-rolxvpua50] {
    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-rolxvpua50] { text-align: right; }
.nm-grid__td--center[b-rolxvpua50] { text-align: center; }

.nm-grid__row:hover .nm-grid__td[b-rolxvpua50] { background: var(--nm-surface-2); }
.nm-grid__row:last-child .nm-grid__td[b-rolxvpua50] { 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-rolxvpua50] {
    box-shadow: inset 3px 0 0 0 var(--nm-brand-500);
}

.nm-grid__idx[b-rolxvpua50] { 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-rolxvpua50],
.nm-grid__td--sticky[b-rolxvpua50] {
    position: sticky;
    z-index: 2;
}
.nm-grid__td--sticky[b-rolxvpua50] { background: var(--nm-surface); }
.nm-grid__th--sticky[b-rolxvpua50] { 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-rolxvpua50] { 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-rolxvpua50],
.nm-grid__td--sticky-last[b-rolxvpua50] {
    border-right: 1px solid var(--nm-border);
    box-shadow: 6px 0 8px -6px rgb(0 0 0 / .16);
}

/* ── Cột ghim phải (StickyActions) — cột thao tác cuối luôn thấy khi bảng cuộn ngang ── */
.nm-grid__th--sticky-end[b-rolxvpua50],
.nm-grid__td--sticky-end[b-rolxvpua50] {
    position: sticky;
    right: 0;
    z-index: 2;
    border-left: 1px solid var(--nm-border);
    box-shadow: -6px 0 8px -6px rgb(0 0 0 / .12);
}
.nm-grid__td--sticky-end[b-rolxvpua50] { background: var(--nm-surface); }
.nm-grid__th--sticky-end[b-rolxvpua50] { background: var(--nm-surface-2); z-index: 3; }
.nm-grid__row:hover .nm-grid__td--sticky-end[b-rolxvpua50] { background: var(--nm-surface-2); }

/* Menu "⋯" (NmDropdown) mở trong ô ghim: ô ghim là một lớp xếp chồng riêng (sticky + z-index) nên menu
   fixed bên trong bị ô ghim của các DÒNG SAU vẽ đè. Nâng riêng ô đang có menu mở lên trên cùng bảng. */
.nm-grid__td--sticky:has(.nm-dropdown__menu)[b-rolxvpua50],
.nm-grid__td--sticky-end:has(.nm-dropdown__menu)[b-rolxvpua50] { z-index: 30; }

/* 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-rolxvpua50],
    .nm-grid__td--sticky[b-rolxvpua50],
    .nm-grid__th--sticky-end[b-rolxvpua50],
    .nm-grid__td--sticky-end[b-rolxvpua50] {
        position: static;
    }
    .nm-grid__th--sticky-end[b-rolxvpua50],
    .nm-grid__td--sticky-end[b-rolxvpua50] {
        border-left: none;
        box-shadow: none;
    }
    .nm-grid__th--sticky-last[b-rolxvpua50],
    .nm-grid__td--sticky-last[b-rolxvpua50] {
        border-right: none;
        box-shadow: none;
    }
}

.nm-grid__state[b-rolxvpua50] { padding: 28px 14px; text-align: center; color: var(--nm-muted); }

.nm-grid__spinner[b-rolxvpua50] {
    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-rolxvpua50 .6s linear infinite;
}

@keyframes nm-grid-spin-b-rolxvpua50 { to { transform: rotate(360deg); } }
/* _content/NGOCMAI.B2E.FE.UI/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-ht5cv1cdeg] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    background: var(--nm-surface);
}

.nm-accordion[b-ht5cv1cdeg]  .nm-acc__item + .nm-acc__item { border-top: 1px solid var(--nm-border); }

.nm-accordion[b-ht5cv1cdeg]  .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-ht5cv1cdeg]  .nm-acc__head:hover:not(:disabled) { background: var(--nm-surface-2); }
.nm-accordion[b-ht5cv1cdeg]  .nm-acc__head:disabled { opacity: .55; cursor: not-allowed; }

.nm-accordion[b-ht5cv1cdeg]  .nm-acc__lead { color: var(--nm-brand-500); font-size: 16px; }
.nm-accordion[b-ht5cv1cdeg]  .nm-acc__title { flex: 1; }

.nm-accordion[b-ht5cv1cdeg]  .nm-acc__chev {
    color: var(--nm-muted);
    font-size: 14px;
    transition: transform .18s ease;
}
.nm-accordion[b-ht5cv1cdeg]  .nm-acc__item.is-open .nm-acc__chev { transform: rotate(180deg); }

.nm-accordion[b-ht5cv1cdeg]  .nm-acc__body {
    padding: 2px 16px 16px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
    line-height: 1.55;
}
/* _content/NGOCMAI.B2E.FE.UI/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-vkfzc1wh98] {
    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-vkfzc1wh98] { font-size: 16px; line-height: 1.4; flex: none; }
.nm-alert__content[b-vkfzc1wh98] { flex: 1; min-width: 0; }
.nm-alert__title[b-vkfzc1wh98] { font-weight: 700; margin-bottom: 2px; color: var(--nm-ink); }
.nm-alert__body[b-vkfzc1wh98] { color: var(--nm-ink-2); }

.nm-alert__close[b-vkfzc1wh98] {
    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-vkfzc1wh98] { color: var(--nm-ink); }

/* Tones */
.nm-alert--info[b-vkfzc1wh98] { background: var(--nm-info-soft); border-color: var(--nm-info); }
.nm-alert--info .nm-alert__icon[b-vkfzc1wh98] { color: var(--nm-info); }

.nm-alert--ok[b-vkfzc1wh98] { background: var(--nm-ok-soft); border-color: var(--nm-ok); }
.nm-alert--ok .nm-alert__icon[b-vkfzc1wh98] { color: var(--nm-ok); }

.nm-alert--warn[b-vkfzc1wh98] { background: var(--nm-warn-soft); border-color: var(--nm-warn); }
.nm-alert--warn .nm-alert__icon[b-vkfzc1wh98] { color: var(--nm-warn); }

.nm-alert--bad[b-vkfzc1wh98] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.nm-alert--bad .nm-alert__icon[b-vkfzc1wh98] { color: var(--nm-bad); }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmAvatar.razor.rz.scp.css */
/* NmAvatar — token-only. */
.nm-avatar[b-1o4qbqda9q] {
    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-1o4qbqda9q] {
    width: 100%;
    height: 100%;
    border-radius: var(--nm-r-pill);
    object-fit: cover;
}

.nm-avatar__initials[b-1o4qbqda9q] {
    line-height: 1;
}

/* Sizes */
.nm-avatar--sm[b-1o4qbqda9q] { width: 28px; height: 28px; font-size: 11px; }
.nm-avatar--md[b-1o4qbqda9q] { width: 38px; height: 38px; font-size: 14px; }
.nm-avatar--lg[b-1o4qbqda9q] { width: 52px; height: 52px; font-size: 18px; }

/* Status dot */
.nm-avatar__status[b-1o4qbqda9q] {
    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-1o4qbqda9q] { background: var(--nm-ok); }
.nm-avatar__status--warn[b-1o4qbqda9q] { background: var(--nm-warn); }
.nm-avatar__status--bad[b-1o4qbqda9q] { background: var(--nm-bad); }
.nm-avatar__status--pending[b-1o4qbqda9q] { background: var(--nm-pending); }
/* _content/NGOCMAI.B2E.FE.UI/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-o6xgw1hoh1] {
    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;
    /* Badge KHÔNG có viền — phải khai tường minh: lớp Tailwind cũ trong Styles/app.css cũng có
       class `.nm-badge` với `ring-1`, mà ring của Tailwind v4 là box-shadow với --tw-ring-color
       mặc định = currentcolor. Thiếu dòng này thì mọi badge bị vẽ thêm viền 1px đúng màu chữ
       (pill rỗng ruột thay vì nền pastel). */
    box-shadow: none;
}

.nm-badge__dot[b-o6xgw1hoh1] {
    width: 6px;
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: currentColor;
    flex: none;
}

.nm-badge--ok[b-o6xgw1hoh1]      { background: var(--nm-ok-soft);      color: var(--nm-ok); }
.nm-badge--warn[b-o6xgw1hoh1]    { background: var(--nm-warn-soft);    color: var(--nm-warn); }
.nm-badge--bad[b-o6xgw1hoh1]     { background: var(--nm-bad-soft);     color: var(--nm-bad); }
.nm-badge--info[b-o6xgw1hoh1]    { background: var(--nm-info-soft);    color: var(--nm-info); }
.nm-badge--pending[b-o6xgw1hoh1] { background: var(--nm-pending-soft); color: var(--nm-pending); }
.nm-badge--violet[b-o6xgw1hoh1]  { background: var(--nm-violet-soft);  color: var(--nm-violet); }
.nm-badge--neutral[b-o6xgw1hoh1] { background: var(--nm-surface-2);    color: var(--nm-ink-2); }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmBreadcrumb.razor.rz.scp.css */
/* NmBreadcrumb — token-only. */
.nm-crumbs[b-a7bzlcliy4] {
    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-a7bzlcliy4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nm-crumbs__link[b-a7bzlcliy4] {
    color: var(--nm-ink-2);
    text-decoration: none;
    transition: color .12s ease;
}
.nm-crumbs__link:hover[b-a7bzlcliy4] { color: var(--nm-brand-600); }

.nm-crumbs__sep[b-a7bzlcliy4] { color: var(--nm-muted); font-size: 10px; }

.nm-crumbs__current[b-a7bzlcliy4] {
    color: var(--nm-ink);
    font-weight: 600;
}
/* _content/NGOCMAI.B2E.FE.UI/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-z8f93wgzkc] {
    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-z8f93wgzkc],
.nm-btn.is-loading[b-z8f93wgzkc] {
    opacity: .6;
    cursor: not-allowed;
}

/* Sizes */
.nm-btn--sm[b-z8f93wgzkc] { padding: 4px 10px; font-size: 12.5px; }
.nm-btn--md[b-z8f93wgzkc] { padding: 8px 14px; font-size: 14px; }
.nm-btn--lg[b-z8f93wgzkc] { padding: 11px 18px; font-size: 15px; }

/* Variants */
.nm-btn--primary[b-z8f93wgzkc] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.nm-btn--primary:hover:not(:disabled)[b-z8f93wgzkc] { background: var(--nm-brand-600); }

.nm-btn--secondary[b-z8f93wgzkc] { background: var(--nm-surface); color: var(--nm-ink); border-color: var(--nm-border-strong); }
.nm-btn--secondary:hover:not(:disabled)[b-z8f93wgzkc] { background: var(--nm-surface-2); }

.nm-btn--ghost[b-z8f93wgzkc] { background: transparent; color: var(--nm-ink-2); }
.nm-btn--ghost:hover:not(:disabled)[b-z8f93wgzkc] { background: var(--nm-surface-2); }

.nm-btn--danger[b-z8f93wgzkc] { background: var(--nm-bad); color: var(--nm-on-brand); }
.nm-btn--danger:hover:not(:disabled)[b-z8f93wgzkc] { background: var(--nm-bad); filter: brightness(.95); }

/* Spinner khi Loading */
.nm-btn__spinner[b-z8f93wgzkc] {
    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-z8f93wgzkc .6s linear infinite;
}

@keyframes nm-btn-spin-b-z8f93wgzkc { to { transform: rotate(360deg); } }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmButtonGroup.razor.rz.scp.css */
/* NmButtonGroup — token-only segmented control. */
.nm-bgroup[b-cwqpe9z2m4] {
    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-cwqpe9z2m4] { display: flex; width: 100%; }

.nm-bgroup__seg[b-cwqpe9z2m4] {
    flex: 1;
    /* inline-flex + gap để icon (nếu có) đứng sát nhãn; ô chỉ có chữ không đổi gì. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    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-cwqpe9z2m4] { color: var(--nm-ink); }
.nm-bgroup__seg:disabled[b-cwqpe9z2m4] { opacity: .5; cursor: not-allowed; }

.nm-bgroup__seg.is-active[b-cwqpe9z2m4] {
    background: var(--nm-surface);
    color: var(--nm-brand-600);
    box-shadow: var(--nm-shadow-sm);
}

/* Icon bổ trợ: nhỏ hơn chữ một nhịp và mờ hơn, để nhãn vẫn là thứ đọc trước. */
.nm-bgroup__ico[b-cwqpe9z2m4] { font-size: .92em; opacity: .8; line-height: 1; }
.nm-bgroup__seg.is-active .nm-bgroup__ico[b-cwqpe9z2m4] { opacity: 1; }

/* Sizes */
.nm-bgroup--sm .nm-bgroup__seg[b-cwqpe9z2m4] { padding: 4px 10px; font-size: 12.5px; }
.nm-bgroup--md .nm-bgroup__seg[b-cwqpe9z2m4] { padding: 6px 14px; font-size: 13.5px; }
.nm-bgroup--lg .nm-bgroup__seg[b-cwqpe9z2m4] { padding: 9px 18px; font-size: 14px; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmCard.razor.rz.scp.css */
/* NmCard — token-only. */
.nm-card[b-lmwki4z659] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

.nm-card.is-elevated[b-lmwki4z659] { box-shadow: var(--nm-shadow); }

.nm-card__head[b-lmwki4z659] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
    font-weight: 600;
    color: var(--nm-ink);
}

.nm-card__body[b-lmwki4z659] { color: var(--nm-ink-2); }
.nm-card.is-padded .nm-card__body[b-lmwki4z659] { padding: 18px; }

.nm-card__foot[b-lmwki4z659] {
    padding: 14px 18px;
    border-top: 1px solid var(--nm-border);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmCheckbox.razor.rz.scp.css */
/* NmCheckbox — token-only. Input gốc ẩn, vẽ ô tick tuỳ biến. */
.nm-check[b-cfgtv7rpgl] {
    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-cfgtv7rpgl] { cursor: not-allowed; opacity: .55; }

.nm-check__box[b-cfgtv7rpgl] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-check__mark[b-cfgtv7rpgl] {
    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-cfgtv7rpgl]::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-cfgtv7rpgl] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
}
.nm-check__box:checked + .nm-check__mark[b-cfgtv7rpgl]::after { transform: rotate(45deg) scale(1); }

.nm-check__box:focus-visible + .nm-check__mark[b-cfgtv7rpgl] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-check__label[b-cfgtv7rpgl] { line-height: 1.3; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmChip.razor.rz.scp.css */
/* NmChip — token-only filter chip. */
.nm-chip[b-duxiax79x1] {
    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-duxiax79x1] { border-color: var(--nm-border-strong); }
.nm-chip:disabled[b-duxiax79x1] { opacity: .55; cursor: not-allowed; }

.nm-chip--active[b-duxiax79x1] {
    background: var(--nm-brand-50);
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
}

.nm-chip__dot[b-duxiax79x1] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); display: inline-block; }
.nm-chip__dot--good[b-duxiax79x1] { background: var(--nm-ok); }
.nm-chip__dot--bad[b-duxiax79x1] { background: var(--nm-bad); }
.nm-chip__dot--accent[b-duxiax79x1] { background: var(--nm-brand-500); }
.nm-chip__dot--info[b-duxiax79x1] { background: var(--nm-info); }
.nm-chip__dot--warn[b-duxiax79x1] { 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-duxiax79x1] { background: var(--nm-pending); }
.nm-chip__dot--violet[b-duxiax79x1] { background: var(--nm-violet); }
/* _content/NGOCMAI.B2E.FE.UI/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-6hq7veb10x] {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-combobox__control[b-6hq7veb10x] {
    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-6hq7veb10x] { border-color: var(--nm-ink-2); }

.nm-combobox.is-open .nm-combobox__control[b-6hq7veb10x],
.nm-combobox .nm-combobox__control:focus-within[b-6hq7veb10x] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-combobox.is-invalid .nm-combobox__control[b-6hq7veb10x] { border-color: var(--nm-bad); }
.nm-combobox.is-invalid.is-open .nm-combobox__control[b-6hq7veb10x],
.nm-combobox.is-invalid .nm-combobox__control:focus-within[b-6hq7veb10x] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-combobox.is-disabled .nm-combobox__control[b-6hq7veb10x] {
    background: var(--nm-surface-2);
    cursor: not-allowed;
}

.nm-combobox__icon[b-6hq7veb10x] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    font-size: 14px;
    pointer-events: none;
}

.nm-combobox__input[b-6hq7veb10x] {
    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-6hq7veb10x]::placeholder { color: var(--nm-muted); }
.nm-combobox__input:disabled[b-6hq7veb10x] { 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-6hq7veb10x] { padding: 5px 6px 5px 30px; font-size: 12.5px; }
.nm-combobox--md .nm-combobox__input[b-6hq7veb10x] { padding: 8px 6px 8px 34px; font-size: 14px; }
.nm-combobox--lg .nm-combobox__input[b-6hq7veb10x] { padding: 11px 8px 11px 38px; font-size: 15px; }

.nm-combobox__clear[b-6hq7veb10x] {
    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-6hq7veb10x] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-combobox__caret[b-6hq7veb10x] {
    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-6hq7veb10x] { transform: rotate(180deg); }

/* Backdrop trong suốt + panel kết quả */
.nm-combobox__backdrop[b-6hq7veb10x] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-combobox__panel[b-6hq7veb10x] {
    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-6hq7veb10x] {
    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-6hq7veb10x] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-combobox__option.is-active:not(:disabled)[b-6hq7veb10x] { background: var(--nm-surface-2); }
.nm-combobox__option.is-selected[b-6hq7veb10x] { color: var(--nm-brand-700); font-weight: 600; }
.nm-combobox__option:disabled[b-6hq7veb10x] { opacity: .5; cursor: not-allowed; }
.nm-combobox__check[b-6hq7veb10x] { flex: none; color: var(--nm-brand-500); font-size: 14px; }

.nm-combobox__empty[b-6hq7veb10x] {
    padding: 14px 10px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
}
/* _content/NGOCMAI.B2E.FE.UI/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-wabw2or23z] {
    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-wabw2or23z] {
    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-wabw2or23z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.nm-cmdk__search-ico[b-wabw2or23z] { color: var(--nm-muted); font-size: 16px; flex: none; }
.nm-cmdk__input[b-wabw2or23z] {
    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-wabw2or23z]::placeholder { color: var(--nm-muted); }

.nm-cmdk__esc[b-wabw2or23z],
.nm-cmdk__item-kbd[b-wabw2or23z] {
    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-wabw2or23z] {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.nm-cmdk__group[b-wabw2or23z] {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.nm-cmdk__item[b-wabw2or23z] {
    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-wabw2or23z] { background: var(--nm-surface-2); }
.nm-cmdk__item.is-active .nm-cmdk__item-ico[b-wabw2or23z] { color: var(--nm-brand-500); }

.nm-cmdk__item-ico[b-wabw2or23z] { flex: none; font-size: 16px; color: var(--nm-ink-2); width: 18px; text-align: center; }
.nm-cmdk__item-label[b-wabw2or23z] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-cmdk__item-go[b-wabw2or23z] { flex: none; color: var(--nm-muted); font-size: 14px; }

.nm-cmdk__empty[b-wabw2or23z] {
    padding: 28px 12px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 13.5px;
}
/* _content/NGOCMAI.B2E.FE.UI/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-ob2gqn3wm6] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-dateinput[b-ob2gqn3wm6] {
    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-ob2gqn3wm6] { border-color: var(--nm-ink-2); }

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

.nm-dateinput:disabled[b-ob2gqn3wm6] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-dateinput.is-invalid[b-ob2gqn3wm6] { border-color: var(--nm-bad); }
.nm-dateinput.is-invalid:focus[b-ob2gqn3wm6] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

/* Sizes */
.nm-dateinput--sm[b-ob2gqn3wm6] { padding: 5px 10px; font-size: 12.5px; }
.nm-dateinput--md[b-ob2gqn3wm6] { padding: 8px 12px; font-size: 14px; }
.nm-dateinput--lg[b-ob2gqn3wm6] { padding: 11px 14px; font-size: 15px; }

/* Nút mở lịch của trình duyệt */
.nm-dateinput[b-ob2gqn3wm6]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.nm-dateinput[b-ob2gqn3wm6]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmDateRange.razor.rz.scp.css */
/* NmDateRange — token-only. Bố cục 2 ô ngày + dải nút preset. */
.nm-daterange[b-5xtlkmoo75] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nm-daterange__fields[b-5xtlkmoo75] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nm-daterange__sep[b-5xtlkmoo75] {
    flex: none;
    color: var(--nm-muted);
    font-size: 14px;
}

.nm-daterange__presets[b-5xtlkmoo75] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nm-daterange__preset[b-5xtlkmoo75] {
    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-5xtlkmoo75] {
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
    background: var(--nm-brand-50);
}
/* _content/NGOCMAI.B2E.FE.UI/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-9ex1kd0683] {
    margin: 0;
    display: grid;
    gap: 0;
    font-family: var(--nm-font);
}

.nm-dl[b-9ex1kd0683]  .nm-dl__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--nm-border);
    min-width: 0;
}

.nm-dl[b-9ex1kd0683]  .nm-dl__term {
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    margin: 0 0 2px;
}

.nm-dl[b-9ex1kd0683]  .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-9ex1kd0683]  .nm-dl__item {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: 12px;
}
.nm-dl.is-inline[b-9ex1kd0683]  .nm-dl__term { margin: 0; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmDivider.razor.rz.scp.css */
/* NmDivider — token-only. */
.nm-divider--h[b-viv5l6peyu] {
    border: none;
    border-top: 1px solid var(--nm-border);
    margin: 16px 0;
    width: 100%;
}

.nm-divider--v[b-viv5l6peyu] {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1em;
    background: var(--nm-border);
    margin: 0 4px;
}

.nm-divider--labeled[b-viv5l6peyu] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.nm-divider__line[b-viv5l6peyu] {
    flex: 1;
    height: 1px;
    background: var(--nm-border);
}

.nm-divider__text[b-viv5l6peyu] {
    font-family: var(--nm-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmDrawer.razor.rz.scp.css */
/* NmDrawer — token-only. */
.nm-drawer-overlay[b-pfqnwfvbw7] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    background: rgba(16, 24, 40, .45);
}

.nm-drawer-panel[b-pfqnwfvbw7] {
    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-pfqnwfvbw7] {
    margin-left: auto;
    animation: nm-drawer-in-right-b-pfqnwfvbw7 .2s ease;
}
.nm-drawer-panel--left[b-pfqnwfvbw7] {
    margin-right: auto;
    animation: nm-drawer-in-left-b-pfqnwfvbw7 .2s ease;
}

@keyframes nm-drawer-in-right-b-pfqnwfvbw7 { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nm-drawer-in-left-b-pfqnwfvbw7  { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.nm-drawer__head[b-pfqnwfvbw7] {
    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-pfqnwfvbw7] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-drawer__close[b-pfqnwfvbw7] {
    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-pfqnwfvbw7] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-drawer__body[b-pfqnwfvbw7] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    color: var(--nm-ink-2);
}

.nm-drawer__foot[b-pfqnwfvbw7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--nm-border);
    flex: none;
}
/* _content/NGOCMAI.B2E.FE.UI/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-5mtomdjkjl] {
    position: relative;
    display: inline-flex;
}

.nm-dropdown__trigger[b-5mtomdjkjl] { display: inline-flex; cursor: pointer; }

.nm-dropdown__backdrop[b-5mtomdjkjl] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

/* position + toạ độ do component đặt bằng style inline sau khi đo (xem NmDropdown.razor).
   KHÔNG dùng absolute: trigger nằm trong bảng cuộn / thẻ có overflow là menu bị cắt. */
.nm-dropdown__menu[b-5mtomdjkjl] {
    position: fixed;
    z-index: 1101;
    min-width: 180px;
    max-height: min(60vh, 420px);
    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-dropdown__menu[b-5mtomdjkjl]  .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-5mtomdjkjl]  .nm-menu__item:hover:not(:disabled) { background: var(--nm-surface-2); }
.nm-dropdown__menu[b-5mtomdjkjl]  .nm-menu__item:disabled { opacity: .5; cursor: not-allowed; }

.nm-dropdown__menu[b-5mtomdjkjl]  .nm-menu__item.is-danger { color: var(--nm-bad); }
.nm-dropdown__menu[b-5mtomdjkjl]  .nm-menu__item.is-danger:hover:not(:disabled) { background: var(--nm-bad-soft); }

.nm-dropdown__menu[b-5mtomdjkjl]  .nm-menu__icon { font-size: 15px; width: 16px; text-align: center; }
.nm-dropdown__menu[b-5mtomdjkjl]  .nm-menu__text { flex: 1; }

.nm-dropdown__menu[b-5mtomdjkjl]  .nm-menu__sep {
    height: 1px;
    background: var(--nm-border);
    margin: 4px 0;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmEmptyState.razor.rz.scp.css */
/* NmEmptyState — token-only. */
.nm-empty[b-t9wk58tp94] {
    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-t9wk58tp94] { padding: 28px 16px; }

.nm-empty__icon[b-t9wk58tp94] {
    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-t9wk58tp94] { width: 44px; height: 44px; font-size: 20px; }

.nm-empty__title[b-t9wk58tp94] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-empty__desc[b-t9wk58tp94] {
    margin: 0;
    font-size: 14px;
    color: var(--nm-muted);
    max-width: 420px;
}

.nm-empty__actions[b-t9wk58tp94] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmField.razor.rz.scp.css */
/* NmField — token-only. */
.nm-field[b-uy490nhb51] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nm-field__label[b-uy490nhb51] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.nm-field__req[b-uy490nhb51] {
    color: var(--nm-bad);
    margin-left: 2px;
}

.nm-field__hint[b-uy490nhb51] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.nm-field__error[b-uy490nhb51] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-bad);
}
/* _content/NGOCMAI.B2E.FE.UI/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-7q3d2zlnga] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-fileupload__drop[b-7q3d2zlnga] {
    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-7q3d2zlnga] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
}
.nm-fileupload:not(.is-disabled) .nm-fileupload__drop:hover[b-7q3d2zlnga] {
    border-color: var(--nm-brand-500);
}
.nm-fileupload.is-disabled .nm-fileupload__drop[b-7q3d2zlnga] {
    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-7q3d2zlnga]  .nm-fileupload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.nm-fileupload.is-disabled[b-7q3d2zlnga]  .nm-fileupload__input { cursor: not-allowed; }

.nm-fileupload__label[b-7q3d2zlnga] {
    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-7q3d2zlnga] {
    font-size: 28px;
    color: var(--nm-brand-500);
    margin-bottom: 2px;
}
.nm-fileupload__title[b-7q3d2zlnga] { font-size: 14px; }
.nm-fileupload__accent[b-7q3d2zlnga] { color: var(--nm-brand-700); font-weight: 600; }
.nm-fileupload__muted[b-7q3d2zlnga] { color: var(--nm-ink-2); }
.nm-fileupload__hint[b-7q3d2zlnga] { font-size: 12px; color: var(--nm-muted); }

/* Danh sách tệp */
.nm-fileupload__list[b-7q3d2zlnga] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nm-fileupload__item[b-7q3d2zlnga] {
    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-7q3d2zlnga] { font-size: 18px; color: var(--nm-ink-2); flex: none; }
.nm-fileupload__item-info[b-7q3d2zlnga] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nm-fileupload__item-name[b-7q3d2zlnga] {
    font-size: 13.5px;
    color: var(--nm-ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-fileupload__item-size[b-7q3d2zlnga] { font-size: 12px; color: var(--nm-muted); }

.nm-fileupload__remove[b-7q3d2zlnga] {
    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-7q3d2zlnga] { background: var(--nm-bad-soft); color: var(--nm-bad); }

/* Lỗi */
.nm-fileupload__errors[b-7q3d2zlnga] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nm-fileupload__error[b-7q3d2zlnga] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--nm-bad);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmFormGrid.razor.rz.scp.css */
/* NmFormGrid — token-only. */
.nm-formgrid[b-7urivrk3yu] {
    display: grid;
    gap: 14px 16px;
}

/* Field chiếm trọn hàng (textarea, ghi chú dài) */
.nm-formgrid[b-7urivrk3yu]  .nm-col-full { grid-column: 1 / -1; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmIconButton.razor.rz.scp.css */
/* NmIconButton — token-only. */
.nm-iconbtn[b-qqlt1ihbh2] {
    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-qqlt1ihbh2] { border-radius: var(--nm-r-pill); }
.nm-iconbtn:disabled[b-qqlt1ihbh2], .nm-iconbtn.is-loading[b-qqlt1ihbh2] { opacity: .6; cursor: not-allowed; }

/* Sizes (vuông) */
.nm-iconbtn--sm[b-qqlt1ihbh2] { width: 28px; height: 28px; font-size: 14px; }
.nm-iconbtn--md[b-qqlt1ihbh2] { width: 34px; height: 34px; font-size: 16px; }
.nm-iconbtn--lg[b-qqlt1ihbh2] { width: 40px; height: 40px; font-size: 18px; }

/* Variants */
.nm-iconbtn--ghost[b-qqlt1ihbh2] { background: transparent; }
.nm-iconbtn--ghost:hover:not(:disabled)[b-qqlt1ihbh2] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-iconbtn--secondary[b-qqlt1ihbh2] { background: var(--nm-surface); border-color: var(--nm-border-strong); }
.nm-iconbtn--secondary:hover:not(:disabled)[b-qqlt1ihbh2] { background: var(--nm-surface-2); }

.nm-iconbtn--primary[b-qqlt1ihbh2] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.nm-iconbtn--primary:hover:not(:disabled)[b-qqlt1ihbh2] { background: var(--nm-brand-600); }

.nm-iconbtn--danger[b-qqlt1ihbh2] { background: transparent; color: var(--nm-bad); }
.nm-iconbtn--danger:hover:not(:disabled)[b-qqlt1ihbh2] { background: var(--nm-bad-soft); }

/* Spinner */
.nm-iconbtn__spinner[b-qqlt1ihbh2] {
    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-qqlt1ihbh2 .6s linear infinite;
}
@keyframes nm-iconbtn-spin-b-qqlt1ihbh2 { to { transform: rotate(360deg); } }
/* _content/NGOCMAI.B2E.FE.UI/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-w8o5cn8kc7] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-input[b-w8o5cn8kc7] {
    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;
    /* Hai dòng dưới trông thừa nhưng KHÔNG được bỏ: Styles/app.css còn class `.nm-input` của lớp
       Tailwind cũ (ring-1 ring-orange-200 shadow-sm font-semibold) dành cho vài <input> thô ở trang
       tour/trip. Thuộc tính nào primitive không khai thì rò xuống — thiếu chúng, mọi ô nhập NM UI
       bị viền cam + chữ đậm. */
    box-shadow: none;
    font-weight: 400;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nm-input[b-w8o5cn8kc7]::placeholder { color: var(--nm-muted); }

.nm-input:hover:not(:disabled)[b-w8o5cn8kc7] { border-color: var(--nm-ink-2); }

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

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

.nm-input.is-invalid[b-w8o5cn8kc7] {
    border-color: var(--nm-bad);
}
.nm-input.is-invalid:focus[b-w8o5cn8kc7] {
    box-shadow: 0 0 0 3px var(--nm-bad-soft);
}

/* Sizes */
.nm-input--sm[b-w8o5cn8kc7] { padding: 5px 10px; font-size: 12.5px; }
.nm-input--md[b-w8o5cn8kc7] { padding: 8px 12px; font-size: 14px; }
.nm-input--lg[b-w8o5cn8kc7] { padding: 11px 14px; font-size: 15px; }

/* Icon đầu ô */
.nm-input.has-icon.nm-input--sm[b-w8o5cn8kc7] { padding-left: 30px; }
.nm-input.has-icon.nm-input--md[b-w8o5cn8kc7] { padding-left: 36px; }
.nm-input.has-icon.nm-input--lg[b-w8o5cn8kc7] { padding-left: 40px; }

.nm-input__icon[b-w8o5cn8kc7] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 15px;
}
.nm-input__icon--start[b-w8o5cn8kc7] { left: 11px; }
/* _content/NGOCMAI.B2E.FE.UI/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-3fdbk78pm8] {
    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-3fdbk78pm8] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-ig.is-invalid[b-3fdbk78pm8] { border-color: var(--nm-bad); }
.nm-ig.is-invalid:focus-within[b-3fdbk78pm8] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-ig__control[b-3fdbk78pm8] { flex: 1; min-width: 0; display: flex; }

.nm-ig__addon[b-3fdbk78pm8] {
    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-3fdbk78pm8] { border-right: 1px solid var(--nm-border); }
.nm-ig__addon:last-child[b-3fdbk78pm8] { border-left: 1px solid var(--nm-border); }

/* Sizes */
.nm-ig--sm[b-3fdbk78pm8] { font-size: 12.5px; }
.nm-ig--sm .nm-ig__addon[b-3fdbk78pm8] { padding: 0 10px; }
.nm-ig--md[b-3fdbk78pm8] { font-size: 14px; }
.nm-ig--lg[b-3fdbk78pm8] { font-size: 15px; }
.nm-ig--lg .nm-ig__addon[b-3fdbk78pm8] { padding: 0 14px; }

/* Bỏ viền/bo góc/ring của control con để liền khối */
.nm-ig[b-3fdbk78pm8]  input,
.nm-ig[b-3fdbk78pm8]  textarea,
.nm-ig[b-3fdbk78pm8]  select,
.nm-ig[b-3fdbk78pm8]  .nm-input,
.nm-ig[b-3fdbk78pm8]  .nm-select {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
}
.nm-ig[b-3fdbk78pm8]  .nm-input-wrap,
.nm-ig[b-3fdbk78pm8]  .nm-select-wrap { width: 100%; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmKpi.razor.rz.scp.css */
/* NmKpi — token-only. */
.nm-kpi[b-nyuu2bcx55] {
    padding: 12px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.nm-kpi__lbl[b-nyuu2bcx55] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--nm-muted);
    font-weight: 600;
}

.nm-kpi__val[b-nyuu2bcx55] {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.nm-kpi__dot[b-nyuu2bcx55] { width: 8px; height: 8px; border-radius: var(--nm-r-pill); display: inline-block; }
.nm-kpi__dot--accent[b-nyuu2bcx55] { background: var(--nm-brand-500); }
.nm-kpi__dot--good[b-nyuu2bcx55] { background: var(--nm-ok); }
.nm-kpi__dot--info[b-nyuu2bcx55] { background: var(--nm-info); }
.nm-kpi__dot--warn[b-nyuu2bcx55] { background: var(--nm-warn); }
.nm-kpi__dot--bad[b-nyuu2bcx55] { background: var(--nm-bad); }
.nm-kpi__dot--pending[b-nyuu2bcx55] { background: var(--nm-pending); }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmLightbox.razor.rz.scp.css */
/* NmLightbox — token-only; nền tối cố định (ảnh cần nền trung tính, không theo màu trang). */
.nm-lightbox[b-hov99z5nok] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    background: rgba(12, 16, 24, .92);
    outline: none;
    overscroll-behavior: contain;
}

.nm-lightbox__bar[b-hov99z5nok] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #fff;
    flex: none;
}

.nm-lightbox__cap[b-hov99z5nok] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nm-lightbox__pos[b-hov99z5nok] {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

.nm-lightbox__btn[b-hov99z5nok] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--nm-r-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}
.nm-lightbox__btn:hover[b-hov99z5nok] { background: rgba(255, 255, 255, .22); }

.nm-lightbox__stage[b-hov99z5nok] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px 24px;
}

.nm-lightbox__img[b-hov99z5nok] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    background: #fff;
    cursor: default;
}

.nm-lightbox__nav[b-hov99z5nok] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--nm-r-pill);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.nm-lightbox__nav:hover[b-hov99z5nok] { background: rgba(255, 255, 255, .26); }
.nm-lightbox__nav--prev[b-hov99z5nok] { left: 12px; }
.nm-lightbox__nav--next[b-hov99z5nok] { right: 12px; }

@media (max-width: 640px) {
    .nm-lightbox__stage[b-hov99z5nok] { padding: 0 8px 16px; }
    .nm-lightbox__nav[b-hov99z5nok] { top: auto; bottom: 20px; transform: none; }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmModal.razor.rz.scp.css */
/* NmModal — token-only. */
.nm-modal-overlay[b-ykcgh6w6oc] {
    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-ykcgh6w6oc] {
    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-ykcgh6w6oc] { max-width: 420px; }
.nm-modal-panel--md[b-ykcgh6w6oc] { max-width: 560px; }
.nm-modal-panel--lg[b-ykcgh6w6oc] { max-width: 820px; }

.nm-modal__head[b-ykcgh6w6oc] {
    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-ykcgh6w6oc] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-modal__close[b-ykcgh6w6oc] {
    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-ykcgh6w6oc] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-modal__body[b-ykcgh6w6oc] {
    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-ykcgh6w6oc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--nm-border);
}
/* _content/NGOCMAI.B2E.FE.UI/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-m46gp5gtdo] {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-multiselect__control[b-m46gp5gtdo] {
    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-m46gp5gtdo] { border-color: var(--nm-ink-2); }

.nm-multiselect.is-open .nm-multiselect__control[b-m46gp5gtdo],
.nm-multiselect .nm-multiselect__control:focus-within[b-m46gp5gtdo] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-multiselect.is-invalid .nm-multiselect__control[b-m46gp5gtdo] { border-color: var(--nm-bad); }
.nm-multiselect.is-invalid.is-open .nm-multiselect__control[b-m46gp5gtdo],
.nm-multiselect.is-invalid .nm-multiselect__control:focus-within[b-m46gp5gtdo] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-multiselect.is-disabled .nm-multiselect__control[b-m46gp5gtdo] {
    background: var(--nm-surface-2);
    cursor: not-allowed;
}

.nm-multiselect__chips[b-m46gp5gtdo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.nm-multiselect__input[b-m46gp5gtdo] {
    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-m46gp5gtdo]::placeholder { color: var(--nm-muted); }
.nm-multiselect__input:disabled[b-m46gp5gtdo] { cursor: not-allowed; }

/* Sizes — padding của vùng chips + cỡ chữ ô nhập */
.nm-multiselect--sm .nm-multiselect__chips[b-m46gp5gtdo] { padding: 4px 6px; }
.nm-multiselect--sm .nm-multiselect__input[b-m46gp5gtdo] { font-size: 12.5px; }
.nm-multiselect--md .nm-multiselect__chips[b-m46gp5gtdo] { padding: 6px 8px; }
.nm-multiselect--md .nm-multiselect__input[b-m46gp5gtdo] { font-size: 14px; }
.nm-multiselect--lg .nm-multiselect__chips[b-m46gp5gtdo] { padding: 8px 10px; }
.nm-multiselect--lg .nm-multiselect__input[b-m46gp5gtdo] { font-size: 15px; }

.nm-multiselect__clear[b-m46gp5gtdo] {
    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-m46gp5gtdo] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-multiselect__caret[b-m46gp5gtdo] {
    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-m46gp5gtdo] { transform: rotate(180deg); }

/* Backdrop trong suốt + panel kết quả */
.nm-multiselect__backdrop[b-m46gp5gtdo] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-multiselect__panel[b-m46gp5gtdo] {
    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-m46gp5gtdo] {
    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-m46gp5gtdo] { flex: none; font-size: 15px; color: var(--nm-muted); }
.nm-multiselect__option.is-selected .nm-multiselect__box[b-m46gp5gtdo] { color: var(--nm-brand-500); }
.nm-multiselect__option-label[b-m46gp5gtdo] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-multiselect__option.is-active:not(:disabled)[b-m46gp5gtdo] { background: var(--nm-surface-2); }
.nm-multiselect__option.is-selected[b-m46gp5gtdo] { color: var(--nm-brand-700); font-weight: 600; }
.nm-multiselect__option:disabled[b-m46gp5gtdo] { opacity: .5; cursor: not-allowed; }

.nm-multiselect__empty[b-m46gp5gtdo] {
    padding: 14px 10px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmNumberStepper.razor.rz.scp.css */
/* NmNumberStepper — token-only. */
.nm-num[b-4ivil1209r] {
    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-4ivil1209r] { opacity: .6; }

.nm-num__btn[b-4ivil1209r] {
    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-4ivil1209r] { background: var(--nm-surface-2); color: var(--nm-ink); }
.nm-num__btn:disabled[b-4ivil1209r] { color: var(--nm-muted); cursor: not-allowed; }

.nm-num__field[b-4ivil1209r] {
    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-4ivil1209r] { background: var(--nm-brand-50); }

/* Sizes */
.nm-num--sm .nm-num__btn[b-4ivil1209r] { width: 28px; font-size: 12px; }
.nm-num--sm .nm-num__field[b-4ivil1209r] { height: 28px; font-size: 14px; }
.nm-num--md .nm-num__btn[b-4ivil1209r] { width: 34px; font-size: 14px; }
.nm-num--md .nm-num__field[b-4ivil1209r] { height: 34px; font-size: 14px; }
.nm-num--lg .nm-num__btn[b-4ivil1209r] { width: 40px; font-size: 14px; }
.nm-num--lg .nm-num__field[b-4ivil1209r] { width: 56px; height: 40px; font-size: 15px; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmPageHeader.razor.rz.scp.css */
/* NmPageHeader — token-only. */
.nm-pageheader[b-4rdjnz0ijj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.nm-pageheader__crumb[b-4rdjnz0ijj] { margin-bottom: 2px; }

.nm-pageheader__row[b-4rdjnz0ijj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-pageheader__titles[b-4rdjnz0ijj] { min-width: 0; }

.nm-pageheader__title[b-4rdjnz0ijj] {
    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-4rdjnz0ijj] { color: var(--nm-brand-500); font-size: 20px; }

.nm-pageheader__sub[b-4rdjnz0ijj] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nm-muted);
}

.nm-pageheader__actions[b-4rdjnz0ijj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmPagination.razor.rz.scp.css */
/* NmPagination — token-only. */
.nm-pager[b-y9u3b4orqp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--nm-font);
}

.nm-pager__summary[b-y9u3b4orqp] {
    font-size: 12.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.nm-pager__list[b-y9u3b4orqp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nm-pager__btn[b-y9u3b4orqp] {
    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;
    text-decoration: none; /* chế độ Href: ô là thẻ <a> */
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.nm-pager__btn:hover:not(:disabled):not(.is-active)[b-y9u3b4orqp] {
    border-color: var(--nm-border-strong);
    background: var(--nm-surface-2);
}

.nm-pager__btn:disabled[b-y9u3b4orqp] { opacity: .45; cursor: not-allowed; }

.nm-pager__btn.is-active[b-y9u3b4orqp] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
    color: var(--nm-on-brand);
    cursor: default;
}

.nm-pager__gap[b-y9u3b4orqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--nm-muted);
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmPopover.razor.rz.scp.css */
/* NmPopover — token-only. Backdrop trong suốt bắt click-outside (không JS). */
.nm-pop[b-xiqzzojyjk] {
    position: relative;
    display: inline-flex;
}

.nm-pop__trigger[b-xiqzzojyjk] { display: inline-flex; cursor: pointer; }

.nm-pop__backdrop[b-xiqzzojyjk] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-pop__panel[b-xiqzzojyjk] {
    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-xiqzzojyjk]  { left: 0; }
.nm-pop__panel--end[b-xiqzzojyjk]    { right: 0; }
.nm-pop__panel--center[b-xiqzzojyjk] { left: 50%; transform: translateX(-50%); }

.nm-pop__head[b-xiqzzojyjk] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.nm-pop__title[b-xiqzzojyjk] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }

.nm-pop__body[b-xiqzzojyjk] {
    padding: 14px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
    line-height: 1.5;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmProgress.razor.rz.scp.css */
/* NmProgress — token-only. */
.nm-progress[b-t75b40uv5i] { font-family: var(--nm-font); width: 100%; }

.nm-progress__head[b-t75b40uv5i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
.nm-progress__label[b-t75b40uv5i] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); }
.nm-progress__pct[b-t75b40uv5i] { font-size: 12px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

.nm-progress__track[b-t75b40uv5i] {
    height: 8px;
    background: var(--nm-surface-2);
    border-radius: var(--nm-r-pill);
    overflow: hidden;
}

.nm-progress__fill[b-t75b40uv5i] {
    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-t75b40uv5i] { background: var(--nm-brand-500); }
.nm-progress--ok .nm-progress__fill[b-t75b40uv5i] { background: var(--nm-ok); }
.nm-progress--warn .nm-progress__fill[b-t75b40uv5i] { background: var(--nm-warn); }
.nm-progress--bad .nm-progress__fill[b-t75b40uv5i] { background: var(--nm-bad); }
.nm-progress--info .nm-progress__fill[b-t75b40uv5i] { background: var(--nm-info); }

/* Indeterminate: dải chạy lướt */
.nm-progress.is-indeterminate .nm-progress__fill[b-t75b40uv5i] {
    width: 40%;
    animation: nm-progress-slide-b-t75b40uv5i 1.1s ease-in-out infinite;
}

@keyframes nm-progress-slide-b-t75b40uv5i {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}
/* _content/NGOCMAI.B2E.FE.UI/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-kvtgiebvhu] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.nm-radio-group.is-vertical[b-kvtgiebvhu] {
    flex-direction: column;
    gap: 10px;
}

.nm-radio[b-kvtgiebvhu] {
    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-kvtgiebvhu] { cursor: not-allowed; opacity: .55; }

.nm-radio__input[b-kvtgiebvhu] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-radio__mark[b-kvtgiebvhu] {
    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-kvtgiebvhu]::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-kvtgiebvhu] { border-color: var(--nm-brand-500); }
.nm-radio__input:checked + .nm-radio__mark[b-kvtgiebvhu]::after { transform: scale(1); }

.nm-radio__input:focus-visible + .nm-radio__mark[b-kvtgiebvhu] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-radio__label[b-kvtgiebvhu] { line-height: 1.3; }
/* _content/NGOCMAI.B2E.FE.UI/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-8gc12um42q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.nm-rangeslider[b-8gc12um42q] {
    position: relative;
    height: 18px;
    width: 100%;
}
.nm-rangeslider.is-disabled[b-8gc12um42q] { opacity: .5; }

.nm-rangeslider__track[b-8gc12um42q],
.nm-rangeslider__fill[b-8gc12um42q] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: var(--nm-r-pill);
    pointer-events: none;
}
.nm-rangeslider__track[b-8gc12um42q] {
    left: 0;
    right: 0;
    background: var(--nm-border-strong);
}
.nm-rangeslider__fill[b-8gc12um42q] {
    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-8gc12um42q] {
    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-8gc12um42q] { z-index: 3; }
.nm-rangeslider__input--start[b-8gc12um42q] { z-index: 3; }

/* Track của input để trong suốt (đã có track div riêng) */
.nm-rangeslider__input[b-8gc12um42q]::-webkit-slider-runnable-track {
    height: 18px;
    background: transparent;
}
.nm-rangeslider__input[b-8gc12um42q]::-moz-range-track {
    height: 18px;
    background: transparent;
}

/* Thumb — chỉ phần tử này bắt chuột */
.nm-rangeslider__input[b-8gc12um42q]::-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-8gc12um42q]::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

.nm-rangeslider__input[b-8gc12um42q]::-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-8gc12um42q]::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

.nm-rangeslider.is-disabled .nm-rangeslider__input[b-8gc12um42q]::-webkit-slider-thumb { cursor: not-allowed; }
.nm-rangeslider.is-disabled .nm-rangeslider__input[b-8gc12um42q]::-moz-range-thumb { cursor: not-allowed; }

/* Nhãn 2 đầu */
.nm-rangeslider__labels[b-8gc12um42q] {
    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;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmRating.razor.rz.scp.css */
/* NmRating — token-only. */
.nm-rating[b-y8n4thybqu] {
    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-y8n4thybqu] {
    position: relative;
    display: inline-flex;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 2px;
}

.nm-rating__base[b-y8n4thybqu] { color: var(--nm-border-strong); }

.nm-rating__fill[b-y8n4thybqu] {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f59e0b;
}

/* Interactive */
.nm-rating__stars--interactive[b-y8n4thybqu] { letter-spacing: 0; gap: 2px; }

.nm-rating__btn[b-y8n4thybqu] {
    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-y8n4thybqu] { transform: scale(1.12); }
.nm-rating__btn .is-on[b-y8n4thybqu] { color: #f59e0b; }

.nm-rating__num[b-y8n4thybqu] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmSelect.razor.rz.scp.css */
/* NmSelect — token-only. Ẩn caret mặc định, vẽ caret riêng. */
.nm-select-wrap[b-jj1scg0ph2] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-select[b-jj1scg0ph2] {
    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-jj1scg0ph2] { border-color: var(--nm-ink-2); }

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

.nm-select:disabled[b-jj1scg0ph2] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-select.is-invalid[b-jj1scg0ph2] { border-color: var(--nm-bad); }
.nm-select.is-invalid:focus[b-jj1scg0ph2] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

/* Sizes — chừa chỗ caret bên phải */
.nm-select--sm[b-jj1scg0ph2] { padding: 5px 30px 5px 10px; font-size: 12.5px; }
.nm-select--md[b-jj1scg0ph2] { padding: 8px 34px 8px 12px; font-size: 14px; }
.nm-select--lg[b-jj1scg0ph2] { padding: 11px 38px 11px 14px; font-size: 15px; }

.nm-select__caret[b-jj1scg0ph2] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 12px;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmSkeleton.razor.rz.scp.css */
/* NmSkeleton — token-only. Shimmer dùng gradient trên nền surface-2. */
.nm-skel[b-okx05jhpfj] {
    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-okx05jhpfj 1.4s ease infinite;
}

.nm-skel--text[b-okx05jhpfj] {
    height: 0.85em;
    border-radius: var(--nm-r-input);
    margin: 3px 0;
}

.nm-skel--rect[b-okx05jhpfj] {
    width: 100%;
    height: 80px;
    border-radius: var(--nm-r-input);
}

.nm-skel--circle[b-okx05jhpfj] {
    width: 40px;
    height: 40px;
    border-radius: var(--nm-r-pill);
}

.nm-skel-lines[b-okx05jhpfj] { display: block; }
.nm-skel-lines .nm-skel--text[b-okx05jhpfj] { width: 100%; }

@keyframes nm-skel-shimmer-b-okx05jhpfj {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* _content/NGOCMAI.B2E.FE.UI/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-bkhr63gh1y] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.nm-slider[b-bkhr63gh1y] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 18px;
    background: transparent;
    cursor: pointer;
    outline: none;
}
.nm-slider:disabled[b-bkhr63gh1y] { cursor: not-allowed; opacity: .5; }

/* ── WebKit / Blink ── */
.nm-slider[b-bkhr63gh1y]::-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-bkhr63gh1y]::-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-bkhr63gh1y]::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }
.nm-slider:hover:not(:disabled)[b-bkhr63gh1y]::-webkit-slider-thumb { border-color: var(--nm-brand-600); }

/* ── Firefox ── */
.nm-slider[b-bkhr63gh1y]::-moz-range-track {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
}
.nm-slider[b-bkhr63gh1y]::-moz-range-progress {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
}
.nm-slider[b-bkhr63gh1y]::-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-bkhr63gh1y]::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

/* Ô giá trị */
.nm-slider__value[b-bkhr63gh1y] {
    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;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmSpinner.razor.rz.scp.css */
/* NmSpinner — token-only. */
.nm-spin-wrap[b-xz74s8wy4t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nm-font);
}
.nm-spin-wrap.is-center[b-xz74s8wy4t] { display: flex; justify-content: center; width: 100%; }

.nm-spin[b-xz74s8wy4t] {
    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-xz74s8wy4t .65s linear infinite;
}

.nm-spin--sm[b-xz74s8wy4t] { width: 16px; height: 16px; border-width: 2px; }
.nm-spin--md[b-xz74s8wy4t] { width: 24px; height: 24px; }
.nm-spin--lg[b-xz74s8wy4t] { width: 36px; height: 36px; border-width: 3px; }

.nm-spin__label[b-xz74s8wy4t] { font-size: 14px; color: var(--nm-muted); }

@keyframes nm-spin-rot-b-xz74s8wy4t { to { transform: rotate(360deg); } }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmStatGrid.razor.rz.scp.css */
/* NmStatGrid — token-only. */
.nm-statgrid[b-3lc2n72jbm] {
    display: grid;
    gap: 12px;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmSteps.razor.rz.scp.css */
/* NmSteps — token-only. */
.nm-steps[b-mwx73ehqrw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    font-family: var(--nm-font);
}

.nm-step[b-mwx73ehqrw] {
    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-mwx73ehqrw] {
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--nm-border);
}
.nm-step--done .nm-step__line[b-mwx73ehqrw],
.nm-step--current .nm-step__line[b-mwx73ehqrw] { background: var(--nm-brand-500); }

.nm-step__dot[b-mwx73ehqrw] {
    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-mwx73ehqrw] { cursor: pointer; }

.nm-step--done .nm-step__dot[b-mwx73ehqrw] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
    color: var(--nm-on-brand);
}
.nm-step--current .nm-step__dot[b-mwx73ehqrw] {
    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-mwx73ehqrw] { display: flex; flex-direction: column; gap: 1px; }

.nm-step__label[b-mwx73ehqrw] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}
.nm-step--current .nm-step__label[b-mwx73ehqrw] { color: var(--nm-ink); }

.nm-step__desc[b-mwx73ehqrw] { font-size: 11px; color: var(--nm-muted); }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmSwitch.razor.rz.scp.css */
/* NmSwitch — token-only. Input gốc ẩn, vẽ track + thumb. */
.nm-switch[b-dyqsjywwiq] {
    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-dyqsjywwiq] { cursor: not-allowed; opacity: .55; }

.nm-switch__input[b-dyqsjywwiq] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-switch__track[b-dyqsjywwiq] {
    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-dyqsjywwiq] {
    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-dyqsjywwiq] { background: var(--nm-brand-500); }
.nm-switch__input:checked + .nm-switch__track .nm-switch__thumb[b-dyqsjywwiq] { transform: translateX(18px); }

.nm-switch__input:focus-visible + .nm-switch__track[b-dyqsjywwiq] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-switch__label[b-dyqsjywwiq] { line-height: 1.3; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmTabs.razor.rz.scp.css */
/* NmTabs — token-only. */
.nm-tabs__bar[b-uh9qdbnncj] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--nm-border);
}

.nm-tabs__tab[b-uh9qdbnncj] {
    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-uh9qdbnncj] { color: var(--nm-ink); }
.nm-tabs__tab:disabled[b-uh9qdbnncj] { opacity: .5; cursor: not-allowed; }

.nm-tabs__tab.is-active[b-uh9qdbnncj] {
    color: var(--nm-brand-600);
    border-bottom-color: var(--nm-brand-500);
}

.nm-tabs__badge[b-uh9qdbnncj] {
    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-uh9qdbnncj] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.nm-tabs__panel[b-uh9qdbnncj] { padding-top: 16px; }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmTag.razor.rz.scp.css */
/* NmTag — token-only. Tone dùng status vocabulary (giống NmBadge). */
.nm-tag[b-0aol4gkc80] {
    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-0aol4gkc80] { padding-right: 10px; }

.nm-tag__text[b-0aol4gkc80] { display: inline-flex; }

.nm-tag__close[b-0aol4gkc80] {
    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-0aol4gkc80] { opacity: 1; background: rgba(0, 0, 0, .08); }

.nm-tag--ok[b-0aol4gkc80]      { background: var(--nm-ok-soft);      color: var(--nm-ok); }
.nm-tag--warn[b-0aol4gkc80]    { background: var(--nm-warn-soft);    color: var(--nm-warn); }
.nm-tag--bad[b-0aol4gkc80]     { background: var(--nm-bad-soft);     color: var(--nm-bad); }
.nm-tag--info[b-0aol4gkc80]    { background: var(--nm-info-soft);    color: var(--nm-info); }
.nm-tag--pending[b-0aol4gkc80] { background: var(--nm-pending-soft); color: var(--nm-pending); }
.nm-tag--violet[b-0aol4gkc80]  { background: var(--nm-violet-soft);  color: var(--nm-violet); }
.nm-tag--neutral[b-0aol4gkc80] { background: var(--nm-surface-2);    color: var(--nm-ink-2); }
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmTextArea.razor.rz.scp.css */
/* NmTextArea — token-only. Đồng bộ diện mạo với NmInput. */
.nm-textarea[b-ejbtnqozl8] {
    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-ejbtnqozl8]::placeholder { color: var(--nm-muted); }
.nm-textarea:hover:not(:disabled)[b-ejbtnqozl8] { border-color: var(--nm-ink-2); }

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

.nm-textarea:disabled[b-ejbtnqozl8] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-textarea.is-invalid[b-ejbtnqozl8] { border-color: var(--nm-bad); }
.nm-textarea.is-invalid:focus[b-ejbtnqozl8] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }
/* _content/NGOCMAI.B2E.FE.UI/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-cvd63qva6v] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-timeinput[b-cvd63qva6v] {
    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-cvd63qva6v] { border-color: var(--nm-ink-2); }

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

.nm-timeinput:disabled[b-cvd63qva6v] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-timeinput.is-invalid[b-cvd63qva6v] { border-color: var(--nm-bad); }
.nm-timeinput.is-invalid:focus[b-cvd63qva6v] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-timeinput--sm[b-cvd63qva6v] { padding: 5px 10px; font-size: 12.5px; }
.nm-timeinput--md[b-cvd63qva6v] { padding: 8px 12px; font-size: 14px; }
.nm-timeinput--lg[b-cvd63qva6v] { padding: 11px 14px; font-size: 15px; }

.nm-timeinput[b-cvd63qva6v]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.nm-timeinput[b-cvd63qva6v]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* _content/NGOCMAI.B2E.FE.UI/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-shayfjczo9] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--nm-font);
}

.nm-timeline[b-shayfjczo9]  .nm-tl__item {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 18px;
}
.nm-timeline[b-shayfjczo9]  .nm-tl__item:last-child { padding-bottom: 0; }

/* Đường nối dọc giữa các mốc */
.nm-timeline[b-shayfjczo9]  .nm-tl__marker {
    position: relative;
    display: flex;
    justify-content: center;
    flex: none;
    width: 18px;
}
.nm-timeline[b-shayfjczo9]  .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-shayfjczo9]  .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-shayfjczo9]  .nm-tl__dot--accent  { background: var(--nm-brand-500); }
.nm-timeline[b-shayfjczo9]  .nm-tl__dot--ok      { background: var(--nm-ok); }
.nm-timeline[b-shayfjczo9]  .nm-tl__dot--warn    { background: var(--nm-warn); }
.nm-timeline[b-shayfjczo9]  .nm-tl__dot--bad     { background: var(--nm-bad); }
.nm-timeline[b-shayfjczo9]  .nm-tl__dot--info    { background: var(--nm-info); }
.nm-timeline[b-shayfjczo9]  .nm-tl__dot--pending { background: var(--nm-pending); }

.nm-timeline[b-shayfjczo9]  .nm-tl__content { flex: 1; min-width: 0; }

.nm-timeline[b-shayfjczo9]  .nm-tl__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.nm-timeline[b-shayfjczo9]  .nm-tl__title { font-size: 13.5px; font-weight: 600; color: var(--nm-ink); }
.nm-timeline[b-shayfjczo9]  .nm-tl__time { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }

.nm-timeline[b-shayfjczo9]  .nm-tl__body {
    margin-top: 2px;
    font-size: 14px;
    color: var(--nm-ink-2);
    line-height: 1.5;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmToolbar.razor.rz.scp.css */
/* NmToolbar — token-only. */
.nm-toolbar[b-5qzv0z5om5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nm-toolbar.is-boxed[b-5qzv0z5om5] {
    padding: 12px 14px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
}

.nm-toolbar__start[b-5qzv0z5om5],
.nm-toolbar__end[b-5qzv0z5om5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* _content/NGOCMAI.B2E.FE.UI/src/Ui/NmTooltip.razor.rz.scp.css */
/* NmTooltip — token-only, thuần CSS (hover/focus). */
.nm-tip[b-q8go5c5c6s] {
    position: relative;
    display: inline-flex;
    align-items: center;
    outline: none;
}

.nm-tip__bubble[b-q8go5c5c6s] {
    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-q8go5c5c6s],
.nm-tip:focus-visible .nm-tip__bubble[b-q8go5c5c6s] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Positions */
.nm-tip--top .nm-tip__bubble[b-q8go5c5c6s]    { bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 2px); }
.nm-tip--top:hover .nm-tip__bubble[b-q8go5c5c6s],
.nm-tip--top:focus-visible .nm-tip__bubble[b-q8go5c5c6s] { transform: translate(-50%, 0); }

.nm-tip--bottom .nm-tip__bubble[b-q8go5c5c6s] { top: calc(100% + 7px); left: 50%; transform: translate(-50%, -2px); }
.nm-tip--bottom:hover .nm-tip__bubble[b-q8go5c5c6s],
.nm-tip--bottom:focus-visible .nm-tip__bubble[b-q8go5c5c6s] { transform: translate(-50%, 0); }

.nm-tip--left .nm-tip__bubble[b-q8go5c5c6s]   { right: calc(100% + 7px); top: 50%; transform: translate(2px, -50%); }
.nm-tip--left:hover .nm-tip__bubble[b-q8go5c5c6s],
.nm-tip--left:focus-visible .nm-tip__bubble[b-q8go5c5c6s] { transform: translate(0, -50%); }

.nm-tip--right .nm-tip__bubble[b-q8go5c5c6s]  { left: calc(100% + 7px); top: 50%; transform: translate(-2px, -50%); }
.nm-tip--right:hover .nm-tip__bubble[b-q8go5c5c6s],
.nm-tip--right:focus-visible .nm-tip__bubble[b-q8go5c5c6s] { transform: translate(0, -50%); }
/* _content/NGOCMAI.B2E.FE.UI/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-585tkla6ha] {
    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-585tkla6ha] {
    padding-left: 14px;
    margin-left: 11px;
    border-left: 1px solid var(--nm-border);
}

.nm-tree__item[b-585tkla6ha] { position: relative; }

.nm-tree__row[b-585tkla6ha] {
    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-585tkla6ha] { background: var(--nm-surface-2); }
.nm-tree__row.is-selected[b-585tkla6ha] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-weight: 600;
}
.nm-tree__row.is-disabled[b-585tkla6ha] {
    color: var(--nm-muted);
    cursor: not-allowed;
}
.nm-tree__row.is-disabled:hover[b-585tkla6ha] { background: transparent; }

.nm-tree__toggle[b-585tkla6ha] {
    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-585tkla6ha] { background: var(--nm-border); color: var(--nm-ink); }
.nm-tree__toggle.is-open[b-585tkla6ha] { transform: rotate(90deg); }
.nm-tree__toggle--leaf[b-585tkla6ha] { cursor: default; }
.nm-tree__toggle--leaf:hover[b-585tkla6ha] { background: transparent; }

.nm-tree__icon[b-585tkla6ha] {
    flex: none;
    font-size: 14px;
    color: var(--nm-ink-2);
}
.nm-tree__row.is-selected .nm-tree__icon[b-585tkla6ha] { color: var(--nm-brand-600); }

.nm-tree__label[b-585tkla6ha] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}