/* _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); }
}

/* Cảnh báo máy mới: máy LẠ ⇒ biểu tượng nền cam nhạt (cả khối, không viền một cạnh). */
.sam-icon--warn[b-wbot4uj66n] {
    background: #fff4e5;
    color: #c2410c;
}

.sam-btn-danger[b-wbot4uj66n] {
    border-color: transparent;
    color: #fff;
    background: #dc2626;
}

    .sam-btn-danger:hover[b-wbot4uj66n] {
        background: #b91c1c;
        color: #fff;
    }

.sam-error[b-wbot4uj66n] {
    margin: 0 22px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    line-height: 1.45;
}

.sam-error--inline[b-wbot4uj66n] {
    margin: 4px 0 0;
}

.sam-field[b-wbot4uj66n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

    .sam-field input[b-wbot4uj66n] {
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--d-line);
        border-radius: 10px;
        background: var(--d-surface);
        color: var(--d-ink);
        font-size: 14px;
        outline: none;
    }

        .sam-field input:focus[b-wbot4uj66n] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 0, .15);
        }

.sam-rule[b-wbot4uj66n] {
    margin: 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

.sam-actions--flush[b-wbot4uj66n] {
    margin: 8px -22px -16px;
}

.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 — thẻ vé xác nhận (07/11/2026). Cùng tông với trang kết quả / hành khách / thanh toán. */
.fcfm-root[b-b3y6n5of9k] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #e7e9ee;
    --d-line-2: #f0f1f4;
    --d-ink: #1b2232;
    --d-ink-2: #3d4250;
    --d-ink-3: #6b7180;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff4ec;
    --d-good: #14804a;
    --d-r: 16px;
    --fcfm-num: 'Chakra Petch', var(--nm-font, inherit), system-ui, sans-serif;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

/* ── Thẻ vé ── */
.fcfm-ticket[b-b3y6n5of9k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fcfm-ticket-main[b-b3y6n5of9k] {
    padding: 22px 24px;
    min-width: 0;
}

.fcfm-ok[b-b3y6n5of9k] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e8f6ee;
    color: var(--d-good);
    font-size: 12.5px;
    font-weight: 700;
}

.fcfm-h[b-b3y6n5of9k] {
    margin: 12px 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--d-ink);
    line-height: 1.25;
}

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

    .fcfm-sub[b-b3y6n5of9k]  b,
    .fcfm-sub b[b-b3y6n5of9k] {
        color: var(--d-ink);
    }

.fcfm-purpose[b-b3y6n5of9k] {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 600;
}

    .fcfm-purpose.is-company[b-b3y6n5of9k] {
        background: var(--d-accent-soft);
        color: #c24e00;
    }

.fcfm-legs[b-b3y6n5of9k] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--d-line);
}

.fcfm-leg[b-b3y6n5of9k] {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto;
    align-items: center;
    gap: 14px;
}

    .fcfm-leg .ep[b-b3y6n5of9k] {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

        .fcfm-leg .ep.end[b-b3y6n5of9k] {
            text-align: right;
            align-items: flex-end;
        }

    .fcfm-leg .t[b-b3y6n5of9k] {
        font-family: var(--fcfm-num);
        font-size: 24px;
        font-weight: 700;
        white-space: nowrap;
    }

        .fcfm-leg .t sup[b-b3y6n5of9k] {
            font-size: 11px;
            color: #c24e00;
            margin-left: 2px;
        }

    .fcfm-leg .i[b-b3y6n5of9k] {
        font-family: var(--fcfm-num);
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink-2);
    }

    .fcfm-leg .d[b-b3y6n5of9k] {
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

    .fcfm-leg .path[b-b3y6n5of9k] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: var(--d-ink-3);
        text-align: center;
        min-width: 0;
    }

        .fcfm-leg .path .air[b-b3y6n5of9k] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

    .fcfm-leg .ln[b-b3y6n5of9k] {
        position: relative;
        display: block;
        width: 100%;
        height: 2px;
        background: repeating-linear-gradient(90deg, #c9ced8 0 5px, transparent 5px 9px);
    }

        .fcfm-leg .ln[b-b3y6n5of9k]::before,
        .fcfm-leg .ln[b-b3y6n5of9k]::after {
            content: "";
            position: absolute;
            top: -3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .fcfm-leg .ln[b-b3y6n5of9k]::before {
            left: -2px;
            background: var(--d-surface);
            border: 1.5px solid #b6bcc8;
        }

        .fcfm-leg .ln[b-b3y6n5of9k]::after {
            right: -2px;
            background: var(--d-ink);
        }

/* Cuống vé tối: mã đặt chỗ */
.fcfm-ticket-stub[b-b3y6n5of9k] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 22px;
    background: var(--d-ink);
    color: #fff;
    border-left: 2px dashed #3a4457;
}

.fcfm-code[b-b3y6n5of9k] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .fcfm-code .k[b-b3y6n5of9k] {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #a9afbd;
    }

    .fcfm-code .v[b-b3y6n5of9k] {
        font-family: var(--fcfm-num);
        font-size: 17px;
        font-weight: 600;
        letter-spacing: .04em;
    }

        .fcfm-code .v.is-pnr[b-b3y6n5of9k] {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 30px;
            font-weight: 700;
            letter-spacing: .14em;
        }

        .fcfm-code .v.is-wait[b-b3y6n5of9k] {
            font-family: inherit;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0;
            color: #d6dae2;
        }

        .fcfm-code .v.is-amt[b-b3y6n5of9k] {
            color: #ffb37a;
        }

.fcfm-copy[b-b3y6n5of9k] {
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: #2a3448;
    color: #fff;
    font-family: var(--nm-font, inherit);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
}

    .fcfm-copy:hover[b-b3y6n5of9k] {
        background: #3a4457;
    }

/* ── Việc tiếp theo ── */
.fcfm-acts[b-b3y6n5of9k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fcfm-act[b-b3y6n5of9k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--d-line);
    border-radius: 14px;
    background: var(--d-surface);
    color: var(--d-ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s;
}

    .fcfm-act:hover[b-b3y6n5of9k] {
        border-color: var(--d-accent);
        text-decoration: none;
        color: var(--d-ink);
    }

    .fcfm-act:focus-visible[b-b3y6n5of9k] {
        outline: 2px solid var(--d-accent);
        outline-offset: 2px;
    }

    .fcfm-act svg[b-b3y6n5of9k] {
        width: 22px;
        height: 22px;
        color: var(--d-accent);
        margin-bottom: 4px;
    }

    .fcfm-act b[b-b3y6n5of9k] {
        font-size: 14px;
    }

    .fcfm-act small[b-b3y6n5of9k] {
        font-size: 12px;
        color: var(--d-ink-3);
    }

/* ── Hành khách + lưu ý ── */
.fcfm-grid[b-b3y6n5of9k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.fcfm-card[b-b3y6n5of9k] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
    padding: 14px 18px;
}

    .fcfm-card h3[b-b3y6n5of9k] {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 700;
    }

.fcfm-pax[b-b3y6n5of9k] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--d-line-2);
    font-size: 13.5px;
}

    .fcfm-pax:first-of-type[b-b3y6n5of9k] {
        border-top: 0;
    }

    .fcfm-pax span[b-b3y6n5of9k] {
        color: var(--d-ink-3);
        font-size: 12.5px;
    }

.fcfm-todo[b-b3y6n5of9k] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .fcfm-todo li[b-b3y6n5of9k] {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 8px 0;
        border-top: 1px solid var(--d-line-2);
        font-size: 13px;
        color: var(--d-ink-2);
    }

        .fcfm-todo li:first-child[b-b3y6n5of9k] {
            border-top: 0;
        }

        .fcfm-todo li span[b-b3y6n5of9k] {
            flex: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--d-accent-soft);
            color: #c24e00;
            font-family: var(--fcfm-num);
            font-weight: 700;
            font-size: 12px;
        }

@media (max-width: 767px) {
    .fcfm-ticket[b-b3y6n5of9k] {
        grid-template-columns: 1fr;
    }

    .fcfm-ticket-stub[b-b3y6n5of9k] {
        border-left: 0;
        border-top: 2px dashed #3a4457;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 24px;
        padding: 16px 18px;
    }

    .fcfm-ticket-main[b-b3y6n5of9k] {
        padding: 18px;
    }

    .fcfm-h[b-b3y6n5of9k] {
        font-size: 19px;
    }

    .fcfm-leg .t[b-b3y6n5of9k] {
        font-size: 20px;
    }

    .fcfm-acts[b-b3y6n5of9k] {
        grid-template-columns: 1fr;
    }

    .fcfm-act[b-b3y6n5of9k] {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 10px;
    }

        .fcfm-act svg[b-b3y6n5of9k] {
            margin: 0;
        }

        .fcfm-act small[b-b3y6n5of9k] {
            width: 100%;
            padding-left: 32px;
        }
}

@media print {
    .fcfm-acts[b-b3y6n5of9k] {
        display: none;
    }

    .fcfm-ticket-stub[b-b3y6n5of9k] {
        background: #fff;
        color: #000;
        border-left-color: #999;
    }

    .fcfm-code .k[b-b3y6n5of9k] {
        color: #555;
    }

    .fcfm-copy[b-b3y6n5of9k] {
        display: none;
    }
}
/* _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: 14px;
    --ffp-num: 'Chakra Petch', var(--nm-font, inherit), system-ui, sans-serif;
}

.ffp-section[b-g0jpijldeb] { display: flex; flex-direction: column; }

.ffp-h[b-g0jpijldeb] {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .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 — một dòng: ô tick · logo · tên · giá thấp nhất */
.ffp-airline-list[b-g0jpijldeb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ffp-airline-row[b-g0jpijldeb] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 7px;
    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: 15px; height: 15px;
    border: 1.5px solid #c9ced8;
    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: 14px; width: 26px; object-fit: contain; flex-shrink: 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;
}

.ffp-airline-meta[b-g0jpijldeb] {
    flex-shrink: 0;
    font-family: var(--ffp-num);
    font-size: 11px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Time grid — 4 khung giờ: số giờ to (Chakra), tên khung nhỏ, đếm chuyến mờ */
.ffp-time-grid[b-g0jpijldeb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.ffp-time[b-g0jpijldeb] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 6px 2px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    color: var(--d-ink-2);
    cursor: pointer;
    min-width: 0;
    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.is-active[b-g0jpijldeb] {
        background: var(--d-accent-soft);
        border-color: var(--d-accent);
    }

.ffp-time-rg[b-g0jpijldeb] {
    font-family: var(--ffp-num);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--d-ink);
    white-space: nowrap;
}

.ffp-time-lbl[b-g0jpijldeb] {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d-ink-3);
}

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

.ffp-time.is-active .ffp-time-rg[b-g0jpijldeb],
.ffp-time.is-active .ffp-time-lbl[b-g0jpijldeb],
.ffp-time.is-active .ffp-time-cnt[b-g0jpijldeb] {
    color: #c24e00;
}

/* 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: 5px 10px;
    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ẻ (NM + VTG). 07/11/2026: thanh hành trình dính thay thẻ tiêu đề. */

.ffs-root[b-je2iwgs5n0] {
    --d-bg: #f4f5f8;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #e7e9ee;
    --d-line-2: #f0f1f4;
    --d-ink: #1b2232;
    --d-ink-2: #3d4250;
    --d-ink-3: #6b7180;
    --d-ink-4: #a1a6b3;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff4ec;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-good: #14804a;
    --d-r: 14px;
    --ffs-num: 'Chakra Petch', var(--nm-font, inherit), system-ui, sans-serif;
    /* Chiều cao thanh hành trình — cột lọc / cột tóm tắt dính ngay dưới nó. */
    --ffs-bar-h: 56px;
    --ffs-top: var(--ffs-sticky-top, var(--nm-header-offset, 0px));

    color: var(--d-ink);
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    padding: var(--ffs-hdr, 1.25rem) 1rem var(--ffs-pb, 1rem);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.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;
    }
}

/* ── Thanh hành trình (dính) ─────────────────────────────────────────── */
/* Thanh CAM thương hiệu: điểm neo của cả luồng — tuyến trong khối trắng, viên thông tin trắng mờ, bước đang đứng
   = vòng trắng số cam. Cam ở đây là "đang ở bước nào của việc đặt vé", cùng nghĩa với ô ngày / ô sắp xếp đang chọn. */
