/* /src/Features/Account/Profile.razor.rz.scp.css */
/* /profile — xem chú thích đầu Profile.razor.

   Chỉ những khối RIÊNG của trang này. Thẻ, nút, ô nhập vẫn dùng lớp chung
   (.vtg-card, .vtg-btn, .vtg-field) — đừng dựng lại ở đây. */

/* ── Thanh mức hoàn thiện ───────────────────────────────────────────── */

.pf-bar[b-i5a4pd7byk] {
    height: 8px;
    margin-top: 14px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-field);
    overflow: hidden;
}

.pf-bar span[b-i5a4pd7byk] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vtg-brand), var(--vtg-brand-strong));
    transition: width .35s ease;
}

/* Danh sách còn thiếu. Mỗi dòng là "thiếu GÌ" + "thì SAO" — vế thứ hai mới là
   thứ khiến người dùng chịu điền, nên nó phải nằm ngay đó chứ không nằm trong
   một câu chung chung ở đầu thẻ. */
.pf-missing[b-i5a4pd7byk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.pf-missing li[b-i5a4pd7byk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline-start: 20px;
    position: relative;
}

.pf-missing li[b-i5a4pd7byk]::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vtg-brand);
}

.pf-missing__what[b-i5a4pd7byk] {
    font-size: 14px;
    font-weight: 700;
    color: var(--vtg-ink);
}

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

/* ── Khối giấy tờ ───────────────────────────────────────────────────── */

.pf-doc[b-i5a4pd7byk] {
    border-radius: 14px;
    padding: 16px;
    background: var(--vtg-field);
}

.pf-doc__head[b-i5a4pd7byk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pf-doc__name[b-i5a4pd7byk] {
    font-size: 14px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.pf-doc__use[b-i5a4pd7byk] {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--vtg-muted);
}

.pf-warn[b-i5a4pd7byk] {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
    background: var(--vtg-brand-soft);
}

/* ── Thanh Lưu dính đáy ─────────────────────────────────────────────── */

.pf-savebar[b-i5a4pd7byk] {
    position: sticky;
    bottom: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;

    border: 1px solid var(--vtg-border);
    border-radius: 16px;
    background: var(--vtg-surface);
    box-shadow: 0 -6px 20px rgba(22, 33, 58, .08);
    transition: background-color .2s ease, border-color .2s ease;
}

/* Còn thay đổi chưa lưu: đổi nền sang sắc thương hiệu rất nhạt. Đây là tín hiệu
   ngoại vi — thấy được bằng khoé mắt khi đang nhìn ô nhập ở giữa trang, khác với
   một dòng chữ mà người ta phải chủ động đọc mới biết. */
.pf-savebar.is-dirty[b-i5a4pd7byk] {
    background: var(--vtg-brand-soft);
    border-color: var(--vtg-brand);
}

.pf-savebar__state[b-i5a4pd7byk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vtg-ink-2);
}

.pf-savebar__idle[b-i5a4pd7byk] {
    color: var(--vtg-muted);
    font-weight: 500;
}

.pf-dot[b-i5a4pd7byk] {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--vtg-brand-strong);
    animation: pf-pulse-b-i5a4pd7byk 1.6s ease-in-out infinite;
}

@keyframes pf-pulse-b-i5a4pd7byk {
    50% { opacity: .35; }
}

/* Người đặt hệ điều hành ở chế độ giảm chuyển động thì chấm đứng yên — nó vẫn
   đủ nghĩa nhờ màu và nhờ dòng chữ bên cạnh. */
@media (prefers-reduced-motion: reduce) {
    .pf-dot[b-i5a4pd7byk] { animation: none; }
    .pf-bar span[b-i5a4pd7byk] { transition: none; }
}

/* Màn hẹp: nhãn trạng thái xuống hàng riêng, hai nút chia đôi hàng dưới —
   nhồi cả ba vào một hàng 360px thì nút Lưu bị bóp còn hai chữ. */
@media (max-width: 519.98px) {
    .pf-savebar[b-i5a4pd7byk] {
        flex-wrap: wrap;
    }

    .pf-savebar__state[b-i5a4pd7byk] {
        flex: 1 0 100%;
    }

    .pf-savebar .vtg-btn[b-i5a4pd7byk] {
        flex: 1 1 0;
    }
}

/* Lỗi tải ảnh đại diện — đỏ và sát ngay dưới nút, không đẩy sang dải thông báo chung ở đầu
   trang vì người dùng đang nhìn vào ô ảnh chứ không nhìn lên trên. */
