/* /src/Features/Account/Profile.razor.rz.scp.css */
/* Mục menu đang xem — nền cam nhạt, chữ cam đậm (hướng 5). */
.vtg-menu-active[b-i5a4pd7byk] {
    background: var(--vtg-brand-soft);
}
/* /src/Features/Admin/AdminBannerForm.razor.rz.scp.css */
.admbf__grid[b-83bx7ukrto] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: start;
}

/* Khung xem trước sang cột phải và DÍNH khi cuộn: banner là sản phẩm để NHÌN, sửa chữ mà
   phải cuộn ngược lên mới thấy ảnh với chữ chồng lên nhau thì chỉ là mò.
   Dưới 1200px thì xếp dọc — cột phải hẹp hơn 320px là khung 16:7 bé đến vô dụng. */
@media (min-width: 1200px) {
    .admbf__grid[b-83bx7ukrto] { grid-template-columns: minmax(0, 1fr) 372px; }
    .admbf__previewPanel[b-83bx7ukrto] { position: sticky; top: 78px; }
}

.admbf__main[b-83bx7ukrto] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.admbf__side[b-83bx7ukrto] { min-width: 0; }

.admbf__body[b-83bx7ukrto] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.admbf__crumb[b-83bx7ukrto] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ── Xem trước ────────────────────────────────────────────────────────── */

.admbf__preview[b-83bx7ukrto] {
    position: relative;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    overflow: hidden;
    background: var(--vtg-bg);
    aspect-ratio: 16 / 7;
}

.admbf__preview img[b-83bx7ukrto] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admbf__preview__ph[b-83bx7ukrto] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-faint);
}

/* Lớp tối chỉ ở nửa dưới: chữ trắng đè trực tiếp lên ảnh sáng là không đọc được. */
.admbf__preview__scrim[b-83bx7ukrto] {
    position: absolute;
    inset: 30% 0 0 0;
    background: linear-gradient(180deg, rgba(15,23,41,0) 0%, rgba(15,23,41,.72) 100%);
    pointer-events: none;
}

.admbf__preview__text[b-83bx7ukrto] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 13px;
}

.admbf__preview__badge[b-83bx7ukrto] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding-inline: 8px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.admbf__preview__title[b-83bx7ukrto] {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.admbf__preview__sub[b-83bx7ukrto] {
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.admbf__places[b-83bx7ukrto] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 3px;
    border-top: 1px solid var(--vtg-border);
    margin-top: 2px;
}

.admbf__placesTitle[b-83bx7ukrto] {
    width: 100%;
    padding-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
}

/* ── Ô chọn ảnh ───────────────────────────────────────────────────────── */

.admbf__drop[b-83bx7ukrto] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border: 1px dashed var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
}

.admbf__drop > span[b-83bx7ukrto] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--vtg-faint);
}

/* InputFile là component, thẻ input nó sinh ra không mang scope nên phải ::deep. */
.admbf__drop[b-83bx7ukrto]  input[type="file"] {
    font-size: 13px;
    color: var(--vtg-ink-2);
    max-width: 100%;
}

.admbf__imgline[b-83bx7ukrto] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admbf__code[b-83bx7ukrto] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--vtg-bg);
    color: var(--vtg-ink-2);
}

/* ── Nhóm trường ──────────────────────────────────────────────────────── */

.admbf__row2[b-83bx7ukrto] {
    display: grid;
    gap: 13px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 640px) {
    .admbf__row2[b-83bx7ukrto] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.admbf__checks[b-83bx7ukrto] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admbf__check[b-83bx7ukrto] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

/* Ô tích nằm cạnh một ô nhập có nhãn: đẩy xuống cho thẳng hàng với ô nhập. */
.admbf__check--pad[b-83bx7ukrto] { padding-top: 24px; }

.admbf__check input[b-83bx7ukrto] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.admbf__check > span[b-83bx7ukrto] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.admbf__check em[b-83bx7ukrto] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

.admbf__orderNote[b-83bx7ukrto] { margin-top: 0; }

/* ── Thanh nút cuối form ──────────────────────────────────────────────── */

/* Nút Lưu có sẵn ở đầu trang, nhưng form dài ba khối — cuộn tới cuối rồi phải cuộn ngược
   lên mới lưu được thì thà đặt thêm một bộ ở đây. */
.admbf__foot[b-83bx7ukrto] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.admbf__foot__main[b-83bx7ukrto] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Xoá đứng TÁCH hẳn sang mép kia: nó không hoàn tác được, để cạnh nút Lưu là mời bấm nhầm. */
.admbf__foot > .vtga-link--bad[b-83bx7ukrto] { margin-inline-start: auto; }

/* ── Khung chờ ────────────────────────────────────────────────────────── */

.admbf__loading[b-83bx7ukrto] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admbf__skel[b-83bx7ukrto] {
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admbf-shimmer-b-83bx7ukrto 1.3s ease-in-out infinite;
}

@keyframes admbf-shimmer-b-83bx7ukrto {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Features/Admin/AdminBanners.razor.rz.scp.css */
/* Thanh đếm nằm GIỮA khối lọc và bảng, nên cần cả vạch trên: .vtga-panel__head chỉ có
   vạch dưới, thiếu vạch trên thì bộ lọc và thanh đếm dính thành một mảng. */
.admbn__bar[b-07myth0l3k] { border-top: 1px solid var(--vtg-border); }

.admbn__count[b-07myth0l3k] {
    margin-inline-start: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-muted);
}

.admbn__filterNote[b-07myth0l3k] {
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--vtg-border);
    background: var(--vtg-bg);
    font-size: 12px;
    line-height: 1.55;
    color: var(--vtg-muted);
}

.admbn__emptyCta[b-07myth0l3k] { margin-top: 12px; }

/* ── Bảng ─────────────────────────────────────────────────────────────── */

/* Năm cột, trong đó cột Banner có cả ảnh lẫn ba dòng chữ — dưới ngưỡng này là chữ dồn cục,
   thà cho cuộn ngang. */
.admbn__table[b-07myth0l3k] { min-width: 820px; }

.admbn__thOrder[b-07myth0l3k] { width: 86px; }

.admbn__rowOff td[b-07myth0l3k] { opacity: .58; }

.admbn__order[b-07myth0l3k] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admbn__order__pill[b-07myth0l3k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding-inline: 6px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vtg-ink-2);
}

.admbn__order__nav[b-07myth0l3k] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admbn__order__btn[b-07myth0l3k] {
    width: 22px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--vtg-border);
    border-radius: 5px;
    background: var(--vtg-surface);
    font-size: 11px;
    line-height: 1;
    color: var(--vtg-ink-2);
    cursor: pointer;
}

.admbn__order__btn:hover:not(:disabled)[b-07myth0l3k] {
    border-color: var(--vtg-brand);
    color: var(--vtg-brand-strong);
}

.admbn__order__btn:disabled[b-07myth0l3k] {
    color: var(--vtg-faint);
    cursor: not-allowed;
}

.admbn__cell[b-07myth0l3k] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.admbn__thumb[b-07myth0l3k] {
    flex: 0 0 auto;
    width: 84px;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--vtg-bg);
    border: 1px solid var(--vtg-border);
}

.admbn__thumb img[b-07myth0l3k] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admbn__thumb__empty[b-07myth0l3k] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--vtg-faint);
}

.admbn__cell__text[b-07myth0l3k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

/* Tên banner là ĐƯỜNG vào trang sửa — giữ nguyên dáng chữ chính của bảng, chỉ gạch chân
   khi rê chuột, để nó không trông như một liên kết lạc giữa ô. */
.admbn__name[b-07myth0l3k] {
    color: inherit;
    text-decoration: none;
}

.admbn__name:hover[b-07myth0l3k] {
    color: var(--vtg-brand-strong);
    text-decoration: underline;
}

.admbn__badge[b-07myth0l3k] {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding-inline: 7px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

.admbn__sub[b-07myth0l3k] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--vtg-faint);
    max-width: 380px;
}

.admbn__target[b-07myth0l3k] {
    font-size: 11.5px;
    color: var(--vtg-brand-strong);
    text-decoration: none;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admbn__target:hover[b-07myth0l3k] { text-decoration: underline; }

.admbn__places[b-07myth0l3k] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 190px;
}

.admbn__sched[b-07myth0l3k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.admbn__sched__row[b-07myth0l3k] {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--vtg-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Khung chờ ────────────────────────────────────────────────────────── */

.admbn__loading[b-07myth0l3k] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admbn__skel[b-07myth0l3k] {
    height: 62px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admbn-shimmer-b-07myth0l3k 1.3s ease-in-out infinite;
}

@keyframes admbn-shimmer-b-07myth0l3k {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Features/Admin/AdminBookings.razor.rz.scp.css */
.admb__table[b-oai5bzkith] { min-width: 980px; }

.admb__addon[b-oai5bzkith] { margin-inline-start: 7px; }

.admb__who[b-oai5bzkith],
.admb__paid[b-oai5bzkith] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admb__who > span:first-child[b-oai5bzkith] {
    font-weight: 600;
    color: var(--vtg-ink);
}

.admb__mail[b-oai5bzkith],
.admb__method[b-oai5bzkith] {
    font-size: 12px;
    color: var(--vtg-faint);
    word-break: break-all;
}

.admb__amount[b-oai5bzkith] {
    font-weight: 700;
    color: var(--vtg-ink);
}

.admb__total[b-oai5bzkith] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--vtg-faint);
    margin-top: 2px;
}

.admb__unpaid[b-oai5bzkith] {
    font-size: 12.5px;
    color: var(--vtg-muted);
}

.admb__foot[b-oai5bzkith] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vtg-muted);
    margin-top: 14px;
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admb__loading[b-oai5bzkith] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admb__skel[b-oai5bzkith] {
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admb-shimmer-b-oai5bzkith 1.3s ease-in-out infinite;
}

@keyframes admb-shimmer-b-oai5bzkith {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Features/Admin/AdminHome.razor.rz.scp.css */
.admh__group[b-rtqxi83b9f] { margin-bottom: 26px; }

.admh__groupTitle[b-rtqxi83b9f] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vtg-muted);
    margin-bottom: 9px;
}

.admh__grid[b-rtqxi83b9f] {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .admh__grid[b-rtqxi83b9f] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .admh__grid[b-rtqxi83b9f] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.admh__card[b-rtqxi83b9f] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
    text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

/* Chỉ thẻ ĐANG mở được (là <a>) mới có phản hồi khi trỏ vào — thẻ "sắp có"
   nhấc lên khi hover là mời bấm vào chỗ không bấm được. */
a.admh__card:hover[b-rtqxi83b9f] {
    border-color: var(--vtg-brand);
    transform: translateY(-1px);
    box-shadow: var(--vtg-shadow-pop);
}

.admh__card.is-soon[b-rtqxi83b9f] {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}

.admh__icon[b-rtqxi83b9f] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);

    /* Kích thước icon truyền qua biến — VtgAdminIcon là component nên CSS scoped
       ở đây không với tới <svg> của nó; xem chú thích trong VtgAdminIcon.razor.css. */
    --vtgai-size: 20px;
}

.admh__card.is-soon .admh__icon[b-rtqxi83b9f] {
    background: var(--vtg-bg);
    color: var(--vtg-faint);
}

.admh__body[b-rtqxi83b9f] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admh__label[b-rtqxi83b9f] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admh__card.is-soon .admh__label[b-rtqxi83b9f] { color: var(--vtg-muted); }

.admh__soon[b-rtqxi83b9f] { font-style: normal; }

.admh__desc[b-rtqxi83b9f] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vtg-muted);
}

.admh__go[b-rtqxi83b9f] {
    flex: 0 0 auto;
    align-self: center;
    font-size: 17px;
    color: var(--vtg-faint);
    transition: color .15s, transform .15s;
}

a.admh__card:hover .admh__go[b-rtqxi83b9f] {
    color: var(--vtg-brand);
    transform: translateX(2px);
}

.admh__foot[b-rtqxi83b9f] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vtg-muted);
    border-top: 1px solid var(--vtg-border);
    padding-top: 14px;
}

.admh__blocker[b-rtqxi83b9f] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--vtg-muted);
    margin-top: 5px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #FFF7E8;
}

.admh__foot code[b-rtqxi83b9f] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
}
/* /src/Features/Admin/AdminNews.razor.rz.scp.css */
/* Danh sách chỉ ẩn đi khi mở form soạn bài (không tháo khỏi DOM) — xem chú thích
   trong AdminNews.razor. */
.admn__list.is-hidden[b-waf8np9igl] { display: none; }

/* ── Bảng ────────────────────────────────────────────────────────────── */

.admn__table[b-waf8np9igl] { min-width: 940px; }

.admn__title[b-waf8np9igl] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.admn__title > span[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admn__slug[b-waf8np9igl] {
    font-size: 12px;
    color: var(--vtg-faint);
    word-break: break-all;
}

.admn__star[b-waf8np9igl] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: -1px;
    border: 0;
    border-radius: 7px;
    background: none;
    font-size: 16px;
    line-height: 1;
    color: var(--vtg-faint);
    cursor: pointer;
}

.admn__star:hover:not(:disabled)[b-waf8np9igl] { background: var(--vtg-brand-soft); }
.admn__star.is-on[b-waf8np9igl] { color: var(--vtg-star); }
.admn__star:disabled[b-waf8np9igl] { opacity: .5; cursor: not-allowed; }

/* Thước SEO — ba vạch, sáng lên từng vạch theo thứ đã điền. */
.admn__seo[b-waf8np9igl] {
    display: inline-flex;
    gap: 3px;
    cursor: help;
}

.admn__seo i[b-waf8np9igl] {
    display: block;
    width: 16px;
    height: 5px;
    border-radius: 3px;
    background: var(--vtg-border);
}

.admn__seo i.is-on[b-waf8np9igl] { background: var(--vtg-ok); }

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admn__loading[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admn__skel[b-waf8np9igl] {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admn-shimmer-b-waf8np9igl 1.3s ease-in-out infinite;
}

@keyframes admn-shimmer-b-waf8np9igl {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Form soạn bài ───────────────────────────────────────────────────── */

.admn__editor[b-waf8np9igl] { overflow: hidden; }

/* Thanh đầu form dính lại khi cuộn: bài dài thì nút Lưu trôi khỏi màn hình,
   phải cuộn ngược lên đầu mới lưu được. */
.admn__editor > .vtga-panel__head[b-waf8np9igl] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--vtg-surface);
}

.admn__tabs[b-waf8np9igl] {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
}

.admn__tab[b-waf8np9igl] {
    height: 30px;
    padding-inline: 13px;
    border: 0;
    border-radius: var(--vtg-r-pill);
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: var(--vtg-muted);
    cursor: pointer;
}

.admn__tab.is-on[b-waf8np9igl] {
    background: var(--vtg-surface);
    color: var(--vtg-ink);
    box-shadow: var(--vtg-shadow-card);
}

.admn__headEnd[b-waf8np9igl] {
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Hai khối tab LUÔN được dựng; đổi tab chỉ đổi display. Bắt buộc như vậy:
   ArticleEditor là instance JS, tháo khỏi DOM là mất nội dung đang gõ. */
.admn__pane.is-hidden[b-waf8np9igl] { display: none; }

.admn__grid[b-waf8np9igl] {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
    .admn__grid[b-waf8np9igl] { grid-template-columns: minmax(0, 1fr) 300px; }
}

.admn__col[b-waf8np9igl],
.admn__side[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.admn__editorHost[b-waf8np9igl] {
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    overflow: hidden;
}

.admn__editorHost.is-invalid[b-waf8np9igl] { border-color: var(--vtg-bad); }

/* Trình soạn bài tự nạp CSS riêng (/css/article-editor.css) và KHÔNG mang thuộc
   tính scope của trang này — mọi luật với xuống nó phải qua ::deep. */
.admn__editorHost[b-waf8np9igl]  .aed-root {
    border: 0;
    border-radius: 0;
}

.admn__editorHost[b-waf8np9igl]  .aed-host { min-height: 320px; }

/* ── Danh mục: hàng nhãn + khối thêm nhanh ───────────────────────────── */

.admn__lblrow[b-waf8np9igl] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.admn__lblrow .vtga-lbl[b-waf8np9igl] { margin-bottom: 6px; }

.admn__lblact[b-waf8np9igl] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 0 auto;
}

.admn__lblact .vtga-link[b-waf8np9igl] { font-size: 12.5px; }

.admn__quick[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px dashed var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
}

.admn__quick .vtg-btn[b-waf8np9igl] { align-self: flex-start; }

.admn__quick code[b-waf8np9igl] {
    font-size: 11.5px;
    word-break: break-all;
}

/* ── Ảnh ─────────────────────────────────────────────────────────────── */

.admn__cover[b-waf8np9igl] {
    position: relative;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    overflow: hidden;
    background: var(--vtg-bg);
}

.admn__cover img[b-waf8np9igl] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.admn__coverX[b-waf8np9igl] {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(15,23,41,.62);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.admn__coverX:hover[b-waf8np9igl] { background: rgba(15,23,41,.82); }

.admn__drop[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border: 1px dashed var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
}

.admn__drop > span[b-waf8np9igl] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--vtg-faint);
}

/* InputFile là component → thẻ <input> nó sinh ra không mang scope, phải ::deep. */
.admn__drop[b-waf8np9igl]  input[type="file"] {
    font-size: 13px;
    color: var(--vtg-ink-2);
    max-width: 100%;
}

/* ── Ô tích ──────────────────────────────────────────────────────────── */

.admn__check[b-waf8np9igl] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.admn__check input[b-waf8np9igl] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.admn__check > span[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.admn__check em[b-waf8np9igl] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

.admn__flags[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 12px;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
}

/* ── Đếm ký tự + xem trước Google ────────────────────────────────────── */

.admn__count[b-waf8np9igl] {
    float: inline-end;
    font-weight: 500;
    color: var(--vtg-faint);
}

.admn__count.is-over[b-waf8np9igl] { color: var(--vtg-bad); font-weight: 700; }

.admn__serp[b-waf8np9igl] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-surface);
}

.admn__serpUrl[b-waf8np9igl] {
    font-size: 12px;
    color: #4A6B3F;
    word-break: break-all;
}

.admn__serpTitle[b-waf8np9igl] {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1A0DAB;

    /* Google cắt tiêu đề dài ~2 dòng — xem trước phải cắt giống, không thì
       người viết tưởng cả tiêu đề 90 ký tự đều hiện. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admn__serpDesc[b-waf8np9igl] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vtg-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /src/Features/Admin/AdminNewsCategories.razor.rz.scp.css */
.admc__grid[b-rv8g61jkp1] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1100px) {
    /* Form bên trái cố định bề rộng, bảng chiếm phần còn lại. Form đứng yên khi
       cuộn bảng dài — sửa mục thứ 20 mà form nằm trên cùng thì phải cuộn ngược lên. */
    .admc__grid[b-rv8g61jkp1] { grid-template-columns: 340px minmax(0, 1fr); }
    .admc__form[b-rv8g61jkp1] { position: sticky; top: 78px; }
}

.admc__cancel[b-rv8g61jkp1] { margin-inline-start: auto; }

.admc__formBody[b-rv8g61jkp1] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.admc__row2[b-rv8g61jkp1] {
    display: grid;
    gap: 13px;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: start;
}

.admc__check[b-rv8g61jkp1] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    padding-top: 24px;   /* thẳng hàng với ô nhập bên cạnh (đã trừ chiều cao nhãn) */
}

.admc__check input[b-rv8g61jkp1] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.admc__check > span[b-rv8g61jkp1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.admc__check em[b-rv8g61jkp1] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

.admc__actions[b-rv8g61jkp1] {
    display: flex;
    gap: 8px;
    padding-top: 3px;
}

/* ── Bảng ────────────────────────────────────────────────────────────── */

.admc__child > td:first-child[b-rv8g61jkp1] { padding-inline-start: 20px; }

.admc__indent[b-rv8g61jkp1] {
    color: var(--vtg-faint);
    margin-inline-end: 5px;
    font-weight: 400;
}

.admc__desc[b-rv8g61jkp1] {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--vtg-faint);
    margin-top: 2px;
    max-width: 380px;
}

.admc__code[b-rv8g61jkp1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--vtg-bg);
    color: var(--vtg-ink-2);
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admc__loading[b-rv8g61jkp1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admc__skel[b-rv8g61jkp1] {
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admc-shimmer-b-rv8g61jkp1 1.3s ease-in-out infinite;
}

@keyframes admc-shimmer-b-rv8g61jkp1 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Danh mục chưa có bài: số 0 mờ đi để mắt bỏ qua, còn số khác 0 là đường dẫn bấm được. */
.admc__zero[b-rv8g61jkp1] { color: var(--vtg-faint); }
/* /src/Features/Admin/AdminTourCategories.razor.rz.scp.css */
.atc__check[b-2gh9zrr7mk] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    padding-top: 24px;   /* thẳng hàng với ô nhập bên cạnh (đã trừ chiều cao nhãn) */
}

.atc__check--inline[b-2gh9zrr7mk] { padding-top: 0; align-items: center; }

.atc__check input[b-2gh9zrr7mk] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.atc__check > span[b-2gh9zrr7mk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.atc__check em[b-2gh9zrr7mk] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

/* Nút thêm tour đứng đầu cột thao tác, tách nhẹ khỏi Sửa/Xoá. */
.atc__add[b-2gh9zrr7mk] { margin-inline-end: 2px; }

/* ── Bảng ────────────────────────────────────────────────────────────── */

/* Cột STT hẹp và canh phải: nó chỉ để đọc số dòng, không được chiếm chỗ của tên loại. */
/* Nút trong ô trống canh giữa, cách chữ gợi ý một nhịp. */
.atc__emptyBtn[b-2gh9zrr7mk] { margin-top: 14px; }

.atc__stt[b-2gh9zrr7mk] {
    width: 48px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--vtg-faint);
}

.atc__child > td:first-child + td[b-2gh9zrr7mk] { padding-inline-start: 20px; }

.atc__indent[b-2gh9zrr7mk] {
    color: var(--vtg-faint);
    margin-inline-end: 5px;
    font-weight: 400;
}

.atc__desc[b-2gh9zrr7mk] {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--vtg-faint);
    margin-top: 2px;
    max-width: 380px;
}

.atc__code[b-2gh9zrr7mk] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--vtg-bg);
    color: var(--vtg-ink-2);
}

/* Loại chưa có tour: số 0 mờ đi để mắt bỏ qua, còn số khác 0 là đường dẫn bấm được. */
.atc__zero[b-2gh9zrr7mk] { color: var(--vtg-faint); }

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.atc__loading[b-2gh9zrr7mk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.atc__skel[b-2gh9zrr7mk] {
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: atc-shimmer-b-2gh9zrr7mk 1.3s ease-in-out infinite;
}

/* Tên keyframes KHÔNG được Blazor gắn scope, nên phải đặt riêng cho màn này. */
@keyframes atc-shimmer-b-2gh9zrr7mk {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Modal thêm/sửa loại tour ────────────────────────────────────────── */

.atc__ovl[b-2gh9zrr7mk] {
    position: fixed;
    inset: 0;
    z-index: 1000; /* thang z ở app.css: header 900 · modal 1000 · popover 1100 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 16px;
    background: rgba(16, 24, 40, .45);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.atc__box[b-2gh9zrr7mk] {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    background: var(--vtg-surface);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-widget);
}

.atc__boxHead[b-2gh9zrr7mk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--vtg-border);
}

.atc__boxHeadText[b-2gh9zrr7mk] { min-width: 0; }

.atc__boxTitle[b-2gh9zrr7mk] {
    margin: 0;
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--vtg-ink);
}

.atc__boxSub[b-2gh9zrr7mk] {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--vtg-muted);
}

.atc__x[b-2gh9zrr7mk] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 9px;
    color: var(--vtg-muted);
    cursor: pointer;
}

.atc__x:hover:not(:disabled)[b-2gh9zrr7mk] { background: var(--vtg-bg); color: var(--vtg-ink); }
.atc__x:disabled[b-2gh9zrr7mk] { opacity: .45; cursor: not-allowed; }

.atc__boxBody[b-2gh9zrr7mk] {
    padding: 16px 18px;
    overflow-y: auto;
}

/* Lỗi lưu hiện NGAY TRONG modal — dải lỗi ở đầu trang lúc này nằm sau lớp phủ. */
.atc__boxNote[b-2gh9zrr7mk] { margin-bottom: 14px; }

.atc__boxFoot[b-2gh9zrr7mk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--vtg-border);
}

.atc__fields[b-2gh9zrr7mk] {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.atc__span2[b-2gh9zrr7mk] { grid-column: 1 / -1; }

@media (max-width: 560px) {
    /* Hai cột trên màn hẹp thì ô chọn "Loại cha" còn chưa đủ chỗ cho một tên loại. */
    .atc__fields[b-2gh9zrr7mk] { grid-template-columns: minmax(0, 1fr); }
    .atc__check[b-2gh9zrr7mk] { padding-top: 0; }
}

/* ── Thẻ ─────────────────────────────────────────────────────────────── */

.atc__tagsPanel[b-2gh9zrr7mk] { margin-top: 16px; }

.atc__panelHint[b-2gh9zrr7mk] {
    margin-inline-start: auto;
    font-size: 12px;
    line-height: 1.45;
    color: var(--vtg-muted);
    max-width: 460px;
    text-align: end;
}

.atc__tagsBody[b-2gh9zrr7mk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.atc__tagForm[b-2gh9zrr7mk] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* Ô tên co giãn nhưng có trần: kéo hết bề ngang màn 1600px thì ô nhập một từ
   dài bằng cả bảng, trông như lỗi bố cục. */
.atc__tagField[b-2gh9zrr7mk] {
    flex: 1 1 220px;
    max-width: 360px;
}

.atc__tagEmpty[b-2gh9zrr7mk] {
    margin: 0;
    font-size: 13px;
    color: var(--vtg-muted);
}

.atc__tags[b-2gh9zrr7mk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.atc__tag[b-2gh9zrr7mk] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--vtg-border);
    border-radius: 999px;
    background: var(--vtg-surface, #fff);
    overflow: hidden;
}

.atc__tag.is-off[b-2gh9zrr7mk] { opacity: .55; }

.atc__tag.is-editing[b-2gh9zrr7mk] {
    border-color: var(--vtg-brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--vtg-brand) 18%, transparent);
}

.atc__tagName[b-2gh9zrr7mk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    padding: 6px 4px 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--vtg-ink);
    cursor: pointer;
}

.atc__tagName:hover:not(:disabled)[b-2gh9zrr7mk] { color: var(--vtg-brand); }

.atc__tagCount[b-2gh9zrr7mk] {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--vtg-bg);
    color: var(--vtg-muted);
}

.atc__tagX[b-2gh9zrr7mk] {
    border: 0;
    border-inline-start: 1px solid var(--vtg-border);
    background: none;
    padding: 0 10px;
    font-size: 15px;
    line-height: 1;
    color: var(--vtg-faint);
    cursor: pointer;
}

.atc__tagX:hover:not(:disabled)[b-2gh9zrr7mk] {
    background: #FEE2E2;
    color: #B91C1C;
}

.atc__tagName:disabled[b-2gh9zrr7mk],
.atc__tagX:disabled[b-2gh9zrr7mk] { cursor: default; }

@media (max-width: 720px) {
    /* Câu gợi ý canh phải bị ép thành cột chữ hẹp cạnh tiêu đề panel — xuống dòng riêng. */
    .atc__panelHint[b-2gh9zrr7mk] {
        margin-inline-start: 0;
        text-align: start;
        max-width: none;
    }
}
/* /src/Features/Admin/AdminTourForm.razor.rz.scp.css */
/* Khu quản trị Tour — form tạo/sửa. Prefix admf__ để không đụng admt__ của màn danh sách.
   Chỉ dùng token --vtg-* và class .vtga-* dùng chung; không thêm màu lạ. */

.admf__crumb[b-oyyy4fvzgx] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* ── Thanh tab ───────────────────────────────────────────────────────── */

.admf__tabs[b-oyyy4fvzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    margin-bottom: 14px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
}

.admf__tab[b-oyyy4fvzgx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding-inline: 14px;
    border: 0;
    border-radius: var(--vtg-r-pill);
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    color: var(--vtg-muted);
    cursor: pointer;
}

.admf__tab.is-on[b-oyyy4fvzgx] {
    background: var(--vtg-surface);
    color: var(--vtg-ink);
    box-shadow: var(--vtg-shadow-card);
}

/* Ba tab sau khoá cho tới khi tour có id thật. Mờ đi kèm tooltip nói lý do, chứ không
   giấu mất: giấu thì người dùng tưởng khu quản trị không có mấy phần đó. */
.admf__tab:disabled[b-oyyy4fvzgx] {
    opacity: .45;
    cursor: not-allowed;
}

.admf__tabN[b-oyyy4fvzgx] {
    min-width: 20px;
    height: 18px;
    padding-inline: 6px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-border);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--vtg-ink-2);
}

.admf__tab.is-on .admf__tabN[b-oyyy4fvzgx] {
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
}

/* ── Bố cục form ─────────────────────────────────────────────────────── */

.admf__grid[b-oyyy4fvzgx] {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1100px) {
    .admf__grid[b-oyyy4fvzgx] { grid-template-columns: minmax(0, 1fr) 340px; }
}

.admf__col[b-oyyy4fvzgx],
.admf__side[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.admf__row2[b-oyyy4fvzgx],
.admf__row3[b-oyyy4fvzgx] {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 640px) {
    .admf__row2[b-oyyy4fvzgx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admf__row3[b-oyyy4fvzgx] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.admf__actions[b-oyyy4fvzgx] {
    display: flex;
    gap: 8px;
    padding-top: 3px;
}

.admf__headEnd[b-oyyy4fvzgx] {
    margin-inline-start: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admf__blockErr[b-oyyy4fvzgx] { margin-bottom: 12px; }

.admf__check[b-oyyy4fvzgx] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.admf__check input[b-oyyy4fvzgx] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.admf__check > span[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.admf__check em[b-oyyy4fvzgx] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

/* ── Thẻ tour ────────────────────────────────────────────────────────── */

.admf__tags[b-oyyy4fvzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admf__tag[b-oyyy4fvzgx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding-inline: 10px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-ink-2);
    cursor: pointer;
}

.admf__tag.is-on[b-oyyy4fvzgx] {
    border-color: var(--vtg-brand);
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
}

.admf__tag input[b-oyyy4fvzgx] {
    width: 14px;
    height: 14px;
    accent-color: var(--vtg-brand);
}

/* ── Ảnh đại diện ────────────────────────────────────────────────────── */

.admf__cover[b-oyyy4fvzgx] {
    position: relative;
    border-radius: var(--vtg-r-input);
    overflow: hidden;
    background: var(--vtg-bg);
}

.admf__cover img[b-oyyy4fvzgx] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.admf__coverX[b-oyyy4fvzgx] {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, .62);
    font-size: 16px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.admf__coverX:hover[b-oyyy4fvzgx] { background: rgba(17, 24, 39, .82); }

.admf__drop[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border: 1px dashed var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
    font-size: 12.5px;
    color: var(--vtg-muted);
}

/* ── Tab lịch khởi hành ──────────────────────────────────────────────── */

.admf__two[b-oyyy4fvzgx] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1180px) {
    /* Form bên trái dính lại khi cuộn bảng dài: sửa đợt thứ 15 mà form nằm tít trên đầu
       thì phải cuộn ngược lên mới bấm được nút Lưu. */
    .admf__two[b-oyyy4fvzgx] { grid-template-columns: 360px minmax(0, 1fr); }
    .admf__schedForm[b-oyyy4fvzgx] { position: sticky; top: 78px; }
}

.admf__schedBody[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admf__schedTable[b-oyyy4fvzgx] { min-width: 760px; }

/* Màu dòng đặt trên td, KHÔNG trên tr: nền của tr bị nền ô đè mất ở đa số trình duyệt. */
.admf__off > td[b-oyyy4fvzgx] {
    background: var(--vtg-bg);
    color: var(--vtg-muted);
}

.admf__cell2[b-oyyy4fvzgx] {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--vtg-faint);
    margin-top: 2px;
}

/* ── Tab hành trình ──────────────────────────────────────────────────── */

.admf__days[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admf__day[b-oyyy4fvzgx] {
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    overflow: hidden;
}

.admf__dayHead[b-oyyy4fvzgx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--vtg-border);
    background: var(--vtg-bg);
}

.admf__dayNo[b-oyyy4fvzgx] {
    font-size: 13px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admf__dayBtns[b-oyyy4fvzgx] {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
}

.admf__dayBody[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 13px;
}

/* Nội dung ngày soạn bằng NM editor. Toàn bộ ruột editor do JS dựng nên KHÔNG mang
   thuộc tính scope [b-xxxx] — phải ::deep mới với tới được. */
.admf__dayText[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Mặc định mỗi ô soạn cao 320px; một tour 10 ngày là 10 ô như thế, cuộn mãi không hết.
   Hạ xuống vừa đủ vài dòng, cần dài thì ô tự giãn theo nội dung. */
.admf__dayText[b-oyyy4fvzgx]  .nm-editable {
    min-height: 180px;
}

/* ── Tab ảnh ─────────────────────────────────────────────────────────── */

.admf__gallery[b-oyyy4fvzgx] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-top: 16px;
}

.admf__shot[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
}

.admf__shot.is-cover[b-oyyy4fvzgx] { border-color: var(--vtg-brand); }

.admf__shotImg[b-oyyy4fvzgx] {
    position: relative;
    border-radius: var(--vtg-r-input);
    overflow: hidden;
    background: var(--vtg-bg);
}

.admf__shotImg img[b-oyyy4fvzgx] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.admf__shotFlag[b-oyyy4fvzgx] {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    padding: 2px 8px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.admf__shotCap[b-oyyy4fvzgx] { font-size: 12.5px; }

.admf__shotBtns[b-oyyy4fvzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admf__loading[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 24px;
}

.admf__skel[b-oyyy4fvzgx] {
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admf-shimmer-b-oyyy4fvzgx 1.3s ease-in-out infinite;
}

@keyframes admf-shimmer-b-oyyy4fvzgx {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Features/Admin/AdminTourInquiries.razor.rz.scp.css */
/* Bảng 8 cột — hẹp hơn ngần này là chữ trong ô dồn thành 3 dòng.
   .vtga-tablewrap lo phần cuộn ngang. */
.admi__table[b-1a0n1v0f0w] { min-width: 1060px; }

/* ── Ô hai dòng ──────────────────────────────────────────────────────── */

.admi__stack[b-1a0n1v0f0w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admi__sub[b-1a0n1v0f0w] {
    font-size: 12px;
    color: var(--vtg-faint);
}

.admi__sub--block[b-1a0n1v0f0w] { display: block; }

.admi__code[b-1a0n1v0f0w] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--vtg-faint);
    letter-spacing: .02em;
}

.admi__phone[b-1a0n1v0f0w] {
    font-weight: 600;
    color: var(--vtg-ink);
    white-space: nowrap;
}

.admi__mail[b-1a0n1v0f0w] {
    font-size: 12px;
    color: var(--vtg-faint);
    word-break: break-all;
}

.admi__count[b-1a0n1v0f0w] {
    font-size: 15px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admi__date[b-1a0n1v0f0w] {
    font-weight: 650;
    color: var(--vtg-ink);
    white-space: nowrap;
}

.admi__when[b-1a0n1v0f0w] { white-space: nowrap; }

.admi__foot[b-1a0n1v0f0w] {
    font-size: 13px;
    line-height: 1.6;
    color: var(--vtg-muted);
    margin-top: 14px;
}

/* ── Tem trạng thái: tông thứ 6 ──────────────────────────────────────── */

/* TourDisplay.InquiryStatusTone trả 7 tông NmBadge nhưng app.css chỉ có 5 lớp
   .vtga-tag--*. Tông Violet ("Đã chốt") lấy lớp riêng này thay vì gộp vào --brand,
   nếu không thì "Đã chốt" và "Đang xử lý" trông y hệt nhau trên cùng một cột.
   Màu đọc từ cầu nối nm trong tokens.css nên vẫn cùng bảng màu với NmBadge. */
.admi__tag--violet[b-1a0n1v0f0w] {
    background: var(--nm-violet-soft);
    color: var(--nm-violet);
}

/* ── Hộp chi tiết ────────────────────────────────────────────────────── */

.admi__mhead[b-1a0n1v0f0w] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admi__mcode[b-1a0n1v0f0w] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admi__dest[b-1a0n1v0f0w] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--vtg-border);
}

.admi__dest__name[b-1a0n1v0f0w] {
    font-size: 19px;
    font-weight: 750;
    line-height: 1.3;
    color: var(--vtg-ink);
}

.admi__dl[b-1a0n1v0f0w] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 20px;
    margin: 14px 0 0;
}

@media (min-width: 640px) {
    .admi__dl[b-1a0n1v0f0w] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admi__dl dt[b-1a0n1v0f0w] {
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
    margin-bottom: 3px;
}

.admi__dl dd[b-1a0n1v0f0w] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-ink);
    word-break: break-word;
}

.admi__sec[b-1a0n1v0f0w] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--vtg-border);
}

.admi__sec__title[b-1a0n1v0f0w] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-muted);
    margin-bottom: 8px;
}

.admi__contacts[b-1a0n1v0f0w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Lời khách viết — thụt vào sau một vạch cam để không lẫn với chữ của hệ thống.
   white-space: pre-line giữ lại các lần xuống dòng khách gõ. */
.admi__quote[b-1a0n1v0f0w] {
    margin: 0 0 6px;
    padding: 10px 12px;
    border-inline-start: 3px solid var(--vtg-brand);
    border-radius: 0 10px 10px 0;
    background: var(--vtg-bg);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vtg-ink-2);
    white-space: pre-line;
    word-break: break-word;
}

/* ── Chip chọn trạng thái ────────────────────────────────────────────── */

.admi__chips[b-1a0n1v0f0w] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admi__chip[b-1a0n1v0f0w] {
    min-height: 34px;
    padding-inline: 13px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-surface);
    font-size: 13px;
    font-weight: 650;
    color: var(--vtg-ink-2);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.admi__chip:hover:not(:disabled)[b-1a0n1v0f0w] {
    border-color: var(--vtg-brand);
    color: var(--vtg-brand-strong);
}

.admi__chip.is-on[b-1a0n1v0f0w] {
    background: var(--vtg-brand-soft);
    border-color: var(--vtg-brand);
    color: var(--vtg-brand-strong);
}

.admi__chip:disabled[b-1a0n1v0f0w] {
    opacity: .55;
    cursor: not-allowed;
}

.admi__chip:focus-visible[b-1a0n1v0f0w] {
    outline: 2px solid var(--vtg-brand);
    outline-offset: 2px;
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admi__loading[b-1a0n1v0f0w] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admi__skel[b-1a0n1v0f0w] {
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admi-shimmer-b-1a0n1v0f0w 1.3s ease-in-out infinite;
}

@keyframes admi-shimmer-b-1a0n1v0f0w {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Features/Admin/AdminTours.razor.rz.scp.css */
/* ── Bảng ────────────────────────────────────────────────────────────── */

/* Bảy cột, trong đó cột tên tour cần chỗ thở — hẹp hơn ngần này là chữ vỡ dòng
   lởm chởm. Khung .vtga-tablewrap lo phần cuộn ngang. */
.admt__table[b-ep9tgzbv8c] { min-width: 1040px; }

.admt__meta[b-ep9tgzbv8c] {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--vtg-faint);
    margin-top: 2px;
}

.admt__slug[b-ep9tgzbv8c] {
    margin-inline-start: 7px;
    word-break: break-all;
}

.admt__sched[b-ep9tgzbv8c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admt__next[b-ep9tgzbv8c] {
    font-size: 12px;
    color: var(--vtg-faint);
}

.admt__none[b-ep9tgzbv8c] {
    font-size: 13px;
    color: var(--vtg-faint);
}

/* ── Khối rỗng ───────────────────────────────────────────────────────── */

/* Công ty mới chưa có tour nào — khối rỗng phải MỜI tạo tour đầu tiên chứ không
   để người dùng tự đi tìm nút ở góc trên. */
.admt__emptyCta[b-ep9tgzbv8c] { margin-top: 14px; }

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admt__loading[b-ep9tgzbv8c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admt__skel[b-ep9tgzbv8c] {
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admt-shimmer-b-ep9tgzbv8c 1.3s ease-in-out infinite;
}

@keyframes admt-shimmer-b-ep9tgzbv8c {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Features/Admin/AdminVisa.razor.rz.scp.css */
/* ── Dải nhắc "nội dung dùng chung" ──────────────────────────────────────
   Không dùng .vtga-note: dải kia là thông báo NHẤT THỜI có nút đóng, còn dải
   này là điều kiện thường trực của màn — đóng được là hỏng ý. Tông xanh mực
   để phân biệt rõ với dải lỗi (đỏ) và dải thành công (xanh lá). */

.admv__shared[b-5l0b8sbl75] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--vtg-border);
    border-inline-start: 3px solid var(--vtg-teal);
    border-radius: var(--vtg-r-card);
    background: var(--vtg-surface);
}

.admv__sharedIcon[b-5l0b8sbl75] {
    flex: 0 0 auto;
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #E4F3F4;
    color: var(--vtg-teal);
}

.admv__sharedIcon svg[b-5l0b8sbl75] {
    width: 16px;
    height: 16px;
}

.admv__sharedText[b-5l0b8sbl75] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
}

.admv__sharedText strong[b-5l0b8sbl75] { color: var(--vtg-ink); }

.admv__sharedText em[b-5l0b8sbl75] {
    font-style: normal;
    font-weight: 700;
    color: var(--vtg-teal);
}

/* ── Hàng chip lọc ───────────────────────────────────────────────────── */

.admv__chips[b-5l0b8sbl75] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--vtg-border);
}

.admv__chip[b-5l0b8sbl75] {
    height: 30px;
    padding-inline: 12px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-ink-2);
    cursor: pointer;
}

.admv__chip:hover[b-5l0b8sbl75] { border-color: var(--vtg-brand); color: var(--vtg-brand-strong); }

.admv__chip.is-on[b-5l0b8sbl75] {
    border-color: var(--vtg-brand);
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
}

.admv__chipsEnd[b-5l0b8sbl75] {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admv__sortLbl[b-5l0b8sbl75] { margin: 0; white-space: nowrap; }

.admv__sort[b-5l0b8sbl75] { width: auto; min-width: 178px; }

/* ── Bảng ────────────────────────────────────────────────────────────── */

.admv__table[b-5l0b8sbl75] { min-width: 1020px; }

.admv__table tbody tr[b-5l0b8sbl75] { cursor: pointer; }

.admv__country[b-5l0b8sbl75] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.admv__flag[b-5l0b8sbl75] {
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1.2;
}

.admv__countryText[b-5l0b8sbl75] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admv__iso[b-5l0b8sbl75] {
    font-size: 11.5px;
    color: var(--vtg-faint);
}

.admv__slug[b-5l0b8sbl75] {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 7px;
    background: var(--vtg-brand-soft);
    font-size: 11.5px;
    color: var(--vtg-brand-strong);
    word-break: break-all;
}

.admv__noSlug[b-5l0b8sbl75] {
    font-size: 12.5px;
    font-style: italic;
    color: var(--vtg-faint);
}

/* Năm ô đếm khối nội dung: ô nào còn 0 thì để mờ, nhìn một lượt là biết nước
   nào mới có vỏ mà chưa có ruột. */

.admv__blocks[b-5l0b8sbl75] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    cursor: help;
}

.admv__block[b-5l0b8sbl75] {
    padding: 2px 7px;
    border-radius: var(--vtg-r-pill);
    background: #EEF1F6;
    font-size: 11px;
    font-weight: 600;
    color: var(--vtg-faint);
    white-space: nowrap;
}

.admv__block.is-on[b-5l0b8sbl75] {
    background: #E7F6F0;
    color: #0B7A55;
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admv__loading[b-5l0b8sbl75] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admv__skel[b-5l0b8sbl75] {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admv-shimmer-b-5l0b8sbl75 1.3s ease-in-out infinite;
}

@keyframes admv-shimmer-b-5l0b8sbl75 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (max-width: 720px) {
    .admv__chipsEnd[b-5l0b8sbl75] {
        margin-inline-start: 0;
        width: 100%;
    }

    .admv__sort[b-5l0b8sbl75] { flex: 1 1 auto; min-width: 0; }
}
/* /src/Features/Admin/AdminVisaCountry.razor.rz.scp.css */
/* Màn biên tập nội dung visa một quốc gia.
   Chỉ giữ ở đây thứ RIÊNG của màn: dải nhắc dùng chung, khối tab, lưới hai cột,
   khung ảnh, hàng danh sách và xem trước Google. Đầu trang, tấm nền, ô nhập,
   bảng, tem trạng thái đã nằm ở .vtga-* trong app.css. */

/* ── Dải nhắc "nội dung dùng chung" ──────────────────────────────────────
   Cố ý KHÔNG dùng .vtga-note: dải kia là thông báo nhất thời có nút đóng, còn
   dải này là điều kiện thường trực của màn, đóng được là hỏng ý. Ở màn danh
   sách (AdminVisa) dải này nền trắng; tại đây nền teal đặc hơn vì người biên
   tập sắp GÕ chứ không chỉ đang xem, đọc hụt câu này là viết nhầm giọng
   thương hiệu cho cả hai site. */

.admvc__shared[b-bf308d3dsi] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #C7E4E7;
    border-inline-start: 3px solid var(--vtg-teal);
    border-radius: var(--vtg-r-card);
    background: #EAF6F7;
}

.admvc__sharedIcon[b-bf308d3dsi] {
    flex: 0 0 auto;
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vtg-surface);
    color: var(--vtg-teal);
}

.admvc__sharedIcon svg[b-bf308d3dsi] {
    width: 16px;
    height: 16px;
}

.admvc__sharedText[b-bf308d3dsi] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
}

.admvc__sharedText strong[b-bf308d3dsi] { color: var(--vtg-ink); }

/* ── Đầu trang ───────────────────────────────────────────────────────── */

/* Cờ là ký tự emoji nằm chung dòng với tiêu đề: phải hãm line-height lại,
   không thì emoji đội cả dòng tiêu đề cao lên so với thẻ bên cạnh. */
.admvc__flag[b-bf308d3dsi] {
    font-size: 20px;
    line-height: 1;
    margin-inline-end: 6px;
}

/* Hàng tem thay cho đoạn văn giới thiệu cũ: mã nước, châu lục, trạng thái
   hiện/ẩn và đường dẫn công khai nằm gọn một dòng. */
.admvc__meta[b-bf308d3dsi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.admvc__chip[b-bf308d3dsi] {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding-inline: 8px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vtg-ink-2);
}

/* Hiện/ẩn là thứ người biên tập cần liếc một cái là biết — tô màu, đừng để nó
   lẫn vào hai tem xám bên cạnh. */
.admvc__chip.is-on[b-bf308d3dsi] {
    background: #E7F6EC;
    color: #17714A;
}

.admvc__chip.is-off[b-bf308d3dsi] {
    background: #FDECEC;
    color: #A32B2B;
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admvc__loading[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admvc__skel[b-bf308d3dsi] {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admvc-shimmer-b-bf308d3dsi 1.3s ease-in-out infinite;
}

@keyframes admvc-shimmer-b-bf308d3dsi {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Tấm biên tập + thanh đầu dính ───────────────────────────────────── */

.admvc__editor[b-bf308d3dsi] { overflow: hidden; }

/* Đang xem thẻ kho dùng chung thì cả tấm biên tập ẩn đi — nhưng CHỈ bằng
   display, y như .admvc__pane: ArticleEditor bên trong là instance JS, tháo
   khỏi DOM là mất trắng nội dung đang gõ. */
.admvc__editor.is-hidden[b-bf308d3dsi] { display: none; }

/* ── Dải điều hướng dính ─────────────────────────────────────────────────
   Trước đây dải thẻ nằm trong thanh đầu của tấm biên tập, nên năm kho dùng
   chung phải xếp thành năm tấm rời nối đuôi bên dưới — trang dài tới mức phải
   cuộn cả chục màn hình mới hết. Giờ dải thẻ đứng riêng NGOÀI tấm để mỗi thẻ,
   kể cả thẻ kho, tự dựng tấm của mình.

   Vẫn dính đỉnh: gõ tới cuối một thẻ mà phải cuộn ngược lên đầu mới thấy nút
   Lưu thì đó đúng là lúc người ta bỏ mất công đã gõ. */
.admvc__bar[b-bf308d3dsi] {
    position: sticky;

    /* ★ Đậu ngay DƯỚI thanh trên của khu quản trị, không phải top:0. Thanh kia
       cũng sticky, z-index 880 — dính ở 0 thì dải thẻ trượt vào đúng gầm nó và
       biến mất, đúng lúc người dùng cần bấm Lưu. --vtgadm-top khai ở .vtgadm nên
       thừa kế xuống tận đây; giá trị dự phòng cho trường hợp đổi layout. */
    top: var(--vtgadm-top, 60px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 14px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    background: var(--vtg-surface);
    box-shadow: var(--vtg-shadow-card);
}

.admvc__tabs[b-bf308d3dsi] {
    display: flex;
    gap: 4px;
    max-width: 100%;
    padding: 3px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);

    /* Chín nhãn tiếng Việt là quá nhiều cho màn hẹp; cho trượt ngang trong
       chính nhóm pill, đừng để chúng đẩy dải điều hướng vỡ hàng. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.admvc__tabs[b-bf308d3dsi]::-webkit-scrollbar { display: none; }

/* Ba nhóm thẻ: nội dung trang · năm kho dùng chung · bài viết. Vạch mờ giữa
   các nhóm nói cho người dùng biết vì sao "Bảng giá" lưu kiểu khác "Nội dung",
   mà không phải viết thêm một câu chú thích nào. */
.admvc__tabGroup[b-bf308d3dsi] {
    display: flex;
    gap: 4px;
}

.admvc__tabGroup + .admvc__tabGroup[b-bf308d3dsi] {
    margin-inline-start: 5px;
    padding-inline-start: 9px;
    border-inline-start: 1px solid var(--vtg-border);
}

.admvc__tab[b-bf308d3dsi] {
    flex: 0 0 auto;
    height: 30px;
    padding-inline: 13px;
    border: 0;
    border-radius: var(--vtg-r-pill);
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    color: var(--vtg-muted);
    cursor: pointer;
}

.admvc__tab.is-on[b-bf308d3dsi] {
    background: var(--vtg-surface);
    color: var(--vtg-ink);
    box-shadow: var(--vtg-shadow-card);
}

.admvc__headEnd[b-bf308d3dsi] {
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admvc__savedAt[b-bf308d3dsi] {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--vtg-faint);
}

/* Chưa lưu lần nào thì SavedHint là chuỗi rỗng — ẩn hẳn để khoảng gap không
   đẩy nút Lưu lệch khỏi mép phải. */
.admvc__savedAt:empty[b-bf308d3dsi] { display: none; }

/* ── Khối tab ────────────────────────────────────────────────────────── */

.admvc__pane[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Cả bốn khối LUÔN được dựng, đổi tab chỉ đổi display. Bắt buộc như vậy:
   ArticleEditor là instance JS, tháo khỏi DOM là mất trắng nội dung đang gõ.
   Vì thế chỉ được ẩn bằng display, đừng đổi sang cách nào khiến nó rời khỏi
   luồng dựng. */
.admvc__pane.is-hidden[b-bf308d3dsi] { display: none; }

.admvc__grid[b-bf308d3dsi] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1120px) {
    .admvc__grid[b-bf308d3dsi] { grid-template-columns: minmax(0, 1fr) 320px; }
}

.admvc__col[b-bf308d3dsi],
.admvc__side[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* ── Khối trường ─────────────────────────────────────────────────────── */

/* Một tab chứa tới ba, bốn nhóm trường không liên quan nhau. Không quây lại
   thì chúng thành một cột ô nhập dài dằng dặc, nhìn không ra ô nào thuộc
   phần nào. */
.admvc__block[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 13px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
}

.admvc__blockTitle[b-bf308d3dsi] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-muted);
}

/* Câu dẫn đi liền dưới tiêu đề khối chứ không phải một trường riêng — kéo lại
   cho hết khoảng gap của khối. */
.admvc__blockHint[b-bf308d3dsi] { margin-top: -8px; }

/* ── Lưới khối trong một thẻ ─────────────────────────────────────────────
   Sáu danh sách nội dung (điểm nổi bật, dịch vụ, phí gồm/không gồm…) và mười
   ba ô tiêu đề khối xếp một cột là hai cột chữ dài dằng dặc. Màn đủ rộng thì
   bẻ đôi: cùng bấy nhiêu ô nhưng ngắn còn một nửa chiều cao. */
.admvc__lists[b-bf308d3dsi],
.admvc__fieldGrid[b-bf308d3dsi] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 900px) {
    .admvc__lists[b-bf308d3dsi],
    .admvc__fieldGrid[b-bf308d3dsi] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Ô tích ──────────────────────────────────────────────────────────── */

.admvc__check[b-bf308d3dsi] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.admvc__check input[b-bf308d3dsi] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.admvc__check > span[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.admvc__check em[b-bf308d3dsi] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

/* ── Ô nhập kèm nút cùng hàng (slug) ─────────────────────────────────── */

.admvc__inline[b-bf308d3dsi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admvc__inline .vtga-in[b-bf308d3dsi] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nút nhỏ dùng chung cao 40px, ô nhập quản trị cao 38px — hạ nút xuống cho
   hai mép trên dưới trùng nhau. */
.admvc__inline .vtg-btn[b-bf308d3dsi] {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
}

/* ── Đếm ký tự ───────────────────────────────────────────────────────── */

.admvc__count[b-bf308d3dsi] {
    float: inline-end;
    font-weight: 500;
    color: var(--vtg-faint);
}

.admvc__count.is-over[b-bf308d3dsi] { color: var(--vtg-bad); font-weight: 700; }

/* ── Ảnh ─────────────────────────────────────────────────────────────── */

/* Nền trắng chứ không phải var(--vtg-bg): khung ảnh nằm trong khối trường đã
   xám rồi, xám trên xám thì không thấy mép khung. */
.admvc__cover[b-bf308d3dsi] {
    position: relative;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    overflow: hidden;
    background: var(--vtg-surface);
}

.admvc__cover img[b-bf308d3dsi] {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.admvc__coverX[b-bf308d3dsi] {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(15,23,41,.62);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.admvc__coverX:hover[b-bf308d3dsi] { background: rgba(15,23,41,.82); }

.admvc__drop[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px;
    border: 1px dashed var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-surface);
}

.admvc__drop > span[b-bf308d3dsi] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--vtg-faint);
}

/* InputFile là component → thẻ input nó sinh ra không mang thuộc tính scope
   của trang này, phải với xuống bằng ::deep. */
.admvc__drop[b-bf308d3dsi]  input[type="file"] {
    font-size: 13px;
    color: var(--vtg-ink-2);
    max-width: 100%;
}

/* ── Thư viện ảnh kết quả ────────────────────────────────────────────── */

.admvc__gallery[b-bf308d3dsi] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.admvc__pic[b-bf308d3dsi] {
    position: relative;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    overflow: hidden;
    background: var(--vtg-surface);
}

.admvc__pic img[b-bf308d3dsi] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 1px solid var(--vtg-border);
}

/* Ô chú thích dính đáy thẻ ảnh: bỏ viền và bo góc riêng để nó là một phần của
   thẻ chứ không phải một ô nhập thả nổi trong đó. */
.admvc__pic .admvc__picCap[b-bf308d3dsi] {
    height: 36px;
    border: 0;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
}

.admvc__pic .admvc__picCap:focus[b-bf308d3dsi] {
    box-shadow: inset 0 0 0 2px var(--vtg-brand);
}

/* ── Hàng danh sách gạch đầu dòng ────────────────────────────────────── */

.admvc__listRow[b-bf308d3dsi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admvc__listRow .vtga-in[b-bf308d3dsi] {
    flex: 1 1 auto;
    min-width: 0;
}

.admvc__listNo[b-bf308d3dsi] {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vtg-faint);
}

.admvc__rowUp[b-bf308d3dsi],
.admvc__rowX[b-bf308d3dsi] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--vtg-border);
    border-radius: 9px;
    background: var(--vtg-surface);
    font-size: 13px;
    line-height: 1;
    color: var(--vtg-ink-2);
    cursor: pointer;
}

.admvc__rowUp:hover:not(:disabled)[b-bf308d3dsi] {
    border-color: var(--vtg-brand);
    color: var(--vtg-brand-strong);
}

.admvc__rowUp:disabled[b-bf308d3dsi] {
    color: var(--vtg-faint);
    cursor: not-allowed;
}

.admvc__rowX[b-bf308d3dsi] {
    font-size: 16px;
    color: var(--vtg-muted);
}

.admvc__rowX:hover[b-bf308d3dsi] {
    border-color: var(--vtg-bad);
    background: #FDECEA;
    color: var(--vtg-bad);
}

.admvc__listEmpty[b-bf308d3dsi] {
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: var(--vtg-faint);
}

/* ── Trình soạn bài ──────────────────────────────────────────────────── */

.admvc__editorHost[b-bf308d3dsi] {
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    overflow: hidden;
}

/* ArticleEditor tự nạp CSS riêng (/css/article-editor.css) và KHÔNG mang thuộc
   tính scope của trang này — mọi luật với xuống nó phải qua ::deep. */
.admvc__editorHost[b-bf308d3dsi]  .aed-root {
    border: 0;
    border-radius: 0;
}

.admvc__editorHost[b-bf308d3dsi]  .aed-host { min-height: 320px; }

/* ── Xem trước kết quả Google ────────────────────────────────────────── */

.admvc__serp[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-surface);
}

.admvc__serpUrl[b-bf308d3dsi] {
    font-size: 12px;
    color: #4A6B3F;
    word-break: break-all;
}

.admvc__serpTitle[b-bf308d3dsi] {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1A0DAB;

    /* Google cắt tiêu đề dài còn khoảng hai dòng — xem trước phải cắt giống,
       không thì người viết tưởng cả tiêu đề 90 ký tự đều hiện ra. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admvc__serpDesc[b-bf308d3dsi] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vtg-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Từ khoá khớp bài ────────────────────────────────────────────────── */

.admvc__kw[b-bf308d3dsi] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admvc__kwChip[b-bf308d3dsi] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 9px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand-soft);
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-brand-strong);
}

/* Cụm bắt trong tiêu đề khác hẳn từ khoá đơn lẻ, nên phải nhìn ra ngay đó là
   hai loại luật khác nhau chứ không phải một danh sách phẳng. */
.admvc__kwChip.is-phrase[b-bf308d3dsi] {
    background: #E4F3F4;
    color: var(--vtg-teal);
}

/* ── Bài viết khớp / đã loại ─────────────────────────────────────────── */

.admvc__subTitle[b-bf308d3dsi] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtg-ink);
    margin-top: 2px;
}

.admvc__art[b-bf308d3dsi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-surface);
}

/* Bài đã loại vẫn phải đọc được để bấm đưa lại vào, nên hạ một bậc chứ không
   xoá tương phản: nền xám, viền đứt, tiêu đề nhạt hơn. */
.admvc__art.is-excluded[b-bf308d3dsi] {
    background: var(--vtg-bg);
    border-style: dashed;
}

.admvc__art.is-excluded .vtga-table__main[b-bf308d3dsi] { color: var(--vtg-muted); }

.admvc__artText[b-bf308d3dsi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.admvc__artMeta[b-bf308d3dsi] {
    font-size: 12px;
    color: var(--vtg-faint);
    word-break: break-all;
}

/* ── Màn hẹp ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    /* Thanh đầu dồn ba cụm trên một hàng; dưới 720px cho nhóm nút xuống hàng
       riêng thay vì ép nhóm tab co lại còn vài chục pixel. */
    .admvc__headEnd[b-bf308d3dsi] {
        margin-inline-start: 0;
        width: 100%;
    }

    .admvc__gallery[b-bf308d3dsi] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* /src/Features/Admin/AdminVisaDefaults.razor.rz.scp.css */
/* Màn nhãn mặc định dùng chung của trang visa.
   Chỉ giữ ở đây thứ RIÊNG của màn: dải nhắc dùng chung, khung chờ, lưới ô nhập,
   bộ sửa danh sách và thanh lưu dính đáy. Tấm nền, ô nhập, nhãn, dải thông báo,
   nút đã nằm ở .vtga-* và .vtg-* trong app.css. */

/* ── Xếp tấm ─────────────────────────────────────────────────────────────
   .vtga-panel không tự có margin, các màn khác đều tự chồng tấm bằng một khung
   flex có gap. Giữ đúng cách đó thay vì gắn margin lên từng tấm. */

.admvd__wrap[b-h1abyr4juu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Dải nhắc "một bản ghi cho cả hệ thống" ──────────────────────────────
   Cố ý KHÔNG dùng .vtga-note: dải kia là thông báo nhất thời có nút đóng, còn
   dải này là điều kiện thường trực của màn, đóng được là hỏng ý. Cùng tông teal
   với dải ở màn danh sách quốc gia và màn biên tập từng nước để người dùng nhận
   ra đây là cùng một loại cảnh báo. */

.admvd__shared[b-h1abyr4juu] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid #C7E4E7;
    border-inline-start: 3px solid var(--vtg-teal);
    border-radius: var(--vtg-r-card);
    background: #EAF6F7;
}

.admvd__sharedIcon[b-h1abyr4juu] {
    flex: 0 0 auto;
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vtg-surface);
    color: var(--vtg-teal);
}

.admvd__sharedIcon svg[b-h1abyr4juu] {
    width: 16px;
    height: 16px;
}

.admvd__sharedText[b-h1abyr4juu] {
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
}

.admvd__sharedText strong[b-h1abyr4juu] { color: var(--vtg-ink); }

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admvd__loading[b-h1abyr4juu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admvd__skel[b-h1abyr4juu] {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admvd-shimmer-b-h1abyr4juu 1.3s ease-in-out infinite;
}

@keyframes admvd-shimmer-b-h1abyr4juu {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Lưới ô nhập ─────────────────────────────────────────────────────────
   Hai mươi ba ô xếp một cột dọc thì trang dài gấp đôi màn hình và không ai
   thấy được các tiêu đề khối nằm cạnh nhau để so giọng văn. */

.admvd__grid[b-h1abyr4juu] {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .admvd__grid[b-h1abyr4juu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
    .admvd__grid[b-h1abyr4juu] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.admvd__field[b-h1abyr4juu] { min-width: 0; }

.admvd__field--narrow[b-h1abyr4juu] { max-width: 180px; }

/* Ô nhiều dòng ở đây chỉ chứa một hai câu dẫn, không cần cao 84px như mặc định
   của textarea.vtga-in — để nguyên thì hàng lưới bị kéo cao lệch hẳn. */
.admvd__field textarea.vtga-in[b-h1abyr4juu] {
    min-height: 62px;
}

/* Câu dẫn của cả tấm: kéo sát mép trên thân tấm rồi chừa khoảng trước lưới. */
.admvd__panelHint[b-h1abyr4juu] {
    margin-top: 0;
    margin-bottom: 12px;
}

.admvd__panelHint em[b-h1abyr4juu] {
    font-style: normal;
    font-weight: 700;
    color: var(--vtg-teal);
}

/* ── Khối bài viết liên quan ─────────────────────────────────────────── */

.admvd__blogRow[b-h1abyr4juu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.admvd__blogHint[b-h1abyr4juu] {
    flex: 1 1 320px;
    min-width: 0;
    margin-top: 22px;
}

/* ── Bộ sửa danh sách ────────────────────────────────────────────────── */

.admvd__lists[b-h1abyr4juu] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .admvd__lists[b-h1abyr4juu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admvd__block[b-h1abyr4juu] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    background: var(--vtg-bg);
}

.admvd__blockTitle[b-h1abyr4juu] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-muted);
}

/* Câu dẫn đi liền dưới tiêu đề khối chứ không phải một trường riêng — kéo lại
   cho hết khoảng gap của khối. */
.admvd__blockHint[b-h1abyr4juu] {
    margin-top: -6px;
}

.admvd__listRow[b-h1abyr4juu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admvd__listRow .vtga-in[b-h1abyr4juu] {
    flex: 1 1 auto;
    min-width: 0;
}

.admvd__listNo[b-h1abyr4juu] {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vtg-faint);
}

.admvd__rowUp[b-h1abyr4juu],
.admvd__rowX[b-h1abyr4juu] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--vtg-border);
    border-radius: 9px;
    background: var(--vtg-surface);
    font-size: 13px;
    line-height: 1;
    color: var(--vtg-ink-2);
    cursor: pointer;
}

.admvd__rowUp:hover:not(:disabled)[b-h1abyr4juu] {
    border-color: var(--vtg-brand);
    color: var(--vtg-brand-strong);
}

.admvd__rowUp:disabled[b-h1abyr4juu] {
    color: var(--vtg-faint);
    cursor: not-allowed;
}

.admvd__rowX[b-h1abyr4juu] {
    font-size: 16px;
    color: var(--vtg-muted);
}

.admvd__rowX:hover[b-h1abyr4juu] {
    border-color: var(--vtg-bad);
    background: #FDECEA;
    color: var(--vtg-bad);
}

.admvd__listEmpty[b-h1abyr4juu] {
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: var(--vtg-faint);
}

/* ── Thanh lưu dính đáy ──────────────────────────────────────────────────
   Trang dài hơn một màn hình. Không dính lại thì gõ tới cuối phải cuộn ngược
   lên đầu mới lưu được, và đó chính là lúc người ta bỏ mất công đã gõ. */

.admvd__savebar[b-h1abyr4juu] {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    background: var(--vtg-surface);
    box-shadow: var(--vtg-shadow-pop);
}

.admvd__savebarText[b-h1abyr4juu] {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admvd__savebarWarn[b-h1abyr4juu] {
    font-size: 13px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admvd__savebarMeta[b-h1abyr4juu] {
    font-size: 12px;
    color: var(--vtg-faint);
}

.admvd__savebarBtns[b-h1abyr4juu] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* /src/Features/Admin/AdminVisaLeads.razor.rz.scp.css */
/* ── Hàng thẻ thống kê ────────────────────────────────────────────────
   Tự dựng bằng HTML thường thay vì mượn NmKpi: primitive Nm vẽ icon bằng
   bootstrap-icons, mà repo này không có bộ icon đó nên chỗ icon ra ô trống.
   Xem chú thích đầu khối .vtga- trong Styles/app.css. */
.admvl__stats[b-zu7xmw92lj] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin-bottom: 14px;
}

.admvl__stat[b-zu7xmw92lj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
}

.admvl__statNum[b-zu7xmw92lj] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--vtg-ink);
}

.admvl__statLbl[b-zu7xmw92lj] {
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
}

/* Lead mới là việc CẦN LÀM HÔM NAY — cho nó nổi hẳn lên bằng màu thương hiệu. */
.admvl__stat--hot[b-zu7xmw92lj] {
    background: var(--vtg-brand-soft);
    border-color: var(--vtg-brand);
}

.admvl__stat--hot .admvl__statNum[b-zu7xmw92lj] { color: var(--vtg-brand-strong); }
.admvl__stat--hot .admvl__statLbl[b-zu7xmw92lj] { color: var(--vtg-brand-strong); }

.admvl__stat--ok .admvl__statNum[b-zu7xmw92lj] { color: var(--vtg-ok); }

.admvl__stat--dim[b-zu7xmw92lj] {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
}

.admvl__stat--dim .admvl__statNum[b-zu7xmw92lj] { color: var(--vtg-faint); }

.admvl__stat--skel[b-zu7xmw92lj] {
    height: 66px;
    border-color: transparent;
    box-shadow: none;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admvl-shimmer-b-zu7xmw92lj 1.3s ease-in-out infinite;
}

/* ── Bảng ────────────────────────────────────────────────────────────── */
.admvl__table[b-zu7xmw92lj] { min-width: 940px; }

.admvl__code[b-zu7xmw92lj] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--vtg-faint);
    margin-top: 2px;
}

.admvl__stack[b-zu7xmw92lj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admvl__phone[b-zu7xmw92lj] {
    font-weight: 650;
    color: var(--vtg-ink);
    text-decoration: none;
}

.admvl__phone:hover[b-zu7xmw92lj] { color: var(--vtg-brand-strong); }

.admvl__mail[b-zu7xmw92lj] {
    font-size: 12px;
    color: var(--vtg-muted);
    text-decoration: none;
    word-break: break-all;
}

.admvl__mail:hover[b-zu7xmw92lj] { color: var(--vtg-brand-strong); }

.admvl__none[b-zu7xmw92lj] { color: var(--vtg-faint); }

.admvl__country[b-zu7xmw92lj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Cờ là emoji nên phải để font hệ thống lo — ép font thương hiệu vào là mất màu. */
.admvl__flag[b-zu7xmw92lj] {
    font-size: 16px;
    line-height: 1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.admvl__sub[b-zu7xmw92lj] {
    font-size: 12px;
    color: var(--vtg-faint);
}

.admvl__urg[b-zu7xmw92lj] { color: var(--vtg-muted); }

/* ── Khung chờ danh sách ─────────────────────────────────────────────── */
.admvl__loading[b-zu7xmw92lj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admvl__skel[b-zu7xmw92lj] {
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admvl-shimmer-b-zu7xmw92lj 1.3s ease-in-out infinite;
}

/* Tên keyframes KHÔNG được Blazor gắn scope, nên phải đặt riêng cho màn này. */
@keyframes admvl-shimmer-b-zu7xmw92lj {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Hộp chi tiết ────────────────────────────────────────────────────── */
.admvl__ovl[b-zu7xmw92lj] {
    position: fixed;
    inset: 0;
    z-index: 1000; /* thang z ở app.css: header 900 - modal 1000 - popover 1100 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 16px;
    background: rgba(16, 24, 40, .45);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admvl__box[b-zu7xmw92lj] {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    background: var(--vtg-surface);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-widget);
}

.admvl__boxHead[b-zu7xmw92lj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--vtg-border);
}

.admvl__boxHeadText[b-zu7xmw92lj] { min-width: 0; }

.admvl__boxTitle[b-zu7xmw92lj] {
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--vtg-ink);
}

.admvl__boxSub[b-zu7xmw92lj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--vtg-muted);
    margin-top: 6px;
}

.admvl__x[b-zu7xmw92lj] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 9px;
    color: var(--vtg-muted);
    cursor: pointer;
}

.admvl__x:hover[b-zu7xmw92lj] { background: var(--vtg-bg); color: var(--vtg-ink); }

.admvl__boxBody[b-zu7xmw92lj] {
    padding: 16px 18px;
    overflow-y: auto;
}

.admvl__boxFoot[b-zu7xmw92lj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--vtg-border);
}

.admvl__dl[b-zu7xmw92lj] {
    display: grid;
    gap: 0;
}

.admvl__row[b-zu7xmw92lj] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--vtg-border);
}

.admvl__row:last-child[b-zu7xmw92lj] { border-bottom: 0; }

.admvl__k[b-zu7xmw92lj] {
    flex: 0 0 auto;
    min-width: 148px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
}

.admvl__v[b-zu7xmw92lj] {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vtg-ink);
}

.admvl__v .admvl__sub[b-zu7xmw92lj] { margin-inline-start: 6px; }

.admvl__break[b-zu7xmw92lj] { word-break: break-all; }

.admvl__block[b-zu7xmw92lj] { margin-top: 14px; }

/* .admvl__k trong hàng là cột nhãn; ở đây nó đứng riêng trên một dòng. */
.admvl__block .admvl__k[b-zu7xmw92lj] { display: block; }

/* Lời khách nhắn là chữ NGƯỜI DÙNG NHẬP: giữ xuống dòng của họ, đừng ép thành
   một khối liền — địa chỉ, danh sách người đi thường được gõ mỗi dòng một mục. */
.admvl__quote[b-zu7xmw92lj] {
    margin-top: 5px;
    padding: 10px 12px;
    background: var(--vtg-bg);
    border-inline-start: 3px solid var(--vtg-border);
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vtg-ink-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admvl__form[b-zu7xmw92lj] {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--vtg-border);
}

@media (min-width: 560px) {
    .admvl__form[b-zu7xmw92lj] { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: start; }
}
/* /src/Features/Admin/VisaContentCollections.razor.rz.scp.css */
/* Năm bộ sưu tập con của màn biên tập visa (bảng giá · hồ sơ · quy trình ·
   hỏi đáp · cảm nhận). Mỗi khối là một tấm .vtga-panel dựng chung một khuôn:
   thân tấm chia đôi, form bên trái, bảng bên phải.
   Tấm nền, ô nhập, bảng, tem trạng thái lấy từ .vtga-* trong app.css. */

.admvk__wrap[b-y14uel7msi] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

/* Nhúng làm một thẻ của màn quốc gia: dải thẻ ở trên đã chừa khoảng rồi. */
.admvk__wrap.is-embedded[b-y14uel7msi] { margin-top: 0; }

/* Khối không phải khối đang xem chỉ ẨN, không bị bỏ khỏi cây dựng — xem chú
   thích ở tham số Section trong code-behind. */
.vtga-panel.is-hidden[b-y14uel7msi] { display: none; }

/* ── Dải một dòng khi nhúng ──────────────────────────────────────────────
   Cha đã có dải nhắc "nội dung dùng chung" ở đầu trang; ở đây chỉ cần nói cái
   cha không nói: khối này lưu ngay từng dòng, nút "Lưu trang" không đụng tới.
   Nền nhạt hơn .admvk__scope vì đây là câu nhắc phụ, không phải cảnh báo. */
.admvk__bar[b-y14uel7msi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    background: var(--vtg-bg);
}

.admvk__barNote[b-y14uel7msi] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--vtg-muted);
}

.admvk__barNote strong[b-y14uel7msi] { color: var(--vtg-ink-2); }

.admvk__barNote em[b-y14uel7msi] {
    font-style: normal;
    font-weight: 700;
    color: var(--vtg-teal);
}

.admvk__bar .vtg-btn[b-y14uel7msi] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Dải nhắc phạm vi ────────────────────────────────────────────────────
   Không dùng .vtga-note: dải kia đóng được, còn đây là điều kiện thường trực
   của cả năm khối bên dưới. Cùng tông teal với dải ở đầu trang để người dùng
   nhận ra đây là cùng một loại cảnh báo, không phải hai thứ khác nhau. */

.admvk__scope[b-y14uel7msi] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #C7E4E7;
    border-inline-start: 3px solid var(--vtg-teal);
    border-radius: var(--vtg-r-card);
    background: #EAF6F7;
}

.admvk__scopeText[b-y14uel7msi] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
}

.admvk__scopeText strong[b-y14uel7msi] { color: var(--vtg-ink); }

.admvk__scopeText em[b-y14uel7msi] {
    font-style: normal;
    font-weight: 700;
    color: var(--vtg-teal);
}

/* Nút Tải lại không được co lại thành hai dòng khi câu nhắc dài. */
.admvk__scope .vtg-btn[b-y14uel7msi] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Khung chờ ───────────────────────────────────────────────────────── */

.admvk__loading[b-y14uel7msi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 22px;
}

.admvk__skel[b-y14uel7msi] {
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admvk-shimmer-b-y14uel7msi 1.3s ease-in-out infinite;
}

@keyframes admvk-shimmer-b-y14uel7msi {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Đếm số dòng trên thanh đầu tấm ──────────────────────────────────── */

.admvk__count[b-y14uel7msi] {
    margin-inline-start: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-muted);
}

/* ── Thân tấm chia đôi ───────────────────────────────────────────────── */

.admvk__split[b-y14uel7msi] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1280px) {
    /* Form trái cố định bề rộng, bảng chiếm phần còn lại. Form đứng yên khi
       cuộn bảng dài: sửa dòng thứ 20 mà form nằm trên cùng thì phải cuộn ngược
       lên mới thấy ô nhập. Ngưỡng 1280 chứ không phải 1100 vì form ở đây có
       nhiều hàng hai cột, hẹp hơn nữa là nhãn với ô nhập dồn cục. */
    .admvk__split[b-y14uel7msi] { grid-template-columns: 372px minmax(0, 1fr); }
    .admvk__form[b-y14uel7msi] { position: sticky; top: 78px; }
}

/* ── Form ────────────────────────────────────────────────────────────── */

.admvk__form[b-y14uel7msi] { min-width: 0; }

.admvk__formTitle[b-y14uel7msi] {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-muted);
    margin-bottom: 11px;
}

.admvk__fields[b-y14uel7msi] {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.admvk__row2[b-y14uel7msi] {
    display: grid;
    gap: 13px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.admvk__check[b-y14uel7msi] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

/* Ô tích đứng cạnh một ô nhập CÓ NHÃN trong hàng hai cột: đẩy xuống đúng
   chiều cao nhãn để hai cột thẳng hàng mép trên. */
.admvk__check--top[b-y14uel7msi] { padding-top: 24px; }

.admvk__check input[b-y14uel7msi] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--vtg-brand);
}

.admvk__check > span[b-y14uel7msi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.admvk__check em[b-y14uel7msi] {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--vtg-muted);
}

.admvk__actions[b-y14uel7msi] {
    display: flex;
    gap: 8px;
    padding-top: 3px;
}

/* ── Nút trên thanh đầu tấm ──────────────────────────────────────────── */

/* .admvk__count đã đẩy mình sang phải bằng margin auto; nút đứng sau nó nên chỉ
   cần một khoảng thở, không auto lần nữa (hai auto là đẩy đếm về giữa). */
.admvk__headBtn[b-y14uel7msi] {
    flex: 0 0 auto;
    margin-inline-start: 10px;
    white-space: nowrap;
}

/* ── Bộ lọc bảng giá ─────────────────────────────────────────────────────
   Nằm giữa thanh đầu và thân tấm, nền chìm để đọc ra ngay đây là thanh điều
   khiển chứ không phải một hàng dữ liệu nữa. */

.admvk__filters[b-y14uel7msi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 14px;

    /* Chỉ viền DƯỚI: .vtga-panel__head ngay trên đã có border-bottom rồi,
       thêm border-top nữa là hai vạch sát nhau. */
    border-bottom: 1px solid var(--vtg-border);
    background: var(--vtg-bg);
}

.admvk__filter[b-y14uel7msi] {
    flex: 0 1 168px;
    min-width: 148px;
}

/* Ô tìm chữ nuốt phần thừa còn lại của hàng — bốn ô chọn kia đã đủ rộng cho
   nhãn dài nhất của chúng. */
.admvk__filter--grow[b-y14uel7msi] {
    flex: 1 1 220px;
    min-width: 200px;
}

.admvk__filterX[b-y14uel7msi] {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
}

/* ── Bảng ────────────────────────────────────────────────────────────── */

/* min-width: 0 là bắt buộc, không phải trang trí: ô lưới mặc định là auto nên
   bảng rộng sẽ nong cột phải ra và đẩy CẢ THÂN TRANG cuộn ngang, thay vì để
   .vtga-tablewrap tự cuộn trong lòng nó. */
.admvk__list[b-y14uel7msi] { min-width: 0; }

/* Bảng nằm trong cột phải của lưới hai cột nên hẹp hơn bảng toàn trang; hạ
   trần min-width xuống để nó chỉ cuộn ngang khi thực sự chật. */
.admvk__list .vtga-table[b-y14uel7msi] { min-width: 640px; }

/* Bảng giá không còn phải nhường 372px cho form (form đã vào hộp thoại) nên nó
   chiếm trọn bề ngang tấm — bảy cột mới có chỗ đứng mà không cuộn ngang. */
.admvk__list--wide .vtga-table[b-y14uel7msi] { min-width: 860px; }

/* Nơi nộp là cột LỌC ĐƯỢC nên phải đọc ra ngay, không nhét chung vào cột điều
   kiện như trước. Dòng không ghi nơi nộp nhạt hẳn đi: nó là "mọi nơi", không
   phải một địa điểm. */
.admvk__region[b-y14uel7msi] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding-inline: 9px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    color: var(--vtg-ink-2);
}

.admvk__region.is-any[b-y14uel7msi] {
    background: transparent;
    font-weight: 500;
    color: var(--vtg-faint);
}

/* Chữ phụ dưới dòng chính: câu trả lời hỏi đáp và nội dung cảm nhận dài cả
   đoạn, không cắt thì một dòng bảng cao bằng nửa màn hình. */
.admvk__sub[b-y14uel7msi] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 380px;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--vtg-faint);
}

/* Biến thể xếp chồng nhiều dòng điều kiện ngắn trong một ô. display:block gỡ
   luôn cái kẹp hai dòng ở trên: đây là dữ liệu tra cứu, cắt mất vế cuối thì
   người dùng đọc nhầm điều kiện gói mà không hề biết mình đang đọc thiếu. */
.admvk__sub--tight[b-y14uel7msi] {
    display: block;
    max-width: none;
    margin-top: 1px;
    overflow: visible;
}

/* Sao là ký tự thường (không có bộ icon nào trong repo này), nên phải tự nới
   khoảng chữ mới ra dáng dải sao. */
.admvk__stars[b-y14uel7msi] {
    color: var(--vtg-star);
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ── Màn hẹp ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    /* Hai cột 1fr dưới 600px chỉ còn khoảng 130px mỗi ô — nhãn xuống ba dòng.
       Cho xếp chồng luôn. */
    .admvk__row2[b-y14uel7msi] { grid-template-columns: 1fr; }

    /* Xếp chồng rồi thì ô tích không còn ô nhập nào bên cạnh để thẳng hàng. */
    .admvk__check--top[b-y14uel7msi] { padding-top: 0; }

    .admvk__scope[b-y14uel7msi] { flex-direction: column; }
}


/* ══ Hộp thêm/sửa gói giá ═══════════════════════════════════════════════
   Cùng khuôn với hộp chi tiết ở AdminVisaLeads: thang z của app.css là
   header 900 · modal 1000 · popover 1100. Nền KHÔNG bắt sự kiện bấm — form
   mười hai ô, đóng nhầm bằng một cú bấm hụt là gõ lại từ đầu. */

.admvk__ovl[b-y14uel7msi] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px 16px;
    background: rgba(16, 24, 40, .45);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admvk__box[b-y14uel7msi] {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    background: var(--vtg-surface);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-widget);
}

.admvk__boxHead[b-y14uel7msi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--vtg-border);
}

.admvk__boxTitle[b-y14uel7msi] {
    font-size: 16.5px;
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--vtg-ink);
}

.admvk__boxSub[b-y14uel7msi] {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--vtg-muted);
}

.admvk__x[b-y14uel7msi] {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 9px;
    color: var(--vtg-muted);
    cursor: pointer;
}

.admvk__x:hover[b-y14uel7msi] { background: var(--vtg-bg); color: var(--vtg-ink); }
.admvk__x:disabled[b-y14uel7msi] { opacity: .5; cursor: default; }

.admvk__boxBody[b-y14uel7msi] {
    padding: 16px 18px;
    overflow-y: auto;
}

.admvk__boxNote[b-y14uel7msi] { margin-bottom: 13px; }

/* Chân hộp dính đáy: form cuộn được, nhưng nút Lưu thì không được trôi mất. */
.admvk__boxFoot[b-y14uel7msi] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--vtg-border);
}

/* Màn hẹp: hộp chiếm gần trọn chiều cao, hàng hai cột duỗi thành một cột —
   hai ô chọn cạnh nhau ở 360px là nhãn xuống dòng lem nhem. */
@media (max-width: 560px) {
    .admvk__ovl[b-y14uel7msi] { padding: 0; }

    .admvk__box[b-y14uel7msi] {
        max-width: none;
        min-height: 100vh;
        border-radius: 0;
    }

    .admvk__box .admvk__row2[b-y14uel7msi] { grid-template-columns: minmax(0, 1fr); }
}
/* /src/Features/Flights/VtgFlowShell.razor.rz.scp.css */
.vtgfl[b-cdi1wss2b5] {
    padding-block: 20px 48px;
}

@media (min-width: 1024px) {
    .vtgfl[b-cdi1wss2b5] {
        padding-block: 28px 64px;
    }
}

.vtgfl__head[b-cdi1wss2b5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vtgfl__title[b-cdi1wss2b5] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.vtgfl__ico[b-cdi1wss2b5] {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
}

.vtgfl__ico svg[b-cdi1wss2b5] {
    width: 22px;
    height: 22px;
}

.vtgfl__h1[b-cdi1wss2b5] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vtg-ink);
}

@media (min-width: 1024px) {
    .vtgfl__h1[b-cdi1wss2b5] {
        font-size: 26px;
    }
}

.vtgfl__sub[b-cdi1wss2b5] {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--vtg-muted);
}

.vtgfl__actions[b-cdi1wss2b5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vtgfl__steps[b-cdi1wss2b5] {
    margin-top: 18px;
}

.vtgfl__card[b-cdi1wss2b5] {
    margin-top: 18px;
    padding: 18px;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
}

@media (min-width: 1024px) {
    .vtgfl__card[b-cdi1wss2b5] {
        padding: 24px;
    }
}

/* Danh sách kết quả tự lo đệm bên trong — thẻ ngoài chỉ còn viền và bo góc,
   nếu không hai lớp padding cộng lại đẩy nội dung hẹp hẳn trên màn 1280px. */
.vtgfl__card--flush[b-cdi1wss2b5] {
    padding: 0;
    overflow: hidden;
}
/* /src/Features/News/NewsArticle.razor.rz.scp.css */
.vtgart[b-20ztx3eadq] {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
    padding-block: 28px 56px;
}

@media (min-width: 1024px) {
    .vtgart[b-20ztx3eadq] {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 36px;
        padding-block: 36px 72px;
    }
}

.vtgart__main[b-20ztx3eadq] {
    min-width: 0;
}

.vtgart__head[b-20ztx3eadq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.vtgart__cat[b-20ztx3eadq] {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
    font-size: 12px;
    font-weight: 700;
}

.vtgart__title[b-20ztx3eadq] {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--vtg-ink);
}

@media (min-width: 1024px) {
    .vtgart__title[b-20ztx3eadq] {
        font-size: 38px;
    }
}

.vtgart__meta[b-20ztx3eadq] {
    font-size: 13px;
    color: var(--vtg-faint);
}

.vtgart__lead[b-20ztx3eadq] {
    padding: 16px 18px;
    margin-bottom: 22px;
    background: var(--vtg-bg);
    border-left: 3px solid var(--vtg-brand);
    border-radius: 0 var(--vtg-r-input) var(--vtg-r-input) 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--vtg-ink-2);
}

/* ---------------------------------------------------------------------
   Thân bài: HTML do người soạn nhập ở khu quản trị. Reset của Tailwind gỡ
   sạch kiểu mặc định của h2/ul/blockquote, nên KHÔNG khai báo ở đây là bài
   viết ra một khối chữ phẳng lì, không phân cấp.
   Dùng bộ chọn con trực tiếp có tiền tố .vtgart__body để không rò ra ngoài.
   --------------------------------------------------------------------- */
.vtgart__body[b-20ztx3eadq] {
    font-size: 16px;
    line-height: 1.85;
    color: var(--vtg-ink-2);
    overflow-wrap: break-word;   /* nội dung dán từ Word không được phép tràn ngang */
}

.vtgart__body[b-20ztx3eadq]  p {
    margin-block: 0 16px;
}

.vtgart__body[b-20ztx3eadq]  h2 {
    margin-block: 30px 12px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--vtg-ink);
}

.vtgart__body[b-20ztx3eadq]  h3 {
    margin-block: 24px 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.vtgart__body[b-20ztx3eadq]  ul,
.vtgart__body[b-20ztx3eadq]  ol {
    margin-block: 0 16px;
    padding-left: 22px;
}

.vtgart__body[b-20ztx3eadq]  ul {
    list-style: disc;
}

.vtgart__body[b-20ztx3eadq]  ol {
    list-style: decimal;
}

.vtgart__body[b-20ztx3eadq]  li {
    margin-bottom: 6px;
}

.vtgart__body[b-20ztx3eadq]  a {
    color: var(--vtg-brand-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.vtgart__body[b-20ztx3eadq]  strong {
    font-weight: 700;
    color: var(--vtg-ink);
}

.vtgart__body[b-20ztx3eadq]  blockquote {
    margin-block: 20px;
    padding: 14px 18px;
    background: var(--vtg-bg);
    border-left: 3px solid var(--vtg-brand);
    border-radius: 0 var(--vtg-r-input) var(--vtg-r-input) 0;
    font-style: italic;
}

.vtgart__body[b-20ztx3eadq]  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block: 20px;
    border-radius: var(--vtg-r-card);
}

.vtgart__body[b-20ztx3eadq]  figcaption {
    margin-top: -12px;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    color: var(--vtg-faint);
}

/* Bảng do người soạn dán vào thường rộng hơn cột chữ — cho cuộn NGANG trong
   khung riêng, nếu không cả trang bị đẩy tràn trên điện thoại. */
.vtgart__body[b-20ztx3eadq]  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-block: 20px;
    border-collapse: collapse;
    font-size: 14.5px;
}

.vtgart__body[b-20ztx3eadq]  th,
.vtgart__body[b-20ztx3eadq]  td {
    padding: 10px 12px;
    border: 1px solid var(--vtg-border);
    text-align: left;
}

.vtgart__body[b-20ztx3eadq]  th {
    background: var(--vtg-bg);
    font-weight: 700;
    color: var(--vtg-ink);
}

.vtgart__tags[b-20ztx3eadq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.vtgart__foot[b-20ztx3eadq] {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--vtg-border);
}

/* ----- Cột phải ----- */
.vtgart__side[b-20ztx3eadq] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (min-width: 1024px) {
    .vtgart__side[b-20ztx3eadq] {
        position: sticky;
        top: calc(var(--vtg-h-header) + 20px);
        align-self: start;
    }
}

.vtgart__related[b-20ztx3eadq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
}

.vtgart__relatedHead[b-20ztx3eadq] {
    font-size: 16px;
    font-weight: 800;
    color: var(--vtg-ink);
}

.vtgart__relatedItem[b-20ztx3eadq] {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.vtgart__relatedMedia[b-20ztx3eadq] {
    border-radius: 10px;
    overflow: hidden;
}

.vtgart__relatedTitle[b-20ztx3eadq] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--vtg-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtgart__relatedItem:hover .vtgart__relatedTitle[b-20ztx3eadq] {
    color: var(--vtg-brand-strong);
}

.vtgart__relatedMeta[b-20ztx3eadq] {
    margin-top: 3px;
    font-size: 12px;
    color: var(--vtg-faint);
}
/* /src/Features/News/VtgNewsList.razor.rz.scp.css */
.vtgnw[b-ypobdxjrcs] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vtgnw__count[b-ypobdxjrcs] {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vtg-faint);
}

/* ----- Ô tìm ----- */
.vtgnw__search[b-ypobdxjrcs] {
    display: flex;
    gap: 10px;
    max-width: 520px;
}

.vtgnw__searchInput[b-ypobdxjrcs] {
    flex: 1;
    min-width: 0;
    height: var(--vtg-h-field-sm);
    padding: 0 14px;
    font-size: 14.5px;
    color: var(--vtg-ink);
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    outline: none;
    transition: border-color .15s;
}

.vtgnw__searchInput:focus[b-ypobdxjrcs] {
    border-color: var(--vtg-brand);
}

.vtgnw__searchInput[b-ypobdxjrcs]::placeholder {
    color: var(--vtg-faint);
}

/* ----- Bài nổi bật ----- */
.vtgnw__hero[b-ypobdxjrcs] {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}

@media (min-width: 900px) {
    .vtgnw__hero[b-ypobdxjrcs] {
        grid-template-columns: 1.15fr 1fr;
    }
}

.vtgnw__hero:hover[b-ypobdxjrcs] {
    box-shadow: var(--vtg-shadow-widget);
    transform: translateY(-2px);
}

.vtgnw__heroMedia[b-ypobdxjrcs] {
    min-height: 220px;
}

@media (min-width: 900px) {
    .vtgnw__heroMedia[b-ypobdxjrcs] {
        min-height: 300px;
    }
}

.vtgnw__heroBody[b-ypobdxjrcs] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    justify-content: center;
}

.vtgnw__heroTitle[b-ypobdxjrcs] {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--vtg-ink);
}

@media (min-width: 900px) {
    .vtgnw__heroTitle[b-ypobdxjrcs] {
        font-size: 27px;
    }
}

.vtgnw__heroSummary[b-ypobdxjrcs] {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--vtg-ink-2);
    /* Tóm tắt do người soạn nhập, dài ngắn tuỳ bài — cắt 3 dòng để thẻ không
       kéo cao hơn ảnh bên cạnh và làm vỡ lưới. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----- Nhãn danh mục ----- */
.vtgnw__badge[b-ypobdxjrcs] {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
    font-size: 12px;
    font-weight: 700;
}

.vtgnw__badge--onImage[b-ypobdxjrcs] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--vtg-shadow-card);
}

/* ----- Lưới thẻ ----- */
.vtgnw__grid[b-ypobdxjrcs] {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .vtgnw__grid[b-ypobdxjrcs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .vtgnw__grid[b-ypobdxjrcs] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vtgnw__card[b-ypobdxjrcs] {
    display: flex;
    flex-direction: column;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}

.vtgnw__card:hover[b-ypobdxjrcs] {
    box-shadow: var(--vtg-shadow-widget);
    transform: translateY(-2px);
}

.vtgnw__cardMedia[b-ypobdxjrcs] {
    position: relative;
}

.vtgnw__cardBody[b-ypobdxjrcs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    flex: 1;
}

.vtgnw__cardTitle[b-ypobdxjrcs] {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--vtg-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtgnw__cardSummary[b-ypobdxjrcs] {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--vtg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtgnw__meta[b-ypobdxjrcs] {
    margin-top: auto;
    font-size: 12.5px;
    color: var(--vtg-faint);
}

/* ----- Phân trang ----- */
.vtgnw__pager[b-ypobdxjrcs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.vtgnw__pagerText[b-ypobdxjrcs] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-muted);
}
/* /src/Features/Payment/PaymentReturn.razor.rz.scp.css */
.vtgpr[b-zonykzgtoy] {
    padding-block: 24px 56px;
}

@media (min-width: 1024px) {
    .vtgpr[b-zonykzgtoy] {
        padding-block: 36px 72px;
    }
}

.vtgpr__card[b-zonykzgtoy] {
    max-width: 880px;
    margin-inline: auto;
    padding: 28px 20px;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
    text-align: center;
}

@media (min-width: 1024px) {
    .vtgpr__card[b-zonykzgtoy] {
        padding: 40px 36px;
    }
}

.vtgpr__card--state[b-zonykzgtoy] {
    max-width: 560px;
}

.vtgpr__ico[b-zonykzgtoy] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-inline: auto;
    border-radius: 999px;
}

.vtgpr__ico svg[b-zonykzgtoy] {
    width: 30px;
    height: 30px;
}

.vtgpr__ico--good[b-zonykzgtoy] {
    background: #E4F6EE;
    color: var(--vtg-ok);
}

.vtgpr__ico--bad[b-zonykzgtoy] {
    background: #FDECEA;
    color: var(--vtg-bad);
}

.vtgpr__ico--wait[b-zonykzgtoy] {
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
}

.vtgpr__ico--muted[b-zonykzgtoy] {
    background: var(--vtg-bg);
    color: var(--vtg-muted);
}

.vtgpr__spinner[b-zonykzgtoy] {
    width: 46px;
    height: 46px;
    margin-inline: auto;
    border: 4px solid var(--vtg-border);
    border-top-color: var(--vtg-brand);
    border-radius: 999px;
    animation: vtgpr-spin-b-zonykzgtoy .9s linear infinite;
}

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

.vtgpr__h[b-zonykzgtoy] {
    margin-top: 16px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--vtg-ink);
}

@media (min-width: 1024px) {
    .vtgpr__h[b-zonykzgtoy] {
        font-size: 26px;
    }
}

.vtgpr__sub[b-zonykzgtoy] {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--vtg-muted);
}

.vtgpr__attempt[b-zonykzgtoy] {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vtg-faint);
}

/* ----- Mã đơn / mã đặt chỗ ----- */
.vtgpr__chips[b-zonykzgtoy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.vtgpr__chip[b-zonykzgtoy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px;
    background: var(--vtg-bg);
    border-radius: var(--vtg-r-input);
}

.vtgpr__chip--good[b-zonykzgtoy] {
    background: #E4F6EE;
}

.vtgpr__chip .lbl[b-zonykzgtoy] {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vtg-faint);
}

.vtgpr__chip .val[b-zonykzgtoy] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--vtg-ink);
}

/* ----- Dải thông tin giao dịch ----- */
.vtgpr__strip[b-zonykzgtoy] {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
    padding: 16px;
    background: var(--vtg-bg);
    border-radius: var(--vtg-r-input);
    text-align: left;
}

@media (min-width: 768px) {
    .vtgpr__strip[b-zonykzgtoy] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vtgpr__cell[b-zonykzgtoy] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vtgpr__cell .lbl[b-zonykzgtoy] {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vtg-faint);
}

.vtgpr__cell .val[b-zonykzgtoy] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--vtg-ink);
    overflow-wrap: anywhere;
}

.vtgpr__cell .val--mono[b-zonykzgtoy] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.vtgpr__service[b-zonykzgtoy] {
    margin-top: 22px;
    text-align: left;
}

/* ----- Tổng tiền ----- */
.vtgpr__sum[b-zonykzgtoy] {
    margin-top: 22px;
    padding: 16px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-input);
    text-align: left;
}

.vtgpr__sumRow[b-zonykzgtoy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 6px;
    font-size: 14px;
    color: var(--vtg-ink-2);
}

.vtgpr__sumRow--total[b-zonykzgtoy] {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--vtg-border);
    font-size: 16px;
    font-weight: 800;
    color: var(--vtg-ink);
}

.vtgpr__sumRow--total span:last-child[b-zonykzgtoy] {
    color: var(--vtg-brand-strong);
}

.vtgpr__actions[b-zonykzgtoy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}

.vtgpr__help[b-zonykzgtoy] {
    margin-top: 16px;
    font-size: 13px;
    color: var(--vtg-muted);
}

.vtgpr__help a[b-zonykzgtoy] {
    font-weight: 700;
    color: var(--vtg-brand-strong);
}
/* /src/Features/Tours/TourBookingCard.razor.rz.scp.css */
/* Dòng tóm tắt đợt khởi hành trong thẻ đặt tour ở trang chi tiết.
   Chỉ để ĐỌC — chỗ chọn đợt nằm ở bước 2 (TourBookingPage), không dựng lại ô chọn ở đây. */
.vtg-nextdep[b-6qonlz840n] {
    padding: 12px 14px;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-field);
}

.vtg-nextdep__top[b-6qonlz840n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vtg-nextdep__label[b-6qonlz840n] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vtg-muted);
}

.vtg-nextdep__seats[b-6qonlz840n] {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vtg-ok);
}

.vtg-nextdep__seats.is-low[b-6qonlz840n] { color: var(--vtg-bad); }

.vtg-nextdep__date[b-6qonlz840n] {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--vtg-ink);
}

/* Ngày về đi kèm trên CÙNG dòng khi đủ chỗ, xuống dòng khi thẻ hẹp — nên để inline
   chứ không tách thành block cố định. */
.vtg-nextdep__date span[b-6qonlz840n] {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vtg-muted);
}
/* /src/Features/Tours/TourBookingDonePage.razor.rz.scp.css */
/* Bước 3 luồng đặt tour. Dùng lại .vtg-sum__h / .vtg-sum__meta của bước 2 cho khối chương
   trình bên phải — hai bước phải nhìn ra là cùng một luồng. */
.vtg-done[b-74etvw4qn7] { padding-block: 24px 56px; }

.vtg-done__h1[b-74etvw4qn7] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--vtg-ink);
}

@media (min-width: 1024px) {
    .vtg-done[b-74etvw4qn7] { padding-block: 32px 72px; }
    .vtg-done__h1[b-74etvw4qn7] { font-size: 30px; }
}

.vtg-done__hero[b-74etvw4qn7] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border-radius: var(--vtg-r-card);
    border: 1px solid #CFEBDF;
    background: #F3FBF7;
}

.vtg-done__tick[b-74etvw4qn7] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--vtg-r-pill);
    color: #fff;
    background: var(--vtg-ok);
}

.vtg-done__hero > .min-w-0[b-74etvw4qn7] { flex: 1 1 320px; }

.vtg-done__code[b-74etvw4qn7] {
    flex: none;
    padding: 10px 18px;
    border-radius: var(--vtg-r-input);
    text-align: center;
    background: var(--vtg-surface);
    border: 1px dashed var(--vtg-ok);
}

.vtg-done__code span[b-74etvw4qn7] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
}

.vtg-done__code strong[b-74etvw4qn7] {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--vtg-ok);
}

/* ── Bảng nhãn – giá trị ────────────────────────────────────────────── */
.vtg-done__dl[b-74etvw4qn7] { display: flex; flex-direction: column; }

.vtg-done__dl > div[b-74etvw4qn7] {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: baseline;
    padding: 11px 0;
}

.vtg-done__dl > div + div[b-74etvw4qn7] { border-top: 1px solid var(--vtg-border); }

.vtg-done__dl dt[b-74etvw4qn7] { flex: none; font-size: 13.5px; color: var(--vtg-muted); }

.vtg-done__dl dd[b-74etvw4qn7] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    color: var(--vtg-ink);
    overflow-wrap: anywhere;
}

.vtg-done__strong[b-74etvw4qn7] { font-size: 17px !important; font-weight: 800 !important; color: var(--vtg-brand-strong) !important; }

.vtg-done__badge[b-74etvw4qn7] {
    display: inline-flex;
    padding: 3px 11px;
    border-radius: var(--vtg-r-pill);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.vtg-done__lines[b-74etvw4qn7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-field);
}

.vtg-done__lines > div[b-74etvw4qn7] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--vtg-ink-2);
}

/* ── Khối hướng dẫn thanh toán ──────────────────────────────────────── */
.vtg-done__pay[b-74etvw4qn7] {
    padding: 14px 16px;
    border-radius: var(--vtg-r-input);
    border: 1px solid var(--vtg-border);
    background: var(--vtg-field);
}

.vtg-done__pay-h[b-74etvw4qn7] {
    font-size: 14px;
    font-weight: 800;
    color: var(--vtg-ink);
}

.vtg-done__pay ul[b-74etvw4qn7] {
    margin: 8px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vtg-ink-2);
}

.vtg-done__pay li[b-74etvw4qn7] { list-style: disc; }

/* ── Khối chương trình bên phải ─────────────────────────────────────── */
.vtg-done__prog[b-74etvw4qn7] {
    padding: 20px;
    border-radius: var(--vtg-r-card);
    border: 1.5px dashed var(--vtg-brand);
    background: var(--vtg-surface);
}

.vtg-done__next[b-74etvw4qn7] {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vtg-ink-2);
}

.vtg-done__next li[b-74etvw4qn7] { list-style: decimal; }

/* Hai lớp dưới đây trùng tên với bước 2 nhưng PHẢI khai lại: CSS của Razor component là
   scoped, khai ở TourBookingPage.razor.css thì không áp được sang trang này. Giữ giống hệt
   để hai bước nhìn ra là cùng một luồng. */
.vtg-sum__h[b-74etvw4qn7] {
    font-size: 17px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
}

.vtg-sum__meta[b-74etvw4qn7] { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.vtg-sum__meta > div[b-74etvw4qn7] { display: flex; gap: 10px; justify-content: space-between; }
.vtg-sum__meta dt[b-74etvw4qn7] { flex: none; font-size: 13px; color: var(--vtg-muted); }
.vtg-sum__meta dd[b-74etvw4qn7] { margin: 0; font-size: 13.5px; font-weight: 700; text-align: right; color: var(--vtg-ink); }
/* /src/Features/Tours/TourBookingPage.razor.rz.scp.css */
/* Bước 2 luồng đặt tour. Bốn trang luồng đặt không có hero ảnh nên header ở trạng thái
   nền đặc và tự chèn spacer — ở đây chỉ cần đệm dọc bình thường. */
.vtg-book[b-ckt0vbfz90] { padding-block: 24px 56px; }

.vtg-book__h1[b-ckt0vbfz90] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--vtg-ink);
}

@media (min-width: 1024px) {
    .vtg-book[b-ckt0vbfz90] { padding-block: 32px 72px; }
    .vtg-book__h1[b-ckt0vbfz90] { font-size: 30px; }
}

/* Số thứ tự khối — đặt trong luồng chữ chứ không neo tuyệt đối, để tiêu đề dài xuống dòng
   không đè lên nó. */
.vtg-book__step[b-ckt0vbfz90] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-bottom: 8px;
    border-radius: var(--vtg-r-pill);
    font-size: 13px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.vtg-book__alert[b-ckt0vbfz90] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--vtg-r-card);
    border: 1px solid #F3C9C4;
    background: #FDF3F2;
    color: var(--vtg-bad);
}

.vtg-book__area[b-ckt0vbfz90] {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--vtg-r-input);
    border: 1px solid transparent;
    background: var(--vtg-field);
    font-size: 15px;
    font-weight: 500;
    color: var(--vtg-ink);
    outline: none;
    resize: vertical;
}

.vtg-book__area:focus[b-ckt0vbfz90] { border-color: var(--vtg-brand); background: var(--vtg-surface); }
.vtg-book__area[b-ckt0vbfz90]::placeholder { color: var(--vtg-faint); }

/* ── Đợt khởi hành: DANH SÁCH DÒNG ──────────────────────────────────────
   Xếp dòng chứ không phải lưới ô, để ngày đi / số chỗ / giá của mọi đợt thẳng cột với
   nhau — mắt quét dọc một lượt là so được, không phải đọc lại từng ô.
   Mobile: dòng gãy thành hai hàng (ngày + giá ở trên, số chỗ xuống dưới) vì 320px không
   đủ cho bốn cụm nằm ngang mà chữ vẫn đọc được. */
.vtg-deplist[b-ckt0vbfz90] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vtg-deprow[b-ckt0vbfz90] {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    text-align: left;
    border-radius: var(--vtg-r-input);
    border: 1.5px solid var(--vtg-border);
    background: var(--vtg-surface);
    transition: border-color .15s, background .15s;
}

.vtg-deprow:hover:not(:disabled)[b-ckt0vbfz90] { border-color: var(--vtg-brand); }
.vtg-deprow.is-on[b-ckt0vbfz90] { border-color: var(--vtg-brand); background: var(--vtg-brand-soft); }
.vtg-deprow:disabled[b-ckt0vbfz90] { opacity: .5; cursor: not-allowed; }

/* Chấm tròn kiểu radio: cả DÒNG mới là vùng bấm, nên đây chỉ là dấu hiệu nhìn. */
.vtg-deprow__tick[b-ckt0vbfz90] {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--vtg-border);
    background: var(--vtg-surface);
}

.vtg-deprow.is-on .vtg-deprow__tick[b-ckt0vbfz90] {
    border-color: var(--vtg-brand);
    box-shadow: inset 0 0 0 3px var(--vtg-surface), inset 0 0 0 9px var(--vtg-brand);
}

.vtg-deprow__when[b-ckt0vbfz90] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vtg-deprow__date[b-ckt0vbfz90] { font-size: 15.5px; font-weight: 800; color: var(--vtg-ink); }
.vtg-deprow__back[b-ckt0vbfz90] { font-size: 12.5px; color: var(--vtg-muted); }

.vtg-deprow__seats[b-ckt0vbfz90] {
    grid-column: 2 / 4;
    grid-row: 2;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vtg-ok);
}

.vtg-deprow__seats.is-low[b-ckt0vbfz90] { color: var(--vtg-bad); }

.vtg-deprow__money[b-ckt0vbfz90] {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
}

.vtg-deprow__price[b-ckt0vbfz90] { font-size: 16px; font-weight: 800; color: var(--vtg-brand-strong); }
.vtg-deprow__was[b-ckt0vbfz90] { font-size: 12px; color: var(--vtg-faint); text-decoration: line-through; }
.vtg-deprow__unit[b-ckt0vbfz90] { font-size: 11.5px; color: var(--vtg-muted); }

@media (min-width: 640px) {
    .vtg-deprow[b-ckt0vbfz90] { grid-template-columns: 20px minmax(0, 1fr) auto auto; column-gap: 16px; }
    .vtg-deprow__tick[b-ckt0vbfz90] { grid-row: 1; }
    .vtg-deprow__seats[b-ckt0vbfz90] { grid-column: 3; grid-row: 1; justify-self: end; }
    .vtg-deprow__money[b-ckt0vbfz90] { grid-column: 4; min-width: 132px; }
}

/* ── Ô đếm khách ────────────────────────────────────────────────────── */
.vtg-pax[b-ckt0vbfz90] {
    display: flex;
    flex-direction: column;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-field);
}

.vtg-pax__row[b-ckt0vbfz90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
}

.vtg-pax__row + .vtg-pax__row[b-ckt0vbfz90] { border-top: 1px solid var(--vtg-border); }

.vtg-pax__ctl[b-ckt0vbfz90] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.vtg-pax__ctl button[b-ckt0vbfz90] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--vtg-brand-strong);
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
}

.vtg-pax__ctl button:hover:not(:disabled)[b-ckt0vbfz90] { border-color: var(--vtg-brand); }
.vtg-pax__ctl button:disabled[b-ckt0vbfz90] { opacity: .4; cursor: not-allowed; }

.vtg-pax__ctl span[b-ckt0vbfz90] {
    min-width: 30px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--vtg-ink);
}

/* ── Dòng khách ─────────────────────────────────────────────────────── */
.vtg-guest[b-ckt0vbfz90] {
    position: relative;
    padding: 16px 14px 14px;
    border-radius: var(--vtg-r-input);
    border: 1px solid var(--vtg-border);
}

.vtg-guest__tag[b-ckt0vbfz90] {
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 2px 10px;
    border-radius: var(--vtg-r-pill);
    font-size: 12px;
    font-weight: 700;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.vtg-guest__grid[b-ckt0vbfz90] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .vtg-guest__grid[b-ckt0vbfz90] { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ── Hình thức thanh toán ───────────────────────────────────────────── */
.vtg-pay[b-ckt0vbfz90] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--vtg-r-input);
    border: 1.5px solid var(--vtg-border);
    cursor: pointer;
}

.vtg-pay.is-on[b-ckt0vbfz90] { border-color: var(--vtg-brand); background: var(--vtg-brand-soft); }
.vtg-pay input[b-ckt0vbfz90] { margin-top: 3px; accent-color: var(--vtg-brand); flex: none; }
.vtg-pay__title[b-ckt0vbfz90] { display: block; font-size: 14.5px; font-weight: 700; color: var(--vtg-ink); }
.vtg-pay__desc[b-ckt0vbfz90] { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--vtg-muted); }

/* ── Tạm tính ───────────────────────────────────────────────────────── */
.vtg-sum__box[b-ckt0vbfz90] {
    padding: 20px;
    border-radius: var(--vtg-r-card);
    border: 1.5px dashed var(--vtg-brand);
    background: var(--vtg-surface);
}

@media (min-width: 1024px) {
    /* Dính dưới header. Không đặt trên .vtg-sum__box vì phần tử sticky phải là con trực
       tiếp của lưới thì mới bám được chiều cao cột. */
    .vtg-sum[b-ckt0vbfz90] { position: sticky; top: calc(var(--vtg-h-header) + 16px); }
}

.vtg-sum__h[b-ckt0vbfz90] {
    font-size: 17px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
}

.vtg-sum__meta[b-ckt0vbfz90] { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.vtg-sum__meta > div[b-ckt0vbfz90] { display: flex; gap: 10px; justify-content: space-between; }
.vtg-sum__meta dt[b-ckt0vbfz90] { flex: none; font-size: 13px; color: var(--vtg-muted); }
.vtg-sum__meta dd[b-ckt0vbfz90] { margin: 0; font-size: 13.5px; font-weight: 700; text-align: right; color: var(--vtg-ink); }

.vtg-sum__lines[b-ckt0vbfz90] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vtg-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vtg-sum__line[b-ckt0vbfz90] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    color: var(--vtg-ink-2);
}

.vtg-sum__total[b-ckt0vbfz90] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--vtg-border);
    font-size: 14px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.vtg-sum__agree[b-ckt0vbfz90] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--vtg-ink-2);
}

.vtg-sum__agree input[b-ckt0vbfz90] { margin-top: 2px; accent-color: var(--vtg-brand); flex: none; }
.vtg-sum__agree a[b-ckt0vbfz90] { font-weight: 700; color: var(--vtg-brand-strong); text-decoration: underline; }
/* /src/Features/Tours/TourDetail.razor.rz.scp.css */
/* Trang chi tiết tour.
   Chỉ những khối KHÔNG diễn đạt được bằng lớp tiện ích mới nằm đây: mục lục dính, dòng
   thời gian lịch trình, ô thông số. Màu lấy từ token --vtg-*, không hard-code hex. */

/* ── Hero: giá + chip ───────────────────────────────────────────────── */
.vtg-hero-chip[b-axxfrux0lc] {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--vtg-r-pill);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(2px);
}

.vtg-hero-price[b-axxfrux0lc] {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-top: 2px;
}

.vtg-hero-price span[b-axxfrux0lc] {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

/* ── Mục lục dính ───────────────────────────────────────────────────── */
.vtg-tnav[b-axxfrux0lc] {
    position: sticky;
    top: var(--vtg-h-header);
    z-index: 800;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vtg-border);
}

.vtg-tnav__inner[b-axxfrux0lc] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
}

.vtg-tnav__links[b-axxfrux0lc] {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.vtg-tnav__links[b-axxfrux0lc]::-webkit-scrollbar { display: none; }

.vtg-tnav__links a[b-axxfrux0lc] {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: var(--vtg-r-pill);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--vtg-muted);
    transition: color .15s, background-color .15s;
}

.vtg-tnav__links a:hover[b-axxfrux0lc] { color: var(--vtg-ink); background: var(--vtg-field); }

/* Mục đang xem. JS chỉ đặt data-active TRÊN THẺ NAV (thuộc tính Blazor không dựng ra nên
   lượt render sau không xoá mất); phần tô sáng để CSS lo. Xem vtg.sectionNav. */
/* Khớp ĐUÔI ($=) chứ không khớp cả chuỗi: href nay ghi đủ đường dẫn
   ("/tours/abc#lt"), khớp cứng "#lt" là không mục nào sáng nữa. */
.vtg-tnav[data-active="tq"] a[href$="#tq"][b-axxfrux0lc],
.vtg-tnav[data-active="lt"] a[href$="#lt"][b-axxfrux0lc],
.vtg-tnav[data-active="bg"] a[href$="#bg"][b-axxfrux0lc],
.vtg-tnav[data-active="kh"] a[href$="#kh"][b-axxfrux0lc],
.vtg-tnav[data-active="cs"] a[href$="#cs"][b-axxfrux0lc],
.vtg-tnav[data-active="dg"] a[href$="#dg"][b-axxfrux0lc],
.vtg-tnav[data-active="lq"] a[href$="#lq"][b-axxfrux0lc] {
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.vtg-tnav__cta[b-axxfrux0lc] { display: none; }

@media (min-width: 1024px) {
    .vtg-tnav__cta[b-axxfrux0lc] { display: inline-flex; flex: 0 0 auto; }
}

/* Chừa chỗ cho header + mục lục khi nhảy tới neo, nếu không tiêu đề mục chui xuống dưới
   thanh dính và khách tưởng bấm không ăn. */
.vtg-anchor[b-axxfrux0lc] { scroll-margin-top: calc(var(--vtg-h-header) + 68px); }

/* ── Ô thông số chính ───────────────────────────────────────────────── */
.vtg-facts[b-axxfrux0lc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .vtg-facts[b-axxfrux0lc] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vtg-fact[b-axxfrux0lc] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-field);
}

.vtg-fact__ico[b-axxfrux0lc] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: var(--vtg-surface);
    color: var(--vtg-brand-strong);
    box-shadow: var(--vtg-shadow-card);
}

.vtg-fact__label[b-axxfrux0lc] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
}

.vtg-fact__value[b-axxfrux0lc] {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vtg-ink);
    overflow-wrap: anywhere;
}

/* ── Lưới thông số phụ ──────────────────────────────────────────────── */
.vtg-dl[b-axxfrux0lc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    padding-top: 20px;
    border-top: 1px solid var(--vtg-border);
}

@media (min-width: 768px) {
    .vtg-dl[b-axxfrux0lc] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vtg-dl dd[b-axxfrux0lc] { margin: 0; }

/* ── Dòng thời gian lịch trình ──────────────────────────────────────── */
.vtg-tl[b-axxfrux0lc] { list-style: none; margin: 0; padding: 0; }

.vtg-tl__item[b-axxfrux0lc] { position: relative; padding-left: 46px; }

/* Đường nối dọc chạy qua tâm các chấm ngày. Chấm rộng 32px, tâm ở 16px. */
.vtg-tl__item[b-axxfrux0lc]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--vtg-border);
}

.vtg-tl__item:first-child[b-axxfrux0lc]::before { top: 22px; }
.vtg-tl__item:last-child[b-axxfrux0lc]::before { bottom: auto; height: 22px; }

.vtg-tl__head[b-axxfrux0lc] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    text-align: left;
}

.vtg-tl__dot[b-axxfrux0lc] {
    position: absolute;
    left: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--vtg-r-pill);
    font-size: 13px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
    box-shadow: 0 0 0 4px var(--vtg-surface);
}

.vtg-tl__item.is-open .vtg-tl__dot[b-axxfrux0lc] {
    color: #fff;
    background: var(--vtg-brand);
}

.vtg-tl__title[b-axxfrux0lc] { flex: 1; min-width: 0; }

.vtg-tl__eyebrow[b-axxfrux0lc] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-faint);
}

.vtg-tl__name[b-axxfrux0lc] {
    display: block;
    margin-top: 1px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.vtg-tl__caret[b-axxfrux0lc] { transition: transform .18s ease; }
.vtg-tl__item.is-open .vtg-tl__caret[b-axxfrux0lc] { transform: rotate(180deg); }

.vtg-tl__body[b-axxfrux0lc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 18px;
}

/* Ảnh trong nội dung soạn thảo: kho ảnh cũ mất nhiều tệp nên ảnh còn sống cũng đủ kích cỡ
   lộn xộn — ép về khung chung. Ảnh hỏng do vtg.hideBrokenImages ẩn đi. */
.vtg-tl__body[b-axxfrux0lc]  img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ── Bao gồm / chưa bao gồm ─────────────────────────────────────────── */
.vtg-inex[b-axxfrux0lc] {
    padding: 16px;
    border-radius: var(--vtg-r-input);
    border: 1px solid var(--vtg-border);
}

.vtg-inex--in[b-axxfrux0lc] { background: #F3FBF7; border-color: #CFEBDF; }
.vtg-inex--out[b-axxfrux0lc] { background: var(--vtg-field); }

.vtg-inex__head[b-axxfrux0lc] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
}

.vtg-inex--in .vtg-inex__head[b-axxfrux0lc] { color: var(--vtg-ok); }
.vtg-inex--out .vtg-inex__head[b-axxfrux0lc] { color: var(--vtg-muted); }

/* ── Khối rỗng "chưa mở đợt khởi hành" ──────────────────────────────── */
.vtg-empty[b-axxfrux0lc] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: var(--vtg-r-input);
    border: 1px dashed var(--vtg-border);
    background: var(--vtg-field);
}

.vtg-empty__ico[b-axxfrux0lc] {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

/* ── Cam kết ở cột phải ─────────────────────────────────────────────── */
.vtg-trust[b-axxfrux0lc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--vtg-r-card);
    border: 1px solid var(--vtg-border);
    background: var(--vtg-surface);
}

.vtg-trust__row[b-axxfrux0lc] { display: flex; align-items: flex-start; gap: 9px; }

/* ── Nút chữ (mở/thu gọn tất cả) ────────────────────────────────────── */
.vtg-linkbtn[b-axxfrux0lc] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtg-brand-strong);
    padding: 4px 2px;
}

.vtg-linkbtn:hover[b-axxfrux0lc] { text-decoration: underline; }

/* ── Tóm tắt ngày đang đóng ─────────────────────────────────────────── */
.vtg-tl__teaser[b-axxfrux0lc] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--vtg-muted);
}

/* ── Đợt khởi hành ──────────────────────────────────────────────────
   Trước đây là <table> 5 cột ép min-width 640px: trên điện thoại khách phải kéo ngang
   mới chạm được nút chọn đợt. Thẻ tự xuống hàng thì không cần thanh cuộn nào. */
.vtg-deps__note[b-axxfrux0lc] {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-brand-soft);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vtg-ink-2);
}

.vtg-deps__note strong[b-axxfrux0lc] {
    font-size: 15px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
}

.vtg-depgrp[b-axxfrux0lc] { margin-top: 16px; }

.vtg-depgrp__head[b-axxfrux0lc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vtg-faint);
}

.vtg-depgrp__head[b-axxfrux0lc]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--vtg-border);
}

.vtg-deps[b-axxfrux0lc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vtg-dep[b-axxfrux0lc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
    border-radius: var(--vtg-r-input);
    border: 1px solid var(--vtg-border);
    background: var(--vtg-surface);
    transition: border-color .15s, background-color .15s;
}

.vtg-dep.is-chosen[b-axxfrux0lc] {
    border-color: var(--vtg-brand);
    background: var(--vtg-brand-soft);
}

/* Đợt hết chỗ vẫn để nguyên trong danh sách — khách cần thấy tour BÁN CHẠY tới đâu —
   nhưng phải mờ đi để không tranh chỗ với đợt còn đặt được. */
.vtg-dep.is-out[b-axxfrux0lc] { opacity: .58; }

/* Dòng ngày chiếm trọn hàng trên điện thoại; từ 640px trở lên mới xếp cùng hàng với
   tình trạng chỗ, giá và nút. */
.vtg-dep__when[b-axxfrux0lc] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    min-width: 0;
}

@media (min-width: 640px) {
    .vtg-dep__when[b-axxfrux0lc] { flex: 1 1 210px; }
}

.vtg-dep__dow[b-axxfrux0lc] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-faint);
}

.vtg-dep__date[b-axxfrux0lc] {
    font-size: 16px;
    font-weight: 800;
    color: var(--vtg-ink);
}

.vtg-dep__back[b-axxfrux0lc] {
    font-size: 13px;
    color: var(--vtg-muted);
}

.vtg-dep__seats[b-axxfrux0lc] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--vtg-r-pill);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: #E7F6F0;
    color: var(--vtg-ok);
}

.vtg-dep__seats.is-low[b-axxfrux0lc],
.vtg-dep__seats.is-out[b-axxfrux0lc] {
    background: #FDECEA;
    color: var(--vtg-bad);
}

.vtg-dep__price[b-axxfrux0lc] {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vtg-dep__cta[b-axxfrux0lc] {
    flex: 0 0 auto;
    margin-left: auto;
}
/* /src/Features/_Shared/VtgAuthPhoto.razor.rz.scp.css */
/* Chuyển mờ giữa các tấm ảnh của panel xác thực.

   CHỈ đặt opacity ở đây. Mọi thứ về khung hình (position, inset, object-fit, object-position,
   và đoạn `width: calc(100% + 44px); max-width: none` để ảnh tràn ra hai lỗ bấm của đường xé)
   vẫn nằm ở khối .vtg-auth trong Styles/app.css — chép lại là sớm muộn hai bên lệch nhau.

   Luật scoped ra thành `.vtg-auth__photo[b-xxx]` (0,2,0) nên thắng luật trần trong app.css
   (0,1,0) mà không cần !important. */

.vtg-auth__photo[b-2ye1x81k5q] {
    opacity: 0;
    transition: opacity .9s ease;
}

.vtg-auth__photo.is-on[b-2ye1x81k5q] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .vtg-auth__photo[b-2ye1x81k5q] { transition: none; }
}
/* /src/Features/_Shared/VtgHero.razor.rz.scp.css */
.vtg-hero[b-xg9tlty7uh] {
    position: relative;
    height: var(--h-sm, 260px);
}

.vtg-hero__media[b-xg9tlty7uh] {
    position: absolute;
    inset: 0;
}

.vtg-hero__media--lg[b-xg9tlty7uh] {
    display: none;
}

.vtg-hero__scrim[b-xg9tlty7uh] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(9,17,32,.55), rgba(9,17,32,.25));
}

.vtg-hero__body[b-xg9tlty7uh] {
    position: absolute;
    inset: 0;
    /* Header nổi ĐÈ lên hero (trang có hero không chèn spacer) — chừa đúng chiều cao
       header, nếu không dòng đầu của tiêu đề chui xuống dưới thanh nav. */
    padding-top: var(--vtg-h-header);
}

@media (min-width: 1024px) {
    .vtg-hero[b-xg9tlty7uh] {
        height: var(--h, 470px);
    }

    .vtg-hero__media--sm[b-xg9tlty7uh] {
        display: none;
    }

    .vtg-hero__media--lg[b-xg9tlty7uh] {
        display: block;
    }

    /* Desktop: nội dung neo TRÊN, không căn giữa — widget tìm kiếm sẽ đè lên
       phần dưới của hero. 40px tính TỪ đáy header (padding-top của __body). */
    .vtg-hero__body .vtg-container[b-xg9tlty7uh] {
        justify-content: flex-start;
        padding-top: 40px;
    }
}
/* /src/Features/_Shared/VtgPriceCard.razor.rz.scp.css */
.vtg-price-card[b-boe9cgwwuf] {
    background: var(--vtg-surface);
    border-radius: var(--vtg-r-card);
    overflow: hidden;
    box-shadow: var(--vtg-shadow-card);
    min-width: 0; /* thiếu dòng này thì thẻ trong grid không co được, tràn cột */
    color: inherit;
    transition: box-shadow .18s, transform .18s;
}

a.vtg-price-card:hover[b-boe9cgwwuf] {
    box-shadow: 0 12px 28px rgba(22,33,58,.12);
    transform: translateY(-2px);
}
/* /src/Features/_Shared/VtgPromoPopup.razor.rz.scp.css */
/* Popup khuyến mãi trang chủ — xem VtgPromoPopup.razor. */

.vtg-pop[b-ddli519lqp] {
    position: fixed;
    inset: 0;
    /* Trên thang z-index của site công khai: header 1000, thanh nổi 1100 — hộp thoại
       phải đứng trên tất cả, kể cả nút liên hệ nổi. */
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    outline: none;
}

.vtg-pop__scrim[b-ddli519lqp] {
    position: absolute;
    inset: 0;
    background: rgba(9, 17, 32, .58);
    backdrop-filter: blur(2px);
    /* Không bắt sự kiện chuột: bấm ra nền KHÔNG đóng, nên cũng đừng để con trỏ đổi
       thành dạng bấm được rồi người ta bấm hoài không thấy gì. */
    pointer-events: none;
}

.vtg-pop__panel[b-ddli519lqp] {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--vtg-surface);
    border-radius: var(--vtg-r-widget);
    box-shadow: var(--vtg-shadow-widget);
    animation: vtg-pop-in-b-ddli519lqp .28s cubic-bezier(.22, .61, .36, 1);
}

@keyframes vtg-pop-in-b-ddli519lqp {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.vtg-pop__close[b-ddli519lqp] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vtg-r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--vtg-ink);
    box-shadow: var(--vtg-shadow-pop);
    cursor: pointer;
}

.vtg-pop__close:hover[b-ddli519lqp] { background: #fff; }
.vtg-pop__close svg[b-ddli519lqp] { width: 17px; height: 17px; }

.vtg-pop__media[b-ddli519lqp] {
    /* Bo góc trên theo panel; ảnh tự cắt trong khung 4/3. */
    border-radius: var(--vtg-r-widget) var(--vtg-r-widget) 0 0;
    overflow: hidden;
}

/* Ảnh nằm trong VtgImage ⇒ class đi qua tham số Class nên mang scope của component CON;
   phải ::deep mới với tới. */
[b-ddli519lqp] .vtg-pop__img {
    aspect-ratio: 4 / 3;
    width: 100%;
}

.vtg-pop__body[b-ddli519lqp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px;
}

.vtg-pop__badge[b-ddli519lqp] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 10px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vtg-pop__title[b-ddli519lqp] {
    color: var(--vtg-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.vtg-pop__sub[b-ddli519lqp] {
    color: var(--vtg-muted);
    font-size: 14px;
    line-height: 1.6;
}

.vtg-pop__actions[b-ddli519lqp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    width: 100%;
}

.vtg-pop__cta[b-ddli519lqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--vtg-h-btn);
    padding-inline: 22px;
    border-radius: var(--vtg-r-input);
    background: var(--vtg-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.vtg-pop__cta:hover[b-ddli519lqp] { background: var(--vtg-brand-strong); }

.vtg-pop__later[b-ddli519lqp] {
    height: var(--vtg-h-btn);
    padding-inline: 14px;
    border-radius: var(--vtg-r-input);
    color: var(--vtg-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.vtg-pop__later:hover[b-ddli519lqp] { color: var(--vtg-ink); }

.vtg-pop__note[b-ddli519lqp] {
    color: var(--vtg-faint);
    font-size: 12.5px;
}

/* Màn hẹp: panel nở gần hết bề ngang, ảnh dẹt lại để phần chữ và nút không bị
   đẩy xuống dưới mép màn hình. */
@media (max-width: 479.98px) {
    [b-ddli519lqp] .vtg-pop__img { aspect-ratio: 16 / 10; }
    .vtg-pop__title[b-ddli519lqp] { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .vtg-pop__panel[b-ddli519lqp] { animation: none; }
}
/* /src/Features/_Shared/VtgPromoSlider.razor.rz.scp.css */
/* Dải khuyến mãi trang chủ — xem VtgPromoSlider.razor.
   Mọi màu lấy từ token --vtg-*; KHÔNG hard-code hex ngoài lớp phủ tối (nó là màu
   của ảnh, không phải màu thương hiệu). */

.vtg-promo__stage[b-uh4rhk69gj] {
    position: relative;
    overflow: hidden;
    border-radius: var(--vtg-r-card);
    box-shadow: var(--vtg-shadow-card);
}

.vtg-promo__track[b-uh4rhk69gj] {
    display: flex;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* flex-basis 100% + min-width 0: thiếu min-width thì slide có tiêu đề dài tự nong
   rộng ra và cả dải lệch dần sau mỗi lần chuyển. */
.vtg-promo__cell[b-uh4rhk69gj] {
    flex: 0 0 100%;
    min-width: 0;
}

.vtg-promo__slide[b-uh4rhk69gj] {
    position: relative;
    display: block;
    height: 220px;
    color: #fff;
}

/* Ảnh nằm trong VtgImage nên class .vtg-promo__img mang thuộc tính scope của
   COMPONENT CON, không phải của file này — phải ::deep mới với tới. */
[b-uh4rhk69gj] .vtg-promo__img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.vtg-promo__scrim[b-uh4rhk69gj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Đậm ở đáy, gần như trong ở đỉnh: chữ nằm dưới cùng nên chỉ cần tối phần đó,
       phủ đều cả ảnh là ảnh xỉn hết. */
    background: linear-gradient(180deg, rgba(9, 17, 32, .05) 35%, rgba(9, 17, 32, .78) 100%);
}

.vtg-promo__body[b-uh4rhk69gj] {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    /* Chừa chỗ cho hàng chấm ở góc phải dưới. */
    padding-right: 96px;
}

.vtg-promo__badge[b-uh4rhk69gj] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 10px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-brand);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Đặt màu THẲNG lên thẻ h3: quy tắc `h1,h2,h3,h4 { color: inherit }` ở app.css khiến
   tiêu đề ăn theo cha, nhưng nếu sau này ai bọc thêm một lớp có màu mực thì chữ chìm
   nghỉm vào ảnh tối. */
.vtg-promo__title[b-uh4rhk69gj] {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.vtg-promo__sub[b-uh4rhk69gj] {
    color: rgba(255, 255, 255, .88);
    font-size: 13.5px;
    line-height: 1.5;
    /* Phụ đề dài tới 500 ký tự — cắt 2 dòng để chữ không trèo lên hết ảnh. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vtg-promo__cta[b-uh4rhk69gj] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.vtg-promo__slide:hover .vtg-promo__cta[b-uh4rhk69gj] {
    text-decoration: underline;
}

/* ----- Điều hướng ----------------------------------------------------- */

.vtg-promo__nav[b-uh4rhk69gj] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vtg-r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--vtg-ink);
    box-shadow: var(--vtg-shadow-pop);
    cursor: pointer;
}

.vtg-promo__nav:hover[b-uh4rhk69gj] {
    background: #fff;
}

.vtg-promo__nav svg[b-uh4rhk69gj] {
    width: 18px;
    height: 18px;
}

.vtg-promo__nav--prev[b-uh4rhk69gj] { left: 12px; }
.vtg-promo__nav--next[b-uh4rhk69gj] { right: 12px; }

.vtg-promo__dots[b-uh4rhk69gj] {
    position: absolute;
    right: 16px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vtg-promo__dot[b-uh4rhk69gj] {
    width: 8px;
    height: 8px;
    border-radius: var(--vtg-r-pill);
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.vtg-promo__dot:hover[b-uh4rhk69gj] { background: rgba(255, 255, 255, .8); }

.vtg-promo__dot.is-active[b-uh4rhk69gj] {
    width: 22px;
    background: #fff;
}

/* ----- Màn lớn -------------------------------------------------------- */

@media (min-width: 768px) {
    .vtg-promo__slide[b-uh4rhk69gj] { height: 300px; }

    .vtg-promo__body[b-uh4rhk69gj] {
        padding: 24px 28px;
        padding-right: 120px;
        gap: 8px;
    }

    .vtg-promo__title[b-uh4rhk69gj] { font-size: 26px; }
    .vtg-promo__sub[b-uh4rhk69gj] { font-size: 15px; max-width: 60ch; }
}

@media (min-width: 1024px) {
    .vtg-promo__slide[b-uh4rhk69gj] { height: 360px; }
    .vtg-promo__title[b-uh4rhk69gj] { font-size: 30px; }
}

/* Người dùng đã tắt hiệu ứng chuyển động ở hệ điều hành thì đừng trượt. */
@media (prefers-reduced-motion: reduce) {
    .vtg-promo__track[b-uh4rhk69gj] { transition: none; }
    .vtg-promo__dot[b-uh4rhk69gj] { transition: none; }
}
/* /src/Features/_Shared/VtgSteps.razor.rz.scp.css */
.vtg-steps ol[b-m1qj4wrjqt] {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 640px;
}

.vtg-steps__item[b-m1qj4wrjqt] {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Đường nối chạy giữa hai chấm: bắt đầu từ giữa ô này sang giữa ô sau, canh theo tâm chấm
   (chấm 44px ⇒ tâm ở 22px). Ô cuối không có đường nối. */
.vtg-steps__item + .vtg-steps__item[b-m1qj4wrjqt]::before {
    content: "";
    position: absolute;
    top: 21px;
    right: 50%;
    left: -50%;
    height: 2px;
    margin-inline: 22px;
    background: var(--vtg-border);
}

.vtg-steps__item--done[b-m1qj4wrjqt]::before,
.vtg-steps__item--now[b-m1qj4wrjqt]::before {
    background: var(--vtg-brand);
}

.vtg-steps__hit[b-m1qj4wrjqt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.vtg-steps__dot[b-m1qj4wrjqt] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--vtg-r-pill);
    font-size: 15px;
    font-weight: 800;
    background: var(--vtg-field);
    color: var(--vtg-faint);
    border: 2px solid var(--vtg-border);
}

.vtg-steps__label[b-m1qj4wrjqt] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-muted);
    overflow-wrap: anywhere;
}

.vtg-steps__item--done .vtg-steps__dot[b-m1qj4wrjqt] {
    background: var(--vtg-brand-soft);
    border-color: var(--vtg-brand-soft);
    color: var(--vtg-brand-strong);
}

.vtg-steps__item--now .vtg-steps__dot[b-m1qj4wrjqt] {
    background: var(--vtg-brand);
    border-color: var(--vtg-brand);
    color: #fff;
    box-shadow: 0 0 0 5px var(--vtg-brand-soft);
}

.vtg-steps__item--now .vtg-steps__label[b-m1qj4wrjqt] {
    color: var(--vtg-brand-strong);
    font-weight: 800;
}

a.vtg-steps__hit:hover .vtg-steps__label[b-m1qj4wrjqt] { color: var(--vtg-ink); }
a.vtg-steps__hit:hover .vtg-steps__dot[b-m1qj4wrjqt] { border-color: var(--vtg-brand); }
/* /src/Features/_Shared/VtgWidget.razor.rz.scp.css */
/* Kéo widget đè lên hero. Mobile kéo ít hơn vì hero chỉ cao 260px. */
.vtg-widget--float[b-0avfaukime] {
    position: relative;
    margin-top: -40px;
}

@media (min-width: 1024px) {
    .vtg-widget--float[b-0avfaukime] {
        margin-top: -92px;
    }
}
/* /src/Portals/Admin/VtgAdminIcon.razor.rz.scp.css */
/* Kích thước icon do CHÍNH component quyết, đổi qua biến --vtgai-size.

   Vì sao là custom property mà không để component cha đặt width/height qua ::deep:
   luật ::deep của cha biên dịch ra `.wrapper[b-cha] .vtgai` (0,2,0) — ĐÚNG BẰNG
   specificity của `.vtgai[b-icon]` ở đây. Hai luật ngang điểm thì thứ tự trong bundle
   quyết định, mà thứ tự đó không nằm trong tay ai — sửa chỗ khác cũng đổi được kết quả.
   Biến CSS thì cascade vào, không tranh specificity với gì cả. */
.vtgai[b-2reuthwv93] {
    width: var(--vtgai-size, 18px);
    height: var(--vtgai-size, 18px);
    flex: 0 0 auto;
}
/* /src/Portals/Admin/VtgAdminLayout.razor.rz.scp.css */
/* =====================================================================
   Khu quản trị — sidebar tối + cột nội dung sáng.
   Chỉ dùng token --vtg-*: cùng thương hiệu với site công khai, khác cách bày.
   ===================================================================== */

.vtgadm[b-wgzy64b3tg] {
    --vtgadm-side: 248px;
    --vtgadm-top: 60px;

    min-height: 100vh;
    background: var(--vtg-bg);
    color: var(--vtg-ink);
    font-family: var(--vtg-font);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.vtgadm__side[b-wgzy64b3tg] {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--vtgadm-side);
    z-index: 900;   /* thang z ở app.css: header 900 < modal 1000 < popover 1100 */

    display: flex;
    flex-direction: column;
    background: var(--vtg-footer);
    color: #fff;

    /* Ngăn kéo mobile: mặc định đẩy ra ngoài màn hình, mở ra khi .is-menu-open. */
    transform: translateX(-100%);
    transition: transform .22s ease, width .18s ease;
}

.vtgadm.is-menu-open .vtgadm__side[b-wgzy64b3tg] { transform: none; }

.vtgadm__brand[b-wgzy64b3tg] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--vtgadm-top);
    padding-inline: 18px;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255,255,255,.10);
    text-decoration: none;
}

.vtgadm__brand img[b-wgzy64b3tg] {
    height: 26px;
    width: auto;
}

.vtgadm__brandTag[b-wgzy64b3tg] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--vtg-r-pill);
}

.vtgadm__nav[b-wgzy64b3tg] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 10px 18px;
}

.vtgadm__group[b-wgzy64b3tg] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.42);
    padding: 16px 10px 6px;
}

/* Mục nav là thẻ <a> viết THẲNG trong file này nên có sẵn thuộc tính scope —
   không cần ::deep (khác VtgHeader, chỗ đó dùng <NavLink> là COMPONENT nên thẻ
   <a> nó sinh ra không mang scope; xem chú thích ở VtgHeader.razor.css). */
.vtgadm__item[b-wgzy64b3tg] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    color: rgba(255,255,255,.80);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.vtgadm__item:hover[b-wgzy64b3tg] {
    background: rgba(255,255,255,.07);
    color: #fff;
}

.vtgadm__item.is-active[b-wgzy64b3tg] {
    background: var(--vtg-brand);
    color: #fff;
    font-weight: 600;
}

/* VtgAdminIcon là COMPONENT: <svg> nó sinh ra không mang scope của layout,
   nên phải neo qua ::deep. Viết thẳng .vtgai { } sẽ biên dịch thành
   .vtgai[b-xxxxx] — không khớp gì, luật chết âm thầm mà build vẫn xanh.
   KÍCH THƯỚC thì để VtgAdminIcon.razor.css lo (qua biến --vtgai-size): đặt
   width/height ở đây là ngang điểm specificity với luật của chính component,
   thắng/thua do thứ tự bundle — xem chú thích trong file đó. */
.vtgadm__item[b-wgzy64b3tg]  .vtgai {
    opacity: .9;
}

.vtgadm__item.is-active[b-wgzy64b3tg]  .vtgai { opacity: 1; }

.vtgadm__sideFoot[b-wgzy64b3tg] {
    flex: 0 0 auto;
    padding: 14px 18px 18px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.vtgadm__sideFoot a[b-wgzy64b3tg] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: rgba(255,255,255,.62);
    text-decoration: none;
}

.vtgadm__sideFoot a:hover[b-wgzy64b3tg] {
    color: #fff;
    text-decoration: underline;
}

/* ── Lớp phủ ngăn kéo ────────────────────────────────────────────────── */

.vtgadm__scrim[b-wgzy64b3tg] {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(15,23,41,.48);

    /* Ẩn bằng opacity + visibility (không display:none) để có hiệu ứng mờ dần. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.vtgadm.is-menu-open .vtgadm__scrim[b-wgzy64b3tg] {
    opacity: 1;
    visibility: visible;
}

/* ── Cột nội dung ────────────────────────────────────────────────────── */

.vtgadm__main[b-wgzy64b3tg] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.vtgadm__top[b-wgzy64b3tg] {
    position: sticky;
    top: 0;
    z-index: 880;

    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--vtgadm-top);
    padding-inline: 14px;

    background: var(--vtg-surface);
    border-bottom: 1px solid var(--vtg-border);
}

.vtgadm__burger[b-wgzy64b3tg] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    margin-inline-start: -6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--vtg-ink);
    cursor: pointer;
}

.vtgadm__burger:hover[b-wgzy64b3tg] { background: var(--vtg-bg); }
.vtgadm__burger svg[b-wgzy64b3tg] { width: 22px; height: 22px; }

/* Nút thu gọn dùng chung hình dáng với burger, chỉ khác điều kiện hiện:
   burger < 1024px (ngăn kéo), nút này >= 1024px (dải icon). Hai nút không bao giờ
   cùng xuất hiện nên chúng dùng chung một ô bên trái thanh trên. */
.vtgadm__railBtn[b-wgzy64b3tg] {
    display: none;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    margin-inline-start: -6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--vtg-muted);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.vtgadm__railBtn:hover[b-wgzy64b3tg] {
    background: var(--vtg-bg);
    color: var(--vtg-ink);
}

.vtgadm__railBtn svg[b-wgzy64b3tg] { width: 21px; height: 21px; }

.vtgadm__crumb[b-wgzy64b3tg] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--vtg-ink);

    /* Nhãn dài trên mobile: cắt bằng ellipsis chứ đừng đẩy nút Đăng xuất ra ngoài. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vtgadm__topRight[b-wgzy64b3tg] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tên tài khoản chiếm chỗ mà không mang thông tin gấp trên mobile — ẩn dưới 640px. */
.vtgadm__user[b-wgzy64b3tg] {
    display: none;
    font-size: 13.5px;
    color: var(--vtg-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vtgadm__body[b-wgzy64b3tg] {
    flex: 1 1 auto;
    padding: 18px var(--vtg-pad-page-sm) 40px;
}

/* ── Desktop ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .vtgadm__user[b-wgzy64b3tg] { display: block; }
}

@media (min-width: 1024px) {
    .vtgadm[b-wgzy64b3tg] {
        --vtgadm-top: 64px;
    }

    /* Sidebar cố định hiện thường trực; cột nội dung thụt vào đúng bề rộng của nó. */
    .vtgadm__side[b-wgzy64b3tg] { transform: none; }

    .vtgadm__main[b-wgzy64b3tg] {
        margin-inline-start: var(--vtgadm-side);
        transition: margin-inline-start .18s ease;
    }

    /* Ngăn kéo + lớp phủ là chuyện của mobile — desktop tắt hẳn để lỡ còn cờ
       _menuOpen sót lại (đổi kích thước cửa sổ khi đang mở) cũng không phủ đen trang. */
    .vtgadm__scrim[b-wgzy64b3tg] { display: none; }

    .vtgadm__burger[b-wgzy64b3tg] { display: none; }

    .vtgadm__railBtn[b-wgzy64b3tg] { display: grid; }

    .vtgadm__top[b-wgzy64b3tg] { padding-inline: var(--vtg-pad-page); }

    .vtgadm__body[b-wgzy64b3tg] { padding: 24px var(--vtg-pad-page) 56px; }

    /* ── Dải thu gọn ─────────────────────────────────────────────────────
       Neo vào class 'vtg-rail' TRÊN THẺ <html>, do vtg-interop.js đặt ngay lúc tải
       trang. Blazor không hề dựng thẻ <html> nên nó không bao giờ xoá mất class này
       giữa hai lượt render — cùng thủ thuật với data-active của mục lục.

       Chỉ nằm trong media query >= 1024px: dưới ngưỡng đó sidebar là NGĂN KÉO, thu nó
       lại thành 76px thì vừa che nội dung vừa chẳng tiết kiệm được gì.

       Chữ (nhãn mục, tên nhóm, chân trang) được GIẤU chứ không xoá khỏi DOM: trình đọc
       màn hình vẫn đọc được, và không cần dựng lại cây nav mỗi lần bấm nút. */
    html.vtg-rail .vtgadm[b-wgzy64b3tg] { --vtgadm-side: 76px; }

    /* Logo là ảnh chữ ngang 640x171. Ở dải hẹp, cắt lấy phần bên trái — đúng cái
       biểu tượng tròn — thay vì bóp cả dòng chữ xuống còn 15px không đọc nổi.
       object-fit:cover phóng ảnh theo CHIỀU CAO (26/171 lớn hơn 22/640) rồi xén ngang,
       object-position:left giữ lại đầu bên trái. */
    html.vtg-rail .vtgadm__brand[b-wgzy64b3tg] {
        justify-content: center;
        padding-inline: 0;
    }

    html.vtg-rail .vtgadm__brand img[b-wgzy64b3tg] {
        width: 22px;
        max-width: none;
        object-fit: cover;
        object-position: left center;
    }

    html.vtg-rail .vtgadm__brandTag[b-wgzy64b3tg] { display: none; }

    html.vtg-rail .vtgadm__nav[b-wgzy64b3tg] { padding-inline: 8px; }

    html.vtg-rail .vtgadm__item[b-wgzy64b3tg] {
        justify-content: center;
        padding-inline: 0;
        gap: 0;
    }

    /* Nhãn mục nằm trong <span> con trực tiếp; tem "sắp có" là <em>. */
    html.vtg-rail .vtgadm__item > span[b-wgzy64b3tg],
    html.vtg-rail .vtgadm__soonTag[b-wgzy64b3tg] { display: none; }

    /* Tên nhóm không còn chỗ — thay bằng một vạch ngăn, chữ vẫn ở lại cho trình đọc. */
    html.vtg-rail .vtgadm__group[b-wgzy64b3tg] {
        height: 1px;
        padding: 0;
        margin: 14px 12px 10px;
        overflow: hidden;
        text-indent: -9999px;
        background: rgba(255,255,255,.14);
    }

    html.vtg-rail .vtgadm__sideFoot[b-wgzy64b3tg] {
        padding-inline: 0;
        text-align: center;
    }

    html.vtg-rail .vtgadm__sideFoot a[b-wgzy64b3tg] { justify-content: center; }

    html.vtg-rail .vtgadm__footText[b-wgzy64b3tg] { display: none; }

    html.vtg-rail .vtgadm__footIcon[b-wgzy64b3tg] { font-size: 15px; }
}

/* ── Mục chưa dựng ───────────────────────────────────────────────────── */

.vtgadm__item.is-soon[b-wgzy64b3tg] {
    color: rgba(255,255,255,.34);
    cursor: default;
}

.vtgadm__item.is-soon:hover[b-wgzy64b3tg] { background: transparent; }

.vtgadm__soonTag[b-wgzy64b3tg] {
    margin-inline-start: auto;
    flex: 0 0 auto;
    /* Nhãn dài ("Banner & ảnh nền") xuống hai dòng thì ô còn lại hẹp và chữ trong tem
       bị ngắt thành "sắp / có". Cho tem giữ một dòng, phần co lại là nhãn. */
    white-space: nowrap;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,255,255,.42);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--vtg-r-pill);
    padding: 2px 6px;
}
/* /src/Portals/Public/VtgHeader.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Header — hai trạng thái: .is-floating (đè lên hero) / .is-solid (nền trắng).
   Mọi màu đi qua --vtg-*; chuyển trạng thái bằng transition nên không giật.
   ═══════════════════════════════════════════════════════════════════════ */

.vtg-hd[b-9arikvpu0l] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--vtg-h-header);
    transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

/* Mobile: logo trái, hamburger phải. */
.vtg-hd__inner[b-9arikvpu0l] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Desktop: LƯỚI ba cột 1fr auto 1fr, KHÔNG phải space-between.
   Với space-between, cột phải (hotline + đăng nhập + đăng ký ≈ 300px) nặng hơn logo
   nhiều nên phần dư dồn hết về giữa và nav bị đẩy lệch trái ~150px — đúng khoảng
   trống lớn giữa nav và nhóm nút. Hai cột 1fr hai bên buộc nav nằm giữa THẬT,
   bất kể hai bên rộng bao nhiêu. */
@media (min-width: 1024px) {
    .vtg-hd__inner[b-9arikvpu0l] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 24px;
    }

    .vtg-hd__brand[b-9arikvpu0l] {
        justify-self: start;
    }

    .vtg-hd__actions[b-9arikvpu0l] {
        justify-self: end;
    }
}

/* ── Trạng thái NỔI: trong suốt, chữ trắng ───────────────────────────── */
.vtg-hd.is-floating[b-9arikvpu0l] {
    background: transparent;
}

    /* Vệt tối từ đỉnh, để logo cam và chữ nav trắng đều đọc được trên ảnh hero.
       Buông xuống QUÁ đáy header (-44px) để chuyển dần vào ảnh, cắt đúng mép 68px sẽ
       thành một đường ngang thấy rõ.
       Đặt sau nội dung nên phải pointer-events:none, nếu không nó nuốt mọi cú bấm. */
    .vtg-hd.is-floating[b-9arikvpu0l]::before {
        content: "";
        position: absolute;
        inset: 0 0 -44px 0;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(9,17,32,.58) 0%,
            rgba(9,17,32,.42) 45%,
            rgba(9,17,32,.16) 75%,
            rgba(9,17,32,0) 100%);
    }

/* ── Trạng thái ĐẶC: trắng, viền mảnh, bóng nhẹ ──────────────────────── */
.vtg-hd.is-solid[b-9arikvpu0l] {
    background: rgba(255,255,255,.92);
    /* Kính mờ: nội dung trôi bên dưới thành vệt màu nhòe thay vì cắt cụt ở mép header. */
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 var(--vtg-border), 0 6px 20px rgba(22,33,58,.06);
}

/* Trình duyệt không hỗ trợ backdrop-filter thì phải là trắng ĐẶC, không phải trắng 92%
   (nếu không, chữ trang bên dưới lộ xuyên qua header). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .vtg-hd.is-solid[b-9arikvpu0l] {
        background: #fff;
    }
}

.vtg-hd__spacer[b-9arikvpu0l] {
    height: var(--vtg-h-header);
}

/* ── Logo ────────────────────────────────────────────────────────────── */
.vtg-hd__brand[b-9arikvpu0l] {
    flex: none;
    position: relative;
    display: block;
    height: 30px;
}

.vtg-hd__logo[b-9arikvpu0l] {
    display: block;
    height: 100%;
    width: auto;
    transition: filter .25s ease;
}

/* Trên ảnh hero: tách logo khỏi nền bằng ĐỔ BÓNG, không đụng tới màu.
   drop-shadow bám theo vùng alpha của PNG nên viền tối ôm đúng hình chữ và biểu tượng —
   box-shadow sẽ đổ bóng cho cả ô chữ nhật trong suốt. */
.vtg-hd.is-floating .vtg-hd__logo[b-9arikvpu0l] {
    filter: drop-shadow(0 1px 2px rgba(9,17,32,.55)) drop-shadow(0 3px 10px rgba(9,17,32,.4));
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.vtg-hd__nav[b-9arikvpu0l] {
    display: none;
    align-items: center;
    gap: 8px;
}

/* ── Mục nav — BẮT BUỘC đi qua ::deep ─────────────────────────────────
   <NavLink> là COMPONENT: thẻ <a> nó sinh ra KHÔNG mang thuộc tính scope
   [b-xxxxx] của VtgHeader. Viết thẳng `.vtg-hd__link { }` thì Razor biên dịch
   thành `.vtg-hd__link[b-xxxxx]` — không khớp gì cả, mọi luật chết âm thầm mà
   build vẫn xanh (ba mục dính thành một chuỗi "Vé máy bay Khách sạn Visa").
   `.vtg-hd__nav ::deep .vtg-hd__link` biên dịch thành
   `.vtg-hd__nav[b-xxxxx] .vtg-hd__link` — neo vào <nav> (có scope) rồi mới với
   xuống con. Thêm mục nav nào cũng phải giữ đúng dạng này. */
.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link {
    position: relative;
    /* Đệm ngang rộng: ba mục ngắn sát nhau đọc ra thành một chuỗi liền
       chứ không ra ba mục riêng. */
    padding: 9px 18px;
    border-radius: var(--vtg-r-pill);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--vtg-ink-2);
    transition: color .18s ease, background-color .18s ease;
}

/* Gạch chân chạy từ giữa ra — dấu hiệu "đang ở đây" rõ hơn là chỉ đổi màu chữ. */
.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link span {
    position: relative;
    display: inline-block;
}

.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link span::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -5px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transition: left .22s ease, right .22s ease, opacity .22s ease;
}

.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link:hover {
    color: var(--vtg-brand-strong);
}

.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link.active {
    color: var(--vtg-brand);
}

.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link.active span::after,
.vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link:hover span::after {
    left: 0;
    right: 0;
    opacity: 1;
}

.vtg-hd.is-floating .vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link {
    color: rgba(255,255,255,.9);
}

.vtg-hd.is-floating .vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link:hover {
    color: #fff;
    background: rgba(255,255,255,.14);
}

.vtg-hd.is-floating .vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link.active {
    color: #fff;
}

/* ── Cụm hành động bên phải ──────────────────────────────────────────── */
.vtg-hd__actions[b-9arikvpu0l] {
    display: none;
    align-items: center;
    gap: 16px;
    flex: none;
}

.vtg-hd__signin[b-9arikvpu0l] {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--vtg-ink-2);
    transition: color .18s ease;
}

    .vtg-hd__signin:hover[b-9arikvpu0l] {
        color: var(--vtg-brand-strong);
    }

.vtg-hd.is-floating .vtg-hd__signin[b-9arikvpu0l] {
    color: #fff;
}

.vtg-hd__cta[b-9arikvpu0l] {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--vtg-r-pill);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    background: var(--vtg-brand);
    box-shadow: 0 6px 16px rgba(242,117,27,.32);
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

    .vtg-hd__cta:hover[b-9arikvpu0l] {
        background: var(--vtg-brand-strong);
        box-shadow: 0 8px 22px rgba(242,117,27,.42);
        transform: translateY(-1px);
    }

    .vtg-hd__cta:active[b-9arikvpu0l] {
        transform: translateY(0);
    }

/* ── Tài khoản + dropdown ────────────────────────────────────────────── */
.vtg-hd__account[b-9arikvpu0l] {
    position: relative;
}

.vtg-hd__avatar-btn[b-9arikvpu0l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 6px;
    border-radius: var(--vtg-r-pill);
    background: transparent;
    cursor: pointer;
    transition: background-color .18s ease;
}

    .vtg-hd__avatar-btn:hover[b-9arikvpu0l] {
        background: var(--vtg-field);
    }

.vtg-hd.is-floating .vtg-hd__avatar-btn:hover[b-9arikvpu0l] {
    background: rgba(255,255,255,.16);
}

.vtg-hd__avatar[b-9arikvpu0l] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.vtg-hd__account-name[b-9arikvpu0l] {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-ink);
}

.vtg-hd__caret[b-9arikvpu0l] {
    color: var(--vtg-muted);
    transition: transform .2s ease;
}

    .vtg-hd__caret.is-open[b-9arikvpu0l] {
        transform: rotate(180deg);
    }

.vtg-hd.is-floating .vtg-hd__account-name[b-9arikvpu0l],
.vtg-hd.is-floating .vtg-hd__caret[b-9arikvpu0l] {
    color: #fff;
}

/* Lớp bắt cú bấm ra ngoài. Nằm DƯỚI menu (1100) nhưng TRÊN mọi thứ khác. */
.vtg-hd__scrim[b-9arikvpu0l] {
    position: fixed;
    inset: 0;
    z-index: 1099;
}

.vtg-hd__menu[b-9arikvpu0l] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    min-width: 210px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: var(--vtg-surface);
    border: 1px solid var(--vtg-border);
    border-radius: 14px;
    box-shadow: var(--vtg-shadow-pop);
    animation: vtg-hd-pop-b-9arikvpu0l .16s ease-out;
}

@keyframes vtg-hd-pop-b-9arikvpu0l {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

.vtg-hd__menu a[b-9arikvpu0l] {
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-ink-2);
    transition: background-color .15s ease, color .15s ease;
}

    .vtg-hd__menu a:hover[b-9arikvpu0l] {
        background: var(--vtg-field);
        color: var(--vtg-ink);
    }

    .vtg-hd__menu a.is-danger[b-9arikvpu0l] {
        color: var(--vtg-bad);
    }

        .vtg-hd__menu a.is-danger:hover[b-9arikvpu0l] {
            background: #FDECEA;
        }

.vtg-hd__menu-sep[b-9arikvpu0l] {
    height: 1px;
    margin: 5px 6px;
    background: var(--vtg-border);
}

/* ── Nút hamburger (mobile) ──────────────────────────────────────────── */
.vtg-hd__burger[b-9arikvpu0l] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0 9px;
    background: transparent;
    cursor: pointer;
}

    .vtg-hd__burger span[b-9arikvpu0l] {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--vtg-ink);
        transition: transform .25s ease, opacity .2s ease, background-color .25s ease;
        transform-origin: center;
    }

.vtg-hd.is-floating .vtg-hd__burger span[b-9arikvpu0l] {
    background: #fff;
}

/* Ba vạch gập thành dấu X khi mở */
.vtg-hd__burger.is-open span:nth-child(1)[b-9arikvpu0l] {
    transform: translateY(7px) rotate(45deg);
}

.vtg-hd__burger.is-open span:nth-child(2)[b-9arikvpu0l] {
    opacity: 0;
}

.vtg-hd__burger.is-open span:nth-child(3)[b-9arikvpu0l] {
    transform: translateY(-7px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════════════
   Ngăn kéo menu mobile — trượt từ phải, phủ toàn màn hình
   ═══════════════════════════════════════════════════════════════════════ */
/* Ngăn kéo là MENU nên nằm ở tầng 1100 của thang z-index chung
   (header 900 < modal 1000 < menu/dropdown 1100), không phải tầng riêng. */
.vtg-dr__scrim[b-9arikvpu0l] {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: rgba(9,17,32,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}

    .vtg-dr__scrim.is-open[b-9arikvpu0l] {
        opacity: 1;
        visibility: visible;
    }

.vtg-dr[b-9arikvpu0l] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    width: min(86vw, 340px);
    display: flex;
    flex-direction: column;
    background: var(--vtg-surface);
    box-shadow: -18px 0 44px rgba(22,33,58,.18);
    /* visibility đi kèm transform: ẩn hẳn khỏi tab order khi đóng, không chỉ đẩy ra ngoài mép. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.22,1,.36,1), visibility .3s;
}

    .vtg-dr.is-open[b-9arikvpu0l] {
        transform: translateX(0);
        visibility: visible;
    }

.vtg-dr__head[b-9arikvpu0l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--vtg-h-header);
    padding: 0 var(--vtg-pad-page-sm);
    border-bottom: 1px solid var(--vtg-border);
}

    .vtg-dr__head img[b-9arikvpu0l] {
        height: 28px;
        width: auto;
        display: block;
    }

.vtg-dr__close[b-9arikvpu0l] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: -8px;
    border-radius: 50%;
    background: transparent;
    color: var(--vtg-ink-2);
    cursor: pointer;
}

    .vtg-dr__close:hover[b-9arikvpu0l] {
        background: var(--vtg-field);
    }

.vtg-dr__nav[b-9arikvpu0l] {
    display: flex;
    flex-direction: column;
    padding: 8px;
    overflow-y: auto;
}

    .vtg-dr__nav a[b-9arikvpu0l] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 12px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        color: var(--vtg-ink);
        transition: background-color .15s ease;
    }

        .vtg-dr__nav a:hover[b-9arikvpu0l] {
            background: var(--vtg-field);
        }

        .vtg-dr__nav a svg[b-9arikvpu0l] {
            color: var(--vtg-faint);
            flex: none;
        }

/* Các mục hiện lần lượt khi mở — chỉ chạy ở trạng thái mở, tránh nháy lúc đóng. */
.vtg-dr.is-open .vtg-dr__nav a[b-9arikvpu0l] {
    animation: vtg-dr-item-b-9arikvpu0l .32s cubic-bezier(.22,1,.36,1) backwards;
    animation-delay: calc(var(--i) * 45ms + 60ms);
}

@keyframes vtg-dr-item-b-9arikvpu0l {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
}

.vtg-dr__hotline[b-9arikvpu0l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 8px 16px;
    padding: 14px 16px;
    border-radius: var(--vtg-r-card);
    background: var(--vtg-brand-soft);
}

.vtg-dr__hotline-label[b-9arikvpu0l] {
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-brand-strong);
    opacity: .8;
}

.vtg-dr__hotline-num[b-9arikvpu0l] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--vtg-brand-strong);
}

.vtg-dr__foot[b-9arikvpu0l] {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vtg-border);
}

/* ═══════════════════════════════════════════════════════════════════════
   Desktop ≥1024: hiện nav + cụm hành động, ẩn hamburger và ngăn kéo
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .vtg-hd__nav[b-9arikvpu0l],
    .vtg-hd__actions[b-9arikvpu0l] {
        display: flex;
    }

    .vtg-hd__brand[b-9arikvpu0l] {
        height: 34px;
    }

    .vtg-hd__burger[b-9arikvpu0l],
    .vtg-dr[b-9arikvpu0l],
    .vtg-dr__scrim[b-9arikvpu0l] {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Nén thanh header ở dải desktop hẹp
   ───────────────────────────────────────────────────────────────────────
   Lưới `1fr auto 1fr` KHÔNG co lại được: mục nav đặt white-space:nowrap nên
   min-content của cột giữa đúng bằng bề rộng thật của cả dãy nav, còn logo và
   cụm nút hai bên cũng không co. Vượt bề rộng container là header TRÀN RA NGOÀI
   và cả trang mọc thanh cuộn ngang — build vẫn xanh, chỉ mắt mới thấy.

   Với 7 mục nav (thêm "Giới thiệu"), bề rộng cần ≈1260px trong khi container chỉ
   cho 1152px (--vtg-maxw 1216 trừ 2×32 đệm). Nên phải bóp lại theo hai nấc.
   Bóp ĐỆM và CỠ CHỮ chứ KHÔNG giấu bớt mục: giấu mục nào là trang đó mất hẳn lối
   vào trên desktop (ngăn kéo mobile lúc này đã bị ẩn).

   Thêm mục nav thứ 8 thì phải tính lại chỗ này — 1152px đã gần kín. BẬT LẠI
   VtgFeatures.PublicRegistrationEnabled cũng vậy: nút "Đăng ký" quay lại là cụm nút
   phải phình thêm ~100px, mà ở 1280px hiện chỉ còn dư 16px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ≥1280: container chốt ở 1152px nên mọi bề rộng lớn hơn đều dùng chung nấc này. */
@media (min-width: 1280px) {
    .vtg-hd__inner[b-9arikvpu0l] {
        gap: 16px;
    }

    .vtg-hd__nav[b-9arikvpu0l] {
        gap: 4px;
    }

    .vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link {
        padding: 9px 12px;
    }
}

/* 1024–1279: container hẹp hơn (viewport − 64) mà vẫn phải chứa đủ 7 mục. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .vtg-hd__inner[b-9arikvpu0l] {
        gap: 12px;
    }

    .vtg-hd__brand[b-9arikvpu0l] {
        height: 30px;
    }

    .vtg-hd__nav[b-9arikvpu0l] {
        gap: 2px;
    }

    .vtg-hd__nav[b-9arikvpu0l]  .vtg-hd__link {
        padding: 8px 9px;
        font-size: 13.5px;
    }

    .vtg-hd__actions[b-9arikvpu0l] {
        gap: 10px;
    }

    .vtg-hd__signin[b-9arikvpu0l] {
        font-size: 14px;
    }
}



@media (prefers-reduced-motion: reduce) {
    .vtg-hd[b-9arikvpu0l],
    .vtg-hd *[b-9arikvpu0l],
    .vtg-dr[b-9arikvpu0l],
    .vtg-dr *[b-9arikvpu0l] {
        transition-duration: .01ms !important;
        animation: none !important;
    }
}
/* /src/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-goti1oawl1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes nm-403-in-b-ozif1bc0by {
    from { opacity: 0; transform: translateY(6px); }
}
/* /src/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-2hedtmjx9n] {
    --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-2hedtmjx9n .18s ease-out;
}

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

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

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

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

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

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

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

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

    .nm-idle-warn__card[b-2hedtmjx9n] {
        width: 100%;
    }
}
/* /src/Shared/Auth/PermissionGuard.razor.rz.scp.css */
/* PermissionGuard — chỉ còn trạng thái chờ (403 đã tách sang AccessDeniedPanel). */
.pg-loading[b-7qpf53da2q] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}
/* /src/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-ikbs9c80u5] {
    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-ikbs9c80u5] {
    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-ikbs9c80u5]::selection { background: transparent; }
.pin-capture:disabled[b-ikbs9c80u5] { cursor: not-allowed; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .bkmail-subject[b-uthvaqmkc1],
    .bkmail-to[b-uthvaqmkc1] {
        max-width: 100%;
    }
}
/* /src/Shared/Common/DevTabCard.razor.rz.scp.css */
/* DevTabCard — Manager Dashboard v4 theme */
.dtc-root[b-owoxiqbp8c] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 40px 24px;
    text-align: center;
    color: var(--d-ink);
}

.dtc-ico[b-owoxiqbp8c] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -2px rgba(16, 24, 40, .08);
}

    .dtc-ico svg[b-owoxiqbp8c] {
        width: 26px;
        height: 26px;
    }

.dtc-title[b-owoxiqbp8c] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 8px;
    line-height: 1.25;
}

.dtc-desc[b-owoxiqbp8c] {
    font-size: 14px;
    color: var(--d-ink-3);
    max-width: 360px;
    margin: 0 auto 8px;
    line-height: 1.5;
}

.dtc-tag[b-owoxiqbp8c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: 6px;
}

    .dtc-tag .d[b-owoxiqbp8c] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--d-accent-grad);
    }
/* /src/Shared/Common/LanguageSwitcher.razor.rz.scp.css */
/* LanguageSwitcher — Manager Dashboard v4 theme */
.ls-root[b-e1vrhnq96b] {
    --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-e1vrhnq96b] {
    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-e1vrhnq96b] {
        background: var(--d-surface-2);
        color: var(--d-accent);
    }

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

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

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

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

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

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

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

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

.ls-check[b-e1vrhnq96b] {
    width: 14px;
    height: 14px;
    color: var(--d-accent);
    margin-left: auto;
}
/* /src/Shared/Delegations/DelegationsView.razor.rz.scp.css */
/* Ủy quyền phê duyệt — dựng theo đúng khuôn các màn CA khác (xem CaJobTitles/CaBookings).
   ★ HAI ĐIỂM DỄ SAI, đã dính cả hai ở bản trước:
   1) `nm-list-page`/`nm-list-head`/`nm-list-title`/`nm-list-sub`/`nm-list-actions` KHÔNG phải class
      toàn cục — CSS của Blazor là scoped nên MỖI TRANG phải tự khai lại. Thiếu là trang mất sạch
      padding/typography, nhìn như chưa có CSS.
   2) Token đúng tên là `--nm-ink` (chữ) và `--nm-muted` (chữ mờ). KHÔNG có `--nm-text-muted`. */

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

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

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

.nm-list-sub[b-p7zbo1x6ly] {
    margin: 3px 0 0;
    font-size: 14px;
    color: var(--nm-muted);
}

.nm-list-actions[b-p7zbo1x6ly] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Thống kê ở cạnh phải thanh công cụ ── */
.del-stat[b-p7zbo1x6ly] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

    .del-stat small[b-p7zbo1x6ly] {
        color: var(--nm-muted);
        font-size: 12px;
    }

    .del-stat b[b-p7zbo1x6ly] {
        font-size: 14px;
        font-weight: 700;
        color: var(--nm-ink);
        font-variant-numeric: tabular-nums;
    }

    .del-stat b.is-good[b-p7zbo1x6ly] {
        color: var(--nm-ok);
    }

/* ── Header thẻ danh sách ──
   `.nm-card__head` mặc định KHÔNG phải flex (xem NmCard.razor.css) — trang nào cần xếp ngang thì tự
   khai như CaBookingDetail. Thiếu dòng này thì icon/tiêu đề/số đếm rớt dòng và `margin-left:auto`
   của phần gợi ý không có tác dụng. */
[b-p7zbo1x6ly] .del-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.del-card-ico[b-p7zbo1x6ly] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--nm-accent-soft);
    color: var(--nm-accent);
    font-size: 14px;
}

.del-card-title[b-p7zbo1x6ly] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.del-card-count[b-p7zbo1x6ly] {
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.del-card-hint[b-p7zbo1x6ly] {
    margin-left: auto;
    color: var(--nm-muted);
    font-size: 12px;
}

/* ── Ô trong bảng ──
   ★ PHẢI dùng ::deep: mấy ô này do code-behind dựng bằng RenderTreeBuilder nên KHÔNG được gắn
   thuộc tính scope (Blazor chỉ gắn cho markup viết trong .razor). Viết selector trần là luật rơi
   vào hư không — bảng hiện chữ trần, không mũi tên, không canh số. */
[b-p7zbo1x6ly] .del-party {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--nm-ink);
}

    /* Cột "người được ủy quyền": mũi tên mờ dẫn mắt từ cột trước sang */
    [b-p7zbo1x6ly] .del-party--to i {
        color: var(--nm-muted);
        font-size: 12px;
    }

[b-p7zbo1x6ly] .del-period {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--nm-muted);
}

/* Suất đã hết hạn / bị thu hồi: mờ đi nhưng vẫn đọc được (không phải dữ liệu rác) */
[b-p7zbo1x6ly] .del-row-ended {
    opacity: .62;
}

.del-loading[b-p7zbo1x6ly] {
    padding: 48px 0;
}

.del-form[b-p7zbo1x6ly] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Màn hẹp ── */
@media (max-width: 720px) {
    .nm-list-page[b-p7zbo1x6ly] {
        padding: 16px 14px 22px;
    }

    .del-card-hint[b-p7zbo1x6ly] {
        display: none;   /* nhường chỗ cho tiêu đề + số đếm */
    }
}
/* /src/Shared/Employees/EmployeeCreateForm.razor.rz.scp.css */
/* /ca/employees/new — chuẩn nm token-only: shell 3 cột + side panel form + card + role picker. */
.nm-list-page[b-tve5xz3v9f] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

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

.caec-crumb[b-tve5xz3v9f] { color: var(--nm-muted); text-decoration: none; }
.caec-crumb:hover[b-tve5xz3v9f] { color: var(--nm-brand-700); text-decoration: underline; }
.caec-crumb-sep[b-tve5xz3v9f] { margin: 0 4px; color: var(--nm-muted); }

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

/* ── Shell 3 cột ── */
.caec-shell[b-tve5xz3v9f] {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 1100px) {
    .caec-shell[b-tve5xz3v9f] { grid-template-columns: minmax(0, 1fr); }
}

/* ── Side panel (trái + phải) ── */
.caec-side[b-tve5xz3v9f] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.caec-block[b-tve5xz3v9f] { display: flex; flex-direction: column; gap: 8px; }
.caec-block--divider[b-tve5xz3v9f] { border-top: 1px solid var(--nm-border); padding-top: 12px; }

.caec-label[b-tve5xz3v9f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.caec-label i[b-tve5xz3v9f] { font-size: 12px; }

/* Hàng label–value trong tóm tắt */
.caec-meta-row[b-tve5xz3v9f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    min-height: 22px;
}
.caec-meta-row span[b-tve5xz3v9f] { color: var(--nm-muted); flex-shrink: 0; }
.caec-meta-row b[b-tve5xz3v9f] {
    font-weight: 600;
    color: var(--nm-ink);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.caec-meta-row--em[b-tve5xz3v9f] {
    padding: 6px 9px;
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-brand-50);
    min-height: 32px;
}
.caec-meta-row--em b[b-tve5xz3v9f] { color: var(--nm-brand-700); font-weight: 700; }

/* Preview avatar (tóm tắt phải) */
.caec-preview[b-tve5xz3v9f] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
}
.caec-preview-info[b-tve5xz3v9f] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.caec-preview-info b[b-tve5xz3v9f] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.caec-preview-info small[b-tve5xz3v9f] {
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.caec-placeholder[b-tve5xz3v9f] { color: var(--nm-muted); font-weight: 400; font-style: italic; }

/* ── Card giữa ── */
.caec-main[b-tve5xz3v9f] { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

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

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

/* Giấy tờ — CCCD + hộ chiếu xếp chồng, mỗi khối 1 dòng riêng */
.caec-doc-group[b-tve5xz3v9f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
.caec-doc-block[b-tve5xz3v9f] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.caec-doc-title[b-tve5xz3v9f] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.caec-doc-title i[b-tve5xz3v9f] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.caec-doc-hint[b-tve5xz3v9f] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
    font-style: italic;
}

/* ── Role picker cards ── */
.caec-role-grid[b-tve5xz3v9f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.caec-role[b-tve5xz3v9f] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.caec-role:hover[b-tve5xz3v9f] { border-color: var(--nm-brand-500); }
.caec-role.is-on[b-tve5xz3v9f] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.caec-role-check[b-tve5xz3v9f] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    color: var(--nm-brand-700);
}
.caec-role-name[b-tve5xz3v9f] { font-size: 13px; font-weight: 700; color: var(--nm-ink); padding-right: 20px; }
.caec-role-desc[b-tve5xz3v9f] { font-size: 11.5px; color: var(--nm-muted); }
.caec-role-meta[b-tve5xz3v9f] {
    margin-top: 3px;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.caec-role.is-on .caec-role-meta[b-tve5xz3v9f] { background: var(--nm-surface); color: var(--nm-brand-700); }

@media (max-width: 640px) {
    .nm-list-page[b-tve5xz3v9f] { padding: 16px 14px 22px; }
}
/* /src/Shared/Employees/EmployeeDetailView.razor.rz.scp.css */
/* /ca/employees/{id} — chuẩn nm token-only: hero định danh + NmTabs 3 tab (hồ sơ | công việc | tài khoản). */
.nm-list-page[b-dkkjvzedc8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* NmPageHeader tự có margin dưới — page đã dùng gap nên bỏ bớt. */
[b-dkkjvzedc8] .caed-header { margin-bottom: 0; }

.nm-code-pill[b-dkkjvzedc8] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

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

/* ── Hero: định danh + chỉ số nhanh ── */
.caed-hero[b-dkkjvzedc8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.caed-hero-id[b-dkkjvzedc8] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.caed-hero-who[b-dkkjvzedc8] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.caed-hero-name[b-dkkjvzedc8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.caed-hero-name > b[b-dkkjvzedc8] { font-size: 17px; font-weight: 800; color: var(--nm-ink); }
.caed-hero-sub[b-dkkjvzedc8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.caed-hero-sub i[b-dkkjvzedc8] { font-size: 12px; color: var(--nm-brand-600, var(--nm-brand-500)); margin-right: 3px; }
.caed-hero-sep[b-dkkjvzedc8] { color: var(--nm-border); }

/* Dải chỉ số nhanh bên phải hero — NmKpi chuẩn kit, compact cho vừa hero. */
.caed-kpis[b-dkkjvzedc8] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.caed-kpis[b-dkkjvzedc8]  .nm-kpi { padding: 8px 12px; min-width: 120px; background: var(--nm-surface-2); }
.caed-kpis[b-dkkjvzedc8]  .nm-kpi__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.caed-kpis[b-dkkjvzedc8]  .nm-kpi__val { margin-top: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.caed-good[b-dkkjvzedc8] { color: var(--nm-ok) !important; }
.caed-bad[b-dkkjvzedc8] { color: var(--nm-bad) !important; }

/* Chip cấp bậc — màu động theo rank nên giữ inline-style, khung dùng token */
.caed-rank-chip[b-dkkjvzedc8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--nm-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.caed-rank-dot[b-dkkjvzedc8] { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── Nội dung tab ── */
.caed-tab-body[b-dkkjvzedc8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    max-width: 980px;
}

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

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

/* Giá trị trong NmDescriptionList */
.caed-dd-inline[b-dkkjvzedc8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.caed-mono[b-dkkjvzedc8] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
}
.caed-em[b-dkkjvzedc8] { color: var(--nm-brand-700); font-weight: 800; font-size: 15px; }

/* Giấy tờ — CCCD + hộ chiếu song song */
.caed-doc-group[b-dkkjvzedc8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
@media (max-width: 900px) { .caed-doc-group[b-dkkjvzedc8] { grid-template-columns: minmax(0, 1fr); } }
.caed-doc-block[b-dkkjvzedc8] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.caed-doc-title[b-dkkjvzedc8] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.caed-doc-title i[b-dkkjvzedc8] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.caed-doc-hint[b-dkkjvzedc8] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
    font-style: italic;
}

/* Hàng nút quản lý tài khoản */
.caed-acc-actions[b-dkkjvzedc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}

/* Vai trò — NmTag đổi sang tông brand */
.caed-role-tags[b-dkkjvzedc8] { display: flex; flex-wrap: wrap; gap: 6px; }
.caed-role-tags[b-dkkjvzedc8]  .caed-role-tag {
    border-color: color-mix(in srgb, var(--nm-brand-500) 35%, transparent);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

/* ── Responsive ── */
@media (max-width: 760px) {
    .caed-hero[b-dkkjvzedc8] { flex-direction: column; align-items: stretch; }
    .caed-kpis[b-dkkjvzedc8] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .caed-kpis[b-dkkjvzedc8]  .nm-kpi { min-width: 0; }
    .caed-kpis[b-dkkjvzedc8]  .nm-kpi__val { white-space: normal; }
}
@media (max-width: 640px) {
    .nm-list-page[b-dkkjvzedc8] { padding: 16px 14px 22px; }
    [b-dkkjvzedc8] .caed-tabs .nm-tabs__bar { overflow-x: auto; }
}
/* /src/Shared/Employees/EmployeeEditForm.razor.rz.scp.css */
/* /ca/employees/{id}/edit — chuẩn nm token-only: hero live-preview + NmTabs 3 tab (cá nhân | công việc | phân quyền),
   mirror trang chi tiết caed-*. */
.nm-list-page[b-dw8srh9ddm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

/* NmPageHeader tự có margin dưới — page đã dùng gap nên bỏ bớt. */
[b-dw8srh9ddm] .caee-header { margin-bottom: 0; }

.nm-code-pill[b-dw8srh9ddm] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

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

/* ── Hero: định danh live + trạng thái + chỉ số nhanh ── */
.caee-hero[b-dw8srh9ddm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}
.caee-hero-id[b-dw8srh9ddm] { display: flex; align-items: center; gap: 14px; min-width: 0; }
.caee-hero-who[b-dw8srh9ddm] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.caee-hero-name[b-dw8srh9ddm] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.caee-hero-name > b[b-dw8srh9ddm] { font-size: 17px; font-weight: 800; color: var(--nm-ink); }
.caee-hero-sub[b-dw8srh9ddm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--nm-muted);
}
.caee-hero-sub i[b-dw8srh9ddm] { font-size: 12px; color: var(--nm-brand-600, var(--nm-brand-500)); margin-right: 3px; }
.caee-hero-sep[b-dw8srh9ddm] { color: var(--nm-border); }

/* Dải chỉ số nhanh bên phải hero — NmKpi chuẩn kit, compact cho vừa hero. */
.caee-kpis[b-dw8srh9ddm] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}
.caee-kpis[b-dw8srh9ddm]  .nm-kpi { padding: 8px 12px; min-width: 120px; background: var(--nm-surface-2); }
.caee-kpis[b-dw8srh9ddm]  .nm-kpi__lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.caee-kpis[b-dw8srh9ddm]  .nm-kpi__val { margin-top: 2px; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ── Nội dung tab ── */
.caee-tab-body[b-dw8srh9ddm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    max-width: 980px;
}

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

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

/* Giấy tờ — CCCD + hộ chiếu song song */
.caee-doc-group[b-dw8srh9ddm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
@media (max-width: 900px) { .caee-doc-group[b-dw8srh9ddm] { grid-template-columns: minmax(0, 1fr); } }
.caee-doc-block[b-dw8srh9ddm] {
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.caee-doc-title[b-dw8srh9ddm] {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-ink-2);
}
.caee-doc-title i[b-dw8srh9ddm] { color: var(--nm-brand-600, var(--nm-brand-500)); }
.caee-doc-hint[b-dw8srh9ddm] {
    margin-left: auto;
    font-size: 10px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nm-muted);
    font-style: italic;
}

/* ── Role / scope picker cards ── */
.caee-role-grid[b-dw8srh9ddm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.caee-role-grid--two[b-dw8srh9ddm] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .caee-role-grid--two[b-dw8srh9ddm] { grid-template-columns: minmax(0, 1fr); } }
.caee-role[b-dw8srh9ddm] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.caee-role:hover:not(:disabled)[b-dw8srh9ddm] { border-color: var(--nm-brand-500); }
.caee-role.is-on[b-dw8srh9ddm] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
    box-shadow: inset 0 0 0 1px var(--nm-brand-500);
}
.caee-role:disabled[b-dw8srh9ddm] { opacity: .6; cursor: not-allowed; }
.caee-role-check[b-dw8srh9ddm] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 13px;
    color: var(--nm-brand-700);
}
.caee-role-name[b-dw8srh9ddm] { font-size: 13px; font-weight: 700; color: var(--nm-ink); padding-right: 20px; }
.caee-role-desc[b-dw8srh9ddm] { font-size: 11.5px; color: var(--nm-muted); }
.caee-role-meta[b-dw8srh9ddm] {
    margin-top: 3px;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-muted);
}
.caee-role.is-on .caee-role-meta[b-dw8srh9ddm] { background: var(--nm-surface); color: var(--nm-brand-700); }

/* Footer lưu vai trò + dòng trạng thái */
.caee-role-footer[b-dw8srh9ddm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--nm-border);
}
.caee-msg[b-dw8srh9ddm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
}
.caee-msg--good[b-dw8srh9ddm] { color: var(--nm-ok); }
.caee-msg--err[b-dw8srh9ddm] { color: var(--nm-bad); }
.caee-msg--warn[b-dw8srh9ddm] { color: var(--nm-warn); }

/* ── Responsive ── */
@media (max-width: 760px) {
    .caee-hero[b-dw8srh9ddm] { flex-direction: column; align-items: stretch; }
    .caee-kpis[b-dw8srh9ddm] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .caee-kpis[b-dw8srh9ddm]  .nm-kpi { min-width: 0; }
    .caee-kpis[b-dw8srh9ddm]  .nm-kpi__val { white-space: normal; }
}
@media (max-width: 640px) {
    .nm-list-page[b-dw8srh9ddm] { padding: 16px 14px 22px; }
    [b-dw8srh9ddm] .caee-tabs .nm-tabs__bar { overflow-x: auto; }
}
/* /src/Shared/FastTrack/FastTrackBookingWizard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack Booking — Manager Dashboard v4 theme
   Prefix: ftservice-
   ═══════════════════════════════════════════════════════════════ */

.ftservice-root[b-id9c96r6n7] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-info: #0284c7;
    --d-info-soft: #e0f2fe;
    --d-purple: #7c3aed;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    font-size: 14px;
    letter-spacing: -0.01em;
}

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

.ftservice-mono[b-id9c96r6n7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─── Container ─── */
.ftservice-content[b-id9c96r6n7] {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Stepper ─── */
.ftservice-stepper-card[b-id9c96r6n7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 12px 16px;
    overflow-x: auto;
}

.ftservice-stepper[b-id9c96r6n7] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: max-content;
}

.ftservice-stp[b-id9c96r6n7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ftservice-stp-num[b-id9c96r6n7] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
    flex-shrink: 0;
    transition: all .15s;
}

    .ftservice-stp.is-active .ftservice-stp-num[b-id9c96r6n7] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0,.2), 0 4px 10px -2px rgba(255, 107, 0,.22);
    }

    .ftservice-stp.is-done .ftservice-stp-num[b-id9c96r6n7] {
        background: var(--d-good);
        color: #fff;
        border-color: transparent;
    }

.ftservice-stp-lbl[b-id9c96r6n7] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--d-ink-4);
    white-space: nowrap;
}

    .ftservice-stp.is-active .ftservice-stp-lbl[b-id9c96r6n7] { color: var(--d-accent); font-weight: 600; }
    .ftservice-stp.is-done .ftservice-stp-lbl[b-id9c96r6n7] { color: var(--d-ink-2); }

.ftservice-stp-bar[b-id9c96r6n7] {
    width: 28px;
    height: 1px;
    background: var(--d-line);
}

    .ftservice-stp-bar.is-done[b-id9c96r6n7] { background: var(--d-good); }

/* ─── Generic card ─── */
.ftservice-card[b-id9c96r6n7] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftservice-card-bd[b-id9c96r6n7] { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }

/* ─── Section header (eyebrow with stripe) ─── */
.ftservice-eyebrow[b-id9c96r6n7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .ftservice-eyebrow .stripe[b-id9c96r6n7] {
        width: 3px;
        height: 14px;
        border-radius: 2px;
        background: var(--d-accent-grad);
    }

    .ftservice-eyebrow .stripe.info[b-id9c96r6n7] { background: var(--d-info); }
    .ftservice-eyebrow .stripe.purple[b-id9c96r6n7] { background: var(--d-purple); }
    .ftservice-eyebrow .stripe.good[b-id9c96r6n7] { background: var(--d-good); }
    .ftservice-eyebrow .stripe.warn[b-id9c96r6n7] { background: var(--d-warn); }
    .ftservice-eyebrow .stripe.danger[b-id9c96r6n7] { background: var(--d-danger); }

    .ftservice-eyebrow h3[b-id9c96r6n7] {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

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

    .ftservice-btn:hover[b-id9c96r6n7] { background: var(--d-surface-2); }
    .ftservice-btn:disabled[b-id9c96r6n7] { opacity: .5; cursor: not-allowed; }

.ftservice-btn-sm[b-id9c96r6n7] {
    height: 30px;
    padding: 0 10px;
    font-size: 11.5px;
    border-radius: 8px;
}

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

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

.ftservice-btn-ghost[b-id9c96r6n7] {
    background: transparent;
    border-color: transparent;
    color: var(--d-ink-2);
}

    .ftservice-btn-ghost:hover[b-id9c96r6n7] { background: var(--d-surface-2); color: var(--d-ink); }

.ftservice-btn-danger-soft[b-id9c96r6n7] {
    background: var(--d-surface);
    border-color: color-mix(in srgb, var(--d-danger) 25%, var(--d-line));
    color: var(--d-danger);
    width: 36px;
    padding: 0;
    justify-content: center;
}

    .ftservice-btn-danger-soft:hover[b-id9c96r6n7] { background: color-mix(in srgb, var(--d-danger) 8%, transparent); }

/* ─── Form ─── */
.ftservice-grid-3[b-id9c96r6n7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) { .ftservice-grid-3[b-id9c96r6n7] { grid-template-columns: repeat(3, 1fr); } }

.ftservice-grid-2[b-id9c96r6n7] { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .ftservice-grid-2[b-id9c96r6n7] { grid-template-columns: 1fr 1fr; } }

.ftservice-field[b-id9c96r6n7] { display: flex; flex-direction: column; gap: 4px; }

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

    .ftservice-label .req[b-id9c96r6n7] { color: var(--d-danger); margin-left: 2px; }
    .ftservice-label .sub[b-id9c96r6n7] { color: var(--d-ink-4); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 4px; }

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

    .ftservice-input.is-mono[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

.ftservice-textarea[b-id9c96r6n7] {
    height: auto;
    min-height: 70px;
    padding: 10px 12px;
    line-height: 1.5;
    resize: vertical;
}

.ftservice-input:focus[b-id9c96r6n7],
.ftservice-textarea:focus[b-id9c96r6n7] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0,.12);
}

/* ─── Pill / chip selector ─── */
.ftservice-row[b-id9c96r6n7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ftservice-row-lbl[b-id9c96r6n7] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    width: 64px;
    flex-shrink: 0;
    margin-top: 6px;
}

.ftservice-pills[b-id9c96r6n7] { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.ftservice-pill[b-id9c96r6n7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-pill:hover[b-id9c96r6n7] {
        border-color: var(--d-ink-4);
        background: var(--d-surface-2);
    }

    .ftservice-pill.is-active[b-id9c96r6n7] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0,.18);
    }

    .ftservice-pill .code[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px;
        color: var(--d-ink-3);
    }

    .ftservice-pill.is-active .code[b-id9c96r6n7] { color: rgba(255,255,255,.85); }

    .ftservice-pill .count[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--d-surface-2);
        color: var(--d-ink-3);
    }

    .ftservice-pill.is-active .count[b-id9c96r6n7] {
        background: rgba(255,255,255,.22);
        color: #fff;
    }

/* ─── Hero airport panel ─── */
.ftservice-hero-row[b-id9c96r6n7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftservice-hero-ico[b-id9c96r6n7] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.ftservice-hero-title[b-id9c96r6n7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--d-ink);
    letter-spacing: -0.025em;
}

.ftservice-hero-sub[b-id9c96r6n7] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 2px; }

.ftservice-pkg-card[b-id9c96r6n7] {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) { .ftservice-pkg-card[b-id9c96r6n7] { grid-template-columns: 220px 1fr; } }

.ftservice-pkg-hero[b-id9c96r6n7] {
    background: var(--d-accent-grad);
    color: #fff;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}

.ftservice-pkg-hero-bg[b-id9c96r6n7] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay tối/gradient để chữ trắng đọc rõ trên ảnh sân bay.
   Tông trung tính (đậm dần xuống đáy nơi đặt chữ), chỉ giữ chút ấm ở góc — tránh phủ cam quá đậm */
.ftservice-pkg-hero.has-img[b-id9c96r6n7]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(165deg, rgba(16, 24, 40,.12) 0%, rgba(16, 24, 40,.40) 52%, rgba(67,32,12,.72) 100%);
}

.ftservice-pkg-hero-text[b-id9c96r6n7] {
    position: relative;
    z-index: 2;
}

.ftservice-pkg-hero-badge[b-id9c96r6n7] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftservice-pkg-iata[b-id9c96r6n7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.ftservice-pkg-airport[b-id9c96r6n7] {
    font-size: 14px;
    font-weight: 600;
    margin-top: 6px;
    color: rgba(255,255,255,.92);
}

.ftservice-pkg-body[b-id9c96r6n7] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ftservice-info-chips[b-id9c96r6n7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line-2);
}

.ftservice-chip[b-id9c96r6n7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    font-size: 11.5px;
    color: var(--d-ink-2);
}

    .ftservice-chip .lbl[b-id9c96r6n7] { color: var(--d-ink-3); }
    .ftservice-chip .val[b-id9c96r6n7] { color: var(--d-ink); font-weight: 600; }
    .ftservice-chip svg[b-id9c96r6n7] { color: var(--d-ink-4); flex-shrink: 0; }

.ftservice-price-line[b-id9c96r6n7] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--d-line-2);
}

    .ftservice-price-line .lbl[b-id9c96r6n7] { font-size: 11.5px; color: var(--d-ink-3); }

    .ftservice-price-line .val[b-id9c96r6n7] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-price-line .cur[b-id9c96r6n7] {
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink-3);
    }

/* ─── Spec card ─── */
.ftservice-spec-grid[b-id9c96r6n7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 24px;
    font-size: 12.5px;
}

@media (min-width: 768px) { .ftservice-spec-grid[b-id9c96r6n7] { grid-template-columns: 1fr 1fr; } }

.ftservice-spec-row[b-id9c96r6n7] { display: flex; align-items: baseline; gap: 8px; }

    .ftservice-spec-row .lbl[b-id9c96r6n7] {
        font-size: 11px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
    }

    .ftservice-spec-row .val[b-id9c96r6n7] { color: var(--d-ink); }

.ftservice-spec-stats[b-id9c96r6n7] {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
}

.ftservice-spec-stat[b-id9c96r6n7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
}

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

    .ftservice-spec-stat .val[b-id9c96r6n7] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-weight: 600;
        font-size: 16px;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-spec-stat .val.accent[b-id9c96r6n7] { color: var(--d-accent); }

/* ─── Pill (status / dir) ─── */
.ftservice-tag[b-id9c96r6n7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ftservice-tag-arrival[b-id9c96r6n7] { background: var(--d-info-soft); color: #075985; border-color: #bae6fd; }
.ftservice-tag-departure[b-id9c96r6n7] { background: var(--d-accent-soft); color: var(--d-accent); border-color: color-mix(in srgb, var(--d-line) 22%, transparent); }
.ftservice-tag-transit[b-id9c96r6n7] { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.ftservice-tag-other[b-id9c96r6n7] { background: var(--d-surface-2); color: var(--d-ink-2); border-color: var(--d-line); }
.ftservice-tag-warn[b-id9c96r6n7] { background: var(--d-warn-soft); color: #92400e; border-color: color-mix(in srgb, var(--d-warn) 28%, transparent); }
.ftservice-tag-good[b-id9c96r6n7] { background: var(--d-good-soft); color: #166534; border-color: color-mix(in srgb, var(--d-good) 25%, transparent); }
.ftservice-tag-mute[b-id9c96r6n7] { background: var(--d-surface-2); color: var(--d-ink-3); border-color: var(--d-line); }

/* ─── Surcharge rows ─── */
.ftservice-surcharge-list[b-id9c96r6n7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ftservice-surcharge[b-id9c96r6n7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 25%, transparent);
    font-size: 12px;
}

    .ftservice-surcharge .time[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 600;
        color: #92400e;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-surcharge .dot[b-id9c96r6n7] { color: var(--d-ink-4); }
    .ftservice-surcharge .days[b-id9c96r6n7] { color: var(--d-ink-2); flex-shrink: 0; }
    .ftservice-surcharge .note[b-id9c96r6n7] { color: var(--d-ink-3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ftservice-surcharge .spacer[b-id9c96r6n7] { flex: 1; }

    .ftservice-surcharge .amt[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        color: #92400e;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-surcharge .amt small[b-id9c96r6n7] {
            font-family: 'Inter', sans-serif;
            font-weight: 500;
            color: var(--d-ink-3);
            margin-left: 2px;
            font-size: 10.5px;
        }

.ftservice-surcharge-banner[b-id9c96r6n7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--d-warn-soft);
    border: 1px solid color-mix(in srgb, var(--d-warn) 30%, transparent);
    color: #78350f;
    font-size: 12px;
}

    .ftservice-surcharge-banner svg[b-id9c96r6n7] { color: var(--d-warn); margin-top: 2px; flex-shrink: 0; }
    .ftservice-surcharge-banner b[b-id9c96r6n7] { color: #78350f; }

/* ─── Passenger row ─── */
.ftservice-pax-row[b-id9c96r6n7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    align-items: center;
}

@media (min-width: 768px) {
    .ftservice-pax-row[b-id9c96r6n7] {
        grid-template-columns: 28px 1fr 80px 1fr 38px;
    }
}

.ftservice-pax-idx[b-id9c96r6n7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
    text-align: center;
}

/* ─── Meeting point radio ─── */
.ftservice-radio[b-id9c96r6n7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-radio:hover[b-id9c96r6n7] { border-color: var(--d-ink-4); background: var(--d-surface-2); }
    .ftservice-radio.is-selected[b-id9c96r6n7] { border-color: var(--d-accent); background: var(--d-accent-soft); box-shadow: 0 0 0 3px rgba(255, 107, 0,.10); }

    .ftservice-radio input[type=radio][b-id9c96r6n7] { width: 16px; height: 16px; accent-color: var(--d-accent); margin-top: 2px; flex-shrink: 0; }

.ftservice-radio-name[b-id9c96r6n7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ftservice-radio-name svg[b-id9c96r6n7] { color: var(--d-accent); flex-shrink: 0; }

.ftservice-radio-meta[b-id9c96r6n7] { font-size: 11.5px; color: var(--d-ink-3); margin-top: 4px; line-height: 1.45; }

/* ─── Included items ─── */
.ftservice-incl[b-id9c96r6n7] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ftservice-incl-item[b-id9c96r6n7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--d-good-soft);
    border: 1px solid color-mix(in srgb, var(--d-good) 25%, transparent);
    color: #166534;
    font-size: 12px;
    font-weight: 500;
}

    .ftservice-incl-item svg[b-id9c96r6n7] { color: var(--d-good); flex-shrink: 0; }

/* ─── Addon ─── */
.ftservice-addon[b-id9c96r6n7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-addon:hover[b-id9c96r6n7] { border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line)); }
    .ftservice-addon.is-selected[b-id9c96r6n7] { border-color: var(--d-accent); background: var(--d-accent-soft); }

.ftservice-addon-left[b-id9c96r6n7] { display: flex; align-items: center; gap: 12px; min-width: 0; }

.ftservice-addon-check[b-id9c96r6n7] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid var(--d-line);
    background: var(--d-surface);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all .12s;
    color: transparent;
}

    .ftservice-addon.is-selected .ftservice-addon-check[b-id9c96r6n7] {
        background: var(--d-accent);
        border-color: var(--d-accent);
        color: #fff;
    }

.ftservice-addon-name[b-id9c96r6n7] { font-size: 14px; font-weight: 600; color: var(--d-ink); }

.ftservice-addon-meta[b-id9c96r6n7] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-top: 2px;
}

    .ftservice-addon-meta .key[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

.ftservice-addon-right[b-id9c96r6n7] { text-align: right; flex-shrink: 0; margin-left: 10px; }

.ftservice-addon-price[b-id9c96r6n7] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-ink);
    font-variant-numeric: tabular-nums;
}

    .ftservice-addon-price small[b-id9c96r6n7] { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--d-ink-3); margin-left: 2px; font-size: 10.5px; }

.ftservice-addon-multi[b-id9c96r6n7] { font-size: 10.5px; color: var(--d-ink-4); margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }

.ftservice-addon-tag-selected[b-id9c96r6n7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--d-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ─── Quote table ─── */
.ftservice-quote[b-id9c96r6n7] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftservice-quote-row[b-id9c96r6n7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-line-2);
    font-size: 12.5px;
}

    .ftservice-quote-row:last-of-type[b-id9c96r6n7] { border-bottom: 0; }
    .ftservice-quote-row.is-surcharge[b-id9c96r6n7] { background: var(--d-warn-soft); color: #92400e; }
    .ftservice-quote-row .lbl[b-id9c96r6n7] { color: var(--d-ink-2); display: inline-flex; align-items: center; gap: 6px; }
    .ftservice-quote-row .val[b-id9c96r6n7] { color: var(--d-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
    .ftservice-quote-row .val small[b-id9c96r6n7] { color: var(--d-ink-3); font-family: 'Inter', sans-serif; font-weight: 500; margin-left: 2px; font-size: 10.5px; }

.ftservice-quote-total[b-id9c96r6n7] {
    background: var(--d-ink);
    color: #fff;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

    .ftservice-quote-total .lbl[b-id9c96r6n7] { font-size: 12.5px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; }

    .ftservice-quote-total .val[b-id9c96r6n7] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #ff9a52;
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-quote-total .val small[b-id9c96r6n7] { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); margin-left: 4px; }

.ftservice-quote-foot[b-id9c96r6n7] {
    padding: 8px 14px;
    background: var(--d-warn-soft);
    border-top: 1px solid color-mix(in srgb, var(--d-warn) 25%, transparent);
    color: #92400e;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Payment method ─── */
.ftservice-pay-grid[b-id9c96r6n7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 640px) { .ftservice-pay-grid[b-id9c96r6n7] { grid-template-columns: repeat(3, 1fr); } }

.ftservice-pay-tile[b-id9c96r6n7] {
    text-align: left;
    padding: 12px 14px;
    border: 1.5px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    cursor: pointer;
    transition: all .12s;
}

    .ftservice-pay-tile:hover[b-id9c96r6n7] { border-color: var(--d-ink-4); }
    .ftservice-pay-tile.is-selected[b-id9c96r6n7] { border-color: var(--d-accent); background: var(--d-accent-soft); box-shadow: 0 0 0 3px rgba(255, 107, 0,.08); }

.ftservice-pay-name[b-id9c96r6n7] { font-size: 14px; font-weight: 600; color: var(--d-ink); }
.ftservice-pay-desc[b-id9c96r6n7] { font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }

/* ─── Result ─── */
.ftservice-result-hd[b-id9c96r6n7] {
    background: linear-gradient(135deg, var(--d-good) 0%, #14b8a6 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftservice-result-ico[b-id9c96r6n7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    border: 2px solid rgba(255,255,255,.35);
    flex-shrink: 0;
}

.ftservice-result-title[b-id9c96r6n7] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
}

.ftservice-result-sub[b-id9c96r6n7] { font-size: 11.5px; color: rgba(255,255,255,.92); margin-top: 2px; }

.ftservice-result-grid[b-id9c96r6n7] {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) { .ftservice-result-grid[b-id9c96r6n7] { grid-template-columns: 1fr 1fr; } }

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

.ftservice-result-cell .val[b-id9c96r6n7] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    margin-top: 2px;
}

    .ftservice-result-cell .val.mono[b-id9c96r6n7] { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
    .ftservice-result-cell .val.accent[b-id9c96r6n7] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--d-accent);
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-result-cell .val.accent small[b-id9c96r6n7] { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; color: var(--d-ink-3); margin-left: 3px; }

.ftservice-result-cell .extra[b-id9c96r6n7] { font-size: 11px; color: var(--d-ink-3); margin-top: 2px; }

.ftservice-result-foot[b-id9c96r6n7] {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    background: var(--d-surface-2);
    border-top: 1px solid var(--d-line);
}

/* ─── Empty / loading / error ─── */
.ftservice-empty[b-id9c96r6n7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.ftservice-empty-ico[b-id9c96r6n7] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

.ftservice-empty h2[b-id9c96r6n7] {
    margin: 0 0 4px;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink);
}

.ftservice-empty p[b-id9c96r6n7] { margin: 0; color: var(--d-ink-3); font-size: 12.5px; }

.ftservice-error-banner[b-id9c96r6n7] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--d-danger) 25%, transparent);
    color: #991b1b;
    font-size: 12.5px;
}

    .ftservice-error-banner svg[b-id9c96r6n7] { color: var(--d-danger); flex-shrink: 0; margin-top: 2px; }

.ftservice-error-close[b-id9c96r6n7] {
    background: transparent;
    border: 0;
    color: var(--d-danger);
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}

.ftservice-skeleton[b-id9c96r6n7] {
    background: var(--d-surface-2);
    border-radius: 6px;
    animation: ftservice-pulse-b-id9c96r6n7 1.4s ease-in-out infinite;
}

@keyframes ftservice-pulse-b-id9c96r6n7 {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}

.ftservice-spin[b-id9c96r6n7] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ftservice-spin-b-id9c96r6n7 .7s linear infinite;
    display: inline-block;
}

.ftservice-spin-sm[b-id9c96r6n7] {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ftservice-spin-b-id9c96r6n7 .7s linear infinite;
    display: inline-block;
}

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

/* ─── Sticky bottom nav ─── */
.ftservice-stickynav[b-id9c96r6n7] {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    padding: 0 16px;
    pointer-events: none;
}

.ftservice-stickynav-inner[b-id9c96r6n7] {
    max-width: 960px;
    margin: 0 auto;
    pointer-events: auto;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    border: 1px solid var(--d-line);
    border-radius: 999px;
    box-shadow: 0 8px 28px -8px rgba(16, 24, 40,.18);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ftservice-stickynav-back[b-id9c96r6n7] {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

    .ftservice-stickynav-back:hover[b-id9c96r6n7] { background: var(--d-surface-2); color: var(--d-ink); }
    .ftservice-stickynav-back:disabled[b-id9c96r6n7] { opacity: .35; cursor: not-allowed; }

.ftservice-stickynav-sep[b-id9c96r6n7] { width: 1px; height: 18px; background: var(--d-line); flex-shrink: 0; }

.ftservice-stickynav-info[b-id9c96r6n7] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    padding: 0 4px;
}

    .ftservice-stickynav-info .step[b-id9c96r6n7] {
        font-size: 10px;
        font-weight: 700;
        color: var(--d-accent);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

    .ftservice-stickynav-info .tier[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px;
        font-weight: 700;
        color: var(--d-ink-2);
        background: var(--d-surface-2);
        padding: 2px 6px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .ftservice-stickynav-info .name[b-id9c96r6n7] {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--d-ink);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ftservice-stickynav-info .price[b-id9c96r6n7] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        font-weight: 700;
        color: var(--d-ink);
        flex-shrink: 0;
        font-variant-numeric: tabular-nums;
    }

        .ftservice-stickynav-info .price small[b-id9c96r6n7] { font-family: 'Inter', sans-serif; font-weight: 500; color: var(--d-ink-4); margin-left: 2px; }

    .ftservice-stickynav-info .pax[b-id9c96r6n7] { font-size: 11px; color: var(--d-ink-3); flex-shrink: 0; }
    .ftservice-stickynav-info .placeholder[b-id9c96r6n7] { font-size: 12px; color: var(--d-ink-3); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ftservice-stickynav-next[b-id9c96r6n7] {
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(255, 107, 0,.2), 0 4px 10px -2px rgba(255, 107, 0,.25);
    transition: background .12s;
}

    .ftservice-stickynav-next:hover[b-id9c96r6n7] { background: var(--d-accent-grad-hover); }
    .ftservice-stickynav-next:disabled[b-id9c96r6n7] { background: var(--d-ink-4); box-shadow: none; cursor: not-allowed; }

/* ─── Misc ─── */
.ftservice-divider[b-id9c96r6n7] { height: 1px; background: var(--d-line-2); margin: 14px 0; border: 0; }

/* /src/Shared/FastTrack/FastTrackMyBookings.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrack My Bookings — Manager Dashboard v4 theme
   prefix: ftmb-
   ═══════════════════════════════════════════════════════════════ */

.ftmb-root[b-p5t9fnxlnm] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    background: var(--d-bg);
    min-height: 100%;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.ftmb-container[b-p5t9fnxlnm] {
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Hero ─── */
.ftmb-hero[b-p5t9fnxlnm] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

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

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

.ftmb-hero-meta[b-p5t9fnxlnm] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--d-ink-3);
    font-size: 14px;
    flex-wrap: wrap;
}

    .ftmb-hero-meta .dot[b-p5t9fnxlnm] {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--d-ink-4);
    }

.ftmb-hero-actions[b-p5t9fnxlnm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

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

.ftmb-btn-accent[b-p5t9fnxlnm] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .ftmb-btn-accent:hover[b-p5t9fnxlnm] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.ftmb-btn-icon[b-p5t9fnxlnm] {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .ftmb-btn-icon:hover[b-p5t9fnxlnm] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.ftmb-btn-danger[b-p5t9fnxlnm] {
    color: var(--d-danger);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border-color: color-mix(in srgb, var(--d-danger) 22%, var(--d-line));
}

    .ftmb-btn-danger:hover[b-p5t9fnxlnm] {
        background: color-mix(in srgb, var(--d-danger) 14%, var(--d-surface));
        color: var(--d-danger);
    }

.ftmb-btn-compact[b-p5t9fnxlnm] {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

/* ─── Alert ─── */
.ftmb-alert[b-p5t9fnxlnm] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--d-r);
    background: color-mix(in srgb, var(--d-danger) 8%, var(--d-surface));
    border: 1px solid color-mix(in srgb, var(--d-danger) 24%, var(--d-line));
    color: var(--d-danger);
    font-size: 12.5px;
}

/* ─── Card ─── */
.ftmb-card[b-p5t9fnxlnm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

/* ─── Filter bar ─── */
.ftmb-filter[b-p5t9fnxlnm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
}

.ftmb-search[b-p5t9fnxlnm] {
    position: relative;
    flex: 1;
    min-width: 240px;
}

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

.ftmb-input[b-p5t9fnxlnm] {
    height: 34px;
    padding: 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
}

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

.ftmb-input.ftmb-search-input[b-p5t9fnxlnm] {
    width: 100%;
    padding-left: 30px;
}

.ftmb-select[b-p5t9fnxlnm] {
    height: 34px;
    padding: 0 28px 0 12px;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .12s, box-shadow .12s;
}

    .ftmb-select:focus[b-p5t9fnxlnm] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.ftmb-filter-meta[b-p5t9fnxlnm] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--d-ink-3);
    white-space: nowrap;
}

    .ftmb-filter-meta strong[b-p5t9fnxlnm] {
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* ─── Table ─── */
.ftmb-tbl-wrap[b-p5t9fnxlnm] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 240px);
}

.ftmb-tbl-scroll[b-p5t9fnxlnm] {
    flex: 1;
    overflow: auto;
}

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

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

        .ftmb-tbl thead th.right[b-p5t9fnxlnm] {
            text-align: right;
        }

        .ftmb-tbl thead th.center[b-p5t9fnxlnm] {
            text-align: center;
        }

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

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

    .ftmb-tbl tbody tr.ftmb-row[b-p5t9fnxlnm] {
        cursor: pointer;
        transition: background .12s;
    }

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

    .ftmb-tbl td.right[b-p5t9fnxlnm] {
        text-align: right;
    }

    .ftmb-tbl td.center[b-p5t9fnxlnm] {
        text-align: center;
    }

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

.ftmb-pkg-name[b-p5t9fnxlnm] {
    font-weight: 600;
    color: var(--d-ink);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftmb-pkg-sub[b-p5t9fnxlnm] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftmb-num[b-p5t9fnxlnm] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--d-ink);
    font-weight: 500;
}

    .ftmb-num .ccy[b-p5t9fnxlnm] {
        color: var(--d-ink-4);
        font-size: 10.5px;
        margin-left: 3px;
        font-family: inherit;
    }

.ftmb-flight[b-p5t9fnxlnm] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
}

.ftmb-apt[b-p5t9fnxlnm] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}

    .ftmb-apt.sgn[b-p5t9fnxlnm] {
        color: #0369a1;
        background: color-mix(in srgb, #0ea5e9 10%, var(--d-surface));
        border-color: color-mix(in srgb, #0ea5e9 22%, var(--d-line));
    }

    .ftmb-apt.han[b-p5t9fnxlnm] {
        color: #6d28d9;
        background: color-mix(in srgb, #8b5cf6 10%, var(--d-surface));
        border-color: color-mix(in srgb, #8b5cf6 22%, var(--d-line));
    }

    .ftmb-apt.dad[b-p5t9fnxlnm] {
        color: #047857;
        background: color-mix(in srgb, #10b981 10%, var(--d-surface));
        border-color: color-mix(in srgb, #10b981 22%, var(--d-line));
    }

.ftmb-skel[b-p5t9fnxlnm] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
    animation: ftmb-pulse-b-p5t9fnxlnm 1.4s ease-in-out infinite;
}

@keyframes ftmb-pulse-b-p5t9fnxlnm {
    0%, 100% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }
}

.ftmb-empty[b-p5t9fnxlnm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

    .ftmb-empty .ico[b-p5t9fnxlnm] {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        background: var(--d-accent-grad-soft);
        border: 1px solid #ffe0c7;
        display: grid;
        place-items: center;
        color: var(--d-accent);
        margin-bottom: 6px;
    }

    .ftmb-empty b[b-p5t9fnxlnm] {
        color: var(--d-ink);
        font-weight: 600;
        font-size: 13.5px;
    }

    .ftmb-empty small[b-p5t9fnxlnm] {
        font-size: 12px;
        color: var(--d-ink-3);
        max-width: 320px;
    }

    .ftmb-empty .ftmb-empty-actions[b-p5t9fnxlnm] {
        margin-top: 10px;
        display: flex;
        gap: 8px;
    }

.ftmb-foot[b-p5t9fnxlnm] {
    padding: 10px 14px;
    border-top: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    font-size: 11.5px;
}

    .ftmb-foot strong[b-p5t9fnxlnm] {
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }
/* /src/Shared/FastTrack/FtDebtBadge.razor.rz.scp.css */
/* FtDebtBadge — warm-neutral debt indicator */
.ftdb-root[b-9l5l3vu7wm] {
    --d-ink-4: #a5abb8;
    --d-warn: #d97706;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
    letter-spacing: -0.005em;
    background: color-mix(in srgb, var(--d-warn) 12%, #fff);
    color: #92400e;
    border: 1px solid color-mix(in srgb, var(--d-warn) 28%, #fff);
}

    .ftdb-root .ftdb-d[b-9l5l3vu7wm] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--d-warn);
        flex-shrink: 0;
    }

.ftdb-empty[b-9l5l3vu7wm] {
    color: var(--d-ink-4);
    font-size: 11.5px;
    line-height: 1.4;
}
/* /src/Shared/FastTrack/FtPageHeader.razor.rz.scp.css */
/* FtPageHeader — Manager Dashboard v4 theme (warm-neutral) */
.ftph-wrap[b-sc88bk3wk6] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);

    padding: 16px 16px 8px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .ftph-wrap[b-sc88bk3wk6] {
        padding: 16px 24px 8px;
    }
}

.ftph-hero[b-sc88bk3wk6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--d-line);
}

@media (min-width: 768px) {
    .ftph-hero[b-sc88bk3wk6] {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 16px;
    }
}

.ftph-left[b-sc88bk3wk6] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ftph-back[b-sc88bk3wk6] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .12s, border-color .12s, color .12s;
    text-decoration: none;
}

    .ftph-back:hover[b-sc88bk3wk6] {
        background: var(--d-surface-2);
        border-color: #dde1e8;
        color: var(--d-ink);
        text-decoration: none;
    }

.ftph-icon[b-sc88bk3wk6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--d-accent-grad);
    color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -3px rgba(255, 107, 0, .28);
}

.ftph-text[b-sc88bk3wk6] {
    min-width: 0;
}

.ftph-title[b-sc88bk3wk6] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftph-sub[b-sc88bk3wk6] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftph-actions[b-sc88bk3wk6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* /src/Shared/Feedback/ApiErrorAlert.razor.rz.scp.css */
/* ApiErrorAlert — Manager Dashboard v4 theme (warm-neutral) */
.aea-root[b-edh8186ou3] {
    --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-edh8186ou3] {
        border-color: #fde4c2;
        background: #fffbf3;
    }

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

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

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

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

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

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

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

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

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

.aea-close[b-edh8186ou3] {
    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-edh8186ou3] {
        background: rgba(0, 0, 0, 0.04);
        color: var(--d-ink);
    }
/* /src/Shared/Feedback/ConfirmDialog.razor.rz.scp.css */
/* ConfirmDialog — Manager Dashboard v4 theme */
.cd-overlay[b-jwo19y7fbk] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

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

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

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

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

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

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

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

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

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

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

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

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

.cd-btn:disabled[b-jwo19y7fbk] {
    opacity: 0.55;
    cursor: not-allowed;
}
/* /src/Shared/Feedback/EmptyState.razor.rz.scp.css */
/* EmptyState — Manager Dashboard v4 warm-neutral */
.es-root[b-9he0unz7hp] {
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-line: #eceef2;
    --d-surface-2: #f4f5f8;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 16px;
    color: var(--d-ink-3);
    text-align: center;
}

.es-icon[b-9he0unz7hp] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-4);
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}

    .es-icon svg[b-9he0unz7hp] {
        width: 22px;
        height: 22px;
        display: block;
    }

.es-title[b-9he0unz7hp] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.es-desc[b-9he0unz7hp] {
    font-size: 12px;
    color: var(--d-ink-3);
    max-width: 28rem;
    margin: 2px 0 0;
    line-height: 1.5;
}

.es-action[b-9he0unz7hp] {
    margin-top: 14px;
}
/* /src/Shared/Feedback/Pagination.razor.rz.scp.css */
/* Pagination — Manager Dashboard v4 theme */
.pg-root[b-7tsgxuqyfe] {
    --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-7tsgxuqyfe] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

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

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

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

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

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

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

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

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

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

@media (min-width: 640px) {
    .pg-ellipsis[b-7tsgxuqyfe] {
        display: inline-block;
    }
}
/* /src/Shared/Feedback/SkeletonLoader.razor.rz.scp.css */
/* SkeletonLoader — Manager Dashboard v4 warm-neutral */
.sk-root[b-557qb75ggt] {
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-ink-4: #a5abb8;
    --d-r: 12px;
}

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

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

    50% {
        opacity: 0.55;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .sk-lines .sk-bar[b-557qb75ggt] {
        height: 10px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--d-ink-4) 26%, var(--d-surface-2));
    }
/* /src/Shared/Feedback/StatCard.razor.rz.scp.css */
/* StatCard — Manager Dashboard v4 theme (warm-neutral tile) */
.sc-root[b-io1w15cm29] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
    transition: border-color .15s, background .15s;
}

    .sc-root:hover[b-io1w15cm29] {
        background: var(--d-surface);
        border-color: #dde1e8;
    }

.sc-row[b-io1w15cm29] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sc-text[b-io1w15cm29] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-lbl[b-io1w15cm29] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

    .sc-dot.is-orange[b-io1w15cm29] {
        background: var(--d-accent-grad);
    }

    .sc-dot.is-amber[b-io1w15cm29] {
        background: #d97706;
    }

    .sc-dot.is-green[b-io1w15cm29] {
        background: #16a34a;
    }

    .sc-dot.is-purple[b-io1w15cm29] {
        background: #6366f1;
    }

    .sc-dot.is-red[b-io1w15cm29] {
        background: #dc2626;
    }

    .sc-dot.is-blue[b-io1w15cm29] {
        background: #2563eb;
    }

.sc-val[b-io1w15cm29] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-sub[b-io1w15cm29] {
    margin: 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

    .sc-ico.is-orange[b-io1w15cm29] {
        background: var(--d-accent-grad);
        border-color: transparent;
        color: #ffffff;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }
/* /src/Shared/Feedback/ToastNotification.razor.rz.scp.css */
/* ToastNotification — Manager Dashboard v4 theme */
.tn-stack[b-5losu2cehh] {
    --d-surface: #ffffff;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-r: 12px;

    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /src/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-wq6mb78bd4] {
    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-wq6mb78bd4] {
        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-wq6mb78bd4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 0;
    line-height: 1.35;
}

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

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

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

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

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

    .fcc-badge.unknown[b-wq6mb78bd4] {
        background: #f1f5f9;
        color: #475569;
    }
/* /src/Shared/Flight/FareConditionsPanel.razor.rz.scp.css */
.fcp-root[b-6t5zf3loox] {
    background: #fff8f2;
    border: 1px solid #ffe0c7;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.825rem;
    color: #1f2937;
}

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

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

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

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

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

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

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

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

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

.fcp-row-header[b-6t5zf3loox] {
    background: #fff8f2;
}

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

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

.fcp-cell[b-6t5zf3loox] {
    text-align: center;
}

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

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

.fcp-hidden-note b[b-6t5zf3loox] {
    color: #b91c1c;
}

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

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

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

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

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

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

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

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

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

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

.fcp-error[b-6t5zf3loox] {
    color: #dc2626;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fbs-lbl[b-po9quj2120] {
    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-po9quj2120] { font-size: 11.5px; }
}
/* /src/Shared/Flight/FlightConfirmation.razor.rz.scp.css */
/* FlightConfirmation — Manager Dashboard v4 theme */
.fcfm-root[b-zxqpueey89] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-r: 12px;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Success banner — soft good gradient on warm-neutral */
.fcfm-success[b-zxqpueey89] {
    background: linear-gradient(180deg, var(--d-good-soft) 0%, var(--d-surface) 70%);
    border: 1px solid color-mix(in srgb, var(--d-good) 22%, var(--d-line));
    border-radius: var(--d-r);
    padding: 32px 24px 28px;
    text-align: center;
}

.fcfm-success-ico[b-zxqpueey89] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--d-good-soft);
    color: var(--d-good);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

    .fcfm-success-ico svg[b-zxqpueey89] { width: 32px; height: 32px; }

.fcfm-title[b-zxqpueey89] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    margin: 0 0 6px;
}

@media (min-width: 640px) {
    .fcfm-title[b-zxqpueey89] { font-size: 26px; }
}

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

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

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

.fcfm-code-lbl[b-zxqpueey89] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 2px;
}

.fcfm-code-val[b-zxqpueey89] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--d-ink);
    margin: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fcfm-code-pnr[b-zxqpueey89] {
    font-size: 24px;
    color: var(--d-accent);
}

/* Card */
.dash-card[b-zxqpueey89] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nghỉ nhẹ để thẻ nổi trên nền (wrapper trang giờ trong suốt) — đồng bộ thẻ trang kết quả */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
}

.dash-card-hd[b-zxqpueey89] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

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

.fcfm-info-list[b-zxqpueey89] {
    list-style: none;
    margin: 0;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .fcfm-info-list li[b-zxqpueey89] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        color: var(--d-ink-2);
        line-height: 1.5;
    }

    .fcfm-info-list svg[b-zxqpueey89] {
        width: 16px;
        height: 16px;
        color: var(--d-accent);
        margin-top: 2px;
        flex-shrink: 0;
    }

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

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

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

.dash-btn-accent[b-zxqpueey89] {
    background: var(--d-accent-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .dash-btn-accent:hover[b-zxqpueey89] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        border-color: transparent;
    }

.fcfm-actions[b-zxqpueey89] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
/* /src/Shared/Flight/FlightFilterPanel.razor.rz.scp.css */
/* FlightFilterPanel — Manager Dashboard v4 theme */
.ffp-root[b-bt14bp85rh] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

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

    .ffp-h svg[b-bt14bp85rh] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

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

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

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

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

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

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

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

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

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

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

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

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

.ffp-range-bounds[b-bt14bp85rh] {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    color: var(--d-ink-4);
    font-variant-numeric: tabular-nums;
}

/* Airlines */
.ffp-airline-list[b-bt14bp85rh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ffp-airline-row[b-bt14bp85rh] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}

    .ffp-airline-row:hover[b-bt14bp85rh] { background: var(--d-surface-2); }

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

.ffp-checkbox[b-bt14bp85rh] {
    width: 16px; height: 16px;
    border: 2px solid var(--d-line);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--d-surface);
}

    .ffp-checkbox.is-checked[b-bt14bp85rh] {
        background: var(--d-accent);
        border-color: var(--d-accent);
    }

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

.ffp-airline-logo[b-bt14bp85rh] { height: 16px; width: auto; flex-shrink: 0; }

/* Cột thông tin: hàng trên (logo + tên) rồi hàng dưới (tóm tắt) */
.ffp-airline-info[b-bt14bp85rh] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Hàng trên: logo + tên hãng trên cùng một dòng */
.ffp-airline-top[b-bt14bp85rh] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ffp-airline-name[b-bt14bp85rh] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tóm tắt: số chuyến · từ giá thấp nhất — luôn gói gọn 1 dòng (cắt … nếu quá dài) */
.ffp-airline-meta[b-bt14bp85rh] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time grid */
.ffp-time-grid[b-bt14bp85rh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.ffp-time[b-bt14bp85rh] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: 8px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

    .ffp-time:hover[b-bt14bp85rh] {
        background: var(--d-surface-2);
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
    }

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

    .ffp-time.is-active[b-bt14bp85rh] {
        background: var(--d-accent-soft);
        border-color: color-mix(in srgb, var(--d-accent) 40%, transparent);
        box-shadow: 0 1px 2px rgba(255, 107, 0,0.08);
    }

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

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

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

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

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

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

.ffp-chip[b-bt14bp85rh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    font-size: 11px;
    font-weight: 500;
    color: var(--d-ink-2);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .ffp-chip:hover[b-bt14bp85rh] {
        border-color: color-mix(in srgb, var(--d-accent) 30%, var(--d-line));
    }

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

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

.ffp-chip.is-active .ffp-chip-cnt[b-bt14bp85rh] {
    color: color-mix(in srgb, var(--d-accent) 80%, var(--d-ink-3));
}
/* /src/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-xpqbf324jg] {
    --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-xpqbf324jg] {
    position: absolute;
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    opacity: .34;
    pointer-events: none;
    user-select: none;
    animation: fh-drift-b-xpqbf324jg 22s ease-in-out infinite alternate;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fh-btn:hover svg[b-xpqbf324jg] {
    transform: translateX(-3px);
}
/* /src/Shared/Flight/FlightPassengerForm.razor.rz.scp.css */
/* FlightPassengerForm — Manager Dashboard v4 theme tokens */
.fpf-root[b-354dyewprf] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-warn-soft: #fef3c7;
    --d-danger: #dc2626;
    --d-r: 12px;
    /* Viền control nhập liệu — đậm hơn --d-line (viền card) để field nổi rõ, khớp DateMaskInput */
    --d-line-input: #d1d5db;
    color: var(--d-ink);
    /* ★ 'Twemoji Country Flags' PHẢI đứng đầu — nếu không, ô Quốc tịch trên Windows hiện
       "vn Việt Nam (VNM)" (2 chữ Regional Indicator) thay vì lá cờ 🇻🇳. Windows không có
       glyph cờ trong Segoe UI Emoji; app đã nạp sẵn font này ở wwwroot/app.css nhưng
       `.fpf-root` tự khai font-family riêng nên con của nó KHÔNG thừa hưởng được stack
       của body. Font khai `unicode-range: U+1F1E6-1F1FF` nên chỉ phủ đúng dải cờ, mọi
       chữ/số khác vẫn là Inter y như cũ. (Quy ước chung: xem khối "Cờ quốc gia" trong
       wwwroot/app.css — element có font-family riêng thì phải tự thêm font này hoặc
       gắn class .nm-flag.) */
    font-family: 'Twemoji Country Flags', 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

/* ---------- Card primitive ---------- */
.fpf-card[b-354dyewprf] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    /* Bóng nghỉ nhẹ để thẻ nổi trên nền (wrapper trang giờ trong suốt) — đồng bộ thẻ trang kết quả */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
    /* overflow: visible — dropdown autocomplete được phép tràn ra khỏi card */
}
.fpf-card-hd[b-354dyewprf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    row-gap: 0.5rem;
    padding: 10px 16px;
    background: var(--d-surface-2);
    border-bottom: 1px solid var(--d-line);
    /* Bo góc top khi card không còn overflow:hidden */
    border-top-left-radius: var(--d-r);
    border-top-right-radius: var(--d-r);
}
.fpf-card-hd h3[b-354dyewprf] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--d-ink);
    margin: 0;
}

/* ---------- Thanh tiêu đề THẺ HÀNH KHÁCH ----------
   Nổi hơn thân thẻ và hơn các thẻ phụ (liên hệ / giá / điều kiện vé — vẫn nền xám trung
   tính) bằng nền kem ấm + gạch chân cùng tông; màu đổi theo loại khách (người lớn cam ·
   trẻ em xanh · em bé tím) đồng bộ với số thứ tự.
   KHÔNG dùng vạch dọc bên trái (user bác) và KHÔNG overflow:hidden — dropdown tìm nhân
   viên nằm trong header này, cắt là mất. */
.fpf-pax-hd[b-354dyewprf] {
    --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-354dyewprf] { --pax-c: #2563eb; --pax-tint: #eef3ff; }
.fpf-pax-hd.infant[b-354dyewprf] { --pax-c: #7c3aed; --pax-tint: #f5f0ff; }
.fpf-card-bd[b-354dyewprf] {
    padding: 14px 16px;
}

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

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

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

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

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

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

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

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

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

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

/* ---------- Total / sidebar grand total band ---------- */
.fpf-total-band[b-354dyewprf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--d-accent-grad-soft);
    border-top: 1px solid color-mix(in srgb, var(--d-line) 25%, var(--d-line));
}
.fpf-total-band-label[b-354dyewprf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink-2);
}
.fpf-total-band-value[b-354dyewprf] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 700;
    /* Nhấn con số tổng bằng cam thương hiệu (đồng bộ total ở panel "Chuyến đã chọn") */
    color: var(--d-accent);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------- Loading overlay (saving) ---------- */
.fpf-overlay[b-354dyewprf] {
    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-354dyewprf 180ms ease-out;
}
@keyframes fpf-ov-in-b-354dyewprf { from { opacity: 0; } to { opacity: 1; } }

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .fpf-overlay[b-354dyewprf], .fpf-ov-card[b-354dyewprf], .fpf-overlay-card[b-354dyewprf] { animation: none; }
    .fpf-ov-line[b-354dyewprf]::after, .fpf-ov-orb[b-354dyewprf]::before, .fpf-ov-beam span[b-354dyewprf] { animation-duration: 0s; }
    .fpf-ov-orb[b-354dyewprf]::before { border-top-color: transparent; }
    .fpf-ov-beam span[b-354dyewprf] { width: 100%; }
    .is-active .fpf-ov-stepdot[b-354dyewprf] { 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 nhưng CSS chỉ có .fpf-ov-card (thẻ overlay lúc đang lưu),
   nên 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-354dyewprf] {
    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-354dyewprf 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-354dyewprf] { min-height: 0; overflow-y: auto; }
.fpf-overlay-card .fpf-alert-body p[b-354dyewprf] { overflow-wrap: anywhere; }
.fpf-overlay-card .fpf-alert-actions[b-354dyewprf] { flex-shrink: 0; }

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

/* ---------- Sidebar collapsible header ---------- */
.fpf-sidebar-toggle[b-354dyewprf] {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--d-surface-2);
    border: 0;
    border-bottom: 1px solid var(--d-line);
    cursor: pointer;
    transition: background-color .15s ease;
}
.fpf-sidebar-toggle:hover[b-354dyewprf] { background: var(--d-line-2); }
.fpf-sidebar-toggle h3[b-354dyewprf] {
    font-size: 14px; font-weight: 600;
    color: var(--d-ink);
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0;
}
.fpf-chev[b-354dyewprf] { width: 1rem; height: 1rem; color: var(--d-ink-4); transition: transform .2s ease; }
.fpf-chev.open[b-354dyewprf] { transform: rotate(180deg); }

/* ---------- Inputs (basic theming for native controls inside form) ---------- */
.fpf-root input[type="text"][b-354dyewprf],
.fpf-root input[type="email"][b-354dyewprf],
.fpf-root input[type="tel"][b-354dyewprf],
.fpf-root select[b-354dyewprf] {
    background: var(--d-surface);
}
.fpf-root input[type="text"]:focus[b-354dyewprf],
.fpf-root input[type="email"]:focus[b-354dyewprf],
.fpf-root input[type="tel"]:focus[b-354dyewprf],
.fpf-root select:focus[b-354dyewprf] {
    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-354dyewprf] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.fpf-err[b-354dyewprf] {
    font-size: 10.5px;
    color: var(--d-danger);
    margin: 3px 0 0;
}
.fpf-input[b-354dyewprf] {
    width: 100%;
    /* Chiều cao CHỐT 38px = đúng bằng DateMaskInput → mọi ô trên cùng một hàng lưới có
       mép trên/dưới trùng nhau. Trước đây input 34px đứng cạnh ô ngày 38px, hàng field
       lởm chởm dù đã căn lưới. */
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--d-line-input);
    border-radius: 8px;
    background: var(--d-surface);
    font-size: 14px;
    color: var(--d-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fpf-input:hover:not(:focus):not(.is-err)[b-354dyewprf] { border-color: #b8bec9; }
/* Focus đồng bộ toàn form theo đúng hệ DateMaskInput (viền accent + ring mềm 3px) —
   trước đây .fpf-input KHÔNG có luật :focus nên rơi về outline mặc định trình duyệt
   (xanh dương), lệch hẳn ô ngày ngay bên cạnh. */
.fpf-input:focus[b-354dyewprf] {
    outline: none;
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.fpf-input.is-err[b-354dyewprf] { border-color: var(--d-danger); }
.fpf-input.is-err:focus[b-354dyewprf] { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }
.fpf-input--sm[b-354dyewprf] { 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-354dyewprf]  .dmi-root .dmi-input {
    border-radius: 8px;
    border-color: var(--d-line-input);
}
.fpf-root[b-354dyewprf]  .dmi-root .dmi-input:hover:not(:focus):not(.is-invalid) { border-color: #b8bec9; }
.fpf-root[b-354dyewprf]  .dmi-root .dmi-input:focus { border-color: var(--d-accent); }
.fpf-root[b-354dyewprf]  .dmi-root .dmi-input.is-invalid { border-color: var(--d-danger); }
/* Ghép addon trái (mã vùng ĐT, ngôn ngữ email) — input/select bên phải bo phải.
   (Addon IATA của ô hành lý đã bỏ: chặng bay giờ là NHÃN phía trên ô chọn, đồng bộ
   với mọi trường khác trong thẻ — nhãn trên, control dưới.) */
.fpf-input--joined[b-354dyewprf] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fpf-addon-select[b-354dyewprf] {
    /* 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-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] {
    background: var(--d-surface);
    border: 1px solid #ffd9bd;
    color: #c2410c;
}
.fpf-btn-hold:hover[b-354dyewprf] { background: var(--d-accent-soft); }

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

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

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

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

    .fpf-purpose-btn.is-active svg[b-354dyewprf] {
        transform: scale(1.05);
    }

/* ── Điều kiện vé trên trang Hành khách (card rộng) ──────────────────────────────
   FareCardConditions vẫn tôn trọng chế độ hiển thị (Chi tiết / Tóm tắt / Ẩn). Riêng card
   rộng này trình bày dạng LƯỚI 2 CỘT (≥640px) để lấp khoảng trống & rút ngắn chiều cao;
   mỗi điều kiện 1 dòng (nhãn trái · giá trị phải), tiêu đề nhóm trải hết hàng.
   Mobile: 1 cột. Override qua ::deep vì .fcc-* thuộc component FareCardConditions. */
.fpf-cond[b-354dyewprf]  .fcc-list {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 32px;
}

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

.fpf-cond[b-354dyewprf]  .fcc-grp {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding-top: 10px;
}

    /* nhóm đầu tiên: không đẩy xuống, không viền trên (đặt rõ để thắng rule :first-child của component) */
    .fpf-cond[b-354dyewprf]  .fcc-grp:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.fpf-cond[b-354dyewprf]  .fcc-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--d-line-2);
}

.fpf-cond[b-354dyewprf]  .fcc-lbl {
    font-size: 12px;
    color: var(--d-ink-3);
}

.fpf-cond[b-354dyewprf]  .fcc-val {
    font-size: 12.5px;
    text-align: right;
    flex-shrink: 0;
    max-width: 60%;
    /* KHÔNG đặt color ở đây — để tông ngữ nghĩa (.yes/.muted) của component quyết định màu */
}

/* ---------- Itinerary detail (sidebar "Chi tiết hành trình") ---------- */
.fpf-itin[b-354dyewprf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hãng bay + số hiệu */
.fpf-itin-air[b-354dyewprf] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fpf-itin-air-logo[b-354dyewprf] {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}
.fpf-itin-air-name[b-354dyewprf] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d-ink-2);
    line-height: 1.25;
    /* Hiện đủ tên hãng, xuống dòng khi hẹp thay vì cắt bằng "…". */
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}
.fpf-itin-flightno[b-354dyewprf] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    padding: 2px 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Hàng giờ bay + sân bay */
.fpf-itin-route[b-354dyewprf] {
    display: grid;
    grid-template-columns: auto minmax(64px, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.fpf-itin-route.is-leg[b-354dyewprf] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--d-line);
}
.fpf-itin-time[b-354dyewprf] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.fpf-itin-end[b-354dyewprf] {
    text-align: right;
}
.fpf-itin-iata[b-354dyewprf] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-2);
    margin: 2px 0 0;
}
.fpf-itin-city[b-354dyewprf] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    margin: 1px 0 0;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fpf-itin-end .fpf-itin-city[b-354dyewprf] {
    margin-left: auto;
}
.fpf-itin-term[b-354dyewprf] {
    font-size: 9px;
    color: var(--d-ink-4);
    margin: 1px 0 0;
}

/* Đường nối hành trình (chấm — đường — máy bay) */
.fpf-itin-path[b-354dyewprf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.fpf-itin-dur[b-354dyewprf] {
    font-size: 10px;
    font-weight: 500;
    color: var(--d-ink-3);
    white-space: nowrap;
}
.fpf-itin-line[b-354dyewprf] {
    position: relative;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, transparent, var(--d-accent) 18%, var(--d-accent) 82%, transparent);
}
.fpf-itin-line[b-354dyewprf]::before,
.fpf-itin-line[b-354dyewprf]::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--d-accent);
    transform: translateY(-50%);
}
.fpf-itin-line[b-354dyewprf]::before { left: 0; }
.fpf-itin-line[b-354dyewprf]::after { right: 0; }
.fpf-itin-plane[b-354dyewprf] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--d-accent);
    background: var(--d-surface);
    padding: 0 4px;
    display: inline-flex;
}
.fpf-itin-plane svg[b-354dyewprf] {
    width: 13px;
    height: 13px;
    display: block;
}
.fpf-itin-stops[b-354dyewprf] {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--d-good);
    white-space: nowrap;
}
.fpf-itin-legno[b-354dyewprf] {
    font-size: 9.5px;
    color: var(--d-ink-4);
    white-space: nowrap;
}

/* Điểm dừng (transit) */
.fpf-itin-transit[b-354dyewprf] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, #2563eb 7%, white);
    border: 1px solid color-mix(in srgb, #2563eb 18%, var(--d-line));
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 10.5px;
    color: #1d4ed8;
}
.fpf-itin-transit svg[b-354dyewprf] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Chip thông tin: ngày · hạng vé · máy bay · hành lý */
.fpf-itin-meta[b-354dyewprf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
    border-top: 1px dashed var(--d-line-2);
}
.fpf-itin-chip[b-354dyewprf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--d-ink-3);
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}
.fpf-itin-chip svg[b-354dyewprf] {
    width: 12px;
    height: 12px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}
.fpf-itin-chip.is-fare[b-354dyewprf] {
    color: var(--d-accent);
    background: var(--d-accent-soft);
    border-color: color-mix(in srgb, var(--d-accent) 22%, var(--d-line));
    font-weight: 600;
}
.fpf-itin-chip.is-bag[b-354dyewprf] {
    color: #166534;
    background: var(--d-good-soft);
    border-color: color-mix(in srgb, var(--d-good) 25%, var(--d-line));
}
.fpf-itin-chip.is-bag svg[b-354dyewprf] {
    color: var(--d-good);
}

/* ---------- Thanh hành động cố định đáy màn (mobile/tablet <1024px) ----------
   Tổng tiền + CTA luôn trong tầm mắt khi form dài; desktop ẩn (sidebar sticky đã có nút). */
.fpf-mobilebar[b-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] { background: var(--d-accent-soft); }
.fpf-mobilebar-hold:disabled[b-354dyewprf] { opacity: .5; cursor: not-allowed; }
.fpf-mobilebar-hold svg[b-354dyewprf] { width: 14px; height: 14px; flex-shrink: 0; }
.fpf-mobilebar-total[b-354dyewprf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.fpf-mobilebar-label[b-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] { 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-354dyewprf] { padding-bottom: 92px; }
    .fpf-root:has(.fpf-mobilebar-hold) .fpf-main-row[b-354dyewprf] { padding-bottom: 140px; }
}

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

/* ══════════════════════════════════════════════════════════════════════════════
   LƯỚI TRƯỜNG NHẬP DÙNG CHUNG — 12 cột
   Trước đây mỗi hàng tự khai một khổ cột riêng (tên: 70/80/90px + 2fr + 130px;
   CCCD: 1 ô max-width 28rem; hộ chiếu: 3 cột; hành lý: 2 cột + addon IATA) → mép
   trái/phải các ô so le nhau suốt chiều dọc thẻ, mắt không bám được cột nào ⇒ "loạn".
   Nay MỌI hàng (nhân thân · giấy tờ · hành lý · liên hệ) đổ vào cùng 1 lưới 12 cột
   nên các mép cột trùng nhau, đọc theo một nhịp.
   ══════════════════════════════════════════════════════════════════════════════ */
.fpf-fieldgrid[b-354dyewprf] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* minmax(0,1fr) — KHÔNG dùng 1fr thô: min-content của input (~20ch) nống cột tràn thẻ */
    gap: 14px 12px;
    /* start: thông báo lỗi dưới 1 ô không đẩy lệch các ô cùng hàng */
    align-items: start;
}

/* ── BỀ RỘNG THEO NỘI DUNG, VẪN CHUNG MÉP CỘT (≥641px) ──
   Chia đều tăm tắp thì ô "Tên đệm & tên" (có thể 20+ ký tự) chật bằng ô ngày sinh vốn chỉ
   chứa đúng 10 ký tự "dd/mm/yyyy" — nhìn vô lý và gõ tên thì cụt. Nên phân 2 hạng bề rộng,
   nhưng CHỌN bội số sao cho mép cột vẫn trùng nhau ở mọi hàng:
     · HẸP  (span 3) — ô có độ dài cố định/ngắn: danh xưng, Họ, ngày sinh, CCCD, số HC, hạn HC
     · RỘNG (span 6) — ô văn bản tự do dài: Tên đệm & tên, Quốc tịch (tên nước + mã)
   Nhịp mỗi hàng: 3|3|6 → mọi đường cắt đều rơi vào cột 3, 6, 12 nên các hàng vẫn thẳng mép:
     Danh xưng · Họ · Tên đệm & tên
     Ngày sinh · Số CCCD · Quốc tịch
     Số hộ chiếu · Hạn HC · (trống)
   Hàng thiếu ô thì chừa TRỐNG cột cuối, KHÔNG giãn ô cho đầy hàng — giãn là lệch mép lại. */
/* ── Nhịp cột ≥641px: mọi NHÃN rơi vào 4 cột mốc 1 · 3 · 6 · 10 ──
   Hàng tên+ngày sinh : Danh xưng 2 | Họ 3 | Tên 4 | Ngày sinh 3   (mốc 1·3·6·10)
   Hàng CCCD (chỉ VJ) : CCCD 3 + hint                              (mốc 1)
   Hàng hộ chiếu      : Quốc tịch 5 | Số hộ chiếu 4 | Hạn HC 3     (mốc 1·6·10)
   Hành lý            : mỗi chiều 5                                (mốc 1·6)
   Ngày sinh nhập chung hàng tên để case KHÔNG có CCCD (mọi hãng trừ VJ nội địa,
   là case phổ biến nhất) không còn hàng mồ côi 1 ô + 3/4 hàng trống — nguồn
   "rối mắt" user chỉ ra. Ô ngày và Hạn HC cùng đóng cột 10-12 nên mép phải phẳng. */
.fpf-fieldgrid > .fpf-f-title[b-354dyewprf] { grid-column: span 2; }
.fpf-fieldgrid > .fpf-f-last[b-354dyewprf],
.fpf-fieldgrid > .fpf-f-dob[b-354dyewprf],
.fpf-fieldgrid > .fpf-f-pexp[b-354dyewprf] { grid-column: span 3; }
.fpf-fieldgrid > .fpf-f-first[b-354dyewprf] { 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-354dyewprf] { grid-column: 1 / span 3; }
/* Hàng hộ chiếu: Số hộ chiếu MỞ ĐẦU (ghim cột 1 để không leo lên lấp chỗ trống sau ô
   CCCD), Quốc tịch span 4, Hạn HC span 3 tự chảy theo sau (6-9, 10-12).
   Quốc tịch KHÔNG lấy suất rộng span 5 (user chê "select nhỏ mà dài"): mặc định
   "Việt Nam (VNM)" chỉ cần ~142px. Cũng không xuống được span 3: khổ 641px chỉ còn
   ~118px là CỤT chữ mặc định (select thuần cụt hẳn, không "…") — span 4 ≈ 161px là
   mức nhỏ nhất an toàn, và bằng đúng khổ ô Tên nên nhìn đồng bộ. */
.fpf-fieldgrid > .fpf-f-pno[b-354dyewprf] { grid-column: 1 / span 5; }
.fpf-fieldgrid > .fpf-f-nat[b-354dyewprf] { 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-354dyewprf] { grid-column: span 5; }
.fpf-fieldgrid > .fpf-f-half[b-354dyewprf] { 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-354dyewprf] {
    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-354dyewprf] { 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-354dyewprf] {
    margin: 0 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--d-ink-3);
}

/* Nhãn chung cho một CỤM ô cùng loại (hành lý chiều đi | chiều về). Đứng ra hứng phần chữ
   lặp lại của các nhãn con, để nhãn con chỉ còn phần phân biệt. Cùng hệ chữ với .fpf-label,
   chỉ đậm & đậm màu hơn một bậc — KHÔNG icon, KHÔNG chữ hoa cam như .fpf-section-hd cũ. */
.fpf-grouplabel[b-354dyewprf] {
    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-354dyewprf] {
    margin: 4px 0 0;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--d-warn);
}

/* ---------- Cụm liên kết nhân viên trên thanh tiêu đề hành khách ----------
   Ở trên thanh "Người lớn N" và CĂN SANG PHẢI (user chốt) — `margin-left:auto`.
   Cả switch + ô tìm + nút gỡ nằm trong MỘT khối để khi hẹp xuống dòng nguyên cụm, thay vì
   mỗi control tự rớt một chỗ. */
.fpf-hd-link[b-354dyewprf] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

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

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

.fpf-unlink[b-354dyewprf] {
    /* đứ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-354dyewprf] {
    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-354dyewprf] {
    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-354dyewprf] {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-ink-2);
    flex-shrink: 0;
}
.fpf-purpose-tag[b-354dyewprf] {
    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-354dyewprf] {
    border-color: var(--d-line);
    background: var(--d-surface-2);
    color: var(--d-ink-2);
}
.fpf-purpose-tag svg[b-354dyewprf] { width: 12px; height: 12px; flex-shrink: 0; }
.fpf-purpose-hint[b-354dyewprf] {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--d-ink-3);
}

/* ---------- Điện thoại ≤640px ----------
   Xuống 2 tầng: [danh xưng | Họ] rồi Tên / Ngày sinh full; giấy tờ & hành lý & liên hệ
   mỗi ô một hàng. Số HC | hạn HC KHÔNG còn ghép cặp 6|6: thứ tự DOM giờ là
   pno → nat → pexp (Quốc tịch chen giữa) nên ghép cặp là hở nửa hàng. */
@media (max-width: 640px) {
    .fpf-fieldgrid[b-354dyewprf] { gap: 12px 10px; }
    .fpf-fieldgrid > .fpf-f-title[b-354dyewprf] { grid-column: span 4; }
    .fpf-fieldgrid > .fpf-f-last[b-354dyewprf] { grid-column: span 8; }
    .fpf-fieldgrid > .fpf-f-first[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-dob[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-cccd[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-nat[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-pno[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-pexp[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-bag[b-354dyewprf],
    .fpf-fieldgrid > .fpf-f-half[b-354dyewprf] { 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-354dyewprf] { width: 100%; margin-left: 0; }
    .fpf-empsearch[b-354dyewprf] { max-width: none; }
    .fpf-purpose-hint[b-354dyewprf] { 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-354dyewprf],
    .fpf-root input[type="email"][b-354dyewprf],
    .fpf-root input[type="tel"][b-354dyewprf],
    .fpf-root select[b-354dyewprf] {
        font-size: 16px;
        min-height: 40px;
    }
    /* DateMaskInput là component con → cần ::deep */
    .fpf-root[b-354dyewprf]  input { font-size: 16px; min-height: 40px; }
    .fpf-btn-lg[b-354dyewprf] { height: 48px; }
}

/* ---------- Trạng thái không có chuyến bay đã chọn (chặn form) ---------- */
.fpf-empty[b-354dyewprf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}
.fpf-empty-ico[b-354dyewprf] {
    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-354dyewprf] {
    width: 32px;
    height: 32px;
    color: var(--d-warn);
}
.fpf-empty h3[b-354dyewprf] {
    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-354dyewprf] {
    font-size: 14px;
    color: var(--d-ink-3);
    line-height: 1.5;
    margin: 0 0 20px;
    max-width: 400px;
}
.fpf-empty-actions[b-354dyewprf] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
/* /src/Shared/Flight/FlightPaymentStep.razor.rz.scp.css */
/* FlightPaymentStep — Manager Dashboard v4 theme tokens + targeted overrides */
.fps-root[b-q2fnbnvol4] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

/* Payment method tile — compact horizontal: icon + name */
.fps-method[b-q2fnbnvol4] {
    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-q2fnbnvol4] {
        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-q2fnbnvol4] {
        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-q2fnbnvol4] {
            transform: translateY(-2px);
        }

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

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

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

/* ─── Card primitive ─── */
.fps-card[b-q2fnbnvol4] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nghỉ nhẹ để thẻ nổi trên nền (wrapper trang giờ trong suốt) — đồng bộ thẻ trang kết quả */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
}

.fps-card-hd[b-q2fnbnvol4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--d-line-2);
}

    /* .fps-card-toggle h2 nằm cùng danh sách: header thu/mở (Chi tiết hành trình, Thông tin hành
       khách) dùng <button class="fps-card-toggle"><h2>, trước đây KHÔNG có rule nào cho h2 đó nên
       nó rơi về style mặc định của trình duyệt — chữ to, không uppercase, và Tailwind preflight đặt
       `svg { display: block }` khiến icon bị đẩy xuống dòng riêng. */
    .fps-card-hd h2[b-q2fnbnvol4],
    .fps-card-hd h3[b-q2fnbnvol4],
    .fps-card-toggle h2[b-q2fnbnvol4] {
        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-q2fnbnvol4],
        .fps-card-hd h3 svg[b-q2fnbnvol4],
        .fps-card-toggle h2 svg[b-q2fnbnvol4] {
            flex-shrink: 0;
            color: var(--d-accent);
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .fps-price-foot .val[b-q2fnbnvol4] {
        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-q2fnbnvol4] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nhẹ để thẻ tổng nổi như thẻ kết quả (wrapper giờ trong suốt) */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
    /* Là grid-item: phải align-self:start để KHÔNG bị kéo cao bằng cột trái (stretch) — nếu stretch
       thì sticky vô hiệu (thẻ đã cao hết cột). start cho thẻ cao tự nhiên → sticky mới chạy. */
    align-self: start;
    position: sticky;
    /* 88px để vượt header cố định (~80px) khi cuộn — top:16px cũ làm thẻ bị header che */
    top: 88px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Khoảng cách giữa các thẻ đặt bằng `gap` của CONTAINER, không dùng `> * + * { margin-top }`.
   Lý do: CSS isolation gắn scope attribute vào phần tử CUỐI của selector, nên rule cũ thành
   `.fps-stack > * + *[b-fps]` — chỉ áp cho thẻ do CHÍNH FlightPaymentStep render. Mọi component
   con (InsuranceOptionsBlock, PaymentMethodSelector) đều bị trượt và dính vào thẻ trước nó.
   `gap` là thuộc tính của container (container thuộc scope này) nên áp cho MỌI con bất kể scope. */
.fps-stack[b-q2fnbnvol4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /src/Shared/Flight/FlightResultCard.razor.rz.scp.css */
/* FlightResultCard — Manager Dashboard v4 theme */
.frc-root[b-q41bc11a1q] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-danger: #dc2626;
    --d-r: 12px;
    margin-top: 4px;
    color: var(--d-ink);
    transition: transform .15s ease, box-shadow .15s ease;
}

.frc-root.is-bookable[b-q41bc11a1q] { cursor: pointer; }
.frc-root.is-disabled[b-q41bc11a1q] { cursor: not-allowed; opacity: 0.6; }

.frc-root.is-bookable:hover[b-q41bc11a1q] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(16, 24, 40, 0.18), 0 2px 6px -1px rgba(16, 24, 40, 0.08);
}

/* Banner: not bookable */
.frc-banner[b-q41bc11a1q] {
    background: var(--d-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-top-left-radius: var(--d-r);
    border-top-right-radius: var(--d-r);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .frc-banner svg[b-q41bc11a1q] { width: 14px; height: 14px; }

/* Body wrapper */
.frc-body[b-q41bc11a1q] {
    display: flex;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    position: relative;
}

.frc-root.is-selected .frc-body[b-q41bc11a1q] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 1px var(--d-accent), 0 4px 14px -4px rgba(255, 107, 0, 0.25);
}

/* Info section */
.frc-info[b-q41bc11a1q] {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.frc-info-grid[b-q41bc11a1q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 768px) {
    .frc-info-grid[b-q41bc11a1q] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

.frc-airline[b-q41bc11a1q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

@media (min-width: 768px) {
    .frc-airline[b-q41bc11a1q] { flex: 0 0 auto; min-width: 140px; }
}

.frc-airline-logo[b-q41bc11a1q] {
    height: 22px;
    width: auto;
}

.frc-airline-name[b-q41bc11a1q] {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-ink-2);
    line-height: 1.25;
    /* Hiện đủ tên hãng, xuống dòng khi hẹp thay vì cắt bằng "…". */
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    display: none;
}

@media (min-width: 768px) {
    .frc-airline-name[b-q41bc11a1q] { display: inline; }
}

.frc-itinerary[b-q41bc11a1q] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 4px 0;
}

.frc-time[b-q41bc11a1q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.frc-time.frc-time-r[b-q41bc11a1q] { align-items: flex-end; }

.frc-hh[b-q41bc11a1q] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--d-ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .frc-hh[b-q41bc11a1q] { font-size: 19px; }
}

.frc-iata[b-q41bc11a1q] {
    font-size: 12px;
    color: var(--d-ink-3);
    font-weight: 500;
}

.frc-duration[b-q41bc11a1q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.frc-dur-lbl[b-q41bc11a1q] {
    font-size: 11px;
    color: var(--d-ink-3);
    font-variant-numeric: tabular-nums;
}

.frc-dur-line[b-q41bc11a1q] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 2px;
}

.frc-dot[b-q41bc11a1q] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-line);
    flex-shrink: 0;
}

.frc-line[b-q41bc11a1q] {
    flex: 1;
    height: 2px;
    background: var(--d-accent-grad);
    border-radius: 9999px;
    position: relative;
}

.frc-line-icon[b-q41bc11a1q] {
    width: 14px;
    height: 14px;
    fill: var(--d-ink-3);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.frc-stops[b-q41bc11a1q] {
    font-size: 10px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Meta row */
.frc-meta[b-q41bc11a1q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--d-line-2);
    flex-wrap: wrap;
}

.frc-flight-no[b-q41bc11a1q] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--d-ink-2);
    background: var(--d-surface-2);
    padding: 2px 8px;
    border-radius: 9999px;
}

.frc-baggage[b-q41bc11a1q] {
    font-size: 10px;
    color: var(--d-ink-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .frc-baggage svg[b-q41bc11a1q] { width: 12px; height: 12px; }

.frc-mock[b-q41bc11a1q] {
    font-size: 9px;
    color: #a16207;
    background: #fef9c3;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 600;
}

/* "Điều kiện vé" link */
.frc-conditions-link[b-q41bc11a1q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #e85f00;
    background: #fff8f2;
    border: 1px solid #ffe0c7;
    padding: 2px 8px;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s ease;
}

.frc-conditions-link:hover[b-q41bc11a1q] {
    background: #ffe8d6;
    color: #c2540a;
}

.frc-conditions-link .frc-chev[b-q41bc11a1q] {
    transition: transform 0.15s ease;
}

.frc-conditions-link .frc-chev.is-up[b-q41bc11a1q] {
    transform: rotate(180deg);
}

/* Conditions expand panel */
.frc-conditions-panel[b-q41bc11a1q] {
    padding: 12px 16px 16px 16px;
    border-top: 1px dashed #ffe0c7;
    background: linear-gradient(to bottom, #fffbf6, white);
    cursor: default;
}

.frc-root.is-expanded[b-q41bc11a1q] {
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.12);
}

/* Price pane */
.frc-price-pane[b-q41bc11a1q] {
    flex-shrink: 0;
    min-width: 112px;
    padding: 10px 12px;
    background: var(--d-accent-grad-soft);
    border-left: 1px dashed color-mix(in srgb, var(--d-line) 30%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .frc-price-pane[b-q41bc11a1q] { min-width: 144px; }
}

@media (min-width: 1024px) {
    .frc-price-pane[b-q41bc11a1q] { min-width: 184px; }
}

.frc-price-wrap[b-q41bc11a1q] { text-align: center; }

.frc-price[b-q41bc11a1q] {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--d-ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .frc-price[b-q41bc11a1q] { font-size: 18px; }
}

.frc-price-unit[b-q41bc11a1q] {
    margin: 0;
    font-size: 10px;
    color: var(--d-ink-3);
}

.frc-cta[b-q41bc11a1q] {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--d-accent) 50%, transparent);
    background: var(--d-surface);
    color: var(--d-accent);
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
}

    .frc-cta:hover[b-q41bc11a1q] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    }

    .frc-cta.is-selected[b-q41bc11a1q] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    }
/* /src/Shared/Flight/FlightSearchResults.razor.rz.scp.css */
/* FlightSearchResults — Manager Dashboard v4 theme tokens */
.fsr-root[b-318q7829cc] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);
    --d-good: #16a34a;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-r: 12px;
    color: var(--d-ink);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.005em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ─── 7-day price bar ─── */
.fsr-daybar[b-318q7829cc] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fsr-daybar-scroll[b-318q7829cc] {
    overflow-x: auto;
}

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

.fsr-day[b-318q7829cc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    text-align: center;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: filter .15s, background .15s;
    font-family: inherit;
}

    .fsr-day:last-child[b-318q7829cc] {
        border-right: 0;
    }

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

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

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

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

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

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

.fsr-day.is-active[b-318q7829cc] {
    background: var(--d-surface);
    color: var(--d-ink);
    box-shadow: inset 0 -2px 0 var(--d-accent), 0 2px 8px rgba(16, 24, 40, 0.06);
    z-index: 1;
    border-right-color: var(--d-line);
}

    .fsr-day.is-active .fsr-day-dow[b-318q7829cc] {
        color: var(--d-accent);
        font-weight: 600;
    }

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

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

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

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

.fsr-phase[b-318q7829cc] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    color: var(--d-ink-2);
}

    .fsr-phase:hover:not(:disabled):not(.is-active)[b-318q7829cc] {
        background: var(--d-surface-2);
    }

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

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

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

.fsr-phase-step[b-318q7829cc] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
}

.fsr-phase.is-active .fsr-phase-step[b-318q7829cc] {
    background: var(--d-accent-grad);
    color: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

/* ─── One-way indicator ─── */
.fsr-oneway[b-318q7829cc] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 8px 12px;
}

.fsr-oneway-ico[b-318q7829cc] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563eb;
    color: var(--d-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fsr-oneway .lbl[b-318q7829cc] {
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
}

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

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

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

/* ─── Header / route summary ─── */
.fsr-route[b-318q7829cc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.fsr-route-row[b-318q7829cc] {
    padding: 8px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

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

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

.fsr-route-iata[b-318q7829cc] {
    color: var(--d-accent);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: var(--d-accent-soft);
    padding: 1px 6px;
    border-radius: 5px;
}

.fsr-route-sep[b-318q7829cc] {
    color: var(--d-ink-4);
    margin: 0 2px;
}

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

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

.fsr-trip-badge[b-318q7829cc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    flex-shrink: 0;
}

.fsr-trip-badge.round[b-318q7829cc] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border-color: #ffe0c7;
}

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

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

.fsr-link-btn[b-318q7829cc] {
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--d-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
}

    .fsr-link-btn:hover[b-318q7829cc] {
        color: #e85f00;
    }

.fsr-count-pill[b-318q7829cc] {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}

.fsr-route-summary[b-318q7829cc] {
    padding: 4px 16px 8px;
    border-top: 1px solid var(--d-line-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .fsr-route-summary strong[b-318q7829cc] {
        color: var(--d-ink);
        font-weight: 600;
    }

/* ─── Back-to-top floating button (desktop + mobile) ─── */
/* Vị trí mặc định = desktop (góc dưới-phải, FAB lọc bị ẩn nên không vướng).
   Hiện/ẩn do JS bật/tắt thuộc tính data-visible theo scroll (xem window.fsrBackToTop). */
.fsr-totop[b-318q7829cc] {
    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-318q7829cc] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

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

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

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

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

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

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

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

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

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

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

@keyframes fsrSheetFade-b-318q7829cc {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

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

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

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

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

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

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

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

.fsr-results[b-318q7829cc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Chừa khoảng dưới cho .fsr-sticky-bar (fixed) — tránh che row cuối */
    padding-bottom: 96px;
}

    /* Chưa chọn chuyến → không có thanh "Tiếp tục" → thu nhỏ padding đáy để bớt khoảng trống */
    .fsr-results.no-bar[b-318q7829cc] {
        padding-bottom: 24px;
    }

.fsr-sidebar[b-318q7829cc] {
    width: 288px;
    flex-shrink: 0;
    position: sticky;
    /* Offset tránh fixed header (~80px) + chừa thanh "Tiếp tục" cố định ở đáy (88px).
       Là cột flex giới hạn theo viewport: panel "Chuyến đã chọn" cố định trên, thẻ Lọc
       co giãn và cuộn phần còn lại — không khối nào bị che/tràn. */
    top: 88px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Luôn kéo dài gần chân màn hình (chừa 24px), không co lại khi chọn chuyến —
       thanh "Tiếp tục" nằm giữa (fixed, min(960px)), không che cột sidebar bên phải. */
    max-height: calc(100vh - 88px - 24px);
    /* "Rail" xám nhạt bao quanh → cột phải là VÙNG CÔNG CỤ phụ, tách biệt rõ với
       danh sách chuyến bay (thẻ trắng nổi bóng) bên trái. */
    background: #eceff4;
    border: 1px solid #e3e7ee;
    border-radius: 14px;
    padding: 10px;
}

@media (max-width: 767px) {
    .fsr-sidebar[b-318q7829cc] {
        display: none;
    }
}

.fsr-sidebar-card[b-318q7829cc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Phẳng (không bóng) — là widget bên trong rail, không "nổi" như thẻ chuyến bay bên trái */
    /* Chiếm phần cao còn lại của cột sidebar và cuộn nội bộ (chiều cao tổng do .fsr-sidebar ràng).
       min-height:0 cho phép co trong flex column để body cuộn được. Tiêu đề ghim, body cuộn. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Panel "Chuyến đã chọn" (sidebar desktop) ── */
.fsr-selsum[b-318q7829cc] {
    flex-shrink: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.fsr-selsum-hd[b-318q7829cc] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-bottom: 1px solid #ffe0c7;
    background: var(--d-accent-soft);
}

    .fsr-selsum-hd svg[b-318q7829cc] {
        color: var(--d-accent);
        flex-shrink: 0;
    }

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

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

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

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

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

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

    .fsr-selsum-leg .route[b-318q7829cc] {
        font-size: 11px;
        font-weight: 700;
        color: var(--d-ink);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

        .fsr-selsum-leg .route .ar[b-318q7829cc] {
            color: var(--d-accent);
        }

    /* Hãng bay + số hiệu (hàng đầu, bên phải nhãn ĐI/VỀ) */
    .fsr-selsum-leg .air[b-318q7829cc] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        font-size: 11px;
        color: var(--d-ink-3);
        overflow: hidden;
    }

        .fsr-selsum-leg .air img[b-318q7829cc] {
            height: 16px;
            width: auto;
            flex-shrink: 0;
        }

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

        .fsr-selsum-leg .air b[b-318q7829cc] {
            flex-shrink: 0;
            color: var(--d-ink-2);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

    /* Hàng hành trình: giờ đầu | đường nối (máy bay) | giờ cuối */
    .fsr-selsum-leg .trip[b-318q7829cc] {
        display: grid;
        grid-template-columns: auto minmax(52px, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-top: 3px;
    }

        .fsr-selsum-leg .ep .t[b-318q7829cc] {
            display: block;
            font-family: 'Inter Tight', 'Inter', sans-serif;
            font-size: 17px;
            font-weight: 700;
            color: var(--d-ink);
            line-height: 1.1;
            letter-spacing: -0.015em;
            font-variant-numeric: tabular-nums;
        }

        .fsr-selsum-leg .ep .c[b-318q7829cc] {
            display: block;
            font-size: 10.5px;
            font-weight: 600;
            color: var(--d-ink-3);
            margin-top: 1px;
        }

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

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

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

            .fsr-selsum-leg .path .line[b-318q7829cc] {
                position: relative;
                width: 100%;
                height: 1.5px;
                background: linear-gradient(to right, transparent, var(--d-accent) 18%, var(--d-accent) 82%, transparent);
            }

                .fsr-selsum-leg .path .line[b-318q7829cc]::before,
                .fsr-selsum-leg .path .line[b-318q7829cc]::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    width: 4px;
                    height: 4px;
                    border-radius: 9999px;
                    background: var(--d-accent);
                    transform: translateY(-50%);
                }

                .fsr-selsum-leg .path .line[b-318q7829cc]::before { left: 0; }
                .fsr-selsum-leg .path .line[b-318q7829cc]::after { right: 0; }

                .fsr-selsum-leg .path .pl[b-318q7829cc] {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    color: var(--d-accent);
                    background: var(--d-surface);
                    padding: 0 3px;
                    display: inline-flex;
                }

                    .fsr-selsum-leg .path .pl svg[b-318q7829cc] {
                        width: 11px;
                        height: 11px;
                        display: block;
                    }

            .fsr-selsum-leg .path .st[b-318q7829cc] {
                font-size: 9px;
                font-weight: 600;
                color: var(--d-good);
                white-space: nowrap;
            }

    /* Chiều về chưa chọn — dòng gợi ý mờ */
    .fsr-selsum-leg.pending .pending-txt[b-318q7829cc] {
        font-size: 11px;
        font-style: italic;
        color: var(--d-ink-4);
    }

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

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

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

    .fsr-selsum-total .amt-wrap[b-318q7829cc] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.15;
    }

    /* Giá gốc trước giảm — gạch ngang, mờ, nằm trên giá đã giảm */
    .fsr-selsum-total .strike[b-318q7829cc] {
        font-size: 11px;
        color: var(--d-ink-4);
        text-decoration: line-through;
        font-variant-numeric: tabular-nums;
    }

    /* Dòng "Tiết kiệm X₫" — màu xanh báo có giảm giá */
    .fsr-selsum-total .save[b-318q7829cc] {
        margin-top: 3px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-good);
        font-variant-numeric: tabular-nums;
        text-align: right;
    }

    /* Ghi chú dưới tổng: "Chiều đi + Chiều về" (tổng 2 chiều) hoặc "Đã gồm cả 2 chiều" (Combine) */
    .fsr-selsum-total .note[b-318q7829cc] {
        margin-top: 3px;
        font-size: 10.5px;
        color: var(--d-ink-3);
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .fsr-selsum-total .note.combined[b-318q7829cc] {
            color: var(--d-accent);
        }

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

    .fsr-selsum-total .amt[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-accent);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

        .fsr-selsum-total .amt .unit[b-318q7829cc] {
            font-size: 11px;
            font-weight: 400;
        }

.fsr-sidebar-hd[b-318q7829cc] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--d-line);
    background: var(--d-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Tiêu đề lọc luôn cố định — không cuộn cùng body */
    flex-shrink: 0;
}

    .fsr-sidebar-hd h4[b-318q7829cc] {
        margin: 0;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.fsr-sidebar-body[b-318q7829cc] {
    /* Chiếm phần cao còn lại của card và cuộn — min-height:0 cho phép co trong flex column,
       nếu thiếu sẽ không bao giờ cuộn được. overscroll-behavior chặn cuộn lan ra trang. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
}

/* ─── Search progress card ─── */
.fsr-progress[b-318q7829cc] {
    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-318q7829cc] {
    height: 3px;
    background: var(--d-accent-grad);
    background-size: 200% 100%;
    animation: fsr-grad-slide-b-318q7829cc 2s linear infinite;
}

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

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

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

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

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

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

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

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

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

    .fsr-progress-title p[b-318q7829cc] {
        margin: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.fsr-flight[b-318q7829cc] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    /* Bóng nghỉ nhẹ để mỗi chuyến bay tự nổi trên nền web (vùng kết quả không còn thẻ bao ngoài) */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px -6px rgba(16, 24, 40, 0.10);
    transition: border-color .25s ease, box-shadow .25s ease;
}

    /* Đã chọn: viền cam + vạch cam đậm bên trái (inset) làm cue mạnh, không lẫn với hover */
    .fsr-flight.is-selected[b-318q7829cc] {
        border-color: var(--d-accent);
        box-shadow: inset 3px 0 0 var(--d-accent), 0 4px 12px -2px rgba(255, 107, 0, 0.18);
    }

    /* Hover nổi nhẹ — bóng sâu + viền cam nhạt (không dùng transform để tránh
       bẫy containing-block cho popup fixed của FareCardConditions) */
    .fsr-flight:hover[b-318q7829cc] {
        border-color: #ffd9bd;
        box-shadow: 0 8px 20px -10px rgba(16, 24, 40, 0.22);
    }

    .fsr-flight.is-selected:hover[b-318q7829cc] {
        border-color: var(--d-accent);
        box-shadow: inset 3px 0 0 var(--d-accent), 0 8px 20px -10px rgba(16, 24, 40, 0.22);
    }

.fsr-flight-row[b-318q7829cc] {
    cursor: pointer;
    transition: background .2s ease;
}

/* ─── Animation expand: slide-down + fade nhẹ khi click chọn chuyến ─── */
/* Không đặt `transform` ở keyframe `to`: với fill-mode `both`, translateY(0) vẫn là
   một transform != none → biến container thành containing-block cho popup `position:fixed`
   bên trong (tooltip cảnh báo chính sách, FareCardConditions) khiến tooltip bị .fsr-flight
   overflow:hidden CẮT MẤT. Dùng max-height làm hiệu ứng trượt để khi kết thúc transform = none. */
@keyframes fsrExpandIn-b-318q7829cc {
    from {
        opacity: 0;
        max-height: 0;
    }

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

.fsr-fares[b-318q7829cc],
.fsr-toggles[b-318q7829cc],
.fsr-itin[b-318q7829cc],
.fsr-price-detail[b-318q7829cc] {
    animation: fsrExpandIn-b-318q7829cc .28s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: top center;
    /* KHÔNG will-change: transform — sẽ tạo containing-block bẫy popup fixed vĩnh viễn */
    will-change: opacity, max-height;
}

/* Stagger nhẹ — toggle bar xuất hiện sau fare cards 60ms để mắt theo dõi tự nhiên */
.fsr-toggles[b-318q7829cc] {
    animation-delay: .06s;
}

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

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

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

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

.fsr-flight-mobile[b-318q7829cc] {
    padding: 12px;
}

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

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

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

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

    .fsr-air .name[b-318q7829cc] {
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-2);
        line-height: 1.3;
        /* Hiện đủ tên hãng, xuống dòng khi hẹp thay vì cắt bằng "…". */
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
    }

.fsr-flightno[b-318q7829cc] {
    font-size: 10.5px;
    color: var(--d-ink-3);
    background: var(--d-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

.fsr-price-min[b-318q7829cc] {
    color: var(--d-ink);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

    .fsr-price-min .unit[b-318q7829cc] {
        font-size: 10px;
        font-weight: 400;
    }

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

.fsr-time-block[b-318q7829cc] {
    flex-shrink: 0;
}

    .fsr-time-block .t[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .fsr-time-block .iata[b-318q7829cc] {
        display: inline-block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.03em;
        color: var(--d-accent);
        background: var(--d-accent-soft);
        padding: 0 5px;
        border-radius: 4px;
        margin-top: 3px;
    }

.fsr-time-block.right[b-318q7829cc] {
    text-align: right;
}

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

    .fsr-leg .dur[b-318q7829cc],
    .fsr-leg .stops[b-318q7829cc] {
        font-size: 10.5px;
        color: var(--d-ink-3);
        line-height: 1;
    }

    /* Bay thẳng = điểm cộng → nhấn xanh nhẹ; chuyến có điểm dừng giữ trung tính */
    .fsr-leg .stops.direct[b-318q7829cc] {
        color: var(--d-good);
        font-weight: 600;
    }

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

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

    .fsr-leg-line .ln[b-318q7829cc] {
        flex: 1;
        height: 2px;
        background-image: repeating-linear-gradient(to right, #ffd0ac 0 5px, transparent 5px 9px);
        position: relative;
        margin: 0 3px;
    }

    .fsr-leg-line .ln svg[b-318q7829cc] {
        width: 12px;
        height: 12px;
        fill: var(--d-accent);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

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

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

    .fsr-flight-mobile-expand svg[b-318q7829cc] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-3);
        margin: 0 auto;
        transition: transform .2s;
    }

.fsr-flight-row.is-expanded .fsr-flight-mobile-expand svg[b-318q7829cc],
.fsr-flight-row.is-expanded .fsr-flight-desktop-expand svg[b-318q7829cc] {
    transform: rotate(180deg);
}

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

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

.fsr-flight-airline[b-318q7829cc] {
    /* Đủ rộng để tên hãng dài nhất ("Vietravel Airlines") nằm gọn 1 dòng
       ở mức hẹp nhất; rộng thêm theo viewport. */
    width: clamp(184px, 14vw, 240px);
    flex-shrink: 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fsr-flight-airline img[b-318q7829cc] {
        height: 22px;
        width: auto;
        max-width: 40px;
        /* Giữ đúng tỉ lệ logo — tránh bị bóp ngang khi logo rộng chạm max-width. */
        object-fit: contain;
        flex-shrink: 0;
    }

    .fsr-flight-airline .name[b-318q7829cc] {
        font-size: 12px;
        font-weight: 600;
        color: var(--d-ink-2);
        line-height: 1.25;
        /* Luôn hiện đủ tên hãng — xuống dòng khi hẹp, KHÔNG cắt chữ. */
        min-width: 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
    }

.fsr-flight-time[b-318q7829cc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    min-width: 0;
    max-width: 480px;
    margin: 0 auto;
}

    .fsr-flight-time .t[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .fsr-flight-time .iata[b-318q7829cc] {
        display: inline-block;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.03em;
        color: var(--d-accent);
        background: var(--d-accent-soft);
        padding: 0 6px;
        border-radius: 5px;
        margin-top: 3px;
    }

.fsr-flight-no[b-318q7829cc] {
    width: 96px;
    flex-shrink: 0;
    text-align: center;
    padding: 8px 4px;
}

    .fsr-flight-no .pill[b-318q7829cc] {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--d-ink-2);
        background: var(--d-surface-2);
        padding: 2px 10px;
        border-radius: 999px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
    }

.fsr-flight-price[b-318q7829cc] {
    width: 176px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    /* Khối giá = vùng quyết định: nền gradient ấm + đường ngăn nét đứt tông cam → gắn thương hiệu */
    border-left: 1px dashed #ffd0ac;
    background: var(--d-accent-grad-soft);
}

    .fsr-flight-price .from[b-318q7829cc] {
        font-size: 10px;
        color: var(--d-ink-3);
        line-height: 1;
    }

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

    .fsr-flight-price .amt[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 19px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        line-height: 1.15;
        font-variant-numeric: tabular-nums;
    }

        .fsr-flight-price .amt .unit[b-318q7829cc] {
            font-size: 11px;
            font-weight: 400;
            vertical-align: top;
        }

    .fsr-flight-price .fares-toggle[b-318q7829cc] {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 10px;
        color: var(--d-ink);
        font-weight: 500;
        line-height: 1;
    }

        .fsr-flight-price .fares-toggle svg[b-318q7829cc] {
            width: 12px;
            height: 12px;
            transition: transform .2s;
        }

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

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

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

.fsr-fares-wrap[b-318q7829cc] {
    position: relative;
}

.fsr-fares-arrow[b-318q7829cc] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
    color: var(--d-accent);
    padding: 0;
}

    .fsr-fares-arrow:hover[b-318q7829cc] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
    }

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

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

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

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

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

.fsr-fare[b-318q7829cc] {
    position: relative;
    width: 160px;
    flex-shrink: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

@media (min-width: 768px) {
    .fsr-fare[b-318q7829cc] {
        width: 208px;
    }
}

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

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

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

.fsr-fare-banner[b-318q7829cc] {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 2;
    background: var(--d-danger);
    color: #fff;
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    padding: 2px 4px;
    line-height: 1.25;
}

    .fsr-fare-banner svg[b-318q7829cc] {
        width: 11px;
        height: 11px;
        display: inline;
        margin-right: 2px;
        vertical-align: -2px;
    }

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

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

.fsr-radio[b-318q7829cc] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--d-line);
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsr-fare.is-selected .fsr-radio[b-318q7829cc] {
    border-color: var(--d-accent);
}

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

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

.fsr-fare-price[b-318q7829cc] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--d-ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.fsr-fare.is-selected .fsr-fare-price[b-318q7829cc] {
    color: var(--d-accent);
}

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

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

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

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

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

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

    .fsr-fare-body-row strong[b-318q7829cc] {
        color: var(--d-ink-2);
        font-weight: 600;
    }

/* Khối điều kiện vé bên trong fare card — ngăn cách bằng border nét đứt */
.fsr-fare-cond[b-318q7829cc] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--d-line-2);
}

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

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

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

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

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

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

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

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

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

.fsr-tl-dot[b-318q7829cc] {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--d-accent);
    background: var(--d-surface);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsr-tl-dot .inner[b-318q7829cc] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--d-accent);
}

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

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

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

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

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

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

        .fsr-tl-info .head .t[b-318q7829cc] {
            font-family: 'Inter Tight', 'Inter', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: var(--d-ink);
            letter-spacing: -0.02em;
        }

        .fsr-tl-info .head .iata[b-318q7829cc] {
            display: inline-block;
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.03em;
            color: var(--d-accent);
            background: var(--d-accent-soft);
            padding: 0 5px;
            border-radius: 4px;
        }

        .fsr-tl-info .head .city[b-318q7829cc] {
            font-size: 11px;
            color: var(--d-ink-3);
        }

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

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

    .fsr-tl-leg .info[b-318q7829cc] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        color: var(--d-ink-3);
        background: var(--d-surface-2);
        border: 1px solid var(--d-line-2);
        border-radius: 6px;
        padding: 4px 8px;
    }

        .fsr-tl-leg .info svg[b-318q7829cc] {
            width: 11px;
            height: 11px;
            fill: var(--d-accent);
        }

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

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

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

    .fsr-transit .badge[b-318q7829cc] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 11px;
        color: #1d4ed8;
    }

        .fsr-transit .badge svg[b-318q7829cc] {
            width: 11px;
            height: 11px;
        }

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

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

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

    .fsr-itin-side.right[b-318q7829cc] {
        text-align: right;
    }

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

        .fsr-itin-side .lbl .iata[b-318q7829cc] {
            display: inline-block;
            text-transform: none;
            letter-spacing: 0.03em;
            font-size: 10.5px;
            font-weight: 800;
            color: var(--d-accent);
            background: var(--d-accent-soft);
            padding: 0 5px;
            border-radius: 4px;
            margin-right: 3px;
        }

    .fsr-itin-side .t[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .fsr-itin-side .date[b-318q7829cc] {
        font-size: 11px;
        color: var(--d-ink-3);
        margin-top: 2px;
    }

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

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

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

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

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

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

        .fsr-itin-mid .ln .bar[b-318q7829cc] {
            flex: 1;
            height: 2px;
            background-image: repeating-linear-gradient(to right, #ffd0ac 0 5px, transparent 5px 9px);
            position: relative;
        }

        .fsr-itin-mid .ln .bar svg[b-318q7829cc] {
            width: 14px;
            height: 14px;
            fill: var(--d-accent);
            position: absolute;
            right: 0;
            top: -7px;
        }

.fsr-itin-carrier[b-318q7829cc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--d-line-2);
    font-size: 11px;
    color: var(--d-ink-3);
}

    .fsr-itin-carrier img[b-318q7829cc] {
        height: 16px;
        width: auto;
    }

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

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


.fsr-price-meta[b-318q7829cc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--d-ink-3);
    margin-bottom: 8px;
}

    .fsr-price-meta strong[b-318q7829cc] {
        color: var(--d-ink-2);
        font-weight: 600;
    }

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

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

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

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

    .fsr-price-tbl thead th[b-318q7829cc] {
        padding: 8px 12px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
    }

        .fsr-price-tbl thead th.right[b-318q7829cc] {
            text-align: right;
        }

    .fsr-price-tbl tbody td[b-318q7829cc] {
        padding: 8px 12px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
        font-variant-numeric: tabular-nums;
    }

        .fsr-price-tbl tbody td.right[b-318q7829cc] {
            text-align: right;
        }

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

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

.fsr-price-total[b-318q7829cc] {
    background: var(--d-accent-soft);
    border-top: 1px solid #ffe0c7;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .fsr-price-total .lbl[b-318q7829cc] {
        font-size: 12px;
        color: var(--d-ink-2);
    }

    .fsr-price-total .amt[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

/* ─── Sticky outbound summary / continue bar ─── */
/* Dùng position: fixed để bar luôn ghim đáy viewport ngay khi user vừa chọn chuyến,
   thay vì sticky-bottom (chỉ kích hoạt khi cuộn gần cuối list — gây cảm giác "không thấy bar") */
.fsr-sticky-bar[b-318q7829cc] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    background: var(--d-surface);
    /* Stand out as the "what to do next" bar: accent ring + warm elevation. */
    border: 1.5px solid var(--d-accent);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.22), 0 2px 8px rgba(16, 24, 40, 0.06);
}

@media (min-width: 768px) {
    .fsr-sticky-bar[b-318q7829cc] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(960px, calc(100% - 32px));
    }
}

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

.fsr-sticky-info[b-318q7829cc] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Tô nền cho thông tin chuyến đã chọn để nổi bật khỏi nền trắng của thanh. */
    background: var(--d-accent-soft);
    border: 1px solid var(--d-accent-line, rgba(255, 107, 0, 0.22));
    border-radius: 10px;
    padding: 8px 12px;
}

    .fsr-sticky-info img[b-318q7829cc] {
        height: 20px;
        width: auto;
        flex-shrink: 0;
    }

    .fsr-sticky-info .lbl[b-318q7829cc] {
        font-size: 10px;
        color: var(--d-accent);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    .fsr-sticky-info .ttl[b-318q7829cc] {
        font-size: 14px;
        font-weight: 700;
        color: var(--d-ink);
        line-height: 1.2;
        margin-top: 2px;
        /* Không cho "VU774 · 07:05 → 09:15" gãy dòng khi hẹp — cắt ellipsis */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .fsr-sticky-info .ttl .sep[b-318q7829cc] {
            color: var(--d-ink-4);
            margin: 0 4px;
            font-weight: 400;
        }

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

.fsr-out-chip[b-318q7829cc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #15803d;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #bbf7d0;
    flex-shrink: 0;
}

    .fsr-out-chip svg[b-318q7829cc] {
        width: 11px;
        height: 11px;
    }

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

    .fsr-sticky-info img[b-318q7829cc] {
        display: none;
    }

    /* Mobile: 1 hàng không đủ chỗ cho info + giá + nút (giá+nút ~260px, info còn ~40px
       → giờ bay gãy dọc, các khối chèn nhau). Xuống 2 TẦNG: info full-width, dưới là
       giá (trái) + nút (phải). */
    .fsr-sticky-row[b-318q7829cc] {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 10px 12px;
    }

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

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

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

    .fsr-sticky-price .amt[b-318q7829cc] {
        font-family: 'Inter Tight', 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--d-ink);
        letter-spacing: -0.025em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

        .fsr-sticky-price .amt .unit[b-318q7829cc] {
            font-size: 11px;
            font-weight: 400;
        }

    .fsr-sticky-price .sub[b-318q7829cc] {
        font-size: 10px;
        color: var(--d-ink-4);
        margin-top: 2px;
        line-height: 1;
    }

    /* Giá gốc trước giảm — gạch ngang, mờ, nằm trên giá đã giảm */
    .fsr-sticky-price .strike[b-318q7829cc] {
        font-size: 11px;
        color: var(--d-ink-4);
        text-decoration: line-through;
        line-height: 1;
        margin-bottom: 1px;
        font-variant-numeric: tabular-nums;
    }
/* /src/Shared/Inputs/AirportSelector.razor.rz.scp.css */
/* AirportSelector — Manager Dashboard v4 theme */
.aps-root[b-8mfwlhbisb] {
    --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-8mfwlhbisb] {
    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-8mfwlhbisb] {
        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-8mfwlhbisb] {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

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

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

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

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

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

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

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

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

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

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

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

.aps-search[b-8mfwlhbisb] {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.aps-skel-loader[b-8mfwlhbisb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 0 18px;
    color: var(--d-ink-4);
}

.aps-skel-plane[b-8mfwlhbisb] {
    position: relative;
    width: 36px;
    height: 36px;
    color: var(--d-accent);
}

    .aps-skel-plane svg[b-8mfwlhbisb] {
        width: 36px;
        height: 36px;
        animation: aps-plane-b-8mfwlhbisb 2s ease-in-out infinite;
    }

.aps-skel-plane-ping[b-8mfwlhbisb] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.18);
    animation: aps-ping-b-8mfwlhbisb 1.5s ease-in-out infinite;
}

.aps-skel-text[b-8mfwlhbisb] {
    font-size: 12px;
    font-weight: 500;
    color: var(--d-ink-3);
}

.aps-skel-row[b-8mfwlhbisb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 6px;
}

.aps-skel-line[b-8mfwlhbisb] {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ede9e3, #f4f5f8, #ede9e3);
    background-size: 200% 100%;
    animation: aps-shimmer-b-8mfwlhbisb 1.5s ease-in-out infinite;
}

    .aps-skel-line.w-2-3[b-8mfwlhbisb] { width: 66%; }
    .aps-skel-line.w-1-2[b-8mfwlhbisb] { width: 50%; height: 8px; margin-top: 6px; }
    .aps-skel-line.w-code[b-8mfwlhbisb] { width: 36px; height: 14px; flex-shrink: 0; background: linear-gradient(90deg, #ffe0c7, #fff2e8, #ffe0c7); background-size: 200% 100%; }

@keyframes aps-shimmer-b-8mfwlhbisb {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes aps-plane-b-8mfwlhbisb {
    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-8mfwlhbisb {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0.6; }
}
/* /src/Shared/Inputs/CurrencyInput.razor.rz.scp.css */
/* CurrencyInput — Manager Dashboard v4 theme */
.ci-input[b-9ahufzoks8] {
    --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-9ahufzoks8]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .ci-input:hover:not(:disabled)[b-9ahufzoks8] {
        border-color: #dde1e8;
    }

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

    .ci-input:disabled[b-9ahufzoks8] {
        background: #f4f5f8;
        color: #7b8190;
        cursor: not-allowed;
    }
/* /src/Shared/Inputs/DateMaskInput.razor.rz.scp.css */
/* DateMaskInput — Manager Dashboard v4 theme */
.dmi-root[b-zwuwklm6ny] {
    --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-zwuwklm6ny] {
    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-zwuwklm6ny]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .dmi-input:hover[b-zwuwklm6ny] {
        border-color: #dde1e8;
    }

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

    .dmi-input.is-invalid[b-zwuwklm6ny] {
        border-color: var(--d-danger);
    }

        .dmi-input.is-invalid:focus[b-zwuwklm6ny] {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
        }

.dmi-guide[b-zwuwklm6ny] {
    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-zwuwklm6ny] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.dmi-icon-btn[b-zwuwklm6ny] {
    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-zwuwklm6ny] {
        color: var(--d-accent);
    }

    .dmi-icon-btn svg[b-zwuwklm6ny] {
        width: 16px;
        height: 16px;
    }

.dmi-error[b-zwuwklm6ny] {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--d-danger);
    line-height: 1.3;
}
/* /src/Shared/Inputs/DateRangePicker.razor.rz.scp.css */
/* DateRangePicker — Manager Dashboard v4 theme */
.drp-root[b-j8w4qrj0si] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-r: 12px;

    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.drp-fields[b-j8w4qrj0si] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.drp-input[b-j8w4qrj0si] {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    background: var(--d-surface);
    color: var(--d-ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}

    .drp-input:hover[b-j8w4qrj0si] {
        border-color: #dde1e8;
    }

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

.drp-sep[b-j8w4qrj0si] {
    color: var(--d-ink-4);
    font-size: 14px;
    font-weight: 500;
}

.drp-presets[b-j8w4qrj0si] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.drp-preset[b-j8w4qrj0si] {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--d-line);
    border-radius: 8px;
    background: var(--d-surface);
    color: var(--d-ink-2);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .drp-preset:hover[b-j8w4qrj0si] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: #dde1e8;
    }
/* /src/Shared/Inputs/DebouncedSearchInput.razor.rz.scp.css */
/* DebouncedSearchInput — Manager Dashboard v4 theme */
.dsi-root[b-59csqm8zjv] {
    --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-59csqm8zjv] {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    pointer-events: none;
}

.dsi-input[b-59csqm8zjv] {
    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-59csqm8zjv]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .dsi-input:hover[b-59csqm8zjv] {
        border-color: #dde1e8;
    }

    .dsi-input:focus[b-59csqm8zjv] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        background: var(--d-surface);
    }

.dsi-clear[b-59csqm8zjv] {
    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-59csqm8zjv] {
        background: var(--d-surface-2);
        color: var(--d-ink-2);
    }
/* /src/Shared/Inputs/Field.razor.rz.scp.css */
/* Field — Manager Dashboard v4 theme */
.fld-root[b-p041yjkvjv] {
    --d-ink: #121212;
    --d-ink-3: #7b8190;
    --d-danger: #dc2626;
    display: block;
}

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

.fld-req[b-p041yjkvjv] {
    color: var(--d-danger);
    margin-left: 2px;
    font-weight: 600;
}
/* /src/Shared/Inputs/FileUploadComponent.razor.rz.scp.css */
/* FileUploadComponent — Manager Dashboard v4 theme */
.fuc-root[b-g0zu2rxvnj] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-good: #16a34a;
    --d-good-soft: #dcfce7;
    --d-warn: #d97706;
    --d-danger: #dc2626;
    --d-danger-soft: #fee2e2;
    --d-r: 12px;

    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--d-ink);
}

/* Hidden input */
.fuc-input[b-g0zu2rxvnj] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

/* ─── Drop zone ─── */
.fuc-drop[b-g0zu2rxvnj] {
    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-g0zu2rxvnj] {
        border-color: var(--d-ink-4);
        background: var(--d-surface);
    }

    .fuc-drop.is-dragging[b-g0zu2rxvnj] {
        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-g0zu2rxvnj] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

.fuc-drop-label[b-g0zu2rxvnj] {
    display: block;
    cursor: pointer;
}

.fuc-drop-body[b-g0zu2rxvnj] {
    text-align: center;
    padding: 28px 20px;
}

.fuc-drop-ico[b-g0zu2rxvnj] {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    color: var(--d-ink-4);
}

.fuc-drop-spinner[b-g0zu2rxvnj] {
    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-g0zu2rxvnj 0.7s linear infinite;
}

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

.fuc-drop-title[b-g0zu2rxvnj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    margin: 0 0 4px;
}

    .fuc-drop-title .accent[b-g0zu2rxvnj] {
        color: var(--d-accent);
        font-weight: 600;
    }

    .fuc-drop-title .muted[b-g0zu2rxvnj] {
        color: var(--d-ink-3);
        font-weight: 400;
    }

.fuc-drop-hint[b-g0zu2rxvnj] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin: 2px 0 0;
}

.fuc-drop-uploading-text[b-g0zu2rxvnj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-accent);
    margin: 0;
}

/* ─── File list ─── */
.fuc-list[b-g0zu2rxvnj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fuc-item[b-g0zu2rxvnj] {
    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-g0zu2rxvnj] {
        border-color: #dde1e8;
        background: var(--d-surface);
    }

.fuc-item-ico[b-g0zu2rxvnj] {
    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-g0zu2rxvnj] { background: var(--d-danger); }
    .fuc-item-ico.is-doc[b-g0zu2rxvnj] { background: #2563eb; }
    .fuc-item-ico.is-xls[b-g0zu2rxvnj] { background: var(--d-good); }
    .fuc-item-ico.is-img[b-g0zu2rxvnj] { background: var(--d-accent-grad); }
    .fuc-item-ico.is-zip[b-g0zu2rxvnj] { background: var(--d-warn); }

    .fuc-item-ico svg[b-g0zu2rxvnj] {
        width: 18px;
        height: 18px;
    }

.fuc-item-info[b-g0zu2rxvnj] {
    flex: 1;
    min-width: 0;
}

.fuc-item-name[b-g0zu2rxvnj] {
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuc-item-size[b-g0zu2rxvnj] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 2px;
}

/* Progress */
.fuc-progress[b-g0zu2rxvnj] {
    margin-top: 6px;
}

.fuc-progress-bar[b-g0zu2rxvnj] {
    height: 4px;
    background: var(--d-line-2);
    border-radius: 999px;
    overflow: hidden;
}

.fuc-progress-fill[b-g0zu2rxvnj] {
    height: 100%;
    background: var(--d-accent-grad);
    transition: width .25s ease;
}

.fuc-progress-text[b-g0zu2rxvnj] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--d-ink-3);
    margin-top: 3px;
}

/* Status */
.fuc-status[b-g0zu2rxvnj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

    .fuc-status.is-good[b-g0zu2rxvnj] { color: var(--d-good); }
    .fuc-status.is-error[b-g0zu2rxvnj] { color: var(--d-danger); }

    .fuc-status svg[b-g0zu2rxvnj] {
        width: 12px;
        height: 12px;
    }

/* Remove button */
.fuc-remove[b-g0zu2rxvnj] {
    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-g0zu2rxvnj] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
    }

    .fuc-remove svg[b-g0zu2rxvnj] {
        width: 16px;
        height: 16px;
    }

/* ─── Errors ─── */
.fuc-errors[b-g0zu2rxvnj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fuc-error[b-g0zu2rxvnj] {
    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-g0zu2rxvnj] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--d-danger);
    }
/* /src/Shared/Inputs/MoneyInput.razor.rz.scp.css */
/* MoneyInput — Manager Dashboard v4 theme */
.mi-root[b-gwxmzvchh9] {
    --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-gwxmzvchh9] {
    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-gwxmzvchh9]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

    .mi-input:hover:not(:disabled)[b-gwxmzvchh9] {
        border-color: #dde1e8;
    }

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

    .mi-input:disabled[b-gwxmzvchh9] {
        background: #f4f5f8;
        color: var(--d-ink-3);
        cursor: not-allowed;
    }

.mi-suffix[b-gwxmzvchh9] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
}
/* /src/Shared/Inputs/NmDatePicker.razor.rz.scp.css */
/* ── Leading icon chip (chỉ FlightSearchBox truyền) ──────────── */
.dp-lead-ico[b-fjaruk519s] {
    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-fjaruk519s]  svg {
        width: 15px;
        height: 15px;
    }

.range-trigger.dp-open .dp-lead-ico[b-fjaruk519s],
.single-trigger.dp-open .dp-lead-ico[b-fjaruk519s] {
    background: #fff2e8;
    border-color: #ffd9bd;
    color: #ff6b00;
}

/* ── Trigger area ─────────────────────────────────────────── */
.range-trigger.dp-open[b-fjaruk519s],
.single-trigger.dp-open[b-fjaruk519s] {
    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-fjaruk519s],
.single-trigger > div[b-fjaruk519s] {
    min-width: 0;
}

.dp-label[b-fjaruk519s],
.dp-value[b-fjaruk519s] {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Blinking cursor on the active field */
@keyframes blink-b-fjaruk519s {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.field-active[b-fjaruk519s]::after {
    content: '|';
    animation: blink-b-fjaruk519s 1s infinite;
    color: #FF6B35;
    display: inline-block;
    margin-left: 1px;
}

/* ── Calendar panel position ──────────────────────────────── */
.calendar-panel[b-fjaruk519s] {
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    max-width: fit-content;
}

@media (max-width: 768px) {
    .calendar-panel[b-fjaruk519s] {
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 32px);
    }
}

/* ── Day cells ────────────────────────────────────────────── */
.day-cell[b-fjaruk519s] {
    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-fjaruk519s] {
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: #111827;
}

/* Today */
.today-day[b-fjaruk519s] {
    background-color: transparent;
}
.today-day:hover[b-fjaruk519s] {
    background-color: #f3f4f6;
}
.today-day .day-num[b-fjaruk519s] {
    color: #FF6B35;
    font-weight: 700;
}

/* Selected / Start / End */
.day-cell.bg-\[\#FF6B35\] .day-num[b-fjaruk519s],
.day-cell.bg-\[\#FF6B35\] .lunar-label[b-fjaruk519s] {
    color: #ffffff !important;
}

/* In range */
.day-cell.bg-orange-100:hover[b-fjaruk519s] {
    background-color: rgba(255, 107, 53, 0.18);
}

/* Preview range (while hovering before confirming end date) */
@keyframes previewPulse-b-fjaruk519s {
    0%, 100% { background-color: rgba(255, 107, 53, 0.14); }
    50%       { background-color: rgba(255, 107, 53, 0.24); }
}
@keyframes previewEndPulse-b-fjaruk519s {
    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-fjaruk519s] {
    animation: previewPulse-b-fjaruk519s 1.5s ease-in-out infinite;
}

.preview-end-date[b-fjaruk519s] {
    animation: previewEndPulse-b-fjaruk519s 1.5s ease-in-out infinite;
    border: 2px dashed rgba(255, 107, 53, 0.5);
    border-radius: 6px;
}
.preview-end-date .day-num[b-fjaruk519s] {
    color: #FF6B35;
    font-weight: 700;
}

/* ── Lunar date label ─────────────────────────────────────── */
.lunar-label[b-fjaruk519s] {
    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-fjaruk519s] {
    color: rgba(255,255,255,0.75);
}

/* ── Navigation button ────────────────────────────────────── */
.nav-btn[b-fjaruk519s] {
    color: #374151;
    flex-shrink: 0;
}
.nav-btn:hover:not(:disabled)[b-fjaruk519s] {
    background-color: #f3f4f6;
    color: #111827;
}
.nav-btn:disabled[b-fjaruk519s] {
    opacity: 0.3;
    cursor: not-allowed;
}
/* /src/Shared/Inputs/SaveButton.razor.rz.scp.css */
/* SaveButton — Manager Dashboard v4 theme */
.sb-btn[b-l2hgdbdp10] {
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--d-r);
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: background .12s, box-shadow .12s, opacity .12s;
    width: 100%;
}

@media (min-width: 640px) {
    .sb-btn[b-l2hgdbdp10] {
        width: auto;
    }
}

    .sb-btn:hover:not(:disabled)[b-l2hgdbdp10] {
        background: var(--d-accent-grad-hover);
    }

    .sb-btn:disabled[b-l2hgdbdp10] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.sb-spin[b-l2hgdbdp10] {
    display: inline-block;
    animation: sb-spin-b-l2hgdbdp10 0.9s linear infinite;
}

@keyframes sb-spin-b-l2hgdbdp10 {
    to { transform: rotate(360deg); }
}
/* /src/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-uuauvtllb1] {
    font-weight: 700;
    color: #047857;
    background: rgba(16, 185, 129, .14);
    padding: 0 4px;
    border-radius: 4px;
    /* "1.000.000.000 đồng" bị ngắt giữa số và đơn vị thì mất luôn tác dụng tô */
    white-space: nowrap;
}
/* /src/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-ywdvplbuoo] {
    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-ywdvplbuoo] {
    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-ywdvplbuoo] {
    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-ywdvplbuoo] {
    color: #10b981;
    flex-shrink: 0;
}

.ins-brand[b-ywdvplbuoo] {
    font-size: 10px;
    font-weight: 400;
    color: var(--d-ink-4);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 2px;
}

.ins-deselect[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.ins-deselect svg[b-ywdvplbuoo] {
    color: currentColor;
}

.ins-body[b-ywdvplbuoo] {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ins-loading[b-ywdvplbuoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    font-size: 14px;
    color: var(--d-ink-3);
}

.ins-spinner[b-ywdvplbuoo] {
    width: 14px;
    height: 14px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ins-spin-b-ywdvplbuoo .9s linear infinite;
}

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

.ins-desc[b-ywdvplbuoo] {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--d-ink-3);
    line-height: 1.5;
}

.ins-option[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    border-color: #34d399;
}

.ins-option.is-selected[b-ywdvplbuoo] {
    border-color: #10b981;
    background: #ecfdf5;
}

.ins-option input[type="radio"][b-ywdvplbuoo] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.ins-radio[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    border-color: #10b981;
    background: #10b981;
}

.ins-radio-dot[b-ywdvplbuoo] {
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
}

.ins-option-body[b-ywdvplbuoo] {
    flex: 1;
    min-width: 0;
}

.ins-option-top[b-ywdvplbuoo] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ins-name[b-ywdvplbuoo] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.3;
}

.ins-price[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    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-ywdvplbuoo] {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ins-benefits li[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    flex-shrink: 0;
    margin-top: 3px;
    color: #059669;
}

.ins-insurer[b-ywdvplbuoo] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--d-ink-3);
}

.ins-links[b-ywdvplbuoo] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.ins-links a[b-ywdvplbuoo] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #059669;
    text-decoration: none;
}

.ins-links a:hover[b-ywdvplbuoo] {
    text-decoration: underline;
}

.ins-links a svg[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    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-ywdvplbuoo] { 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-ywdvplbuoo] {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.ins-retry[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

.ins-error-banner[b-ywdvplbuoo] {
    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-ywdvplbuoo] {
    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-ywdvplbuoo] {
    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-ywdvplbuoo] { flex-shrink: 0; margin-top: 2px; }
/* /src/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-war7vel57q] {
    display: flex;
    flex-direction: column;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

.inssc--boxed[b-war7vel57q] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.inssc-head[b-war7vel57q] {
    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-war7vel57q] { padding: 14px 16px; }

.inssc-head__text[b-war7vel57q] { max-width: 64ch; }
.inssc-head__act[b-war7vel57q] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.inssc-lastscan[b-war7vel57q] {
    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-war7vel57q] { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.inssc-hint[b-war7vel57q] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }

.inssc-body[b-war7vel57q] { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.inssc--boxed .inssc-body[b-war7vel57q] { padding: 14px 16px; }

.inssc-note[b-war7vel57q] {
    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-war7vel57q] {
    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-war7vel57q] { display: flex; align-items: center; gap: 10px; }

.inssc-scan__ico[b-war7vel57q] {
    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-war7vel57q] { display: block; animation: inssc-spin-b-war7vel57q 1.1s linear infinite; }

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

.inssc-scan__text[b-war7vel57q] { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.inssc-scan__step[b-war7vel57q] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.inssc-scan__note[b-war7vel57q] { 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-war7vel57q] {
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-brand-700);
    flex-shrink: 0;
    align-self: flex-start;
}

.inssc-scan__skel[b-war7vel57q] { 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-war7vel57q] { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .inssc-scan__ico i[b-war7vel57q] { animation: none; }
}

/* ── Section ── */
.inssc-sec[b-war7vel57q] { display: flex; flex-direction: column; gap: 8px; }
.inssc-sec--history[b-war7vel57q] { padding-top: 12px; border-top: 1px solid var(--nm-border); }

.inssc-sec-head[b-war7vel57q] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.inssc-sec-lbl[b-war7vel57q] {
    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-war7vel57q] {
    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-war7vel57q] { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px; }
.inssc-stamp[b-war7vel57q] { font-size: 12px; color: var(--nm-ink); white-space: nowrap; }
.inssc-num[b-war7vel57q] {
    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-war7vel57q] { color: var(--nm-muted); }
.inssc-em[b-war7vel57q] { color: var(--nm-brand-700); font-weight: 700; }
.inssc-bad[b-war7vel57q] { color: var(--nm-bad); }

.inssc-2line[b-war7vel57q] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.inssc-2line__main[b-war7vel57q] { font-weight: 500; color: var(--nm-ink); }
.inssc-2line__sub[b-war7vel57q] {
    font-size: 11px;
    color: var(--nm-muted);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-war7vel57q] .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-war7vel57q] {
    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-war7vel57q] { color: var(--nm-ink); font-weight: 600; }
.inssc-row-note--bad[b-war7vel57q] { background: color-mix(in srgb, var(--nm-bad) 8%, transparent); color: var(--nm-bad); }
.inssc-row-note--bad b[b-war7vel57q] { color: var(--nm-bad); }

/* ── Chốt cập nhật ── */
.inssc-apply[b-war7vel57q] {
    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-war7vel57q] { margin: 0; font-size: 12.5px; color: var(--nm-ink); }
.inssc-apply__sum b[b-war7vel57q] { 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-war7vel57q] {
    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-war7vel57q] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inssc-await__ico[b-war7vel57q] {
    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-war7vel57q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.inssc-await__text b[b-war7vel57q] { font-size: 12.5px; color: var(--nm-ink); font-weight: 600; }
.inssc-await__meta[b-war7vel57q] { font-size: 11.5px; color: var(--nm-muted); }

.inssc-await__list[b-war7vel57q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inssc-await__row[b-war7vel57q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inssc-await__name[b-war7vel57q] { font-size: 12px; color: var(--nm-ink); }
.inssc-await__pid[b-war7vel57q] { font-size: 11px; color: var(--nm-muted); }

.inssc-await__note[b-war7vel57q] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }
.inssc-await__partner[b-war7vel57q] { 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-war7vel57q] {
    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-war7vel57q] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inssc-fail__ico[b-war7vel57q] {
    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-war7vel57q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.inssc-fail__text b[b-war7vel57q] { font-size: 12.5px; color: var(--nm-ink); font-weight: 600; }
.inssc-fail__meta[b-war7vel57q] { font-size: 11.5px; color: var(--nm-muted); }

.inssc-fail__list[b-war7vel57q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.inssc-fail__row[b-war7vel57q] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inssc-fail__name[b-war7vel57q] { font-size: 12px; color: var(--nm-ink); }
.inssc-fail__pid[b-war7vel57q] { font-size: 11px; color: var(--nm-muted); }
.inssc-fail__why[b-war7vel57q] { 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-war7vel57q] {
    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-war7vel57q] { margin: 0; font-size: 12px; color: var(--nm-ink); line-height: 1.5; }
.inssc-fail__confirm-act[b-war7vel57q] { display: flex; gap: 8px; justify-content: flex-end; }

.inssc-fail__note[b-war7vel57q] { margin: 0; font-size: 11.5px; color: var(--nm-muted); line-height: 1.5; }
/* /src/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-ymz0kcsf6n] {
    background: #fff;
    border: 1px solid #a7f3d0;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insup-head[b-ymz0kcsf6n] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.insup-ico[b-ymz0kcsf6n] {
    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-ymz0kcsf6n] { margin: 0; font-size: 15px; font-weight: 700; color: #121212; }
.insup-sub[b-ymz0kcsf6n] { margin: 2px 0 0; font-size: 12.5px; color: #7b8190; line-height: 1.5; }

.insup-loading[b-ymz0kcsf6n] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7b8190;
}

.insup-spinner[b-ymz0kcsf6n] {
    width: 14px;
    height: 14px;
    border: 2px solid #10b981;
    border-top-color: transparent;
    border-radius: 50%;
    animation: insup-spin-b-ymz0kcsf6n .9s linear infinite;
}

@keyframes insup-spin-b-ymz0kcsf6n { 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-ymz0kcsf6n] { border-color: #fde68a; background: #fffbeb; }
.insup-pending .insup-ico[b-ymz0kcsf6n] { background: #fef3c7; color: #b45309; }

.insup-card[b-ymz0kcsf6n] {
    border: 1px solid #f0f0ef;
    border-radius: 10px;
    padding: 13px 15px;
    background: #fafaf9;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insup-card-top[b-ymz0kcsf6n] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.insup-name[b-ymz0kcsf6n] { font-size: 14px; font-weight: 600; color: #121212; line-height: 1.3; }
.insup-price[b-ymz0kcsf6n] { font-size: 15px; font-weight: 700; color: #059669; flex-shrink: 0; }

.insup-benefits[b-ymz0kcsf6n] {
    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-ymz0kcsf6n] {
    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-ymz0kcsf6n] { flex-shrink: 0; margin-top: 3px; color: #059669; }

.insup-insurer[b-ymz0kcsf6n] { font-size: 11px; color: #7b8190; }

.insup-card-foot[b-ymz0kcsf6n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.insup-links[b-ymz0kcsf6n] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.insup-links a[b-ymz0kcsf6n] { font-size: 11.5px; color: #059669; text-decoration: none; }
.insup-links a:hover[b-ymz0kcsf6n] { text-decoration: underline; }

.insup-actions[b-ymz0kcsf6n] { display: flex; justify-content: flex-end; }

.insup-btn[b-ymz0kcsf6n] {
    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-ymz0kcsf6n] { background: #059669; border-color: #059669; color: #fff; }
.insup-btn-primary:hover:not(:disabled)[b-ymz0kcsf6n] { background: #047857; border-color: #047857; }
.insup-btn:disabled[b-ymz0kcsf6n] { opacity: .6; cursor: default; }

.insup-note[b-ymz0kcsf6n] { margin: 0; font-size: 11.5px; color: #a5abb8; line-height: 1.5; }

.insup-error[b-ymz0kcsf6n] {
    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-ymz0kcsf6n] { flex-direction: column; align-items: stretch; }
    .insup-btn[b-ymz0kcsf6n] { 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-ymz0kcsf6n] { font-size: 11px; color: #7b8190; line-height: 1.45; }

.insup-excluded[b-ymz0kcsf6n] {
    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-ymz0kcsf6n] { flex-shrink: 0; margin-top: 2px; }
/* /src/Shared/Marketing/BannerComponent.razor.rz.scp.css */
.title[b-0xn0nwrqqk]{
    font-weight: 600;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mobile / tablet: text fill bằng gradient lẫn với ảnh nền → làm trắng đặc + shadow cho dễ đọc */
@media (max-width: 1023px) {
    .title[b-0xn0nwrqqk] {
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        background: none !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6);
    }

    .title-advance svg path[b-0xn0nwrqqk] {
        stroke: #fff !important;
        stroke-width: 0.4 !important;
        fill: #fff !important;
        opacity: 0.95 !important;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
        animation: none !important;
    }

    .title-advance svg stop:first-child[b-0xn0nwrqqk],
    .title-advance svg stop:last-child[b-0xn0nwrqqk] {
        animation: none !important;
    }
}

.animate-cloud-idle[b-0xn0nwrqqk]{
    animation: cloud-idle-b-0xn0nwrqqk 60s infinite alternate;
}


@keyframes cloud-idle-b-0xn0nwrqqk {
    25% {
        transform: translate3d(80px,0,0)
    }

    50% {
        transform: translate3d(75px,-20px,0)
    }

    75% {
        transform: translate3d(55px,25px,0)
    }

    to {
        transform: translate3d(35px,-15px,0)
    }
}

.title-advance svg path[b-0xn0nwrqqk]{
    fill: transparent;
    stroke: #fff;
    stroke-width: 0.1;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: textAnimation-b-0xn0nwrqqk 1s ease-in-out 1 forwards;
}

.title-advance svg stop:first-child[b-0xn0nwrqqk]{
    animation: gradientStop1Animation-b-0xn0nwrqqk 1s ease-in-out 1 forwards;
}

.title-advance svg stop:last-child[b-0xn0nwrqqk]{
    animation: gradientStop2Animation-b-0xn0nwrqqk 1s ease-in-out 1 forwards;
}

@keyframes textAnimation-b-0xn0nwrqqk {
    0% {
        stroke-dashoffset: 50;
        fill: transparent;
    }
    80% {
        fill: transparent;
    }
    100% {
        fill: url(#textGradient);
        opacity: 60%;
        stroke-dashoffset: 0;
    }
}

@keyframes gradientStop1Animation-b-0xn0nwrqqk {
    0% {
        stop-opacity: 0;
    }
    80% {
        stop-opacity: 0;
    }
    100% {
        stop-opacity: 1;
    }
}

@keyframes gradientStop2Animation-b-0xn0nwrqqk {
    0% {
        stop-opacity: 0;
    }
    80% {
        stop-opacity: 0;
    }
    100% {
        stop-opacity: 0;
    }
}
/* /src/Shared/Marketing/BestAddressCarousel.razor.rz.scp.css */
/* BestAddressCarousel — Manager Dashboard v4 theme */
.bac-root[b-frxa71xcw8] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    padding: 64px 0;
    background: var(--d-surface);
    color: var(--d-ink);
    overflow: hidden;
    position: relative;
}

@media (min-width: 768px) {
    .bac-root[b-frxa71xcw8] { padding: 80px 0; }
}

.bac-inner[b-frxa71xcw8] {
    width: 100%;
    position: relative;
    z-index: 10;
}

/* Header */
.bac-header[b-frxa71xcw8] {
    text-align: center;
    margin-bottom: 36px;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .bac-header[b-frxa71xcw8] {
        padding: 0 32px;
        margin-bottom: 56px;
    }
}

.bac-title[b-frxa71xcw8] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0 0 10px;
    opacity: 1;
    animation: bacFadeInLeft-b-frxa71xcw8 1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@media (min-width: 768px) {
    .bac-title[b-frxa71xcw8] { font-size: 34px; }
}

.bac-subtitle[b-frxa71xcw8] {
    font-size: 14px;
    color: var(--d-ink-3);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
    opacity: 1;
    animation: bacFadeInRight-b-frxa71xcw8 1s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both;
}

@keyframes bacFadeInLeft-b-frxa71xcw8 {
    from { opacity: 0; transform: translateX(-30px) translateY(8px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes bacFadeInRight-b-frxa71xcw8 {
    from { opacity: 0; transform: translateX(30px) translateY(8px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Carousel */
.bac-carousel[b-frxa71xcw8] {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.bac-fade-left[b-frxa71xcw8],
.bac-fade-right[b-frxa71xcw8] {
    position: absolute;
    inset-block: 0;
    width: 15%;
    z-index: 10;
    pointer-events: none;
}

.bac-fade-left[b-frxa71xcw8]  { left: 0;  background: linear-gradient(to right, #ffffff 12%, transparent 100%); }
.bac-fade-right[b-frxa71xcw8] { right: 0; background: linear-gradient(to left,  #ffffff 12%, transparent 100%); }

.bac-track-wrap[b-frxa71xcw8] { overflow: hidden; }

.bac-track[b-frxa71xcw8] {
    display: flex;
    align-items: center;
    padding: 32px 0;
}

@media (max-width: 767px) {
    .bac-track[b-frxa71xcw8] { padding: 16px 0; }
}

.bac-track.transition-enabled[b-frxa71xcw8] {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slide */
.bac-slide[b-frxa71xcw8] {
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(24px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

    .bac-slide.visible[b-frxa71xcw8] {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
    }

.bac-slide-inner[b-frxa71xcw8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bac-card[b-frxa71xcw8] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
}

    .bac-card.is-active[b-frxa71xcw8] {
        box-shadow: 0 24px 48px -16px rgba(16, 24, 40, 0.30), 0 8px 16px -8px rgba(16, 24, 40, 0.15);
        z-index: 10;
        border-color: transparent;
    }

.bac-card img[b-frxa71xcw8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-out;
}

.bac-card:hover img[b-frxa71xcw8] { transform: scale(1.05); }

.bac-card-overlay[b-frxa71xcw8] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 24, 40, 0.80) 0%, rgba(16, 24, 40, 0.18) 55%, transparent 100%);
}

.bac-info[b-frxa71xcw8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    color: #fff;
}

    .bac-info.is-active[b-frxa71xcw8] {
        animation: bacSlideUp-b-frxa71xcw8 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

@keyframes bacSlideUp-b-frxa71xcw8 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bac-tag[b-frxa71xcw8] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bac-info-row[b-frxa71xcw8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

    .bac-info-row.is-active[b-frxa71xcw8] { margin-bottom: 14px; }

.bac-city[b-frxa71xcw8] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    font-size: 17px;
}

    .bac-city.is-active[b-frxa71xcw8] { font-size: 24px; }

.bac-country[b-frxa71xcw8] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 2px;
}

    .bac-country svg[b-frxa71xcw8] {
        width: 11px;
        height: 11px;
        flex-shrink: 0;
    }

.bac-price-from[b-frxa71xcw8] {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    text-align: right;
}

.bac-price[b-frxa71xcw8] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 700;
    color: #fff;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: right;
    letter-spacing: -0.02em;
}

    .bac-price.is-active[b-frxa71xcw8] { font-size: 16px; }

.bac-cta[b-frxa71xcw8] {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .15s;
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.25);
}

    .bac-cta:hover[b-frxa71xcw8] {
        filter: brightness(1.05);
    }

    .bac-cta:active[b-frxa71xcw8] {
        transform: translateY(1px);
    }

/* Navigation */
.bac-nav[b-frxa71xcw8] {
    margin: 16px auto 0;
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (min-width: 640px) {
    .bac-nav[b-frxa71xcw8] { margin-top: 32px; }
}

.bac-nav-row[b-frxa71xcw8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (min-width: 640px) {
    .bac-nav-row[b-frxa71xcw8] { gap: 24px; }
}

.bac-arrow[b-frxa71xcw8] {
    width: 80px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    color: var(--d-ink-2);
}

@media (min-width: 640px) {
    .bac-arrow[b-frxa71xcw8] {
        width: 128px;
        height: 48px;
    }
}

    .bac-arrow:hover[b-frxa71xcw8] {
        background: var(--d-surface-2);
        border-color: var(--d-ink-4);
        color: var(--d-ink);
    }

    .bac-arrow svg[b-frxa71xcw8] {
        width: 16px;
        height: 16px;
    }

@media (min-width: 640px) {
    .bac-arrow svg[b-frxa71xcw8] {
        width: 20px;
        height: 20px;
    }
}

.bac-flip-in[b-frxa71xcw8] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.bac-flip-in-delayed[b-frxa71xcw8] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
}

.bac-nav.visible .bac-flip-in[b-frxa71xcw8],
.bac-nav.visible .bac-flip-in-delayed[b-frxa71xcw8] {
    opacity: 1;
    transform: translateY(0);
}

/* Dots */
.bac-dots[b-frxa71xcw8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 640px) {
    .bac-dots[b-frxa71xcw8] { gap: 8px; }
}

.bac-dot[b-frxa71xcw8] {
    display: inline-block;
    height: 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                background-color 0.4s ease;
    flex-shrink: 0;
    border: 0;
    padding: 0;
}

.bac-dot.is-active[b-frxa71xcw8] {
    width: 32px;
    background: var(--d-accent-grad);
}

.bac-dot.is-inactive[b-frxa71xcw8] {
    width: 8px;
    background: var(--d-line);
}

    .bac-dot.is-inactive:hover[b-frxa71xcw8] {
        background: var(--d-ink-4);
    }
/* /src/Shared/Marketing/DestinationGallery.razor.rz.scp.css */
/* DestinationGallery — Manager Dashboard v4 theme */
.dgl-root[b-po7zhwpm7m] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    padding: 64px 16px;
    background: var(--d-surface);
    color: var(--d-ink);
}

@media (min-width: 640px) {
    .dgl-root[b-po7zhwpm7m] { padding: 80px 24px; }
}

.dgl-container[b-po7zhwpm7m] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.dgl-header[b-po7zhwpm7m] {
    text-align: center;
    margin-bottom: 28px;
}

.dgl-title[b-po7zhwpm7m] {
    font-family: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink);
    line-height: 1.15;
    margin: 0 0 10px;
}

@media (min-width: 768px) {
    .dgl-title[b-po7zhwpm7m] { font-size: 32px; }
}

.dgl-desc[b-po7zhwpm7m] {
    font-size: 14px;
    color: var(--d-ink-3);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Tabs */
.dgl-tabs[b-po7zhwpm7m] {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

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

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

    .dgl-tab.is-active[b-po7zhwpm7m] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

/* Grid */
.dgl-grid[b-po7zhwpm7m] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    grid-auto-rows: 180px;
}

@media (min-width: 768px) {
    .dgl-grid[b-po7zhwpm7m] {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* Tile */
.dgl-tile[b-po7zhwpm7m] {
    position: relative;
    overflow: hidden;
    border-radius: var(--d-r);
    cursor: pointer;
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    text-align: left;
    padding: 0;
    min-height: 180px;
    transition: border-color .15s, box-shadow .15s;
}

    .dgl-tile:hover[b-po7zhwpm7m] {
        border-color: #dde1e8;
        box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.12);
    }

@media (min-width: 768px) {
    .dgl-tile.is-feature[b-po7zhwpm7m] { grid-row: span 2; }
    .dgl-tile.is-wide[b-po7zhwpm7m] { grid-column: span 2; }
}

.dgl-tile img[b-po7zhwpm7m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-out;
}

.dgl-tile:hover img[b-po7zhwpm7m] {
    transform: scale(1.06);
}

.dgl-tile-fallback[b-po7zhwpm7m] {
    width: 100%;
    height: 100%;
    background: var(--d-accent-grad);
    position: relative;
}

    .dgl-tile-fallback svg[b-po7zhwpm7m] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.12;
    }

.dgl-tile-overlay[b-po7zhwpm7m] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 24, 40, 0.78) 0%, rgba(16, 24, 40, 0.18) 55%, transparent 100%);
    transition: background .25s;
}

.dgl-tile:hover .dgl-tile-overlay[b-po7zhwpm7m] {
    background: linear-gradient(to top, rgba(16, 24, 40, 0.85) 0%, rgba(16, 24, 40, 0.25) 60%, transparent 100%);
}

.dgl-tile-info[b-po7zhwpm7m] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    color: #fff;
}

@media (min-width: 768px) {
    .dgl-tile-info[b-po7zhwpm7m] { padding: 18px 20px; }
}

.dgl-tile-info-left[b-po7zhwpm7m] {
    flex: 1;
    min-width: 0;
}

.dgl-iata-row[b-po7zhwpm7m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

    .dgl-iata-row svg[b-po7zhwpm7m] {
        width: 14px;
        height: 14px;
        color: #ffe0c7;
        flex-shrink: 0;
    }

.dgl-route[b-po7zhwpm7m] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.3;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dgl-city[b-po7zhwpm7m] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .dgl-city[b-po7zhwpm7m] { font-size: 20px; }
}

.dgl-tile-info-right[b-po7zhwpm7m] {
    flex-shrink: 0;
    text-align: right;
}

.dgl-price-from[b-po7zhwpm7m] {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}

.dgl-price-val[b-po7zhwpm7m] {
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    white-space: nowrap;
    margin-top: 2px;
}

@media (min-width: 768px) {
    .dgl-price-val[b-po7zhwpm7m] { font-size: 17px; }
}
/* /src/Shared/Marketing/FeaturedNewsSection.razor.rz.scp.css */
/* FeaturedNewsSection — Manager Dashboard v4 theme */
.fns-root[b-2mgo18j7is] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    padding: 64px 0;
    color: var(--d-ink);
}

.fns-container[b-2mgo18j7is] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ─── Header ─── */
.fns-hero[b-2mgo18j7is] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--d-line);
}

.fns-hero-left[b-2mgo18j7is] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.fns-hero-ico[b-2mgo18j7is] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 12px -2px rgba(16, 24, 40, .08);
}

    .fns-hero-ico svg[b-2mgo18j7is] {
        width: 20px;
        height: 20px;
    }

.fns-hero-eyebrow[b-2mgo18j7is] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
}

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

.fns-btn[b-2mgo18j7is] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--d-r);
    font-size: 14px;
    font-weight: 500;
    background: var(--d-accent-grad);
    color: #fff;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .12s;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
}

    .fns-btn:hover[b-2mgo18j7is] {
        background: var(--d-accent-grad-hover);
        color: #fff;
        text-decoration: none;
    }

    .fns-btn svg[b-2mgo18j7is] {
        width: 14px;
        height: 14px;
    }

.fns-btn-mobile[b-2mgo18j7is] {
    display: none;
}

@media (max-width: 640px) {
    .fns-btn-desktop[b-2mgo18j7is] { display: none; }
    .fns-btn-mobile[b-2mgo18j7is] {
        display: inline-flex;
        margin: 28px auto 0;
    }
    .fns-mobile-cta[b-2mgo18j7is] {
        text-align: center;
    }
}

/* ─── Tabs ─── */
.fns-tabs[b-2mgo18j7is] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

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

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

    .fns-tab.is-active[b-2mgo18j7is] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.fns-tab-count[b-2mgo18j7is] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    opacity: 0.75;
}

/* ─── Grid ─── */
.fns-grid[b-2mgo18j7is] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
}

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

@media (min-width: 1024px) {
    .fns-grid[b-2mgo18j7is] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ─── Card ─── */
.fns-card[b-2mgo18j7is] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    text-decoration: none;
    color: var(--d-ink);
    display: block;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

    .fns-card:hover[b-2mgo18j7is] {
        border-color: #dde1e8;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.10);
        text-decoration: none;
        color: var(--d-ink);
    }

.fns-card-img[b-2mgo18j7is] {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--d-surface-2);
}

    .fns-card-img img[b-2mgo18j7is] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

.fns-card:hover .fns-card-img img[b-2mgo18j7is] {
    transform: scale(1.05);
}

.fns-card-featured[b-2mgo18j7is] {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}

.fns-card-body[b-2mgo18j7is] {
    padding: 14px 16px;
}

.fns-card-meta[b-2mgo18j7is] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.fns-card-cat[b-2mgo18j7is] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--d-accent);
    background: var(--d-accent-soft);
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.fns-card-date[b-2mgo18j7is] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--d-ink-4);
}

.fns-card-title[b-2mgo18j7is] {
    font-size: 15px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.35;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .12s;
}

.fns-card:hover .fns-card-title[b-2mgo18j7is] {
    color: var(--d-accent);
}

.fns-card-summary[b-2mgo18j7is] {
    font-size: 12.5px;
    color: var(--d-ink-3);
    line-height: 1.5;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fns-card-more[b-2mgo18j7is] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--d-accent);
    transition: gap .12s;
}

.fns-card:hover .fns-card-more[b-2mgo18j7is] {
    gap: 8px;
}

.fns-card-more svg[b-2mgo18j7is] {
    width: 12px;
    height: 12px;
}

/* ─── Skeleton ─── */
.fns-skel[b-2mgo18j7is] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
    animation: fns-pulse-b-2mgo18j7is 1.6s ease-in-out infinite;
}

.fns-skel-img[b-2mgo18j7is] {
    height: 200px;
    background: var(--d-surface-2);
}

.fns-skel-body[b-2mgo18j7is] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fns-skel-line[b-2mgo18j7is] {
    height: 12px;
    background: var(--d-surface-2);
    border-radius: 4px;
}

    .fns-skel-line.w-1-3[b-2mgo18j7is] { width: 33%; }
    .fns-skel-line.w-3-4[b-2mgo18j7is] { width: 75%; }
    .fns-skel-line.w-full[b-2mgo18j7is] { width: 100%; }

@keyframes fns-pulse-b-2mgo18j7is {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ─── Empty ─── */
.fns-empty[b-2mgo18j7is] {
    text-align: center;
    padding: 56px 24px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    color: var(--d-ink-3);
}

    .fns-empty svg[b-2mgo18j7is] {
        width: 40px;
        height: 40px;
        margin: 0 auto 12px;
        color: var(--d-ink-4);
    }

    .fns-empty p[b-2mgo18j7is] {
        font-size: 14px;
        font-weight: 500;
        color: var(--d-ink-2);
        margin: 0 0 12px;
    }

.fns-empty-link[b-2mgo18j7is] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-accent);
    text-decoration: none;
}

    .fns-empty-link:hover[b-2mgo18j7is] {
        text-decoration: underline;
        color: var(--d-accent);
    }
/* /src/Shared/Marketing/FloatingContact.razor.rz.scp.css */
/* Nút liên hệ nhanh nổi (public/khách lẻ) — pill mở rộng nhãn khi hover.
   Hiệu ứng: vào trang trượt lên lần lượt; nút gọi rung chuông + vòng sóng cam,
   nút Zalo vòng sóng xanh LỆCH PHA (2 nút không nháy cùng lúc); hover icon
   phóng nhẹ; bấm nhún xuống. Mọi loop nằm trong prefers-reduced-motion. */

.nm-qc[b-xvfi3a5ucc] {
    position: fixed;
    right: 18px;
    bottom: 22px;
    /* dưới modal/drawer hệ Nm (z-index cao hơn nhiều), trên nội dung trang */
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Trang kết quả vé khách lẻ (/flight/results, .defr-root) ghim sẵn 2 nút chức năng
   ở ĐÚNG góc này với z thấp hơn: FAB lọc chuyến (.fsr-filter-fab, mobile, z-45)
   và nút lên đầu trang (.fsr-totop, z-44) → cụm gọi+Zalo (z-80) đè mất chức năng
   lọc. User chốt 06/08: ẨN HẲN cụm liên hệ ở màn này (lọc chuyến quan trọng hơn,
   nâng lên trên thì chồng 3-4 nút nổi rối góc phải); các trang public khác giữ.
   `:has()` cần Chromium 105+/Safari 15.4+ — ngưỡng app đã yêu cầu sẵn. */
body:has(.defr-root) .nm-qc[b-xvfi3a5ucc] {
    display: none;
}

.nm-qc__btn[b-xvfi3a5ucc] {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}

.nm-qc__btn:hover[b-xvfi3a5ucc] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .3);
    color: #fff;
}

/* Nhún xuống khi bấm — phản hồi xúc giác */
.nm-qc__btn:active[b-xvfi3a5ucc] { transform: translateY(0) scale(.95); }

/* Gradient cam đúng brand (đồng bộ badge máy bay giấy trang chủ) */
.nm-qc__btn--call[b-xvfi3a5ucc] { background: linear-gradient(135deg, #f97316, #ea580c); }
/* Xanh nhận diện Zalo */
.nm-qc__btn--zalo[b-xvfi3a5ucc] { background: #0068ff; }

.nm-qc__icon[b-xvfi3a5ucc] {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease;
}

.nm-qc__btn:hover .nm-qc__icon[b-xvfi3a5ucc] { transform: scale(1.1); }

.nm-qc__icon svg[b-xvfi3a5ucc] {
    width: 22px;
    height: 22px;
}

/* Logo Zalo bản mono trắng có sẵn trong repo (img/partner/zalo.png) */
.nm-qc__zalo-logo[b-xvfi3a5ucc] {
    width: 28px;
    height: auto;
    display: block;
}

/* Nhãn trượt mở về bên phải icon khi hover/focus (chỉ máy có hover thật) */
.nm-qc__label[b-xvfi3a5ucc] {
    max-width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    transition: max-width .28s ease, opacity .2s ease, padding .28s ease;
}

@media (hover: hover) {
    .nm-qc__btn:hover .nm-qc__label[b-xvfi3a5ucc],
    .nm-qc__btn:focus-visible .nm-qc__label[b-xvfi3a5ucc] {
        max-width: 170px;
        padding-right: 18px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Vào trang: trượt lên + nở ra, Zalo trước, nút gọi sau.
       fill BACKWARDS (không phải both): trạng thái cuối = trạng thái tự nhiên,
       fill forwards sẽ đè transform hover + tạo stacking context vĩnh viễn. */
    .nm-qc__btn[b-xvfi3a5ucc] { animation: nm-qc-in-b-xvfi3a5ucc .5s cubic-bezier(.16, 1, .3, 1) backwards; }
    .nm-qc__btn--zalo[b-xvfi3a5ucc] { animation-delay: .35s; }
    .nm-qc__btn--call[b-xvfi3a5ucc] { animation-delay: .5s; }

    /* Vòng sóng lan toả: cam ở nút gọi, xanh ở Zalo — cùng chu kỳ 3.2s
       nhưng Zalo trễ nửa chu kỳ để 2 nút thay phiên nhau "thở" */
    .nm-qc__btn--call[b-xvfi3a5ucc]::after,
    .nm-qc__btn--zalo[b-xvfi3a5ucc]::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        animation: nm-qc-ring-b-xvfi3a5ucc 3.2s ease-out 1s infinite;
    }

    .nm-qc__btn--zalo[b-xvfi3a5ucc]::after {
        animation-name: nm-qc-ring-blue-b-xvfi3a5ucc;
        animation-delay: 2.6s;
    }

    /* Chuông rung "reng reng" đầu mỗi chu kỳ sóng — cùng nhịp với vòng cam */
    .nm-qc__btn--call .nm-qc__icon svg[b-xvfi3a5ucc] {
        transform-origin: 50% 50%;
        animation: nm-qc-wiggle-b-xvfi3a5ucc 3.2s ease-in-out 1s infinite;
    }
}

@keyframes nm-qc-in-b-xvfi3a5ucc {
    from { opacity: 0; transform: translateY(16px) scale(.7); }
    to { opacity: 1; transform: none; }
}

@keyframes nm-qc-ring-b-xvfi3a5ucc {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); }
    55% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
}

@keyframes nm-qc-ring-blue-b-xvfi3a5ucc {
    0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, .4); }
    55% { box-shadow: 0 0 0 14px rgba(0, 104, 255, 0); }
    100% { box-shadow: 0 0 0 14px rgba(0, 104, 255, 0); }
}

@keyframes nm-qc-wiggle-b-xvfi3a5ucc {
    0%, 20%, 100% { transform: rotate(0); }
    3% { transform: rotate(-16deg); }
    7% { transform: rotate(13deg); }
    11% { transform: rotate(-9deg); }
    15% { transform: rotate(5deg); }
}
/* /src/Shared/Marketing/HeaderComponent.razor.rz.scp.css */
/* ===== Header hệ "Bầu trời Ngọc Mai" (đồng bộ 5 trang public: navy + sky + cam mai) =====
   Thanh washi ecru cũ bị chê lệch tông trên hero xanh trời — đổi sang frosted trắng
   viền sky + mực navy. Trạng thái transparent trên hero trang chủ giữ nguyên. */

.hd-bar[b-6q488llxmd] {
    background: rgba(255, 255, 255, .92);
    border: 1px solid #d8e6f2;
    box-shadow: 0 10px 30px -14px rgba(15, 36, 56, .25);
}

/* Thang mực navy cho chữ điều hướng */
.hd-ink[b-6q488llxmd] { color: #0f2438 !important; }
.hd-ink-2[b-6q488llxmd] { color: #6b7f95 !important; }

/* Track cụm ngôn ngữ + tiền tệ: sky nhạt */
.hd-pill[b-6q488llxmd] { background: #e8f2fb; }

/* Panel menu mobile: navy hàng không (đồng bộ bảng thông tin sân bay) — chữ trắng đọc tốt */
.hd-mobile-panel[b-6q488llxmd] { background: linear-gradient(170deg, #16324f 0%, #0f2438 100%); }

/* Company Name Animations */
.company[b-6q488llxmd] {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.company h1:nth-child(2)[b-6q488llxmd] {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    letter-spacing: 0.3px;
    animation: type-b-6q488llxmd 3s steps(20, end) forwards, blink-b-6q488llxmd 0.75s step-end infinite;
    border-right: 1px solid orange;
    animation-delay: 0.5s;
}

.company h1:nth-child(1)[b-6q488llxmd] {
    font-family: "Inter", "Work Sans", sans-serif;
    margin: 0;
    color: #ea580c; /* đúng son thương hiệu --d-accent */
    font-weight: 800;
    min-width: 140px;
    background-clip: text;
    overflow: hidden;
    letter-spacing: -0.5px;
}


@keyframes type-b-6q488llxmd {
    0% {
        width: 0;
    }
    1%, 99% {
        border-right: 1px solid orange;
    }
    100% {
        /* 170px: đủ chỗ "Đồng hành cùng bạn" ở cỡ chữ hiệu dụng 14.4px (text-xs × html 120%) — 140px cũ cắt mất chữ "n" */
        width: 170px;
        border-right: none;
    }
}

@keyframes blink-b-6q488llxmd {
    50% {
        border-color: transparent;
    }
}

/* Mobile: tên + tagline chiếm 140/170px cứng làm cụm phải ĐÈ LÊN chữ (overlap ~43px ở 375px)
   và header thành 2 tầng — ẩn tagline, bỏ khoá bề rộng tên (specificity h1[b-]:nth-child
   thắng .w-\[140px\]/.text-xl của Tailwind nên không cần !important). */
@media (max-width: 767px) {
    .company h1:nth-child(2)[b-6q488llxmd] { display: none; }
    .company h1:nth-child(1)[b-6q488llxmd] {
        min-width: 0;
        width: auto;
        font-size: 17px;
    }
}

/* <480px: cụm phải (pill + giỏ + login + menu) ~215px + logo 73px + tên 74px = 362px
   vượt 343px khả dụng → chỉ giữ LOGO (tự nhận diện thương hiệu), như chuẩn mobile phổ biến. */
@media (max-width: 479px) {
    .company[b-6q488llxmd] { display: none; }
}

/* Popover ngôn ngữ + tiền tệ: mobile pill nằm gần GIỮA thanh → neo right-0 theo pill
   làm panel 230px tràn -9px khỏi mép trái + treo lơ lửng giữa hero. Chuyển thành
   sheet full-width dưới header (đáy bar ~58px). Header mobile không transform nên
   position:fixed tính theo viewport chuẩn. */
@media (max-width: 639px) {
    .locale-popover[b-6q488llxmd] {
        position: fixed;
        top: 66px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* Flag Styles */
.flag-vn[b-6q488llxmd] {
    background: linear-gradient(to bottom, #da251d 0%, #da251d 100%);
}

.flag-uk[b-6q488llxmd] {
    background: linear-gradient(to bottom, 
        #012169 0%, #012169 30%, 
        white 30%, white 40%, 
        #C8102E 40%, #C8102E 60%, 
        white 60%, white 70%, 
        #012169 70%, #012169 100%);
}

/* Header Hide/Show Animation */
/* ★ Thang lớp phủ (z-index): nội dung trang < 900 (header) < 1000 (NmModal /
   hộp thoại của trang) < 1100 (dropdown) < 1200 (tooltip) < 1300 (command palette).
   CẤM đẩy header lên 9999/999999 — làm vậy mọi hộp thoại public sẽ bị header đè lên. */
.header-scroll[b-6q488llxmd] {
    transition: transform 0.3s ease-in-out;
    z-index: 900;
}

.header-hidden[b-6q488llxmd] {
    transform: translateY(-100%);
}

/* Menu Icon Animation */
@keyframes fade-in-b-6q488llxmd {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.animate-fade-in[b-6q488llxmd] {
    animation: fade-in-b-6q488llxmd 0.3s ease-out forwards;
}

/* Mobile Menu Animations */
@keyframes slideInRight-b-6q488llxmd {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn-b-6q488llxmd {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.mobile-menu-overlay[b-6q488llxmd] {
    animation: fadeIn-b-6q488llxmd 0.3s ease-out forwards;
}

.mobile-menu-panel[b-6q488llxmd] {
    animation: slideInRight-b-6q488llxmd 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
}

/* Smooth transitions for menu items */
.mobile-menu-panel nav a[b-6q488llxmd] {
    transition: all 0.2s ease;
    opacity: 0;
    animation: fadeInUp-b-6q488llxmd 0.4s ease-out forwards;
}

.mobile-menu-panel nav a:nth-child(1)[b-6q488llxmd] {
    animation-delay: 0.1s;
}

.mobile-menu-panel nav a:nth-child(2)[b-6q488llxmd] {
    animation-delay: 0.15s;
}

.mobile-menu-panel nav a:nth-child(3)[b-6q488llxmd] {
    animation-delay: 0.2s;
}

.mobile-menu-panel nav a:nth-child(4)[b-6q488llxmd] {
    animation-delay: 0.25s;
}

.mobile-menu-panel nav a:nth-child(5)[b-6q488llxmd] {
    animation-delay: 0.3s;
}

.mobile-menu-panel nav a:nth-child(6)[b-6q488llxmd] {
    animation-delay: 0.35s;
}

.mobile-menu-panel nav a:active[b-6q488llxmd] {
    transform: scale(0.98);
}

@keyframes fadeInUp-b-6q488llxmd {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header and content animations */
.mobile-menu-header[b-6q488llxmd] {
    animation: fadeInDown-b-6q488llxmd 0.4s ease-out 0.1s forwards;
    opacity: 0;
}

@keyframes fadeInDown-b-6q488llxmd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-6q488llxmd {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

:deep(.animate-slide-up)[b-6q488llxmd] {
    animation: slideUp-b-6q488llxmd 0.3s ease-out;
}
/* /src/Shared/Marketing/MaiPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   MaiPanel — vỏ "thẻ cành mai" dùng chung (trang chủ + khu tin tức).
   Tách nguyên xi từ .home-sub-* của Index.razor.css (08/08).

   ⚠ VÌ SAO CÒN MÀU LITERAL: đây là một BỨC MINH HOẠ (nền trời, thân cành nâu,
   hoa/cánh mai bốn sắc cam, triện, máy bay giấy) chứ không phải khối UI —
   các sắc này không có trong token vocabulary. Giữ đúng literal của bản trang
   chủ để 3 chỗ dùng trùng khít pixel; đổi màu ở ĐÂY là đổi cả 3 chỗ.
   Riêng chữ/khoảng cách thì bám --nm-font để cùng hệ chữ với phần còn lại.
   ═══════════════════════════════════════════════════════════════════ */
.mp[b-jsbw7oyyxx] {
    /* Cam của bản trang chủ — CỐ Ý không phải --nm-brand-500: đổi sẽ làm lệch
       khối này khỏi 5 trang public khác vốn cùng hệ #ea580c. */
    --mp-accent: #ea580c;
    --mp-accent-deep: #c2410c;
    --mp-ink: #0f2438;
    --mp-ink-3: #6b7f95;

    position: relative;
    padding: 3rem 1rem;
    font-family: var(--nm-font);
}

@media (min-width: 640px) {
    .mp[b-jsbw7oyyxx] { padding: 4rem 1.5rem; }
}

/* Thẻ: góc trên-trái bo lớn kiểu cánh quạt, trời nhạt */
.mp-card[b-jsbw7oyyxx] {
    position: relative;
    max-width: 64rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    border-radius: 5rem 1rem 1rem 1rem;
    background: linear-gradient(165deg, #f3f8fd 0%, #e2edf8 100%);
    box-shadow: 0 24px 48px -24px rgba(15, 36, 56, .3), 0 2px 8px rgba(15, 36, 56, .05);
    overflow: visible;
}

@media (min-width: 640px) {
    .mp-card[b-jsbw7oyyxx] { padding: 4rem 2.5rem; }
}

@media (min-width: 768px) {
    .mp-card[b-jsbw7oyyxx] { border-radius: 10rem 1rem 1rem 1rem; }
}

/* Khung tranh mỏng viền trong + vệt loang (bokashi) cam nhẹ sau gốc cành mai */
.mp-card[b-jsbw7oyyxx]::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(15, 36, 56, .1);
    border-radius: inherit;
    background: radial-gradient(320px 230px at 10% 96%, rgba(251, 146, 60, .12), transparent 70%);
    pointer-events: none;
}

/* Badge máy bay giấy nhô ra mép phải trên */
.mp-plane[b-jsbw7oyyxx] {
    position: absolute;
    top: 0;
    right: -1rem;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316 0%, var(--mp-accent) 100%);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.mp-plane svg[b-jsbw7oyyxx] { width: 28px; height: 28px; }

@media (min-width: 640px) {
    .mp-plane[b-jsbw7oyyxx] { right: -1.25rem; }
}

/* Cành mai góc dưới-trái — decor nền, nằm dưới nội dung */
.mp-card[b-jsbw7oyyxx]  .mp-branch {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 320px;
    height: auto;
    opacity: .9;
    pointer-events: none;
    display: none;
}

/* Cánh mai rơi */
.mp-card[b-jsbw7oyyxx]  .mp-petal {
    position: absolute;
    opacity: .7;
    pointer-events: none;
    display: none;
}

/* Vị trí cánh rơi: né vùng tiêu đề/form, thả vào khoảng trống;
   mỗi cánh một góc xoay riêng (--r0/--r1) cho tự nhiên */
.mp-card[b-jsbw7oyyxx]  .mp-petal--1 { width: 13px; left: 15%; top: 24%; --r0: -10deg; --r1: 26deg; }
.mp-card[b-jsbw7oyyxx]  .mp-petal--2 { width: 10px; right: 12%; top: 56%; --r0: 48deg; --r1: 76deg; }
.mp-card[b-jsbw7oyyxx]  .mp-petal--3 { width: 11px; left: 30%; bottom: 12%; --r0: -42deg; --r1: -12deg; }
.mp-card[b-jsbw7oyyxx]  .mp-petal--4 { width: 9px; left: 27%; top: 42%; --r0: 100deg; --r1: 128deg; }

/* Ấn chìm hoa mai trong khoảng trống góc cong lớn trên-trái */
.mp-card[b-jsbw7oyyxx]  .mp-mark {
    position: absolute;
    left: 7%;
    top: 12%;
    width: 150px;
    height: 150px;
    opacity: .1;
    pointer-events: none;
    display: none;
}

/* Decor chỉ bật ở màn đủ rộng — màn hẹp cành mai đè lên chữ */
@media (min-width: 768px) {
    .mp-card[b-jsbw7oyyxx]  .mp-branch,
    .mp-card[b-jsbw7oyyxx]  .mp-petal,
    .mp-card[b-jsbw7oyyxx]  .mp-mark { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
    .mp-card[b-jsbw7oyyxx]  .mp-petal { animation: mp-petal-sway-b-jsbw7oyyxx 8s ease-in-out infinite alternate; }
    .mp-card[b-jsbw7oyyxx]  .mp-petal--2 { animation-duration: 11s; animation-delay: -3s; }
    .mp-card[b-jsbw7oyyxx]  .mp-petal--3 { animation-duration: 9.5s; animation-delay: -6s; }
    .mp-card[b-jsbw7oyyxx]  .mp-petal--4 { animation-duration: 12.5s; animation-delay: -8s; }
}

@keyframes mp-petal-sway-b-jsbw7oyyxx {
    from { transform: translateY(-8px) rotate(var(--r0, -12deg)); }
    to { transform: translateY(12px) rotate(var(--r1, 24deg)); }
}

/* ───── Nội dung ───── */
.mp-body[b-jsbw7oyyxx] {
    position: relative;
    z-index: 20;
    text-align: center;
}

.mp-heading[b-jsbw7oyyxx] {
    max-width: 48rem;
    margin: 0 auto;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.375;
    letter-spacing: -.02em;
    color: var(--mp-ink);
    text-wrap: balance;
}

@media (min-width: 640px) { .mp-heading[b-jsbw7oyyxx] { font-size: 28px; } }
@media (min-width: 1024px) { .mp-heading[b-jsbw7oyyxx] { font-size: 33px; } }

/* Dấu triện đóng sau chữ ký cuối tiêu đề */
.mp-seal[b-jsbw7oyyxx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 12px;
    padding: 4px;
    background: var(--mp-accent);
    border-radius: 7px;
    transform: rotate(5deg) translateY(4px);
    box-shadow: 0 2px 6px rgba(234, 88, 12, .3);
}

.mp-seal svg[b-jsbw7oyyxx] { width: 100%; height: 100%; }
.mp-seal-eye[b-jsbw7oyyxx] { fill: var(--mp-accent); }

.mp-sub[b-jsbw7oyyxx] {
    max-width: 40rem;
    margin: .85rem auto 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--mp-ink-3);
}

/* Khối hành động — form hoặc cặp nút, luôn căn giữa */
.mp-actions[b-jsbw7oyyxx] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: 2rem;
}

.mp-note[b-jsbw7oyyxx] {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--mp-ink-3);
}

/* ───── Nút CTA cho nơi dùng truyền nút thay vì form ─────
   ::deep bắt buộc: nút do TRANG cha render nên không mang scope-id của file này. */
.mp-actions[b-jsbw7oyyxx]  .mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--mp-accent);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}

.mp-actions[b-jsbw7oyyxx]  .mp-btn:hover {
    background: var(--mp-accent-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.mp-actions[b-jsbw7oyyxx]  .mp-btn--ghost {
    background: #fff;
    color: var(--mp-ink);
    border-color: rgba(15, 36, 56, .12);
    box-shadow: 0 1px 2px 0 rgba(15, 36, 56, .06);
}

.mp-actions[b-jsbw7oyyxx]  .mp-btn--ghost:hover {
    background: #fff;
    color: var(--mp-accent-deep);
    border-color: var(--mp-accent);
}
/* /src/Shared/Marketing/NewsCard.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   NewsCard — thẻ bài viết dùng chung khu Tin tức
   Hệ "NM EDITORIAL" (v4, 07/08): token-only theo SSOT `--nm-*`.
   Bản v3 tự khai lại cả bảng màu (--ink/--accent/--mono) "vì CSS isolation
   không kế thừa từ trang cha" — SAI: token khai ở :root (tokens.css) nên
   biến CSS vẫn tới được component scoped. Đã bỏ hẳn bảng màu riêng.
   ⚠ Không dùng --nm-accent/--nm-bg/--nm-shadow-sm: wwwroot/app.css khai lại
   các tên này ở :root và nạp SAU tokens → giá trị khác SSOT.
   ═══════════════════════════════════════════════════════════════════ */
/* Lớp phủ đọc chữ ở dáng lead cần rgba() mà token là hex → các gradient bên dưới
   viết thẳng rgb(18, 24, 38) = --nm-ink (#121826). Đổi token ink thì sửa cả đây. */
.nc[b-zp402cwbw9] {
    display: flex;
    flex-direction: column;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    font-family: var(--nm-font);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}

.nc:hover[b-zp402cwbw9] {
    transform: translateY(-3px);
    border-color: var(--nm-brand-300);
    box-shadow: var(--nm-shadow-pop);
}

.nc:focus-visible[b-zp402cwbw9] {
    outline: 2px solid var(--nm-brand-500);
    outline-offset: 3px;
}

/* ───── Ảnh ───── */
.nc-img[b-zp402cwbw9] {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--nm-surface-2);
    overflow: hidden;
    flex: none;
}

.nc-img img[b-zp402cwbw9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.nc:hover .nc-img img[b-zp402cwbw9] { transform: scale(1.05); }

/* Không có ảnh bìa → bông mai cam nhạt trên nền cam soft, không để mảng xám trống */
.nc-fb[b-zp402cwbw9] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-brand-50);
    color: var(--nm-brand-300);
}
.nc-fb svg[b-zp402cwbw9] { width: 34%; max-width: 74px; opacity: .55; }

/* Nhãn "Nổi bật" = pill cam thương hiệu */
.nc-badge[b-zp402cwbw9] {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: .22rem .6rem;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: var(--nm-shadow);
}

/* ───── Nội dung ───── */
.nc-body[b-zp402cwbw9] {
    padding: .95rem 1.05rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nc-meta[b-zp402cwbw9] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nm-muted);
    min-width: 0;
}

/* Cắt bằng flex-shrink chứ KHÔNG bằng max-width cố định: trong cột phải hẹp,
   trần 60% từng cắt "VÉ MÁY BAY" thành "VÉ MÁY…" dù còn thừa chỗ. */
.nc-cat[b-zp402cwbw9] {
    color: var(--nm-brand-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.nc-meta > :last-child[b-zp402cwbw9] { flex: none; }

.nc-dot[b-zp402cwbw9] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex: none;
}

.nc-title[b-zp402cwbw9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -.013em;
    color: var(--nm-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}

.nc:hover .nc-title[b-zp402cwbw9] { color: var(--nm-brand-700); }

.nc-sum[b-zp402cwbw9] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--nm-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═════════ Dáng LEAD — ảnh tràn khung, chữ đè nền tối ═════════ */
.nc--lead[b-zp402cwbw9] {
    position: relative;
    justify-content: flex-end;
    min-height: 340px;
}

.nc--lead .nc-img[b-zp402cwbw9] {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

/* Dìm chung cả ảnh một chút cho khối thẻ trầm lại — KHÔNG gánh việc đọc chữ. */
.nc--lead[b-zp402cwbw9]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 24, 38, 0) 45%, rgba(18, 24, 38, .3) 100%);
    pointer-events: none;
}

/* flex:none — .nc-body mặc định là flex:1 nên ở dáng lead nó CĂNG HẾT chiều cao
   thẻ, đẩy chữ lên sát mép trên và đè vào nhãn "Nổi bật". Phải ôm sát nội dung
   thì justify-content:flex-end mới dìm được khối chữ xuống đáy như thiết kế. */
.nc--lead .nc-body[b-zp402cwbw9] {
    position: relative;
    z-index: 1;
    flex: none;
    padding: 1.5rem 1.5rem 1.6rem;
    gap: .6rem;
    /* Chốt chặn cho ảnh bìa sáng bất thường mà lớp phủ chưa đủ dìm */
    text-shadow: 0 1px 10px rgba(18, 24, 38, .45);
}

/* Lớp phủ đọc chữ neo vào KHỐI CHỮ, không vào thẻ: tiêu đề dài ngắn khác nhau
   nên khối chữ khi thì bắt đầu ở 30% khi thì 45% chiều cao thẻ — gradient cắm
   mốc cứng theo thẻ thì kiểu gì cũng có bài bị nhãn nằm trên vùng ảnh sáng
   (đã đo: nền sau dòng nhãn L=156, chữ nhoè hẳn trên ảnh bản đồ).
   z-index -1: nằm sau chữ nhưng vẫn trong ngăn xếp của .nc-body nên phủ lên ảnh. */
.nc--lead .nc-body[b-zp402cwbw9]::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -3.25rem;
    z-index: -1;
    /* Mốc dốc tính bằng ĐỘ DÀI TUYỆT ĐỐI, không phải phần trăm: khối chữ cao
       250–300px nên mốc 42% rơi tuốt xuống giữa tiêu đề, dòng nhãn phía trên
       vẫn nằm trên ảnh trần (đo được 1,68:1 — chuẩn tối thiểu là 3:1).
       Đặt dốc kết thúc đúng ở mép trên khối chữ thì MỌI dòng đều đủ nền. */
    background: linear-gradient(180deg,
        rgba(18, 24, 38, 0) 0,
        rgba(18, 24, 38, .72) 3.25rem,
        rgba(18, 24, 38, .88) 100%);
    pointer-events: none;
}

.nc--lead .nc-meta[b-zp402cwbw9] { color: rgba(255, 255, 255, .74); }
.nc--lead .nc-cat[b-zp402cwbw9] { color: var(--nm-brand-300); }

.nc--lead .nc-title[b-zp402cwbw9] {
    color: #fff;
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.022em;
    -webkit-line-clamp: 3;
}

.nc--lead:hover .nc-title[b-zp402cwbw9] { color: #fff; }

.nc--lead .nc-sum[b-zp402cwbw9] {
    color: rgba(255, 255, 255, .78);
    font-size: 14px;
    -webkit-line-clamp: 2;
}

.nc--lead .nc-badge[b-zp402cwbw9] {
    top: 14px;
    left: 14px;
}

.nc-cta[b-zp402cwbw9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: .2rem;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}
.nc-cta svg[b-zp402cwbw9] { width: 14px; height: 14px; transition: transform .2s ease; }
.nc--lead:hover .nc-cta svg[b-zp402cwbw9] { transform: translateX(3px); }

@media (min-width: 1024px) {
    .nc--lead[b-zp402cwbw9] { min-height: 420px; }
    .nc--lead .nc-body[b-zp402cwbw9] { padding: 1.9rem 2rem 2rem; }
}

/* ═════════ Dáng SIDE — hàng ngang gọn cho cột phải ═════════ */
.nc--side[b-zp402cwbw9] {
    flex-direction: row;
    gap: .7rem;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.nc--side:hover[b-zp402cwbw9] {
    transform: none;
    box-shadow: none;
}

.nc--side .nc-img[b-zp402cwbw9] {
    width: 88px;
    height: 64px;
    aspect-ratio: auto;
    border-radius: var(--nm-r-input);
    flex: none;
}

.nc--side .nc-body[b-zp402cwbw9] {
    padding: 0;
    gap: .25rem;
    justify-content: center;
}

.nc--side .nc-title[b-zp402cwbw9] {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.nc--side .nc-meta[b-zp402cwbw9] { font-size: 10px; }

/* ═════════ Dáng RAIL — ô trong dải trượt ngang ═════════ */
.nc--rail[b-zp402cwbw9] {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.nc--rail:hover[b-zp402cwbw9] {
    transform: translateY(-2px);
    box-shadow: none;
}

.nc--rail .nc-img[b-zp402cwbw9] {
    border-radius: var(--nm-r-input);
    border: 1px solid var(--nm-border);
}

.nc--rail:hover .nc-img[b-zp402cwbw9] { border-color: var(--nm-brand-300); }

.nc--rail .nc-body[b-zp402cwbw9] {
    padding: .7rem 0 0;
    gap: .3rem;
}

.nc--rail .nc-title[b-zp402cwbw9] {
    font-size: 14px;
    line-height: 1.4;
}

/* Màn hẹp: tiêu đề tràn 3 dòng nên khối chữ cao gần 270px — nếu thẻ chỉ 300px
   thì chữ dâng lên đè đúng vào nhãn "Nổi bật" ở góc trên. Phải chừa đủ ảnh. */
@media (max-width: 640px) {
    .nc--lead[b-zp402cwbw9] { min-height: 380px; }
    .nc--lead .nc-body[b-zp402cwbw9] { padding: 1.2rem 1.15rem 1.3rem; }
    .nc-body[b-zp402cwbw9] { padding: .85rem .9rem 1rem; }
}
/* /src/Shared/Marketing/NewsletterPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   NewsletterPanel — form đăng ký nhận tin bên trong MaiPanel.
   Tách nguyên xi từ .home-sub-mail/.home-sub-btn của Index.razor.css (08/08).
   Cam literal #ea580c: xem chú thích "VÌ SAO CÒN MÀU LITERAL" ở MaiPanel.razor.css.
   ═══════════════════════════════════════════════════════════════════ */
.nlp-form[b-ek991iis70] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    font-family: var(--nm-font);
}

@media (min-width: 640px) {
    .nlp-form[b-ek991iis70] { flex-direction: row; }
}

/* Ô email: label bọc icon + input nên bấm đâu trong pill cũng focus, ring focus
   vẽ quanh NGUYÊN pill (input bên trong đã outline:none nên không có ring lẻ). */
.nlp-mail[b-ek991iis70] {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 16px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(15, 36, 56, .06);
    cursor: text;
    transition: box-shadow .15s ease;
}

.nlp-mail:focus-within[b-ek991iis70] {
    box-shadow: 0 1px 2px 0 rgba(15, 36, 56, .06),
                inset 0 0 0 1px #ea580c,
                0 0 0 3px rgba(234, 88, 12, .12);
}

.nlp-mail svg[b-ek991iis70] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex: none;
    color: #9ca3af;
}

.nlp-mail input[b-ek991iis70] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
}

.nlp-mail input[b-ek991iis70]::placeholder { color: #9ca3af; }
.nlp-mail input:disabled[b-ek991iis70] { opacity: .6; }

.nlp-btn[b-ek991iis70] {
    flex: none;
    padding: 16px 40px;
    border: none;
    border-radius: 12px;
    background: #ea580c;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.nlp-btn:hover:not(:disabled)[b-ek991iis70] {
    background: #c2410c;
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.nlp-btn:disabled[b-ek991iis70] { opacity: .6; cursor: not-allowed; }

.nlp-msg[b-ek991iis70] {
    margin: 1rem 0 0;
    font-size: 14px;
    font-weight: 500;
}

.nlp-msg--ok[b-ek991iis70] { color: #059669; }
.nlp-msg--err[b-ek991iis70] { color: #dc2626; }
/* /src/Shared/Marketing/NewsSubNav.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   NewsSubNav — dải điều hướng khu Tin tức
   Hệ "NM EDITORIAL" (v4, 07/08): token-only theo SSOT `--nm-*`, breadcrumb
   và ô tìm là primitive NM. Bản v3 tự khai lại bảng màu + IBM Plex Mono —
   đã bỏ (token :root vẫn tới được component scoped).
   ⚠ HeaderComponent là fixed (desktop) / absolute (mobile) và KHÔNG chiếm
   chỗ trong dòng chảy → padding-top ở đây chính là khoảng chừa cho header
   (104px / 88px mobile).
   ⚠ NmBreadcrumb/NmInput/NmIconButton render markup của RIÊNG chúng nên
   không mang scope-id của file này → mọi rule chạm vào chúng phải qua ::deep.
   ═══════════════════════════════════════════════════════════════════ */
.nsn[b-59z1eqez6t] {
    position: relative;
    padding: 104px 0 0;
    background: var(--nm-surface);
    border-bottom: 1px solid var(--nm-border);
    font-family: var(--nm-font);
}

.nsn-wrap[b-59z1eqez6t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ───── Breadcrumb (NmBreadcrumb) ───── */
.nsn[b-59z1eqez6t]  .nsn-crumb {
    min-width: 0;
    padding: .15rem 0 .8rem;
}

/* ───── Thanh chính ───── */
.nsn-bar[b-59z1eqez6t] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: .9rem;
    min-width: 0;
}

.nsn-brand[b-59z1eqez6t] {
    flex: none;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.018em;
    color: var(--nm-ink);
    transition: color .15s ease;
}

.nsn-brand:hover[b-59z1eqez6t] { color: var(--nm-brand-700); }

/* ───── Dải chuyên mục ───── */
.nsn-rail[b-59z1eqez6t] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
    /* Mép phải mờ dần: báo hiệu còn chuyên mục phía sau khi tràn */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}

.nsn-rail[b-59z1eqez6t]::-webkit-scrollbar { display: none; }

/* Chip chuyên mục — sao chép diện mạo .nm-chip (NmChip là <button>, đây là <a>) */
.nsn-chip[b-59z1eqez6t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink-2);
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.nsn-chip:hover[b-59z1eqez6t] { border-color: var(--nm-border-strong); color: var(--nm-ink); }

.nsn-chip--on[b-59z1eqez6t] {
    background: var(--nm-brand-50);
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
}

.nsn-chip--on:hover[b-59z1eqez6t] { border-color: var(--nm-brand-500); color: var(--nm-brand-700); }

.nsn-ct[b-59z1eqez6t] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.nsn-chip--on .nsn-ct[b-59z1eqez6t] { color: var(--nm-brand-600); }

/* ───── Ô tìm kiếm (NmInput + NmIconButton) ───── */
.nsn-search[b-59z1eqez6t] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    width: 250px;
}

.nsn-search-field[b-59z1eqez6t] { flex: 1 1 auto; min-width: 0; }

/* Ô search của trình duyệt có nút × riêng, trùng với icon kính lúp của NmInput */
.nsn-search[b-59z1eqez6t]  input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ───── Thu hẹp ───── */
@media (max-width: 1024px) {
    .nsn-search[b-59z1eqez6t] { width: 210px; }
}

@media (max-width: 860px) {
    .nsn-bar[b-59z1eqez6t] { flex-wrap: wrap; gap: .8rem 1rem; }
    .nsn-rail[b-59z1eqez6t] { order: 3; flex-basis: 100%; }
    .nsn-search[b-59z1eqez6t] { flex: 1 1 auto; width: auto; min-width: 170px; }
}

@media (max-width: 640px) {
    .nsn[b-59z1eqez6t] { padding-top: 88px; }
    .nsn-wrap[b-59z1eqez6t] { padding: 0 1.15rem; }
    .nsn-brand[b-59z1eqez6t] { font-size: 15px; }
}
/* /src/Shared/Marketing/PageBackgroundBanner.razor.rz.scp.css */
/* PageBackgroundBanner — Manager Dashboard v4 theme */
.pbb-root[b-67vsla0vef] {
    --d-bg: #f7f8fa;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad-soft: linear-gradient(135deg, #fff2e8 0%, #ffe0c7 100%);

    position: relative;
    width: 100%;
}

.pbb-bg[b-67vsla0vef] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pbb-fallback[b-67vsla0vef] {
    background: linear-gradient(135deg, #fafaf7 0%, #fff2e8 60%, #ffe0c7 100%);
}

.pbb-overlay[b-67vsla0vef] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 40, 0.10) 0%, rgba(16, 24, 40, 0.35) 100%);
}

.pbb-content[b-67vsla0vef] {
    position: relative;
    z-index: 10;
}
/* /src/Shared/Marketing/PromotionsSlider.razor.rz.scp.css */
/* PromotionsSlider — Manager Dashboard v4 theme */
.psl-root[b-q6u7btvneq] {
    --d-bg: #f7f8fa;
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    overflow: hidden;
    position: relative;
    padding: 8px;
    color: var(--d-ink);
}

@media (min-width: 768px) {
    .psl-root[b-q6u7btvneq] { padding: 32px 16px 16px; }
}

.psl-container[b-q6u7btvneq] {
    width: 100%;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Track */
.psl-track[b-q6u7btvneq] {
    display: flex;
    align-items: stretch;
    min-height: 200px;
}

/* Item */
.psl-item[b-q6u7btvneq] {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: visible;
    cursor: pointer;
}

.psl-item-inner[b-q6u7btvneq] {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    flex: 1;
    transform-origin: center center;
    will-change: transform, box-shadow;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-radius: 16px;
    overflow: hidden;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
}

.psl-item img[b-q6u7btvneq] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    min-height: 100%;
}

/* Right fade overlay */
.psl-fade-right[b-q6u7btvneq] {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to left, var(--d-surface), rgba(255, 255, 255, 0));
}

/* Navigation buttons */
.psl-nav-btn[b-q6u7btvneq] {
    background: var(--d-surface);
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10);
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
}

    .psl-nav-btn:hover[b-q6u7btvneq] {
        transform: translateY(-50%) scale(1.06);
        box-shadow: 0 8px 20px rgba(16, 24, 40, 0.14);
        background: var(--d-surface-2);
        border-color: var(--d-ink-4);
        color: var(--d-ink);
    }

    .psl-nav-btn:active[b-q6u7btvneq] {
        transform: translateY(-50%) scale(0.96);
        transition-duration: 0.1s;
    }

    .psl-nav-btn svg[b-q6u7btvneq] {
        width: 16px;
        height: 16px;
    }

.psl-nav-btn.psl-prev[b-q6u7btvneq] { left: 12px; }
.psl-nav-btn.psl-next[b-q6u7btvneq] { right: 12px; }

/* Dots */
.psl-dots[b-q6u7btvneq] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    margin-top: 24px;
}

.psl-dot[b-q6u7btvneq] {
    background: var(--d-line);
    display: inline-block;
    height: 4px;
    width: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                background-color 0.4s ease,
                opacity 0.4s ease,
                transform 0.3s ease;
    flex-shrink: 0;
    opacity: 0.7;
}

    .psl-dot:hover[b-q6u7btvneq] {
        background: var(--d-ink-4);
        opacity: 1;
        transform: scaleY(1.3);
    }

    .psl-dot.is-active[b-q6u7btvneq] {
        background: var(--d-accent-grad);
        width: 24px;
        height: 4px;
        opacity: 1;
    }

/* Entrance animations */
.psl-flip-in[b-q6u7btvneq] {
    opacity: 0;
    transform: perspective(800px) rotateX(-30deg) translateY(8px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.psl-flip-in-delayed[b-q6u7btvneq] {
    opacity: 0;
    transform: perspective(800px) rotateX(-30deg) translateY(8px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s,
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
}

.psl-nav.visible .psl-flip-in[b-q6u7btvneq],
.psl-nav.visible .psl-flip-in-delayed[b-q6u7btvneq] {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg) translateY(0);
}

.psl-spacer-loop[b-q6u7btvneq] {
    height: 12px;
}

.psl-spacer-static[b-q6u7btvneq] {
    height: 8px;
}

/* Desktop */
@media (min-width: 769px) {
    .psl-track[b-q6u7btvneq] { min-height: 240px; height: 240px; }
    .psl-item[b-q6u7btvneq] { height: 240px; }
    .psl-item-inner[b-q6u7btvneq] { height: 100%; min-height: 240px; }
    .psl-item img[b-q6u7btvneq] { height: 100%; min-height: 240px; max-height: none; }
}

/* Mobile */
@media (max-width: 768px) {
    .psl-track[b-q6u7btvneq] { min-height: 200px; padding: 0; }
    .psl-item[b-q6u7btvneq] { padding: 2px; }
    .psl-item-inner[b-q6u7btvneq] {
        border-radius: 14px;
        box-shadow: 0 4px 8px rgba(16, 24, 40, 0.10);
        min-height: 200px;
        height: 200px;
    }
    .psl-item img[b-q6u7btvneq] { min-height: 200px; height: 200px; object-fit: cover; }
    .psl-nav-btn[b-q6u7btvneq] { display: none; }
    .psl-dots[b-q6u7btvneq] { margin-top: 20px; padding: 0 8px; }
    .psl-dot[b-q6u7btvneq] { width: 12px; height: 3px; }
    .psl-dot.is-active[b-q6u7btvneq] { width: 24px; height: 3px; }
}
/* /src/Shared/Modals/EmployeeImportModal.razor.rz.scp.css */
/* EmployeeImportModal — Manager Dashboard v4 theme */
.eim-overlay[b-j76xfl4b6i] {
    --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-j76xfl4b6i] {
    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-j76xfl4b6i] {
    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-j76xfl4b6i] {
    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-j76xfl4b6i] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

    .eim-subtitle code[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
    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-j76xfl4b6i] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.eim-body[b-j76xfl4b6i] {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.eim-error[b-j76xfl4b6i] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.eim-tpl-card[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
    font-size: 12px;
    color: var(--d-ink-2);
    line-height: 1.5;
    min-width: 0;
}

    .eim-tpl-text b[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
    display: block;
    margin-top: 3px;
    line-height: 1.5;
}

    .eim-tier strong[b-j76xfl4b6i] {
        margin-right: 4px;
    }

.eim-tier-note[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
    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-j76xfl4b6i] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

.eim-field-label[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
    display: block;
    width: 100%;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .eim-file[b-j76xfl4b6i]::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-j76xfl4b6i]::file-selector-button:hover {
            background: var(--d-accent-grad-hover);
        }

.eim-file-info[b-j76xfl4b6i] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .eim-file-info b[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
}

.eim-mode[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

    .eim-mode.is-on[b-j76xfl4b6i] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

    .eim-mode:disabled[b-j76xfl4b6i] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.eim-mode-name[b-j76xfl4b6i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
}

.eim-mode-desc[b-j76xfl4b6i] {
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.45;
}

/* ── Vai trò mặc định ── */
.eim-role-grid[b-j76xfl4b6i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.eim-role[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
        border-color: #ffd0ac;
        background: var(--d-accent-soft);
    }

    .eim-role.is-on[b-j76xfl4b6i] {
        border-color: var(--d-accent);
        background: var(--d-accent-soft);
    }

.eim-role-name[b-j76xfl4b6i] {
    font-size: 13px;
    font-weight: 600;
    color: var(--d-ink);
}

.eim-role-desc[b-j76xfl4b6i] {
    font-size: 11px;
    color: var(--d-ink-3);
    line-height: 1.4;
}

.eim-hint[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
        margin: 0 0 8px;
    }

    .eim-hint.is-warn[b-j76xfl4b6i] {
        color: #b45309;
        font-weight: 500;
    }

/* ── Tổng kết kiểm tra tại chỗ ── */
.eim-check[b-j76xfl4b6i] {
    padding: 9px 12px;
    border-radius: var(--d-r);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

    .eim-check.is-ok[b-j76xfl4b6i] {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .eim-check.is-bad[b-j76xfl4b6i] {
        border-color: #fed7aa;
        background: #fff7ed;
        color: #b45309;
    }

    /* Đang gọi máy chủ kiểm tra */
    .eim-check.is-run[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
        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-j76xfl4b6i] {
    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-j76xfl4b6i] {
        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-j76xfl4b6i],
.eim-diag-warn[b-j76xfl4b6i] {
    display: block;
}

.eim-diag-ok[b-j76xfl4b6i] { color: #15803d; }

.eim-diag-warn[b-j76xfl4b6i] {
    color: #b45309;
    font-weight: 500;
}

/* ── Nhãn trạng thái từng dòng ── */
.eim-badge[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
        background: #f0fdf4;
        color: #15803d;
        border: 1px solid #bbf7d0;
    }

    .eim-badge.is-bad[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
        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-j76xfl4b6i] {
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid #bfdbfe;
    }

.eim-tbl tbody tr.is-bad td[b-j76xfl4b6i] {
    background: #fffbfb;
}

/* ── Mức sẵn sàng dùng hệ thống ── */
.eim-ready[b-j76xfl4b6i] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
}

    .eim-ready b[b-j76xfl4b6i] {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #b45309;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 6px;
    }

    .eim-ready ul[b-j76xfl4b6i] {
        margin: 0;
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .eim-ready li[b-j76xfl4b6i] {
        font-size: 12.5px;
        color: var(--d-ink-2);
        line-height: 1.5;
    }

.eim-ready-n[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
    color: #b45309;
    background: #fff7ed;
}

.eim-result-actions[b-j76xfl4b6i] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.eim-section-title[b-j76xfl4b6i] {
    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-j76xfl4b6i] {
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: auto;
    max-height: 320px;
}

.eim-tbl[b-j76xfl4b6i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .eim-tbl thead th[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
        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-j76xfl4b6i] {
        border-bottom: 0;
    }

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

    .eim-tbl td.center[b-j76xfl4b6i] {
        text-align: center;
        color: var(--d-ink-4);
    }

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

    .eim-tbl td.muted[b-j76xfl4b6i] {
        color: var(--d-ink-3);
    }

.eim-more[b-j76xfl4b6i] {
    font-size: 12px;
    color: var(--d-ink-3);
    margin: 6px 0 0;
}

.eim-result[b-j76xfl4b6i] {
    border: 1px solid var(--d-line);
    background: var(--d-surface-2);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

    .eim-result h3[b-j76xfl4b6i] {
        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-j76xfl4b6i] {
        margin: 0;
        font-size: 14px;
        color: var(--d-ink-2);
    }

    .eim-result .ok[b-j76xfl4b6i] {
        font-weight: 600;
        color: #16a34a;
        font-variant-numeric: tabular-nums;
    }

    .eim-result .err[b-j76xfl4b6i] {
        font-weight: 600;
        color: #dc2626;
        font-variant-numeric: tabular-nums;
    }

    .eim-result .warn[b-j76xfl4b6i] {
        font-weight: 600;
        color: #d97706;
        font-variant-numeric: tabular-nums;
    }

    .eim-result details[b-j76xfl4b6i] {
        margin-top: 8px;
        font-size: 12px;
    }

        .eim-result details summary[b-j76xfl4b6i] {
            cursor: pointer;
            font-weight: 500;
            padding: 4px 0;
        }

        .eim-result details ul[b-j76xfl4b6i] {
            margin: 6px 0 0;
            padding-left: 18px;
        }

    .eim-result .eim-err-list[b-j76xfl4b6i] { color: #b91c1c; }
    .eim-result .eim-err-list li[b-j76xfl4b6i] { line-height: 1.6; }
    .eim-result .eim-warn-list[b-j76xfl4b6i] { color: #92400e; }
    .eim-result .eim-warn-list li[b-j76xfl4b6i] { line-height: 1.6; }

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

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

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

.eim-spin[b-j76xfl4b6i] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: eim-spin-b-j76xfl4b6i 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-j76xfl4b6i] {
    width: 13px;
    height: 13px;
    border-color: rgba(255, 107, 0, 0.25);
    border-top-color: #ff6b00;
}

@keyframes eim-spin-b-j76xfl4b6i {
    to { transform: rotate(360deg); }
}
/* /src/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-eejibq9m9f] { 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-eejibq9m9f] {
    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-eejibq9m9f] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.obh-reasons li[b-eejibq9m9f] {
    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-eejibq9m9f]::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-eejibq9m9f] { padding-left: 0; }
.obh-reasons li:only-child[b-eejibq9m9f]::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-eejibq9m9f] {
    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-eejibq9m9f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
}
.obh-fact + .obh-fact[b-eejibq9m9f] { border-top: 1px solid var(--nm-border); }
.obh-fact dt[b-eejibq9m9f] {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--nm-muted);
}
.obh-fact dd[b-eejibq9m9f] {
    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-eejibq9m9f] {
    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-eejibq9m9f] {
    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-eejibq9m9f] {
    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-eejibq9m9f] {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .obh-fact dd[b-eejibq9m9f] { text-align: left; }
}
/* /src/Shared/Modals/QrPaymentModal.razor.rz.scp.css */
/* QrPaymentModal — Manager Dashboard v4 theme (warm-neutral + orange) */
.qrm-overlay[b-fnftynrfzm] {
    --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-fnftynrfzm] {
    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-fnftynrfzm] {
    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-fnftynrfzm] {
    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-fnftynrfzm] {
    flex: 1;
    min-width: 0;
}

.qrm-title[b-fnftynrfzm] {
    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-fnftynrfzm] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

.qrm-close[b-fnftynrfzm] {
    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-fnftynrfzm] {
        background: var(--d-surface-2);
        color: var(--d-ink);
        border-color: #dde1e8;
    }

.qrm-body[b-fnftynrfzm] {
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* QR image */
.qrm-qr-wrap[b-fnftynrfzm] {
    display: flex;
    justify-content: center;
}

.qrm-qr-frame[b-fnftynrfzm] {
    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-fnftynrfzm] {
    width: 220px;
    height: 220px;
    display: block;
    image-rendering: pixelated;
}

/* Info rows */
.qrm-info[b-fnftynrfzm] {
    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-fnftynrfzm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    letter-spacing: -0.01em;
}

.qrm-info-label[b-fnftynrfzm] {
    color: var(--d-ink-3);
}

.qrm-info-value[b-fnftynrfzm] {
    color: var(--d-ink);
    font-weight: 500;
}

.qrm-mono[b-fnftynrfzm] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
}

.qrm-amount[b-fnftynrfzm] {
    color: var(--d-ink);
    font-weight: 600;
}

.qrm-countdown[b-fnftynrfzm] {
    color: #b91c1c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Steps */
.qrm-steps[b-fnftynrfzm] {
    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-fnftynrfzm] {
        margin-top: 3px;
    }

/* Pulse indicator */
.qrm-pulse[b-fnftynrfzm] {
    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-fnftynrfzm] {
    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-fnftynrfzm 1.6s ease-out infinite;
}

@keyframes qrm-pulse-b-fnftynrfzm {
    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-fnftynrfzm] {
    text-align: center;
    padding: 18px 4px 8px;
}

.qrm-state-icon[b-fnftynrfzm] {
    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-fnftynrfzm] {
        background: #ecfdf5;
        border-color: #a7f3d0;
        color: #059669;
    }

    .qrm-state-icon.is-error[b-fnftynrfzm] {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

.qrm-state-title[b-fnftynrfzm] {
    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-fnftynrfzm] {
    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-fnftynrfzm] {
        width: 190px;
        height: 190px;
    }

    .qrm-panel[b-fnftynrfzm] {
        max-width: 100%;
    }
}
/* /src/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-edbyvp9aoo] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qa-head-sub[b-edbyvp9aoo] { margin: 0; font-size: 12.5px; color: var(--nm-muted); }

.qa-body[b-edbyvp9aoo] { display: flex; flex-direction: column; gap: 12px; }
.qa-options[b-edbyvp9aoo] {
    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-edbyvp9aoo] {
    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-edbyvp9aoo] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qa-format-text b[b-edbyvp9aoo] { font-size: 12px; font-weight: 700; color: var(--nm-ink); }
.qa-format-text small[b-edbyvp9aoo] { font-size: 11.5px; color: var(--nm-ink-2); line-height: 1.5; }
.qa-format-cols[b-edbyvp9aoo] { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.qa-format-col[b-edbyvp9aoo] {
    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-edbyvp9aoo] { color: var(--nm-brand-700); border-color: var(--nm-brand-300); font-weight: 700; }
.qa-format-sep[b-edbyvp9aoo] { color: var(--nm-muted); font-size: 11px; }

/* ── Ô nhập ── */
[b-edbyvp9aoo] .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-edbyvp9aoo] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qa-stat[b-edbyvp9aoo] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.qa-stat b[b-edbyvp9aoo] { font-size: 13px; font-weight: 700; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.qa-stat.is-ok b[b-edbyvp9aoo] { color: var(--nm-ok); }
.qa-stat.is-bad b[b-edbyvp9aoo] { color: var(--nm-bad); }
.qa-meta-clear[b-edbyvp9aoo] { margin-left: auto; }

/* ── Bảng xem trước ── */
.qa-preview[b-edbyvp9aoo] {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
}
.qa-line[b-edbyvp9aoo] { font-size: 11.5px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }
.qa-cell[b-edbyvp9aoo] {
    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-edbyvp9aoo] { font-weight: 600; color: var(--nm-ink); }
.qa-status[b-edbyvp9aoo] { display: inline-flex; }

[b-edbyvp9aoo] .qa-row-bad .nm-grid__td { background: var(--nm-bad-soft); }
[b-edbyvp9aoo] .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-edbyvp9aoo] { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-end; }
[b-edbyvp9aoo] .qa-foot .nm-btn.qa-foot-retry { margin-right: auto; }

@media (max-width: 640px) {
    .qa-format[b-edbyvp9aoo] { flex-direction: column; align-items: stretch; }
    .qa-cell[b-edbyvp9aoo] { max-width: 130px; }
}
/* /src/Shared/Modals/ServiceRequestViolationModal.razor.rz.scp.css */
/* ServiceRequestViolationModal — Manager Dashboard v4 theme */
.srvm-overlay[b-45mv391fxh] {
    --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-45mv391fxh] {
    position: absolute;
    inset: 0;
}

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

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

.srvm-body[b-45mv391fxh] {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.srvm-violations[b-45mv391fxh] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
}

    .srvm-violations .lbl[b-45mv391fxh] {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .srvm-violations ul[b-45mv391fxh] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .srvm-violations li[b-45mv391fxh] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #92400e;
        line-height: 1.5;
    }

    .srvm-violations svg[b-45mv391fxh] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #d97706;
    }

.srvm-info[b-45mv391fxh] {
    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-45mv391fxh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .srvm-info-row + .srvm-info-row[b-45mv391fxh] {
        border-top: 1px solid var(--d-line-2);
    }

    .srvm-info-row .k[b-45mv391fxh] {
        color: var(--d-ink-3);
    }

    .srvm-info-row .v[b-45mv391fxh] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .srvm-info-row .v.amount[b-45mv391fxh] {
        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-45mv391fxh] {
    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-45mv391fxh] {
    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-45mv391fxh] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.srvm-error[b-45mv391fxh] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.srvm-success[b-45mv391fxh] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

    .srvm-success .t[b-45mv391fxh] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #15803d;
    }

    .srvm-success .d[b-45mv391fxh] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #166534;
    }

.srvm-actions[b-45mv391fxh] {
    padding: 16px 22px;
    border-top: 1px solid var(--d-line);
    display: flex;
    gap: 8px;
}

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

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

.srvm-btn:disabled[b-45mv391fxh] {
    opacity: 0.55;
    cursor: not-allowed;
}

.srvm-btn-grow[b-45mv391fxh] {
    flex: 1;
}

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

@keyframes srvm-spin-b-45mv391fxh {
    to { transform: rotate(360deg); }
}
/* /src/Shared/PaymentResult/ESimPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   ESimPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.epr-root[b-lv3rvg74vm] {
    --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-lv3rvg74vm] {
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: -0.01em;
}

/* ─── Card primitive ─── */
.epr-card[b-lv3rvg74vm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.epr-card-hd[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
    min-width: 0;
}

.epr-card-title[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

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

/* ─── Status pill ─── */
.epr-pill[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .epr-pill.warn[b-lv3rvg74vm] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: #fde68a;
    }

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

/* ─── QR / Activation block ─── */
.epr-qr-row[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
        flex-direction: row;
        align-items: center;
    }
}

.epr-qr-img[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.epr-qr-eyebrow[b-lv3rvg74vm] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-good);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.epr-kv[b-lv3rvg74vm] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--d-ink-2);
}

    .epr-kv .k[b-lv3rvg74vm] {
        color: var(--d-ink-3);
    }

    .epr-kv .v[b-lv3rvg74vm] {
        color: var(--d-ink);
        font-weight: 500;
        word-break: break-all;
        text-align: right;
    }

    .epr-kv .v.mono[b-lv3rvg74vm] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
    }

.epr-link[b-lv3rvg74vm] {
    color: var(--d-accent);
    font-size: 12px;
    text-decoration: none;
    word-break: break-all;
}

    .epr-link:hover[b-lv3rvg74vm] {
        text-decoration: underline;
    }

/* ─── Pending box ─── */
.epr-pending[b-lv3rvg74vm] {
    background: var(--d-warn-soft);
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.epr-pending-hd[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

.epr-pending-hint[b-lv3rvg74vm] {
    font-size: 12px;
    color: var(--d-ink-2);
    margin: 0 0 10px;
}

.epr-error[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
    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-lv3rvg74vm] {
        background: var(--d-accent-grad-hover);
    }

    .epr-btn-accent:disabled[b-lv3rvg74vm] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .epr-btn-accent svg[b-lv3rvg74vm] {
        width: 16px;
        height: 16px;
    }

.epr-spin[b-lv3rvg74vm] {
    animation: epr-spin-b-lv3rvg74vm 0.7s linear infinite;
}

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

/* ─── Detail grid ─── */
.epr-grid[b-lv3rvg74vm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .epr-grid[b-lv3rvg74vm] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.epr-cell-lbl[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
    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-lv3rvg74vm] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.epr-grid > div[b-lv3rvg74vm] {
    min-width: 0;
}

/* ─── Date row ─── */
.epr-dates[b-lv3rvg74vm] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .epr-dates strong[b-lv3rvg74vm] {
        color: var(--d-ink-2);
        font-weight: 500;
    }

/* ─── Guide ─── */
.epr-guide[b-lv3rvg74vm] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.epr-guide-hd[b-lv3rvg74vm] {
    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-lv3rvg74vm] {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: var(--d-ink-2);
}
/* /src/Shared/PaymentResult/FastTrackPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FastTrackPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.ftpr-root[b-hfpb0rp4a9] {
    --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-hfpb0rp4a9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftpr-hero-ico[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
        width: 22px;
        height: 22px;
    }

.ftpr-hero-text h2[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.ftpr-card[b-hfpb0rp4a9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.ftpr-card-hd[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    min-width: 0;
}

.ftpr-card-title[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--d-ink-3);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.ftpr-pill[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ─── Code chip ─── */
.ftpr-code[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ftpr-code-val[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .ftpr-grid[b-hfpb0rp4a9] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.ftpr-cell-lbl[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .ftpr-cell-val.mono[b-hfpb0rp4a9] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

.ftpr-money[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
        margin-left: 3px;
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 500;
        color: var(--d-ink-3);
    }

/* ─── Notes ─── */
.ftpr-notes[b-hfpb0rp4a9] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.ftpr-notes-hd[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

.ftpr-notes-list[b-hfpb0rp4a9] {
    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-hfpb0rp4a9] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .ftpr-notes-list li[b-hfpb0rp4a9]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Shared/PaymentResult/FlightPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   FlightPaymentResult — Manager Dashboard v4 theme
   FlightTicketFace giữ nguyên (file CSS riêng)
   ═══════════════════════════════════════════════════════════════ */

.flpr-root[b-0jf7m3cr7s] {
    --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-0jf7m3cr7s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flpr-hd-ico[b-0jf7m3cr7s] {
    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-0jf7m3cr7s] {
        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-0jf7m3cr7s] {
        width: 20px;
        height: 20px;
    }

.flpr-hd-text h2[b-0jf7m3cr7s] {
    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-0jf7m3cr7s] {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

/* ─── Card primitive ─── */
.flpr-card[b-0jf7m3cr7s] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    padding: 14px 16px;
}

.flpr-card-hd[b-0jf7m3cr7s] {
    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-0jf7m3cr7s] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* ─── Passenger table ─── */
.flpr-tbl-wrap[b-0jf7m3cr7s] {
    overflow-x: auto;
    margin: 0 -16px -14px;
}

.flpr-tbl[b-0jf7m3cr7s] {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

    .flpr-tbl thead th[b-0jf7m3cr7s] {
        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-0jf7m3cr7s] {
            padding-left: 16px;
        }

        .flpr-tbl thead th:last-child[b-0jf7m3cr7s] {
            padding-right: 16px;
        }

    .flpr-tbl tbody td[b-0jf7m3cr7s] {
        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-0jf7m3cr7s] {
            padding-left: 16px;
        }

        .flpr-tbl tbody td:last-child[b-0jf7m3cr7s] {
            padding-right: 16px;
        }

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

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

.flpr-tbl-idx[b-0jf7m3cr7s] {
    color: var(--d-ink-4);
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.flpr-tbl-name[b-0jf7m3cr7s] {
    color: var(--d-ink);
    font-weight: 500;
}

.flpr-tbl-mono[b-0jf7m3cr7s] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--d-ink-2);
    font-variant-numeric: tabular-nums;
}

.flpr-seat-tag[b-0jf7m3cr7s] {
    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-0jf7m3cr7s] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .flpr-contact-grid[b-0jf7m3cr7s] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.flpr-cell-lbl[b-0jf7m3cr7s] {
    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-0jf7m3cr7s] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
    word-break: break-word;
}

/* ─── Notes ─── */
.flpr-notes-list[b-0jf7m3cr7s] {
    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-0jf7m3cr7s] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .flpr-notes-list li[b-0jf7m3cr7s]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-ink-4);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Shared/PaymentResult/FlightTicketFace.razor.rz.scp.css */
/* ================================================================
   ui-ticket-international — scoped CSS
   ================================================================ */

.ticket[b-s1r5tbfqe0] {
    /* 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-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    top: -14px;
    clip-path: polygon(0 42%, 100% 42%, 100% 100%, 0 100%);
}

.notch-bottom[b-s1r5tbfqe0] {
    bottom: -14px;
    clip-path: polygon(0 0, 100% 0, 100% 58%, 0 58%);
}

/* LEFT — 40% gradient panel */
.left[b-s1r5tbfqe0] {
    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-s1r5tbfqe0]::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-s1r5tbfqe0]::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-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.left h2[b-s1r5tbfqe0] {
    margin: 0;
    font-size: 15px;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.left .logo[b-s1r5tbfqe0] {
    margin: 2px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.left .logo img[b-s1r5tbfqe0] {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(255, 253, 253, 0.8));
}

.info[b-s1r5tbfqe0] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* RIGHT — 60% cream panel */
.right[b-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    flex: 1;
    gap: 6px;
}

.time[b-s1r5tbfqe0] {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.time.start[b-s1r5tbfqe0] {
    color: #ff7d1f;
}

.time.end[b-s1r5tbfqe0] {
    color: #ff9a52;
    text-align: end;
}

.airport[b-s1r5tbfqe0] {
    font-size: 14px;
    margin-top: 3px;
    color: #475569;
    line-height: 1.5;
}

.airport.end[b-s1r5tbfqe0] {
    text-align: end;
}

.route[b-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
}

.route .plane-line[b-s1r5tbfqe0] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #ff7d1f;
}

.route .plane-icon[b-s1r5tbfqe0] {
    width: 18px;
    height: 18px;
    fill: #ff7d1f;
    flex-shrink: 0;
}

.route .duration-pill[b-s1r5tbfqe0] {
    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-s1r5tbfqe0] {
    border-top: 1px dashed #cbd5e1;
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-top: 8px;
    position: relative;
    z-index: 2;
    gap: 6px;
}
/* /src/Shared/PaymentResult/HotelPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   HotelPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.hpr-root[b-bzsbowr2k2] {
    --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-bzsbowr2k2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hpr-hero-ico[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
        width: 22px;
        height: 22px;
    }

.hpr-hero-text h2[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.hpr-card[b-bzsbowr2k2] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

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

.hpr-card-title[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

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

/* ─── Code chips ─── */
.hpr-codes[b-bzsbowr2k2] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hpr-code[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .hpr-code.accent[b-bzsbowr2k2] {
        background: var(--d-accent-grad-soft);
        border-color: #ffe0c7;
    }

.hpr-code-lbl[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    color: var(--d-good);
}

.hpr-code.accent .hpr-code-lbl[b-bzsbowr2k2] {
    color: var(--d-accent);
}

.hpr-code-val[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    color: var(--d-good);
}

.hpr-code.accent .hpr-code-val[b-bzsbowr2k2] {
    color: var(--d-accent);
}

/* ─── Detail grid ─── */
.hpr-grid[b-bzsbowr2k2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .hpr-grid[b-bzsbowr2k2] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.hpr-cell-lbl[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .hpr-cell-val.mono[b-bzsbowr2k2] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

/* ─── Timeline ─── */
.hpr-timeline[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    text-align: center;
    flex-shrink: 0;
}

.hpr-tl-lbl[b-bzsbowr2k2] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hpr-tl-date[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    font-size: 11px;
    color: var(--d-ink-4);
}

.hpr-tl-mid[b-bzsbowr2k2] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hpr-tl-line[b-bzsbowr2k2] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

.hpr-tl-mid-lbl[b-bzsbowr2k2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-ink-3);
    white-space: nowrap;
}

/* ─── Guests list ─── */
.hpr-guests[b-bzsbowr2k2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hpr-guest-row[b-bzsbowr2k2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.hpr-avatar[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    color: var(--d-ink);
    font-weight: 500;
}

.hpr-guest-id[b-bzsbowr2k2] {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

/* ─── Notes ─── */
.hpr-notes-hd[b-bzsbowr2k2] {
    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-bzsbowr2k2] {
    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-bzsbowr2k2] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .hpr-notes-list li[b-bzsbowr2k2]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Shared/PaymentResult/TourPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   TourPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.tpr-root[b-2j2lcvmcaa] {
    --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-2j2lcvmcaa] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tpr-hero-ico[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
        width: 22px;
        height: 22px;
    }

.tpr-hero-text h2[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.tpr-card[b-2j2lcvmcaa] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

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

.tpr-card-title[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 12.5px;
}

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

/* ─── Code chips ─── */
.tpr-codes[b-2j2lcvmcaa] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tpr-code[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
        background: var(--d-good-soft);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .tpr-code.accent[b-2j2lcvmcaa] {
        background: var(--d-accent-grad-soft);
        border-color: #ffe0c7;
    }

.tpr-code-lbl[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    color: var(--d-good);
}

.tpr-code.accent .tpr-code-lbl[b-2j2lcvmcaa] {
    color: var(--d-accent);
}

.tpr-code-val[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    color: var(--d-good);
}

.tpr-code.accent .tpr-code-val[b-2j2lcvmcaa] {
    color: var(--d-accent);
}

/* ─── Timeline ─── */
.tpr-timeline[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    text-align: center;
    flex-shrink: 0;
}

.tpr-tl-lbl[b-2j2lcvmcaa] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-tl-date[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--d-ink-4);
}

.tpr-tl-line[b-2j2lcvmcaa] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

.tpr-tl-mid svg[b-2j2lcvmcaa] {
    width: 14px;
    height: 14px;
    color: var(--d-ink-4);
    flex-shrink: 0;
}

/* ─── Travelers grid ─── */
.tpr-travelers[b-2j2lcvmcaa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .tpr-travelers[b-2j2lcvmcaa] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tpr-trav[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tpr-trav-count[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 4px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ─── Passengers ─── */
.tpr-pax-list[b-2j2lcvmcaa] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tpr-pax[b-2j2lcvmcaa] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.tpr-avatar[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    color: var(--d-ink);
    font-weight: 500;
}

.tpr-pax-id[b-2j2lcvmcaa] {
    margin-left: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--d-ink-3);
}

/* ─── Notes ─── */
.tpr-notes-hd[b-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
    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-2j2lcvmcaa] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .tpr-notes-list li[b-2j2lcvmcaa]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/Shared/PaymentResult/VisaPaymentResult.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   VisaPaymentResult — Manager Dashboard v4 theme
   ═══════════════════════════════════════════════════════════════ */

.vpr-root[b-64k5msvliu] {
    --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-64k5msvliu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vpr-hero-ico[b-64k5msvliu] {
    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-64k5msvliu] {
        width: 22px;
        height: 22px;
    }

.vpr-hero-text h2[b-64k5msvliu] {
    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-64k5msvliu] {
    margin: 2px 0 0;
    color: var(--d-ink-3);
    font-size: 14px;
}

/* ─── Card ─── */
.vpr-card[b-64k5msvliu] {
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    overflow: hidden;
}

.vpr-card-hd[b-64k5msvliu] {
    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-64k5msvliu] {
    min-width: 0;
}

.vpr-card-title[b-64k5msvliu] {
    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-64k5msvliu] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

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

/* ─── Status pill ─── */
.vpr-pill[b-64k5msvliu] {
    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-64k5msvliu] {
        background: var(--d-good-soft);
        color: var(--d-good);
        border-color: color-mix(in srgb, var(--d-good) 22%, transparent);
    }

    .vpr-pill.danger[b-64k5msvliu] {
        background: var(--d-danger-soft);
        color: var(--d-danger);
        border-color: color-mix(in srgb, var(--d-danger) 22%, transparent);
    }

    .vpr-pill.warn[b-64k5msvliu] {
        background: var(--d-warn-soft);
        color: var(--d-warn);
        border-color: #fde68a;
    }

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

/* ─── Code chip ─── */
.vpr-code[b-64k5msvliu] {
    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-64k5msvliu] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-code-val[b-64k5msvliu] {
    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-64k5msvliu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (min-width: 768px) {
    .vpr-grid[b-64k5msvliu] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.vpr-cell-lbl[b-64k5msvliu] {
    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-64k5msvliu] {
    font-size: 14px;
    color: var(--d-ink);
    font-weight: 500;
}

    .vpr-cell-val.mono[b-64k5msvliu] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
    }

/* ─── Timeline ─── */
.vpr-timeline[b-64k5msvliu] {
    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-64k5msvliu] {
    text-align: center;
    flex-shrink: 0;
}

.vpr-tl-lbl[b-64k5msvliu] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vpr-tl-date[b-64k5msvliu] {
    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-64k5msvliu] {
    flex: 1;
    height: 1px;
    border-top: 1px dashed var(--d-line);
}

/* ─── Result block ─── */
.vpr-result[b-64k5msvliu] {
    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-64k5msvliu] {
    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-64k5msvliu] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 14px;
}

@media (min-width: 640px) {
    .vpr-result-grid[b-64k5msvliu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.vpr-result-grid .k[b-64k5msvliu] {
    color: var(--d-ink-3);
    margin-right: 4px;
}

.vpr-result-grid .v[b-64k5msvliu] {
    color: var(--d-ink);
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ─── Documents tag ─── */
.vpr-docs[b-64k5msvliu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-ink-3);
}

    .vpr-docs svg[b-64k5msvliu] {
        width: 14px;
        height: 14px;
        color: var(--d-ink-4);
    }

/* ─── Notes ─── */
.vpr-notes-hd[b-64k5msvliu] {
    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-64k5msvliu] {
    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-64k5msvliu] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .vpr-notes-list li[b-64k5msvliu]::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--d-accent);
        margin-top: 7px;
        flex-shrink: 0;
    }
/* /src/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-08pw53w3ng] {
    --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-08pw53w3ng] {
    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-08pw53w3ng] {
    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-08pw53w3ng] {
        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-08pw53w3ng] {
            color: var(--d-accent);
        }

.pms-card-body[b-08pw53w3ng] {
    padding: 14px 16px;
}

/* ─── Category label ─── */
.pms-cat-lbl[b-08pw53w3ng] {
    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-08pw53w3ng] {
        margin-top: 0;
    }

/* ─── Method grid ─── */
.pms-method-grid[b-08pw53w3ng] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
}

@media (min-width: 640px) {
    .pms-method-grid[b-08pw53w3ng] { 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-08pw53w3ng] {
    height: 100%;
}

/* Method tile — horizontal: icon + name (+ optional balance) */
.pms-method[b-08pw53w3ng] {
    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-08pw53w3ng] {
        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-08pw53w3ng] {
        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-08pw53w3ng] {
            transform: translateY(-2px);
        }

/* Tile bị khoá (ví không đủ số dư) */
.pms-method-featured.is-disabled .pms-method[b-08pw53w3ng],
label.is-disabled .pms-method[b-08pw53w3ng] {
    opacity: .55;
    filter: grayscale(.4);
}

    label.is-disabled .pms-method:hover[b-08pw53w3ng] {
        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-08pw53w3ng] {
    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-08pw53w3ng]::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-08pw53w3ng] {
        position: relative;
        z-index: 1;
    }

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

.pms-method-text[b-08pw53w3ng] {
    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-08pw53w3ng] {
    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-08pw53w3ng] {
    font-size: 11px;
    font-weight: 600;
    color: var(--d-accent);
    line-height: 1.2;
}

    .pms-method-fee.is-free[b-08pw53w3ng] {
        color: #059669;
        font-weight: 500;
    }

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

.pms-method img[b-08pw53w3ng] {
    max-height: 28px;
    max-width: 40px;
    object-fit: contain;
}

/* Check mark khi chọn */
.pms-method-check[b-08pw53w3ng] {
    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-08pw53w3ng .25s cubic-bezier(.34,1.56,.64,1) both;
}

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

/* Loading / empty */
.pms-loading[b-08pw53w3ng] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

.pms-spinner[b-08pw53w3ng] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--d-line);
    border-top-color: var(--d-accent);
    border-radius: 999px;
    animation: pms-spin-b-08pw53w3ng .7s linear infinite;
}

@keyframes pms-spin-b-08pw53w3ng {
    to { transform: rotate(360deg); }
}

.pms-empty[b-08pw53w3ng] {
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--d-ink-4);
}
/* /src/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-h6jy9dzz65] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wpin-lead[b-h6jy9dzz65] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--nm-ink-2);
}

/* ---- Số tiền sắp trừ ---- */
.wpin-amount[b-h6jy9dzz65] {
    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-h6jy9dzz65] { font-size: 12px; color: var(--nm-muted); }
.wpin-amount-val[b-h6jy9dzz65] { font-size: 17px; font-weight: 700; color: var(--nm-brand-600); }

/* ---- Lỗi lần gửi trước ---- */
.wpin-alert[b-h6jy9dzz65] {
    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-h6jy9dzz65] { flex-shrink: 0; margin-top: 2px; color: var(--nm-bad); }

/* ---- Quên mã ---- */
.wpin-forgot[b-h6jy9dzz65] {
    align-self: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-brand-600);
    text-decoration: none;
}

.wpin-forgot:hover[b-h6jy9dzz65] { text-decoration: underline; }
/* /src/Shared/Policy/PolicyConfirmModal.razor.rz.scp.css */
/* PolicyConfirmModal — Manager Dashboard v4 theme */
.pcm-overlay[b-9pxll9y5ql] {
    --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-9pxll9y5ql] {
    position: absolute;
    inset: 0;
}

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

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

.pcm-section[b-9pxll9y5ql] {
    padding: 14px 22px 0;
}

.pcm-violations[b-9pxll9y5ql] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--d-r);
    padding: 12px 14px;
}

    .pcm-violations .lbl[b-9pxll9y5ql] {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 600;
        color: #92400e;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .pcm-violations ul[b-9pxll9y5ql] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .pcm-violations li[b-9pxll9y5ql] {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: 14px;
        color: #92400e;
        line-height: 1.5;
    }

    .pcm-violations svg[b-9pxll9y5ql] {
        flex-shrink: 0;
        margin-top: 2px;
        color: #d97706;
    }

.pcm-info[b-9pxll9y5ql] {
    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-9pxll9y5ql] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

    .pcm-info-row + .pcm-info-row[b-9pxll9y5ql] {
        border-top: 1px solid var(--d-line-2);
    }

    .pcm-info-row .k[b-9pxll9y5ql] {
        color: var(--d-ink-3);
    }

    .pcm-info-row .v[b-9pxll9y5ql] {
        font-weight: 500;
        color: var(--d-ink);
    }

    .pcm-info-row .v.amount[b-9pxll9y5ql] {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--d-ink);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

.pcm-field-label[b-9pxll9y5ql] {
    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-9pxll9y5ql] {
    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-9pxll9y5ql] {
        outline: none;
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.pcm-error[b-9pxll9y5ql] {
    padding: 10px 12px;
    border-radius: var(--d-r);
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    font-size: 14px;
}

.pcm-success[b-9pxll9y5ql] {
    padding: 12px 14px;
    border-radius: var(--d-r);
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}

    .pcm-success .t[b-9pxll9y5ql] {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #15803d;
    }

    .pcm-success .d[b-9pxll9y5ql] {
        margin: 4px 0 0;
        font-size: 12px;
        color: #166534;
    }

.pcm-actions[b-9pxll9y5ql] {
    padding: 16px 22px;
    border-top: 1px solid var(--d-line);
    margin-top: 14px;
}

.pcm-btn-row[b-9pxll9y5ql] {
    display: flex;
    gap: 8px;
}

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

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

.pcm-btn-info[b-9pxll9y5ql] {
    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-9pxll9y5ql] {
        filter: brightness(0.95);
        color: #fff;
    }

.pcm-btn:disabled[b-9pxll9y5ql] {
    opacity: 0.55;
    cursor: not-allowed;
}

.pcm-btn-grow[b-9pxll9y5ql] {
    flex: 1;
}

.pcm-divider[b-9pxll9y5ql] {
    border-top: 1px solid var(--d-line-2);
    margin-top: 12px;
    padding-top: 12px;
}

.pcm-personal-hint[b-9pxll9y5ql] {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--d-ink-3);
    letter-spacing: -0.01em;
}

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

@keyframes pcm-spin-b-9pxll9y5ql {
    to { transform: rotate(360deg); }
}
/* /src/Shared/Policy/PolicyViolationBadge.razor.rz.scp.css */
/* PolicyViolationBadge — warm-neutral approved/violation surfaces */
.pvb-root[b-75l8zb4nlj] {
    --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-75l8zb4nlj] {
    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-75l8zb4nlj] {
    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-75l8zb4nlj] {
    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-75l8zb4nlj] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.pvb-ico-md[b-75l8zb4nlj] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Compact tooltip */
.pvb-tip[b-75l8zb4nlj] {
    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-75l8zb4nlj] {
        font-weight: 600;
        color: #92400e;
        margin: 0 0 6px;
    }

    .pvb-tip ul[b-75l8zb4nlj] {
        margin: 0;
        padding-left: 16px;
        list-style: disc;
    }

    .pvb-tip ul li + li[b-75l8zb4nlj] {
        margin-top: 3px;
    }

    .pvb-tip .pvb-tip-hint[b-75l8zb4nlj] {
        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-75l8zb4nlj] {
    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-75l8zb4nlj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pvb-box-icon[b-75l8zb4nlj] {
    color: #b45309;
    flex-shrink: 0;
    margin-top: 1px;
}

.pvb-box-body[b-75l8zb4nlj] {
    flex: 1;
    min-width: 0;
}

.pvb-box-title[b-75l8zb4nlj] {
    font-weight: 600;
    color: #92400e;
    line-height: 1.3;
    margin: 0;
}

.pvb-box-list[b-75l8zb4nlj] {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: #78350f;
}

    .pvb-box-list li[b-75l8zb4nlj] {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        line-height: 1.45;
    }

        .pvb-box-list li + li[b-75l8zb4nlj] {
            margin-top: 2px;
        }

    .pvb-box-list .pvb-bullet[b-75l8zb4nlj] {
        color: #b45309;
        flex-shrink: 0;
    }

.pvb-box-hint[b-75l8zb4nlj] {
    margin: 6px 0 0;
    color: #92400e;
    font-style: italic;
    line-height: 1.3;
}
/* /src/Shared/Reports/FinanceReportsView.razor.rz.scp.css */
/* FinanceReportsView — shared /manager + /ca reports, chuẩn nm-list token-only:
   head (xuất Excel) + NmToolbar khoảng ngày (áp cho mọi phần) + NmTabs 4 phần;
   trong mỗi tab: dải thống kê mỏng + NmCard (DataGrid / dòng phân rã / biểu đồ SVG). */
.nm-list-page[b-7naggj42ou] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

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

.nm-code-pill[b-7naggj42ou] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Toolbar 1 hàng: NmDateRange mặc định xếp cột (fields trên, preset dưới) →
   trong toolbar ép nằm ngang cùng hàng, preset thành dải pill cạnh ô ngày ── */
[b-7naggj42ou] .frv-toolbar .nm-daterange {
    flex: 0 0 auto;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
[b-7naggj42ou] .frv-toolbar .nm-daterange__fields .nm-input-wrap { width: 128px; }
[b-7naggj42ou] .frv-toolbar .nm-daterange__presets { flex-wrap: nowrap; }

/* Nhãn "Khoảng thời gian" + số ngày đang lọc: nói rõ thanh này áp cho MỌI tab. */
.frv-tb-lbl[b-7naggj42ou] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
}
.frv-tb-lbl i[b-7naggj42ou] { color: var(--nm-brand-600); font-size: 13px; }
.frv-tb-note[b-7naggj42ou] {
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Thanh tab: nội dung mỗi tab giữ đúng nhịp 16px như các khối ngoài ── */
[b-7naggj42ou] .frv-tabs .nm-tabs__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Dải thống kê mỏng — 1 hàng thay lưới NmKpi (pattern cabk-stats đã duyệt ở /ca/bookings) ── */
.frv-stats[b-7naggj42ou] {
    display: flex;
    align-items: stretch;
    padding: 9px 4px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.frv-stats[b-7naggj42ou]::-webkit-scrollbar { display: none; }

.frv-stat[b-7naggj42ou] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 16px;
    white-space: nowrap;
    min-width: max-content;
}
.frv-stat + .frv-stat[b-7naggj42ou] { border-left: 1px solid var(--nm-border); }

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

.frv-stat__lbl[b-7naggj42ou] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.frv-stat__val[b-7naggj42ou] {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.frv-stat__val small[b-7naggj42ou] { font-size: 11px; font-weight: 500; color: var(--nm-muted); }

/* Delta so với kỳ trước — mũi tên + dấu đi kèm nên không phụ thuộc màu để đọc chiều. */
.frv-stat__delta[b-7naggj42ou] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--nm-r-pill);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.frv-stat__delta i[b-7naggj42ou] { font-size: 13px; }
.frv-stat__delta.is-bad[b-7naggj42ou] { color: var(--nm-bad); }
.frv-stat__delta.is-good[b-7naggj42ou] { color: var(--nm-ok); }

.frv-compare-note[b-7naggj42ou] {
    margin: -4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--nm-muted);
}
.frv-compare-note i[b-7naggj42ou] { color: var(--nm-info); }

/* ── Biểu đồ xu hướng (SVG thuần) ─────────────────────────────────────────
   Một chuỗi → một màu; lưới/trục là nét mảnh liền, lùi hẳn về sau so với cột. */
.frv-chart[b-7naggj42ou] { padding: 12px 14px 6px; }
.frv-chart svg[b-7naggj42ou] { width: 100%; height: auto; display: block; overflow: visible; }

.frv-chart-grid[b-7naggj42ou], .frv-chart-axis[b-7naggj42ou] { stroke: var(--nm-border); stroke-width: 1; }

.frv-chart-fill[b-7naggj42ou] { fill: var(--nm-brand-500); transition: fill .12s; }
.frv-chart-bar:hover .frv-chart-fill[b-7naggj42ou] { fill: var(--nm-brand-700); }
.frv-chart-hit[b-7naggj42ou] { fill: transparent; }

.frv-chart-tip[b-7naggj42ou] { opacity: 0; pointer-events: none; transition: opacity .1s; }
.frv-chart-bar:hover .frv-chart-tip[b-7naggj42ou] { opacity: 1; }
.frv-chart-tip rect[b-7naggj42ou] { fill: var(--nm-ink); opacity: .92; }
/* Kiểu chữ của <text> nằm NỘI TUYẾN trong SvgText (xem FinanceReportsView.razor):
   phần tử dựng bằng RenderTreeBuilder không có thuộc tính scope nên rule ở đây không với tới. */

/* ── Card ── */
[b-7naggj42ou] .frv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frv-card-ico[b-7naggj42ou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.frv-card-title[b-7naggj42ou] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.frv-card-count[b-7naggj42ou] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.frv-card-hint[b-7naggj42ou] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }
/* Điều khiển/hành động của RIÊNG một thẻ (chọn kỳ, xuất CSV) — đứng cuối hàng tiêu đề thẻ.
   Bề rộng đặt trên div BỌC NGOÀI: Class của NmSelect rơi vào thẻ <select> bên trong, còn
   .nm-select-wrap vẫn width:100% nên đặt ở đó là hụt (xem ghi chú nm-list-toolbar). */
.frv-card-ctl[b-7naggj42ou] { flex-shrink: 0; width: 150px; }
[b-7naggj42ou] .frv-card-act { flex-shrink: 0; }

/* Bảng số theo kỳ gập ở cuối thân thẻ biểu đồ — kẻ vạch tách khỏi biểu đồ phía trên. */
[b-7naggj42ou] .frv-trend-table { border-top: 1px solid var(--nm-border); }

/* Khối chờ trong thẻ (NmSkeleton) — cùng padding với nội dung thật để không nhảy chiều cao. */
.frv-skel[b-7naggj42ou] { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }

/* ── Dòng phân rã theo nhóm — DÙNG CHUNG cho "theo dịch vụ" và "theo phòng ban" ──
   Cùng một khoản tiền chia theo hai chiều thì phải đọc giống nhau: tên · số tiền · tỷ trọng,
   thanh nền NmProgress, rồi hàng nhãn phụ. */
.frv-break[b-7naggj42ou] { display: flex; flex-direction: column; }
.frv-break-row[b-7naggj42ou] {
    padding: 11px 16px;
    border-bottom: 1px solid var(--nm-border);
}
.frv-break-row:last-child[b-7naggj42ou] { border-bottom: 0; }
/* Nhóm "chưa gán" là việc cần xử lý, không phải một nhóm để so sánh — làm nhạt đi */
.frv-break-row.is-muted[b-7naggj42ou] { background: color-mix(in srgb, var(--nm-warn) 6%, transparent); }

.frv-break-hd[b-7naggj42ou] { display: flex; align-items: baseline; gap: 8px; }
.frv-break-name[b-7naggj42ou] {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.frv-break-flag[b-7naggj42ou] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--nm-warn);
    cursor: help;
}
.frv-break-amt[b-7naggj42ou] {
    font-size: 13px;
    font-weight: 700;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.frv-break-pct[b-7naggj42ou] {
    min-width: 46px;
    text-align: right;
    font-size: 11.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* NmProgress mặc định track 8px — trong dòng danh sách hạ xuống 6px cho đỡ nặng. */
[b-7naggj42ou] .frv-break-bar { margin: 7px 0; }
[b-7naggj42ou] .frv-break-bar .nm-progress__track { height: 6px; }

.frv-break-meta[b-7naggj42ou] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.frv-break-count[b-7naggj42ou] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }
[b-7naggj42ou] .frv-break-meta .nm-tag { font-size: 11px; }
.frv-break-meta b[b-7naggj42ou] { font-variant-numeric: tabular-nums; }

/* ── Cell trong DataGrid ── */
.cell-2line[b-7naggj42ou] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__sub[b-7naggj42ou] { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }
.frv-name[b-7naggj42ou] { font-weight: 500; color: var(--nm-ink); }
.frv-viol-type[b-7naggj42ou] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.frv-desc[b-7naggj42ou] {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.frv-money[b-7naggj42ou] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.frv-money.is-good[b-7naggj42ou] { color: var(--nm-ok); font-weight: 600; }
.frv-money.is-bad[b-7naggj42ou] { color: var(--nm-bad); font-weight: 600; }
.frv-time[b-7naggj42ou] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}

/* ── Footer phân trang ── */
.frv-foot[b-7naggj42ou] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

@media (max-width: 640px) {
    .nm-list-page[b-7naggj42ou] { padding: 16px 14px 22px; }
    /* Mobile: cho khối ngày + preset xuống dòng thoải mái, ô ngày giãn hết bề ngang */
    [b-7naggj42ou] .frv-toolbar .nm-daterange { flex-wrap: wrap; width: 100%; }
    [b-7naggj42ou] .frv-toolbar .nm-daterange__fields { width: 100%; }
    [b-7naggj42ou] .frv-toolbar .nm-daterange__fields .nm-input-wrap { width: auto; flex: 1 1 0; }
    [b-7naggj42ou] .frv-toolbar .nm-daterange__presets { flex-wrap: wrap; }
    /* Ô chọn kỳ trên tiêu đề thẻ biểu đồ: hẹp quá thì cho chiếm trọn dòng của nó */
    .frv-card-ctl[b-7naggj42ou] { width: 100%; }
    /* Thanh tab trượt ngang thay vì xuống 2 dòng */
    [b-7naggj42ou] .frv-tabs .nm-tabs__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    [b-7naggj42ou] .frv-tabs .nm-tabs__bar::-webkit-scrollbar { display: none; }
    [b-7naggj42ou] .frv-tabs .nm-tabs__tab { white-space: nowrap; }
}
/* /src/Shared/Search/EsimSearchBox.razor.rz.scp.css */
/* EsimSearchBox — corporate connectivity search bar */
.esb-root[b-xaag0gawto] {
    --d-surface: #ffffff;
    --d-surface-2: #f5f6f9;
    --d-line: #e7eaf0;
    --d-line-2: #f0f2f6;
    --d-ink: #101319;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a7adba;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff3ea;
    --d-accent-line: #ffd9bd;
    --d-accent-grad: linear-gradient(135deg, #ff8a33 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff7a1a 0%, #ef6000 100%);
    --d-r: 13px;

    width: 100%;
    padding: 14px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .esb-root[b-xaag0gawto] {
        padding: 14px 16px;
    }
}

/* ───────── Fields row (desktop: 3 ô + nút submit inline) ───────── */
.esb-row[b-xaag0gawto] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .esb-row[b-xaag0gawto] {
        grid-template-columns: 1.15fr 1.25fr 0.95fr auto;
        gap: 10px;
        align-items: stretch;
    }
}

.esb-field[b-xaag0gawto] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .14s, box-shadow .14s;
}

    .esb-field:hover[b-xaag0gawto] {
        border-color: #d4d9e2;
    }

    .esb-field.is-open[b-xaag0gawto],
    .esb-field:focus-within[b-xaag0gawto] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.13);
    }

.esb-trigger[b-xaag0gawto] {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.esb-trigger-inner[b-xaag0gawto] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.esb-ico[b-xaag0gawto] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .14s, color .14s, border-color .14s;
}

    .esb-ico svg[b-xaag0gawto] {
        width: 15px;
        height: 15px;
    }

.esb-field.is-open .esb-ico[b-xaag0gawto],
.esb-field:focus-within .esb-ico[b-xaag0gawto] {
    background: var(--d-accent-soft);
    color: var(--d-accent);
    border-color: var(--d-accent-line);
}

.esb-meta[b-xaag0gawto] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.esb-lbl[b-xaag0gawto] {
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.esb-val[b-xaag0gawto] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .esb-val.is-placeholder[b-xaag0gawto] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.esb-input[b-xaag0gawto] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

    .esb-input[b-xaag0gawto]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.esb-caret[b-xaag0gawto] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .18s, color .14s;
}

    .esb-caret.is-open[b-xaag0gawto] {
        transform: rotate(180deg);
        color: var(--d-accent);
    }

.esb-clear[b-xaag0gawto] {
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 0;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background .12s, color .12s;
}

    .esb-clear:hover[b-xaag0gawto] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .esb-clear svg[b-xaag0gawto] {
        width: 12px;
        height: 12px;
    }

/* ───────── Dropdown popups ───────── */
.esb-overlay[b-xaag0gawto] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.esb-pop[b-xaag0gawto] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.05);
    padding: 12px;
    animation: esb-pop-in-b-xaag0gawto 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .esb-pop.esb-pop-left[b-xaag0gawto] {
        right: auto;
        width: 420px;
    }

    .esb-pop.esb-pop-right[b-xaag0gawto] {
        left: auto;
        right: 0;
        width: 240px;
    }
}

@keyframes esb-pop-in-b-xaag0gawto {
    from { opacity: 0; transform: translateY(-6px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.esb-pop-hd[b-xaag0gawto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .esb-pop-hd p[b-xaag0gawto] {
        margin: 0;
        font-size: 10px;
        font-weight: 700;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.09em;
    }

.esb-pop-clear[b-xaag0gawto] {
    border: 0;
    background: transparent;
    color: var(--d-accent);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

    .esb-pop-clear:hover[b-xaag0gawto] {
        background: var(--d-accent-soft);
    }

.esb-chips[b-xaag0gawto] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

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

    .esb-chip:hover[b-xaag0gawto] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: var(--d-accent-line);
    }

    .esb-chip.is-selected[b-xaag0gawto] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.esb-list[b-xaag0gawto] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.esb-list-item[b-xaag0gawto] {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .esb-list-item:hover[b-xaag0gawto] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .esb-list-item.is-selected[b-xaag0gawto] {
        background: var(--d-accent-grad);
        color: #fff;
    }

/* ───────── Smart popular-destination rail ───────── */
.esb-rail[b-xaag0gawto] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    min-width: 0;
}

.esb-rail-lbl[b-xaag0gawto] {
    display: none;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--d-ink-4);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

@media (min-width: 768px) {
    .esb-rail-lbl[b-xaag0gawto] {
        display: inline;
    }
}

.esb-rail-track[b-xaag0gawto] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 93%, transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 93%, transparent);
}

    .esb-rail-track[b-xaag0gawto]::-webkit-scrollbar {
        display: none;
    }

.esb-rail-chip[b-xaag0gawto] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 11px;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, color .14s, border-color .14s, transform .12s, box-shadow .14s;
}

    .esb-rail-chip .fl[b-xaag0gawto] {
        font-size: 14px;
        line-height: 1;
    }

    .esb-rail-chip:hover[b-xaag0gawto] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: var(--d-accent-line);
        transform: translateY(-1px);
    }

    .esb-rail-chip.is-selected[b-xaag0gawto] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 3px 10px -3px rgba(255, 107, 0, 0.5);
    }

/* ───────── Submit — inline trong hàng ô ───────── */
.esb-submit[b-xaag0gawto] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.2), 0 8px 18px -6px rgba(255, 107, 0, 0.5);
    transition: background .14s, transform .08s, box-shadow .14s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .esb-submit[b-xaag0gawto] {
        width: auto;
        height: auto;
        align-self: stretch;
        white-space: nowrap;
    }
}

.esb-submit:hover[b-xaag0gawto] {
    background: var(--d-accent-grad-hover);
    box-shadow: 0 2px 4px rgba(255, 107, 0, 0.24), 0 12px 24px -6px rgba(255, 107, 0, 0.6);
    transform: translateY(-1px);
}

.esb-submit:active[b-xaag0gawto] {
    transform: translateY(0);
}

.esb-submit svg[b-xaag0gawto] {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .esb-field[b-xaag0gawto],
    .esb-caret[b-xaag0gawto],
    .esb-rail-chip[b-xaag0gawto],
    .esb-submit[b-xaag0gawto],
    .esb-pop[b-xaag0gawto] {
        transition: none;
        animation: none;
    }

    .esb-rail-chip:hover[b-xaag0gawto],
    .esb-submit:hover[b-xaag0gawto] {
        transform: none;
    }
}
/* /src/Shared/Search/FlightSearchBox.razor.rz.scp.css */
/* FlightSearchBox — Manager Dashboard v4 theme */
.fsb-root[b-x08ywujan2] {
    --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-x08ywujan2] {
        padding: 14px;
    }
}

@media (min-width: 768px) {
    .fsb-root[b-x08ywujan2] {
        padding: 18px 20px;
    }
}

.fsb-root.fsb-vertical[b-x08ywujan2] {
    padding: 14px;
}

/* ── Trip type toggle ── */
.fsb-trip-toggle[b-x08ywujan2] {
    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-x08ywujan2]::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-x08ywujan2]::before {
    transform: translateX(100%);
}

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

    .fsb-trip-btn.is-active[b-x08ywujan2] {
        color: var(--d-accent);
    }

    .fsb-trip-btn svg[b-x08ywujan2] {
        width: 14px;
        height: 14px;
        transition: transform .25s ease;
    }

    .fsb-trip-btn.is-active svg[b-x08ywujan2] {
        transform: scale(1.05);
    }

.fsb-vertical .fsb-trip-btn[b-x08ywujan2] {
    padding: 5px 12px;
    font-size: 11.5px;
}

/* ── Field row ── */
.fsb-row[b-x08ywujan2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

@media (min-width: 1024px) {
    .fsb-row.fsb-row-horiz[b-x08ywujan2] {
        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-x08ywujan2] {
        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-x08ywujan2]::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-x08ywujan2],
    .fsb-row.fsb-row-horiz > .fsb-airport-pair[b-x08ywujan2] {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        position: relative;
    }

    .fsb-row.fsb-row-horiz > .fsb-field:hover[b-x08ywujan2] {
        border-color: transparent;
    }

    .fsb-row.fsb-row-horiz > .fsb-field.is-error[b-x08ywujan2] {
        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-x08ywujan2] {
        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-x08ywujan2] {
        padding-right: 22px;
    }

    .fsb-row.fsb-row-horiz > .fsb-airport-pair > .fsb-field:last-child[b-x08ywujan2] {
        padding-left: 22px;
    }

    /* Strip AirportSelector's own card chrome — container provides it */
    .fsb-row.fsb-row-horiz[b-x08ywujan2]  .aps-trigger {
        border-color: transparent;
        background: transparent;
        border-radius: 10px;
        min-height: 60px;
    }

    .fsb-row.fsb-row-horiz[b-x08ywujan2]  .aps-trigger:hover {
        background: var(--d-accent-soft);
    }

    .fsb-row.fsb-row-horiz[b-x08ywujan2]  .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-x08ywujan2]::before,
    .fsb-row.fsb-row-horiz > .fsb-airport-pair + .fsb-field[b-x08ywujan2]::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-x08ywujan2] {
    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-x08ywujan2] {
        border-color: #dde1e8;
    }

    .fsb-field.is-open[b-x08ywujan2] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

    .fsb-field.is-error[b-x08ywujan2] {
        border-color: var(--d-danger);
        background: var(--d-danger-soft);
        animation: fsb-shake-b-x08ywujan2 0.5s ease-in-out;
    }

@keyframes fsb-shake-b-x08ywujan2 {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-3px); }
    30%, 70% { transform: translateX(3px); }
}

.fsb-field-error-text[b-x08ywujan2] {
    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-x08ywujan2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

@media (min-width: 1024px) {
    .fsb-airport-pair[b-x08ywujan2] {
        flex-direction: row;
        gap: 0;
    }
}

.fsb-airport-pair > .fsb-field[b-x08ywujan2] {
    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-x08ywujan2],
.fsb-airport-stack > .fsb-field[b-x08ywujan2] {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .fsb-airport-pair > .fsb-field:hover[b-x08ywujan2],
    .fsb-airport-stack > .fsb-field:hover[b-x08ywujan2] {
        border-color: transparent;
    }

    .fsb-airport-pair > .fsb-field.is-error[b-x08ywujan2],
    .fsb-airport-stack > .fsb-field.is-error[b-x08ywujan2] {
        background: transparent;
        border-color: transparent;
    }

.fsb-airport-pair-divider[b-x08ywujan2] {
    width: 1px;
    background: var(--d-line);
    margin: 10px 0;
    flex-shrink: 0;
}

.fsb-swap-btn[b-x08ywujan2] {
    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-x08ywujan2] {
        /* Desktop horizontal: overlap ngang giữa 2 ô */
        margin: 0 -16px;
    }
}

    .fsb-swap-btn:hover[b-x08ywujan2] {
        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-x08ywujan2] {
        transform: rotate(180deg);
    }

    .fsb-swap-btn svg[b-x08ywujan2] {
        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-x08ywujan2] {
        transform: rotate(90deg);
    }
}

/* Vertical airport pair */
.fsb-airport-stack[b-x08ywujan2] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fsb-swap-btn-stack[b-x08ywujan2] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

    .fsb-swap-btn-stack.is-rotating[b-x08ywujan2] {
        transform: translate(-50%, -50%) rotate(180deg);
    }

/* Date wrapper — let NmDatePicker render inside */
.fsb-field-date[b-x08ywujan2] {
    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-x08ywujan2]  .range-trigger.dp-open,
.fsb-field-date[b-x08ywujan2]  .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-x08ywujan2]  .field-active::after {
    color: var(--d-accent);
}

/* FIX ô "Ngày đi": NmDatePicker mặc định xếp LeadingIcon CHỒNG LÊN TRÊN label (flex-col)
   → lệch hàng so với "Ngày về" và các ô khác. Đưa icon sang TRÁI, bọc tile giống .fsb-ico. */
.fsb-field-date[b-x08ywujan2]  .range-trigger .date-field:has(.dp-field-icon),
.fsb-field-date[b-x08ywujan2]  .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-x08ywujan2]  .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-x08ywujan2]  .date-field:has(.dp-field-icon) .dp-label,
.fsb-field-date[b-x08ywujan2]  .single-trigger > div:has(.dp-field-icon) .dp-label {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.fsb-field-date[b-x08ywujan2]  .date-field:has(.dp-field-icon) .dp-value,
.fsb-field-date[b-x08ywujan2]  .single-trigger > div:has(.dp-field-icon) .dp-value {
    grid-column: 2;
    grid-row: 2;
}

/* ── Passenger trigger ── */
.fsb-trigger[b-x08ywujan2] {
    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-x08ywujan2] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.fsb-ico[b-x08ywujan2] {
    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-x08ywujan2] {
        width: 14px;
        height: 14px;
    }

.fsb-field.is-open .fsb-ico[b-x08ywujan2] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.fsb-meta[b-x08ywujan2] {
    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-x08ywujan2] {
    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-x08ywujan2] {
    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-x08ywujan2] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .fsb-caret.is-open[b-x08ywujan2] {
        transform: rotate(180deg);
    }

/* ── Pop / Pax dropdown ── */
.fsb-overlay[b-x08ywujan2] {
    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-x08ywujan2] {
    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-x08ywujan2 0.15s ease-out;
}

@keyframes fsb-pop-in-b-x08ywujan2 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Pax stepper ── */
.fsb-pax-row[b-x08ywujan2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

    .fsb-pax-row + .fsb-pax-row[b-x08ywujan2] {
        border-top: 1px solid var(--d-line-2);
    }

.fsb-pax-info[b-x08ywujan2] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fsb-pax-ico[b-x08ywujan2] {
    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-x08ywujan2] {
        background: #eff6ff;
        color: #2563eb;
        border-color: #bfdbfe;
    }

    .fsb-pax-ico.is-pink[b-x08ywujan2] {
        background: #fdf2f8;
        color: #db2777;
        border-color: #fbcfe8;
    }

    .fsb-pax-ico svg[b-x08ywujan2] {
        width: 16px;
        height: 16px;
    }

.fsb-pax-text p[b-x08ywujan2] {
    margin: 0;
}

.fsb-pax-name[b-x08ywujan2] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.fsb-pax-desc[b-x08ywujan2] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.fsb-pax-ctrl[b-x08ywujan2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fsb-step-btn[b-x08ywujan2] {
    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-x08ywujan2] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .fsb-step-btn:disabled[b-x08ywujan2] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .fsb-step-btn svg[b-x08ywujan2] {
        width: 12px;
        height: 12px;
    }

.fsb-step-val[b-x08ywujan2] {
    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-x08ywujan2] {
    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-x08ywujan2] {
    font-size: 11.5px;
    color: var(--d-ink-3);
}

.fsb-pax-done[b-x08ywujan2] {
    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-x08ywujan2] {
        background: var(--d-accent-grad-hover);
    }

/* ── Error banner ── */
.fsb-err-banner[b-x08ywujan2] {
    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-x08ywujan2 0.5s ease-in-out;
}

    .fsb-err-banner svg[b-x08ywujan2] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ── Submit ── */
.fsb-actions[b-x08ywujan2] {
    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-x08ywujan2] {
    display: none;
}

@media (min-width: 1024px) {
    .fsb-fly-route[b-x08ywujan2] {
        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-x08ywujan2]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-top: 2px dashed rgba(255, 107, 0, 0.38);
    }

    .fsb-fly-route[b-x08ywujan2]::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-x08ywujan2 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
}

@keyframes fsb-fly-b-x08ywujan2 {
    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-x08ywujan2] {
        margin-left: auto;
    }
}

.fsb-actions.is-vertical[b-x08ywujan2] {
    justify-content: center;
}

.fsb-tagline[b-x08ywujan2] {
    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-x08ywujan2] {
        display: inline-flex;
    }
}

.fsb-tagline b[b-x08ywujan2] {
    color: var(--d-accent);
    font-weight: 600;
}

.fsb-submit[b-x08ywujan2] {
    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-x08ywujan2] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fsb-submit-txt[b-x08ywujan2] {
    position: relative;
    z-index: 1;
}

.fsb-submit:hover .fsb-submit-plane[b-x08ywujan2] {
    transform: translate(3px, -3px) rotate(8deg);
}

.fsb-submit:hover[b-x08ywujan2] {
    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-x08ywujan2] {
    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-x08ywujan2] {
    left: 125%;
}

@media (min-width: 768px) {
    .fsb-submit[b-x08ywujan2] {
        width: auto;
    }
}

.fsb-submit:hover[b-x08ywujan2] {
    background: var(--d-accent-grad-hover);
}

.fsb-submit:active[b-x08ywujan2] {
    transform: translateY(1px);
}

.fsb-submit svg[b-x08ywujan2] {
    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-x08ywujan2] {
    --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-x08ywujan2] { padding: 0; } }
@media (min-width: 768px) { .fsb-root.fsb-minimal[b-x08ywujan2] { padding: 0; } }

/* Trip toggle — cleaner active in brand */
.fsb-minimal .fsb-trip-btn.is-active[b-x08ywujan2] { 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-x08ywujan2] {
        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-x08ywujan2] {
        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-x08ywujan2]  .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-x08ywujan2] { 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-x08ywujan2],
.fsb-minimal .fsb-airport-stack > .fsb-field:hover[b-x08ywujan2] { border-color: transparent; }
.fsb-minimal .fsb-field.is-open[b-x08ywujan2] {
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.fsb-minimal .fsb-field-date[b-x08ywujan2]  .range-trigger.dp-open,
.fsb-minimal .fsb-field-date[b-x08ywujan2]  .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-x08ywujan2],
.fsb-minimal .fsb-step-btn:hover:not(:disabled)[b-x08ywujan2] { border-color: var(--d-accent-soft); }
.fsb-minimal .fsb-field.is-open .fsb-ico[b-x08ywujan2],
.fsb-minimal .fsb-pax-ico[b-x08ywujan2] { border-color: transparent; }

/* Search CTA — prominent, premium subtle gradient, modern rounded */
.fsb-minimal .fsb-submit[b-x08ywujan2] {
    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-x08ywujan2] {
    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-x08ywujan2] { transform: translateY(0); }

.fsb-minimal .fsb-pax-done[b-x08ywujan2] {
    background: var(--d-accent);
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.25);
}
.fsb-minimal .fsb-pax-done:hover[b-x08ywujan2] { background: var(--d-accent-grad-hover); }
/* /src/Shared/Search/GlobalSearchBox.razor.rz.scp.css */
/* GlobalSearchBox — ô tìm kiếm tổng hợp ở header (dùng chung mọi khu).
   CSS isolation nên các luật dưới đây chỉ chạm vào markup của chính component. */

.nm-gsearch-root[b-ccbgpt43lv] {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 36rem;
    position: relative;
}

.nm-gsearch[b-ccbgpt43lv] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    background: rgba(248, 249, 251, 0.85);
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    transition: background .15s, border-color .15s, box-shadow .15s;
    cursor: text;
}

@media (min-width: 640px) {
    .nm-gsearch[b-ccbgpt43lv] {
        gap: 8px;
        height: 38px;
        padding: 0 12px;
    }
}

.nm-gsearch:hover[b-ccbgpt43lv] {
    background: #fff;
    border-color: #D1D5DB;
}

.nm-gsearch:focus-within[b-ccbgpt43lv] {
    background: #fff;
    border-color: #FF6B00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .15);
}

.nm-gsearch-ico[b-ccbgpt43lv] {
    color: #9CA3AF;
    flex-shrink: 0;
    transition: color .15s;
}

.nm-gsearch:focus-within .nm-gsearch-ico[b-ccbgpt43lv] {
    color: #FF6B00;
}

.nm-gsearch input[b-ccbgpt43lv] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    /* 16px trên thiết bị cảm ứng: dưới 16px Safari/iOS TỰ PHÓNG TO trang khi focus ô nhập. */
    font-size: 16px;
    color: #1F2937;
    font-family: inherit;
}

@media (pointer: fine) {
    .nm-gsearch input[b-ccbgpt43lv] {
        font-size: 12.5px;
    }
}

@media (pointer: fine) and (min-width: 640px) {
    .nm-gsearch input[b-ccbgpt43lv] {
        font-size: 13.5px;
    }
}

.nm-gsearch input[b-ccbgpt43lv]::placeholder {
    color: #9CA3AF;
}

.nm-gsearch input[b-ccbgpt43lv]::-webkit-search-cancel-button {
    display: none;
}

.nm-gsearch-clear[b-ccbgpt43lv] {
    flex-shrink: 0;
    padding: 2px;
    color: #9CA3AF;
    border-radius: 4px;
    transition: color .15s;
}

.nm-gsearch-clear:hover[b-ccbgpt43lv] {
    color: #4B5563;
}

.nm-gsearch-kbd[b-ccbgpt43lv] {
    display: none;
    align-items: center;
    padding: 1px 6px;
    height: 20px;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    background: #fff;
    color: #9CA3AF;
    font-size: 10.5px;
    font-weight: 600;
    font-family: ui-monospace, 'SF Mono', monospace;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .nm-gsearch-kbd[b-ccbgpt43lv] {
        display: inline-flex;
    }
}

.nm-gsearch:focus-within .nm-gsearch-kbd[b-ccbgpt43lv] {
    opacity: 0;
}

/* Panel kết quả. Luôn `absolute` bám theo ô search — KHÔNG dùng `fixed`: với position:fixed thì
   `top: 100%` tính theo VIEWPORT chứ không theo ô search, panel rơi xuống dưới đáy màn hình. */
.nm-gsearch-panel[b-ccbgpt43lv] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    z-index: 50;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06);
    border-radius: 16px;
    overflow-y: auto;
    max-height: 70vh;
}
/* /src/Shared/Search/HotelSearchBox.razor.rz.scp.css */
/* HotelSearchBox — Manager Dashboard v4 theme */
.hsb-root[b-3qug7unrqw] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    width: 100%;
    padding: 16px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .hsb-root[b-3qug7unrqw] {
        padding: 18px 20px;
    }
}

.hsb-row[b-3qug7unrqw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 1024px) {
    .hsb-row[b-3qug7unrqw] {
        grid-template-columns: 1.3fr 1.2fr 0.8fr 1fr;
        gap: 12px;
    }
}

.hsb-field[b-3qug7unrqw] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .hsb-field:hover[b-3qug7unrqw] {
        border-color: #dde1e8;
    }

    .hsb-field.is-open[b-3qug7unrqw] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.hsb-trigger[b-3qug7unrqw] {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.hsb-trigger-inner[b-3qug7unrqw] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.hsb-ico[b-3qug7unrqw] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .hsb-ico svg[b-3qug7unrqw] {
        width: 14px;
        height: 14px;
    }

.hsb-field.is-open .hsb-ico[b-3qug7unrqw],
.hsb-field:focus-within .hsb-ico[b-3qug7unrqw] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.hsb-meta[b-3qug7unrqw] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
    flex: 1;
}

.hsb-lbl[b-3qug7unrqw] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.hsb-val[b-3qug7unrqw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .hsb-val.is-placeholder[b-3qug7unrqw] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.hsb-input[b-3qug7unrqw] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

    .hsb-input[b-3qug7unrqw]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.hsb-caret[b-3qug7unrqw] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .hsb-caret.is-open[b-3qug7unrqw] {
        transform: rotate(180deg);
    }

.hsb-clear-inline[b-3qug7unrqw] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--d-surface-2);
    color: var(--d-ink-3);
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}

    .hsb-clear-inline:hover[b-3qug7unrqw] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .hsb-clear-inline svg[b-3qug7unrqw] {
        width: 12px;
        height: 12px;
    }

.hsb-overlay[b-3qug7unrqw] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.hsb-pop[b-3qug7unrqw] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    padding: 12px;
    animation: hsb-pop-in-b-3qug7unrqw 0.15s ease-out;
    max-height: 420px;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .hsb-pop.hsb-pop-right[b-3qug7unrqw] {
        left: auto;
        right: 0;
        width: 320px;
    }

    .hsb-pop.hsb-pop-stars[b-3qug7unrqw] {
        left: auto;
        right: 0;
        width: 240px;
    }

    .hsb-pop.hsb-pop-city[b-3qug7unrqw] {
        width: 380px;
    }
}

@keyframes hsb-pop-in-b-3qug7unrqw {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.hsb-pop-hd[b-3qug7unrqw] {
    margin-bottom: 8px;
}

    .hsb-pop-hd p[b-3qug7unrqw] {
        margin: 0;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--d-ink-3);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0 4px;
    }

.hsb-chips[b-3qug7unrqw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hsb-chip[b-3qug7unrqw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    color: var(--d-ink-2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

    .hsb-chip:hover[b-3qug7unrqw] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .hsb-chip.is-selected[b-3qug7unrqw] {
        background: var(--d-accent-grad);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18);
    }

.hsb-city-item[b-3qug7unrqw] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
}

    .hsb-city-item:hover[b-3qug7unrqw] {
        background: var(--d-surface-2);
    }

.hsb-city-emoji[b-3qug7unrqw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-surface-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.hsb-city-info[b-3qug7unrqw] {
    min-width: 0;
    flex: 1;
}

    .hsb-city-info p[b-3qug7unrqw] {
        margin: 0;
    }

.hsb-city-name[b-3qug7unrqw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hsb-city-region[b-3qug7unrqw] {
    font-size: 11px;
    color: var(--d-ink-3);
    margin-top: 1px;
}

.hsb-city-count[b-3qug7unrqw] {
    font-size: 10.5px;
    color: var(--d-ink-4);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

.hsb-city-empty[b-3qug7unrqw] {
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
    padding: 16px 0;
}

.hsb-city-custom[b-3qug7unrqw] {
    border-top: 1px solid var(--d-line-2);
    margin-top: 6px;
    padding-top: 6px;
}

.hsb-stepper-row[b-3qug7unrqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

    .hsb-stepper-row + .hsb-stepper-row[b-3qug7unrqw] {
        border-top: 1px solid var(--d-line-2);
    }

.hsb-stepper-info[b-3qug7unrqw] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hsb-stepper-ico[b-3qug7unrqw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid #ffe0c7;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .hsb-stepper-ico svg[b-3qug7unrqw] {
        width: 16px;
        height: 16px;
    }

.hsb-stepper-text p[b-3qug7unrqw] {
    margin: 0;
}

.hsb-stepper-name[b-3qug7unrqw] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.hsb-stepper-desc[b-3qug7unrqw] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.hsb-stepper-ctrl[b-3qug7unrqw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hsb-step-btn[b-3qug7unrqw] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--d-line);
    background: var(--d-surface);
    color: var(--d-ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

    .hsb-step-btn:hover:not(:disabled)[b-3qug7unrqw] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .hsb-step-btn:disabled[b-3qug7unrqw] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .hsb-step-btn svg[b-3qug7unrqw] {
        width: 12px;
        height: 12px;
    }

.hsb-step-val[b-3qug7unrqw] {
    width: 28px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
}

.hsb-actions[b-3qug7unrqw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hsb-tagline[b-3qug7unrqw] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

@media (min-width: 768px) {
    .hsb-tagline[b-3qug7unrqw] {
        display: inline-flex;
    }
}

.hsb-tagline b[b-3qug7unrqw] {
    color: var(--d-accent);
    font-weight: 600;
}

.hsb-submit[b-3qug7unrqw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, transform .08s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .hsb-submit[b-3qug7unrqw] {
        width: auto;
    }
}

.hsb-submit:hover[b-3qug7unrqw] {
    background: var(--d-accent-grad-hover);
}

.hsb-submit:active[b-3qug7unrqw] {
    transform: translateY(1px);
}

.hsb-submit svg[b-3qug7unrqw] {
    width: 16px;
    height: 16px;
}

/* Wrap NmDatePicker neatly inside field */
.hsb-field-date[b-3qug7unrqw] {
    overflow: visible;
}
/* /src/Shared/Search/NmSearchBox.razor.rz.scp.css */
/* NmSearchBox — Manager Dashboard v4 theme (warm-neutral + cam accent) */
.nmsb-root[b-txgwpqw24a] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-r: 12px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Glass nổi: kính mờ ĐỤC, rõ ràng — blur nền trời nhẹ phía sau (banner hero) */
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.86) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
                0 0 0 1px rgba(16, 24, 40, 0.04),
                0 2px 6px rgba(16, 24, 40, 0.07),
                0 26px 54px -20px rgba(16, 24, 40, 0.34);
    overflow: visible;
    color: var(--d-ink);
    position: relative;
    z-index: 30;
}

/* Không khí ấm hiện đại: quầng cam rất nhẹ góc trên-trái, đẩy thẻ khỏi cảm giác phẳng trắng */
.nmsb-root[b-txgwpqw24a]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(130% 90% at 0% 0%, rgba(255, 107, 0, 0.07) 0%, transparent 46%);
}

.nmsb-tabs[b-txgwpqw24a] {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(244, 245, 248, 0.82);
    border-bottom: 1px solid rgba(16, 24, 40, 0.06);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: hidden;
}

.nmsb-tab[b-txgwpqw24a] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 8px;
    cursor: pointer;
    color: var(--d-ink-3);
    background: transparent;
    transition: background .15s, color .15s;
    position: relative;
}

    .nmsb-tab:hover[b-txgwpqw24a] {
        background: rgba(255, 255, 255, 0.6);
        color: var(--d-ink-2);
    }

    .nmsb-tab.is-active[b-txgwpqw24a] {
        background: rgba(255, 255, 255, 0.96);
        color: var(--d-accent);
        position: relative;
        z-index: 1;
        box-shadow: 0 12px 24px -16px rgba(255, 107, 0, 0.55);
    }

    .nmsb-tab.is-active .nmsb-tab-lbl[b-txgwpqw24a] {
        font-weight: 700;
    }

@media (min-width: 640px) {
    .nmsb-tab[b-txgwpqw24a] {
        flex-direction: row;
        gap: 8px;
        padding: 12px 14px;
        min-height: 56px;
    }
}

.nmsb-tab-ico[b-txgwpqw24a] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #eef0f4;
    border: 1px solid transparent;
    color: var(--d-ink-3);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
    flex-shrink: 0;
}

.nmsb-tab:hover .nmsb-tab-ico[b-txgwpqw24a] {
    color: var(--d-ink-2);
    transform: translateY(-1px);
}

/* Tab đang chọn: chip cam gradient + icon trắng — hiện đại, nổi bật */
.nmsb-tab.is-active .nmsb-tab-ico[b-txgwpqw24a] {
    background: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 5px 12px -3px rgba(255, 107, 0, 0.5);
}

.nmsb-tab-ico svg[b-txgwpqw24a] {
    width: 16px;
    height: 16px;
}

.nmsb-tab-lbl[b-txgwpqw24a] {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .nmsb-tab-lbl[b-txgwpqw24a] {
        font-size: 14px;
    }
}

.nmsb-tab-underline[b-txgwpqw24a] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    width: 40px;
    background: var(--d-accent-grad);
    border-radius: 2px 2px 0 0;
}

.nmsb-body[b-txgwpqw24a] {
    width: 100%;
    background: transparent;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    overflow: visible;
    position: relative;
}

/* ── Khi FlightSearchBox nằm trong thẻ glass: ô trường mờ nhẹ để hoà vào kính,
   không thành "hộp trắng đặc trong hộp". Chỉ áp dụng trong NmSearchBox →
   các chỗ dùng FlightSearchBox độc lập (dashboard) giữ nguyên. ── */
@media (min-width: 1024px) {
    .nmsb-body[b-txgwpqw24a]  .fsb-row.fsb-row-horiz {
        background: rgba(255, 255, 255, 0.95);
        border-color: var(--d-line);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                    0 1px 2px rgba(16, 24, 40, 0.04),
                    0 12px 26px -14px rgba(16, 24, 40, 0.24);
    }
}

/* Pill chọn Khứ hồi/Một chiều — nền rõ, viền xám nhạt */
.nmsb-body[b-txgwpqw24a]  .fsb-trip-toggle {
    background: rgba(244, 245, 248, 0.9);
    border-color: var(--d-line);
}

.nmsb-body[b-txgwpqw24a]  .fsb-trip-toggle::before {
    background: #ffffff;
}
/* /src/Shared/Search/TourSearchBox.razor.rz.scp.css */
/* TourSearchBox — Manager Dashboard v4 theme */
.tsb-root[b-vsxr55efk5] {
    --d-surface: #ffffff;
    --d-surface-2: #f4f5f8;
    --d-line: #eceef2;
    --d-line-2: #f1f2f5;
    --d-ink: #121212;
    --d-ink-2: #3d4250;
    --d-ink-3: #7b8190;
    --d-ink-4: #a5abb8;
    --d-accent: #ff6b00;
    --d-accent-soft: #fff2e8;
    --d-accent-grad: linear-gradient(135deg, #ff7d1f 0%, #ff6b00 100%);
    --d-accent-grad-hover: linear-gradient(135deg, #ff6b00 0%, #e85f00 100%);
    --d-r: 12px;

    width: 100%;
    padding: 16px;
    color: var(--d-ink);
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .tsb-root[b-vsxr55efk5] {
        padding: 18px 20px;
    }
}

.tsb-row[b-vsxr55efk5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .tsb-row[b-vsxr55efk5] {
        grid-template-columns: 1.5fr 1fr;
        gap: 12px;
    }
}

.tsb-field[b-vsxr55efk5] {
    position: relative;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    transition: border-color .12s, box-shadow .12s;
}

    .tsb-field:hover[b-vsxr55efk5] {
        border-color: #dde1e8;
    }

    .tsb-field.is-open[b-vsxr55efk5],
    .tsb-field:focus-within[b-vsxr55efk5] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.tsb-trigger[b-vsxr55efk5] {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: var(--d-r);
    text-align: left;
    color: var(--d-ink);
    outline: none;
}

.tsb-trigger-inner[b-vsxr55efk5] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.tsb-ico[b-vsxr55efk5] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border: 1px solid var(--d-line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

    .tsb-ico svg[b-vsxr55efk5] {
        width: 14px;
        height: 14px;
    }

.tsb-field.is-open .tsb-ico[b-vsxr55efk5],
.tsb-field:focus-within .tsb-ico[b-vsxr55efk5] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.tsb-meta[b-vsxr55efk5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.tsb-lbl[b-vsxr55efk5] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

.tsb-val[b-vsxr55efk5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .tsb-val.is-placeholder[b-vsxr55efk5] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.tsb-input[b-vsxr55efk5] {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    padding: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

    .tsb-input[b-vsxr55efk5]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.tsb-caret[b-vsxr55efk5] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .tsb-caret.is-open[b-vsxr55efk5] {
        transform: rotate(180deg);
    }

.tsb-overlay[b-vsxr55efk5] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.tsb-pop[b-vsxr55efk5] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--d-surface);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.18);
    padding: 8px;
    animation: tsb-pop-in-b-vsxr55efk5 0.15s ease-out;
}

@media (min-width: 768px) {
    .tsb-pop.tsb-pop-right[b-vsxr55efk5] {
        left: auto;
        right: 0;
        width: 260px;
    }
}

@keyframes tsb-pop-in-b-vsxr55efk5 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tsb-list[b-vsxr55efk5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 280px;
    overflow-y: auto;
}

.tsb-list-item[b-vsxr55efk5] {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--d-ink-2);
    font-size: 14px;
    font-weight: 500;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .tsb-list-item:hover[b-vsxr55efk5] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

    .tsb-list-item.is-selected[b-vsxr55efk5] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        font-weight: 600;
    }

.tsb-actions[b-vsxr55efk5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tsb-tagline[b-vsxr55efk5] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
    margin: 0;
}

@media (min-width: 768px) {
    .tsb-tagline[b-vsxr55efk5] {
        display: inline-flex;
    }
}

.tsb-tagline b[b-vsxr55efk5] {
    color: var(--d-accent);
    font-weight: 600;
}

.tsb-submit[b-vsxr55efk5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    border-radius: var(--d-r);
    border: 0;
    background: var(--d-accent-grad);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(255, 107, 0, 0.18), 0 4px 12px -2px rgba(255, 107, 0, 0.22);
    transition: filter .12s, transform .08s;
    width: 100%;
    letter-spacing: -0.005em;
}

@media (min-width: 768px) {
    .tsb-submit[b-vsxr55efk5] {
        width: auto;
    }
}

.tsb-submit:hover[b-vsxr55efk5] {
    background: var(--d-accent-grad-hover);
}

.tsb-submit:active[b-vsxr55efk5] {
    transform: translateY(1px);
}

.tsb-submit svg[b-vsxr55efk5] {
    width: 16px;
    height: 16px;
}
/* /src/Shared/Search/VisaSearchBox.razor.rz.scp.css */
/* VisaSearchBox — Manager Dashboard v4 theme */
.vsb-root[b-l7t6zxxd2n] {
    --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-l7t6zxxd2n] {
        padding: 18px 20px;
    }
}

.vsb-row[b-l7t6zxxd2n] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .vsb-row[b-l7t6zxxd2n] {
        grid-template-columns: 1.2fr 1.2fr 0.8fr;
        gap: 12px;
    }
}

.vsb-field[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        border-color: #dde1e8;
    }

    .vsb-field.is-open[b-l7t6zxxd2n] {
        border-color: var(--d-accent);
        box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
    }

.vsb-trigger[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.vsb-ico[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        width: 14px;
        height: 14px;
    }

.vsb-field.is-open .vsb-ico[b-l7t6zxxd2n],
.vsb-field:focus-within .vsb-ico[b-l7t6zxxd2n] {
    background: var(--d-surface-2);
    color: var(--d-ink-2);
    border-color: #ffe0c7;
}

.vsb-meta[b-l7t6zxxd2n] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.vsb-lbl[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        color: var(--d-ink-4);
        font-weight: 500;
    }

.vsb-input[b-l7t6zxxd2n] {
    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-l7t6zxxd2n]::placeholder {
        color: var(--d-ink-4);
        font-weight: 400;
    }

.vsb-caret[b-l7t6zxxd2n] {
    width: 16px;
    height: 16px;
    color: var(--d-ink-4);
    flex-shrink: 0;
    transition: transform .15s;
}

    .vsb-caret.is-open[b-l7t6zxxd2n] {
        transform: rotate(180deg);
    }

.vsb-clear-inline[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
    }

    .vsb-clear-inline svg[b-l7t6zxxd2n] {
        width: 12px;
        height: 12px;
    }

.vsb-pop[b-l7t6zxxd2n] {
    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-l7t6zxxd2n 0.15s ease-out;
}

@media (min-width: 768px) {
    .vsb-pop.vsb-pop-left[b-l7t6zxxd2n] {
        right: auto;
        width: 380px;
    }

    .vsb-pop.vsb-pop-right[b-l7t6zxxd2n] {
        left: auto;
        right: 0;
        width: 280px;
    }
}

@keyframes vsb-pop-in-b-l7t6zxxd2n {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vsb-pop-hd[b-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .vsb-pop-hd p[b-l7t6zxxd2n] {
        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-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        background: var(--d-accent-soft);
    }

    .vsb-pop-clear svg[b-l7t6zxxd2n] {
        width: 10px;
        height: 10px;
    }

.vsb-loading[b-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

.vsb-spinner[b-l7t6zxxd2n] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--d-accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: vsb-spin-b-l7t6zxxd2n 0.7s linear infinite;
}

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

.vsb-empty[b-l7t6zxxd2n] {
    text-align: center;
    color: var(--d-ink-3);
    font-size: 12.5px;
    padding: 12px 0;
}

.vsb-chips[b-l7t6zxxd2n] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vsb-chip[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .vsb-chip.is-selected[b-l7t6zxxd2n] {
        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-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vsb-stepper-info[b-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vsb-stepper-ico[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        width: 16px;
        height: 16px;
    }

.vsb-stepper-text p[b-l7t6zxxd2n] {
    margin: 0;
}

.vsb-stepper-name[b-l7t6zxxd2n] {
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.2;
}

.vsb-stepper-desc[b-l7t6zxxd2n] {
    font-size: 11.5px;
    color: var(--d-ink-3);
    margin-top: 2px;
    line-height: 1.2;
}

.vsb-stepper-ctrl[b-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vsb-step-btn[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        background: var(--d-accent-soft);
        border-color: #ffe0c7;
        color: var(--d-accent);
    }

    .vsb-step-btn:disabled[b-l7t6zxxd2n] {
        color: var(--d-ink-4);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .vsb-step-btn svg[b-l7t6zxxd2n] {
        width: 12px;
        height: 12px;
    }

.vsb-step-val[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.vsb-tagline[b-l7t6zxxd2n] {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--d-ink-3);
}

@media (min-width: 768px) {
    .vsb-tagline[b-l7t6zxxd2n] {
        display: inline-flex;
    }
}

.vsb-tagline b[b-l7t6zxxd2n] {
    color: var(--d-accent);
    font-weight: 600;
}

.vsb-submit[b-l7t6zxxd2n] {
    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-l7t6zxxd2n] {
        width: auto;
    }
}

.vsb-submit:hover[b-l7t6zxxd2n] {
    background: var(--d-accent-grad-hover);
}

.vsb-submit:active[b-l7t6zxxd2n] {
    transform: translateY(1px);
}

.vsb-submit svg[b-l7t6zxxd2n] {
    width: 16px;
    height: 16px;
}
/* /src/Shared/ServiceRequests/MyServiceRequestsView.razor.rz.scp.css */
/* My Service Requests — Manager Dashboard v4 theme (ftc-style pattern) */
.mysr-root[b-d57o3xct6m] {
    --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-d57o3xct6m] {
    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-d57o3xct6m] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 260px;
}

.mysr-header-ico[b-d57o3xct6m] {
    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-d57o3xct6m] { width: 22px; height: 22px; }

.mysr-header-titles[b-d57o3xct6m] { min-width: 0; }

.mysr-header-titles h1[b-d57o3xct6m] {
    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-d57o3xct6m] {
    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-d57o3xct6m] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--d-ink-3);
}

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

/* Header pills */
.mysr-hpill[b-d57o3xct6m] {
    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-d57o3xct6m] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--d-ink-4);
    text-transform: uppercase;
}

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

.mysr-hpill--good[b-d57o3xct6m] {
    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-d57o3xct6m] { color: var(--d-good); }

.mysr-hpill--warn[b-d57o3xct6m] {
    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-d57o3xct6m] { color: var(--d-warn); }

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

/* ---------- Filter bar (inside filter card body) ---------- */
.mysr-filterbar[b-d57o3xct6m] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.mysr-pills[b-d57o3xct6m] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.mysr-pill[b-d57o3xct6m] {
    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-d57o3xct6m] {
        background: var(--d-surface-2);
    }

    .mysr-pill.is-active[b-d57o3xct6m] {
        background: var(--d-ink);
        border-color: var(--d-ink);
        color: #fff;
    }

    .mysr-pill.is-active.st-pending[b-d57o3xct6m] {
        background: #92400e;
        border-color: #92400e;
    }

    .mysr-pill.is-active.st-approved[b-d57o3xct6m] {
        background: #166534;
        border-color: #166534;
    }

    .mysr-pill.is-active.st-rejected[b-d57o3xct6m] {
        background: #991b1b;
        border-color: #991b1b;
    }

    .mysr-pill.is-active.st-revision[b-d57o3xct6m] {
        background: #b45309;
        border-color: #b45309;
    }

    .mysr-pill.is-active.st-booking[b-d57o3xct6m] {
        background: #1e40af;
        border-color: #1e40af;
    }

    .mysr-pill.is-active.st-cancel[b-d57o3xct6m] {
        background: var(--d-ink-3);
        border-color: var(--d-ink-3);
    }

.mysr-pill-count[b-d57o3xct6m] {
    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-d57o3xct6m] {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.mysr-filter-actions[b-d57o3xct6m] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.mysr-search[b-d57o3xct6m] {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    width: 220px;
}

    .mysr-search svg[b-d57o3xct6m] {
        position: absolute;
        left: 9px;
        color: var(--d-ink-4);
        pointer-events: none;
    }

    .mysr-search input[b-d57o3xct6m] {
        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-d57o3xct6m]::placeholder {
            color: var(--d-ink-4);
        }

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

.mysr-search-x[b-d57o3xct6m] {
    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-d57o3xct6m] {
        background: var(--d-surface-2);
        color: var(--d-ink);
    }

.mysr-iconbtn[b-d57o3xct6m] {
    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-d57o3xct6m] {
        background: var(--d-surface-2);
    }

    .mysr-iconbtn.has-value[b-d57o3xct6m] {
        border-color: var(--d-ink);
        color: var(--d-ink);
        background: var(--d-accent-soft);
    }

    .mysr-iconbtn svg[b-d57o3xct6m] {
        flex-shrink: 0;
    }

.mysr-iconbtn-badge[b-d57o3xct6m] {
    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-d57o3xct6m] {
    position: relative;
}

.mysr-pop-panel[b-d57o3xct6m] {
    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-d57o3xct6m] {
    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-d57o3xct6m] {
        background: var(--d-surface-2);
    }

    .mysr-check input[type=checkbox][b-d57o3xct6m] {
        accent-color: var(--d-accent);
        cursor: pointer;
    }

.mysr-pop-date[b-d57o3xct6m] {
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .mysr-pop-date label[b-d57o3xct6m] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 11.5px;
        color: var(--d-ink-3);
    }

    .mysr-pop-date input[type=date][b-d57o3xct6m] {
        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-d57o3xct6m] {
            border-color: var(--d-accent);
            box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
        }

.mysr-pop-actions[b-d57o3xct6m] {
    display: flex;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px dashed var(--d-line);
    margin-top: 2px;
}

.mysr-pop-quick[b-d57o3xct6m] {
    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-d57o3xct6m] {
        background: var(--d-accent-soft);
        border-color: var(--d-accent);
        color: var(--d-accent);
    }

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

/* Card (ftc-card style with warm-cream gradient head + icon) */
.mysr-card[b-d57o3xct6m] {
    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-d57o3xct6m] {
    overflow: visible;
}

.mysr-card-hd[b-d57o3xct6m] {
    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-d57o3xct6m] {
    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-d57o3xct6m] {
    font-size: 11px;
    color: var(--d-ink-4);
    margin-left: 2px;
}

.mysr-card-ico[b-d57o3xct6m] {
    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-d57o3xct6m] { width: 15px; height: 15px; }

.mysr-card-count[b-d57o3xct6m] {
    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-d57o3xct6m] {
    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-d57o3xct6m] {
    border-color: var(--d-accent);
    color: var(--d-accent);
    background: var(--d-accent-soft);
}

.mysr-loading[b-d57o3xct6m] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.mysr-spin[b-d57o3xct6m] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--d-accent);
    border-top-color: transparent;
    animation: mysr-spin-b-d57o3xct6m 0.8s linear infinite;
}

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

.mysr-empty[b-d57o3xct6m] {
    text-align: center;
    padding: 56px 16px;
    color: var(--d-ink-3);
}

    .mysr-empty p[b-d57o3xct6m] {
        margin: 0;
    }

        .mysr-empty p.b[b-d57o3xct6m] {
            color: var(--d-ink);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .mysr-empty p.s[b-d57o3xct6m] {
            font-size: 12.5px;
        }

.mysr-tbl-wrap[b-d57o3xct6m] {
    overflow-x: auto;
}

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

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

        .mysr-tbl thead th.center[b-d57o3xct6m] {
            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-d57o3xct6m] {
    background: var(--d-surface-2);
}

.mysr-root.is-ca .mysr-tbl thead th[b-d57o3xct6m] {
    color: var(--d-ink-3);
    font-weight: 600;
    background: transparent;
    border-bottom: 0;
    position: static;
}

    .mysr-tbl tbody td[b-d57o3xct6m] {
        padding: 12px 14px;
        border-bottom: 1px solid var(--d-line-2);
        color: var(--d-ink-2);
    }

        .mysr-tbl tbody td.right[b-d57o3xct6m] {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .mysr-tbl tbody td.center[b-d57o3xct6m] {
            text-align: center;
        }

    .mysr-tbl tbody tr[b-d57o3xct6m] {
        cursor: pointer;
    }

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

.mysr-num[b-d57o3xct6m] {
    color: var(--d-ink-4);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

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

.mysr-meta[b-d57o3xct6m] {
    color: var(--d-ink-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mysr-tag[b-d57o3xct6m] {
    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-d57o3xct6m] {
        background: #f0f9ff;
        color: #0369a1;
        border-color: #bae6fd;
    }

    .mysr-tag.svc-hotel[b-d57o3xct6m] {
        background: #eef2ff;
        color: #4338ca;
        border-color: #c7d2fe;
    }

    .mysr-tag.svc-tour[b-d57o3xct6m] {
        background: var(--d-accent-soft);
        color: var(--d-accent);
        border-color: #ffe0c7;
    }

    .mysr-tag.svc-visa[b-d57o3xct6m] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .mysr-tag.svc-esim[b-d57o3xct6m] {
        background: #f5f3ff;
        color: #6d28d9;
        border-color: #ddd6fe;
    }

    .mysr-tag.svc-fasttrack[b-d57o3xct6m] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-pending[b-d57o3xct6m] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-approved[b-d57o3xct6m],
    .mysr-tag.st-ready[b-d57o3xct6m] {
        background: var(--d-good-soft);
        color: #166534;
        border-color: #bbf7d0;
    }

    .mysr-tag.st-rejected[b-d57o3xct6m] {
        background: #fef2f2;
        color: #991b1b;
        border-color: #fecaca;
    }

    .mysr-tag.st-revision[b-d57o3xct6m] {
        background: var(--d-warn-soft);
        color: #92400e;
        border-color: #fde68a;
    }

    .mysr-tag.st-booking[b-d57o3xct6m] {
        background: #eff6ff;
        color: #1e40af;
        border-color: #bfdbfe;
    }

    .mysr-tag.st-cancel[b-d57o3xct6m] {
        background: var(--d-surface-2);
        color: var(--d-ink-3);
        border-color: var(--d-line);
    }

.mysr-pager[b-d57o3xct6m] {
    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-d57o3xct6m] {
    font-size: 11px;
    font-weight: 600;
}

    .mysr-hint.warn[b-d57o3xct6m] {
        color: var(--d-warn);
    }

    .mysr-hint.good[b-d57o3xct6m] {
        color: var(--d-good);
    }
/* /src/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-xsbealrxuw] {
    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-xsbealrxuw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.srd-head-left[b-xsbealrxuw] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.nm-list-title[b-xsbealrxuw] {
    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-xsbealrxuw] {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--nm-muted);
}

.srd-dot[b-xsbealrxuw] {
    color: var(--nm-border-strong);
}

.srd-head-right[b-xsbealrxuw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.srd-amount[b-xsbealrxuw] {
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.srd-act-row[b-xsbealrxuw] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Bố cục 2 cột ── */
.srd-grid[b-xsbealrxuw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}

.srd-col-main[b-xsbealrxuw],
.srd-col-side[b-xsbealrxuw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .srd-grid[b-xsbealrxuw] {
        grid-template-columns: 1fr;
    }
}

/* ── Thẻ ── */
[b-xsbealrxuw] .srd-card .nm-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.srd-card-ico[b-xsbealrxuw] {
    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-xsbealrxuw] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.srd-card-count[b-xsbealrxuw] {
    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-xsbealrxuw] {
    margin-left: auto;
}

.srd-muted[b-xsbealrxuw] {
    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-xsbealrxuw] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nm-border);
}

.srd-hero-img[b-xsbealrxuw] {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--nm-border);
    flex-shrink: 0;
}

.srd-hero-text[b-xsbealrxuw] {
    min-width: 0;
}

.srd-hero-title[b-xsbealrxuw] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--nm-ink);
}

.srd-hero-sub[b-xsbealrxuw] {
    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-xsbealrxuw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--nm-ink);
    letter-spacing: .01em;
}

    .srd-route i[b-xsbealrxuw] {
        color: var(--nm-accent);
        font-size: 16px;
    }

.srd-chips[b-xsbealrxuw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.srd-chip[b-xsbealrxuw] {
    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-xsbealrxuw] {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--nm-muted);
    }

    .srd-chip b[b-xsbealrxuw] {
        font-size: 13px;
        font-weight: 700;
        color: var(--nm-ink);
    }

/* ── Chặng bay thật (nạp từ đơn hàng) ── */
.srd-legs[b-xsbealrxuw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.srd-leg[b-xsbealrxuw] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface-2);
    padding: 12px 14px;
}

.srd-leg-air[b-xsbealrxuw] {
    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-xsbealrxuw] {
    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-xsbealrxuw] {
    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-xsbealrxuw] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--nm-muted);
}

.srd-leg-body[b-xsbealrxuw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 168px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.srd-leg-end[b-xsbealrxuw] {
    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-xsbealrxuw] {
        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-xsbealrxuw] {
        margin-top: 2px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--nm-ink);
    }

    .srd-leg-end span[b-xsbealrxuw] {
        font-size: 12px;
        color: var(--nm-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .srd-leg-end small[b-xsbealrxuw] {
        margin-top: 3px;
        font-size: 11.5px;
        color: var(--nm-muted);
    }

.srd-leg-end--to[b-xsbealrxuw] {
    text-align: right;
    align-items: flex-end;
}

.srd-leg-mid[b-xsbealrxuw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.srd-leg-dur[b-xsbealrxuw],
.srd-leg-stops[b-xsbealrxuw] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
}

.srd-leg-stops[b-xsbealrxuw] {
    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-xsbealrxuw] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    color: var(--nm-accent);
}

    .srd-leg-line[b-xsbealrxuw]::before,
    .srd-leg-line[b-xsbealrxuw]::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-xsbealrxuw] {
        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-xsbealrxuw] {
    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-xsbealrxuw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.srd-meta__lbl[b-xsbealrxuw] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nm-muted);
}

.srd-meta__val[b-xsbealrxuw] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

a.srd-meta__val[b-xsbealrxuw] {
    color: var(--nm-accent);
    text-decoration: none;
}

    a.srd-meta__val:hover[b-xsbealrxuw] {
        text-decoration: underline;
    }

.srd-meta__val--code[b-xsbealrxuw] {
    font-size: 14px;
    letter-spacing: .08em;
    font-weight: 700;
}

.srd-meta__val--email[b-xsbealrxuw] {
    font-weight: 500;
    word-break: break-all;
}

/* ── Hành khách ── */
.srd-sec--pax[b-xsbealrxuw] {
    margin-top: 16px;
}

.srd-sec-count[b-xsbealrxuw] {
    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-xsbealrxuw] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

/* Mỗi khách một dòng có vạch ngăn: danh sách trước đây chỉ là mấy dòng chữ trôi nổi ngay dưới khối
   PNR nên nhìn không ra đâu là hết mục này, bắt đầu mục kia. */
.srd-pax-item[b-xsbealrxuw] {
    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-xsbealrxuw] {
        border-bottom: none;
    }

.srd-pax-no[b-xsbealrxuw] {
    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-xsbealrxuw] {
    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-xsbealrxuw] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.srd-pax-tag[b-xsbealrxuw] {
    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-xsbealrxuw] {
    font-size: 12px;
    color: var(--nm-ok);
    font-variant-numeric: tabular-nums;
}

.srd-linked-foot[b-xsbealrxuw] {
    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-xsbealrxuw] {
        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-xsbealrxuw] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .srd-leg-end--to[b-xsbealrxuw] {
        text-align: left;
        align-items: flex-start;
    }

    .srd-leg-mid[b-xsbealrxuw] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 2px 0;
    }

    .srd-leg-line[b-xsbealrxuw] {
        width: auto;
        flex: 1 1 auto;
    }

    .srd-pax-meta[b-xsbealrxuw] {
        margin-left: 30px;
        width: 100%;
    }
}

/* ── Các mục thông tin ── */
.srd-sections[b-xsbealrxuw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    padding-top: 14px;
}

.srd-sec-title[b-xsbealrxuw] {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--nm-muted);
}

.srd-rows[b-xsbealrxuw] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.srd-row[b-xsbealrxuw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

    .srd-row dt[b-xsbealrxuw] {
        color: var(--nm-muted);
        flex-shrink: 0;
    }

    .srd-row dd[b-xsbealrxuw] {
        margin: 0;
        text-align: right;
        color: var(--nm-ink);
        font-weight: 500;
    }

    .srd-row dd ul[b-xsbealrxuw] {
        margin: 0;
        padding-left: 16px;
        text-align: left;
    }

    .srd-row.is-total[b-xsbealrxuw] {
        padding-top: 6px;
        border-top: 1px dashed var(--nm-border);
    }

        .srd-row.is-total dd[b-xsbealrxuw] {
            font-weight: 800;
            color: var(--nm-accent);
        }

/* ── Quy trình duyệt ── */
.srd-steps[b-xsbealrxuw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.srd-step[b-xsbealrxuw] {
    display: flex;
    gap: 10px;
}

.srd-step-dot[b-xsbealrxuw] {
    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-xsbealrxuw] {
    background: var(--nm-ok-soft);
    border-color: var(--nm-ok);
    color: var(--nm-ok);
}

.srd-step-dot--rejected[b-xsbealrxuw] {
    background: var(--nm-bad-soft);
    border-color: var(--nm-bad);
    color: var(--nm-bad);
}

.srd-step-dot--current[b-xsbealrxuw] {
    background: var(--nm-pending-soft);
    border-color: var(--nm-pending);
    color: var(--nm-pending);
}

.srd-step-body[b-xsbealrxuw] {
    min-width: 0;
    flex: 1;
}

.srd-step-head[b-xsbealrxuw] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.srd-step-mode[b-xsbealrxuw] {
    font-size: 12px;
    color: var(--nm-muted);
}

.srd-approvers[b-xsbealrxuw] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .srd-approvers li[b-xsbealrxuw] {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 13px;
    }

.srd-appr-name[b-xsbealrxuw] {
    font-weight: 600;
    color: var(--nm-ink);
}

.srd-appr-st[b-xsbealrxuw] {
    font-size: 12px;
    color: var(--nm-muted);
}

.srd-appr-st--approved[b-xsbealrxuw] {
    color: var(--nm-ok);
}

.srd-appr-st--rejected[b-xsbealrxuw] {
    color: var(--nm-bad);
}

.srd-appr-when[b-xsbealrxuw] {
    font-size: 12px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.srd-appr-cmt[b-xsbealrxuw] {
    flex-basis: 100%;
    margin: 2px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--nm-muted);
}

/* ── Khác ── */
.srd-violations[b-xsbealrxuw] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13.5px;
}

.srd-alert-text[b-xsbealrxuw] {
    margin: 4px 0 0;
    font-size: 13.5px;
}

.srd-notes[b-xsbealrxuw] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--nm-border);
}

    .srd-notes p[b-xsbealrxuw] {
        margin: 0;
        font-size: 13.5px;
        color: var(--nm-ink-2);
    }

.srd-side-act[b-xsbealrxuw] {
    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-xsbealrxuw] .srd-card .lt-banner {
    margin: 0;
    background: none;
    border: 0;
    padding: 0;
}

.srd-trip[b-xsbealrxuw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.srd-trip-code[b-xsbealrxuw] {
    font-weight: 700;
    color: var(--nm-accent);
    text-decoration: none;
}

    .srd-trip-code:hover[b-xsbealrxuw] {
        text-decoration: underline;
    }

.srd-trip-name[b-xsbealrxuw] {
    font-size: 13px;
    color: var(--nm-muted);
}

@media (max-width: 720px) {
    .srd-page[b-xsbealrxuw] {
        padding: 16px 14px 22px;
    }

    .srd-head-right[b-xsbealrxuw] {
        align-items: flex-start;
        width: 100%;
    }
}
/* /src/Shared/Trips/LinkToTripBanner.razor.rz.scp.css */
/* LinkToTripBanner — Banner CTA gắn vào trip sau-success.

   ★ PHẢI tự xuống dòng: banner này được đặt ở nhiều nơi rộng hẹp khác nhau (thân trang đơn hàng rộng
   ~900px, cột phụ trang chi tiết yêu cầu chỉ ~320px). Trước đây là một hàng ngang CỨNG — icon và nút
   đều `flex-shrink: 0` nên trong cột hẹp phần chữ bị bóp còn ~90px và tiêu đề vỡ thành mỗi dòng một
   từ. Dùng flex-wrap + min-width cho phần chữ để nút tự rớt xuống hàng dưới khi không đủ chỗ; media
   query KHÔNG giải quyết được vì nó đo bề rộng MÀN HÌNH chứ không phải bề rộng ô chứa. */
.lt-banner[b-ao24tg3p5p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1.5px solid #ffe0c7;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 14px 0;
    container-type: inline-size;   /* cho phép các rule @container bên dưới đo BỀ RỘNG Ô CHỨA */
}
.lt-banner-soft[b-ao24tg3p5p] {
    background: #f7f8fa;
    border-color: #e2e8f0;
}
.lt-banner-icon[b-ao24tg3p5p] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ff7d1f;
    /* Trước dùng var(--d-ink-2) — token của theme Manager cũ, KHÔNG được khai ở đâu trong hệ thống
       (đã grep toàn bộ css) nên màu rơi về màu chữ kế thừa: icon sẫm nằm trên nền cam đậm. */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lt-banner-icon-muted[b-ao24tg3p5p] {
    background: #cbd5e1;
    color: #475569;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.lt-banner-body[b-ao24tg3p5p] {
    flex: 1 1 160px;   /* dưới 160px thì nút rớt xuống dòng thay vì bóp chữ vỡ từng từ */
    min-width: 0;
}
.lt-banner-title[b-ao24tg3p5p] {
    font-size: 13.5px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 2px;
    line-height: 1.3;
}
.lt-banner-soft .lt-banner-title[b-ao24tg3p5p] { color: #1f2937; }
.lt-banner-desc[b-ao24tg3p5p] {
    font-size: 12.5px;
    color: #78350f;
    margin: 0;
    line-height: 1.4;
}
.lt-banner-soft .lt-banner-desc[b-ao24tg3p5p] { color: #475569; }
.lt-banner-cta[b-ao24tg3p5p] {
    background: #ff7d1f;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s;
    flex-shrink: 0;
    margin-left: auto;      /* rộng: nằm bên phải — hẹp: tự rớt xuống hàng riêng */
    justify-content: center;
}

/* Khi đã rớt xuống hàng riêng thì trải hết bề ngang cho dễ bấm (ngón tay trên mobile) */
@container (max-width: 380px) {
    .lt-banner-cta[b-ao24tg3p5p] {
        width: 100%;
    }
}
.lt-banner-cta:hover:not(:disabled)[b-ao24tg3p5p] { background: #ff6b00; }
.lt-banner-cta:disabled[b-ao24tg3p5p] { opacity: 0.6; cursor: not-allowed; }
.lt-banner-link[b-ao24tg3p5p] {
    font-size: 12.5px;
    font-weight: 600;
    color: #ff7d1f;
    text-decoration: none;
    flex-shrink: 0;
}
.lt-banner-link:hover[b-ao24tg3p5p] { color: #ff6b00; text-decoration: underline; }

.lt-spinner-sm[b-ao24tg3p5p] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lt-spin-b-ao24tg3p5p 0.8s linear infinite;
    display: inline-block;
}
@keyframes lt-spin-b-ao24tg3p5p {
    to { transform: rotate(360deg); }
}

.lt-error[b-ao24tg3p5p] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-top: -6px;
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    .lt-banner[b-ao24tg3p5p] {
        flex-wrap: wrap;
    }
    .lt-banner-cta[b-ao24tg3p5p] {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}
/* /src/Shared/Trips/TripCalendarView.razor.rz.scp.css */
/* Lịch công tác — chuẩn NM, TOKEN-ONLY (không hex, không --d-*, không class Bootstrap).
   Khung shell dựng theo GdsIndex để cùng một hệ với các trang đã migrate.
   Prefix riêng: tcal-

   ★ Tránh các token bị wwwroot/app.css khai đè (--nm-accent, --nm-bg, --nm-shadow-sm/md/lg,
     --nm-text*, --nm-radius*). Ở đây chỉ dùng bộ chắc chắn đúng SSOT tokens.css:
     --nm-brand-*, --nm-ink/-2, --nm-muted, --nm-surface/-2, --nm-border/-strong,
     --nm-r-card/-input/-pill, --nm-shadow, --nm-font và từ vựng trạng thái --nm-ok/warn/bad/info/pending. */

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

/* ── Head ── */
.nm-list-head[b-5yih91715w] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-list-title[b-5yih91715w] { margin: 0; font-size: 20px; font-weight: 800; color: var(--nm-ink); }
.nm-list-sub[b-5yih91715w] { margin: 3px 0 0; font-size: 14px; color: var(--nm-muted); max-width: 78ch; }
.nm-list-actions[b-5yih91715w] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Bộ điều khiển tháng — một khối liền, nền surface + viền + bóng nhẹ */
.tcal-monthnav[b-5yih91715w] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface);
    box-shadow: var(--nm-shadow);
}

.tcal-period[b-5yih91715w] {
    min-width: 132px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Ba con số của tháng — NmKpi lo phần thẻ; đây chỉ nhấc bóng cho cụm nổi khỏi nền trang ── */
.tcal-kpis[b-5yih91715w]  .nm-kpi { box-shadow: var(--nm-shadow); }
.tcal-kpis[b-5yih91715w]  .nm-kpi__val { font-size: 24px; }

/* ── Chú giải kiêm bộ lọc — mỗi chip MANG MÀU tông của nó, nên bản thân dải này
      chính là bảng màu; trước đây chip trắng trơn với một chấm 9px thì gần như vô hình. ── */
.tcal-legend[b-5yih91715w] { display: flex; flex-wrap: wrap; gap: 7px; }

.tcal-chip[b-5yih91715w] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--tone-fg) 28%, transparent);
    border-radius: var(--nm-r-pill);
    background: var(--tone-bg);
    box-shadow: var(--nm-shadow);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tone-fg);
    cursor: pointer;
    transition: opacity .12s, border-color .12s, box-shadow .12s;
}

.tcal-chip:hover[b-5yih91715w] { border-color: color-mix(in srgb, var(--tone-fg) 55%, transparent); }
.tcal-chip:focus-visible[b-5yih91715w] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; }

/* Đang tắt: rút hết màu về xám để phân biệt tức thì với chip đang bật */
.tcal-chip.is-off[b-5yih91715w] {
    background: var(--nm-surface-2);
    border-color: var(--nm-border);
    color: var(--nm-muted);
    box-shadow: none;
    text-decoration: line-through;
}

.tcal-chip b[b-5yih91715w] {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 0 6px;
    border-radius: var(--nm-r-pill);
    background: color-mix(in srgb, var(--tone-fg) 14%, transparent);
}

.tcal-chip.is-off b[b-5yih91715w] { background: var(--nm-border); }

.tcal-chip__dot[b-5yih91715w] {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: var(--nm-r-pill);
    background: var(--tone-fg);
}

.tcal-chip.is-off .tcal-chip__dot[b-5yih91715w] { background: var(--nm-border-strong); }

/* ── Khung thẻ ── */
.tcal-card[b-5yih91715w] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    box-shadow: var(--nm-shadow);
    overflow: hidden;
}

.tcal-weekhead[b-5yih91715w] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--nm-surface-2);
    border-bottom: 1px solid var(--nm-border-strong);
}

.tcal-weekhead span[b-5yih91715w] {
    padding: 10px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--nm-ink-2);
    text-transform: uppercase;
    letter-spacing: .09em;
}

/* Cuối tuần nhạt hơn — đọc ra nhịp tuần mà không cần thêm đường kẻ nào */
.tcal-weekhead span:nth-child(6)[b-5yih91715w],
.tcal-weekhead span:nth-child(7)[b-5yih91715w] { color: var(--nm-muted); }

/* ── Một tuần ── */
.tcal-week[b-5yih91715w] {
    border-bottom: 1px solid var(--nm-border);
    padding-bottom: 8px;
    /* Vạch dọc chia 7 cột vẽ bằng nền — khỏi cần 7 phần tử rỗng */
    background-image: repeating-linear-gradient(to right, var(--nm-border) 0 1px, transparent 1px calc(100% / 7));
}

.tcal-week:last-child[b-5yih91715w] { border-bottom: 0; }

.tcal-dates[b-5yih91715w] { display: grid; grid-template-columns: repeat(7, 1fr); }

.tcal-date[b-5yih91715w] {
    height: 42px;   /* đủ chỗ hai dòng: dương lịch + âm lịch */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.tcal-solar[b-5yih91715w] {
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--nm-r-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

/* Âm lịch: lớp phụ, cố ý nhỏ và nhạt để không tranh chỗ với dải chuyến */
.tcal-lunar[b-5yih91715w] {
    font-size: 9.5px;
    line-height: 1;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

/* Mùng 1 và rằm — đậm hơn một nấc, KHÔNG tô màu để khỏi đọ với màu trạng thái chuyến */
.tcal-lunar.is-marked[b-5yih91715w] { color: var(--nm-ink-2); font-weight: 700; }

/* Ngày của tháng khác — mờ đi, vẫn hiện để dải chuyến không bị cụt vô cớ */
.tcal-date.is-out .tcal-solar[b-5yih91715w] { color: var(--nm-muted); opacity: .7; }
.tcal-date.is-out .tcal-lunar[b-5yih91715w] { opacity: .5; }

.tcal-date.is-today .tcal-solar[b-5yih91715w] {
    background: var(--nm-brand-500);
    color: var(--nm-on-brand);
    font-weight: 800;
}

.tcal-date.is-today .tcal-lunar[b-5yih91715w] { color: var(--nm-brand-700); font-weight: 700; }

/* ── Dải chuyến: điểm nhấn của trang ── */
.tcal-lanes[b-5yih91715w] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 26px;
    gap: 3px 0;
    padding: 0 2px 2px;
}

.tcal-bar[b-5yih91715w] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0 2px;
    padding: 0 8px;
    border-radius: var(--nm-r-input);
    border: 1px solid var(--tone-bd);
    /* Vạch đậm ở mép trái = ngày ĐI. Bị cắt ở biên tuần thì bỏ (xem .cut-l) vì lúc đó
       mép trái không phải ngày đi thật. */
    border-left: 3px solid var(--tone-fg);
    background: var(--tone-bg);
    color: var(--tone-fg);
    text-decoration: none;
    overflow: hidden;
    transition: filter .12s, box-shadow .12s;
}

.tcal-bar:hover[b-5yih91715w] {
    filter: brightness(.97);
    box-shadow: var(--nm-shadow);
    text-decoration: none;
    color: var(--tone-fg);
}
.tcal-bar:focus-visible[b-5yih91715w] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; }

/* Chuyến kéo dài qua biên tuần: cắt vuông + viền đứt để biết còn tiếp.
   Mép trái không phải ngày đi nữa nên HẠ vạch đậm xuống như viền thường. */
.tcal-bar.cut-l[b-5yih91715w] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
    border-left: 1px dashed var(--tone-bd);
}

.tcal-bar.cut-r[b-5yih91715w] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    border-right-style: dashed;
}

.tcal-bar__name[b-5yih91715w] {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcal-bar__loc[b-5yih91715w] {
    font-size: 10px;
    line-height: 1.15;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcal-more[b-5yih91715w] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 3px 0 0 6px;
    padding: 2px 8px;
    border: 0;
    border-radius: var(--nm-r-pill);
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--nm-muted);
    cursor: pointer;
}

.tcal-more:hover[b-5yih91715w] { color: var(--nm-brand-700); background: var(--nm-brand-50); }
.tcal-more:focus-visible[b-5yih91715w] { outline: 2px solid var(--nm-brand-500); outline-offset: 1px; }

/* ── Từ vựng trạng thái — CHÉP ĐÚNG bảng màu của NmBadge để một trạng thái chỉ có một màu
      trên toàn màn hình (dải trên lưới, chip ở chú giải, badge trong danh sách).
      Viền lấy chính màu tông pha loãng (không dùng xám trung tính) — trước đây viền xám
      làm dải chìm hẳn vào nền thẻ, nhìn như mảng màu nhạt chứ không ra "thanh". ── */
.t-ok[b-5yih91715w]      { --tone-fg: var(--nm-ok);      --tone-bg: var(--nm-ok-soft); }
.t-warn[b-5yih91715w]    { --tone-fg: var(--nm-warn);    --tone-bg: var(--nm-warn-soft); }
.t-bad[b-5yih91715w]     { --tone-fg: var(--nm-bad);     --tone-bg: var(--nm-bad-soft); }
.t-info[b-5yih91715w]    { --tone-fg: var(--nm-info);    --tone-bg: var(--nm-info-soft); }
.t-pending[b-5yih91715w] { --tone-fg: var(--nm-pending); --tone-bg: var(--nm-pending-soft); }
.t-neutral[b-5yih91715w] { --tone-fg: var(--nm-ink-2);   --tone-bg: var(--nm-surface-2); }

.t-ok[b-5yih91715w], .t-warn[b-5yih91715w], .t-bad[b-5yih91715w], .t-info[b-5yih91715w], .t-pending[b-5yih91715w], .t-neutral[b-5yih91715w] {
    --tone-bd: color-mix(in srgb, var(--tone-fg) 34%, transparent);
}

/* ── Danh sách (màn hẹp) ── */
.tcal-agenda[b-5yih91715w] { display: none; }

.tcal-item[b-5yih91715w] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-border);
    border-left: 3px solid var(--tone-fg);
    text-decoration: none;
    color: var(--nm-ink);
}

.tcal-item:last-child[b-5yih91715w] { border-bottom: 0; }
.tcal-item:hover[b-5yih91715w] { background: var(--nm-surface-2); text-decoration: none; color: var(--nm-ink); }
.tcal-item:focus-visible[b-5yih91715w] { outline: 2px solid var(--nm-brand-500); outline-offset: -2px; }

.tcal-item__range[b-5yih91715w] {
    flex: none;
    min-width: 88px;
    font-size: 12px;
    font-weight: 700;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}

.tcal-item__main[b-5yih91715w] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.tcal-item__main b[b-5yih91715w] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcal-item__main small[b-5yih91715w] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.tcal-sep[b-5yih91715w] {
    width: 3px;
    height: 3px;
    flex: none;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
}

.tcal-lunar-inline[b-5yih91715w] { white-space: nowrap; }

.tcal-note[b-5yih91715w] {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--nm-muted);
}

/* ── Màn hẹp: bỏ lưới, dùng danh sách. Ép cuộn ngang một lịch tháng là cách chắc chắn
      nhất để không ai đọc được nó trên điện thoại. ── */
@media (max-width: 760px) {
    .nm-list-page[b-5yih91715w] { padding: 16px 14px 24px; gap: 12px; }
    .nm-list-title[b-5yih91715w] { font-size: 18px; }
    .tcal-stat[b-5yih91715w] { padding: 2px 14px; }
    .tcal-stat__val[b-5yih91715w] { font-size: 19px; }
    .tcal-gridview[b-5yih91715w] { display: none; }
    .tcal-agenda[b-5yih91715w] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .tcal-chip[b-5yih91715w], .tcal-bar[b-5yih91715w] { transition: none; }
}
/* /src/Shared/Trips/TripPicker.razor.rz.scp.css */
/* TripPicker — Modal chọn trip eligible.
   Theme: warm-neutral + orange accent ONLY ở selected + primary CTA.
*/
.tripick-overlay[b-h0g3h6thzc] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tripick-backdrop[b-h0g3h6thzc] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.tripick-panel[b-h0g3h6thzc] {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tripick-in-b-h0g3h6thzc 0.18s ease-out;
}
@keyframes tripick-in-b-h0g3h6thzc {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.tripick-head[b-h0g3h6thzc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #ffe8d6 100%);
    border-bottom: 1px solid #ffe0c7;
}
.tripick-head-icon[b-h0g3h6thzc] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ff7d1f;
    color: var(--d-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tripick-head-text[b-h0g3h6thzc] { flex: 1; min-width: 0; }
.tripick-head-text h3[b-h0g3h6thzc] {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.tripick-head-text p[b-h0g3h6thzc] {
    font-size: 12.5px;
    color: #6b7280;
    margin: 2px 0 0;
}
.tripick-close[b-h0g3h6thzc] {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.tripick-close:hover[b-h0g3h6thzc] { background: rgba(0,0,0,0.05); color: #1f2937; }

.tripick-body[b-h0g3h6thzc] {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.tripick-state[b-h0g3h6thzc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 10px;
}
.tripick-state h4[b-h0g3h6thzc] {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 4px 0 0;
}
.tripick-state p[b-h0g3h6thzc] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    max-width: 320px;
}
.tripick-empty-icon[b-h0g3h6thzc] { color: #cbd5e1; }
.tripick-spinner[b-h0g3h6thzc] {
    width: 32px;
    height: 32px;
    border: 3px solid #ffe0c7;
    border-top-color: #ff7d1f;
    border-radius: 50%;
    animation: tripick-spin-b-h0g3h6thzc 0.8s linear infinite;
}
.tripick-spinner-sm[b-h0g3h6thzc] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tripick-spin-b-h0g3h6thzc 0.8s linear infinite;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}
@keyframes tripick-spin-b-h0g3h6thzc {
    to { transform: rotate(360deg); }
}

/* ── Search ── */
.tripick-search[b-h0g3h6thzc] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.tripick-search > svg[b-h0g3h6thzc] {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    pointer-events: none;
}
.tripick-search-input[b-h0g3h6thzc] {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 36px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
    font-size: 13.5px;
    color: #1f2937;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.tripick-search-input[b-h0g3h6thzc]::placeholder { color: #94a3b8; }
.tripick-search-input:focus[b-h0g3h6thzc] {
    border-color: #ff7d1f;
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.tripick-search-clear[b-h0g3h6thzc] {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.tripick-search-clear:hover[b-h0g3h6thzc] { background: #e2e8f0; color: #1f2937; }

.tripick-list[b-h0g3h6thzc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tripick-card[b-h0g3h6thzc] {
    text-align: left;
    background: #f7f8fa;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.12s ease;
    width: 100%;
}
.tripick-card:hover[b-h0g3h6thzc] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.tripick-card.selected[b-h0g3h6thzc] {
    background: #fff8f2;
    border-color: #ff7d1f;
    box-shadow: 0 0 0 3px rgba(255, 107, 0,0.12);
}
.tripick-card-head[b-h0g3h6thzc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.tripick-card-head-left[b-h0g3h6thzc] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}
.tripick-badge-purpose[b-h0g3h6thzc] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.tripick-badge-purpose.is-company[b-h0g3h6thzc] {
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}
.tripick-badge-purpose.is-personal[b-h0g3h6thzc] {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
}
.tripick-card-code[b-h0g3h6thzc] {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #ff7d1f;
    letter-spacing: 0.3px;
}
.tripick-badge-match[b-h0g3h6thzc] {
    font-size: 10.5px;
    font-weight: 600;
    color: #047857;
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tripick-card-name[b-h0g3h6thzc] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1.3;
}
.tripick-card-meta[b-h0g3h6thzc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}
.tripick-meta-item[b-h0g3h6thzc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tripick-card-budget[b-h0g3h6thzc] { margin-top: 6px; }
.tripick-budget-bar[b-h0g3h6thzc] {
    height: 5px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 4px;
}
.tripick-budget-fill[b-h0g3h6thzc] {
    height: 100%;
    background: linear-gradient(90deg, #ff7d1f, #ff9a52);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.tripick-budget-text[b-h0g3h6thzc] {
    font-size: 11px;
    color: #64748b;
    font-family: ui-monospace, monospace;
}

.tripick-planned[b-h0g3h6thzc] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ffe0c7;
}
.tripick-planned-label[b-h0g3h6thzc] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 4px;
}
.tripick-planned-select[b-h0g3h6thzc] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ffe0c7;
    border-radius: 7px;
    font-size: 14px;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
}
.tripick-planned-select:focus[b-h0g3h6thzc] {
    outline: none;
    border-color: #ff7d1f;
    box-shadow: 0 0 0 3px rgba(255, 107, 0,0.15);
}

.tripick-footer[b-h0g3h6thzc] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: #f7f8fa;
    border-top: 1px solid #e2e8f0;
}
.tripick-btn[b-h0g3h6thzc] {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    transition: all 0.12s ease;
}
.tripick-btn:hover:not(:disabled)[b-h0g3h6thzc] {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.tripick-btn:disabled[b-h0g3h6thzc] {
    opacity: 0.55;
    cursor: not-allowed;
}
.tripick-btn-primary[b-h0g3h6thzc] {
    background: #ff7d1f;
    color: #fff;
    border-color: #ff7d1f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tripick-btn-primary:hover:not(:disabled)[b-h0g3h6thzc] {
    background: #ff6b00;
    border-color: #ff6b00;
}
/* /src/Shared/Wallet/WalletAdminActions.razor.rz.scp.css */
/* Modal thao tác tiền của kế toán — style đứng cạnh component vì nó được dùng ở nhiều trang;
   để ở .razor.css của trang thì trang thứ hai render ra khối trắng trơn. */

.wa-form[b-iuuligksur] { display: flex; flex-direction: column; gap: 14px; }

.wa-ctx[b-iuuligksur] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface-2, var(--nm-surface));
}
.wa-ctx__co[b-iuuligksur] { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nm-ink); }
.wa-ctx__bal[b-iuuligksur] { font-size: 13px; color: var(--nm-muted); }
.wa-ctx__bal b[b-iuuligksur] { color: var(--nm-ink); font-variant-numeric: tabular-nums; }

.nm-code-pill[b-iuuligksur] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.wa-quick[b-iuuligksur] { display: flex; gap: 8px; flex-wrap: wrap; }

.wa-preview[b-iuuligksur] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--nm-border);
    border-radius: var(--nm-r-input);
    font-size: 13px;
    color: var(--nm-muted);
}
.wa-preview b[b-iuuligksur] { font-size: 16px; font-weight: 800; color: var(--nm-ink); font-variant-numeric: tabular-nums; }
.wa-preview b.is-good[b-iuuligksur] { color: var(--nm-ok, #16a34a); }
.wa-preview b.is-bad[b-iuuligksur] { color: var(--nm-bad, #dc2626); }

.wa-modal-sub[b-iuuligksur] { margin: 0; font-size: 14px; color: var(--nm-ink); line-height: 1.55; }

/* CurrencyInput là <input> trần (không phải NmInput) nên khung phải tự khai ở đây */
.wa-form[b-iuuligksur]  .ci-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* /src/Shared/Wallet/WalletSummaryView.razor.rz.scp.css */
/* WalletSummaryView — shared /manager/wallet/summary + /ca/wallet/summary, chuẩn nm-list token-only:
   head + NmStatGrid 5 KPI + card tỉ lệ phân bổ (thanh chồng lớp) + NmCard DataGrid cost center. */
.nm-list-page[b-pl6hjtet4v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

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

.nm-code-pill[b-pl6hjtet4v] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Card ── */
[b-pl6hjtet4v] .wsv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wsv-card-ico[b-pl6hjtet4v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.wsv-card-title[b-pl6hjtet4v] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.wsv-card-count[b-pl6hjtet4v] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.wsv-card-hint[b-pl6hjtet4v] { font-size: 11.5px; color: var(--nm-muted); }
.wsv-card-meta[b-pl6hjtet4v] {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Thanh tỉ lệ phân bổ/chi tiêu chồng lớp trên số dư ── */
.wsv-progress[b-pl6hjtet4v] {
    position: relative;
    height: 14px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    border: 1px solid var(--nm-border);
    overflow: hidden;
}
.wsv-progress-alloc[b-pl6hjtet4v] {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, var(--nm-brand-500) 30%, transparent);
    border-radius: var(--nm-r-pill);
}
.wsv-progress-spent[b-pl6hjtet4v] {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--nm-brand-500);
    border-radius: var(--nm-r-pill);
}
.wsv-legend[b-pl6hjtet4v] { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.wsv-legend-row[b-pl6hjtet4v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--nm-ink-2);
}
.wsv-legend-sw[b-pl6hjtet4v] { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.wsv-legend-sw.spent[b-pl6hjtet4v] { background: var(--nm-brand-500); }
.wsv-legend-sw.alloc[b-pl6hjtet4v] { background: color-mix(in srgb, var(--nm-brand-500) 30%, transparent); }
.wsv-legend-sw.unused[b-pl6hjtet4v] { background: var(--nm-surface-2); border: 1px solid var(--nm-border); }

/* ── Cell trong DataGrid ── */
.cell-2line[b-pl6hjtet4v] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cell-2line__main[b-pl6hjtet4v] {
    font-weight: 500;
    color: var(--nm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub[b-pl6hjtet4v] {
    font-size: 11.5px;
    color: var(--nm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.cell-2line__sub i[b-pl6hjtet4v] { color: var(--nm-brand-700); font-size: 10px; }
.wsv-period[b-pl6hjtet4v] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-ink-2);
    white-space: nowrap;
}
.wsv-money[b-pl6hjtet4v] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wsv-money.is-spent[b-pl6hjtet4v] { color: var(--nm-bad); }
.wsv-money.is-reserved[b-pl6hjtet4v] { color: var(--nm-warn); }
.wsv-money.is-good[b-pl6hjtet4v] { color: var(--nm-ok); font-weight: 600; }
.wsv-money.is-bad[b-pl6hjtet4v] { color: var(--nm-bad); font-weight: 600; }

.wsv-usage[b-pl6hjtet4v] { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
[b-pl6hjtet4v] .wsv-usage-bar { flex: 1; min-width: 60px; }
.wsv-usage-pct[b-pl6hjtet4v] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .nm-list-page[b-pl6hjtet4v] { padding: 16px 14px 22px; }
    .wsv-card-meta[b-pl6hjtet4v] { margin-left: 0; }
}
/* /src/Shared/Wallet/WalletView.razor.rz.scp.css */
/* WalletView — shared /manager/wallet + /ca/wallet, chuẩn nm-list token-only, bám khung của cụm
   tài chính CA (/ca/budget, /ca/invoices): head + thẻ ví + NmStatGrid KPI + NmToolbar lọc +
   NmCard DataGrid (yêu cầu nạp / lịch sử giao dịch) + NmModal nạp tiền.
   Chrome của từng khối do Nm* lo — file này chỉ dựng bố cục và các ô chữ trong cell. */
.nm-list-page[b-4fmlvdblba] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 28px 28px;
    font-family: var(--nm-font);
    color: var(--nm-ink);
}

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

.nm-code-pill[b-4fmlvdblba] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Thẻ ví (cockpit): số dư | ngân sách, + dải dòng tiền mỏng ở chân ──
   Hành động (Nạp tiền / Tổng quan) đã lên nm-list-head nên vùng trái chỉ còn con số + nhịp dùng. */
.wv-balance[b-4fmlvdblba] {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(280px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 16px 18px;
}

.wv-balance__main[b-4fmlvdblba] { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.wv-balance__lbl[b-4fmlvdblba] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}
.wv-balance__val[b-4fmlvdblba] {
    font-size: 32px;
    font-weight: 800;
    color: var(--nm-brand-700);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    word-break: break-word;
}
/* Nhãn runway + nút "nạp ngay" (chỉ hiện khi sắp cạn) nằm cùng hàng ngay dưới số dư. */
.wv-balance__meta[b-4fmlvdblba] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.wv-balance__side[b-4fmlvdblba] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid var(--nm-border);
}

/* NmProgress tự lo track/fill/nhãn — chỉ chỉnh cỡ chữ dòng nhãn cho khớp mật độ thẻ. */
[b-4fmlvdblba] .wv-usage .nm-progress__head { font-size: 12px; }

/* NmDescriptionList (is-inline) mặc định cột nhãn 140px cho trang chi tiết — trong thẻ ví
   4 ô xếp 2 cột nên cần hẹp hơn, và bỏ viền dưới của hàng cuối cho gọn.
   Selector phải nêu đủ .nm-dl.is-inline mới thắng được rule gốc của component (cùng cấp class). */
[b-4fmlvdblba] .wv-budget-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
[b-4fmlvdblba] .wv-budget-dl.nm-dl.is-inline .nm-dl__item { grid-template-columns: minmax(96px, auto) 1fr; padding: 7px 0; }
[b-4fmlvdblba] .wv-budget-dl.nm-dl .nm-dl__item:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }

.wv-num[b-4fmlvdblba] {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wv-num.is-good[b-4fmlvdblba] { color: var(--nm-ok); }
.wv-num.is-warn[b-4fmlvdblba] { color: var(--nm-warn); }
.wv-num.is-bad[b-4fmlvdblba] { color: var(--nm-bad); }

.wv-nobudget[b-4fmlvdblba] { display: flex; align-items: center; gap: 10px; color: var(--nm-muted); }
.wv-nobudget > i[b-4fmlvdblba] { font-size: 20px; color: var(--nm-brand-500); flex-shrink: 0; }
.wv-nobudget b[b-4fmlvdblba] { display: block; font-size: 13px; font-weight: 700; color: var(--nm-ink); }
.wv-nobudget small[b-4fmlvdblba] { font-size: 12px; }

/* ── Dải dòng tiền: 1 hàng mỏng ở chân thẻ ví (cùng ngôn ngữ với .cabk-stats của /ca/bookings).
   Trên màn hẹp thì trượt ngang chứ KHÔNG xuống dòng — 4 con số này đọc theo hàng mới ra nghĩa
   "vào – ra – ròng – nhịp". */
.wv-flow[b-4fmlvdblba] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 8px 6px;
    border-top: 1px solid var(--nm-border);
    background: var(--nm-surface-2);
    overflow-x: auto;
    scrollbar-width: none;
}
.wv-flow[b-4fmlvdblba]::-webkit-scrollbar { display: none; }

.wv-flow__item[b-4fmlvdblba] {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 14px;
    white-space: nowrap;
    min-width: max-content;
}
.wv-flow__item + .wv-flow__item[b-4fmlvdblba] { border-left: 1px solid var(--nm-border); }

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

.wv-flow__lbl[b-4fmlvdblba] { font-size: 12px; font-weight: 600; color: var(--nm-muted); }
.wv-flow__val[b-4fmlvdblba] {
    margin-left: auto;
    font-size: 14px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
.wv-flow__hint[b-4fmlvdblba] {
    align-self: center;
    padding: 0 12px 0 14px;
    border-left: 1px solid var(--nm-border);
    font-size: 11px;
    color: var(--nm-muted);
    white-space: nowrap;
}

/* ── Card ── */
[b-4fmlvdblba] .wv-card .nm-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wv-card-ico[b-4fmlvdblba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 13px;
    flex-shrink: 0;
}
.wv-card-title[b-4fmlvdblba] { margin: 0; font-size: 14px; font-weight: 700; color: var(--nm-ink); }
.wv-card-count[b-4fmlvdblba] {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-surface-2);
    color: var(--nm-ink-2);
}
.wv-card-hint[b-4fmlvdblba] { margin-left: auto; font-size: 11.5px; color: var(--nm-muted); }

/* ── Cell trong DataGrid ── */
.wv-money[b-4fmlvdblba] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12.5px;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.wv-money.up[b-4fmlvdblba] { color: var(--nm-ok); font-weight: 600; }
.wv-money.down[b-4fmlvdblba] { color: var(--nm-bad); font-weight: 600; }
.wv-time[b-4fmlvdblba] {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--nm-muted);
    white-space: nowrap;
}
.wv-desc[b-4fmlvdblba] {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.nm-row-actions[b-4fmlvdblba] { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* Hàng yêu cầu chờ duyệt — nền cam nhạt để nhận ra chỗ cần thao tác */
[b-4fmlvdblba] .wv-row-pending .nm-grid__td { background: color-mix(in srgb, var(--nm-warn) 6%, transparent); }

/* ── Accordion "Yêu cầu nạp tiền" ──
   Tiêu đề accordion là <button> nên các phần tử con phải xếp hàng ngang thủ công; thân accordion
   bỏ đệm hai bên để DataGrid chạm mép như trong NmCard. */
   Selector phải kèm .nm-accordion mới hơn được rule gốc (cùng số class thì thứ tự bundle định đoạt). */
.wv-acc-title[b-4fmlvdblba] { font-size: 14px; font-weight: 700; color: var(--nm-ink); }
[b-4fmlvdblba] .wv-req-acc.nm-accordion .nm-acc__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[b-4fmlvdblba] .wv-req-acc.nm-accordion .nm-acc__head { padding: 11px 16px; }
[b-4fmlvdblba] .wv-req-acc.nm-accordion .nm-acc__body { padding: 0; }

/* ── Toolbar lọc lịch sử giao dịch (NmToolbar Boxed) ──
   NmInput/NmDateRange mặc định giãn 100% → khoá bề rộng để nằm chung một hàng. */
[b-4fmlvdblba] .wv-toolbar .nm-input-wrap { width: 240px; flex: 0 0 auto; }
[b-4fmlvdblba] .wv-toolbar .nm-daterange { flex: 0 0 auto; }
.wv-tx-chips[b-4fmlvdblba] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wv-foot[b-4fmlvdblba] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--nm-border);
}

/* ── Modal nạp tiền ── */
.wv-form[b-4fmlvdblba] { display: flex; flex-direction: column; gap: 12px; }
.wv-form-ctx[b-4fmlvdblba] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--nm-muted);
}
.wv-form-bal b[b-4fmlvdblba] { color: var(--nm-brand-700); font-weight: 700; font-variant-numeric: tabular-nums; }
.wv-quick[b-4fmlvdblba] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.wv-method[b-4fmlvdblba] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input, 10px);
    background: var(--nm-surface-2);
}
.wv-method-ico[b-4fmlvdblba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-size: 15px;
    flex-shrink: 0;
}
.wv-method-info[b-4fmlvdblba] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wv-method-info b[b-4fmlvdblba] { font-size: 13px; font-weight: 600; color: var(--nm-ink); }
.wv-method-info small[b-4fmlvdblba] { font-size: 11.5px; color: var(--nm-muted); }

/* Lưới cổng thanh toán do PaymentMethodSelector (pms-*) tự lo — modal chỉ cần bỏ khoảng đệm thừa. */
.wv-form[b-4fmlvdblba]  .pms-root { width: 100%; }
.wv-form[b-4fmlvdblba]  .pms-cat-lbl:first-child { margin-top: 0; }

/* Thẻ ví hết chỗ cho 2 cột trước cả mốc mobile (sidebar CA ăn mất bề ngang) → xuống hàng sớm hơn. */
@media (max-width: 960px) {
    .wv-balance[b-4fmlvdblba] { grid-template-columns: 1fr; gap: 14px; }
    .wv-balance__side[b-4fmlvdblba] { padding-left: 0; border-left: 0; border-top: 1px solid var(--nm-border); padding-top: 12px; }
}

@media (max-width: 640px) {
    .nm-list-page[b-4fmlvdblba] { padding: 16px 14px 22px; }
    .wv-balance[b-4fmlvdblba] { padding: 14px; }
    .wv-balance__val[b-4fmlvdblba] { font-size: 26px; }
    [b-4fmlvdblba] .wv-budget-dl { grid-template-columns: 1fr; }
    [b-4fmlvdblba] .wv-budget-dl.nm-dl .nm-dl__item:nth-last-child(-n+2) { border-bottom: 1px solid var(--nm-border); padding-bottom: 7px; }
    [b-4fmlvdblba] .wv-budget-dl.nm-dl .nm-dl__item:last-child { border-bottom: 0; padding-bottom: 0; }
    [b-4fmlvdblba] .wv-toolbar .nm-input-wrap { width: 100%; flex: 1 1 100%; }
    .wv-card-hint[b-4fmlvdblba] { margin-left: 0; }
    /* Dải dòng tiền đã trượt ngang được rồi — bỏ nốt dòng "30 ngày" để không tốn thêm chiều rộng. */
    .wv-flow__hint[b-4fmlvdblba] { display: none; }
}
/* /src/Ui/DataGrid.razor.rz.scp.css */
/* DataGrid — token-only. */
.nm-grid-wrap[b-was6g5xbns] {
    overflow-x: auto;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.nm-grid[b-was6g5xbns] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--nm-font);
    font-size: 13.5px;
}

.nm-grid__th[b-was6g5xbns] {
    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-was6g5xbns] { text-align: right; }
.nm-grid__th--center[b-was6g5xbns] { 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-was6g5xbns] {
    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-was6g5xbns] { color: var(--nm-ink); }
.nm-grid__sort:focus-visible[b-was6g5xbns] {
    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-was6g5xbns] { font-size: 12px; opacity: .35; }
.nm-grid__sort:hover .nm-grid__sort-ico[b-was6g5xbns] { opacity: .7; }
.nm-grid__th--sorted[b-was6g5xbns] { color: var(--nm-ink); }
.nm-grid__th--sorted .nm-grid__sort-ico[b-was6g5xbns] { opacity: 1; color: var(--nm-brand-500); }

.nm-grid__td[b-was6g5xbns] {
    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-was6g5xbns] { text-align: right; }
.nm-grid__td--center[b-was6g5xbns] { text-align: center; }

.nm-grid__row:hover .nm-grid__td[b-was6g5xbns] { background: var(--nm-surface-2); }
.nm-grid__row:last-child .nm-grid__td[b-was6g5xbns] { 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-was6g5xbns] {
    box-shadow: inset 3px 0 0 0 var(--nm-brand-500);
}

.nm-grid__idx[b-was6g5xbns] { 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-was6g5xbns],
.nm-grid__td--sticky[b-was6g5xbns] {
    position: sticky;
    z-index: 2;
}
.nm-grid__td--sticky[b-was6g5xbns] { background: var(--nm-surface); }
.nm-grid__th--sticky[b-was6g5xbns] { 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-was6g5xbns] { 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-was6g5xbns],
.nm-grid__td--sticky-last[b-was6g5xbns] {
    border-right: 1px solid var(--nm-border);
    box-shadow: 6px 0 8px -6px rgb(0 0 0 / .16);
}

/* mobile: 2 cột ghim đã chiếm gần hết màn — bỏ ghim, cuộn bình thường */
@media (max-width: 640px) {
    .nm-grid__th--sticky[b-was6g5xbns],
    .nm-grid__td--sticky[b-was6g5xbns] {
        position: static;
    }
    .nm-grid__th--sticky-last[b-was6g5xbns],
    .nm-grid__td--sticky-last[b-was6g5xbns] {
        border-right: none;
        box-shadow: none;
    }
}

.nm-grid__state[b-was6g5xbns] { padding: 28px 14px; text-align: center; color: var(--nm-muted); }

.nm-grid__spinner[b-was6g5xbns] {
    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-was6g5xbns .6s linear infinite;
}

@keyframes nm-grid-spin-b-was6g5xbns { to { transform: rotate(360deg); } }
/* /src/Ui/NmAccordion.razor.rz.scp.css */
/* NmAccordion — token-only.
   Phần thân item do NmAccordionItem (component con) render → phải dùng ::deep để style. */
.nm-accordion[b-dai262adyn] {
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
    background: var(--nm-surface);
}

.nm-accordion[b-dai262adyn]  .nm-acc__item + .nm-acc__item { border-top: 1px solid var(--nm-border); }

.nm-accordion[b-dai262adyn]  .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-dai262adyn]  .nm-acc__head:hover:not(:disabled) { background: var(--nm-surface-2); }
.nm-accordion[b-dai262adyn]  .nm-acc__head:disabled { opacity: .55; cursor: not-allowed; }

.nm-accordion[b-dai262adyn]  .nm-acc__lead { color: var(--nm-brand-500); font-size: 16px; }
.nm-accordion[b-dai262adyn]  .nm-acc__title { flex: 1; }

.nm-accordion[b-dai262adyn]  .nm-acc__chev {
    color: var(--nm-muted);
    font-size: 14px;
    transition: transform .18s ease;
}
.nm-accordion[b-dai262adyn]  .nm-acc__item.is-open .nm-acc__chev { transform: rotate(180deg); }

.nm-accordion[b-dai262adyn]  .nm-acc__body {
    padding: 2px 16px 16px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
    line-height: 1.55;
}
/* /src/Ui/NmAlert.razor.rz.scp.css */
/* NmAlert — token-only. Tone dùng status vocabulary (nền soft + accent màu trạng thái). */
.nm-alert[b-b2yo27q6sz] {
    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-b2yo27q6sz] { font-size: 16px; line-height: 1.4; flex: none; }
.nm-alert__content[b-b2yo27q6sz] { flex: 1; min-width: 0; }
.nm-alert__title[b-b2yo27q6sz] { font-weight: 700; margin-bottom: 2px; color: var(--nm-ink); }
.nm-alert__body[b-b2yo27q6sz] { color: var(--nm-ink-2); }

.nm-alert__close[b-b2yo27q6sz] {
    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-b2yo27q6sz] { color: var(--nm-ink); }

/* Tones */
.nm-alert--info[b-b2yo27q6sz] { background: var(--nm-info-soft); border-color: var(--nm-info); }
.nm-alert--info .nm-alert__icon[b-b2yo27q6sz] { color: var(--nm-info); }

.nm-alert--ok[b-b2yo27q6sz] { background: var(--nm-ok-soft); border-color: var(--nm-ok); }
.nm-alert--ok .nm-alert__icon[b-b2yo27q6sz] { color: var(--nm-ok); }

.nm-alert--warn[b-b2yo27q6sz] { background: var(--nm-warn-soft); border-color: var(--nm-warn); }
.nm-alert--warn .nm-alert__icon[b-b2yo27q6sz] { color: var(--nm-warn); }

.nm-alert--bad[b-b2yo27q6sz] { background: var(--nm-bad-soft); border-color: var(--nm-bad); }
.nm-alert--bad .nm-alert__icon[b-b2yo27q6sz] { color: var(--nm-bad); }
/* /src/Ui/NmAvatar.razor.rz.scp.css */
/* NmAvatar — token-only. */
.nm-avatar[b-6de94hsrjw] {
    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-6de94hsrjw] {
    width: 100%;
    height: 100%;
    border-radius: var(--nm-r-pill);
    object-fit: cover;
}

.nm-avatar__initials[b-6de94hsrjw] {
    line-height: 1;
}

/* Sizes */
.nm-avatar--sm[b-6de94hsrjw] { width: 28px; height: 28px; font-size: 11px; }
.nm-avatar--md[b-6de94hsrjw] { width: 38px; height: 38px; font-size: 14px; }
.nm-avatar--lg[b-6de94hsrjw] { width: 52px; height: 52px; font-size: 18px; }

/* Status dot */
.nm-avatar__status[b-6de94hsrjw] {
    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-6de94hsrjw] { background: var(--nm-ok); }
.nm-avatar__status--warn[b-6de94hsrjw] { background: var(--nm-warn); }
.nm-avatar__status--bad[b-6de94hsrjw] { background: var(--nm-bad); }
.nm-avatar__status--pending[b-6de94hsrjw] { background: var(--nm-pending); }
/* /src/Ui/NmBadge.razor.rz.scp.css */
/* NmBadge — token-only. Là nơi duy nhất khai báo CSS badge (status vocabulary). */
.nm-badge[b-t65s1fb9xu] {
    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-t65s1fb9xu] {
    width: 6px;
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: currentColor;
    flex: none;
}

.nm-badge--ok[b-t65s1fb9xu]      { background: var(--nm-ok-soft);      color: var(--nm-ok); }
.nm-badge--warn[b-t65s1fb9xu]    { background: var(--nm-warn-soft);    color: var(--nm-warn); }
.nm-badge--bad[b-t65s1fb9xu]     { background: var(--nm-bad-soft);     color: var(--nm-bad); }
.nm-badge--info[b-t65s1fb9xu]    { background: var(--nm-info-soft);    color: var(--nm-info); }
.nm-badge--pending[b-t65s1fb9xu] { background: var(--nm-pending-soft); color: var(--nm-pending); }
.nm-badge--violet[b-t65s1fb9xu]  { background: var(--nm-violet-soft);  color: var(--nm-violet); }
.nm-badge--neutral[b-t65s1fb9xu] { background: var(--nm-surface-2);    color: var(--nm-ink-2); }
/* /src/Ui/NmBreadcrumb.razor.rz.scp.css */
/* NmBreadcrumb — token-only. */
.nm-crumbs[b-bi2qw2n5xo] {
    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-bi2qw2n5xo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nm-crumbs__link[b-bi2qw2n5xo] {
    color: var(--nm-ink-2);
    text-decoration: none;
    transition: color .12s ease;
}
.nm-crumbs__link:hover[b-bi2qw2n5xo] { color: var(--nm-brand-600); }

.nm-crumbs__sep[b-bi2qw2n5xo] { color: var(--nm-muted); font-size: 10px; }

.nm-crumbs__current[b-bi2qw2n5xo] {
    color: var(--nm-ink);
    font-weight: 600;
}
/* /src/Ui/NmButton.razor.rz.scp.css */
/* NmButton — token-only (chỉ var(--nm-*) + giá trị shape). KHÔNG hard-code màu. */
.nm-btn[b-oj8zd2scfh] {
    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-oj8zd2scfh],
.nm-btn.is-loading[b-oj8zd2scfh] {
    opacity: .6;
    cursor: not-allowed;
}

/* Sizes */
.nm-btn--sm[b-oj8zd2scfh] { padding: 4px 10px; font-size: 12.5px; }
.nm-btn--md[b-oj8zd2scfh] { padding: 8px 14px; font-size: 14px; }
.nm-btn--lg[b-oj8zd2scfh] { padding: 11px 18px; font-size: 15px; }

/* Variants */
.nm-btn--primary[b-oj8zd2scfh] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.nm-btn--primary:hover:not(:disabled)[b-oj8zd2scfh] { background: var(--nm-brand-600); }

.nm-btn--secondary[b-oj8zd2scfh] { background: var(--nm-surface); color: var(--nm-ink); border-color: var(--nm-border-strong); }
.nm-btn--secondary:hover:not(:disabled)[b-oj8zd2scfh] { background: var(--nm-surface-2); }

.nm-btn--ghost[b-oj8zd2scfh] { background: transparent; color: var(--nm-ink-2); }
.nm-btn--ghost:hover:not(:disabled)[b-oj8zd2scfh] { background: var(--nm-surface-2); }

.nm-btn--danger[b-oj8zd2scfh] { background: var(--nm-bad); color: var(--nm-on-brand); }
.nm-btn--danger:hover:not(:disabled)[b-oj8zd2scfh] { background: var(--nm-bad); filter: brightness(.95); }

/* Spinner khi Loading */
.nm-btn__spinner[b-oj8zd2scfh] {
    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-oj8zd2scfh .6s linear infinite;
}

@keyframes nm-btn-spin-b-oj8zd2scfh { to { transform: rotate(360deg); } }
/* /src/Ui/NmButtonGroup.razor.rz.scp.css */
/* NmButtonGroup — token-only segmented control. */
.nm-bgroup[b-6s0cmc4fex] {
    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-6s0cmc4fex] { display: flex; width: 100%; }

.nm-bgroup__seg[b-6s0cmc4fex] {
    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-6s0cmc4fex] { color: var(--nm-ink); }
.nm-bgroup__seg:disabled[b-6s0cmc4fex] { opacity: .5; cursor: not-allowed; }

.nm-bgroup__seg.is-active[b-6s0cmc4fex] {
    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-6s0cmc4fex] { font-size: .92em; opacity: .8; line-height: 1; }
.nm-bgroup__seg.is-active .nm-bgroup__ico[b-6s0cmc4fex] { opacity: 1; }

/* Sizes */
.nm-bgroup--sm .nm-bgroup__seg[b-6s0cmc4fex] { padding: 4px 10px; font-size: 12.5px; }
.nm-bgroup--md .nm-bgroup__seg[b-6s0cmc4fex] { padding: 6px 14px; font-size: 13.5px; }
.nm-bgroup--lg .nm-bgroup__seg[b-6s0cmc4fex] { padding: 9px 18px; font-size: 14px; }
/* /src/Ui/NmCard.razor.rz.scp.css */
/* NmCard — token-only. */
.nm-card[b-b0mtc47hk9] {
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    overflow: hidden;
}

.nm-card.is-elevated[b-b0mtc47hk9] { box-shadow: var(--nm-shadow); }

.nm-card__head[b-b0mtc47hk9] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--nm-border);
    font-weight: 600;
    color: var(--nm-ink);
}

.nm-card__body[b-b0mtc47hk9] { color: var(--nm-ink-2); }
.nm-card.is-padded .nm-card__body[b-b0mtc47hk9] { padding: 18px; }

.nm-card__foot[b-b0mtc47hk9] {
    padding: 14px 18px;
    border-top: 1px solid var(--nm-border);
}
/* /src/Ui/NmCheckbox.razor.rz.scp.css */
/* NmCheckbox — token-only. Input gốc ẩn, vẽ ô tick tuỳ biến. */
.nm-check[b-cdwh3sn38t] {
    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-cdwh3sn38t] { cursor: not-allowed; opacity: .55; }

.nm-check__box[b-cdwh3sn38t] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-check__mark[b-cdwh3sn38t] {
    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-cdwh3sn38t]::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-cdwh3sn38t] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
}
.nm-check__box:checked + .nm-check__mark[b-cdwh3sn38t]::after { transform: rotate(45deg) scale(1); }

.nm-check__box:focus-visible + .nm-check__mark[b-cdwh3sn38t] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-check__label[b-cdwh3sn38t] { line-height: 1.3; }
/* /src/Ui/NmChip.razor.rz.scp.css */
/* NmChip — token-only filter chip. */
.nm-chip[b-q5qwyp8m5u] {
    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-q5qwyp8m5u] { border-color: var(--nm-border-strong); }
.nm-chip:disabled[b-q5qwyp8m5u] { opacity: .55; cursor: not-allowed; }

.nm-chip--active[b-q5qwyp8m5u] {
    background: var(--nm-brand-50);
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
}

.nm-chip__dot[b-q5qwyp8m5u] { width: 7px; height: 7px; border-radius: var(--nm-r-pill); display: inline-block; }
.nm-chip__dot--good[b-q5qwyp8m5u] { background: var(--nm-ok); }
.nm-chip__dot--bad[b-q5qwyp8m5u] { background: var(--nm-bad); }
.nm-chip__dot--accent[b-q5qwyp8m5u] { background: var(--nm-brand-500); }
.nm-chip__dot--info[b-q5qwyp8m5u] { background: var(--nm-info); }
.nm-chip__dot--warn[b-q5qwyp8m5u] { 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-q5qwyp8m5u] { background: var(--nm-pending); }
.nm-chip__dot--violet[b-q5qwyp8m5u] { background: var(--nm-violet); }
/* /src/Ui/NmCombobox.razor.rz.scp.css */
/* NmCombobox — searchable select, token-only.
   Backdrop trong suốt bắt click-outside (không JS). Diện mạo ô đồng bộ với NmInput/NmSelect. */
.nm-combobox[b-hp280q7w0r] {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-combobox__control[b-hp280q7w0r] {
    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-hp280q7w0r] { border-color: var(--nm-ink-2); }

.nm-combobox.is-open .nm-combobox__control[b-hp280q7w0r],
.nm-combobox .nm-combobox__control:focus-within[b-hp280q7w0r] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-combobox.is-invalid .nm-combobox__control[b-hp280q7w0r] { border-color: var(--nm-bad); }
.nm-combobox.is-invalid.is-open .nm-combobox__control[b-hp280q7w0r],
.nm-combobox.is-invalid .nm-combobox__control:focus-within[b-hp280q7w0r] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-combobox.is-disabled .nm-combobox__control[b-hp280q7w0r] {
    background: var(--nm-surface-2);
    cursor: not-allowed;
}

.nm-combobox__icon[b-hp280q7w0r] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    font-size: 14px;
    pointer-events: none;
}

.nm-combobox__input[b-hp280q7w0r] {
    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-hp280q7w0r]::placeholder { color: var(--nm-muted); }
.nm-combobox__input:disabled[b-hp280q7w0r] { 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-hp280q7w0r] { padding: 5px 6px 5px 30px; font-size: 12.5px; }
.nm-combobox--md .nm-combobox__input[b-hp280q7w0r] { padding: 8px 6px 8px 34px; font-size: 14px; }
.nm-combobox--lg .nm-combobox__input[b-hp280q7w0r] { padding: 11px 8px 11px 38px; font-size: 15px; }

.nm-combobox__clear[b-hp280q7w0r] {
    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-hp280q7w0r] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-combobox__caret[b-hp280q7w0r] {
    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-hp280q7w0r] { transform: rotate(180deg); }

/* Backdrop trong suốt + panel kết quả */
.nm-combobox__backdrop[b-hp280q7w0r] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-combobox__panel[b-hp280q7w0r] {
    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-hp280q7w0r] {
    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-hp280q7w0r] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-combobox__option.is-active:not(:disabled)[b-hp280q7w0r] { background: var(--nm-surface-2); }
.nm-combobox__option.is-selected[b-hp280q7w0r] { color: var(--nm-brand-700); font-weight: 600; }
.nm-combobox__option:disabled[b-hp280q7w0r] { opacity: .5; cursor: not-allowed; }
.nm-combobox__check[b-hp280q7w0r] { flex: none; color: var(--nm-brand-500); font-size: 14px; }

.nm-combobox__empty[b-hp280q7w0r] {
    padding: 14px 10px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
}
/* /src/Ui/NmCommandPalette.razor.rz.scp.css */
/* NmCommandPalette — token-only overlay kiểu Ctrl+K. Nổi trên cùng (z trên Modal/Drawer). */
.nm-cmdk__backdrop[b-chixghii69] {
    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-chixghii69] {
    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-chixghii69] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.nm-cmdk__search-ico[b-chixghii69] { color: var(--nm-muted); font-size: 16px; flex: none; }
.nm-cmdk__input[b-chixghii69] {
    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-chixghii69]::placeholder { color: var(--nm-muted); }

.nm-cmdk__esc[b-chixghii69],
.nm-cmdk__item-kbd[b-chixghii69] {
    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-chixghii69] {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.nm-cmdk__group[b-chixghii69] {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nm-muted);
}

.nm-cmdk__item[b-chixghii69] {
    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-chixghii69] { background: var(--nm-surface-2); }
.nm-cmdk__item.is-active .nm-cmdk__item-ico[b-chixghii69] { color: var(--nm-brand-500); }

.nm-cmdk__item-ico[b-chixghii69] { flex: none; font-size: 16px; color: var(--nm-ink-2); width: 18px; text-align: center; }
.nm-cmdk__item-label[b-chixghii69] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-cmdk__item-go[b-chixghii69] { flex: none; color: var(--nm-muted); font-size: 14px; }

.nm-cmdk__empty[b-chixghii69] {
    padding: 28px 12px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 13.5px;
}
/* /src/Ui/NmDateInput.razor.rz.scp.css */
/* NmDateInput — token-only, diện mạo đồng bộ với NmInput/NmSelect (native <input type="date">). */
.nm-dateinput-wrap[b-j9t1sg5rnm] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-dateinput[b-j9t1sg5rnm] {
    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-j9t1sg5rnm] { border-color: var(--nm-ink-2); }

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

.nm-dateinput:disabled[b-j9t1sg5rnm] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-dateinput.is-invalid[b-j9t1sg5rnm] { border-color: var(--nm-bad); }
.nm-dateinput.is-invalid:focus[b-j9t1sg5rnm] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

/* Sizes */
.nm-dateinput--sm[b-j9t1sg5rnm] { padding: 5px 10px; font-size: 12.5px; }
.nm-dateinput--md[b-j9t1sg5rnm] { padding: 8px 12px; font-size: 14px; }
.nm-dateinput--lg[b-j9t1sg5rnm] { padding: 11px 14px; font-size: 15px; }

/* Nút mở lịch của trình duyệt */
.nm-dateinput[b-j9t1sg5rnm]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.nm-dateinput[b-j9t1sg5rnm]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* /src/Ui/NmDateRange.razor.rz.scp.css */
/* NmDateRange — token-only. Bố cục 2 ô ngày + dải nút preset. */
.nm-daterange[b-sst0332jw3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nm-daterange__fields[b-sst0332jw3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nm-daterange__sep[b-sst0332jw3] {
    flex: none;
    color: var(--nm-muted);
    font-size: 14px;
}

.nm-daterange__presets[b-sst0332jw3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nm-daterange__preset[b-sst0332jw3] {
    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-sst0332jw3] {
    border-color: var(--nm-brand-500);
    color: var(--nm-brand-700);
    background: var(--nm-brand-50);
}
/* /src/Ui/NmDescriptionList.razor.rz.scp.css */
/* NmDescriptionList — token-only.
   Các .nm-dl__* do NmDescriptionItem (component con) render → dùng ::deep để style. */
.nm-dl[b-yknyn6leeu] {
    margin: 0;
    display: grid;
    gap: 0;
    font-family: var(--nm-font);
}

.nm-dl[b-yknyn6leeu]  .nm-dl__item {
    padding: 10px 0;
    border-bottom: 1px solid var(--nm-border);
    min-width: 0;
}

.nm-dl[b-yknyn6leeu]  .nm-dl__term {
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    margin: 0 0 2px;
}

.nm-dl[b-yknyn6leeu]  .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-yknyn6leeu]  .nm-dl__item {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: 12px;
}
.nm-dl.is-inline[b-yknyn6leeu]  .nm-dl__term { margin: 0; }
/* /src/Ui/NmDivider.razor.rz.scp.css */
/* NmDivider — token-only. */
.nm-divider--h[b-3k8l8ezqxt] {
    border: none;
    border-top: 1px solid var(--nm-border);
    margin: 16px 0;
    width: 100%;
}

.nm-divider--v[b-3k8l8ezqxt] {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 1em;
    background: var(--nm-border);
    margin: 0 4px;
}

.nm-divider--labeled[b-3k8l8ezqxt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.nm-divider__line[b-3k8l8ezqxt] {
    flex: 1;
    height: 1px;
    background: var(--nm-border);
}

.nm-divider__text[b-3k8l8ezqxt] {
    font-family: var(--nm-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--nm-muted);
    white-space: nowrap;
}
/* /src/Ui/NmDrawer.razor.rz.scp.css */
/* NmDrawer — token-only. */
.nm-drawer-overlay[b-z0kwq3m6hi] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    background: rgba(16, 24, 40, .45);
}

.nm-drawer-panel[b-z0kwq3m6hi] {
    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-z0kwq3m6hi] {
    margin-left: auto;
    animation: nm-drawer-in-right-b-z0kwq3m6hi .2s ease;
}
.nm-drawer-panel--left[b-z0kwq3m6hi] {
    margin-right: auto;
    animation: nm-drawer-in-left-b-z0kwq3m6hi .2s ease;
}

@keyframes nm-drawer-in-right-b-z0kwq3m6hi { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nm-drawer-in-left-b-z0kwq3m6hi  { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.nm-drawer__head[b-z0kwq3m6hi] {
    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-z0kwq3m6hi] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-drawer__close[b-z0kwq3m6hi] {
    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-z0kwq3m6hi] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-drawer__body[b-z0kwq3m6hi] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    color: var(--nm-ink-2);
}

.nm-drawer__foot[b-z0kwq3m6hi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--nm-border);
    flex: none;
}
/* /src/Ui/NmDropdown.razor.rz.scp.css */
/* NmDropdown — token-only. Backdrop trong suốt để bắt click-outside (không cần JS).
   Các .nm-menu__* do NmMenuItem (component con) render → dùng ::deep để style. */
.nm-dropdown[b-6lvdjd9s0n] {
    position: relative;
    display: inline-flex;
}

.nm-dropdown__trigger[b-6lvdjd9s0n] { display: inline-flex; cursor: pointer; }

.nm-dropdown__backdrop[b-6lvdjd9s0n] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-dropdown__menu[b-6lvdjd9s0n] {
    position: absolute;
    top: calc(100% + 6px);
    z-index: 1101;
    min-width: 180px;
    padding: 6px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    box-shadow: var(--nm-shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nm-dropdown__menu--start[b-6lvdjd9s0n] { left: 0; }
.nm-dropdown__menu--end[b-6lvdjd9s0n] { right: 0; }

.nm-dropdown__menu[b-6lvdjd9s0n]  .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-6lvdjd9s0n]  .nm-menu__item:hover:not(:disabled) { background: var(--nm-surface-2); }
.nm-dropdown__menu[b-6lvdjd9s0n]  .nm-menu__item:disabled { opacity: .5; cursor: not-allowed; }

.nm-dropdown__menu[b-6lvdjd9s0n]  .nm-menu__item.is-danger { color: var(--nm-bad); }
.nm-dropdown__menu[b-6lvdjd9s0n]  .nm-menu__item.is-danger:hover:not(:disabled) { background: var(--nm-bad-soft); }

.nm-dropdown__menu[b-6lvdjd9s0n]  .nm-menu__icon { font-size: 15px; width: 16px; text-align: center; }
.nm-dropdown__menu[b-6lvdjd9s0n]  .nm-menu__text { flex: 1; }

.nm-dropdown__menu[b-6lvdjd9s0n]  .nm-menu__sep {
    height: 1px;
    background: var(--nm-border);
    margin: 4px 0;
}
/* /src/Ui/NmEmptyState.razor.rz.scp.css */
/* NmEmptyState — token-only. */
.nm-empty[b-nsy0nuko5b] {
    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-nsy0nuko5b] { padding: 28px 16px; }

.nm-empty__icon[b-nsy0nuko5b] {
    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-nsy0nuko5b] { width: 44px; height: 44px; font-size: 20px; }

.nm-empty__title[b-nsy0nuko5b] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-empty__desc[b-nsy0nuko5b] {
    margin: 0;
    font-size: 14px;
    color: var(--nm-muted);
    max-width: 420px;
}

.nm-empty__actions[b-nsy0nuko5b] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
/* /src/Ui/NmField.razor.rz.scp.css */
/* NmField — token-only. */
.nm-field[b-18r458sqm5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nm-field__label[b-18r458sqm5] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}

.nm-field__req[b-18r458sqm5] {
    color: var(--nm-bad);
    margin-left: 2px;
}

.nm-field__hint[b-18r458sqm5] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-muted);
}

.nm-field__error[b-18r458sqm5] {
    margin: 0;
    font-size: 11.5px;
    color: var(--nm-bad);
}
/* /src/Ui/NmFileUpload.razor.rz.scp.css */
/* NmFileUpload — token-only. Dropzone + danh sách tệp. InputFile phủ trong suốt lên vùng thả. */
.nm-fileupload[b-8w574ay4p4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-fileupload__drop[b-8w574ay4p4] {
    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-8w574ay4p4] {
    border-color: var(--nm-brand-500);
    background: var(--nm-brand-50);
}
.nm-fileupload:not(.is-disabled) .nm-fileupload__drop:hover[b-8w574ay4p4] {
    border-color: var(--nm-brand-500);
}
.nm-fileupload.is-disabled .nm-fileupload__drop[b-8w574ay4p4] {
    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-8w574ay4p4]  .nm-fileupload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.nm-fileupload.is-disabled[b-8w574ay4p4]  .nm-fileupload__input { cursor: not-allowed; }

.nm-fileupload__label[b-8w574ay4p4] {
    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-8w574ay4p4] {
    font-size: 28px;
    color: var(--nm-brand-500);
    margin-bottom: 2px;
}
.nm-fileupload__title[b-8w574ay4p4] { font-size: 14px; }
.nm-fileupload__accent[b-8w574ay4p4] { color: var(--nm-brand-700); font-weight: 600; }
.nm-fileupload__muted[b-8w574ay4p4] { color: var(--nm-ink-2); }
.nm-fileupload__hint[b-8w574ay4p4] { font-size: 12px; color: var(--nm-muted); }

/* Danh sách tệp */
.nm-fileupload__list[b-8w574ay4p4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nm-fileupload__item[b-8w574ay4p4] {
    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-8w574ay4p4] { font-size: 18px; color: var(--nm-ink-2); flex: none; }
.nm-fileupload__item-info[b-8w574ay4p4] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nm-fileupload__item-name[b-8w574ay4p4] {
    font-size: 13.5px;
    color: var(--nm-ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-fileupload__item-size[b-8w574ay4p4] { font-size: 12px; color: var(--nm-muted); }

.nm-fileupload__remove[b-8w574ay4p4] {
    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-8w574ay4p4] { background: var(--nm-bad-soft); color: var(--nm-bad); }

/* Lỗi */
.nm-fileupload__errors[b-8w574ay4p4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nm-fileupload__error[b-8w574ay4p4] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--nm-bad);
}
/* /src/Ui/NmFormGrid.razor.rz.scp.css */
/* NmFormGrid — token-only. */
.nm-formgrid[b-06e4fgmupd] {
    display: grid;
    gap: 14px 16px;
}

/* Field chiếm trọn hàng (textarea, ghi chú dài) */
.nm-formgrid[b-06e4fgmupd]  .nm-col-full { grid-column: 1 / -1; }
/* /src/Ui/NmIconButton.razor.rz.scp.css */
/* NmIconButton — token-only. */
.nm-iconbtn[b-14g70ugg9n] {
    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-14g70ugg9n] { border-radius: var(--nm-r-pill); }
.nm-iconbtn:disabled[b-14g70ugg9n], .nm-iconbtn.is-loading[b-14g70ugg9n] { opacity: .6; cursor: not-allowed; }

/* Sizes (vuông) */
.nm-iconbtn--sm[b-14g70ugg9n] { width: 28px; height: 28px; font-size: 14px; }
.nm-iconbtn--md[b-14g70ugg9n] { width: 34px; height: 34px; font-size: 16px; }
.nm-iconbtn--lg[b-14g70ugg9n] { width: 40px; height: 40px; font-size: 18px; }

/* Variants */
.nm-iconbtn--ghost[b-14g70ugg9n] { background: transparent; }
.nm-iconbtn--ghost:hover:not(:disabled)[b-14g70ugg9n] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-iconbtn--secondary[b-14g70ugg9n] { background: var(--nm-surface); border-color: var(--nm-border-strong); }
.nm-iconbtn--secondary:hover:not(:disabled)[b-14g70ugg9n] { background: var(--nm-surface-2); }

.nm-iconbtn--primary[b-14g70ugg9n] { background: var(--nm-brand-500); color: var(--nm-on-brand); }
.nm-iconbtn--primary:hover:not(:disabled)[b-14g70ugg9n] { background: var(--nm-brand-600); }

.nm-iconbtn--danger[b-14g70ugg9n] { background: transparent; color: var(--nm-bad); }
.nm-iconbtn--danger:hover:not(:disabled)[b-14g70ugg9n] { background: var(--nm-bad-soft); }

/* Spinner */
.nm-iconbtn__spinner[b-14g70ugg9n] {
    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-14g70ugg9n .6s linear infinite;
}
@keyframes nm-iconbtn-spin-b-14g70ugg9n { to { transform: rotate(360deg); } }
/* /src/Ui/NmInput.razor.rz.scp.css */
/* NmInput — token-only. Base style dùng chung diện mạo với NmTextArea/NmSelect. */
.nm-input-wrap[b-ccyzdn6snb] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-input[b-ccyzdn6snb] {
    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-ccyzdn6snb]::placeholder { color: var(--nm-muted); }

.nm-input:hover:not(:disabled)[b-ccyzdn6snb] { border-color: var(--nm-ink-2); }

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

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

.nm-input.is-invalid[b-ccyzdn6snb] {
    border-color: var(--nm-bad);
}
.nm-input.is-invalid:focus[b-ccyzdn6snb] {
    box-shadow: 0 0 0 3px var(--nm-bad-soft);
}

/* Sizes */
.nm-input--sm[b-ccyzdn6snb] { padding: 5px 10px; font-size: 12.5px; }
.nm-input--md[b-ccyzdn6snb] { padding: 8px 12px; font-size: 14px; }
.nm-input--lg[b-ccyzdn6snb] { padding: 11px 14px; font-size: 15px; }

/* Icon đầu ô */
.nm-input.has-icon.nm-input--sm[b-ccyzdn6snb] { padding-left: 30px; }
.nm-input.has-icon.nm-input--md[b-ccyzdn6snb] { padding-left: 36px; }
.nm-input.has-icon.nm-input--lg[b-ccyzdn6snb] { padding-left: 40px; }

.nm-input__icon[b-ccyzdn6snb] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 15px;
}
.nm-input__icon--start[b-ccyzdn6snb] { left: 11px; }
/* /src/Ui/NmInputGroup.razor.rz.scp.css */
/* NmInputGroup — token-only. Khung group giữ viền; control con bị bỏ viền (::deep). */
.nm-ig[b-8ol8a14eqq] {
    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-8ol8a14eqq] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-ig.is-invalid[b-8ol8a14eqq] { border-color: var(--nm-bad); }
.nm-ig.is-invalid:focus-within[b-8ol8a14eqq] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-ig__control[b-8ol8a14eqq] { flex: 1; min-width: 0; display: flex; }

.nm-ig__addon[b-8ol8a14eqq] {
    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-8ol8a14eqq] { border-right: 1px solid var(--nm-border); }
.nm-ig__addon:last-child[b-8ol8a14eqq] { border-left: 1px solid var(--nm-border); }

/* Sizes */
.nm-ig--sm[b-8ol8a14eqq] { font-size: 12.5px; }
.nm-ig--sm .nm-ig__addon[b-8ol8a14eqq] { padding: 0 10px; }
.nm-ig--md[b-8ol8a14eqq] { font-size: 14px; }
.nm-ig--lg[b-8ol8a14eqq] { font-size: 15px; }
.nm-ig--lg .nm-ig__addon[b-8ol8a14eqq] { padding: 0 14px; }

/* Bỏ viền/bo góc/ring của control con để liền khối */
.nm-ig[b-8ol8a14eqq]  input,
.nm-ig[b-8ol8a14eqq]  textarea,
.nm-ig[b-8ol8a14eqq]  select,
.nm-ig[b-8ol8a14eqq]  .nm-input,
.nm-ig[b-8ol8a14eqq]  .nm-select {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
}
.nm-ig[b-8ol8a14eqq]  .nm-input-wrap,
.nm-ig[b-8ol8a14eqq]  .nm-select-wrap { width: 100%; }
/* /src/Ui/NmKpi.razor.rz.scp.css */
/* NmKpi — token-only. */
.nm-kpi[b-g1znpyz08i] {
    padding: 12px 16px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
    background: var(--nm-surface);
}

.nm-kpi__lbl[b-g1znpyz08i] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--nm-muted);
    font-weight: 600;
}

.nm-kpi__val[b-g1znpyz08i] {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}

.nm-kpi__dot[b-g1znpyz08i] { width: 8px; height: 8px; border-radius: var(--nm-r-pill); display: inline-block; }
.nm-kpi__dot--accent[b-g1znpyz08i] { background: var(--nm-brand-500); }
.nm-kpi__dot--good[b-g1znpyz08i] { background: var(--nm-ok); }
.nm-kpi__dot--info[b-g1znpyz08i] { background: var(--nm-info); }
.nm-kpi__dot--warn[b-g1znpyz08i] { background: var(--nm-warn); }
.nm-kpi__dot--bad[b-g1znpyz08i] { background: var(--nm-bad); }
.nm-kpi__dot--pending[b-g1znpyz08i] { background: var(--nm-pending); }
/* /src/Ui/NmModal.razor.rz.scp.css */
/* NmModal — token-only. */
.nm-modal-overlay[b-xcewc50oim] {
    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-xcewc50oim] {
    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-xcewc50oim] { max-width: 420px; }
.nm-modal-panel--md[b-xcewc50oim] { max-width: 560px; }
.nm-modal-panel--lg[b-xcewc50oim] { max-width: 820px; }

.nm-modal__head[b-xcewc50oim] {
    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-xcewc50oim] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--nm-ink);
}

.nm-modal__close[b-xcewc50oim] {
    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-xcewc50oim] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-modal__body[b-xcewc50oim] {
    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-xcewc50oim] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--nm-border);
}
/* /src/Ui/NmMultiSelect.razor.rz.scp.css */
/* NmMultiSelect — chọn nhiều dạng chip, token-only.
   Backdrop trong suốt bắt click-outside (không JS). Control bọc chip (NmTag) + ô nhập inline. */
.nm-multiselect[b-n37moe3mtj] {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--nm-font);
}

.nm-multiselect__control[b-n37moe3mtj] {
    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-n37moe3mtj] { border-color: var(--nm-ink-2); }

.nm-multiselect.is-open .nm-multiselect__control[b-n37moe3mtj],
.nm-multiselect .nm-multiselect__control:focus-within[b-n37moe3mtj] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-multiselect.is-invalid .nm-multiselect__control[b-n37moe3mtj] { border-color: var(--nm-bad); }
.nm-multiselect.is-invalid.is-open .nm-multiselect__control[b-n37moe3mtj],
.nm-multiselect.is-invalid .nm-multiselect__control:focus-within[b-n37moe3mtj] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-multiselect.is-disabled .nm-multiselect__control[b-n37moe3mtj] {
    background: var(--nm-surface-2);
    cursor: not-allowed;
}

.nm-multiselect__chips[b-n37moe3mtj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.nm-multiselect__input[b-n37moe3mtj] {
    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-n37moe3mtj]::placeholder { color: var(--nm-muted); }
.nm-multiselect__input:disabled[b-n37moe3mtj] { cursor: not-allowed; }

/* Sizes — padding của vùng chips + cỡ chữ ô nhập */
.nm-multiselect--sm .nm-multiselect__chips[b-n37moe3mtj] { padding: 4px 6px; }
.nm-multiselect--sm .nm-multiselect__input[b-n37moe3mtj] { font-size: 12.5px; }
.nm-multiselect--md .nm-multiselect__chips[b-n37moe3mtj] { padding: 6px 8px; }
.nm-multiselect--md .nm-multiselect__input[b-n37moe3mtj] { font-size: 14px; }
.nm-multiselect--lg .nm-multiselect__chips[b-n37moe3mtj] { padding: 8px 10px; }
.nm-multiselect--lg .nm-multiselect__input[b-n37moe3mtj] { font-size: 15px; }

.nm-multiselect__clear[b-n37moe3mtj] {
    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-n37moe3mtj] { background: var(--nm-surface-2); color: var(--nm-ink); }

.nm-multiselect__caret[b-n37moe3mtj] {
    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-n37moe3mtj] { transform: rotate(180deg); }

/* Backdrop trong suốt + panel kết quả */
.nm-multiselect__backdrop[b-n37moe3mtj] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-multiselect__panel[b-n37moe3mtj] {
    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-n37moe3mtj] {
    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-n37moe3mtj] { flex: none; font-size: 15px; color: var(--nm-muted); }
.nm-multiselect__option.is-selected .nm-multiselect__box[b-n37moe3mtj] { color: var(--nm-brand-500); }
.nm-multiselect__option-label[b-n37moe3mtj] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nm-multiselect__option.is-active:not(:disabled)[b-n37moe3mtj] { background: var(--nm-surface-2); }
.nm-multiselect__option.is-selected[b-n37moe3mtj] { color: var(--nm-brand-700); font-weight: 600; }
.nm-multiselect__option:disabled[b-n37moe3mtj] { opacity: .5; cursor: not-allowed; }

.nm-multiselect__empty[b-n37moe3mtj] {
    padding: 14px 10px;
    text-align: center;
    color: var(--nm-muted);
    font-size: 14px;
}
/* /src/Ui/NmNumberStepper.razor.rz.scp.css */
/* NmNumberStepper — token-only. */
.nm-num[b-xasps5rsho] {
    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-xasps5rsho] { opacity: .6; }

.nm-num__btn[b-xasps5rsho] {
    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-xasps5rsho] { background: var(--nm-surface-2); color: var(--nm-ink); }
.nm-num__btn:disabled[b-xasps5rsho] { color: var(--nm-muted); cursor: not-allowed; }

.nm-num__field[b-xasps5rsho] {
    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-xasps5rsho] { background: var(--nm-brand-50); }

/* Sizes */
.nm-num--sm .nm-num__btn[b-xasps5rsho] { width: 28px; font-size: 12px; }
.nm-num--sm .nm-num__field[b-xasps5rsho] { height: 28px; font-size: 14px; }
.nm-num--md .nm-num__btn[b-xasps5rsho] { width: 34px; font-size: 14px; }
.nm-num--md .nm-num__field[b-xasps5rsho] { height: 34px; font-size: 14px; }
.nm-num--lg .nm-num__btn[b-xasps5rsho] { width: 40px; font-size: 14px; }
.nm-num--lg .nm-num__field[b-xasps5rsho] { width: 56px; height: 40px; font-size: 15px; }
/* /src/Ui/NmPageHeader.razor.rz.scp.css */
/* NmPageHeader — token-only. */
.nm-pageheader[b-4cyb7432ud] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.nm-pageheader__crumb[b-4cyb7432ud] { margin-bottom: 2px; }

.nm-pageheader__row[b-4cyb7432ud] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nm-pageheader__titles[b-4cyb7432ud] { min-width: 0; }

.nm-pageheader__title[b-4cyb7432ud] {
    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-4cyb7432ud] { color: var(--nm-brand-500); font-size: 20px; }

.nm-pageheader__sub[b-4cyb7432ud] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nm-muted);
}

.nm-pageheader__actions[b-4cyb7432ud] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* /src/Ui/NmPagination.razor.rz.scp.css */
/* NmPagination — token-only. */
.nm-pager[b-tpjgjrckmd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--nm-font);
}

.nm-pager__summary[b-tpjgjrckmd] {
    font-size: 12.5px;
    color: var(--nm-muted);
    font-variant-numeric: tabular-nums;
}

.nm-pager__list[b-tpjgjrckmd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nm-pager__btn[b-tpjgjrckmd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-input);
    background: var(--nm-surface);
    color: var(--nm-ink-2);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--nm-font);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.nm-pager__btn:hover:not(:disabled):not(.is-active)[b-tpjgjrckmd] {
    border-color: var(--nm-border-strong);
    background: var(--nm-surface-2);
}

.nm-pager__btn:disabled[b-tpjgjrckmd] { opacity: .45; cursor: not-allowed; }

.nm-pager__btn.is-active[b-tpjgjrckmd] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
    color: var(--nm-on-brand);
    cursor: default;
}

.nm-pager__gap[b-tpjgjrckmd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--nm-muted);
}
/* /src/Ui/NmPopover.razor.rz.scp.css */
/* NmPopover — token-only. Backdrop trong suốt bắt click-outside (không JS). */
.nm-pop[b-uzmzve3u3k] {
    position: relative;
    display: inline-flex;
}

.nm-pop__trigger[b-uzmzve3u3k] { display: inline-flex; cursor: pointer; }

.nm-pop__backdrop[b-uzmzve3u3k] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
}

.nm-pop__panel[b-uzmzve3u3k] {
    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-uzmzve3u3k]  { left: 0; }
.nm-pop__panel--end[b-uzmzve3u3k]    { right: 0; }
.nm-pop__panel--center[b-uzmzve3u3k] { left: 50%; transform: translateX(-50%); }

.nm-pop__head[b-uzmzve3u3k] {
    padding: 11px 14px;
    border-bottom: 1px solid var(--nm-border);
}
.nm-pop__title[b-uzmzve3u3k] { font-size: 13.5px; font-weight: 700; color: var(--nm-ink); }

.nm-pop__body[b-uzmzve3u3k] {
    padding: 14px;
    font-size: 13.5px;
    color: var(--nm-ink-2);
    line-height: 1.5;
}
/* /src/Ui/NmProgress.razor.rz.scp.css */
/* NmProgress — token-only. */
.nm-progress[b-3vvxz41dli] { font-family: var(--nm-font); width: 100%; }

.nm-progress__head[b-3vvxz41dli] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}
.nm-progress__label[b-3vvxz41dli] { font-size: 12.5px; font-weight: 600; color: var(--nm-ink-2); }
.nm-progress__pct[b-3vvxz41dli] { font-size: 12px; color: var(--nm-muted); font-variant-numeric: tabular-nums; }

.nm-progress__track[b-3vvxz41dli] {
    height: 8px;
    background: var(--nm-surface-2);
    border-radius: var(--nm-r-pill);
    overflow: hidden;
}

.nm-progress__fill[b-3vvxz41dli] {
    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-3vvxz41dli] { background: var(--nm-brand-500); }
.nm-progress--ok .nm-progress__fill[b-3vvxz41dli] { background: var(--nm-ok); }
.nm-progress--warn .nm-progress__fill[b-3vvxz41dli] { background: var(--nm-warn); }
.nm-progress--bad .nm-progress__fill[b-3vvxz41dli] { background: var(--nm-bad); }
.nm-progress--info .nm-progress__fill[b-3vvxz41dli] { background: var(--nm-info); }

/* Indeterminate: dải chạy lướt */
.nm-progress.is-indeterminate .nm-progress__fill[b-3vvxz41dli] {
    width: 40%;
    animation: nm-progress-slide-b-3vvxz41dli 1.1s ease-in-out infinite;
}

@keyframes nm-progress-slide-b-3vvxz41dli {
    0% { margin-left: -40%; }
    100% { margin-left: 100%; }
}
/* /src/Ui/NmRadioGroup.razor.rz.scp.css */
/* NmRadioGroup — token-only. Input gốc ẩn, vẽ vòng radio tuỳ biến. */
.nm-radio-group[b-xmsg25ah99] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.nm-radio-group.is-vertical[b-xmsg25ah99] {
    flex-direction: column;
    gap: 10px;
}

.nm-radio[b-xmsg25ah99] {
    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-xmsg25ah99] { cursor: not-allowed; opacity: .55; }

.nm-radio__input[b-xmsg25ah99] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-radio__mark[b-xmsg25ah99] {
    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-xmsg25ah99]::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-xmsg25ah99] { border-color: var(--nm-brand-500); }
.nm-radio__input:checked + .nm-radio__mark[b-xmsg25ah99]::after { transform: scale(1); }

.nm-radio__input:focus-visible + .nm-radio__mark[b-xmsg25ah99] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-radio__label[b-xmsg25ah99] { line-height: 1.3; }
/* /src/Ui/NmRangeSlider.razor.rz.scp.css */
/* NmRangeSlider — token-only. 2 input range chồng nhau, element pointer-events:none,
   chỉ thumb bắt sự kiện → kéo độc lập. Track + fill vẽ bằng div riêng. */
.nm-rangeslider-wrap[b-058x3d3xbp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.nm-rangeslider[b-058x3d3xbp] {
    position: relative;
    height: 18px;
    width: 100%;
}
.nm-rangeslider.is-disabled[b-058x3d3xbp] { opacity: .5; }

.nm-rangeslider__track[b-058x3d3xbp],
.nm-rangeslider__fill[b-058x3d3xbp] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: var(--nm-r-pill);
    pointer-events: none;
}
.nm-rangeslider__track[b-058x3d3xbp] {
    left: 0;
    right: 0;
    background: var(--nm-border-strong);
}
.nm-rangeslider__fill[b-058x3d3xbp] {
    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-058x3d3xbp] {
    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-058x3d3xbp] { z-index: 3; }
.nm-rangeslider__input--start[b-058x3d3xbp] { z-index: 3; }

/* Track của input để trong suốt (đã có track div riêng) */
.nm-rangeslider__input[b-058x3d3xbp]::-webkit-slider-runnable-track {
    height: 18px;
    background: transparent;
}
.nm-rangeslider__input[b-058x3d3xbp]::-moz-range-track {
    height: 18px;
    background: transparent;
}

/* Thumb — chỉ phần tử này bắt chuột */
.nm-rangeslider__input[b-058x3d3xbp]::-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-058x3d3xbp]::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

.nm-rangeslider__input[b-058x3d3xbp]::-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-058x3d3xbp]::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

.nm-rangeslider.is-disabled .nm-rangeslider__input[b-058x3d3xbp]::-webkit-slider-thumb { cursor: not-allowed; }
.nm-rangeslider.is-disabled .nm-rangeslider__input[b-058x3d3xbp]::-moz-range-thumb { cursor: not-allowed; }

/* Nhãn 2 đầu */
.nm-rangeslider__labels[b-058x3d3xbp] {
    display: flex;
    justify-content: space-between;
    font-family: var(--nm-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
/* /src/Ui/NmRating.razor.rz.scp.css */
/* NmRating — token-only. */
.nm-rating[b-eeprihs17b] {
    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-eeprihs17b] {
    position: relative;
    display: inline-flex;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 2px;
}

.nm-rating__base[b-eeprihs17b] { color: var(--nm-border-strong); }

.nm-rating__fill[b-eeprihs17b] {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #f59e0b;
}

/* Interactive */
.nm-rating__stars--interactive[b-eeprihs17b] { letter-spacing: 0; gap: 2px; }

.nm-rating__btn[b-eeprihs17b] {
    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-eeprihs17b] { transform: scale(1.12); }
.nm-rating__btn .is-on[b-eeprihs17b] { color: #f59e0b; }

.nm-rating__num[b-eeprihs17b] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nm-ink-2);
    font-variant-numeric: tabular-nums;
}
/* /src/Ui/NmSelect.razor.rz.scp.css */
/* NmSelect — token-only. Ẩn caret mặc định, vẽ caret riêng. */
.nm-select-wrap[b-c32dhc4vbu] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-select[b-c32dhc4vbu] {
    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-c32dhc4vbu] { border-color: var(--nm-ink-2); }

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

.nm-select:disabled[b-c32dhc4vbu] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-select.is-invalid[b-c32dhc4vbu] { border-color: var(--nm-bad); }
.nm-select.is-invalid:focus[b-c32dhc4vbu] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

/* Sizes — chừa chỗ caret bên phải */
.nm-select--sm[b-c32dhc4vbu] { padding: 5px 30px 5px 10px; font-size: 12.5px; }
.nm-select--md[b-c32dhc4vbu] { padding: 8px 34px 8px 12px; font-size: 14px; }
.nm-select--lg[b-c32dhc4vbu] { padding: 11px 38px 11px 14px; font-size: 15px; }

.nm-select__caret[b-c32dhc4vbu] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nm-muted);
    pointer-events: none;
    font-size: 12px;
}
/* /src/Ui/NmSkeleton.razor.rz.scp.css */
/* NmSkeleton — token-only. Shimmer dùng gradient trên nền surface-2. */
.nm-skel[b-f5zqnp0gci] {
    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-f5zqnp0gci 1.4s ease infinite;
}

.nm-skel--text[b-f5zqnp0gci] {
    height: 0.85em;
    border-radius: var(--nm-r-input);
    margin: 3px 0;
}

.nm-skel--rect[b-f5zqnp0gci] {
    width: 100%;
    height: 80px;
    border-radius: var(--nm-r-input);
}

.nm-skel--circle[b-f5zqnp0gci] {
    width: 40px;
    height: 40px;
    border-radius: var(--nm-r-pill);
}

.nm-skel-lines[b-f5zqnp0gci] { display: block; }
.nm-skel-lines .nm-skel--text[b-f5zqnp0gci] { width: 100%; }

@keyframes nm-skel-shimmer-b-f5zqnp0gci {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
/* /src/Ui/NmSlider.razor.rz.scp.css */
/* NmSlider — token-only. Track 6px bo tròn, fill theo --nm-slider-pct (webkit) / ::-moz-range-progress (FF). */
.nm-slider-wrap[b-9muywb01p3] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.nm-slider[b-9muywb01p3] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 18px;
    background: transparent;
    cursor: pointer;
    outline: none;
}
.nm-slider:disabled[b-9muywb01p3] { cursor: not-allowed; opacity: .5; }

/* ── WebKit / Blink ── */
.nm-slider[b-9muywb01p3]::-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-9muywb01p3]::-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-9muywb01p3]::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }
.nm-slider:hover:not(:disabled)[b-9muywb01p3]::-webkit-slider-thumb { border-color: var(--nm-brand-600); }

/* ── Firefox ── */
.nm-slider[b-9muywb01p3]::-moz-range-track {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-border-strong);
}
.nm-slider[b-9muywb01p3]::-moz-range-progress {
    height: 6px;
    border-radius: var(--nm-r-pill);
    background: var(--nm-brand-500);
}
.nm-slider[b-9muywb01p3]::-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-9muywb01p3]::-moz-range-thumb { box-shadow: 0 0 0 4px var(--nm-brand-50); }

/* Ô giá trị */
.nm-slider__value[b-9muywb01p3] {
    flex: none;
    min-width: 56px;
    text-align: right;
    font-family: var(--nm-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nm-ink);
    font-variant-numeric: tabular-nums;
}
/* /src/Ui/NmSpinner.razor.rz.scp.css */
/* NmSpinner — token-only. */
.nm-spin-wrap[b-5m5tdqo7cx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nm-font);
}
.nm-spin-wrap.is-center[b-5m5tdqo7cx] { display: flex; justify-content: center; width: 100%; }

.nm-spin[b-5m5tdqo7cx] {
    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-5m5tdqo7cx .65s linear infinite;
}

.nm-spin--sm[b-5m5tdqo7cx] { width: 16px; height: 16px; border-width: 2px; }
.nm-spin--md[b-5m5tdqo7cx] { width: 24px; height: 24px; }
.nm-spin--lg[b-5m5tdqo7cx] { width: 36px; height: 36px; border-width: 3px; }

.nm-spin__label[b-5m5tdqo7cx] { font-size: 14px; color: var(--nm-muted); }

@keyframes nm-spin-rot-b-5m5tdqo7cx { to { transform: rotate(360deg); } }
/* /src/Ui/NmStatGrid.razor.rz.scp.css */
/* NmStatGrid — token-only. */
.nm-statgrid[b-7jk0kxw47d] {
    display: grid;
    gap: 12px;
}
/* /src/Ui/NmSteps.razor.rz.scp.css */
/* NmSteps — token-only. */
.nm-steps[b-rdmiwghyjd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    font-family: var(--nm-font);
}

.nm-step[b-rdmiwghyjd] {
    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-rdmiwghyjd] {
    position: absolute;
    top: 14px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--nm-border);
}
.nm-step--done .nm-step__line[b-rdmiwghyjd],
.nm-step--current .nm-step__line[b-rdmiwghyjd] { background: var(--nm-brand-500); }

.nm-step__dot[b-rdmiwghyjd] {
    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-rdmiwghyjd] { cursor: pointer; }

.nm-step--done .nm-step__dot[b-rdmiwghyjd] {
    background: var(--nm-brand-500);
    border-color: var(--nm-brand-500);
    color: var(--nm-on-brand);
}
.nm-step--current .nm-step__dot[b-rdmiwghyjd] {
    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-rdmiwghyjd] { display: flex; flex-direction: column; gap: 1px; }

.nm-step__label[b-rdmiwghyjd] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nm-ink-2);
}
.nm-step--current .nm-step__label[b-rdmiwghyjd] { color: var(--nm-ink); }

.nm-step__desc[b-rdmiwghyjd] { font-size: 11px; color: var(--nm-muted); }
/* /src/Ui/NmSwitch.razor.rz.scp.css */
/* NmSwitch — token-only. Input gốc ẩn, vẽ track + thumb. */
.nm-switch[b-dt20y91j25] {
    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-dt20y91j25] { cursor: not-allowed; opacity: .55; }

.nm-switch__input[b-dt20y91j25] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-switch__track[b-dt20y91j25] {
    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-dt20y91j25] {
    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-dt20y91j25] { background: var(--nm-brand-500); }
.nm-switch__input:checked + .nm-switch__track .nm-switch__thumb[b-dt20y91j25] { transform: translateX(18px); }

.nm-switch__input:focus-visible + .nm-switch__track[b-dt20y91j25] {
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-switch__label[b-dt20y91j25] { line-height: 1.3; }
/* /src/Ui/NmTabs.razor.rz.scp.css */
/* NmTabs — token-only. */
.nm-tabs__bar[b-9z173vf16e] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--nm-border);
}

.nm-tabs__tab[b-9z173vf16e] {
    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-9z173vf16e] { color: var(--nm-ink); }
.nm-tabs__tab:disabled[b-9z173vf16e] { opacity: .5; cursor: not-allowed; }

.nm-tabs__tab.is-active[b-9z173vf16e] {
    color: var(--nm-brand-600);
    border-bottom-color: var(--nm-brand-500);
}

.nm-tabs__badge[b-9z173vf16e] {
    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-9z173vf16e] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
}

.nm-tabs__panel[b-9z173vf16e] { padding-top: 16px; }
/* /src/Ui/NmTag.razor.rz.scp.css */
/* NmTag — token-only. Tone dùng status vocabulary (giống NmBadge). */
.nm-tag[b-lh0mui3nh9] {
    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-lh0mui3nh9] { padding-right: 10px; }

.nm-tag__text[b-lh0mui3nh9] { display: inline-flex; }

.nm-tag__close[b-lh0mui3nh9] {
    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-lh0mui3nh9] { opacity: 1; background: rgba(0, 0, 0, .08); }

.nm-tag--ok[b-lh0mui3nh9]      { background: var(--nm-ok-soft);      color: var(--nm-ok); }
.nm-tag--warn[b-lh0mui3nh9]    { background: var(--nm-warn-soft);    color: var(--nm-warn); }
.nm-tag--bad[b-lh0mui3nh9]     { background: var(--nm-bad-soft);     color: var(--nm-bad); }
.nm-tag--info[b-lh0mui3nh9]    { background: var(--nm-info-soft);    color: var(--nm-info); }
.nm-tag--pending[b-lh0mui3nh9] { background: var(--nm-pending-soft); color: var(--nm-pending); }
.nm-tag--violet[b-lh0mui3nh9]  { background: var(--nm-violet-soft);  color: var(--nm-violet); }
.nm-tag--neutral[b-lh0mui3nh9] { background: var(--nm-surface-2);    color: var(--nm-ink-2); }
/* /src/Ui/NmTextArea.razor.rz.scp.css */
/* NmTextArea — token-only. Đồng bộ diện mạo với NmInput. */
.nm-textarea[b-wk4384hxp6] {
    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-wk4384hxp6]::placeholder { color: var(--nm-muted); }
.nm-textarea:hover:not(:disabled)[b-wk4384hxp6] { border-color: var(--nm-ink-2); }

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

.nm-textarea:disabled[b-wk4384hxp6] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-textarea.is-invalid[b-wk4384hxp6] { border-color: var(--nm-bad); }
.nm-textarea.is-invalid:focus[b-wk4384hxp6] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }
/* /src/Ui/NmTimeInput.razor.rz.scp.css */
/* NmTimeInput — token-only, diện mạo đồng bộ NmDateInput/NmInput (native <input type="time">). */
.nm-timeinput-wrap[b-9ibiifsr2a] {
    position: relative;
    display: block;
    width: 100%;
}

.nm-timeinput[b-9ibiifsr2a] {
    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-9ibiifsr2a] { border-color: var(--nm-ink-2); }

.nm-timeinput:focus[b-9ibiifsr2a] {
    border-color: var(--nm-brand-500);
    box-shadow: 0 0 0 3px var(--nm-brand-50);
}

.nm-timeinput:disabled[b-9ibiifsr2a] {
    background: var(--nm-surface-2);
    color: var(--nm-muted);
    cursor: not-allowed;
}

.nm-timeinput.is-invalid[b-9ibiifsr2a] { border-color: var(--nm-bad); }
.nm-timeinput.is-invalid:focus[b-9ibiifsr2a] { box-shadow: 0 0 0 3px var(--nm-bad-soft); }

.nm-timeinput--sm[b-9ibiifsr2a] { padding: 5px 10px; font-size: 12.5px; }
.nm-timeinput--md[b-9ibiifsr2a] { padding: 8px 12px; font-size: 14px; }
.nm-timeinput--lg[b-9ibiifsr2a] { padding: 11px 14px; font-size: 15px; }

.nm-timeinput[b-9ibiifsr2a]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.nm-timeinput[b-9ibiifsr2a]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* /src/Ui/NmTimeline.razor.rz.scp.css */
/* NmTimeline — token-only.
   Các .nm-tl__* do NmTimelineItem (component con) render → dùng ::deep để style. */
.nm-timeline[b-9330fqg5vq] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--nm-font);
}

.nm-timeline[b-9330fqg5vq]  .nm-tl__item {
    display: flex;
    gap: 12px;
    position: relative;
    padding-bottom: 18px;
}
.nm-timeline[b-9330fqg5vq]  .nm-tl__item:last-child { padding-bottom: 0; }

/* Đường nối dọc giữa các mốc */
.nm-timeline[b-9330fqg5vq]  .nm-tl__marker {
    position: relative;
    display: flex;
    justify-content: center;
    flex: none;
    width: 18px;
}
.nm-timeline[b-9330fqg5vq]  .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-9330fqg5vq]  .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-9330fqg5vq]  .nm-tl__dot--accent  { background: var(--nm-brand-500); }
.nm-timeline[b-9330fqg5vq]  .nm-tl__dot--ok      { background: var(--nm-ok); }
.nm-timeline[b-9330fqg5vq]  .nm-tl__dot--warn    { background: var(--nm-warn); }
.nm-timeline[b-9330fqg5vq]  .nm-tl__dot--bad     { background: var(--nm-bad); }
.nm-timeline[b-9330fqg5vq]  .nm-tl__dot--info    { background: var(--nm-info); }
.nm-timeline[b-9330fqg5vq]  .nm-tl__dot--pending { background: var(--nm-pending); }

.nm-timeline[b-9330fqg5vq]  .nm-tl__content { flex: 1; min-width: 0; }

.nm-timeline[b-9330fqg5vq]  .nm-tl__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.nm-timeline[b-9330fqg5vq]  .nm-tl__title { font-size: 13.5px; font-weight: 600; color: var(--nm-ink); }
.nm-timeline[b-9330fqg5vq]  .nm-tl__time { font-size: 11.5px; color: var(--nm-muted); white-space: nowrap; }

.nm-timeline[b-9330fqg5vq]  .nm-tl__body {
    margin-top: 2px;
    font-size: 14px;
    color: var(--nm-ink-2);
    line-height: 1.5;
}
/* /src/Ui/NmToolbar.razor.rz.scp.css */
/* NmToolbar — token-only. */
.nm-toolbar[b-40tswz0mhc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.nm-toolbar.is-boxed[b-40tswz0mhc] {
    padding: 12px 14px;
    background: var(--nm-surface);
    border: 1px solid var(--nm-border);
    border-radius: var(--nm-r-card);
}

.nm-toolbar__start[b-40tswz0mhc],
.nm-toolbar__end[b-40tswz0mhc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* /src/Ui/NmTooltip.razor.rz.scp.css */
/* NmTooltip — token-only, thuần CSS (hover/focus). */
.nm-tip[b-ijjklt2hmn] {
    position: relative;
    display: inline-flex;
    align-items: center;
    outline: none;
}

.nm-tip__bubble[b-ijjklt2hmn] {
    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-ijjklt2hmn],
.nm-tip:focus-visible .nm-tip__bubble[b-ijjklt2hmn] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Positions */
.nm-tip--top .nm-tip__bubble[b-ijjklt2hmn]    { bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 2px); }
.nm-tip--top:hover .nm-tip__bubble[b-ijjklt2hmn],
.nm-tip--top:focus-visible .nm-tip__bubble[b-ijjklt2hmn] { transform: translate(-50%, 0); }

.nm-tip--bottom .nm-tip__bubble[b-ijjklt2hmn] { top: calc(100% + 7px); left: 50%; transform: translate(-50%, -2px); }
.nm-tip--bottom:hover .nm-tip__bubble[b-ijjklt2hmn],
.nm-tip--bottom:focus-visible .nm-tip__bubble[b-ijjklt2hmn] { transform: translate(-50%, 0); }

.nm-tip--left .nm-tip__bubble[b-ijjklt2hmn]   { right: calc(100% + 7px); top: 50%; transform: translate(2px, -50%); }
.nm-tip--left:hover .nm-tip__bubble[b-ijjklt2hmn],
.nm-tip--left:focus-visible .nm-tip__bubble[b-ijjklt2hmn] { transform: translate(0, -50%); }

.nm-tip--right .nm-tip__bubble[b-ijjklt2hmn]  { left: calc(100% + 7px); top: 50%; transform: translate(-2px, -50%); }
.nm-tip--right:hover .nm-tip__bubble[b-ijjklt2hmn],
.nm-tip--right:focus-visible .nm-tip__bubble[b-ijjklt2hmn] { transform: translate(0, -50%); }
/* /src/Ui/NmTreeView.razor.rz.scp.css */
/* NmTreeView — token-only. Component đệ quy → mọi cấp chung scope id, selector lồng nhau hoạt động. */
.nm-tree[b-27vr5hvssa] {
    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-27vr5hvssa] {
    padding-left: 14px;
    margin-left: 11px;
    border-left: 1px solid var(--nm-border);
}

.nm-tree__item[b-27vr5hvssa] { position: relative; }

.nm-tree__row[b-27vr5hvssa] {
    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-27vr5hvssa] { background: var(--nm-surface-2); }
.nm-tree__row.is-selected[b-27vr5hvssa] {
    background: var(--nm-brand-50);
    color: var(--nm-brand-700);
    font-weight: 600;
}
.nm-tree__row.is-disabled[b-27vr5hvssa] {
    color: var(--nm-muted);
    cursor: not-allowed;
}
.nm-tree__row.is-disabled:hover[b-27vr5hvssa] { background: transparent; }

.nm-tree__toggle[b-27vr5hvssa] {
    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-27vr5hvssa] { background: var(--nm-border); color: var(--nm-ink); }
.nm-tree__toggle.is-open[b-27vr5hvssa] { transform: rotate(90deg); }
.nm-tree__toggle--leaf[b-27vr5hvssa] { cursor: default; }
.nm-tree__toggle--leaf:hover[b-27vr5hvssa] { background: transparent; }

.nm-tree__icon[b-27vr5hvssa] {
    flex: none;
    font-size: 14px;
    color: var(--nm-ink-2);
}
.nm-tree__row.is-selected .nm-tree__icon[b-27vr5hvssa] { color: var(--nm-brand-600); }

.nm-tree__label[b-27vr5hvssa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}