.ffs-bar[b-je2iwgs5n0] {
    position: sticky;
    top: calc(var(--ffs-top) + 8px);
    z-index: 30;
    background: linear-gradient(100deg, #ff7d1f 0%, #ff6b00 60%, #f25f00 100%);
    border: 0;
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -16px rgba(255, 107, 0, .65);
    color: #fff;
    transition: top .2s ease;
}

.ffs-bar-in[b-je2iwgs5n0] {
    display: flex;
    align-items: center;
    gap: 10px 18px;
    min-height: 52px;
    padding: 6px 14px;
}

.ffs-sr[b-je2iwgs5n0] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Khối tuyến nền tối: điểm neo đậm nhất của thanh, mắt bắt ngay tuyến đang xem. */
.ffs-route[b-je2iwgs5n0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 5px 12px;
    border-radius: 10px;
    background: #fff;
    color: var(--d-ink);
}

.ffs-pt[b-je2iwgs5n0] {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

    .ffs-pt .iata[b-je2iwgs5n0] {
        font-family: var(--ffs-num);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--d-ink);
    }

    .ffs-pt .city[b-je2iwgs5n0] {
        font-size: 11px;
        color: var(--d-ink-3);
        white-space: nowrap;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ffs-arrow[b-je2iwgs5n0] {
    color: var(--d-accent);
    flex: none;
}

.ffs-title[b-je2iwgs5n0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .ffs-title h1[b-je2iwgs5n0] {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: #fff;
        line-height: 1.2;
    }

    .ffs-title span[b-je2iwgs5n0] {
        font-size: 12.5px;
        color: rgba(255, 255, 255, .82);
    }

.ffs-chips[b-je2iwgs5n0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ffs-chip[b-je2iwgs5n0] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

/* Nút do trang truyền vào (Đổi tìm kiếm / Đổi chuyến) */
.ffs-chips[b-je2iwgs5n0]  .ffs-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid #fff;
    border-radius: 9px;
    background: #fff;
    color: #c24e00;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .ffs-chips[b-je2iwgs5n0]  .ffs-btn:hover {
        background: #fff4ec;
        color: #c24e00;
        text-decoration: none;
    }

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

    .ffs-chips[b-je2iwgs5n0]  .ffs-btn:focus-visible {
        outline: 2px solid var(--d-accent);
        outline-offset: 2px;
    }

/* ── 4 bước ── */
.ffs-steps[b-je2iwgs5n0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    flex: none;
}

.ffs-step[b-je2iwgs5n0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}

    .ffs-step + .ffs-step[b-je2iwgs5n0]::before {
        content: "";
        width: 18px;
        height: 1.5px;
        background: rgba(255, 255, 255, .4);
        margin-right: 0;
    }

    .ffs-step .n[b-je2iwgs5n0] {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, .6);
        background: transparent;
        display: grid;
        place-items: center;
        font-size: 11.5px;
        font-weight: 700;
        color: #fff;
    }

    .ffs-step.is-on[b-je2iwgs5n0] {
        color: #fff;
        font-weight: 700;
    }

        .ffs-step.is-on .n[b-je2iwgs5n0] {
            background: #fff;
            border-color: #fff;
            color: #c24e00;
        }

    .ffs-step.is-done .n[b-je2iwgs5n0] {
        background: rgba(255, 255, 255, .25);
        border-color: transparent;
        color: #fff;
    }

    .ffs-step.is-done + .ffs-step[b-je2iwgs5n0]::before {
        background: #fff;
    }

.ffs-stepof[b-je2iwgs5n0] {
    display: none;
    margin-left: auto;
    font-size: 12px;
    color: rgba(255, 255, 255, .9);
    white-space: nowrap;
}

.ffs-prog[b-je2iwgs5n0] {
    display: none;
    height: 3px;
    background: rgba(0, 0, 0, .18);
    border-radius: 0 0 var(--d-r) var(--d-r);
    overflow: hidden;
}

    .ffs-prog i[b-je2iwgs5n0] {
        display: block;
        height: 100%;
        background: #fff;
    }

/* Màn vừa: nhãn bước chỉ hiện ở bước đang đứng */
@media (max-width: 1199px) {
    .ffs-step:not(.is-on) .lb[b-je2iwgs5n0] {
        display: none;
    }
}

/* Máy tính bảng / điện thoại: bỏ thanh bước, thay bằng "Bước 2/4" + vạch tiến độ mảnh */
@media (max-width: 899px) {
    .ffs-root[b-je2iwgs5n0] {
        --ffs-bar-h: 58px;
    }

    .ffs-steps[b-je2iwgs5n0] {
        display: none;
    }

    .ffs-stepof[b-je2iwgs5n0] {
        display: inline;
    }

    .ffs-prog[b-je2iwgs5n0] {
        display: block;
    }

    .ffs-bar-in[b-je2iwgs5n0] {
        flex-wrap: wrap;
        min-height: 54px;
        padding: 8px 12px;
        gap: 6px 12px;
    }

    /* Dải vuốt ngang: mờ dần mép phải để chip cuối không trông như bị cắt cụt */
    .ffs-chips[b-je2iwgs5n0] {
        order: 3;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-right: 28px;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    }

        .ffs-chips[b-je2iwgs5n0]::-webkit-scrollbar {
            display: none;
        }

    /* Nút hành động của trang đứng ĐẦU dải viên — cuối dải thì bị khuất khi dải phải vuốt ngang. */
    .ffs-chips[b-je2iwgs5n0]  .ffs-btn {
        order: -1;
        flex: none;
    }

    .ffs-chip[b-je2iwgs5n0] {
        flex: none;
    }
}

@media (max-width: 639px) {
    .ffs-root[b-je2iwgs5n0] {
        gap: 10px;
    }

    .ffs-bar[b-je2iwgs5n0] {
        top: var(--ffs-top);
        border-radius: 12px;
    }

    .ffs-pt .iata[b-je2iwgs5n0] {
        font-size: 17px;
    }

    .ffs-pt .city[b-je2iwgs5n0] {
        display: none;
    }

    .ffs-route[b-je2iwgs5n0] {
        padding: 4px 10px;
    }

    .ffs-chip[b-je2iwgs5n0] {
        height: 28px;
        font-size: 12px;
        padding: 0 10px;
    }

    .ffs-chips[b-je2iwgs5n0]  .ffs-btn {
        height: 28px;
        font-size: 12px;
    }

    .ffs-title h1[b-je2iwgs5n0] {
        font-size: 16px;
    }
}

/* ── Vùng nội dung ─────────────────────────────────────────────────────── */
.ffs-card[b-je2iwgs5n0] {
    background: transparent;
    padding: 0;
    /* Nền trang — khuyết tròn của cuống vé (FlightSearchResults) khoét theo màu này. */
    --fsr-page-bg: #eceff3; /* = nền body của luồng đặt vé (app.css từng site: body:has(.ffs-root)) */
}

/* 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). */
.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: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

    .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: 40px;
        padding: 0 18px;
        border-radius: 10px;
        border: 0;
        background: var(--d-accent);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        text-decoration: none;
    }

        .ffs-card[b-je2iwgs5n0]  .ffs-notice .ffs-btn:hover {
            background: #e85f00;
            color: #fff;
            text-decoration: none;
        }

/* Nút "Quay lại" đầu form hành khách (điện thoại) thừa khi thanh hành trình đã có "Đổi chuyến bay". */
.ffs-card[b-je2iwgs5n0]  .fpf-back-top {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ffs-bar[b-je2iwgs5n0] {
        transition: 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', var(--nm-font, 'Inter'), ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
    --fpf-num: 'Chakra Petch', var(--nm-font, 'Inter'), system-ui, sans-serif;
}

/* ---------- 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; }

/* ---------- 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; }

.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);
    }

.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;
}

/* ══════════════════════════════════════════════════════════════════════════
   /flight/passengers v3 — 08/11/2026, theo mock passengers-v3 đã duyệt:
   · cột trái = MỘT thẻ form, các khối (liên hệ · từng khách) cùng nhịp, ngăn bằng vạch mảnh
   · cột phải = thẻ vé: thanh hãng · giờ bay · ô thông tin CÙNG KHUÔN (hạng, máy bay, xách tay, ký gửi, đổi, hoàn) · vạch đứt · giá · tổng · nút
   · mỗi màu một nghĩa, ít màu hơn: CAM = thanh hành trình · tổng tiền · nút · vạch xé vé (không dùng cho chip/huy hiệu);
     NAVY = chữ chính · số thứ tự khách · chấm đến; XÁM NHẠT = mọi ô thông tin/ô dữ liệu — một màu duy nhất;
     XANH LÁ = "Có" · đã gồm · liên hệ hợp lệ; ĐỎ = "Không" · ô nhập sai; VÀNG ĐẤT = dấu "!" dòng nhắc.
   ══════════════════════════════════════════════════════════════════════════ */
.fpf-root[b-vawoe9hdv4] {
    --d-ink: #1b2232;
    --d-ink-2: #3d4250;
    --d-ink-3: #6b7180;
    --d-line: #e3e7ee;
    --d-line-2: #f0f1f4;
    --d-line-input: #d6dae2;
    --d-surface-2: #f4f5f8;
    --d-r: 16px;
    --fpf-ok: #14804a;
    --fpf-ok-soft: #e8f6ee;
    --fpf-warn: #a15c07;
    --fpf-warn-soft: #fff6e5;
    --fpf-bad: #b42318;
    --fpf-accent-dark: #c24e00;
}

.fpf-main-row[b-vawoe9hdv4] {
    gap: 16px;
    margin-top: 14px;
}

/* ── Thẻ form: một thẻ, nhiều khối cùng nhịp ── */
.fpf-form[b-vawoe9hdv4] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(27, 34, 50, .04), 0 10px 28px -20px rgba(27, 34, 50, .18);
}

.fpf-sec[b-vawoe9hdv4] {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--d-line);
}

    .fpf-sec:first-child[b-vawoe9hdv4] {
        border-top: 0;
    }

.fpf-sec-hd[b-vawoe9hdv4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 14px;
}

    .fpf-sec-hd h3[b-vawoe9hdv4] {
        margin: 0;
        font-size: 14.5px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: var(--d-ink);
    }

/* số thứ tự: vòng navy; liên hệ hợp lệ → dấu ✓ xanh */
.fpf-sec-n[b-vawoe9hdv4] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--d-ink);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-family: var(--fpf-num);
    font-size: 12px;
    font-weight: 700;
}

    .fpf-sec-n.is-ok[b-vawoe9hdv4] {
        background: var(--fpf-ok);
    }

.fpf-sec-meta[b-vawoe9hdv4] {
    font-size: 12px;
    color: var(--d-ink-3);
}

    .fpf-sec-meta.is-warn[b-vawoe9hdv4] {
        color: var(--fpf-warn);
        font-weight: 600;
    }

.fpf-paxsec[b-vawoe9hdv4] {
    scroll-margin-top: calc(var(--ffs-top, 0px) + var(--ffs-bar-h, 0px) + 24px);
}

/* chip tiến độ khách: cuối hàng tiêu đề khối khách đầu; xong = xanh */
.fpf-paxnav[b-vawoe9hdv4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.fpf-paxnav-chip[b-vawoe9hdv4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .fpf-paxnav-chip:hover[b-vawoe9hdv4] {
        border-color: var(--d-accent);
        color: var(--fpf-accent-dark);
    }

    .fpf-paxnav-chip.is-done[b-vawoe9hdv4] {
        background: var(--fpf-ok-soft);
        border-color: #bfe3cd;
        color: var(--fpf-ok);
    }

.fpf-hd-link[b-vawoe9hdv4] {
    margin-left: auto;
}

/* dòng nhắc nhập tên: một dòng chữ mờ + chấm "!" vàng đất (không còn hộp kem to) */
.fpf-tip[b-vawoe9hdv4] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 12px;
    font-size: 12.5px;
    color: var(--d-ink-2);
}

    .fpf-tip i[b-vawoe9hdv4] {
        flex: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--fpf-warn-soft);
        color: var(--fpf-warn);
        display: inline-grid;
        place-items: center;
        font-style: normal;
        font-size: 11px;
        font-weight: 800;
    }

/* dấu bắt buộc: nhỏ, không in đậm — có mặt là đủ */
.fpf-req[b-vawoe9hdv4] {
    font-size: 11px;
    font-weight: 600;
    color: #d92d20;
}

/* ô nhập: 40px bo 10, nhãn navy nhạt */
.fpf-label[b-vawoe9hdv4] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-2);
    margin-bottom: 4px;
}

.fpf-input[b-vawoe9hdv4] {
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border-color: var(--d-line-input);
    font-size: 13.5px;
}

.fpf-input--sm[b-vawoe9hdv4] {
    height: 32px;
}

.fpf-input--joined[b-vawoe9hdv4] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.fpf-addon-select[b-vawoe9hdv4] {
    height: 40px;
    border-radius: 10px 0 0 10px;
    padding: 0 8px;
    background: var(--d-surface-2);
}

.fpf-root[b-vawoe9hdv4]  .dmi-root .dmi-input {
    height: 40px;
    border-radius: 10px;
}

.fpf-fieldgrid[b-vawoe9hdv4] {
    gap: 10px;
}

/* hành lý ký gửi: một dòng mỗi chiều — icon tròn · nhãn · viên chọn bên phải */
.fpf-baglines[b-vawoe9hdv4] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--d-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fpf-baglines-lb[b-vawoe9hdv4] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--d-ink-2);
}

.fpf-bagline[b-vawoe9hdv4] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .fpf-bagline .ico[b-vawoe9hdv4] {
        flex: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--d-surface-2);
        color: var(--d-ink-2);
        display: inline-grid;
        place-items: center;
    }