.pf-avaErr[b-i5a4pd7byk] {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vtg-bad, #B91C1C);
}
/* /src/Features/Admin/AdminAlliance.razor.rz.scp.css */
/* AdminAlliance — liên minh tour: đối tác, quota theo lịch, công nợ hai chiều, chào bán nhận được. */
.admal__kpis[b-d8vv0tuzm0] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .admal__kpis[b-d8vv0tuzm0] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admal__kpi[b-d8vv0tuzm0] { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #E5E9F0; border-left: 4px solid #ea580c; }
.admal__kpi--warn[b-d8vv0tuzm0] { border-left-color: #D97706; }
.admal__kpi--ok[b-d8vv0tuzm0] { border-left-color: #15803D; }
.admal__kpi--bad[b-d8vv0tuzm0] { border-left-color: #B42318; }
.admal__kpi span[b-d8vv0tuzm0] { font-size: 12px; color: var(--vtg-faint); text-transform: uppercase; letter-spacing: .04em; }
.admal__kpi b[b-d8vv0tuzm0] { font-size: 22px; line-height: 1.1; color: var(--vtg-ink); font-variant-numeric: tabular-nums; }
.admal__kpi small[b-d8vv0tuzm0] { font-size: 11.5px; color: var(--vtg-muted); }

.admal__tabs[b-d8vv0tuzm0] { display: flex; gap: 4px; border-bottom: 1px solid #E5E9F0; margin-bottom: 14px; overflow-x: auto; }
.admal__tab[b-d8vv0tuzm0] { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--vtg-muted); cursor: pointer; white-space: nowrap; }
.admal__tab:hover[b-d8vv0tuzm0] { color: var(--vtg-ink); }
.admal__tab.is-on[b-d8vv0tuzm0] { color: #ea580c; border-bottom-color: #ea580c; }
.admal__tabN[b-d8vv0tuzm0] { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #F1F3F7; font-size: 11.5px; color: var(--vtg-muted); text-align: center; }

.admal__table[b-d8vv0tuzm0] { min-width: 960px; }
.admal__table tr.is-off td[b-d8vv0tuzm0] { opacity: .6; }
.admal__sub[b-d8vv0tuzm0] { display: block; font-size: 12px; color: var(--vtg-faint); margin-top: 2px; }
.admal__money[b-d8vv0tuzm0] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admal__net[b-d8vv0tuzm0] { color: #15803D; font-weight: 600; }
.admal__due[b-d8vv0tuzm0] { color: #B42318; font-weight: 700; }
.admal__ok[b-d8vv0tuzm0] { color: #15803D; font-weight: 700; }
.admal__quota[b-d8vv0tuzm0] { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.admal__quota b[b-d8vv0tuzm0] { font-size: 15px; }
.admal__bar[b-d8vv0tuzm0] { position: relative; height: 6px; border-radius: 999px; background: #EEF1F6; margin-top: 6px; min-width: 90px; overflow: hidden; }
.admal__bar i[b-d8vv0tuzm0] { position: absolute; inset: 0 auto 0 0; background: #ea580c; border-radius: 999px; }
.admal__bar.is-full i[b-d8vv0tuzm0] { background: #B42318; }

.admal__foot[b-d8vv0tuzm0] { font-size: 13px; line-height: 1.6; color: var(--vtg-muted); margin-top: 14px; }
.admal__mtitle[b-d8vv0tuzm0] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admal__form[b-d8vv0tuzm0] { display: flex; flex-direction: column; gap: 12px; }
.admal__row2[b-d8vv0tuzm0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admal__row3[b-d8vv0tuzm0] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .admal__row2[b-d8vv0tuzm0], .admal__row3[b-d8vv0tuzm0] { grid-template-columns: 1fr; } }
.admal__hint[b-d8vv0tuzm0] { font-size: 12.5px; color: var(--vtg-muted); line-height: 1.5; margin: -4px 0 0; }
.admal__checklbl[b-d8vv0tuzm0] { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vtg-ink); cursor: pointer; }
.admal__checklbl input[b-d8vv0tuzm0] { width: 16px; height: 16px; accent-color: #ea580c; }

.admal__debt[b-d8vv0tuzm0] { border: 1px solid #E5E9F0; border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.admal__debt__head[b-d8vv0tuzm0] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; flex-wrap: wrap; }
.admal__debt__head:hover[b-d8vv0tuzm0] { background: #FAFBFC; }
.admal__debt__name[b-d8vv0tuzm0] { font-weight: 700; color: var(--vtg-ink); }
.admal__debt__sums[b-d8vv0tuzm0] { display: flex; gap: 18px; flex-wrap: wrap; }
.admal__debt__sums div[b-d8vv0tuzm0] { display: flex; flex-direction: column; gap: 1px; }
.admal__debt__sums span[b-d8vv0tuzm0] { font-size: 11px; color: var(--vtg-faint); text-transform: uppercase; letter-spacing: .04em; }
.admal__debt__sums b[b-d8vv0tuzm0] { font-size: 14px; font-variant-numeric: tabular-nums; }
.admal__debt__body[b-d8vv0tuzm0] { border-top: 1px solid #EEF1F6; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.admal__debt__body h4[b-d8vv0tuzm0] { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--vtg-ink-2, var(--vtg-ink)); }
.admal__debt__acts[b-d8vv0tuzm0] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.admal__loading[b-d8vv0tuzm0] { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 22px; }
.admal__skel[b-d8vv0tuzm0] { height: 42px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%); background-size: 400% 100%; animation: admal-shimmer-b-d8vv0tuzm0 1.3s ease-in-out infinite; }
@keyframes admal-shimmer-b-d8vv0tuzm0 { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* /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__open[b-oai5bzkith] { display: block; font-size: 12px; margin-top: 2px; }

.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/AdminDepartments.razor.rz.scp.css */
/* Ô trống trong bảng ("— chưa gán —", số 0): mờ đi để mắt lướt qua, chỗ có dữ liệu mới bắt mắt. */
.admdep__none[b-8vob4rjir0] { color: var(--vtg-faint); }
/* /src/Features/Admin/AdminEmployeeForm.razor.rz.scp.css */
/* /admin/employees/new và /admin/employees/{id} — trang thêm/sửa tài khoản.

   Khối mật khẩu vừa sinh dùng lớp CHUNG .vtga-secret trong Styles/app.css (màn danh sách
   cũng dùng), không khai lại ở đây. */

/* MỘT cột từ 07/09/2026: bốn khối đã thành thẻ nên không còn gì để xếp cạnh nhau,
   và khối "Tài khoản đăng nhập" trước ở cột phải nay là thẻ "Hoạt động".

   Chặn bề rộng: dòng nhập dài quá 900px thì mắt phải quét ngang mới nối được nhãn
   với ô, mà form này toàn ô ngắn. */
.admf__grid[b-a9wacmfyh3] {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

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

.admf__facts[b-a9wacmfyh3] {
    display: grid;
    gap: 14px 20px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 0;
}

/* Cảnh báo "còn nợ đổi mật khẩu" — sắc thương hiệu, KHÔNG dùng đỏ: đây là trạng
   thái bình thường của tài khoản vừa tạo, không phải hỏng hóc. */
.admf__warn[b-a9wacmfyh3] {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
    background: var(--vtg-brand-soft);
}

/* Bảng lịch sử đăng nhập nằm trong cột phải vốn đã hẹp — thu chữ lại một nấc
   để bốn cột không phải cuộn ngang ở màn 1280px. */
.admf__hist th[b-a9wacmfyh3],
.admf__hist td[b-a9wacmfyh3] {
    font-size: 12.5px;
    padding-block: 8px;
}

/* ── Bố cục 05/09/2026 ────────────────────────────────────────────────
   Chế độ THÊM chỉ có MỘT cột: khối "Tài khoản đăng nhập" bên phải chỉ tồn tại
   khi sửa, để lưới hai cột thì nửa màn bỏ trống. */
/* Ba khối xếp dọc trong cột trái, cách nhau bằng đúng nhịp của lưới. */
.admf__cols[b-a9wacmfyh3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── Xem trước quyền của loại tài khoản ──────────────────────────────── */

.admf__perms[b-a9wacmfyh3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.admf__perm[b-a9wacmfyh3] {
    padding: 4px 10px;
    border-radius: var(--vtg-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

/* Nhiều tấm xếp dọc trong MỘT cột của thẻ chia đôi. */
.admf__stack[b-a9wacmfyh3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── Thao tác tài khoản ──────────────────────────────────────────────────
   Ba việc KHÔNG đi qua nút Lưu: bấm là chạy ngay. Gom vào một tấm riêng có
   viền cảnh báo để không ai nhầm chúng với những ô nhập bên trên — nhất là
   Xoá, thứ duy nhất trong màn này không gỡ lại được. */
.admf__ops[b-a9wacmfyh3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admf__op[b-a9wacmfyh3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-block: 13px;
}

.admf__op + .admf__op[b-a9wacmfyh3] { border-top: 1px solid var(--vtg-border); }

.admf__op > div:first-child[b-a9wacmfyh3] { flex: 1 1 240px; min-width: 0; }

.admf__op .vtg-btn[b-a9wacmfyh3] { flex: 0 0 auto; }

/* ── Ảnh đại diện ────────────────────────────────────────────────────────────
   Ảnh bên trái, nút và giải thích bên phải: đọc theo chiều ngang thì khối này cao 72px thay vì
   chiếm ba dòng như xếp dọc, mà nó chỉ là một ô phụ ở đầu thẻ Cá nhân. */
.admf__ava[b-a9wacmfyh3] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.admf__avaSide[b-a9wacmfyh3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.admf__avaActs[b-a9wacmfyh3] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* position: relative de o chon tep an (.vtg-fileHidden, position:absolute) neo vao chinh cai
   nut nay, khong troi ra mot to tien co position nao do o tan dau trang. */
.admf__ava label[b-a9wacmfyh3] {
    position: relative;
    cursor: pointer;
}

.admf__ava label.is-busy[b-a9wacmfyh3] {
    opacity: .6;
    pointer-events: none;
}

.admf__avaErr[b-a9wacmfyh3] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-bad, #B91C1C);
}
/* /src/Features/Admin/AdminEmployees.razor.rz.scp.css */
/* /admin/employees — chỉ DANH SÁCH. Biểu mẫu thêm/sửa ở trang riêng
   (AdminEmployeeForm), nên ở đây không còn bố cục hai cột.

   Khối mật khẩu vừa sinh dùng lớp CHUNG .vtga-secret trong Styles/app.css —
   trang sửa cũng dùng nó, mà CSS scoped không xuyên qua ranh giới component. */

.adme__search[b-i5njdfn6vv] {
    margin-inline-start: auto;
    max-width: 280px;
}

@media (max-width: 559.98px) {
    .adme__search[b-i5njdfn6vv] {
        margin-inline-start: 0;
        max-width: none;
        width: 100%;
    }
}

.adme__pager[b-i5njdfn6vv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ── Số liệu nhanh đầu trang ─────────────────────────────────────────── */

.adme__stats[b-i5njdfn6vv] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 16px;
}

.adme__stat[b-i5njdfn6vv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid var(--vtg-border);
    border-radius: 14px;
    background: var(--vtg-surface);
}

.adme__stat span[b-i5njdfn6vv] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-muted);
}

.adme__stat strong[b-i5njdfn6vv] {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--vtg-ink);
    font-variant-numeric: tabular-nums;
}

/* ── Bộ lọc ──────────────────────────────────────────────────────────── */

.adme__filters[b-i5njdfn6vv] {
    flex-wrap: wrap;
    gap: 10px;
}

.adme__sel[b-i5njdfn6vv] { max-width: 220px; }

/* ── Chọn nhiều dòng ─────────────────────────────────────────────────── */

.adme__pick[b-i5njdfn6vv] {
    width: 40px;
    text-align: center;
}

.adme__pick input[b-i5njdfn6vv] { cursor: pointer; }

/* Dòng đang chọn: nền sắc thương hiệu rất nhạt. Đủ để đếm bằng mắt xem đang
   chọn những ai, chưa đủ để át nội dung. */
.adme__rowPicked > td[b-i5njdfn6vv] { background: var(--vtg-brand-soft); }

.adme__bulk[b-i5njdfn6vv] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--vtg-border);
    background: var(--vtg-field);
}

.adme__bulkCount[b-i5njdfn6vv] {
    margin-inline-end: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vtg-ink);
}

/* ── Tiêu đề cột sắp xếp được ────────────────────────────────────────────
   Là <button> chứ không phải <th> gắn onclick: bàn phím phải tab tới và Enter
   được, mà th thì không nhận focus. */
.adme__sort[b-i5njdfn6vv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

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

/* "Chưa xếp" ở cột Công việc: mờ như ô trống nhưng vẫn bấm được sang trang sửa — người ta nhìn
   thấy chỗ thiếu thì thường muốn điền ngay tại đó. */
.adme__unset[b-i5njdfn6vv] {
    font-size: 12.5px;
    color: var(--vtg-faint);
    text-decoration: none;
    border-bottom: 1px dotted var(--vtg-border);
}

.adme__unset:hover[b-i5njdfn6vv] { color: var(--vtg-brand-strong); border-bottom-color: currentColor; }


/* ── Ba cột tách ra khỏi ô nhân viên ──────────────────────────────────
   Mỗi cột đúng MỘT dòng. Bề rộng ghim bằng min/max thay vì để bảng tự chia:
   email dài nhất sẽ giành hết chỗ của mọi cột khác nếu thả tự do. */

.adme__colCode[b-i5njdfn6vv] { width: 1%; white-space: nowrap; }

.adme__colUser[b-i5njdfn6vv] { width: 1%; white-space: nowrap; }

.adme__colMail[b-i5njdfn6vv] { max-width: 240px; }

.adme__user[b-i5njdfn6vv] {
    font-size: 13px;
    font-weight: 650;
    color: var(--vtg-ink);
}

/* Email dài hơn ô thì cắt bằng dấu ba chấm, KHÔNG xuống dòng — xuống dòng là hàng lại
   cao hai dòng, đúng cái vừa sửa. Giá trị đầy đủ nằm ở tooltip và ở trang sửa. */
.adme__mail[b-i5njdfn6vv] {
    display: block;
    font-size: 12.5px;
    color: var(--vtg-muted);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Ô chưa có dữ liệu: gạch ngang mờ thay vì để trống, để phân biệt "chưa khai" với "lỗi hiển thị". */
.adme__none[b-i5njdfn6vv] { color: var(--vtg-faint); }

/* Ảnh đại diện đứng cạnh tên trong cùng một ô. align-items:center chứ không baseline: ô tròn
   không có đường cơ sở chữ nên baseline đẩy nó tụt xuống dưới dòng tên. */
.adme__person[b-i5njdfn6vv] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* ── Mỗi ô ĐÚNG MỘT DÒNG ──────────────────────────────────────────────────
   Chiều cao hàng nhân với số nhân viên, nên một dòng thừa trong ô là mất nguyên nửa màn hình khi
   danh sách dài. Luật chung: cấm xuống dòng, dài quá thì cắt bằng ba chấm và để giá trị đầy đủ ở
   tooltip + trang sửa. Cột nào cũng vậy, kể cả cột chưa từng tràn — thêm một người tên dài là đủ
   để nó tràn, mà lúc đó không ai nhớ ra chỗ này. */
.adme__colJob[b-i5njdfn6vv],
.adme__colDept[b-i5njdfn6vv],
.adme__colRank[b-i5njdfn6vv],
.adme__colSeen[b-i5njdfn6vv] {
    white-space: nowrap;
}

/* Ba cột nhân sự: ghim trần bề rộng, dài hơn thì cắt. Thả tự do thì một chức danh dài
   ("Phó trưởng phòng Kinh doanh miền Nam") giành hết chỗ của các cột còn lại. */
.adme__colJob[b-i5njdfn6vv] { max-width: 190px; }
.adme__colDept[b-i5njdfn6vv] { max-width: 170px; }
.adme__colRank[b-i5njdfn6vv] { max-width: 140px; }

/* Cắt bằng ba chấm. Phải là block/inline-block mới cắt được — text-overflow không có tác dụng
   trên phần tử inline thuần. */
.adme__clip[b-i5njdfn6vv] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ngày đăng nhập gần nhất: số đều cột để so hai hàng bằng mắt, không lệch bậc. */
.adme__seen[b-i5njdfn6vv] {
    font-size: 12.5px;
    color: var(--vtg-muted);
    font-variant-numeric: tabular-nums;
}

/* Còn nợ đổi mật khẩu — trước là cụm chữ nối vào cuối câu ngày giờ, đủ dài để đẩy ô xuống dòng.
   Nay là một dấu nhỏ đứng cạnh ngày; nghĩa đầy đủ nằm ở tooltip của cả ô. */
.adme__owed[b-i5njdfn6vv] {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-inline-start: 6px;
    border-radius: 50%;
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    font-weight: 800;
    vertical-align: middle;
}

/* Tên người: cắt ba chấm thay vì xuống dòng. min-width:0 là BẮT BUỘC — phần tử flex mặc định
   không co dưới nội dung của nó, thiếu dòng này thì ellipsis không bao giờ chạy. */
.adme__person > a[b-i5njdfn6vv] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cột tên: có trần thì tên dài bị cắt ba chấm; không có trần thì bảng tự nong cột ra cho vừa tên
   dài nhất (bố cục bảng mặc định là auto), đẩy mọi cột sau ra ngoài tầm nhìn. */
.adme__colName[b-i5njdfn6vv] { max-width: 220px; }
/* /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);
}


/* =====================================================================
   Dashboard — khối thêm ngày 05/09/2026. Xem chú thích đầu AdminHome.razor.

   Thứ tự thị giác cố ý: hàng đợi việc NẶNG nhất (viền cam, số to), con số tổng
   nhạt hơn, lối tắt nhạt nhất. Ba khối cùng độ nổi thì trang lại thành mục lục
   như bản cũ, chỉ dài hơn.
   ===================================================================== */

.admh__skeleton[b-rtqxi83b9f] {
    height: 96px;
    margin-bottom: 26px;
    border-radius: 16px;
    background: var(--vtg-field);
    animation: admh-pulse-b-rtqxi83b9f 1.4s ease-in-out infinite;
}

@keyframes admh-pulse-b-rtqxi83b9f {
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .admh__skeleton[b-rtqxi83b9f] { animation: none; }
}

/* ── Cần xử lý ───────────────────────────────────────────────────────── */

.admh__todo[b-rtqxi83b9f] { margin-bottom: 26px; }

.admh__todoTitle[b-rtqxi83b9f] {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vtg-brand-strong);
}

.admh__todoList[b-rtqxi83b9f] {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.admh__todoItem[b-rtqxi83b9f] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--vtg-brand);
    border-radius: 14px;
    background: var(--vtg-brand-soft);
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

.admh__todoItem:hover[b-rtqxi83b9f] {
    box-shadow: 0 6px 18px rgba(242, 117, 27, .18);
    transform: translateY(-1px);
}

/* Con số đứng TRƯỚC chữ và to hẳn: thứ người trực cần biết trước tiên là "bao
   nhiêu", còn "cái gì" thì đọc sau nửa giây cũng không sao. */
.admh__todoCount[b-rtqxi83b9f] {
    flex: 0 0 auto;
    min-width: 44px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--vtg-brand-strong);
    font-variant-numeric: tabular-nums;
}

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

.admh__todoLabel[b-rtqxi83b9f] {
    font-size: 14px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admh__todoHint[b-rtqxi83b9f] {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--vtg-ink-2);
}

/* ── Con số tổng ─────────────────────────────────────────────────────── */

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

.admh__stat[b-rtqxi83b9f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--vtg-border);
    border-radius: 14px;
    background: var(--vtg-surface);
    text-decoration: none;
    transition: border-color .15s ease;
}

.admh__stat:hover[b-rtqxi83b9f] { border-color: var(--vtg-brand); }

.admh__statLabel[b-rtqxi83b9f] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-muted);
}

.admh__statValue[b-rtqxi83b9f] {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--vtg-ink);
    font-variant-numeric: tabular-nums;
}

.admh__statSub[b-rtqxi83b9f] {
    font-size: 12.5px;
    color: var(--vtg-ink-2);
}

/* ── Trạng thái rìa ──────────────────────────────────────────────────── */

.admh__partial[b-rtqxi83b9f] {
    margin-bottom: 26px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--vtg-ink-2);
    background: var(--vtg-field);
}

.admh__empty[b-rtqxi83b9f] {
    padding: 32px;
    border: 1px solid var(--vtg-border);
    border-radius: 16px;
    background: var(--vtg-surface);
}
/* /src/Features/Admin/AdminInquiryQuotes.razor.rz.scp.css */
.admq__head[b-ydyegbmcuw] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.admq__n[b-ydyegbmcuw] { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #F1F3F7; font-size: 11.5px; color: var(--vtg-muted); text-align: center; }
.admq__list[b-ydyegbmcuw] { display: flex; flex-direction: column; gap: 10px; }
.admq__card[b-ydyegbmcuw] { border: 1px solid #E5E9F0; border-radius: 10px; padding: 10px 12px; background: #fff; }
.admq__card.is-hot[b-ydyegbmcuw] { border-color: #86EFAC; background: #F0FDF4; }
.admq__row[b-ydyegbmcuw] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admq__ver[b-ydyegbmcuw] { font-size: 12px; color: var(--vtg-faint); margin-right: 6px; }
.admq__title[b-ydyegbmcuw] { color: var(--vtg-ink); margin-right: 8px; }
.admq__total[b-ydyegbmcuw] { text-align: right; display: flex; flex-direction: column; }
.admq__total b[b-ydyegbmcuw] { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--vtg-ink); }
.admq__total small[b-ydyegbmcuw] { font-size: 11.5px; color: var(--vtg-muted); }
.admq__meta[b-ydyegbmcuw] { font-size: 12.5px; color: var(--vtg-muted); margin-top: 4px; line-height: 1.5; }
.admq__resp[b-ydyegbmcuw] { font-size: 12.5px; color: var(--vtg-ink); margin-top: 4px; }
.admq__acts[b-ydyegbmcuw] { margin-top: 8px; flex-wrap: wrap; }
.admq__ok[b-ydyegbmcuw] { color: #15803D; font-weight: 600; }
.admq__bad[b-ydyegbmcuw] { color: #B42318; font-weight: 600; }
.admq__mtitle[b-ydyegbmcuw] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admq__form[b-ydyegbmcuw] { display: flex; flex-direction: column; gap: 12px; }
.admq__row2[b-ydyegbmcuw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admq__row4[b-ydyegbmcuw] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .admq__row2[b-ydyegbmcuw], .admq__row4[b-ydyegbmcuw] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admq__lines[b-ydyegbmcuw] { border: 1px dashed #E5E9F0; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.admq__line[b-ydyegbmcuw] { display: grid; grid-template-columns: minmax(0, 1fr) 80px 150px 32px; gap: 8px; align-items: center; }
.vtga-in--sm[b-ydyegbmcuw] { padding: 6px 8px; font-size: 13px; }
.admq__qty[b-ydyegbmcuw] { text-align: right; }
/* O gia la <MoneyInput>: nam trong component con nen khong mang thuoc tinh scope cua trang. */
[b-ydyegbmcuw] .admq__price { width: 150px; text-align: right; }
.admq__sum[b-ydyegbmcuw] { font-size: 13.5px; color: var(--vtg-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admq__sum b[b-ydyegbmcuw] { font-size: 15px; font-variant-numeric: tabular-nums; }
.admq__sub[b-ydyegbmcuw] { color: var(--vtg-muted); display: inline-flex; align-items: center; gap: 6px; }
.admq__ul[b-ydyegbmcuw] { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.admq__pre[b-ydyegbmcuw] { white-space: pre-wrap; }

/* Sao chép luật admi__* của AdminTourInquiries (CSS isolation không kế thừa sang component con). */
.admi__dl[b-ydyegbmcuw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 20px;
    margin: 14px 0 0;
}
.admi__dl[b-ydyegbmcuw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admi__dl dt[b-ydyegbmcuw] {
    font-size: 12px;
    font-weight: 600;
    color: var(--vtg-muted);
    margin-bottom: 3px;
}
.admi__dl dd[b-ydyegbmcuw] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-ink);
    word-break: break-word;
}
.admi__sec[b-ydyegbmcuw] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--vtg-border);
}
.admi__sec__title[b-ydyegbmcuw] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vtg-muted);
    margin-bottom: 8px;
}
.admi__quote[b-ydyegbmcuw] {
    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;
}

/* ── Chương trình theo ngày trên báo giá ───────────────────────────── */
.admq__days[b-ydyegbmcuw] { gap: 10px; }
.admq__dayacts[b-ydyegbmcuw] { display: flex; flex-wrap: wrap; gap: 6px; }
.admq__pick[b-ydyegbmcuw] { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 8px; background: #FAFBFD; border: 1px solid #E5E9F0; }
.admq__pickul[b-ydyegbmcuw] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; }
.admq__pickbtn[b-ydyegbmcuw] { width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; color: var(--vtg-ink); cursor: pointer; }
.admq__pickbtn:hover[b-ydyegbmcuw] { background: #FFF7ED; }
.admq__pickbtn small[b-ydyegbmcuw] { color: var(--vtg-faint); }
.admq__day[b-ydyegbmcuw] { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid #E5E9F0; background: #fff; }
.admq__dayhead[b-ydyegbmcuw] { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; gap: 8px; align-items: center; }
.admq__daynum[b-ydyegbmcuw] { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; background: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }
.admq__daymeta[b-ydyegbmcuw] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.admq__act[b-ydyegbmcuw] { display: grid; grid-template-columns: 72px minmax(0, 2fr) minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; }
.admq__addact[b-ydyegbmcuw] { align-self: flex-start; }
.admq__dayol[b-ydyegbmcuw] { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.admq__daydesc[b-ydyegbmcuw] { margin: 2px 0; color: var(--vtg-ink); white-space: pre-wrap; }
@media (max-width: 640px) { .admq__daymeta[b-ydyegbmcuw] { grid-template-columns: 1fr; } .admq__act[b-ydyegbmcuw] { grid-template-columns: 64px minmax(0, 1fr) 32px; } .admq__act input:nth-child(3)[b-ydyegbmcuw] { grid-column: 2; } }

/* Ảnh minh hoạ theo ngày trên báo giá — ô nhỏ đều nhau, một ngày vài tấm. */
.admq__shotsBox[b-ydyegbmcuw] { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.admq__shotshead[b-ydyegbmcuw] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admq__shots[b-ydyegbmcuw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.admq__shot[b-ydyegbmcuw] {
    display: flex; flex-direction: column; gap: 4px; padding: 6px;
    border: 1px solid var(--vtg-border); border-radius: 10px; background: var(--vtg-surface);
}
.admq__shot img[b-ydyegbmcuw] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; display: block; }
.admq__shotBtns[b-ydyegbmcuw] { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; }
/* /src/Features/Admin/AdminJobTitles.razor.rz.scp.css */
/* Ô lọc nằm NGAY DƯỚI đầu panel, tách khỏi bảng bằng một đường kẻ — để nó trôi lẫn vào bảng thì
   người dùng tưởng đang nhìn một dòng dữ liệu. */
.admjt__filters[b-1xyjt14zko] {
    border-bottom: 1px solid var(--vtg-border);
    max-width: 320px;
}

.admjt__none[b-1xyjt14zko] { color: var(--vtg-faint); }
/* /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 */
/* Bảng chiếm trọn bề ngang — form thêm/sửa đã dọn vào modal ở cuối trang. */

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

.admc__emptyBtn[b-rv8g61jkp1] { margin-top: 14px; }

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

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

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

/* ── Modal thêm/sửa danh mục ─────────────────────────────────────────── */

.admc__ovl[b-rv8g61jkp1] {
    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;
}

.admc__box[b-rv8g61jkp1] {
    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);
}

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

.admc__boxHeadText[b-rv8g61jkp1] { min-width: 0; }

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

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

.admc__x[b-rv8g61jkp1] {
    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;
}

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

.admc__boxBody[b-rv8g61jkp1] {
    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ủ. */
.admc__boxNote[b-rv8g61jkp1] { margin-bottom: 14px; }

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

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

.admc__span2[b-rv8g61jkp1] { grid-column: 1 / -1; }

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

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

@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. */
    .admc__panelHint[b-rv8g61jkp1] {
        margin-inline-start: 0;
        text-align: start;
        max-width: none;
    }
}
/* /src/Features/Admin/AdminRanks.razor.rz.scp.css */
.admrank__color[b-v1c4zu6ech] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ô màu của trình duyệt vốn có viền và đệm riêng mỗi nơi một kiểu — ép về đúng một ô vuông
   bo góc cho khớp chiều cao ô nhập bên cạnh. */
.admrank__swatch[b-v1c4zu6ech] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--vtg-border);
    border-radius: 10px;
    background: var(--vtg-surface);
    cursor: pointer;
}

.admrank__swatch[b-v1c4zu6ech]::-webkit-color-swatch-wrapper { padding: 0; }
.admrank__swatch[b-v1c4zu6ech]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.admrank__swatch[b-v1c4zu6ech]::-moz-color-swatch { border: 0; border-radius: 7px; }

/* Chấm màu trước tên cấp bậc trong bảng. */
.admrank__dot[b-v1c4zu6ech] {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-inline-end: 7px;
    vertical-align: middle;
}

.admrank__none[b-v1c4zu6ech] { color: var(--vtg-faint); }
/* /src/Features/Admin/AdminTourBookingDetail.razor.rz.scp.css */
.admtd__crumb[b-gefe96wqtq] { margin: 0 0 6px; font-size: 13px; }

.admtd__title[b-gefe96wqtq] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admtd__danger[b-gefe96wqtq] {
    background: #B42318;
    color: #fff;
    border-color: #B42318;
}

.admtd__danger:hover:not(:disabled)[b-gefe96wqtq] { background: #9A1C13; border-color: #9A1C13; }

/* ── Lưới 2 cột ─────────────────────────────────────────────────────── */

.admtd__grid[b-gefe96wqtq] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap: 16px;
    align-items: start;
}

.admtd__col[b-gefe96wqtq] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .admtd__grid[b-gefe96wqtq] { grid-template-columns: 1fr; }
}

/* ── Tour & lịch ────────────────────────────────────────────────────── */

.admtd__tourname[b-gefe96wqtq] {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--vtg-ink);
}

.admtd__dl[b-gefe96wqtq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    margin: 0 0 12px;
}

.admtd__dl > div[b-gefe96wqtq] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed #E5E9F0;
    font-size: 13.5px;
}

.admtd__dl dt[b-gefe96wqtq] { color: var(--vtg-muted); }
.admtd__dl dd[b-gefe96wqtq] { margin: 0; font-weight: 600; color: var(--vtg-ink); text-align: right; }

.admtd__pax[b-gefe96wqtq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.admtd__pax > div[b-gefe96wqtq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid #E5E9F0;
    border-radius: 10px;
    background: #FAFBFD;
}

.admtd__pax span[b-gefe96wqtq] { font-size: 12px; color: var(--vtg-faint); }
.admtd__pax b[b-gefe96wqtq] { font-size: 18px; color: var(--vtg-ink); }
.admtd__pax small[b-gefe96wqtq] { font-size: 11.5px; color: var(--vtg-muted); }
.admtd__total[b-gefe96wqtq] { font-size: 15px !important; }

@media (max-width: 640px) {
    .admtd__pax[b-gefe96wqtq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admtd__dl[b-gefe96wqtq] { grid-template-columns: 1fr; }
}

.admtd__mail[b-gefe96wqtq] { word-break: break-all; }

/* ── Ghi chú ────────────────────────────────────────────────────────── */

.admtd__notes[b-gefe96wqtq] {
    margin: 0 0 12px;
    padding: 0 0 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--vtg-ink);
}

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

.admtd__noteform input[b-gefe96wqtq] { flex: 1; }

/* ── Thanh toán ─────────────────────────────────────────────────────── */

.admtd__sum[b-gefe96wqtq] {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admtd__sum > div[b-gefe96wqtq] { display: flex; flex-direction: column; gap: 2px; }
.admtd__sum span[b-gefe96wqtq] { font-size: 12px; color: var(--vtg-faint); }
.admtd__sum b[b-gefe96wqtq] { font-size: 17px; color: var(--vtg-ink); }

.admtd__ok[b-gefe96wqtq] { color: #15803D; }
.admtd__bad[b-gefe96wqtq] { color: #B42318; }
.admtd__muted[b-gefe96wqtq] { color: var(--vtg-faint); }

.admtd__inst[b-gefe96wqtq] { min-width: 640px; }
.admtd__inst tr.is-overdue td[b-gefe96wqtq] { background: #FFF7F5; }

.admtd__recv[b-gefe96wqtq] { display: flex; flex-direction: column; gap: 1px; }
.admtd__recv small[b-gefe96wqtq] { font-size: 11.5px; color: var(--vtg-faint); }

.admtd__fee[b-gefe96wqtq] {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FFF7F5;
    border: 1px solid #FECDCA;
    font-size: 13.5px;
}

.admtd__fee > div[b-gefe96wqtq] { display: flex; flex-direction: column; gap: 2px; }
.admtd__fee span[b-gefe96wqtq] { font-size: 12px; color: var(--vtg-faint); }

.admtd__hint[b-gefe96wqtq] { margin-top: 12px; }

/* ── Bậc phí ────────────────────────────────────────────────────────── */

.admtd__tiers[b-gefe96wqtq] {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admtd__tiers li[b-gefe96wqtq] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid #E5E9F0;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--vtg-ink);
}

/* ── Modal ──────────────────────────────────────────────────────────── */

.admtd__mtitle[b-gefe96wqtq] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }

.admtd__form[b-gefe96wqtq] { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.admtd__prev[b-gefe96wqtq] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 6px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FAFBFD;
    border: 1px solid #E5E9F0;
}

.admtd__prev > div[b-gefe96wqtq] { display: flex; flex-direction: column; gap: 2px; }
.admtd__prev small[b-gefe96wqtq] { font-size: 11.5px; color: var(--vtg-faint); }
.admtd__prev b[b-gefe96wqtq] { font-size: 14px; color: var(--vtg-ink); }

@media (max-width: 560px) {
    .admtd__prev[b-gefe96wqtq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.admtd__waive[b-gefe96wqtq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13.5px;
    color: var(--vtg-ink);
    cursor: pointer;
}

.admtd__waive input[b-gefe96wqtq] { width: 16px; height: 16px; margin-top: 2px; accent-color: #ea580c; }

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

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

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

@keyframes admtd-shimmer-b-gefe96wqtq {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Sổ hoàn tiền ─────────────────────────────────────────────────────── */
.admtd__refunds[b-gefe96wqtq] { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.admtd__refundhead[b-gefe96wqtq] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admtd__mtitle[b-gefe96wqtq] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admtd__form[b-gefe96wqtq] { display: flex; flex-direction: column; gap: 12px; }
.admtd__row2[b-gefe96wqtq] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .admtd__row2[b-gefe96wqtq] { grid-template-columns: 1fr; } }
/* /src/Features/Admin/AdminTourBookings.razor.rz.scp.css */
.admtb__table[b-z6f2yvhdru] { min-width: 1180px; }

.admtb__table tr.is-overdue td[b-z6f2yvhdru] { background: #FFF7F5; }

.admtb__code[b-z6f2yvhdru] {
    display: block;
    text-decoration: none;
    color: var(--vtg-ink);
}

.admtb__code:hover[b-z6f2yvhdru] { text-decoration: underline; }

.admtb__sub[b-z6f2yvhdru] {
    display: block;
    font-size: 12px;
    color: var(--vtg-faint);
    margin-top: 2px;
    word-break: break-word;
}

.admtb__tour[b-z6f2yvhdru],
.admtb__who[b-z6f2yvhdru] {
    display: block;
    font-weight: 600;
    color: var(--vtg-ink);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admtb__paid[b-z6f2yvhdru] { color: #15803D; font-weight: 600; }

.admtb__due[b-z6f2yvhdru] { color: #B42318; font-weight: 700; }

.admtb__next[b-z6f2yvhdru] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.admtb__check[b-z6f2yvhdru] { display: flex; align-items: flex-end; }

.admtb__checklbl[b-z6f2yvhdru] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--vtg-ink);
    padding-bottom: 9px;
    cursor: pointer;
}

.admtb__checklbl input[b-z6f2yvhdru] { width: 16px; height: 16px; accent-color: #ea580c; }

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

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

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

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

@keyframes admtb-shimmer-b-z6f2yvhdru {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.admtb__ally[b-z6f2yvhdru] { display: inline-block; margin-top: 4px; font-size: 11px; }
/* /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; }

/* Cột STT đã chuyển sang lớp dùng chung .vtga-table__stt (Styles/app.css) — bảng này
   từng là bảng DUY NHẤT có STT nên tự khai lớp riêng. Giữ hai bản là chắc chắn lệch nhau. */

.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/AdminTourCosting.razor.rz.scp.css */
/* AdminTourCosting — bảng tính giá vốn theo lịch. */
.admc__crumb[b-kln548jxht] { margin: 0 0 4px; font-size: 12.5px; color: var(--vtg-muted); }
.admc__crumb a[b-kln548jxht] { color: inherit; text-decoration: none; }
.admc__crumb a:hover[b-kln548jxht] { color: #ea580c; }
.admc__kpis[b-kln548jxht] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .admc__kpis[b-kln548jxht] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admc__kpi[b-kln548jxht] { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #E5E9F0; border-left: 4px solid #ea580c; }
.admc__kpi--ok[b-kln548jxht] { border-left-color: #15803D; }
.admc__kpi--warn[b-kln548jxht] { border-left-color: #D97706; }
.admc__kpi--bad[b-kln548jxht] { border-left-color: #B42318; }
.admc__kpi span[b-kln548jxht] { font-size: 12px; color: var(--vtg-faint); text-transform: uppercase; letter-spacing: .04em; }
.admc__kpi b[b-kln548jxht] { font-size: 22px; line-height: 1.1; color: var(--vtg-ink); font-variant-numeric: tabular-nums; }
.admc__kpi small[b-kln548jxht] { font-size: 11.5px; color: var(--vtg-muted); }

.admc__grid[b-kln548jxht] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .admc__grid[b-kln548jxht] { grid-template-columns: 1fr; } }
.admc__main[b-kln548jxht], .admc__side[b-kln548jxht] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.admc__n[b-kln548jxht] { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #F1F3F7; font-size: 11.5px; color: var(--vtg-muted); text-align: center; }

.admc__table[b-kln548jxht] { min-width: 960px; }
.admc__table td[b-kln548jxht] { vertical-align: middle; }
.admc__table tfoot td[b-kln548jxht] { background: #FAFBFC; font-size: 13px; color: var(--vtg-muted); }
.admc__table tfoot b[b-kln548jxht] { color: var(--vtg-ink); font-variant-numeric: tabular-nums; }
.vtga-in--sm[b-kln548jxht] { padding: 6px 8px; font-size: 13px; }
/* Don gia va ty gia la <MoneyInput> — trong component con nen phai ::deep. */
[b-kln548jxht] .admc__num { width: 130px; text-align: right; }
.admc__qty[b-kln548jxht] { width: 72px; text-align: right; }
.admc__money[b-kln548jxht] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.admc__sub[b-kln548jxht] { display: block; font-size: 11.5px; color: var(--vtg-faint); }
.admc__ok[b-kln548jxht] { color: #15803D; font-weight: 600; }
.admc__bad[b-kln548jxht] { color: #B42318; font-weight: 600; }
.admc__table tr.is-target td[b-kln548jxht], .vtga-table tr.is-target td[b-kln548jxht] { background: #FFF7ED; }
.admc__form[b-kln548jxht] { display: flex; flex-direction: column; gap: 12px; }
.admc__hint[b-kln548jxht] { margin: 4px 0 0; font-size: 12px; color: var(--vtg-muted); line-height: 1.5; }
.admc__foot[b-kln548jxht] { font-size: 13px; line-height: 1.6; color: var(--vtg-muted); padding: 0 14px 14px; margin: 0; }
.admc__dl[b-kln548jxht] { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.admc__dl div[b-kln548jxht] { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.admc__dl dt[b-kln548jxht] { color: var(--vtg-muted); }
.admc__dl dd[b-kln548jxht] { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.admc__loading[b-kln548jxht] { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 22px; }
.admc__skel[b-kln548jxht] { height: 42px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%); background-size: 400% 100%; animation: admc-shimmer-b-kln548jxht 1.3s ease-in-out infinite; }
@keyframes admc-shimmer-b-kln548jxht { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Ngoại tệ · NCC · dự toán theo nhóm ───────────────────────────────── */
.admc__curwrap[b-kln548jxht] { display: flex; gap: 4px; align-items: center; }
.admc__cur[b-kln548jxht] { width: 74px; }
[b-kln548jxht] .admc__rate { width: 96px; }
.admc__sup[b-kln548jxht] { margin-top: 4px; }
.admc__two[b-kln548jxht] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.admc__row2[b-kln548jxht] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 960px) { .admc__two[b-kln548jxht] { grid-template-columns: 1fr; } }
/* /src/Features/Admin/AdminTourDashboard.razor.rz.scp.css */
/* AdminTourDashboard — bảng điều hành tour.

   Chỉ dùng token --vtg-* / --nm-* (Styles/tokens.css), KHÔNG khai hex tại chỗ. Bản trước
   hard-code #ea580c — cam của NGỌC MAI, không phải cam #F2751B của Vitamin Go — nên cả
   trang lệch tông so với phần còn lại của khu quản trị.

   Khung chờ dùng .vtga-skels/.vtga-skel dùng chung, trang này không tự khai lại. */

.admtd__stamp[b-aze0odwhx1] {
    margin-inline-start: auto;
    font-size: 12px;
    line-height: 1.4;
    color: var(--vtg-faint);
    text-align: end;
    max-width: 430px;
}

.admtd__muted[b-aze0odwhx1] { font-size: 13px; color: var(--vtg-muted); }

/* ── Hai thẻ: Điều hành / Phân tích ───────────────────────────────────── */

.admtd__tabs[b-aze0odwhx1] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
    border: 1px solid var(--vtg-border);
}

.admtd__tabs button[b-aze0odwhx1] {
    border: 0;
    background: none;
    padding: 5px 14px;
    border-radius: var(--vtg-r-pill);
    font-size: 13px;
    font-weight: 650;
    color: var(--vtg-muted);
    cursor: pointer;
}

.admtd__tabs button.is-on[b-aze0odwhx1] { background: var(--vtg-surface); color: var(--vtg-ink); box-shadow: var(--vtg-shadow-card); }
.admtd__tabs button:focus-visible[b-aze0odwhx1] { outline: 2px solid var(--vtg-brand); outline-offset: 1px; }

/* ── Thẻ Điều hành: một khối việc duy nhất ────────────────────────────── */

.admtd__work[b-aze0odwhx1] { margin-bottom: 14px; }

/* Không còn việc / cả lịch chạy êm: một dòng bình thản, không phải khối rỗng cao 100px. */
.admtd__clear[b-aze0odwhx1] {
    padding: 13px 14px;
    font-size: 13.5px;
    color: var(--vtg-muted);
}

/* Việc phải quyết: số + nhãn, MỘT dòng. Câu giải thích nằm ở tooltip — người điều hành
   đọc bảng này mỗi sáng, không cần đọc lại hướng dẫn mỗi lần. */
.admtd__urs[b-aze0odwhx1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}

.admtd__ur[b-aze0odwhx1] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px 7px 10px;
    border-radius: 10px;
    border-inline-start: 3px solid var(--vtg-bad);
    background: var(--vtg-bg);
    text-decoration: none;
}

.admtd__ur:hover[b-aze0odwhx1] { background: var(--nm-bad-soft); }
.admtd__ur:focus-visible[b-aze0odwhx1] { outline: 2px solid var(--vtg-brand); outline-offset: 2px; }

.admtd__ur b[b-aze0odwhx1] {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--vtg-bad);
    font-variant-numeric: tabular-nums;
}

.admtd__ur span[b-aze0odwhx1] { font-size: 13px; font-weight: 600; color: var(--vtg-ink); }

/* Dòng phụ nằm ngang: mốc vé đoàn, việc thường, "còn n lịch nữa". */
.admtd__inline[b-aze0odwhx1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--vtg-muted);
}

.admtd__inline--foot[b-aze0odwhx1] { border-top: 1px solid var(--vtg-border); }
.admtd__inlineK[b-aze0odwhx1] { font-weight: 650; color: var(--vtg-ink-2); }

.admtd__chip[b-aze0odwhx1] {
    padding: 3px 8px;
    border-radius: var(--vtg-r-pill);
    background: var(--nm-pending-soft);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vtg-ink-2);
    white-space: nowrap;
    text-decoration: none;
}

a.admtd__chip:hover[b-aze0odwhx1] { background: var(--vtg-brand-soft); color: var(--vtg-brand-strong); }
.admtd__chip.is-late[b-aze0odwhx1] { background: var(--nm-bad-soft); color: var(--vtg-bad); }
.admtd__chip--more[b-aze0odwhx1] { background: none; color: var(--vtg-faint); font-weight: 500; }

/* ── Bảng ngoại lệ ────────────────────────────────────────────────────── */

.admtd__boardHead[b-aze0odwhx1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--vtg-border);
}

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

/* Công tắc gạt cho đúng hai lựa chọn — không phải ô chọn thả xuống. */
.admtd__seg[b-aze0odwhx1] {
    margin-inline-start: auto;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-bg);
}

.admtd__seg button[b-aze0odwhx1] {
    border: 0;
    background: none;
    padding: 4px 11px;
    border-radius: var(--vtg-r-pill);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--vtg-muted);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.admtd__seg button.is-on[b-aze0odwhx1] { background: var(--vtg-surface); color: var(--vtg-ink); box-shadow: var(--vtg-shadow-card); }
.admtd__seg button:focus-visible[b-aze0odwhx1] { outline: 2px solid var(--vtg-brand); outline-offset: 1px; }

/* MỘT DÒNG MỘT ĐOÀN: không ô nào xuống dòng phụ, nếu không thì mười đoàn đã thành
   một trang cuộn. Tên tour cắt bằng ellipsis, xem đủ ở tooltip. */
.admtd__board[b-aze0odwhx1] { min-width: 620px; }
.admtd__board td[b-aze0odwhx1] { padding-block: 9px; white-space: nowrap; }

/* Đoàn cần nhúng tay đánh dấu bằng vạch mép trái, không tô hồng cả dòng: sáu cột nền
   hồng thì chữ khó đọc mà cũng chẳng cấp bách hơn. */
.admtd__board tr.is-risk td:first-child[b-aze0odwhx1] { box-shadow: inset 3px 0 0 var(--vtg-bad); }

.admtd__name[b-aze0odwhx1] {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--vtg-ink);
}

.admtd__whenCell[b-aze0odwhx1] { width: 1%; }
.admtd__when[b-aze0odwhx1] { margin-inline-start: 6px; font-size: 12px; color: var(--vtg-faint); }

.admtd__days[b-aze0odwhx1] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--vtg-ink); }
.admtd__days.is-bad[b-aze0odwhx1] { color: var(--vtg-bad); }

.admtd__fillCell[b-aze0odwhx1] { width: 1%; }
.admtd__fill[b-aze0odwhx1] { font-size: 12.5px; color: var(--vtg-ink-2); font-variant-numeric: tabular-nums; }

.admtd__flag + .admtd__flag[b-aze0odwhx1] { margin-inline-start: 4px; }

.admtd__ok[b-aze0odwhx1] { color: var(--vtg-ok); }
.admtd__bad[b-aze0odwhx1] { color: var(--vtg-bad); }
.admtd__sub[b-aze0odwhx1] { display: block; font-size: 11.5px; line-height: 1.4; color: var(--vtg-faint); margin-top: 2px; }

/* ── Thanh tiến độ (dải chỉ số + cột "Lấp đầy") ───────────────────────── */

.admtd__meter[b-aze0odwhx1] {
    height: 5px;
    min-width: 84px;
    border-radius: var(--vtg-r-pill);
    background: var(--nm-pending-soft);
    overflow: hidden;
    margin-top: 4px;
}

.admtd__meter i[b-aze0odwhx1] { display: block; height: 100%; background: var(--vtg-brand); border-radius: var(--vtg-r-pill); }
.admtd__meter.is-full i[b-aze0odwhx1] { background: var(--vtg-ok); }

.admtd__meter--inline[b-aze0odwhx1] {
    display: inline-block;
    width: 54px;
    min-width: 0;
    margin: 0 7px 0 0;
    vertical-align: middle;
}

/* ── Dải chỉ số ───────────────────────────────────────────────────────── */

/* Năm ô ăn chung một tấm nền, ngăn nhau bằng nét kẻ mảnh: đọc như MỘT bảng đồng hồ chứ
   không phải năm cái thẻ rời. Nét kẻ đặt trên từng ô (không phải gap tô màu nền) để hàng
   cuối thiếu ô cũng không lòi ra mảng xám. */
.admtd__stats[b-aze0odwhx1] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 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;
}

.admtd__stat[b-aze0odwhx1] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    min-width: 0;
    border-inline-start: 1px solid var(--vtg-border);
}

.admtd__stat:first-child[b-aze0odwhx1] { border-inline-start: 0; }

.admtd__statK[b-aze0odwhx1] { font-size: 12px; color: var(--vtg-muted); }

.admtd__statV[b-aze0odwhx1] {
    font-size: 21px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--vtg-ink);
    font-variant-numeric: tabular-nums;
}

.admtd__statV.is-bad[b-aze0odwhx1] { color: var(--vtg-bad); }

.admtd__statV i[b-aze0odwhx1] {
    font-style: normal;
    font-size: 14px;
    font-weight: 650;
    color: var(--vtg-faint);
    margin-inline-start: 1px;
}

.admtd__statS[b-aze0odwhx1] {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--vtg-faint);
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1180px) {
    .admtd__stats[b-aze0odwhx1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admtd__stat[b-aze0odwhx1] { border-inline-start: 1px solid var(--vtg-border); }
    .admtd__stat:nth-child(2n + 1)[b-aze0odwhx1] { border-inline-start: 0; }
    .admtd__stat:nth-child(n + 3)[b-aze0odwhx1] { border-block-start: 1px solid var(--vtg-border); }
}

@media (max-width: 560px) {
    .admtd__stats[b-aze0odwhx1] { grid-template-columns: minmax(0, 1fr); }
    .admtd__stat[b-aze0odwhx1] { border-inline-start: 0; }
    .admtd__stat:nth-child(n + 2)[b-aze0odwhx1] { border-block-start: 1px solid var(--vtg-border); }
}

/* ── Thẻ Phân tích ────────────────────────────────────────────────────── */

.admtd__cols[b-aze0odwhx1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

@media (max-width: 1000px) { .admtd__cols[b-aze0odwhx1] { grid-template-columns: minmax(0, 1fr); } }

.admtd__stack[b-aze0odwhx1] {
    display: flex;
    gap: 2px;
    height: 10px;
    border-radius: var(--vtg-r-pill);
    overflow: hidden;
}

.admtd__stack i[b-aze0odwhx1] { display: block; min-width: 3px; }

.admtd__legend[b-aze0odwhx1] { list-style: none; margin: 11px 0 0; display: grid; gap: 6px; }

.admtd__legend li[b-aze0odwhx1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--vtg-ink-2);
}

.admtd__dot[b-aze0odwhx1] { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; }

.admtd__legendK[b-aze0odwhx1] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admtd__legend b[b-aze0odwhx1] { font-weight: 700; color: var(--vtg-ink); font-variant-numeric: tabular-nums; }

.admtd__legend em[b-aze0odwhx1] {
    font-style: normal;
    min-width: 34px;
    text-align: end;
    color: var(--vtg-faint);
    font-variant-numeric: tabular-nums;
}

.admtd__top[b-aze0odwhx1] { display: grid; gap: 11px; }

.admtd__topRow[b-aze0odwhx1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: baseline;
}

.admtd__topName[b-aze0odwhx1] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vtg-ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admtd__topVal[b-aze0odwhx1] { font-size: 13px; font-weight: 700; color: var(--vtg-ink); font-variant-numeric: tabular-nums; }

.admtd__topBar[b-aze0odwhx1] {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: var(--vtg-r-pill);
    background: var(--nm-pending-soft);
    overflow: hidden;
}

.admtd__topBar i[b-aze0odwhx1] { display: block; height: 100%; background: var(--vtg-brand); border-radius: var(--vtg-r-pill); }

.admtd__topSub[b-aze0odwhx1] { grid-column: 1 / -1; font-size: 11.5px; color: var(--vtg-faint); }

.admtd__more[b-aze0odwhx1] { margin-top: 10px; border-top: 1px solid var(--vtg-border); }

.admtd__more summary[b-aze0odwhx1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 0 2px;
    font-size: 13px;
    font-weight: 650;
    color: var(--vtg-brand-strong);
    cursor: pointer;
    list-style: none;
}

.admtd__more summary[b-aze0odwhx1]::-webkit-details-marker { display: none; }
.admtd__more summary[b-aze0odwhx1]::before { content: "▸"; font-size: 11px; }
.admtd__more[open] summary[b-aze0odwhx1]::before { content: "▾"; }
.admtd__more summary:focus-visible[b-aze0odwhx1] { outline: 2px solid var(--vtg-brand); outline-offset: 2px; border-radius: 6px; }

.admtd__months[b-aze0odwhx1] { margin-top: 8px; min-width: 560px; }
/* /src/Features/Admin/AdminTourDepartureDetail.razor.rz.scp.css */
.admdd__crumb[b-7pje79k0y1] { margin: 0 0 6px; font-size: 13px; }

.admdd__title[b-7pje79k0y1] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.admdd__danger[b-7pje79k0y1] { background: #B42318; color: #fff; border-color: #B42318; }
.admdd__danger:hover:not(:disabled)[b-7pje79k0y1] { background: #9A1C13; border-color: #9A1C13; }

.admdd__ok[b-7pje79k0y1] { color: #15803D; }
.admdd__bad[b-7pje79k0y1] { color: #B42318; }
.admdd__dim[b-7pje79k0y1] { color: var(--vtg-faint); font-weight: 400; }
.admdd__sub[b-7pje79k0y1] { display: block; font-size: 12px; color: var(--vtg-faint); margin-top: 2px; }
.admdd__right[b-7pje79k0y1] { text-align: right; font-size: 13.5px; }
.admdd__grow[b-7pje79k0y1] { flex: 1; min-width: 0; }

/* ── Khối đầu: HDV · tài chính · khách ─────────────────────────────── */

.admdd__top[b-7pje79k0y1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 1000px) { .admdd__top[b-7pje79k0y1] { grid-template-columns: 1fr; } }

.admdd__block[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 6px; }
.admdd__lbl[b-7pje79k0y1] { font-size: 12px; color: var(--vtg-faint); text-transform: uppercase; letter-spacing: .04em; }
.admdd__val[b-7pje79k0y1] { font-size: 18px; color: var(--vtg-ink); }

.admdd__fin[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.admdd__fin > div[b-7pje79k0y1] { display: flex; justify-content: space-between; gap: 12px; }
.admdd__fin span[b-7pje79k0y1] { color: var(--vtg-muted); }
.admdd__fin b[b-7pje79k0y1] { color: var(--vtg-ink); }

/* ── Tabs ─────────────────────────────────────────────────────────── */

.admdd__tabs[b-7pje79k0y1] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #E5E9F0;
    margin-bottom: 14px;
    overflow-x: auto;
}

.admdd__tab[b-7pje79k0y1] {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-muted);
    cursor: pointer;
    white-space: nowrap;
}

.admdd__tab:hover[b-7pje79k0y1] { color: var(--vtg-ink); }
.admdd__tab.is-on[b-7pje79k0y1] { color: #ea580c; border-bottom-color: #ea580c; }

.admdd__tabN[b-7pje79k0y1] {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #F1F3F7;
    font-size: 11.5px;
    color: var(--vtg-muted);
    text-align: center;
}

.admdd__phead[b-7pje79k0y1] { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Khách ────────────────────────────────────────────────────────── */

.admdd__pax[b-7pje79k0y1] { min-width: 1200px; }
.admdd__pax tr.is-withdrawn td[b-7pje79k0y1] { opacity: .55; }
.admdd__warnline[b-7pje79k0y1] { margin: 0; font-size: 13.5px; color: #B45309; }

/* ── Nhật ký ──────────────────────────────────────────────────────── */

.admdd__logform[b-7pje79k0y1] { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.admdd__logform select[b-7pje79k0y1] { width: 160px; }
.admdd__day[b-7pje79k0y1] { width: 110px; }

.admdd__logs[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.admdd__log[b-7pje79k0y1] {
    background: #fff;
    border: 1px solid #E5E9F0;
    border-radius: 12px;
    padding: 10px 14px;
}

.admdd__loghead[b-7pje79k0y1] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.admdd__logbody[b-7pje79k0y1] { margin: 6px 0 0; font-size: 14px; color: var(--vtg-ink); white-space: pre-wrap; }
.admdd__logamt[b-7pje79k0y1] { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: #B45309; }

/* ── Lịch trình ───────────────────────────────────────────────────── */

.admdd__itn[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 10px; }
.admdd__itnhead[b-7pje79k0y1] { display: flex; align-items: center; gap: 10px; }
.admdd__itnnum[b-7pje79k0y1] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px;
    background: #ea580c; color: #fff; font-weight: 700; font-size: 13px;
}
.admdd__itntitle[b-7pje79k0y1] { margin: 0; font-size: 15px; color: var(--vtg-ink); }
.admdd__itndesc[b-7pje79k0y1] { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--vtg-muted); white-space: pre-wrap; }
.admdd__itnmeta[b-7pje79k0y1] { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--vtg-muted); }

/* ── Tổng kết ─────────────────────────────────────────────────────── */

.admdd__kpis[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .admdd__kpis[b-7pje79k0y1] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.admdd__kpi[b-7pje79k0y1] {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #E5E9F0;
}
.admdd__kpi span[b-7pje79k0y1] { font-size: 12px; color: var(--vtg-faint); }
.admdd__kpi b[b-7pje79k0y1] { font-size: 20px; color: var(--vtg-ink); }
.admdd__kpi.is-bad b[b-7pje79k0y1] { color: #B42318; }

.admdd__bar[b-7pje79k0y1] { margin-top: 10px; }
.admdd__barhead[b-7pje79k0y1] { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; }
.admdd__track[b-7pje79k0y1] { height: 10px; border-radius: 999px; background: #F1F3F7; overflow: hidden; }
.admdd__fill[b-7pje79k0y1] { height: 100%; border-radius: 999px; }
.admdd__fill--rev[b-7pje79k0y1] { background: #15803D; }
.admdd__fill--cost[b-7pje79k0y1] { background: #D97706; }
.admdd__profit[b-7pje79k0y1] { margin: 12px 0 0; font-size: 15px; }
.admdd__issues[b-7pje79k0y1] { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.admdd__notes[b-7pje79k0y1] { margin: 0; font-size: 13.5px; white-space: pre-wrap; color: var(--vtg-ink); }

/* ── Modal forms ──────────────────────────────────────────────────── */

.admdd__mtitle[b-7pje79k0y1] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admdd__form[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.admdd__row2[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admdd__row3[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .admdd__row2[b-7pje79k0y1], .admdd__row3[b-7pje79k0y1] { grid-template-columns: 1fr; } }

.admdd__rooms[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 12px; }
.admdd__room[b-7pje79k0y1] {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; border: 1px solid #E5E9F0; border-radius: 12px; background: #FAFBFD;
}
.admdd__occ[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 6px; }
.admdd__occlist[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
@media (max-width: 640px) { .admdd__occlist[b-7pje79k0y1] { grid-template-columns: 1fr; } }
.admdd__occitem[b-7pje79k0y1] { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vtg-ink); cursor: pointer; }
.admdd__occitem.is-elsewhere[b-7pje79k0y1] { color: var(--vtg-faint); cursor: not-allowed; }
.admdd__occitem small[b-7pje79k0y1] { color: var(--vtg-faint); }
.admdd__occitem input[b-7pje79k0y1] { width: 16px; height: 16px; accent-color: #ea580c; }
.admdd__roomfoot[b-7pje79k0y1] { display: flex; gap: 8px; align-items: center; }

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

.admdd__loading[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 22px; }
.admdd__skel[b-7pje79k0y1] {
    height: 56px; border-radius: 10px;
    background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
    background-size: 400% 100%;
    animation: admdd-shimmer-b-7pje79k0y1 1.3s ease-in-out infinite;
}
@keyframes admdd-shimmer-b-7pje79k0y1 { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Checklist (tab Việc cần làm) ──────────────────────────────────── */

.admdd__tabN.is-bad[b-7pje79k0y1] { background: #B42318; color: #fff; }

.admdd__tasks[b-7pje79k0y1] { min-width: 880px; }
.admdd__tasks tr.is-overdue td[b-7pje79k0y1] { background: #FFF7F5; }
.admdd__tasks tr.is-done td[b-7pje79k0y1] { opacity: .62; }
.admdd__tasks tr.is-done .vtga-table__main[b-7pje79k0y1] { text-decoration: line-through; }
.admdd__taskchk[b-7pje79k0y1] { width: 36px; text-align: center; }
.admdd__taskchk input[b-7pje79k0y1] { width: 16px; height: 16px; accent-color: #ea580c; cursor: pointer; }
.admdd__taskdue[b-7pje79k0y1] { display: block; font-weight: 700; color: var(--vtg-ink); }
.admdd__taskhint[b-7pje79k0y1] { padding: 0 14px 14px; margin: 0; }

/* ── Quyết toán ────────────────────────────────────────────────────── */

.admdd__kpi small[b-7pje79k0y1] { display: block; font-size: 11.5px; color: var(--vtg-faint); margin-top: 2px; }
.admdd__kpi.is-ok b[b-7pje79k0y1] { color: #15803D; }
.admdd__kpi.is-warn[b-7pje79k0y1] { border-color: #FEDF89; background: #FFFAEB; }
.admdd__expenses[b-7pje79k0y1] { min-width: 820px; }
.admdd__catsum[b-7pje79k0y1] { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 13px; border-top: 1px dashed #E5E9F0; }
.admdd__settled[b-7pje79k0y1] { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.admdd__settlebox[b-7pje79k0y1] { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.admdd__settlebox p[b-7pje79k0y1] { margin: 4px 0 0; }
.admdd__prev[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; padding: 10px 12px; border-radius: 10px; background: #FAFBFD; border: 1px solid #E5E9F0; }
.admdd__prev > div[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 2px; }
.admdd__prev small[b-7pje79k0y1] { font-size: 11.5px; color: var(--vtg-faint); }
.admdd__prev b[b-7pje79k0y1] { font-size: 14px; color: var(--vtg-ink); }
@media (max-width: 640px) { .admdd__prev[b-7pje79k0y1] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admdd__settlebox[b-7pje79k0y1] { flex-direction: column; align-items: flex-start; } }

/* ── Tab Chương trình riêng của đợt ─────────────────────────────────── */
.admdd__privtag[b-7pje79k0y1] { margin-left: 6px; vertical-align: middle; }
.admdd__progbar[b-7pje79k0y1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: #FFF7ED; border: 1px solid #FED7AA; }
.admdd__proghint[b-7pje79k0y1] { font-size: 13px; color: var(--vtg-ink); line-height: 1.45; }
.admdd__proghint b[b-7pje79k0y1] { color: #9A3412; }
.admdd__progacts[b-7pje79k0y1] { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex-shrink: 0; }
.admdd__prog .vtga-panel__body[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 8px; }
.admdd__proghead[b-7pje79k0y1] { flex-wrap: wrap; }
.admdd__progdate[b-7pje79k0y1] { font-size: 12px; color: var(--vtg-faint); font-variant-numeric: tabular-nums; }
.admdd__progtitle[b-7pje79k0y1] { flex: 1 1 260px; font-weight: 600; }
.admdd__progmove[b-7pje79k0y1] { display: flex; gap: 4px; margin-left: auto; }
.admdd__progmeta[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.admdd__acts[b-7pje79k0y1] { border: 1px dashed #E5E9F0; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.admdd__actshead[b-7pje79k0y1] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admdd__act[b-7pje79k0y1] { display: grid; grid-template-columns: 72px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.4fr) 32px; gap: 6px; align-items: center; }
.admdd__actlist[b-7pje79k0y1] { margin: 0; padding-left: 18px; font-size: 13px; color: var(--vtg-ink); display: flex; flex-direction: column; gap: 3px; }
.admdd__progsvc[b-7pje79k0y1] { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px dashed #E5E9F0; }
@media (max-width: 720px) { .admdd__progbar[b-7pje79k0y1] { flex-direction: column; } .admdd__progmeta[b-7pje79k0y1] { grid-template-columns: 1fr; } .admdd__act[b-7pje79k0y1] { grid-template-columns: 64px minmax(0, 1fr) 32px; } .admdd__act input:nth-child(3)[b-7pje79k0y1], .admdd__act input:nth-child(4)[b-7pje79k0y1] { grid-column: 2; } }

/* ── Vé đoàn · hồ sơ khách · gom / huỷ đoàn ─────────────────────────── */
.admdd__docbtn[b-7pje79k0y1] { border: 1px solid #E5E9F0; background: #fff; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--vtg-faint); }
.admdd__docbtn.is-ok[b-7pje79k0y1] { color: #047857; border-color: #A7F3D0; background: #ECFDF5; }
.admdd__docbtn.is-warn[b-7pje79k0y1] { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.admdd__docbtn.is-missing[b-7pje79k0y1] { color: #B91C1C; border-color: #FECACA; background: #FEF2F2; }
.admdd__doclist[b-7pje79k0y1] { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.admdd__doclist li[b-7pje79k0y1] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kind name acts" "kind sub acts"; gap: 2px 10px; align-items: center; padding: 8px 10px; border: 1px solid #E5E9F0; border-radius: 10px; background: #fff; }
.admdd__doclist li > .vtga-tag[b-7pje79k0y1] { grid-area: kind; }
.admdd__doclist li > .admdd__docname[b-7pje79k0y1] { grid-area: name; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admdd__doclist li > .admdd__sub[b-7pje79k0y1] { grid-area: sub; }
.admdd__doclist li > .vtga-acts[b-7pje79k0y1] { grid-area: acts; }
.admdd__docup[b-7pje79k0y1] { margin-top: 12px; padding: 10px 12px; border: 1px dashed #E5E9F0; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.admdd__row3[b-7pje79k0y1] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admdd__tickets .admdd__sub[b-7pje79k0y1] { display: block; }
.admdd__hint[b-7pje79k0y1] { margin: 8px 0 0; font-size: 12.5px; color: var(--vtg-faint); }
@media (max-width: 720px) { .admdd__row3[b-7pje79k0y1] { grid-template-columns: 1fr; } }

/* Ảnh minh hoạ theo ngày trong chương trình đợt. Ô nhỏ và đều nhau: một ngày vài tấm,
   thả tự do là đẩy phần soạn nội dung xuống quá sâu. */
.admdd__shotsBox[b-7pje79k0y1] { display: flex; flex-direction: column; gap: 8px; }

.admdd__shots[b-7pje79k0y1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
}

.admdd__shot[b-7pje79k0y1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--vtg-border);
    border-radius: 10px;
    background: var(--vtg-surface);
}

.admdd__shot img[b-7pje79k0y1] {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}

.admdd__shotBtns[b-7pje79k0y1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 12px;
}

/* Mã đoàn ở đầu màn: điều hành/kế toán/NCC gọi nhau bằng mã này nên phải nổi và chọn-copy được. */
.admdd__code[b-7pje79k0y1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
    padding: 3px 9px;
    border-radius: 8px;
    user-select: all;
}
/* /src/Features/Admin/AdminTourDepartures.razor.rz.scp.css */
.admdp__kpis[b-vqg5se74b9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

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

.admdp__kpi[b-vqg5se74b9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #E5E9F0;
    border-left: 4px solid #ea580c;
}

.admdp__kpi--warn[b-vqg5se74b9] { border-left-color: #D97706; }
.admdp__kpi--ok[b-vqg5se74b9] { border-left-color: #15803D; }
.admdp__kpi--bad[b-vqg5se74b9] { border-left-color: #B42318; }

.admdp__kpi span[b-vqg5se74b9] { font-size: 12px; color: var(--vtg-faint); text-transform: uppercase; letter-spacing: .04em; }
.admdp__kpi b[b-vqg5se74b9] { font-size: 24px; line-height: 1.1; color: var(--vtg-ink); }
.admdp__kpi small[b-vqg5se74b9] { font-size: 11.5px; color: var(--vtg-muted); }

.admdp__table[b-vqg5se74b9] { min-width: 1120px; }
.admdp__pend[b-vqg5se74b9] { min-width: 720px; }

.admdp__name[b-vqg5se74b9] {
    display: block;
    text-decoration: none;
    color: var(--vtg-ink);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admdp__name:hover[b-vqg5se74b9] { text-decoration: underline; }

.admdp__sub[b-vqg5se74b9] { display: block; font-size: 12px; color: var(--vtg-faint); margin-top: 2px; }
.admdp__dim[b-vqg5se74b9] { color: var(--vtg-faint); }

.admdp__mtitle[b-vqg5se74b9] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }

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

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

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

@keyframes admdp-shimmer-b-vqg5se74b9 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.admdp__pendfilter[b-vqg5se74b9] { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.admdp__pendfilter input[type=search][b-vqg5se74b9] { max-width: 280px; }
.admdp__check[b-vqg5se74b9] { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vtg-ink); cursor: pointer; }
.admdp__check input[b-vqg5se74b9] { width: 16px; height: 16px; accent-color: #ea580c; }

/* Còn phải thu > 0 = chưa đòi xong tiền của đoàn; tô cảnh báo cho nổi trong bảng dài. */
.admdp__owe[b-vqg5se74b9] { color: var(--vtg-bad); font-weight: 700; }
/* /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 ──────────────────────────────────────────────── */

/* Bố cục hai cột của tab Lịch khởi hành ĐÃ BỎ 05/09/2026: biểu mẫu chuyển vào
   NmModal nên bảng lấy hết bề ngang. Giữ lại ghi chú này thay vì xoá trắng để lần
   sau không ai dựng lại cột trái rồi mới nhớ ra vì sao nó từng bị gỡ — 14 ô nhập
   trong một cột 360px thì chật, mà bảng 7 cột bị ép còn nửa màn thì phải cuộn ngang. */

}

/* Thân biểu mẫu đợt khởi hành — nay nằm trong NmModal (trước là cột trái).
   Modal Lg rộng hơn cột cũ nên hai ô mỗi hàng (.admf__row2) mới thực sự thoải mái. */
.admf__schedBody[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admf__schedTable[b-oyyy4fvzgx] { min-width: 820px; }   /* +60px cho cột STT mới */

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

/* Điểm tham quan + ảnh của MỘT ngày: hai cột trên desktop, xếp dọc trên máy hẹp. */
.admf__dayExtra[b-oyyy4fvzgx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.admf__dayExtra > div[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* Các mốc trong ngày — cùng hình dáng với ô "Khung giờ" bên màn điều hành đợt. */
.admf__actsHead[b-oyyy4fvzgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.admf__act[b-oyyy4fvzgx] {
    display: grid;
    grid-template-columns: 74px minmax(0, 1.4fr) minmax(0, 1fr) 30px;
    gap: 6px;
    align-items: center;
}

.admf__actTime[b-oyyy4fvzgx] { text-align: center; }

/* Mỗi điểm là một thẻ: dòng đầu (buổi · tên · loại · xoá), rồi mô tả, rồi ảnh riêng. */
.admf__actCard[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--vtg-border);
    border-radius: 10px;
    background: var(--vtg-bg);
}

.admf__actCard .admf__act[b-oyyy4fvzgx] { grid-template-columns: 76px minmax(0, 1fr) 118px 30px; }
.admf__actDesc[b-oyyy4fvzgx] { resize: vertical; line-height: 1.65; }
.admf__actFoot[b-oyyy4fvzgx] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.admf__actShotsBox[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 760px) {
    .admf__actCard .admf__act[b-oyyy4fvzgx] { grid-template-columns: 68px minmax(0, 1fr) 30px; }
    .admf__actCard .admf__act > select[b-oyyy4fvzgx] { grid-column: 1 / -1; }
    .admf__actFoot[b-oyyy4fvzgx] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .admf__act[b-oyyy4fvzgx] { grid-template-columns: 68px minmax(0, 1fr) 30px; }
    .admf__act > :nth-child(3)[b-oyyy4fvzgx] { grid-column: 1 / -1; }
}

.admf__drop--sm[b-oyyy4fvzgx] { padding: 10px; font-size: 12px; }

/* Ảnh ngày là ảnh MINH HOẠ, không phải bộ ảnh bán hàng — để ô nhỏ, xếp được nhiều
   tấm trong tầm mắt mà không đẩy phần soạn nội dung xuống quá sâu. */
.admf__dayShots[b-oyyy4fvzgx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.admf__dayShot[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--vtg-border);
    border-radius: 10px;
    background: var(--vtg-surface);
}

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

.admf__dayShotBtns[b-oyyy4fvzgx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .admf__dayExtra[b-oyyy4fvzgx] { grid-template-columns: minmax(0, 1fr); }
}

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

/* Tiêu đề modal thêm/sửa đợt khởi hành. NmModal đặt HeaderContent trong thẻ CỦA NÓ,
   nhưng RenderFragment thì viết ở trang này nên VẪN mang scope [b-xxxx] — không cần
   ::deep. Xem [[nm-class-param-deep-scope]] để biết vì sao tham số Class thì ngược lại. */
.admf__mhead[b-oyyy4fvzgx] {
    font-size: 16px;
    font-weight: 750;
    color: var(--vtg-ink);
}

/* ── Tab Lịch khởi hành: đầu bảng, cảnh báo, xem trước tạo hàng loạt ──── */

.admf__schedHead[b-oyyy4fvzgx] {
    flex-wrap: wrap;
    gap: 10px;
}

/* Ô lọc đẩy hai nút về sát phải; dưới 640px thì cả cụm xuống hàng riêng. */
.admf__schedRange[b-oyyy4fvzgx] {
    margin-inline-start: auto;
    max-width: 190px;
}

@media (max-width: 639.98px) {
    .admf__schedRange[b-oyyy4fvzgx] {
        margin-inline-start: 0;
        max-width: none;
        width: 100%;
    }
}

.admf__schedAlert[b-oyyy4fvzgx] {
    border-bottom: 1px solid var(--vtg-border);
    background: var(--vtg-brand-soft);
    font-size: 13px;
    line-height: 1.55;
    color: var(--vtg-ink-2);
}

/* Cảnh báo trong ô: xuống dòng riêng, cam thương hiệu chứ KHÔNG đỏ — đây là
   "cần xem lại", không phải "hỏng". Đỏ để dành cho việc thật sự sai. */
.admf__warn2[b-oyyy4fvzgx] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--vtg-brand-strong);
}

/* ── Xem trước ngày sẽ tạo ───────────────────────────────────────────── */

.admf__bulkPreview[b-oyyy4fvzgx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-height: 168px;
    overflow-y: auto;
}

.admf__bulkDay[b-oyyy4fvzgx] {
    padding: 4px 9px;
    border: 1px solid var(--vtg-border);
    border-radius: var(--vtg-r-pill);
    background: var(--vtg-surface);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--vtg-ink-2);
}

/* Ngày đã có đợt: gạch ngang + mờ đi. Vẫn hiện chứ không giấu — người dùng phải
   thấy vì sao "12 ngày" lại chỉ tạo ra 9 đợt. */
.admf__bulkDay.is-clash[b-oyyy4fvzgx] {
    color: var(--vtg-faint);
    background: var(--vtg-field);
    text-decoration: line-through;
}

/* ── Điều khoản thanh toán & huỷ ── */
/* ── Thanh toán & huỷ ──────────────────────────────────────────────────
   Tab riêng: mỗi nhóm điều khoản là một thẻ có tiêu đề, cột phải là bản
   xem trước theo thứ tự khách gặp. Dòng tóm ở tab Thông tin chung dùng
   .admf__policyPeek. */
.admf__policyPeek[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; margin-top: 6px; border-top: 1px dashed var(--vtg-line, #e5e7eb); }
.admf__policyPeekHead[b-oyyy4fvzgx] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admf__policyPeekHead .vtga-lbl[b-oyyy4fvzgx] { margin: 0; }

.admf__policyCard[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--vtg-border); border-radius: var(--vtg-r-card); background: #fff; }
.admf__policyTitle[b-oyyy4fvzgx] { margin: 0; font-size: 14px; font-weight: 700; color: var(--vtg-ink); }

/* Nút trông như liên kết: dùng button chứ không dùng href="#" — trong Blazor có
   <base href="/"> nên mọi neo rỗng đều văng về trang chủ. */
.admf__linkBtn[b-oyyy4fvzgx] { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; }

.admf__policyPrev[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--vtg-border); border-radius: var(--vtg-r-card); background: var(--vtg-bg); }
.admf__policyPrevHead[b-oyyy4fvzgx] { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--vtg-faint); }
.admf__steps[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-inline-start: 18px; font-size: 13px; color: var(--vtg-ink-2, #4b5563); }
.admf__steps b[b-oyyy4fvzgx] { color: var(--vtg-ink); }
.admf__tierPrev[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--vtg-ink-2, #4b5563); }
.admf__tierPrev li[b-oyyy4fvzgx] { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-block: 3px; border-bottom: 1px dashed var(--vtg-line, #e5e7eb); }
.admf__tierPrev li:last-child[b-oyyy4fvzgx] { border-bottom: 0; }
.admf__tierPrev b[b-oyyy4fvzgx] { color: var(--vtg-ink); white-space: nowrap; }
.admf__tiers[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 8px; }
.admf__tier[b-oyyy4fvzgx] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--vtg-ink-2, #4b5563); }
.admf__tier .admf__tier-num[b-oyyy4fvzgx] { width: 92px; }

/* ── Bung / thu từng ngày hành trình và từng khối nội dung ─────────────── */
.admf__dayHead--acc[b-oyyy4fvzgx] { cursor: pointer; user-select: none; }
.admf__dayHead--acc:hover[b-oyyy4fvzgx] { background: #FFF7ED; }
.admf__day:not(.is-open) .admf__dayHead[b-oyyy4fvzgx] { border-bottom: 0; }
.admf__chev[b-oyyy4fvzgx] { display: inline-block; width: 14px; text-align: center; font-size: 20px; line-height: 1; color: var(--vtg-faint); transition: transform .15s ease; }
.admf__chev.is-open[b-oyyy4fvzgx] { transform: rotate(90deg); color: #ea580c; }
.admf__dayTitle[b-oyyy4fvzgx] { font-size: 13px; font-weight: 600; color: var(--vtg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 42%; }
.admf__dayTitle.is-missing[b-oyyy4fvzgx] { color: #B91C1C; font-style: italic; font-weight: 500; }
.admf__daySum[b-oyyy4fvzgx] { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--vtg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admf__accs[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.admf__acc[b-oyyy4fvzgx] { border: 1px solid var(--vtg-border); border-radius: var(--vtg-r-card); overflow: hidden; background: #fff; }
.admf__accHead[b-oyyy4fvzgx] { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--vtg-bg); cursor: pointer; user-select: none; }
.admf__accHead:hover[b-oyyy4fvzgx] { background: #FFF7ED; }
.admf__accTitle[b-oyyy4fvzgx] { font-size: 13.5px; font-weight: 700; color: var(--vtg-ink); }
.admf__accStatus[b-oyyy4fvzgx] { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.admf__accStatus.is-empty[b-oyyy4fvzgx] { color: var(--vtg-faint); background: #F8FAFC; border-color: #E5E9F0; font-weight: 500; }
.admf__accBody[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 10px; padding: 13px; border-top: 1px solid var(--vtg-border); }
.admf__blockText[b-oyyy4fvzgx]  .nm-editable { min-height: 200px; }
.admf__check[b-oyyy4fvzgx] { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vtg-ink); }
.admf__mt6[b-oyyy4fvzgx] { margin-top: 6px; }
.admf__seoPrev[b-oyyy4fvzgx] { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--vtg-border); border-radius: 10px; background: #fff; }
.admf__seoUrl[b-oyyy4fvzgx] { font-size: 12px; color: #047857; word-break: break-all; }
.admf__seoTitle[b-oyyy4fvzgx] { font-size: 17px; color: #1a0dab; line-height: 1.3; }
.admf__seoDesc[b-oyyy4fvzgx] { font-size: 13px; color: #4d5156; line-height: 1.45; }
.admf__ogPrev[b-oyyy4fvzgx] { width: 100%; border-radius: 10px; margin-top: 10px; border: 1px solid var(--vtg-border); }
@media (max-width: 720px) { .admf__daySum[b-oyyy4fvzgx] { display: none; } .admf__dayTitle[b-oyyy4fvzgx] { max-width: none; } }

/* Khối "Tour nổi bật" ở đầu cột phải tab Thông tin chung — tách hẳn khỏi các ô khai báo
   bên dưới bằng nền + viền, vì nó là quyết định bán hàng chứ không phải thuộc tính tour. */
.admf__feat[b-oyyy4fvzgx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--vtg-line);
    border-radius: 12px;
    background: var(--vtg-brand-soft);
}
/* /src/Features/Admin/AdminTourGuides.razor.rz.scp.css */
.admgd__table[b-1t7hvyv44f] { min-width: 1040px; }
.admgd__table tr.is-off td[b-1t7hvyv44f] { opacity: .6; }
.admgd__sub[b-1t7hvyv44f] { display: block; font-size: 12px; color: var(--vtg-faint); margin-top: 2px; }
.admgd__dim[b-1t7hvyv44f] { color: var(--vtg-faint); }
.admgd__cardtag[b-1t7hvyv44f] { margin-inline-start: 6px; }
.admgd__check[b-1t7hvyv44f] { display: flex; align-items: flex-end; }
.admgd__checklbl[b-1t7hvyv44f] { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vtg-ink); padding-bottom: 9px; cursor: pointer; }
.admgd__checklbl input[b-1t7hvyv44f] { width: 16px; height: 16px; accent-color: #ea580c; }
.admgd__mtitle[b-1t7hvyv44f] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admgd__form[b-1t7hvyv44f] { display: flex; flex-direction: column; gap: 12px; }
.admgd__row2[b-1t7hvyv44f] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .admgd__row2[b-1t7hvyv44f] { grid-template-columns: 1fr; } }
.admgd__loading[b-1t7hvyv44f] { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 22px; }
.admgd__skel[b-1t7hvyv44f] { height: 42px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%); background-size: 400% 100%; animation: admgd-shimmer-b-1t7hvyv44f 1.3s ease-in-out infinite; }
@keyframes admgd-shimmer-b-1t7hvyv44f { 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%; }
}

/* Tem "Nổi bật" nằm ngay sau tên tour trong ô đầu bảng — cùng dòng với tên chứ không
   xuống dòng riêng (xem [[table-cell-no-stacked-lines]]). */
.admt__featTag[b-ep9tgzbv8c] { margin-left: 8px; vertical-align: middle; }
/* /src/Features/Admin/AdminTourSuppliers.razor.rz.scp.css */
.admsp__table[b-rx39ve3pwj] { min-width: 980px; }
.admsp__table tr.is-off td[b-rx39ve3pwj] { opacity: .6; }
.admsp__sub[b-rx39ve3pwj] { display: block; font-size: 12px; color: var(--vtg-faint); margin-top: 2px; }
.admsp__check[b-rx39ve3pwj] { display: flex; align-items: flex-end; }
.admsp__checklbl[b-rx39ve3pwj] { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--vtg-ink); padding-bottom: 9px; cursor: pointer; }
.admsp__checklbl input[b-rx39ve3pwj] { width: 16px; height: 16px; accent-color: #ea580c; }
.admsp__foot[b-rx39ve3pwj] { font-size: 13px; line-height: 1.6; color: var(--vtg-muted); margin-top: 14px; }
.admsp__mtitle[b-rx39ve3pwj] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admsp__form[b-rx39ve3pwj] { display: flex; flex-direction: column; gap: 12px; }
.admsp__row2[b-rx39ve3pwj] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .admsp__row2[b-rx39ve3pwj] { grid-template-columns: 1fr; } }
.admsp__loading[b-rx39ve3pwj] { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 22px; }
.admsp__skel[b-rx39ve3pwj] { height: 42px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%); background-size: 400% 100%; animation: admsp-shimmer-b-rx39ve3pwj 1.3s ease-in-out infinite; }
@keyframes admsp-shimmer-b-rx39ve3pwj { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* /src/Features/Admin/AdminTourSystemMap.razor.rz.scp.css */
/* Sơ đồ hệ thống tour — SVG dựng từ C# (MarkupString) nên phần bên trong dùng ::deep. */
.tsm[b-oajflij0cd] { display: flex; flex-direction: column; gap: 14px; }
.tsm__nav[b-oajflij0cd] { display: flex; flex-wrap: wrap; gap: 6px; }
.tsm__chip[b-oajflij0cd] { border: 1px solid #E5E9F0; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--vtg-ink); cursor: pointer; }
.tsm__chip:hover[b-oajflij0cd] { border-color: #FDBA74; background: #FFF7ED; }
.tsm__chip.is-on[b-oajflij0cd] { background: #ea580c; border-color: #ea580c; color: #fff; }

.tsm__legend[b-oajflij0cd] { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #FAFBFD; border: 1px solid #E5E9F0; font-size: 12px; color: var(--vtg-ink); }
.tsm__lg[b-oajflij0cd] { padding: 2px 10px; border-radius: 8px; border: 1.5px solid; font-weight: 600; }
.tsm__lg--step[b-oajflij0cd] { background: #FFF7ED; border-color: #F97316; color: #9A3412; }
.tsm__lg--entity[b-oajflij0cd] { background: #EFF6FF; border-color: #3B82F6; color: #1E3A8A; }
.tsm__lg--store[b-oajflij0cd] { background: #ECFDF5; border-color: #10B981; color: #065F46; }
.tsm__lg--event[b-oajflij0cd] { background: #FEF2F2; border-color: #EF4444; color: #991B1B; }
.tsm__lg--actor[b-oajflij0cd] { background: #F8FAFC; border-color: #94A3B8; color: #334155; border-radius: 999px; }
.tsm__lg--external[b-oajflij0cd] { background: #F5F3FF; border-color: #8B5CF6; color: #4C1D95; }
.tsm__lg--note[b-oajflij0cd] { background: #FFFBEB; border-color: #F59E0B; color: #92400E; border-style: dashed; }
.tsm__lgline[b-oajflij0cd] { display: inline-flex; align-items: center; gap: 6px; color: var(--vtg-faint); }
.tsm__line[b-oajflij0cd] { display: inline-block; width: 34px; height: 0; border-top: 2px solid #475569; position: relative; }
.tsm__line[b-oajflij0cd]::after { content: ""; position: absolute; right: -2px; top: -5px; border: 4px solid transparent; border-left: 7px solid #475569; }
.tsm__line--data[b-oajflij0cd] { border-top-style: dashed; border-top-color: #2563EB; }
.tsm__line--data[b-oajflij0cd]::after { border-left-color: #2563EB; }
.tsm__line--back[b-oajflij0cd] { border-top-style: dashed; border-top-color: #EA580C; }
.tsm__line--back[b-oajflij0cd]::after { border-left-color: #EA580C; }
.tsm__line--bad[b-oajflij0cd] { border-top-color: #DC2626; }
.tsm__line--bad[b-oajflij0cd]::after { border-left-color: #DC2626; }

.tsm__panel .vtga-panel__body[b-oajflij0cd] { display: flex; flex-direction: column; gap: 10px; }
.tsm__intro[b-oajflij0cd] { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--vtg-ink); }
.tsm__canvas[b-oajflij0cd] { overflow-x: auto; padding: 6px 2px 10px; }
/* max-width: không phóng to quá khổ gốc (khung hẹp mà kéo giãn thì chữ trong hình to hơn chữ của trang).
   min-width: không thu dưới 80% — hẹp hơn nữa thì CUỘN NGANG chứ không bóp chữ xuống dưới 10px. */
.tsm__canvas[b-oajflij0cd]  svg.tsm__svg { display: block; width: 100%; max-width: var(--tsm-w); min-width: calc(var(--tsm-w) * 0.8); height: auto; font-family: inherit; }

.tsm__notes[b-oajflij0cd] { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--vtg-ink); display: flex; flex-direction: column; gap: 4px; }

/* ── Nút ── */
.tsm__canvas[b-oajflij0cd]  .tsm-n rect { stroke-width: 1.6; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--step rect { fill: #FFF7ED; stroke: #F97316; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--entity rect { fill: #EFF6FF; stroke: #3B82F6; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--store rect { fill: #ECFDF5; stroke: #10B981; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--event rect { fill: #FEF2F2; stroke: #EF4444; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--actor rect { fill: #F8FAFC; stroke: #94A3B8; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--external rect { fill: #F5F3FF; stroke: #8B5CF6; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--note rect { fill: #FFFBEB; stroke: #F59E0B; stroke-dasharray: 4 3; }
.tsm__canvas[b-oajflij0cd]  .tsm-nt { font-size: 12.5px; font-weight: 700; fill: #0F172A; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--step .tsm-nt { fill: #9A3412; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--entity .tsm-nt { fill: #1E3A8A; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--store .tsm-nt { fill: #065F46; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--event .tsm-nt { fill: #991B1B; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--external .tsm-nt { fill: #4C1D95; }
.tsm__canvas[b-oajflij0cd]  .tsm-n--note .tsm-nt { fill: #92400E; }
.tsm__canvas[b-oajflij0cd]  .tsm-ns { font-size: 10.5px; fill: #475569; }

/* ── Cạnh ── */
.tsm__canvas[b-oajflij0cd]  .tsm-e { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.tsm__canvas[b-oajflij0cd]  .tsm-e--flow { stroke: #475569; }
.tsm__canvas[b-oajflij0cd]  .tsm-e--data { stroke: #2563EB; stroke-dasharray: 5 4; }
.tsm__canvas[b-oajflij0cd]  .tsm-e--back { stroke: #EA580C; stroke-dasharray: 5 4; }
.tsm__canvas[b-oajflij0cd]  .tsm-e--bad { stroke: #DC2626; }
.tsm__canvas[b-oajflij0cd]  .tsm-el { font-size: 10.5px; font-weight: 600; fill: #334155; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tsm__canvas[b-oajflij0cd]  .tsm-el--data { fill: #1D4ED8; }
.tsm__canvas[b-oajflij0cd]  .tsm-el--back { fill: #C2410C; }
.tsm__canvas[b-oajflij0cd]  .tsm-el--bad { fill: #B91C1C; }
/* /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/Admin/VtgTourBookingEditor.razor.rz.scp.css */
.admbe__mtitle[b-yi5l0v846u] { font-size: 16px; font-weight: 700; color: var(--vtg-ink); }
.admbe__loading[b-yi5l0v846u] { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 22px; }
.admbe__form[b-yi5l0v846u] { display: flex; flex-direction: column; gap: 14px; }

.admbe__problems[b-yi5l0v846u] { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.admbe__row2[b-yi5l0v846u] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admbe__row3[b-yi5l0v846u] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) {
    .admbe__row2[b-yi5l0v846u], .admbe__row3[b-yi5l0v846u] { grid-template-columns: 1fr; }
}

.admbe__paxhead[b-yi5l0v846u] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admbe__paxadd[b-yi5l0v846u] { display: flex; gap: 6px; flex-wrap: wrap; }

.admbe__rows[b-yi5l0v846u] { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.admbe__pax[b-yi5l0v846u] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--vtg-line);
    border-radius: 10px;
    background: var(--vtg-surface);
}
.admbe__paxtag[b-yi5l0v846u] { font-size: 12.5px; font-weight: 700; color: var(--vtg-muted); }
/* Bốn ô một dòng trên máy bàn; điện thoại thì xuống hai cột cho ô tên còn đọc được. */
.admbe__paxgrid[b-yi5l0v846u] { display: grid; grid-template-columns: 1.6fr 0.8fr 1fr 1.2fr; gap: 8px; min-width: 0; }
.admbe__paxx[b-yi5l0v846u] {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--vtg-line);
    background: transparent; color: var(--vtg-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.admbe__paxx:disabled[b-yi5l0v846u] { opacity: .35; cursor: not-allowed; }
@media (max-width: 720px) {
    .admbe__pax[b-yi5l0v846u] { grid-template-columns: minmax(0, 1fr) 28px; }
    .admbe__paxtag[b-yi5l0v846u] { grid-column: 1 / -1; }
    .admbe__paxgrid[b-yi5l0v846u] { grid-template-columns: 1fr 1fr; }
}

.admbe__single[b-yi5l0v846u] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--vtg-line); border-radius: 10px;
}
.admbe__ctl[b-yi5l0v846u] { display: inline-flex; align-items: center; gap: 4px; }
.admbe__ctl button[b-yi5l0v846u] {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--vtg-line);
    background: transparent; color: var(--vtg-ink); font-size: 16px; line-height: 1; cursor: pointer;
}
.admbe__ctl button:disabled[b-yi5l0v846u] { opacity: .35; cursor: not-allowed; }
.admbe__ctl span[b-yi5l0v846u] { min-width: 28px; text-align: center; font-weight: 700; }

.admbe__sum[b-yi5l0v846u] {
    border: 1px solid var(--vtg-line); border-radius: 10px; padding: 12px;
    display: flex; flex-direction: column; gap: 6px; font-size: 13.5px;
}
.admbe__sum > div[b-yi5l0v846u] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admbe__total[b-yi5l0v846u] { border-top: 1px solid var(--vtg-line); padding-top: 8px; font-weight: 700; font-size: 15px; }
/* /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/Guide/GuideSheetPage.razor.rz.scp.css */
/* Sổ tay HDV — mobile-first, một cột, chữ 16px để không zoom. */
.gs[b-nnw19vfa87] { max-width: 720px; margin: 0 auto; padding: 12px 12px 40px; font-size: 16px; color: #0F172A; }
.gs__head[b-nnw19vfa87] { padding: 14px 14px 12px; border-radius: 14px; background: #fff; border: 1px solid #E5E9F0; margin-bottom: 10px; }
.gs__brand[b-nnw19vfa87] { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #ea580c; font-weight: 700; }
.gs__title[b-nnw19vfa87] { margin: 4px 0 2px; font-size: 20px; line-height: 1.25; font-weight: 800; }
.gs__meta[b-nnw19vfa87] { font-size: 13.5px; color: #475569; }
.gs__pills[b-nnw19vfa87] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gs__pill[b-nnw19vfa87] { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: #F1F5F9; color: #334155; }
.gs__pill.is-ok[b-nnw19vfa87] { background: #DCFCE7; color: #15803D; }
.gs__pill.is-bad[b-nnw19vfa87] { background: #FEE2E2; color: #B42318; }
.gs__hot[b-nnw19vfa87] { display: inline-block; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #ea580c; color: #fff; font-weight: 700; text-decoration: none; }
.gs__note[b-nnw19vfa87] { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 14px; }
.gs__note.is-ok[b-nnw19vfa87] { background: #DCFCE7; color: #15803D; }
.gs__note.is-bad[b-nnw19vfa87] { background: #FEE2E2; color: #B42318; }
.gs__tabs[b-nnw19vfa87] { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.gs__tab[b-nnw19vfa87] { flex: 0 0 auto; appearance: none; border: 1px solid #E5E9F0; background: #fff; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 600; color: #475569; }
.gs__tab.is-on[b-nnw19vfa87] { background: #0F172A; color: #fff; border-color: #0F172A; }
.gs__n[b-nnw19vfa87] { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 12px; }
.gs__tab:not(.is-on) .gs__n[b-nnw19vfa87] { background: #F1F5F9; }
.gs__list[b-nnw19vfa87] { display: flex; flex-direction: column; gap: 8px; }
.gs__card[b-nnw19vfa87] { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #E5E9F0; }
.gs__center[b-nnw19vfa87] { text-align: center; }
.gs__big[b-nnw19vfa87] { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.gs__muted[b-nnw19vfa87] { color: #64748B; font-size: 13.5px; }
.gs__warn[b-nnw19vfa87] { color: #D97706; margin-left: 6px; }
.gs__h[b-nnw19vfa87] { font-weight: 700; margin-bottom: 6px; }
.gs__h small[b-nnw19vfa87] { font-weight: 500; margin-left: 4px; }
.gs__row[b-nnw19vfa87] { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 15px; }
.gs__pre[b-nnw19vfa87] { white-space: pre-wrap; margin: 0; font-size: 15px; line-height: 1.5; }
.gs__pax.is-in[b-nnw19vfa87], .gs__task.is-in[b-nnw19vfa87] { background: #F0FDF4; border-color: #BBF7D0; }
.gs__task.is-skip[b-nnw19vfa87] { opacity: .55; }
.gs__check[b-nnw19vfa87] { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.gs__check input[b-nnw19vfa87] { width: 22px; height: 22px; margin-top: 2px; accent-color: #15803D; flex: 0 0 auto; }
.gs__check span[b-nnw19vfa87] { display: flex; flex-direction: column; gap: 2px; }
.gs__check small[b-nnw19vfa87] { color: #64748B; font-size: 13px; }
.gs__paxmeta[b-nnw19vfa87] { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 13.5px; color: #334155; }
.gs__paxmeta a[b-nnw19vfa87] { color: #ea580c; font-weight: 600; text-decoration: none; }
.gs__tag[b-nnw19vfa87] { padding: 2px 8px; border-radius: 999px; background: #F1F5F9; }
.gs__tag.is-bad[b-nnw19vfa87] { background: #FEE2E2; color: #B42318; }
.gs__log.is-bad[b-nnw19vfa87] { border-color: #FECACA; background: #FFF7F7; }
.gs__form[b-nnw19vfa87] { display: flex; flex-direction: column; gap: 8px; }
[b-nnw19vfa87] .gs__in { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff; }
.gs__in--day[b-nnw19vfa87] { max-width: 120px; }
.gs__btn[b-nnw19vfa87] { appearance: none; border: 0; border-radius: 10px; padding: 12px; background: #ea580c; color: #fff; font: inherit; font-size: 16px; font-weight: 700; }
.gs__btn:disabled[b-nnw19vfa87] { opacity: .5; }
.gs__foot[b-nnw19vfa87] { margin-top: 14px; text-align: center; font-size: 13px; color: #64748B; }
.gs__link[b-nnw19vfa87] { appearance: none; border: 0; background: none; color: #ea580c; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; }

/* Sổ tay HDV mở trên điện thoại: điểm trong ngày + ảnh đối chiếu tại chỗ.
   Ảnh cuộn NGANG chứ không xếp lưới — màn hình dọc mà xếp lưới thì mỗi tấm bé như tem. */
.gs__acts[b-nnw19vfa87] { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.gs__acts li[b-nnw19vfa87] { font-size: 14px; color: #334155; }

.gs__shots[b-nnw19vfa87] { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.gs__shots img[b-nnw19vfa87] {
    flex: 0 0 auto; width: 168px; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 10px; border: 1px solid #E2E8F0; display: block;
}
/* /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; }

/* ── Kế hoạch thanh toán (cọc / còn lại) tính từ điều khoản của tour ── */
.vtg-sum__plan[b-ckt0vbfz90] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--vtg-surface-2, #fff7ed); border: 1px solid var(--vtg-line, #fed7aa); }
.vtg-sum__plan > div[b-ckt0vbfz90] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vtg-sum__plan span[b-ckt0vbfz90] { font-size: 12px; color: var(--vtg-muted, #6b7280); }
.vtg-sum__plan b[b-ckt0vbfz90] { font-size: 15px; color: var(--vtg-ink, #111827); }
.vtg-sum__plan small[b-ckt0vbfz90] { font-size: 11.5px; color: var(--vtg-ink-2, #4b5563); }
/* /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;
}

/* Bữa ăn ở đầu mục ngày. Máy hẹp thì giấu đi — đầu mục chỉ còn chỗ cho tên ngày, mà
   thông tin này vẫn còn nguyên ở dải thẻ trong phần nội dung. */
.vtg-tl__meals[b-axxfrux0lc] {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
    padding: 3px 10px;
    border-radius: var(--vtg-r-pill);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .vtg-tl__meals[b-axxfrux0lc] { display: none; }
}

/* Một ngày = chữ bên trái, ảnh minh hoạ xếp dọc cột phải — đúng bố cục của bản chương
   trình tour in ra gửi khách. Cột ảnh cố định 210px: hẹp hơn thì ảnh vụn, rộng hơn thì
   phần chữ bị bóp còn quá ít cho một đoạn mô tả. */
.vtg-tl__cols[b-axxfrux0lc] { display: flex; flex-direction: column; gap: 12px; }

.vtg-tl__cols.has-shots[b-axxfrux0lc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 16px;
    align-items: start;
}

.vtg-tl__main[b-axxfrux0lc] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.vtg-tl__side[b-axxfrux0lc] { display: flex; flex-direction: column; gap: 8px; }

/* Ảnh đều khung: ảnh người soạn tải lên đủ mọi tỉ lệ, thả tự do là cột phải so le. */
.vtg-tl__side img[b-axxfrux0lc] {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Các mốc trong ngày. Giờ nằm cột riêng, thẳng hàng dọc như chương trình giấy. */
.vtg-tl__acts[b-axxfrux0lc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.vtg-tl__acts li[b-axxfrux0lc] {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
    color: var(--vtg-ink-2);
}

/* Mốc không có giờ vẫn phải thẳng hàng với mốc có giờ — dồn nó sang cột chữ. */
.vtg-tl__acts li > .vtg-tl__acttext:first-child[b-axxfrux0lc] { grid-column: 2; }

.vtg-tl__acttime[b-axxfrux0lc] {
    font-weight: 700;
    font-size: 13px;
    color: var(--vtg-brand-strong);
    padding-top: 1px;
}

.vtg-tl__acttext[b-axxfrux0lc] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vtg-tl__actname[b-axxfrux0lc] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vtg-tl__actplace[b-axxfrux0lc] { font-size: 13px; color: var(--vtg-muted); }

/* Giới thiệu điểm đến — phần chữ khách đọc kỹ nhất, nên để rộng dòng và tông mực vừa. */
.vtg-tl__actdesc[b-axxfrux0lc] { font-size: 13.5px; line-height: 1.7; color: var(--vtg-ink-2); }

/* Ảnh của riêng một điểm: hàng ngang nhỏ, cuộn được khi nhiều tấm. */
.vtg-tl__actshots[b-axxfrux0lc] { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.vtg-tl__actshots img[b-axxfrux0lc] {
    width: 116px;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.vtg-tl__actnote[b-axxfrux0lc] { font-size: 13px; font-style: italic; color: var(--vtg-faint); }

@media (max-width: 720px) {
    .vtg-tl__cols.has-shots[b-axxfrux0lc] { grid-template-columns: minmax(0, 1fr); }
    /* Máy hẹp: ảnh về hàng ngang cuộn được, không chiếm hết chiều cao màn hình. */
    .vtg-tl__side[b-axxfrux0lc] { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .vtg-tl__side img[b-axxfrux0lc] { flex: 0 0 auto; width: 190px; }
    .vtg-tl__acts li[b-axxfrux0lc] { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; }
}

/* Ả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/VtgAccountMenu.razor.rz.scp.css */
/* Menu tài khoản dùng chung — xem chú thích ở VtgAccountMenu.razor.

   Thang z-index bám đúng thang của site (xem VtgHeader.razor.css): header 900,
   modal 1000, dropdown 1100. Menu này là dropdown nên nằm 1100, lớp bắt cú bấm
   ra ngoài đặt ngay dưới nó ở 1099 — trên mọi thứ khác nhưng dưới chính menu. */

.vtga[b-g6wen375ye] {
    position: relative;
}

.vtga__btn[b-g6wen375ye] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: var(--vtg-r-pill);
    background: transparent;
    cursor: pointer;
    transition: background-color .18s ease;
}

.vtga__btn:hover[b-g6wen375ye] {
    background: var(--vtg-field);
}

/* Trên ảnh hero, nền hover sáng mới thấy được — nền --vtg-field là màu rất nhạt,
   đặt lên ảnh thì gần như tàng hình. */
.vtga.is-floating .vtga__btn:hover[b-g6wen375ye] {
    background: rgba(255, 255, 255, .16);
}

.vtga__avatar[b-g6wen375ye] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.vtga__name[b-g6wen375ye] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-ink);
}

/* Tên chiếm chỗ mà không mang thông tin gấp trên màn hẹp — dưới 640px chỉ còn avatar.
   Đặt luật này TRONG component chứ không ở CSS của từng header: để bên ngoài thì phải
   với vào bằng ::deep (CSS scoped không xuyên qua ranh giới component), và hai header
   sẽ tự đặt ngưỡng lệch nhau lúc nào không hay. */
@media (max-width: 639.98px) {
    .vtga__name[b-g6wen375ye] {
        display: none;
    }
}

.vtga__caret[b-g6wen375ye] {
    flex: 0 0 auto;
    color: var(--vtg-muted);
    transition: transform .2s ease;
}

.vtga__caret.is-open[b-g6wen375ye] {
    transform: rotate(180deg);
}

.vtga.is-floating .vtga__name[b-g6wen375ye],
.vtga.is-floating .vtga__caret[b-g6wen375ye] {
    color: #fff;
}

/* Lớp bắt cú bấm ra ngoài. Nằm DƯỚI menu nhưng TRÊN mọi thứ khác. */
.vtga__scrim[b-g6wen375ye] {
    position: fixed;
    inset: 0;
    z-index: 1099;
}

.vtga__menu[b-g6wen375ye] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    min-width: 232px;
    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: vtga-pop-b-g6wen375ye .16s ease-out;
}

@keyframes vtga-pop-b-g6wen375ye {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

/* ── Khối danh tính ──────────────────────────────────────────────────── */

.vtga__id[b-g6wen375ye] {
    padding: 8px 12px 10px;
}

.vtga__idName[b-g6wen375ye] {
    font-size: 14px;
    font-weight: 750;
    color: var(--vtg-ink);
    overflow-wrap: anywhere;
}

.vtga__idSub[b-g6wen375ye] {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--vtg-muted);
    overflow-wrap: anywhere;
}

.vtga__roles[b-g6wen375ye] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.vtga__role[b-g6wen375ye] {
    padding: 2px 8px;
    border-radius: var(--vtg-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

/* ── Mục menu ────────────────────────────────────────────────────────── */

.vtga__menu a[b-g6wen375ye] {
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vtg-ink-2);
    text-decoration: none;
}

.vtga__menu a:hover[b-g6wen375ye] {
    background: var(--vtg-field);
    color: var(--vtg-ink);
}

.vtga__menu a.is-danger[b-g6wen375ye] {
    color: var(--vtg-bad);
}

.vtga__menu a.is-danger:hover[b-g6wen375ye] {
    background: #FDECEA;
    color: var(--vtg-bad);
}

.vtga__sep[b-g6wen375ye] {
    height: 1px;
    margin: 5px 6px;
    background: var(--vtg-border);
}
/* /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/VtgAvatar.razor.rz.scp.css */
/* Ô đại diện dùng chung. Kích thước do tham số Size đặt bằng style inline — ở đây chỉ hình dáng. */

.vtgav[b-p8u9hbiaq3] {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    /* Cắt ảnh theo đúng hình tròn của thẻ bọc — bo góc trên chính <img> thì viền răng cưa
       ở Safari khi ảnh không vuông. */
    overflow: hidden;
    font-weight: 800;
    line-height: 1;
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
    user-select: none;
}

.vtgav__ini[b-p8u9hbiaq3] {
    /* Nằm dưới ảnh, chỉ lộ ra khi chưa có ảnh hoặc ảnh hỏng (onerror gỡ <img>). */
    letter-spacing: .02em;
}

.vtgav__img[b-p8u9hbiaq3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* cover, không contain: ảnh chân dung thường không vuông, contain để lại hai vệt nền. */
    object-fit: cover;
    display: block;
}
/* /src/Features/_Shared/VtgDocStatus.razor.rz.scp.css */
/* Tem trạng thái giấy tờ — xem chú thích ở VtgDocStatus.razor. */

.ds[b-9ijn6xlvtk] {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--vtg-r-pill);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Chưa nhập: xám trung tính. KHÔNG tô đỏ — chưa khai báo không phải là lỗi,
   người dùng có thể chưa bao giờ cần hộ chiếu. */
.ds--empty[b-9ijn6xlvtk] {
    color: var(--vtg-muted);
    background: var(--vtg-field);
}

.ds--valid[b-9ijn6xlvtk] {
    color: var(--vtg-ok);
    background: #E7F6F0;
}

/* Sắp hết hạn: cam thương hiệu. Cố ý KHÔNG dùng đỏ — còn kịp xử lý thì đây là
   lời nhắc, không phải báo hỏng; để dành đỏ cho trạng thái đã hết hạn. */
.ds--soon[b-9ijn6xlvtk] {
    color: var(--vtg-brand-strong);
    background: var(--vtg-brand-soft);
}

.ds--expired[b-9ijn6xlvtk] {
    color: var(--vtg-bad);
    background: #FDECEA;
}
/* /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/VtgProgramFiles.razor.rz.scp.css */
.vtgpf[b-l6xbt733fl] { display: flex; flex-direction: column; gap: 10px; }

.vtgpf__head[b-l6xbt733fl] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vtgpf__hint[b-l6xbt733fl] { font-size: 12px; color: var(--vtg-muted); }
.vtgpf__muted[b-l6xbt733fl] { font-size: 12px; color: var(--vtg-muted); margin: 0; }
.vtgpf__err[b-l6xbt733fl] { margin: 0; }

.vtgpf__list[b-l6xbt733fl] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vtgpf__list--inherited[b-l6xbt733fl] { opacity: .78; }

/* Tên tệp co được, phần còn lại giữ nguyên bề ngang — tên dài không đẩy nút Tải ra ngoài. */
.vtgpf__item[b-l6xbt733fl] {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--vtg-border); border-radius: 10px;
    background: var(--vtg-surface);
}
.vtgpf__name[b-l6xbt733fl] { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtgpf__meta[b-l6xbt733fl] { flex: 0 0 auto; font-size: 12px; color: var(--vtg-muted); }

.vtgpf__up[b-l6xbt733fl] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vtgpf__up input[type="file"][b-l6xbt733fl] { max-width: 320px; }

@media (max-width: 640px) {
    .vtgpf__item[b-l6xbt733fl] { flex-wrap: wrap; }
    .vtgpf__meta[b-l6xbt733fl] { flex-basis: 100%; }
}
/* /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;

    /* Cuộn tới đáy menu thì DỪNG ở đó, không đẩy tiếp trang bên phải. */
    overscroll-behavior: contain;

    /* Firefox. Chrome/Edge/Safari dùng khối ::-webkit-scrollbar ngay dưới. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

/* Thanh cuộn mặc định của hệ điều hành là một dải sáng có cả nút mũi tên — trên nền
   sidebar tối nó nổi hơn cả menu. Vẽ lại: rãnh trong suốt, con trượt mảnh bo tròn,
   đậm dần khi rê vào. */
.vtgadm__nav[b-wgzy64b3tg]::-webkit-scrollbar {
    width: 10px;
}

.vtgadm__nav[b-wgzy64b3tg]::-webkit-scrollbar-track {
    background: transparent;
}

/* Nền cắt vào trong bằng border trong suốt: con trượt trông mảnh 4px nhưng vùng bắt
   chuột vẫn rộng 10px, không phải nhắm mới trúng. */
.vtgadm__nav[b-wgzy64b3tg]::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.18);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color .15s ease;
}

.vtgadm__nav:hover[b-wgzy64b3tg]::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.28);
}

.vtgadm__nav[b-wgzy64b3tg]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,.42);
}

/* Nút mũi tên hai đầu: chiếm chỗ, xấu, và không ai bấm. */
.vtgadm__nav[b-wgzy64b3tg]::-webkit-scrollbar-button {
    display: none;
}

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

/* .vtgadm__user đã bỏ: góc phải nay là <VtgAccountMenu>, component đó tự lo phần
   ẩn tên dưới 640px trong CSS scoped của chính nó. */

.vtgadm__body[b-wgzy64b3tg] {
    flex: 1 1 auto;
    padding: 18px var(--vtg-pad-page-sm) 40px;
}

/* ── Desktop ─────────────────────────────────────────────────────────── */

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


/* Màn "không có quyền" — dựng thay cho @Body khi đường dẫn hiện tại ứng với một mục
   tài khoản này không được cấp. Xem chú thích ở <main> trong VtgAdminLayout.razor. */
.vtgadm__denied[b-wgzy64b3tg] {
    max-width: 560px;
    margin: 40px auto;
    padding: 32px;
    border: 1px solid var(--vtg-border);
    border-radius: 16px;
    background: var(--vtg-surface);
    text-align: center;
}

.vtgadm__denied .vtg-btn[b-wgzy64b3tg] {
    margin-top: 20px;
}
/* /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 ────────────────────────────────────────────────
   ĐÃ CHUYỂN sang VtgAccountMenu.razor.css (component dùng chung với thanh trên
   khu /admin). Đừng dựng lại ở đây: hai bản CSS cho cùng một menu là cách chắc
   chắn để hai header lệch nhau vài pixel mà không ai thấy. */

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