.fpf-bagline-lb[b-vawoe9hdv4] {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fpf-bagsel[b-vawoe9hdv4] {
    flex: none;
    max-width: 60%;
    height: 32px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--d-line-input);
    border-radius: 999px;
    background: var(--d-surface) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4250' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 11px no-repeat;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

    /* trạng thái: đã gồm = xanh · không có = mờ · mua thêm = navy đậm */
    .fpf-bagsel.is-free[b-vawoe9hdv4] {
        color: var(--fpf-ok);
        border-color: #bfe3cd;
        background-color: var(--fpf-ok-soft);
    }

    .fpf-bagsel.is-none[b-vawoe9hdv4] {
        color: var(--d-ink-3);
    }

    .fpf-bagsel.is-paid[b-vawoe9hdv4] {
        color: var(--d-ink);
        border-color: #b6bcc8;
    }

/* ── Cột phải dính dưới thanh hành trình (khách lẻ) / dưới header (cổng khác) ── */
@media (min-width: 1024px) {
    .fpf-side-sticky[b-vawoe9hdv4] {
        position: sticky;
        top: calc(var(--ffs-top, 0px) + var(--ffs-bar-h, 0px) + 20px);
        max-height: calc(100vh - var(--ffs-top, 0px) - var(--ffs-bar-h, 0px) - 32px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* ── Thẻ vé ── */
.fpf-ticket[b-vawoe9hdv4] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(27, 34, 50, .04), 0 10px 28px -20px rgba(27, 34, 50, .18);
    overflow: hidden;
}

/* thanh hãng · số hiệu (bấm gập chi tiết) */
.fpf-tk-air[b-vawoe9hdv4] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    background: #fff4ec;
    color: var(--d-ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

    .fpf-tk-air:hover[b-vawoe9hdv4] {
        background: #ffecdc;
    }

.fpf-tk-logo[b-vawoe9hdv4] {
    flex: none;
    width: 34px;
    height: 28px;
    padding: 3px;
    border-radius: 7px;
    background: var(--d-surface);
    object-fit: contain;
}

.fpf-tk-air-tx[b-vawoe9hdv4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .fpf-tk-air-tx b[b-vawoe9hdv4] {
        font-size: 13px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fpf-tk-air-tx small[b-vawoe9hdv4] {
        font-size: 11.5px;
        color: var(--d-ink-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .fpf-tk-air-tx small.is-times[b-vawoe9hdv4] {
            font-family: var(--fpf-num);
            font-weight: 600;
            color: var(--d-ink);
        }

.fpf-tk-no[b-vawoe9hdv4] {
    flex: none;
    font-family: var(--fpf-num);
    font-size: 12px;
    font-weight: 600;
    background: var(--d-surface);
    border-radius: 999px;
    padding: 3px 9px;
}

.fpf-tk-air .fpf-chev[b-vawoe9hdv4] {
    flex: none;
    color: var(--d-ink-3);
}

/* giờ đi – đến: Chakra 24px, chấm rỗng (đi) / đặc navy (đến), máy bay cam giữa vạch đứt */
.fpf-tk-route[b-vawoe9hdv4] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px 14px 12px;
}

.fpf-tk-pt[b-vawoe9hdv4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .fpf-tk-pt.is-arr[b-vawoe9hdv4] {
        align-items: flex-end;
        text-align: right;
    }

.fpf-tk-time[b-vawoe9hdv4] {
    font-family: var(--fpf-num);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--d-ink);
}

    .fpf-tk-time sup[b-vawoe9hdv4] {
        font-size: 10px;
        color: var(--fpf-accent-dark);
        margin-left: 1px;
    }

.fpf-tk-iata[b-vawoe9hdv4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-family: var(--fpf-num);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--d-ink);
}

    .fpf-tk-iata[b-vawoe9hdv4]::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        box-sizing: border-box;
        background: var(--d-surface);
        border: 1.5px solid #8a92a3;
    }

.fpf-tk-pt.is-arr .fpf-tk-iata[b-vawoe9hdv4]::before {
    background: var(--d-ink);
    border-color: var(--d-ink);
}

.fpf-tk-city[b-vawoe9hdv4] {
    font-size: 11px;
    color: var(--d-ink-3);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fpf-tk-path[b-vawoe9hdv4] {
    min-width: 0;
    text-align: center;
    font-size: 11px;
    color: var(--d-ink-3);
}

.fpf-tk-line[b-vawoe9hdv4] {
    display: block;
    position: relative;
    height: 1.5px;
    margin: 5px 0;
    background: repeating-linear-gradient(90deg, #c9ced8 0 4px, transparent 4px 8px);
}

    .fpf-tk-line[b-vawoe9hdv4]::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 18px;
        transform: translate(-50%, -50%);
        background: var(--d-surface) url("data:image/svg+xml;utf8,%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' transform='rotate(90 12 12)'/%3E%3C/svg%3E") center / 13px no-repeat;
    }

.fpf-tk-stops[b-vawoe9hdv4] {
    font-style: normal;
    font-weight: 700;
    color: var(--d-ink-2);
}

    .fpf-tk-stops.is-direct[b-vawoe9hdv4] {
        color: var(--fpf-ok);
    }

/* nhiều chặng: từng chặng một dòng gọn, quá cảnh vàng đất */
.fpf-tk-sublegs[b-vawoe9hdv4] {
    margin: 0 14px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--d-surface-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
    color: var(--d-ink-2);
}

.fpf-tk-subleg[b-vawoe9hdv4] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

    .fpf-tk-subleg b[b-vawoe9hdv4] {
        font-family: var(--fpf-num);
        font-weight: 700;
        color: var(--d-ink);
    }

    .fpf-tk-subleg i[b-vawoe9hdv4] {
        font-style: normal;
        color: var(--d-ink-3);
    }

    .fpf-tk-subleg em[b-vawoe9hdv4] {
        margin-left: auto;
        font-style: normal;
        font-family: var(--fpf-num);
        font-size: 11px;
        color: var(--d-ink-3);
        white-space: nowrap;
    }

.fpf-tk-transit[b-vawoe9hdv4] {
    color: var(--fpf-warn);
    font-weight: 600;
}

/* ô thông tin cùng khuôn: 2 cột, nền xám nhạt, icon tròn trắng, giá trị đậm bên phải */
.fpf-tk-info[b-vawoe9hdv4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 6px;
    padding: 0 14px 12px;
}

    .fpf-tk-info .cap.is-wide[b-vawoe9hdv4] {
        grid-column: 1 / -1;
    }

/* FareCardConditions nằm trong lưới: bỏ hộp bọc để từng ô điều kiện thành ô lưới */
.fpf-tk-cond[b-vawoe9hdv4],
.fpf-tk-cond[b-vawoe9hdv4]  .fcc-list {
    display: contents;
}

    .fpf-tk-info .cap[b-vawoe9hdv4],
    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row-inline {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 6px 8px 6px 6px;
        border-radius: 10px;
        background: var(--d-surface-2);
        font-size: 12px;
        color: var(--d-ink-3);
    }

    .fpf-tk-info .ico[b-vawoe9hdv4],
    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row-inline::before {
        flex: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--d-surface);
        color: var(--d-ink-2);
        display: inline-grid;
        place-items: center;
    }

    .fpf-tk-info .k[b-vawoe9hdv4],
    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row-inline .fcc-lbl {
        flex: none;
        font-size: 11.5px;
        color: var(--d-ink-3);
        white-space: nowrap;
    }

    .fpf-tk-info .cap b[b-vawoe9hdv4] {
        margin-left: auto;
        min-width: 0;
        font-weight: 700;
        color: var(--d-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .fpf-tk-info .cap b.is-y[b-vawoe9hdv4] {
            color: var(--fpf-ok);
        }

        .fpf-tk-info .cap b.is-n[b-vawoe9hdv4] {
            color: var(--fpf-bad);
        }

/* điều kiện vé — tóm tắt: hai ô cùng khuôn nối tiếp lưới trên (ô đầu vừa nội dung, ô "Hoàn / Hủy vé" lấy phần còn lại);
   chi tiết: mỗi điều kiện một dòng nhãn · giá trị, nhóm trải hết hàng */
    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row-inline::before {
        content: "";
        background: var(--d-surface) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4'/%3E%3C/svg%3E") center / 12px no-repeat;
    }

    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row-inline.kind-refund::before {
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h10a5 5 0 010 10H9M3 10l4-4m-4 4l4 4'/%3E%3C/svg%3E");
    }

    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-badge {
        margin-left: auto;
        padding: 0;
        background: none;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
    }

        .fpf-tk-cond[b-vawoe9hdv4]  .fcc-badge.yes {
            color: var(--fpf-ok);
        }

        .fpf-tk-cond[b-vawoe9hdv4]  .fcc-badge.no {
            color: var(--fpf-bad);
        }

        .fpf-tk-cond[b-vawoe9hdv4]  .fcc-badge.unknown {
            color: var(--d-ink-2);
        }

    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-grp {
        grid-column: 1 / -1;
        margin: 4px 0 0;
        padding: 0;
        border: 0;
        font-size: 10px;
        color: var(--d-ink-3);
    }

    .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row:not(.fcc-row-inline) {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 5px 9px;
        border-radius: 10px;
        background: var(--d-surface-2);
    }

        .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row:not(.fcc-row-inline) .fcc-lbl {
            font-size: 11.5px;
            color: var(--d-ink-3);
        }

        .fpf-tk-cond[b-vawoe9hdv4]  .fcc-row:not(.fcc-row-inline) .fcc-val {
            font-size: 11.5px;
            text-align: right;
        }

/* vạch đứt xé vé — cam nhạt */
.fpf-tk-perf[b-vawoe9hdv4] {
    height: 0;
    margin: 0 14px;
    border-top: 1.5px dashed #f2b285;
}

/* bảng giá: dòng chữ thường, đơn giá /khách mờ, số Chakra; tổng cam */
.fpf-tk-price[b-vawoe9hdv4] {
    padding: 12px 14px 2px;
}

    .fpf-tk-price h4[b-vawoe9hdv4] {
        margin: 0 0 4px;
        font-size: 12.5px;
        font-weight: 800;
        color: var(--d-ink);
    }

    .fpf-tk-price .row[b-vawoe9hdv4] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 5px 0;
        font-size: 12.5px;
        color: var(--d-ink-2);
    }

        .fpf-tk-price .row > span[b-vawoe9hdv4] {
            min-width: 0;
        }

        .fpf-tk-price .row small[b-vawoe9hdv4] {
            margin-left: 6px;
            font-family: var(--fpf-num);
            font-size: 11px;
            color: var(--d-ink-3);
        }

        .fpf-tk-price .row b[b-vawoe9hdv4] {
            font-family: var(--fpf-num);
            font-weight: 600;
            color: var(--d-ink);
            white-space: nowrap;
        }

.fpf-tk-total[b-vawoe9hdv4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 14px 0;
    padding-top: 10px;
    border-top: 1px solid var(--d-line-2);
}

    .fpf-tk-total span[b-vawoe9hdv4] {
        font-size: 14px;
        font-weight: 800;
        color: var(--d-ink);
    }

    .fpf-tk-total b[b-vawoe9hdv4] {
        font-family: var(--fpf-num);
        font-size: 24px;
        font-weight: 700;
        color: var(--fpf-accent-dark);
        white-space: nowrap;
    }

.fpf-tk-incl[b-vawoe9hdv4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin: 2px 14px 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fpf-ok);
}

/* nút trong thẻ vé — chỉ desktop (điện thoại có thanh đáy); không dựa lg:hidden vì scoped css thắng utility */
.fpf-ticket-cta[b-vawoe9hdv4] {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 14px;
}

@media (min-width: 1024px) {
    .fpf-ticket-cta[b-vawoe9hdv4] {
        display: flex;
    }
}

.fpf-ticket-hint[b-vawoe9hdv4] {
    margin: -2px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--d-ink-3);
}

.fpf-tk-back[b-vawoe9hdv4] {
    border: 0;
    background: none;
    padding: 4px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    cursor: pointer;
}

    .fpf-tk-back:hover[b-vawoe9hdv4] {
        color: var(--fpf-accent-dark);
    }

.fpf-btn[b-vawoe9hdv4] {
    border-radius: 999px;
}

.fpf-btn-accent[b-vawoe9hdv4] {
    background: var(--d-accent);
    box-shadow: 0 6px 14px -8px rgba(255, 107, 0, .7);
    font-weight: 700;
}

    .fpf-btn-accent:hover[b-vawoe9hdv4] {
        background: #e85f00;
    }

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

.fpf-btn-hold[b-vawoe9hdv4] {
    border-radius: 999px;
}

/* 3 cam kết */
.fpf-trust[b-vawoe9hdv4] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .fpf-trust li[b-vawoe9hdv4] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--d-ink-2);
    }

        .fpf-trust li svg[b-vawoe9hdv4] {
            flex: none;
            margin-top: 2px;
            width: 16px;
            height: 16px;
            padding: 3px;
            border-radius: 50%;
            background: var(--fpf-ok-soft);
            color: var(--fpf-ok);
        }

/* ── Điện thoại / máy tính bảng: dòng tóm tắt chuyến trên form ── */
.fpf-msum[b-vawoe9hdv4] {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 14px;
}

@media (max-width: 1023px) {
    .fpf-msum[b-vawoe9hdv4] {
        display: flex;
    }
}

.fpf-msum-tx[b-vawoe9hdv4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fpf-msum-t[b-vawoe9hdv4] {
    font-family: var(--fpf-num);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--d-ink);
}

    .fpf-msum-t sup[b-vawoe9hdv4] {
        font-size: 9px;
        color: var(--fpf-accent-dark);
    }

.fpf-msum-k[b-vawoe9hdv4] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fpf-msum-v[b-vawoe9hdv4] {
    font-family: var(--fpf-num);
    font-size: 14px;
    font-weight: 700;
    color: var(--fpf-accent-dark);
    white-space: nowrap;
}

/* thanh đáy điện thoại */
.fpf-mobilebar-value[b-vawoe9hdv4] {
    font-family: var(--fpf-num);
    color: var(--fpf-accent-dark);
}

.fpf-mobilebar-cta[b-vawoe9hdv4] {
    border-radius: 999px;
}

@media (max-width: 639px) {
    .fpf-form[b-vawoe9hdv4],
    .fpf-ticket[b-vawoe9hdv4] {
        border-radius: 14px;
    }

    .fpf-sec[b-vawoe9hdv4] {
        padding: 14px 12px;
    }

    .fpf-contact .fpf-sec-meta[b-vawoe9hdv4] {
        display: none;
    }

    .fpf-paxnav[b-vawoe9hdv4] {
        flex-basis: 100%;
        margin-left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .fpf-paxnav[b-vawoe9hdv4]::-webkit-scrollbar {
            display: none;
        }

    .fpf-paxnav-chip[b-vawoe9hdv4] {
        flex: none;
    }

    .fpf-tk-route[b-vawoe9hdv4],
    .fpf-tk-info[b-vawoe9hdv4],
    .fpf-tk-price[b-vawoe9hdv4] {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* hành lý: nhãn một hàng, viên chọn xuống hàng dưới trọn bề rộng (cùng hàng thì cả hai bị cắt) */
    .fpf-bagline[b-vawoe9hdv4] {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .fpf-bagsel[b-vawoe9hdv4] {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 34px;
        height: 40px;
    }

    /* "Bé trai" + mũi tên ở 16px không vừa span 4 ⇒ 5 | 7 */
    .fpf-fieldgrid > .fpf-f-title[b-vawoe9hdv4] {
        grid-column: span 5;
    }

    .fpf-fieldgrid > .fpf-f-last[b-vawoe9hdv4] {
        grid-column: span 7;
    }

    .fpf-tk-sublegs[b-vawoe9hdv4],
    .fpf-tk-total[b-vawoe9hdv4],
    .fpf-tk-incl[b-vawoe9hdv4],
    .fpf-tk-perf[b-vawoe9hdv4] {
        margin-left: 12px;
        margin-right: 12px;
    }

    .fpf-tk-total b[b-vawoe9hdv4] {
        font-size: 21px;
    }
}
/* _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: var(--nm-font, 'Inter'), ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
    --fps-num: 'Chakra Petch', var(--nm-font, 'Inter'), system-ui, sans-serif;
}

/* 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;
}

/* ─── Trả tay (chuyển khoản / tiền mặt tại văn phòng) — OfflinePaymentDetails tự lo phần trong ─── */
.fps-offline-body[b-jcrxnj0uq2] {
    padding: 14px 16px 16px;
}

.fps-offline-recorded[b-jcrxnj0uq2] {
    border-color: color-mix(in srgb, var(--d-good) 35%, var(--d-line));
}

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

    .fps-offline-recorded .fps-offline-body[b-jcrxnj0uq2] {
        padding: 0 24px 24px;
    }

@media (max-width: 560px) {
    .fps-offline-recorded .fps-offline-body[b-jcrxnj0uq2] { padding: 0 16px 16px; }
}


/* Gợi ý dưới nút trả: bấm thì xuất vé ngay hay chỉ tạo đơn. */
.fps-pay-hint[b-jcrxnj0uq2] {
    margin: 10px 2px 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

    .fps-pay-hint.is-now[b-jcrxnj0uq2] { color: #047857; }
    .fps-pay-hint.is-later[b-jcrxnj0uq2] { color: #9a3f00; }


/* ══════════════════════════════════════════════════════════════════════════
   07/11/2026 — cùng nhịp trang kết quả / hành khách: thẻ phẳng viền mảnh, dải giữ chỗ có
   đồng hồ đếm ngược, tổng tiền số Chakra, nút thanh toán ghi luôn số tiền, cột phải dính
   ngay dưới thanh hành trình của FlightFlowShell.
   ══════════════════════════════════════════════════════════════════════════ */
.fps-root[b-jcrxnj0uq2] {
    --d-line: #e7e9ee;
    --d-line-2: #f0f1f4;
    --d-ink: #14161c;
    --d-ink-3: #6b7180;
    --d-accent-soft: #fff4ec;
    --d-r: 14px;
}

.fps-card[b-jcrxnj0uq2],
.fps-total-card[b-jcrxnj0uq2] {
    box-shadow: none;
}

.fps-total-card[b-jcrxnj0uq2] {
    top: calc(var(--ffs-top, 0px) + var(--ffs-bar-h, 0px) + 20px);
}

/* Dải giữ chỗ */
.fps-hold[b-jcrxnj0uq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    padding: 12px 16px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

    .fps-hold:empty[b-jcrxnj0uq2] {
        display: none;
    }

.fps-hold-code[b-jcrxnj0uq2],
.fps-hold-clock[b-jcrxnj0uq2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .fps-hold-code .k[b-jcrxnj0uq2],
    .fps-hold-clock .k[b-jcrxnj0uq2] {
        font-size: 12px;
        color: var(--d-ink-3);
    }

    .fps-hold-code .v[b-jcrxnj0uq2] {
        font-family: var(--fps-num);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--d-ink);
    }

.fps-hold-clock[b-jcrxnj0uq2] {
    padding-left: 22px;
    border-left: 1px solid var(--d-line);
}

    .fps-hold-clock .v[b-jcrxnj0uq2] {
        font-family: var(--fps-num);
        font-size: 26px;
        font-weight: 700;
        letter-spacing: .06em;
        color: #c24e00;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }

.fps-hold.is-low .fps-hold-clock .v[b-jcrxnj0uq2] {
    color: #c0362c;
}

.fps-hold.is-over .fps-hold-clock .v[b-jcrxnj0uq2] {
    color: var(--d-ink-4);
}

.fps-hold-note[b-jcrxnj0uq2] {
    margin: 0 0 0 auto;
    max-width: 320px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

/* Tổng */
.fps-total-hd h3[b-jcrxnj0uq2] {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    text-transform: none;
    letter-spacing: 0;
}

.fps-grand[b-jcrxnj0uq2] {
    border-top: 1.5px dashed var(--d-line);
    padding-top: 12px;
}

    .fps-grand .k[b-jcrxnj0uq2] {
        font-size: 14px;
        font-weight: 700;
        color: var(--d-ink);
        text-transform: none;
        letter-spacing: 0;
    }

    .fps-grand .v[b-jcrxnj0uq2] {
        font-family: var(--fps-num);
        font-size: 24px;
        color: #c24e00;
    }

.fps-grand-note[b-jcrxnj0uq2] {
    margin: 2px 0 0;
    text-align: right;
    font-size: 11.5px;
    color: #14804a;
}

.fps-leg-line .v[b-jcrxnj0uq2],
.fps-leg-subtot .v[b-jcrxnj0uq2] {
    font-family: var(--fps-num);
}

.fps-pay-btn[b-jcrxnj0uq2] {
    height: 52px;
    background: var(--d-accent);
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
}

    .fps-pay-btn:hover:not(:disabled)[b-jcrxnj0uq2] {
        background: #e85f00;
        box-shadow: none;
    }

.fps-pay-amt[b-jcrxnj0uq2] {
    font-family: var(--fps-num);
    font-weight: 700;
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, .45);
}

@media (min-width: 1024px) {
    .fps-grid[b-jcrxnj0uq2] {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (max-width: 639px) {
    .fps-hold-clock[b-jcrxnj0uq2] {
        padding-left: 0;
        border-left: 0;
    }

    .fps-hold-note[b-jcrxnj0uq2] {
        margin: 0;
        max-width: none;
    }
}
/* _content/NGOCMAI.B2E.FE.UI/src/Features/_Shared/Flight/FlightSearchResults.razor.rz.scp.css */
/* FlightSearchResults — kết quả tìm vé dùng chung 5 cổng (NM, VTG, CA, Manager, Avery). */
.fsr-root[b-4y4r91k4y6] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #e7e9ee;
    --d-line-2: #f0f1f4;
    --d-ink: #1b2232;
    --d-ink-2: #3d4250;
    --d-ink-3: #6b7180;
    --d-ink-4: #a1a6b3;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff4ec;
    --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: #14804a;
    --d-warn: #b45309;
    --d-danger: #dc2626;
    --d-r: 14px;
    /* Số (giờ bay, giá): Chakra Petch khi site có nạp (NM), không thì theo phông site. */
    --fsr-num: 'Chakra Petch', var(--nm-font, inherit), system-ui, sans-serif;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.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);
    }

/* ─── 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;
    }

/* ─── 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;
}

/* ─── 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;
    }

/* 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);
    }

/* ─── Chi tiết hành trình (07/11/2026): tóm tắt + mỗi chặng một hàng cùng khuôn ─── */
.fsr-it[b-4y4r91k4y6] {
    margin-top: 8px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 10px;
    overflow: hidden;
}

.fsr-it-sum[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 12px;
    background: var(--d-surface-2);
    font-size: 11.5px;
    color: var(--d-ink-2);
}

    .fsr-it-sum .tot b[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 13px;
        color: var(--d-ink);
    }

    .fsr-it-sum .is-ok[b-4y4r91k4y6] {
        color: var(--d-good);
        font-weight: 700;
    }

    .fsr-it-sum .is-warn[b-4y4r91k4y6] {
        color: var(--d-warn);
        font-weight: 700;
    }

.fsr-it-leg[b-4y4r91k4y6] {
    display: grid;
    grid-template-columns: 176px minmax(220px, max-content) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid var(--d-line-2);
}

    .fsr-it-leg .car[b-4y4r91k4y6] {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

        .fsr-it-leg .car img[b-4y4r91k4y6] {
            width: 30px;
            height: 30px;
            object-fit: contain;
            border-radius: 8px;
            background: var(--d-surface-2);
            padding: 2px;
            flex: none;
        }

        .fsr-it-leg .car .tx[b-4y4r91k4y6] {
            display: flex;
            flex-direction: column;
            min-width: 0;
            line-height: 1.25;
            font-size: 11.5px;
            color: var(--d-ink-3);
        }

            .fsr-it-leg .car .tx b[b-4y4r91k4y6] {
                font-size: 12.5px;
                color: var(--d-ink);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .fsr-it-leg .car .tx span[b-4y4r91k4y6] {
                font-family: var(--fsr-num);
                white-space: nowrap;
            }

            .fsr-it-leg .car .tx em[b-4y4r91k4y6] {
                font-style: normal;
                font-size: 10.5px;
                color: var(--d-ink-4);
            }

    /* mốc đi → thời gian bay → mốc đến: xếp dọc, chấm + vạch nối */
    .fsr-it-leg .tl[b-4y4r91k4y6] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .fsr-it-leg .pt[b-4y4r91k4y6] {
        display: grid;
        grid-template-columns: 50px 12px minmax(0, 1fr);
        grid-template-areas: "t dot ap" "t dot mt";
        column-gap: 8px;
        align-items: baseline;
    }

        .fsr-it-leg .pt .t[b-4y4r91k4y6] {
            grid-area: t;
            font-family: var(--fsr-num);
            font-size: 16px;
            font-weight: 700;
            color: var(--d-ink);
            line-height: 1.2;
        }

        .fsr-it-leg .pt .dot[b-4y4r91k4y6] {
            grid-area: dot;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--d-surface);
            border: 2px solid #b6bcc8;
            align-self: center;
        }

        .fsr-it-leg .pt.end .dot[b-4y4r91k4y6] {
            background: var(--d-ink);
            border-color: var(--d-ink);
        }

        .fsr-it-leg .pt .ap[b-4y4r91k4y6] {
            grid-area: ap;
            font-size: 12.5px;
            color: var(--d-ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .fsr-it-leg .pt .ap b[b-4y4r91k4y6] {
                font-family: var(--fsr-num);
                font-weight: 700;
                margin-right: 4px;
                font-size: 13px;
                letter-spacing: .04em;
                color: var(--d-ink);
            }

        .fsr-it-leg .pt .mt[b-4y4r91k4y6] {
            grid-area: mt;
            font-size: 11px;
            color: var(--d-ink-3);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .fsr-it-leg .dur[b-4y4r91k4y6] {
        display: grid;
        grid-template-columns: 50px 12px minmax(0, 1fr);
        column-gap: 8px;
        align-items: center;
        min-height: 18px;
        font-size: 11px;
        color: var(--d-ink-3);
    }

        .fsr-it-leg .dur .ln[b-4y4r91k4y6] {
            grid-column: 2;
            justify-self: center;
            width: 0;
            height: 18px;
            border-left: 2px dashed #c9ced8;
        }

        .fsr-it-leg .dur span[b-4y4r91k4y6] {
            grid-column: 3;
        }

    .fsr-it-leg .facts[b-4y4r91k4y6] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-left: 16px;
        border-left: 1px dashed var(--d-line);
        font-size: 11.5px;
        color: var(--d-ink-2);
    }

        .fsr-it-leg .facts span[b-4y4r91k4y6] {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        .fsr-it-leg .facts svg[b-4y4r91k4y6] {
            color: var(--d-ink-3);
        }

        .fsr-it-leg .facts .is-none[b-4y4r91k4y6] {
            color: var(--d-ink-4);
        }

.fsr-it-transit[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #fff6e5;
    color: #a15c07;
    font-size: 11.5px;
    font-weight: 600;
}

    .fsr-it-transit em[b-4y4r91k4y6] {
        font-style: normal;
        margin-left: auto;
        padding: 1px 7px;
        border-radius: 5px;
        background: #fdecea;
        color: #b42318;
        font-size: 10.5px;
        font-weight: 700;
    }

@media (max-width: 767px) {
    .fsr-it[b-4y4r91k4y6] {
        margin: 8px 10px 0;
    }

    .fsr-it-leg[b-4y4r91k4y6] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

        .fsr-it-leg .facts[b-4y4r91k4y6] {
            flex-direction: row;
            gap: 12px;
            padding-left: 0;
            border-left: 0;
        }
}

/* ─── Chi tiết giá (07/11/2026): bảng 4 cột, số Chakra căn phải, dòng tổng cam ─── */
.fsr-pd[b-4y4r91k4y6] {
    margin-top: 8px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 10px;
    overflow: hidden;
}

.fsr-pd-hd[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    padding: 8px 12px;
    background: var(--d-surface-2);
    font-size: 11.5px;
    color: var(--d-ink-2);
}

    .fsr-pd-hd b[b-4y4r91k4y6] {
        font-size: 13px;
        color: var(--d-ink);
    }

.fsr-pd-wrap[b-4y4r91k4y6] {
    overflow-x: auto;
}

.fsr-pd-tbl[b-4y4r91k4y6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .fsr-pd-tbl th[b-4y4r91k4y6],
    .fsr-pd-tbl td[b-4y4r91k4y6] {
        padding: 8px 12px;
        border-top: 1px solid var(--d-line-2);
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
    }

    .fsr-pd-tbl th[b-4y4r91k4y6] {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--d-ink-3);
    }

    .fsr-pd-tbl .num[b-4y4r91k4y6] {
        text-align: right;
        font-family: var(--fsr-num);
        font-variant-numeric: tabular-nums;
    }

    .fsr-pd-tbl td b[b-4y4r91k4y6] {
        display: block;
        font-weight: 700;
        color: var(--d-ink);
    }

    .fsr-pd-tbl td small[b-4y4r91k4y6] {
        display: block;
        margin-top: 1px;
        font-size: 11px;
        color: var(--d-ink-3);
    }

    .fsr-pd-tbl td.tot[b-4y4r91k4y6] {
        font-weight: 700;
        color: var(--d-ink);
    }

    .fsr-pd-tbl tfoot td[b-4y4r91k4y6] {
        background: var(--d-accent-soft);
        border-top: 1.5px dashed #f2b285;
    }

    .fsr-pd-tbl td.grand[b-4y4r91k4y6] {
        font-size: 18px;
        font-weight: 700;
        color: #c24e00;
    }

/* ─── 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);
        }

/* ─── 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;
}

/* ══════════════════════════════════════════════════════════════════════════
   BỐ CỤC v2 — 07/11/2026 (mock results-v2 anh duyệt): một màn 1440×900 thấy 8 chuyến thay vì 4.
   · Thanh hành trình 54 · dải ngày 62 · sắp xếp + đếm + thuế phí MỘT hàng 42 ⇒ chuyến đầu ở ~265px.
   · Thẻ chuyến MỘT hàng 72px, 4 cột (hãng · giờ · hành lý + nhãn · giá + Chọn); điện thoại 2 dòng 62px.
   · Hạng vé MỘT hàng ngang, mũi tên ◀ ▶ (JS thuần), mép phải mờ dần khi còn thẻ; điện thoại vuốt.
   · Màu theo nghĩa: cam đậm = tiền + đang chọn · cam = hành động · xanh lá = tốt cho khách (bay thẳng, rẻ nhất,
     miễn phí) · vàng đất = cần để ý (điểm dừng, ít chỗ, mất phí) · chàm = nhanh nhất · đỏ = không được.
     Màu chỉ ở chữ/viên nhỏ, thẻ giữ nền trắng; KHÔNG vạch màu một cạnh.
   Số (giờ, giá) dùng Chakra Petch nếu site có nạp, không thì theo phông site.
   ══════════════════════════════════════════════════════════════════════════ */

.fsr-root[b-4y4r91k4y6] {
    gap: 8px;
}

/* ── Dòng tuyến gọn (cổng CA / Manager / Avery) ── */
.fsr-route[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px 14px;
}

.fsr-route-trip[b-4y4r91k4y6] {
    font-size: 11.5px;
    font-weight: 700;
    color: #c24e00;
    background: var(--d-accent-soft);
    border-radius: 999px;
    padding: 3px 9px;
}

.fsr-route-od[b-4y4r91k4y6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fsr-num);
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
}

    .fsr-route-od svg[b-4y4r91k4y6] {
        color: var(--d-accent);
    }

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

    .fsr-route-meta + .fsr-route-meta[b-4y4r91k4y6]::before {
        content: "·";
        margin-right: 12px;
        color: var(--d-ink-4);
    }

.fsr-route-edit[b-4y4r91k4y6] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: 9px;
    background: var(--d-surface);
    color: var(--d-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

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

.fsr-searchbox-ft[b-4y4r91k4y6] {
    padding: 0 12px 10px;
    text-align: center;
}

/* ── Dải 7 ngày (62px): ô đang xem viền cam, ô rẻ nhất chữ xanh ── */
.fsr-daybar[b-4y4r91k4y6] {
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: var(--d-r);
    padding: 4px 4px 0;
}

.fsr-daybar-grid[b-4y4r91k4y6] {
    display: grid;
    grid-template-columns: 96px repeat(7, minmax(0, 1fr));
    gap: 3px;
}

/* Ô nhãn đầu dải: tên khu vực + con số trên dải nghĩa là gì */
.fsr-day-lb[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 8px;
    border-right: 1px solid var(--d-line-2);
    margin-right: 3px;
    line-height: 1.15;
}

    .fsr-day-lb b[b-4y4r91k4y6] {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--d-ink-2);
    }

    .fsr-day-lb span[b-4y4r91k4y6] {
        font-size: 10px;
        color: var(--d-ink-3);
    }

.fsr-day[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-height: 40px;
    padding: 4px 2px 3px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--d-ink);
    font: inherit;
    line-height: 1.15;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

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

    .fsr-day:focus-visible[b-4y4r91k4y6] {
        outline: 2px solid var(--d-accent);
        outline-offset: 1px;
    }

.fsr-day-d[b-4y4r91k4y6] {
    font-size: 11px;
    color: var(--d-ink-3);
    white-space: nowrap;
}

.fsr-day-p[b-4y4r91k4y6] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--fsr-num);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

    .fsr-day-p.is-na[b-4y4r91k4y6] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.fsr-day.is-low .fsr-day-p[b-4y4r91k4y6] {
    color: var(--d-good);
}

.fsr-day.is-active[b-4y4r91k4y6] {
    border-color: var(--d-accent);
    background: var(--d-accent);
    cursor: default;
}

    .fsr-day.is-active .fsr-day-d[b-4y4r91k4y6] {
        color: #fff;
        font-weight: 700;
    }

    .fsr-day.is-active .fsr-day-p[b-4y4r91k4y6] {
        color: #fff;
    }

.fsr-day.is-past[b-4y4r91k4y6] {
    opacity: .4;
    cursor: not-allowed;
}

.fsr-daybar-note[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    padding: 3px 6px 4px;
    font-size: 10.5px;
    color: var(--d-ink-3);
}

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

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

        .fsr-daybar-note .low[b-4y4r91k4y6]::before {
            content: "● ";
        }

    .fsr-daybar-note .ref[b-4y4r91k4y6] {
        margin-left: auto;
    }

/* ── Bố cục 2 cột: lọc trái 236px · danh sách phải ── */
.fsr-layout[b-4y4r91k4y6] {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 0;
}

.fsr-main[b-4y4r91k4y6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fsr-side[b-4y4r91k4y6] {
    position: sticky;
    top: calc(var(--ffs-top, 0px) + var(--ffs-bar-h, 0px) + 16px);
}

.fsr-side-card[b-4y4r91k4y6] {
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: var(--d-r);
    box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
}

.fsr-side-hd[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line-2);
    border-radius: var(--d-r) var(--d-r) 0 0;
}

    .fsr-side-hd h4[b-4y4r91k4y6] {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--d-ink);
    }

.fsr-side-card[b-4y4r91k4y6]  .ffp-root {
    padding: 2px 12px 8px;
}

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

    .fsr-side-skel span[b-4y4r91k4y6] {
        height: 14px;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--d-surface-2) 0%, #e9ebf0 50%, var(--d-surface-2) 100%);
        background-size: 200% 100%;
        animation: fsr-skel-b-4y4r91k4y6 1.2s linear infinite;
    }

        .fsr-side-skel span:nth-child(2n)[b-4y4r91k4y6] {
            width: 70%;
        }

@keyframes fsr-skel-b-4y4r91k4y6 {
    to { background-position: -200% 0; }
}

.fsr-link-btn[b-4y4r91k4y6] {
    background: none;
    border: 0;
    padding: 0;
    color: #c24e00;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .fsr-link-btn:hover[b-4y4r91k4y6] {
        text-decoration: underline;
    }

.fsr-count-pill[b-4y4r91k4y6] {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--d-accent);
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Khứ hồi: hai bước ── */
.fsr-phases[b-4y4r91k4y6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-phase[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 0;
    background: var(--d-surface);
    text-align: left;
    font: inherit;
    color: var(--d-ink-3);
    cursor: pointer;
    position: relative;
    min-width: 0;
}

    .fsr-phase + .fsr-phase[b-4y4r91k4y6] {
        border-left: 1px solid var(--d-line-2);
    }

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

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

        .fsr-phase.is-active[b-4y4r91k4y6]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: var(--d-accent);
        }

.fsr-phase-n[b-4y4r91k4y6] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--d-line);
    background: var(--d-surface);
    font-size: 11.5px;
    font-weight: 700;
}

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

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

.fsr-phase-tx[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .fsr-phase-tx .lbl[b-4y4r91k4y6] {
        font-size: 12.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

        .fsr-phase-tx .sub b[b-4y4r91k4y6] {
            color: var(--d-ink);
            font-family: var(--fsr-num);
        }

/* ── Một hàng 42px: 4 ô sắp xếp + đếm + thuế phí ── */
.fsr-sorts[b-4y4r91k4y6] {
    display: flex;
    align-items: stretch;
    height: 42px;
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-sorts-lb[b-4y4r91k4y6] {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1px solid var(--d-line-2);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--d-ink-2);
    background: var(--d-surface);
}

.fsr-sort[b-4y4r91k4y6] {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--d-line-2);
    background: #fafbfc;
    font: inherit;
    font-size: 12px;
    color: var(--d-ink-3);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

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

    .fsr-sort .k[b-4y4r91k4y6] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fsr-sort .v[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 14px;
        font-weight: 600;
        color: var(--d-ink);
    }

    .fsr-sort.is-on[b-4y4r91k4y6] {
        background: var(--d-accent-soft);
        color: #c24e00;
        font-weight: 700;
    }

        .fsr-sort.is-on .v[b-4y4r91k4y6] {
            color: #c24e00;
        }

        .fsr-sort.is-on[b-4y4r91k4y6]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: var(--d-accent);
        }

.fsr-sorts-cnt[b-4y4r91k4y6] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: var(--d-surface);
    font-size: 12px;
    color: var(--d-ink-3);
    white-space: nowrap;
}

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

    .fsr-sorts-cnt .ok[b-4y4r91k4y6] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--d-good);
        font-weight: 600;
    }

/* chip lọc đang bật */
.fsr-fchips[b-4y4r91k4y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

.fsr-fchip[b-4y4r91k4y6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--d-accent);
    border-radius: 999px;
    background: var(--d-accent-soft);
    color: #c24e00;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .fsr-fchip span[b-4y4r91k4y6] {
        font-size: 10px;
        opacity: .7;
    }

/* ── Thẻ chuyến: MỘT hàng 72px ── */
.fsr-list[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fsr-fl[b-4y4r91k4y6] {
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
    transition: border-color .12s, box-shadow .12s;
}

    .fsr-fl:hover[b-4y4r91k4y6] {
        border-color: #f2b285;
        box-shadow: 0 6px 18px -12px rgba(255, 107, 0, .45);
    }

    .fsr-fl.is-open[b-4y4r91k4y6] {
        border-color: var(--d-accent);
        box-shadow: 0 10px 26px -18px rgba(255, 107, 0, .55);
    }

    .fsr-fl.is-open:hover[b-4y4r91k4y6] {
        background: var(--d-surface);
    }

    .fsr-fl.is-off[b-4y4r91k4y6] {
        opacity: .7;
    }

.fsr-fl-row[b-4y4r91k4y6] {
    display: grid;
    grid-template-columns: 186px minmax(0, 1fr) 150px 248px;
    grid-template-areas: "c1 tl c3 stub";
    align-items: center;
    min-height: 72px;
    cursor: pointer;
    border-radius: 12px;
}

    .fsr-fl-row:focus-visible[b-4y4r91k4y6] {
        outline: 2px solid var(--d-accent);
        outline-offset: 2px;
    }

/* cột 1: hãng */
.fsr-c1[b-4y4r91k4y6] {
    grid-area: c1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
    min-width: 0;
}

    .fsr-c1 img[b-4y4r91k4y6] {
        width: 30px;
        height: 26px;
        object-fit: contain;
        flex: none;
    }

.fsr-c1-tx[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

    .fsr-c1-tx .nm[b-4y4r91k4y6] {
        font-size: 12px;
        font-weight: 700;
        color: var(--d-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fsr-c1-tx .no[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 11.5px;
        color: var(--d-ink-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* cột 2: giờ bay */
.fsr-tl[b-4y4r91k4y6] {
    grid-area: tl;
    display: grid;
    grid-template-columns: auto minmax(70px, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    min-width: 0;
}

    .fsr-tl .ep[b-4y4r91k4y6] {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

        .fsr-tl .ep.end[b-4y4r91k4y6] {
            text-align: right;
            align-items: flex-end;
        }

    .fsr-tl .t[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 22px;
        font-weight: 700;
        color: var(--d-ink);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

        .fsr-tl .t sup[b-4y4r91k4y6] {
            font-size: 10px;
            color: #c24e00;
            margin-left: 1px;
            font-weight: 700;
        }

    /* Sân bay dưới giờ: mã đậm, nhà ga mờ; ĐI = chấm rỗng · ĐẾN = chấm đặc — cùng ngôn ngữ với hai đầu đường bay,
       không khung không màu nền (anh chê kiểu viên). */
    .fsr-tl .c[b-4y4r91k4y6] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 4px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--d-ink);
        white-space: nowrap;
    }

        .fsr-tl .c .ic[b-4y4r91k4y6] {
            display: none;
        }

        .fsr-tl .c[b-4y4r91k4y6]::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--d-surface);
            border: 1.5px solid #8a92a3;
            flex: none;
        }

        .fsr-tl .c.is-arr[b-4y4r91k4y6]::before {
            background: var(--d-ink);
            border-color: var(--d-ink);
        }

        .fsr-tl .c .tm[b-4y4r91k4y6] {
            font-weight: 600;
            color: var(--d-ink-3);
            letter-spacing: 0;
        }

    .fsr-tl .path[b-4y4r91k4y6] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        color: var(--d-ink-3);
        min-width: 0;
        line-height: 1.15;
    }

    .fsr-tl .ln[b-4y4r91k4y6] {
        position: relative;
        display: block;
        width: 100%;
        height: 1.5px;
        background: repeating-linear-gradient(90deg, #c9ced8 0 4px, transparent 4px 8px);
    }

        .fsr-tl .ln[b-4y4r91k4y6]::before,
        .fsr-tl .ln[b-4y4r91k4y6]::after {
            content: "";
            position: absolute;
            top: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
        }

        .fsr-tl .ln[b-4y4r91k4y6]::before {
            left: -2px;
            background: var(--d-surface);
            border: 1.5px solid #b6bcc8;
        }

        .fsr-tl .ln[b-4y4r91k4y6]::after {
            right: -2px;
            background: var(--d-ink);
        }

        /* máy bay cam nhỏ giữa đường bay thẳng — nền trắng cắt vạch đứt */
        .fsr-tl .ln .pl[b-4y4r91k4y6] {
            position: absolute;
            left: 50%;
            top: -5px;
            width: 10px;
            height: 10px;
            margin-left: -8px;
            padding: 0 3px;
            box-sizing: content-box;
            background: var(--d-surface);
            color: var(--d-accent);
            transform: rotate(90deg);
        }

        .fsr-tl .ln i[b-4y4r91k4y6] {
            position: absolute;
            top: -4px;
            width: 9px;
            height: 9px;
            margin-left: -4px;
            border-radius: 50%;
            background: var(--d-surface);
            border: 2px solid var(--d-warn);
        }

    .fsr-tl .st[b-4y4r91k4y6] {
        color: var(--d-warn);
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

        .fsr-tl .st.is-direct[b-4y4r91k4y6] {
            color: var(--d-good);
        }

        .fsr-tl .st.st-short[b-4y4r91k4y6] {
            display: none;
        }

/* cột 3: hành lý + nhãn */
.fsr-c3[b-4y4r91k4y6] {
    grid-area: c3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding-right: 8px;
    font-size: 11.5px;
    color: var(--d-ink-2);
}

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

    .fsr-bag span[b-4y4r91k4y6] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fsr-bag svg[b-4y4r91k4y6] {
        color: var(--d-ink-3);
        flex: none;
    }

    .fsr-bag .is-none[b-4y4r91k4y6] {
        color: var(--d-ink-4);
    }

.fsr-tags[b-4y4r91k4y6] {
    display: flex;
    gap: 4px;
    min-height: 0;
    flex-wrap: wrap;
}

    .fsr-tags:empty[b-4y4r91k4y6] {
        display: none;
    }

.fsr-tag[b-4y4r91k4y6] {
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    padding: 1px 7px;
    white-space: nowrap;
    line-height: 1.5;
}

    .fsr-tag.is-cheap[b-4y4r91k4y6] {
        background: #e8f6ee;
        color: #14804a;
    }

    .fsr-tag.is-fast[b-4y4r91k4y6] {
        background: #e8f6ee;
        color: #14804a;
    }

    .fsr-tag.is-seat[b-4y4r91k4y6],
    .fsr-tag.is-warn[b-4y4r91k4y6] {
        background: #fff6e5;
        color: #a15c07;
    }

    .fsr-tag.is-off[b-4y4r91k4y6] {
        background: #fdecea;
        color: #b42318;
    }

/* cột 4: cuống vé — giá + Chọn trên cùng hàng */
.fsr-stub[b-4y4r91k4y6] {
    grid-area: stub;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    padding: 6px 12px 6px 14px;
    border-left: 1.5px dashed #f2b285;
    border-radius: 0 11px 11px 0;
    background: #fffaf5;
}

    .fsr-stub[b-4y4r91k4y6]::before,
    .fsr-stub[b-4y4r91k4y6]::after {
        content: "";
        position: absolute;
        left: -8px;
        width: 14px;
        height: 7px;
        background: var(--fsr-page-bg, #f4f5f8);
        border: 1px solid #dfe3ea;
    }

    .fsr-stub[b-4y4r91k4y6]::before {
        top: -1px;
        border-top: 0;
        border-radius: 0 0 8px 8px;
    }

    .fsr-stub[b-4y4r91k4y6]::after {
        bottom: -1px;
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
    }

.fsr-fl.is-open .fsr-stub[b-4y4r91k4y6] {
    background: #ffeedd;
    border-radius: 0 11px 0 0;
}

    .fsr-fl.is-open .fsr-stub[b-4y4r91k4y6]::before,
    .fsr-fl.is-open .fsr-stub[b-4y4r91k4y6]::after {
        border-color: var(--d-accent);
    }

.fsr-pr[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.1;
    min-width: 0;
}

    .fsr-pr .old[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 11px;
        color: var(--d-ink-4);
        text-decoration: line-through;
    }

    .fsr-pr .amt[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 20px;
        font-weight: 700;
        color: #c24e00;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* .fsr-kind (loại giá khứ hồi) là inline-flex nowrap — ở cuống vé phải cho xuống dòng, không thì tràn trên điện thoại. */
    .fsr-pr .per[b-4y4r91k4y6] {
        display: block;
        margin-top: 2px;
        font-size: 10.5px;
        color: var(--d-ink-3);
        line-height: 1.2;
        white-space: normal;
    }

        .fsr-pr .per .fsr-kind-ico[b-4y4r91k4y6] {
            vertical-align: -2px;
            margin-right: 2px;
        }

    .fsr-pr .both[b-4y4r91k4y6] {
        font-size: 10.5px;
        color: var(--d-ink-2);
        font-weight: 600;
        line-height: 1.2;
    }

.fsr-pick[b-4y4r91k4y6] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 78px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--d-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: background-color .12s;
}

.fsr-fl-row:hover .fsr-pick[b-4y4r91k4y6] {
    background: #e85f00;
}

.fsr-pick.is-open[b-4y4r91k4y6] {
    background: var(--d-surface);
    color: var(--d-ink);
    border: 1px solid var(--d-line);
}

    .fsr-pick.is-open svg[b-4y4r91k4y6] {
        transform: rotate(180deg);
    }

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

.fsr-fl.is-off .fsr-pick[b-4y4r91k4y6] {
    opacity: .5;
}

/* Khung xương khi chưa có chuyến */
.fsr-fl-skel .fsr-fl-row[b-4y4r91k4y6] {
    grid-template-columns: 150px minmax(0, 1fr) 160px;
    grid-template-areas: none;
    gap: 20px;
    padding: 0 18px;
    cursor: default;
}

.fsr-fl-skel span[b-4y4r91k4y6] {
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--d-surface-2) 0%, #e9ebf0 50%, var(--d-surface-2) 100%);
    background-size: 200% 100%;
    animation: fsr-skel-b-4y4r91k4y6 1.2s linear infinite;
}

/* ── Hạng vé: MỘT hàng ngang + mũi tên ── */
.fsr-fares[b-4y4r91k4y6] {
    border-top: 1px solid var(--d-line);
    padding: 10px 14px 12px;
    background: #fffaf6;
    border-radius: 0 0 12px 12px;
    animation: fsr-open-b-4y4r91k4y6 .18s ease-out;
}

@keyframes fsr-open-b-4y4r91k4y6 {
    from { opacity: 0; transform: translateY(-4px); }
}

.fsr-fares-hd[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .fsr-fares-hd b[b-4y4r91k4y6] {
        font-size: 13px;
        color: var(--d-ink);
    }

    .fsr-fares-hd .sp[b-4y4r91k4y6] {
        flex: 1;
    }

.fsr-arr[b-4y4r91k4y6] {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .12s, border-color .12s;
}

    .fsr-arr:hover:not(:disabled)[b-4y4r91k4y6] {
        border-color: var(--d-accent);
        color: #c24e00;
    }

    .fsr-arr:disabled[b-4y4r91k4y6] {
        opacity: .35;
        cursor: default;
    }

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

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

    /* mép mờ báo còn thẻ phía sau / phía trước */
    .fsr-fares-wrap[b-4y4r91k4y6]::after,
    .fsr-fares-wrap[b-4y4r91k4y6]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 44px;
        pointer-events: none;
        opacity: 1;
        transition: opacity .15s;
    }

    .fsr-fares-wrap[b-4y4r91k4y6]::after {
        right: 0;
        background: linear-gradient(90deg, rgba(255, 250, 246, 0), #fffaf6);
    }

    .fsr-fares-wrap[b-4y4r91k4y6]::before {
        left: 0;
        background: linear-gradient(270deg, rgba(255, 250, 246, 0), #fffaf6);
        z-index: 1;
    }

    .fsr-fares-wrap.is-end[b-4y4r91k4y6]::after,
    .fsr-fares-wrap.is-start[b-4y4r91k4y6]::before {
        opacity: 0;
    }

.fsr-fares-row[b-4y4r91k4y6] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 3px 3px 5px;
    margin: -3px -3px 0;
}

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

/* Thẻ hạng vé: dải TÊN HẠNG đứng đầu (đang chọn = cam trắng), giá to, các dòng quyền lợi thẳng hàng giữa các thẻ. */
.fsr-fare[b-4y4r91k4y6] {
    flex: 0 0 196px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    padding: 0 0 10px;
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
    overflow: hidden;
}

    .fsr-fare:hover[b-4y4r91k4y6] {
        border-color: #f2b285;
    }

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

    .fsr-fare.is-disabled[b-4y4r91k4y6] {
        opacity: .6;
        cursor: not-allowed;
    }

.fsr-fare-nm[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 11px;
    background: var(--d-surface-2);
    color: var(--d-ink);
    border-bottom: 1px solid var(--d-line-2);
}

    .fsr-fare-nm span[b-4y4r91k4y6] {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fsr-fare-nm em[b-4y4r91k4y6] {
        flex: none;
        font-style: normal;
        padding: 0 6px;
        border-radius: 4px;
        background: #e8f6ee;
        color: #14804a;
        font-size: 10.5px;
        font-weight: 700;
    }

.fsr-fare.is-selected .fsr-fare-nm[b-4y4r91k4y6] {
    background: var(--d-accent);
    color: #fff;
    border-bottom-color: var(--d-accent);
}

    .fsr-fare.is-selected .fsr-fare-nm em[b-4y4r91k4y6] {
        background: rgba(255, 255, 255, .25);
        color: #fff;
    }

.fsr-fare-pr[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 11px 7px;
}

    .fsr-fare-pr s[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 11px;
        color: var(--d-ink-4);
    }

    .fsr-fare-pr b[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 18px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1.1;
        white-space: nowrap;
    }

    .fsr-fare-pr small[b-4y4r91k4y6] {
        font-size: 10.5px;
        color: var(--d-ink-3);
    }

.fsr-fare.is-selected .fsr-fare-pr b[b-4y4r91k4y6] {
    color: #c24e00;
}

.fsr-fare-rows[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    padding: 0 11px;
    flex: 1;
}

    .fsr-fare-rows .row[b-4y4r91k4y6] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
        border-top: 1px dashed var(--d-line-2);
        color: var(--d-ink-3);
    }

        .fsr-fare-rows .row b[b-4y4r91k4y6] {
            font-weight: 700;
            color: var(--d-ink);
            text-align: right;
            white-space: nowrap;
        }

            .fsr-fare-rows .row b.is-none[b-4y4r91k4y6] {
                color: var(--d-ink-4);
                font-weight: 500;
            }

/* Điều kiện vé (Đổi vé · Hoàn/Huỷ vé) nối tiếp cùng khuôn dòng — nhãn trái, tem phải. */
.fsr-fare-cond[b-4y4r91k4y6]  .fcc-list {
    display: flex;
    flex-direction: column;
}

.fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px dashed var(--d-line-2);
}

    .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline .fcc-lbl {
        font-size: 11.5px;
        color: var(--d-ink-3);
        white-space: nowrap;
    }

.fsr-fare-cond[b-4y4r91k4y6]  .fcc-badge {
    padding: 0 6px;
}

.fsr-fare-banner[b-4y4r91k4y6] {
    margin: 6px 11px 0;
    padding: 4px 7px;
    border-radius: 7px;
    background: #fdecea;
    color: #b42318;
    font-size: 11px;
    font-weight: 600;
}

.fsr-fare-btn[b-4y4r91k4y6] {
    margin: 8px 11px 0;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

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

.fsr-fare.is-selected .fsr-fare-btn[b-4y4r91k4y6] {
    background: var(--d-accent);
    border-color: var(--d-accent);
    color: #fff;
}

.fsr-fare.is-disabled .fsr-fare-btn[b-4y4r91k4y6] {
    pointer-events: none;
}

.fsr-fares .fsr-toggles[b-4y4r91k4y6] {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
}

.fsr-more[b-4y4r91k4y6] {
    align-self: center;
    margin-top: 4px;
    height: 38px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

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

.fsr-btn-ghost[b-4y4r91k4y6] {
    height: 36px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
}

.fsr-empty .hint[b-4y4r91k4y6] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin-top: 4px;
}

/* ── Thanh đáy ── */
.fsr-dock[b-4y4r91k4y6] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--d-surface);
    border-top: 1px solid var(--d-line);
    box-shadow: 0 -12px 30px -18px rgba(20, 22, 28, .4);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: fsr-dock-in-b-4y4r91k4y6 .22s ease-out;
}

@keyframes fsr-dock-in-b-4y4r91k4y6 {
    from { transform: translateY(100%); }
}

.fsr-dock-in[b-4y4r91k4y6] {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 28px;
}

.fsr-dock-leg[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 9px;
    background: var(--d-surface-2);
    font-size: 12.5px;
    color: var(--d-ink-2);
    white-space: nowrap;
}

    .fsr-dock-leg img[b-4y4r91k4y6] {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .fsr-dock-leg .k[b-4y4r91k4y6] {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .07em;
        font-weight: 700;
        color: var(--d-ink-3);
    }

    .fsr-dock-leg b[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        color: var(--d-ink);
    }

    .fsr-dock-leg .fare[b-4y4r91k4y6] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fsr-dock-leg.is-done[b-4y4r91k4y6] {
        background: #e8f6ee;
    }

.fsr-dock .sp[b-4y4r91k4y6] {
    flex: 1;
}

.fsr-dock-tot[b-4y4r91k4y6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

    .fsr-dock-tot .k[b-4y4r91k4y6] {
        font-size: 11px;
        color: var(--d-ink-3);
        white-space: nowrap;
    }

    .fsr-dock-tot .v[b-4y4r91k4y6] {
        font-family: var(--fsr-num);
        font-size: 21px;
        font-weight: 700;
        color: #c24e00;
        white-space: nowrap;
    }

        .fsr-dock-tot .v s[b-4y4r91k4y6] {
            font-size: 12px;
            color: var(--d-ink-4);
            font-weight: 600;
            margin-right: 6px;
        }

.fsr-dock-btn[b-4y4r91k4y6] {
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
}

.fsr-root:has(.fsr-dock)[b-4y4r91k4y6] {
    padding-bottom: 72px;
}

/* ── Điện thoại: viên Sắp xếp · Lọc ── */
.fsr-mtools[b-4y4r91k4y6] {
    display: none;
}

/* ══ Màn vừa 1024–1199: cột hẹp ⇒ cuống vé gọn, bỏ " · N hạng vé", dòng "Cả 2 chiều từ" không vỡ ══ */
@media (max-width: 1199px) {
    .fsr-fl-row[b-4y4r91k4y6] {
        grid-template-columns: 168px minmax(0, 1fr) 140px 222px;
    }

    .fsr-pr .amt[b-4y4r91k4y6] {
        font-size: 18px;
    }

    .fsr-pr .per .fc[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-pr .both[b-4y4r91k4y6] {
        font-size: 10px;
        white-space: nowrap;
    }

    .fsr-c1-tx .nm[b-4y4r91k4y6] {
        font-size: 11.5px;
    }
}

/* ══ Máy tính bảng ══ */
@media (max-width: 1023px) {
    .fsr-layout[b-4y4r91k4y6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fsr-side[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-fl-row[b-4y4r91k4y6] {
        grid-template-columns: 140px minmax(0, 1fr) 210px;
        grid-template-areas: "c1 tl stub" "c3 c3 c3";
    }

    .fsr-c3[b-4y4r91k4y6] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 0 14px 8px;
    }

    .fsr-mtools[b-4y4r91k4y6] {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 39;
        display: flex;
        background: var(--d-ink);
        border-radius: 999px;
        box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
        transition: bottom .2s ease;
    }

        .fsr-mtools.has-bar[b-4y4r91k4y6] {
            bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        }

        .fsr-mtools button[b-4y4r91k4y6] {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 40px;
            padding: 0 15px;
            border: 0;
            background: none;
            color: #fff;
            font: inherit;
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
        }

            .fsr-mtools button + button[b-4y4r91k4y6] {
                border-left: 1px solid #3a3f4b;
            }

        .fsr-mtools em[b-4y4r91k4y6] {
            font-style: normal;
            background: var(--d-accent);
            border-radius: 999px;
            font-size: 10.5px;
            padding: 1px 6px;
        }

    .fsr-root[b-4y4r91k4y6] {
        padding-bottom: 64px;
    }

    .fsr-totop.has-bar[b-4y4r91k4y6] {
        bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    }
}

/* ══ Điện thoại: thẻ 2 dòng 62px ══ */
@media (max-width: 767px) {
    .fsr-sorts[b-4y4r91k4y6] {
        height: auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 5px 6px;
        gap: 5px;
        border: 0;
        background: transparent;
        border-radius: 0;
    }

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

    .fsr-sort[b-4y4r91k4y6] {
        flex: none;
        height: 28px;
        padding: 0 10px;
        border: 1px solid var(--d-line);
        border-radius: 999px;
        background: var(--d-surface);
        font-size: 11.5px;
        gap: 4px;
    }

        .fsr-sort .v[b-4y4r91k4y6] {
            font-size: 12px;
        }

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

            .fsr-sort.is-on[b-4y4r91k4y6]::after {
                display: none;
            }

    .fsr-sorts-cnt[b-4y4r91k4y6] {
        padding: 0 4px;
        font-size: 11.5px;
    }

        .fsr-sorts-cnt .ok[b-4y4r91k4y6] {
            display: none;
        }

    .fsr-daybar[b-4y4r91k4y6] {
        padding: 4px 4px 0;
    }

    .fsr-day-lb[b-4y4r91k4y6],
    .fsr-sorts-lb[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-daybar-grid[b-4y4r91k4y6] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

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

    .fsr-day[b-4y4r91k4y6] {
        flex: 0 0 68px;
        scroll-snap-align: center;
    }

    .fsr-daybar-note .ref[b-4y4r91k4y6] {
        display: none;
    }

    /* Thẻ 2 dòng: [hãng · số hiệu · hành lý · nhãn] / [giờ — đường bay — giờ | giá] */
    .fsr-fl-row[b-4y4r91k4y6] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "c1 c3"
            "tl stub";
        padding: 7px 10px;
        gap: 4px 8px;
        min-height: 0;
    }

    .fsr-c1[b-4y4r91k4y6] {
        padding: 0;
        gap: 6px;
    }

        .fsr-c1 img[b-4y4r91k4y6] {
            width: 18px;
            height: 18px;
            padding: 1px;
            border-radius: 5px;
        }

    .fsr-c1-tx[b-4y4r91k4y6] {
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
    }

        .fsr-c1-tx .nm[b-4y4r91k4y6] {
            font-size: 11.5px;
            font-weight: 600;
        }

        .fsr-c1-tx .no[b-4y4r91k4y6] {
            font-size: 11px;
        }

    .fsr-c3[b-4y4r91k4y6] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 0;
        font-size: 11px;
    }

    .fsr-bag[b-4y4r91k4y6] {
        gap: 6px;
    }

        .fsr-bag .is-none[b-4y4r91k4y6] {
            display: none;
        }

        .fsr-bag svg[b-4y4r91k4y6] {
            display: none;
        }

    .fsr-tags .fsr-tag + .fsr-tag[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-tl[b-4y4r91k4y6] {
        padding: 0;
        gap: 8px;
        grid-template-columns: auto minmax(44px, 1fr) auto;
    }

        .fsr-tl .t[b-4y4r91k4y6] {
            font-size: 18px;
        }

        .fsr-tl .c[b-4y4r91k4y6] {
            font-size: 10.5px;
            margin-top: 3px;
            gap: 4px;
        }

            /* Nhà ga bỏ trên điện thoại (cột đường bay hẹp; nhà ga vẫn có ở chi tiết hành trình). */
            .fsr-tl .c .tm[b-4y4r91k4y6] {
                display: none;
            }

        .fsr-tl .path[b-4y4r91k4y6] {
            font-size: 10px;
            gap: 4px;
        }

        .fsr-tl .st[b-4y4r91k4y6] {
            display: none;
        }

        .fsr-tl .st.st-short[b-4y4r91k4y6] {
            display: block;
        }

        .fsr-tl .ln .pl[b-4y4r91k4y6] {
            width: 9px;
            height: 9px;
            top: -4.5px;
        }

    .fsr-stub[b-4y4r91k4y6] {
        display: flex;
        padding: 0 0 0 8px;
        border-radius: 0;
        background: transparent;
    }

        .fsr-stub[b-4y4r91k4y6]::before,
        .fsr-stub[b-4y4r91k4y6]::after {
            display: none;
        }

    .fsr-fl.is-open .fsr-stub[b-4y4r91k4y6] {
        background: transparent;
    }

    .fsr-pr .amt[b-4y4r91k4y6] {
        font-size: 16px;
    }

    /* Khứ hồi trên điện thoại: bỏ " · N hạng vé" (đã có khi mở thẻ), giữ "Cả 2 chiều từ…" một dòng; cuống không lấn cột đường bay. */
    .fsr-stub[b-4y4r91k4y6] {
        max-width: 156px;
    }

    .fsr-pr .per[b-4y4r91k4y6] {
        font-size: 10px;
    }

        .fsr-pr .per .fc[b-4y4r91k4y6] {
            display: none;
        }

    .fsr-pr .both[b-4y4r91k4y6] {
        font-size: 10px;
        white-space: nowrap;
    }

    .fsr-pr .both[b-4y4r91k4y6] {
        font-size: 10px;
    }

    .fsr-pick[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-fares[b-4y4r91k4y6] {
        padding: 8px 0 10px;
    }

    .fsr-fares-hd[b-4y4r91k4y6],
    .fsr-fares .fsr-toggles[b-4y4r91k4y6] {
        padding: 0 10px;
    }

    .fsr-arr[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-fares-hd > span:not(.sp)[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-fares-wrap[b-4y4r91k4y6]::before {
        display: none;
    }

    .fsr-fares-row[b-4y4r91k4y6] {
        scroll-padding: 0 10px;
        padding: 3px 10px 5px;
        margin: -3px 0 0;
    }

    .fsr-fare[b-4y4r91k4y6] {
        flex: 0 0 min(70%, 200px);
    }

    .fsr-phases[b-4y4r91k4y6] {
        grid-template-columns: 1fr;
    }

        .fsr-phases .fsr-phase + .fsr-phase[b-4y4r91k4y6] {
            border-left: 0;
            border-top: 1px solid var(--d-line-2);
        }

    .fsr-dock-in[b-4y4r91k4y6] {
        padding: 8px 12px;
        gap: 10px;
    }

    .fsr-dock-leg[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-dock-tot[b-4y4r91k4y6] {
        align-items: flex-start;
        flex: 1;
        min-width: 0;
    }

        .fsr-dock-tot .k[b-4y4r91k4y6] {
            white-space: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        .fsr-dock-tot .v[b-4y4r91k4y6] {
            font-size: 18px;
        }

    .fsr-dock .sp[b-4y4r91k4y6] {
        display: none;
    }

    .fsr-dock-btn[b-4y4r91k4y6] {
        height: 42px;
        padding: 0 16px;
        flex: none;
    }

    .fsr-fl-skel .fsr-fl-row[b-4y4r91k4y6] {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        padding: 14px 12px;
        gap: 10px;
    }

    .fsr-route-edit[b-4y4r91k4y6] {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fsr-fares[b-4y4r91k4y6],
    .fsr-dock[b-4y4r91k4y6],
    .fsr-side-skel span[b-4y4r91k4y6],
    .fsr-fl-skel span[b-4y4r91k4y6] {
        animation: none;
    }

    .fsr-fares-row[b-4y4r91k4y6] {
        scroll-behavior: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   KHU ĐIỀU KHIỂN v3 (08/11/2026) — dải ngày · tab chiều đi/về · sắp xếp · ghi chú giá chiều về.
   Trạng thái đang chọn = CAM đặc chữ trắng; xong = xanh lá; không dùng vạch màu một cạnh.
   ══════════════════════════════════════════════════════════════════════════ */

/* Dải ngày: một hàng, ô đang xem cam đặc, ô rẻ nhất 7 ngày chấm xanh + giá xanh */
.fsr-daybar[b-4y4r91k4y6] {
    padding: 4px;
    border-color: #dfe3ea;
    box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
}

.fsr-daybar-grid[b-4y4r91k4y6] {
    gap: 4px;
}

.fsr-day-lb[b-4y4r91k4y6] {
    padding: 2px 10px 2px 8px;
    margin-right: 2px;
}

    .fsr-day-lb b[b-4y4r91k4y6] {
        font-size: 10.5px;
        color: var(--d-ink);
    }

    .fsr-day-lb span[b-4y4r91k4y6] {
        font-size: 10px;
    }

.fsr-day[b-4y4r91k4y6] {
    min-height: 46px;
    padding: 5px 2px 4px;
    gap: 2px;
    border-radius: 9px;
    border: 1px solid transparent;
}

    .fsr-day:hover:not(:disabled):not(.is-active)[b-4y4r91k4y6] {
        background: var(--d-accent-soft);
        border-color: #f2b285;
    }

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

.fsr-day-p[b-4y4r91k4y6] {
    font-size: 14px;
    font-weight: 700;
}

.fsr-day.is-low:not(.is-active) .fsr-day-p[b-4y4r91k4y6]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-good);
    margin-right: 1px;
}

.fsr-day.is-active[b-4y4r91k4y6] {
    box-shadow: 0 6px 14px -8px rgba(255, 107, 0, .7);
}

    .fsr-day.is-active .fsr-day-d[b-4y4r91k4y6] {
        color: rgba(255, 255, 255, .9);
    }

/* Tab chiều đi / chiều về: hai thẻ cạnh nhau — xong = xanh lá có tick, đang chọn = cam, chưa tới = xám */
.fsr-phases[b-4y4r91k4y6] {
    display: flex;
    gap: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.fsr-phase[b-4y4r91k4y6] {
    flex: 1 1 0;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    background: var(--d-surface);
    color: var(--d-ink-3);
    box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
}

    .fsr-phase + .fsr-phase[b-4y4r91k4y6] {
        border-left: 1px solid #dfe3ea;
    }

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

        .fsr-phase.is-active[b-4y4r91k4y6]::after {
            display: none;
        }

    .fsr-phase.is-done[b-4y4r91k4y6] {
        background: #f3fbf6;
        border-color: #bfe3cd;
        color: var(--d-ink);
    }

    .fsr-phase:disabled[b-4y4r91k4y6] {
        opacity: .75;
    }

.fsr-phase-n[b-4y4r91k4y6] {
    width: 26px;
    height: 26px;
    font-size: 12px;
    border-color: #c9ced8;
    color: var(--d-ink-3);
}

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

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

.fsr-phase-tx .lbl[b-4y4r91k4y6] {
    font-size: 13px;
}

.fsr-phase-tx .sub[b-4y4r91k4y6] {
    font-size: 11.5px;
}

    .fsr-phase-tx .sub b[b-4y4r91k4y6] {
        color: #c24e00;
    }

/* Sắp xếp: nhãn + viên; viên đang chọn cam đặc */
.fsr-sorts[b-4y4r91k4y6] {
    height: auto;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 22, 28, .05);
    overflow: visible;
}

.fsr-sorts-lb[b-4y4r91k4y6] {
    padding: 0 8px 0 4px;
    border-right: 0;
    background: transparent;
}

.fsr-sort[b-4y4r91k4y6] {
    flex: 0 1 auto;
    height: 32px;
    padding: 0 12px;
    gap: 5px;
    border: 1px solid #dfe3ea;
    border-right: 1px solid #dfe3ea;
    border-radius: 999px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
}

    .fsr-sort:hover[b-4y4r91k4y6] {
        background: var(--d-accent-soft);
        border-color: #f2b285;
    }

    .fsr-sort .v[b-4y4r91k4y6] {
        font-size: 13px;
    }

    .fsr-sort.is-on[b-4y4r91k4y6] {
        background: var(--d-accent);
        border-color: var(--d-accent);
        color: #fff;
        font-weight: 700;
    }

        .fsr-sort.is-on .v[b-4y4r91k4y6] {
            color: #fff;
        }

        .fsr-sort.is-on[b-4y4r91k4y6]::after {
            display: none;
        }

.fsr-sorts-cnt[b-4y4r91k4y6] {
    margin-left: auto;
    padding: 0 4px;
    background: transparent;
}

/* Ghi chú giá chiều về: dải kem, icon cam, số đậm */
.fsr-pguide.is-return[b-4y4r91k4y6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #fff8f1;
    border: 1px solid #ffe0c7;
    border-radius: 12px;
    color: #5a3a1a;
    font-size: 12.5px;
}

    .fsr-pguide.is-return svg[b-4y4r91k4y6] {
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--d-accent);
    }

@media (max-width: 767px) {
    /* Khối v3 đặt overflow: visible cho máy tính; điện thoại phải cuộn ngang lại, không thì viên tràn trang (docW 611). */
    .fsr-sorts[b-4y4r91k4y6] {
        padding: 5px 6px;
        border: 0;
        background: transparent;
        box-shadow: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .fsr-phases[b-4y4r91k4y6] {
        flex-direction: column;
        gap: 6px;
    }

        .fsr-phases .fsr-phase + .fsr-phase[b-4y4r91k4y6] {
            border-top: 1px solid #dfe3ea;
        }

    .fsr-sort[b-4y4r91k4y6] {
        flex: none;
        height: 28px;
    }

    .fsr-day[b-4y4r91k4y6] {
        min-height: 44px;
    }
}

/* ══ Icon quyền lợi (08/11/2026): ô vuông nhạt 18px, thẻ đang chọn ngả cam — dùng chung cột hành lý trên thẻ chuyến + thẻ hạng vé ══ */
.fsr-bag .ico[b-4y4r91k4y6],
.fsr-fare-rows .ico[b-4y4r91k4y6] {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: inline-grid;
    place-items: center;
}

/* cột hành lý trên thẻ chuyến: 2 dòng dọc */
.fsr-bag[b-4y4r91k4y6] {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

    .fsr-bag span[b-4y4r91k4y6] {
        gap: 6px;
        font-size: 11.5px;
        color: var(--d-ink-2);
    }

    .fsr-bag em[b-4y4r91k4y6] {
        font-style: normal;
        color: var(--d-ink-3);
    }

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

    .fsr-bag .is-none b[b-4y4r91k4y6] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

    .fsr-bag .is-none .ico[b-4y4r91k4y6] {
        opacity: .55;
    }

/* thẻ hạng vé: dòng quyền lợi có icon, nhãn giãn, giá trị/tem bên phải */
.fsr-fare-rows .row[b-4y4r91k4y6] {
    gap: 7px;
}

    .fsr-fare-rows .row > span[b-4y4r91k4y6] {
        flex: 1;
        min-width: 0;
    }

.fsr-fare.is-selected .fsr-fare-rows .ico[b-4y4r91k4y6] {
    background: #ffe4d0;
    color: #c24e00;
}

.fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline {
    gap: 7px;
}

    .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline::before {
        content: "";
        flex: none;
        width: 18px;
        height: 18px;
        border-radius: 5px;
        background: var(--d-surface-2) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4'/%3E%3C/svg%3E") center / 11px no-repeat;
    }

    .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline.kind-refund::before {
        background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d4250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h10a5 5 0 010 10H9M3 10l4-4m-4 4l4 4'/%3E%3C/svg%3E");
    }

    .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline .fcc-lbl {
        flex: 1;
        min-width: 0;
    }

.fsr-fare.is-selected .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline::before {
    background-color: #ffe4d0;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c24e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4'/%3E%3C/svg%3E");
}

.fsr-fare.is-selected .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline.kind-refund::before {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c24e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h10a5 5 0 010 10H9M3 10l4-4m-4 4l4 4'/%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
    /* máy tính bảng: cột hành lý nằm hàng dưới ⇒ 2 ô cạnh nhau */
    .fsr-bag[b-4y4r91k4y6] {
        flex-direction: row;
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .fsr-bag[b-4y4r91k4y6] {
        gap: 8px;
    }

        .fsr-bag em[b-4y4r91k4y6],
        .fsr-bag .ico[b-4y4r91k4y6] {
            display: none;
        }
}

/* Thẻ đang mở: nút "Thu gọn" rộng hơn "Chọn" ⇒ bỏ " · N hạng vé" ở cuống (đầu khối hạng vé đã ghi số hạng) cho khỏi vỡ dòng. */
.fsr-fl.is-open .fsr-pr .per .fc[b-4y4r91k4y6] {
    display: none;
}

/* Thẻ đang mở: nút "Thu gọn" gọn lại và dòng "Cả 2 chiều từ …" không vỡ, để cuống vé vẫn 3 dòng gọn. */
.fsr-pick.is-open[b-4y4r91k4y6] {
    min-width: 0;
    padding: 0 10px;
    font-size: 12.5px;
}

.fsr-fl.is-open .fsr-pr .both[b-4y4r91k4y6] {
    white-space: nowrap;
    font-size: 10px;
}

/* ══ Thẻ hạng vé v4 — MỀM (08/11/2026, anh chê "thô"): bo 16px, tên hạng là viên tròn, mỗi dòng quyền lợi là viên nhạt
   bo 10px với icon tròn, nút Chọn dạng viên; bỏ vạch kẻ thẳng và dải vuông. Đang chọn: viên tên cam, dòng kem, icon cam. ══ */
.fsr-fare[b-4y4r91k4y6] {
    gap: 8px;
    padding: 12px 12px 12px;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(27, 34, 50, .04);
}

    .fsr-fare:hover[b-4y4r91k4y6] {
        border-color: #f2b285;
        box-shadow: 0 10px 22px -14px rgba(27, 34, 50, .3);
    }

    .fsr-fare.is-selected[b-4y4r91k4y6] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 1.5px var(--d-accent), 0 12px 24px -12px rgba(255, 107, 0, .55);
        background: #fffdfb;
    }

.fsr-fare-nm[b-4y4r91k4y6] {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

    .fsr-fare-nm span[b-4y4r91k4y6] {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 11px;
        border-radius: 999px;
        background: var(--d-surface-2);
        color: var(--d-ink);
        font-size: 12.5px;
        font-weight: 800;
        min-width: 0;
    }

    .fsr-fare-nm em[b-4y4r91k4y6] {
        height: 22px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 0 8px;
    }

.fsr-fare.is-selected .fsr-fare-nm[b-4y4r91k4y6] {
    background: transparent;
}

    .fsr-fare.is-selected .fsr-fare-nm span[b-4y4r91k4y6] {
        background: var(--d-accent);
        color: #fff;
    }

    .fsr-fare.is-selected .fsr-fare-nm em[b-4y4r91k4y6] {
        background: #e8f6ee;
        color: #14804a;
    }

.fsr-fare-pr[b-4y4r91k4y6] {
    padding: 0 2px;
}

    .fsr-fare-pr b[b-4y4r91k4y6] {
        font-size: 19px;
    }

.fsr-fare-rows[b-4y4r91k4y6] {
    gap: 4px;
    padding: 0;
}

    .fsr-fare-rows .row[b-4y4r91k4y6] {
        border: 0;
        background: #f6f7f9;
        border-radius: 10px;
        padding: 5px 9px 5px 6px;
        color: var(--d-ink-2);
    }

.fsr-bag .ico[b-4y4r91k4y6],
.fsr-fare-rows .ico[b-4y4r91k4y6] {
    border-radius: 50%;
}

.fsr-fare-rows .ico[b-4y4r91k4y6] {
    background: var(--d-surface);
}

.fsr-fare-cond[b-4y4r91k4y6]  .fcc-list {
    gap: 4px;
}

.fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline {
    border: 0;
    background: #f6f7f9;
    border-radius: 10px;
    padding: 5px 9px 5px 6px;
}

    .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline::before {
        border-radius: 50%;
        background-color: var(--d-surface);
    }

.fsr-fare.is-selected .fsr-fare-rows .row[b-4y4r91k4y6],
.fsr-fare.is-selected .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline {
    background: #fff4ec;
}

.fsr-fare.is-selected .fsr-fare-rows .ico[b-4y4r91k4y6],
.fsr-fare.is-selected .fsr-fare-cond[b-4y4r91k4y6]  .fcc-row-inline::before {
    background-color: #fff;
}

.fsr-fare-banner[b-4y4r91k4y6] {
    margin: 0;
    border-radius: 10px;
}

.fsr-fare-btn[b-4y4r91k4y6] {
    margin: 4px 0 0;
    height: 34px;
    border-radius: 999px;
    border-color: #dfe3ea;
    font-size: 12.5px;
}

.fsr-fare.is-selected .fsr-fare-btn[b-4y4r91k4y6] {
    box-shadow: 0 6px 14px -8px rgba(255, 107, 0, .7);
}

@media (max-width: 767px) {
    .fsr-fare[b-4y4r91k4y6] {
        padding: 10px;
        border-radius: 14px;
    }
}

/* Bỏ hai khuyết tròn ở hai đầu vạch đứt của cuống vé (08/11, anh báo lỗi): nền trang mỗi site mỗi khác nên khuyết
   hiện thành cục xám lồi lên. Cuống vé chỉ còn vạch đứt + nền kem. */
.fsr-stub[b-4y4r91k4y6]::before,
.fsr-stub[b-4y4r91k4y6]::after {
    display: none;
}

/* ══ Khuyết tròn cuống vé — KHOÉT THẬT bằng mask (08/11/2026) ══
   Bản cũ tô khuyết bằng màu nền trang đoán sẵn ⇒ lệch màu trên máy anh. Nay nền + viền thẻ chuyển xuống .fsr-fl-row và
   mask khoét hai lỗ tròn 7px đúng mép trái cuống (100% − bề rộng cuống) ⇒ nền phía sau tự lộ ra, màu gì cũng đúng.
   Mask cắt cả bóng đổ nên thẻ không còn bóng; đang mở thì khối hạng vé mang viền cam nối tiếp bên dưới. */
.fsr-fl[b-4y4r91k4y6] {
    background: transparent;
    border: 0;
    box-shadow: none;
}

    .fsr-fl:hover[b-4y4r91k4y6],
    .fsr-fl.is-open[b-4y4r91k4y6],
    .fsr-fl.is-open:hover[b-4y4r91k4y6] {
        background: transparent;
        box-shadow: none;
    }

.fsr-fl-row[b-4y4r91k4y6] {
    --fsr-notch-x: calc(100% - 248px);
    background: var(--d-surface);
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    -webkit-mask: radial-gradient(circle 7px at var(--fsr-notch-x) 0, transparent 98%, #000 100%),
                  radial-gradient(circle 7px at var(--fsr-notch-x) 100%, transparent 98%, #000 100%);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle 7px at var(--fsr-notch-x) 0, transparent 98%, #000 100%),
          radial-gradient(circle 7px at var(--fsr-notch-x) 100%, transparent 98%, #000 100%);
    mask-composite: intersect;
    transition: border-color .12s;
}

.fsr-fl:hover .fsr-fl-row[b-4y4r91k4y6] {
    border-color: #f2b285;
}

.fsr-fl.is-open .fsr-fl-row[b-4y4r91k4y6] {
    border-color: var(--d-accent);
    border-radius: 12px 12px 0 0;
}

.fsr-fl.is-open .fsr-stub[b-4y4r91k4y6] {
    border-radius: 0 11px 0 0;
}

.fsr-fares[b-4y4r91k4y6] {
    border: 1px solid var(--d-accent);
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

@media (max-width: 1199px) {
    .fsr-fl-row[b-4y4r91k4y6] {
        --fsr-notch-x: calc(100% - 222px);
    }
}

/* Máy tính bảng / điện thoại: cuống không chạy hết chiều cao thẻ ⇒ không khoét */
@media (max-width: 1023px) {
    .fsr-fl-row[b-4y4r91k4y6] {
        -webkit-mask: none;
        mask: none;
    }
}
/* _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/OfflinePaymentDetails.razor.rz.scp.css */
/* OfflinePaymentDetails — token tự chứa (dùng được trong fps-* lẫn pms-*). Không viền màu một cạnh. */
.opd-root[b-te2ascwi34] {
    --o-line: #eceef2;
    --o-surface-2: #f7f8fa;
    --o-ink: #121212;
    --o-ink-2: #3d4250;
    --o-ink-3: #7b8190;
    --o-accent: #ff6b00;
    --o-accent-soft: #fff2e8;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--o-ink);
    font-size: 13px;
}

.opd-rows[b-te2ascwi34] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.opd-row[b-te2ascwi34] {
    display: grid;
    grid-template-columns: minmax(110px, 34%) 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

.opd-lbl[b-te2ascwi34] {
    color: var(--o-ink-3);
    font-size: 12px;
}

.opd-val[b-te2ascwi34] {
    font-weight: 500;
    color: var(--o-ink-2);
    overflow-wrap: anywhere;
}

    .opd-val.mono[b-te2ascwi34] {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: 0.02em;
        color: var(--o-ink);
    }

    .opd-val.strong[b-te2ascwi34] {
        font-weight: 700;
        color: var(--o-ink);
    }

.opd-copy[b-te2ascwi34] {
    border: 1px solid var(--o-line);
    background: #fff;
    color: var(--o-ink-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

    .opd-copy:hover[b-te2ascwi34] { border-color: var(--o-accent); color: var(--o-accent); }
    .opd-copy.is-done[b-te2ascwi34] { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }

/* Chọn ngân hàng: viền đều 4 cạnh, chọn ⇒ viền cam + nền cam nhạt + chấm radio. */
.opd-pick[b-te2ascwi34] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opd-pick-lbl[b-te2ascwi34] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--o-ink-2);
}

.opd-pick-grid[b-te2ascwi34] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.opd-pick-opt[b-te2ascwi34] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--o-line);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    color: var(--o-ink);
    transition: border-color .15s, background-color .15s;
}

    .opd-pick-opt:hover[b-te2ascwi34] { border-color: #ffb27a; }
    .opd-pick-opt:focus-visible[b-te2ascwi34] { outline: 2px solid var(--o-accent); outline-offset: 2px; }
    .opd-pick-opt.is-on[b-te2ascwi34] { border-color: var(--o-accent); background: var(--o-accent-soft); }

.opd-pick-radio[b-te2ascwi34] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #c4c8d0;
    background: #fff;
    flex-shrink: 0;
    position: relative;
}

.opd-pick-opt.is-on .opd-pick-radio[b-te2ascwi34] { border-color: var(--o-accent); }

    .opd-pick-opt.is-on .opd-pick-radio[b-te2ascwi34]::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--o-accent);
    }

.opd-pick-txt[b-te2ascwi34] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.opd-pick-name[b-te2ascwi34] {
    font-weight: 700;
    font-size: 13px;
}

.opd-pick-sub[b-te2ascwi34] {
    font-size: 11.5px;
    color: var(--o-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opd-pick-hint[b-te2ascwi34] {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--o-line);
    border-radius: 10px;
    color: var(--o-ink-3);
    font-size: 12.5px;
    text-align: center;
}

.opd-accounts[b-te2ascwi34] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.opd-account[b-te2ascwi34] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--o-surface-2);
    border: 1px solid var(--o-line);
    border-radius: 10px;
}

.opd-account-main[b-te2ascwi34] {
    flex: 1;
    min-width: 0;
}

.opd-bank[b-te2ascwi34] {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 13px;
}

.opd-qr[b-te2ascwi34] {
    width: 104px;
    height: 104px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--o-line);
    flex-shrink: 0;
}

.opd-text[b-te2ascwi34] {
    margin: 0;
    color: var(--o-ink-2);
    white-space: pre-line;
    line-height: 1.5;
}

.opd-notice[b-te2ascwi34] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--o-accent-soft);
    color: #9a3f00;
    font-size: 12.5px;
    line-height: 1.5;
}

    .opd-notice svg[b-te2ascwi34] { flex-shrink: 0; margin-top: 2px; }

@media (max-width: 560px) {
    .opd-row[b-te2ascwi34] { grid-template-columns: 1fr auto; }
    .opd-lbl[b-te2ascwi34] { grid-column: 1 / -1; }
    .opd-account[b-te2ascwi34] { flex-direction: column; }
    .opd-pick-grid[b-te2ascwi34] { grid-template-columns: 1fr; }
    .opd-qr[b-te2ascwi34] { align-self: center; width: 140px; height: 140px; }
}
/* _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 .ico-fb.bank[b-45jz0wvcr9] { background: #0f766e; }
    .pms-method .ico-fb.cash[b-45jz0wvcr9] { background: #b45309; }

.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);
}

/* ─── Dòng báo "vừa huỷ ở cổng" (PaymentGatewayReturn) ─── */
.pms-cancelled[b-45jz0wvcr9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--d-accent-soft);
    border: 1px solid #ffd9bd;
    border-radius: var(--d-r);
    color: var(--d-ink);
}

    .pms-cancelled > svg[b-45jz0wvcr9] {
        flex: none;
        margin-top: 1px;
        color: var(--d-accent);
    }

.pms-cancelled-text[b-45jz0wvcr9] {
    flex: 1;
    min-width: 0;
}

    .pms-cancelled-text .t[b-45jz0wvcr9] {
        margin: 0;
        font-size: 13.5px;
        font-weight: 600;
    }

    .pms-cancelled-text .d[b-45jz0wvcr9] {
        margin: 2px 0 0;
        font-size: 12.5px;
        color: var(--d-ink-3);
        line-height: 1.45;
    }

.pms-cancelled-x[b-45jz0wvcr9] {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--d-ink-3);
    cursor: pointer;
}

    .pms-cancelled-x:hover[b-45jz0wvcr9] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--d-ink);
    }


/* ─── Ghi chú dưới tên nhóm (CategoryNote) ─── */
.pms-cat-lbl.has-note[b-45jz0wvcr9] {
    margin-bottom: 3px;
}

.pms-cat-note[b-45jz0wvcr9] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
}

    .pms-cat-note svg[b-45jz0wvcr9] { flex-shrink: 0; margin-top: 2px; }
    .pms-cat-note.is-now[b-45jz0wvcr9] { color: #047857; }
    .pms-cat-note.is-later[b-45jz0wvcr9] { color: #9a3f00; }
/* _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;
}