/* NBKH V2 — theme đen. Chỉ các trang V2 được phép nạp file này. */

html:not([data-nbkh-ui="v3"]){
  --v2-brand:#111111;
  --v2-brand-hover:#000000;
  --v2-brand-soft:#f3f4f6;
  --v2-brand-soft-strong:#e5e7eb;
  --v2-brand-border:#d1d5db;
  --v2-brand-muted:#4b5563;
  --v2-brand-ring:rgba(17,17,17,.2);
  --v2-canvas:#f4f4f5;
  --v2-surface:#ffffff;
  --v2-surface-soft:#f8f8f9;
  --v2-surface-strong:#ececee;
  --v2-radius-card:24px;
  --v2-radius-control:18px;
  --v2-radius-sheet:30px;
  --v2-radius-action-max:999px;
  --v2-radius-panel-max:32px;
  --v2-gap-control:8px;
  --v2-gap-related:10px;
  --v2-gap-section:16px;
  /* Spacing `a`: padding chuẩn cho card/row theo quy cách Figma. */
  --v2-space-a:14px;
  --v2-card-padding:var(--v2-space-a);
  --v2-card-padding-compact:var(--v2-space-a);
  --v2-card-gap:12px;
  --v2-card-title-gap:10px;
  --v2-card-inner-padding:var(--v2-space-a);
  --v2-action-height:82px;
  --v2-focus-stroke:#737373;
  --v2-stroke-subtle:rgba(17,17,17,.1);
  --v2-shadow-card:0 1px 2px rgba(17,17,17,.025),0 10px 30px rgba(17,17,17,.035);
  --v2-shadow-float:0 14px 40px rgba(17,17,17,.1);
  /* Thanh số liệu/bộ lọc dùng chung giữa Gửi xe, Thu ngân và Booking. */
  --nbkh-status-shell-padding:8px;
  --nbkh-status-shell-gap:8px;
  --nbkh-status-shell-radius:24px;
  --nbkh-status-item-height:58px;
  --nbkh-status-item-radius:18px;
  --nbkh-status-count-size:16px;
  --nbkh-status-count-line:20px;
  --nbkh-status-label-size:9.5px;
  --nbkh-status-label-line:12px;
  /* STATUS-UX-V3 — một contract cho status/toast của giao diện đen. */
  --status-ux-v3-ok:#111111;
  --status-ux-v3-error:#b91c1c;
  --status-ux-v3-text:#ffffff;
  --status-ux-v3-min-height:50px;
  --status-ux-v3-radius:var(--v2-radius-action-max);

  /* Giữ API token cũ để không thay đổi controller và component. */
  --teal:var(--v2-brand);
  --teal-nhat:var(--v2-brand-soft);
  --lam:var(--v2-brand);
  --lam-nhat:var(--v2-brand-soft);
  --chinh:var(--v2-brand);
  --chinh-nhat:var(--v2-brand-soft);
  --nen:var(--v2-canvas);
  --the:var(--v2-surface);
  --vien:#e5e7eb;
  --chu:#171717;
  --mo:#737373;
}

html:not([data-nbkh-ui="v3"]),
html:not([data-nbkh-ui="v3"]) body{background:var(--v2-canvas);color:var(--chu)}

html:not([data-nbkh-ui="v3"]) ::selection{
  background:var(--v2-brand-soft-strong);color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) :where(
  .manDangNhap,#app,.popup,.theCN,.theLSTB,.bk-hop-bien-nhan,.lopCN
) :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--v2-brand);outline-offset:2px;
  box-shadow:0 0 0 3px var(--v2-brand-ring)
}
html:not([data-nbkh-ui="v3"]) :where(
  .manDangNhap,#app,.popup,.theCN,.theLSTB,.bk-hop-bien-nhan,.lopCN
) :where(input[type="checkbox"],input[type="radio"]){accent-color:var(--v2-brand)}

/* Login và các hero thương hiệu. */
html:not([data-nbkh-ui="v3"]) .manDangNhap{
  background:
    radial-gradient(circle at 50% 0,rgba(255,255,255,.96),transparent 42%),
    var(--v2-canvas)
}
html:not([data-nbkh-ui="v3"]) .theDangNhap{
  border:0;border-radius:32px;box-shadow:var(--v2-shadow-float)
}
html:not([data-nbkh-ui="v3"]) .bk-mo-dau,
html:not([data-nbkh-ui="v3"]) .cd-hero{
  border-radius:var(--v2-radius-card);
  background:linear-gradient(135deg,#262626,var(--v2-brand-hover));
  box-shadow:var(--v2-shadow-card)
}

/* Header nhẹ như ảnh tham chiếu: hierarchy bằng tone, không dùng một dải màu nặng. */
html:not([data-nbkh-ui="v3"]) header{
  border:0;background:#f2f2f2;color:var(--v2-brand);box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none
}
html:not([data-nbkh-ui="v3"]) header .thuongHieu,
html:not([data-nbkh-ui="v3"]) header h1{color:var(--v2-brand)}
html:not([data-nbkh-ui="v3"]) header .thuongHieu span{color:#303030}
html:not([data-nbkh-ui="v3"]) header :where(.nutTron,.nutQuay){
  border:0;background:#fff;color:var(--v2-brand);border-radius:50%;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) header .nutQuay{border-radius:999px}
html:not([data-nbkh-ui="v3"]) header .nguoi{
  border:0;background:#fff;color:var(--v2-brand);box-shadow:var(--v2-shadow-card)
}

/* Màn tác vụ dùng header ngữ cảnh gọn: một lối quay lại, tiêu đề giữa và
   khoảng an toàn thật trên iPhone. Header đầy đủ vẫn giữ nguyên ở màn gốc. */
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh{
  padding:calc(7px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right)) 7px
    calc(14px + env(safe-area-inset-left))
}
html:not([data-nbkh-ui="v3"]) header.daCuon{
  box-shadow:0 8px 24px rgba(17,17,17,.1)
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh > .d1{display:none}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .dauNguCanh{
  min-height:44px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;gap:8px
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .nutNguCanhQuayLai{
  appearance:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:#fff;color:var(--v2-brand);box-shadow:var(--v2-shadow-card);
  display:grid;place-items:center;font:inherit
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .nutNguCanhQuayLai .ic{
  width:21px;height:21px;stroke:currentColor;stroke-width:2.2
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .dauNguCanh h1{
  margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;
  color:var(--v2-brand);font-size:16px;font-weight:800;letter-spacing:-.01em
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .canNguCanh{
  width:44px;height:44px
}
html:not([data-nbkh-ui="v3"]) body.coDauNguCanh #manCt > .nutVeDanhSach{display:none}

/* Logo nguyên bản, không đổ bóng/padding để tránh làm mềm chi tiết. */
html:not([data-nbkh-ui="v3"]) header .thuongHieu img{
  border-radius:0;background:transparent;padding:0;box-shadow:none;
  filter:none;opacity:1;object-fit:contain;image-rendering:auto;transform:none
}

/* Surface chính: bỏ khung cứng, tăng bo góc và dùng shadow gần như phẳng. */
html:not([data-nbkh-ui="v3"]) :where(
  .the,.hoSoTrang,.nhomTrang,.hoSo,.nhomCN,.tinDong,
  .bk-the,.bk-lich-thang,.bk-chi-tiet-tom-tat,.bk-form-chi-tiet,
  .bk-khu-thao-tac,.bk-khu-quyet-toan,.bk-dau-vet,.bk-bien-nhan,
  .cd-the,.cd-status,.cd-skeleton,.cd-online,.cd-user,.cd-bang-wrap
){
  border-color:transparent;border-radius:var(--v2-radius-card);box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) :where(.the,.bk-the,.cd-the){padding:var(--v2-card-padding)}
html:not([data-nbkh-ui="v3"]) .the{margin-bottom:var(--v2-card-gap)}
html:not([data-nbkh-ui="v3"]) .the > h2{margin-bottom:var(--v2-card-title-gap)}
html:not([data-nbkh-ui="v3"]) :where(.the h2,.bk-the h2,.nhomTrang h2){
  color:var(--v2-brand);text-transform:none;letter-spacing:-.01em
}
html:not([data-nbkh-ui="v3"]) .tomtat{
  gap:var(--v2-gap-control);margin-bottom:var(--v2-gap-section);
  padding:var(--v2-gap-control);border:0;border-radius:24px;
  background:#fff;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) .tomtat .o{
  border:0;border-radius:18px;padding:11px 3px;
  background:var(--v2-surface-soft);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .tomtat .o.on{box-shadow:none}

/* Danh sách dùng badge/nội dung để truyền nghĩa trạng thái, không dùng side-strip. */
html:not([data-nbkh-ui="v3"]) .luot,
html:not([data-nbkh-ui="v3"]) .bk-muc{
  border:0;border-radius:var(--v2-radius-card);box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) .bk-muc[role="button"]:hover{
  border-color:transparent;box-shadow:0 14px 32px rgba(17,17,17,.07)
}
html:not([data-nbkh-ui="v3"]) .luot .dau{padding:15px 17px 12px}
html:not([data-nbkh-ui="v3"]) .anh2{
  padding:0 17px var(--v2-gap-related);gap:var(--v2-gap-related)
}
html:not([data-nbkh-ui="v3"]) .oAnh{
  border:0;border-radius:18px;background:var(--v2-surface-soft)
}
/* Màn chi tiết Thu ngân lồng một `.luot` chỉ để tái sử dụng bộ ảnh. Card
   trung gian này không phải một lượt trong danh sách nên không được mang
   shadow của card nghiệp vụ; outer card Ảnh vẫn giữ phân cấp bình thường. */
html:not([data-nbkh-ui="v3"]) #khuAnhChat .luotAnhChiTiet,
html:not([data-nbkh-ui="v3"]) #khuAnhChat .luotAnhChiTiet .oAnh{
  box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .oAnh .trong{
  color:#a3a3a3;font-size:11px;font-weight:500;line-height:1.35
}
html:not([data-nbkh-ui="v3"]) .oAnh .trong .ic{width:19px;height:19px;stroke:#c4c4c7}
html:not([data-nbkh-ui="v3"]) .chat{
  margin:0 17px var(--v2-gap-section);padding:12px 14px 8px;
  border:0;border-radius:20px;
  background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) .the.khongDem .luot .chat{
  margin:0;padding:12px 14px 8px
}
html:not([data-nbkh-ui="v3"]) .tinDs{border:0;border-radius:20px;background:transparent}
html:not([data-nbkh-ui="v3"]) .bong.ho .noi{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(17,17,17,.05)}
html:not([data-nbkh-ui="v3"]) .bong.toi .noi{border-radius:18px;background:var(--v2-brand-soft-strong)}
html:not([data-nbkh-ui="v3"]) .goTin{border-color:transparent;border-radius:24px;background:#fff}
html:not([data-nbkh-ui="v3"]) .goTin input:not([aria-invalid="true"]){
  border:0;background:transparent
}
html:not([data-nbkh-ui="v3"]) .goTin:focus-within{
  outline:2px solid var(--v2-brand);outline-offset:2px;box-shadow:0 0 0 3px var(--v2-brand-ring)
}
html:not([data-nbkh-ui="v3"]) .dsGoiY{border:0;border-radius:20px;box-shadow:var(--v2-shadow-float)}

/* Control: nền tonal thay viền; focus vẫn có ring rõ để dùng bàn phím. */
html:not([data-nbkh-ui="v3"]) :where(
  .manDangNhap,#app,.popup,.theCN,.theLSTB,.bk-hop-bien-nhan,.lopCN
) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  border-color:transparent;border-radius:var(--v2-radius-control);background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) :where(
  .manDangNhap,#app,.popup,.theCN,.theLSTB,.bk-hop-bien-nhan,.lopCN
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]),
  select,textarea:not([aria-invalid="true"])
):focus{
  border-color:transparent;outline:2px solid var(--v2-focus-stroke);outline-offset:1px;
  background:#fff;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(
  .nutChinh,.btnChup,.btnThem,.btnThemXe,.nutTT button,.xemThem,.nutXam,
  .bk-nut-tao,.bk-nut-phu,.bk-hanh-dong button,.bk-nut-lam-moi,
  .bk-chon-thang button,.bk-dau-loc-ngay button,.bk-bo-loc,
  .cd-btn-chinh,.cd-nut-xam,.cd-hanh-dong button,.goiYGia button
){border-radius:var(--v2-radius-control)}
html:not([data-nbkh-ui="v3"]) :where(
  .nutPhu,.btnTim,.bk-nut-icon,.bk-doi-che-do button,.nutIconChuan,.nutVeDanhSach,
  .cd-btn-phu,.btnThuVien
){border:0!important;border-radius:var(--v2-radius-control)!important;background:#fff!important;box-shadow:var(--v2-shadow-card)!important}
html:not([data-nbkh-ui="v3"]) .btnTim.on,
html:not([data-nbkh-ui="v3"]) .bk-doi-che-do button.dang-chon{
  border-color:var(--v2-brand)!important;background:var(--v2-brand)!important;
  color:#fff!important;box-shadow:none!important
}
html:not([data-nbkh-ui="v3"]) :where(.dem button,.bk-dem button){
  border:0;border-radius:var(--v2-radius-control);background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) :where(.loc button,.cd-loc button){
  border:0;border-radius:999px;background:#fff;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) :where(.oTich,.bk-chon-dv,.bk-chon-hen-moi,.bk-nut-cai-hen){
  border-color:transparent;border-radius:18px;background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) :where(.oTich.on,.bk-nut-cai-hen[aria-expanded="true"]){
  border-color:transparent;box-shadow:inset 0 0 0 2px var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .bk-chon-dv{
  border:1px solid var(--v2-stroke-subtle);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .bk-chon-dv:has(input:checked){
  border-color:rgba(17,17,17,.18);background:var(--v2-surface-soft);box-shadow:none
}

/* Bộ đếm nằm trên surface xám: control trắng nổi vừa đủ để nhận ra vùng chạm. */
html:not([data-nbkh-ui="v3"]) .bk-khu-quyet-toan .bk-dem{
  gap:var(--v2-gap-control)
}
html:not([data-nbkh-ui="v3"]) .bk-khu-quyet-toan .bk-dem :where(button,input){
  height:46px;border:0;background:#fff;
  box-shadow:0 2px 8px rgba(17,17,17,.06)
}
html:not([data-nbkh-ui="v3"]) .bk-khu-quyet-toan .bk-dem button{
  width:46px;flex-basis:46px
}
html:not([data-nbkh-ui="v3"]) .bk-khu-quyet-toan .bk-dem button:active:not(:disabled){
  background:var(--v2-surface-strong);transform:scale(.97)
}

/* Surface lồng dùng tone thay cho khung. Chỉ top-level card mới có shadow;
   khối con mềm hơn và không tranh cấp thị giác với card cha. */
html:not([data-nbkh-ui="v3"]) :where(
  .ve,.veCano,.chietKhauCano,.boxHH,.oKhachTuTinh,.xeThem,.kiemTra,
  .bk-bo-chon-hen-moi,.bk-o-cai-hen,.bk-khoa-chi-tiet,.bk-buoc-the,
  .bk-ct-tom-tat-khung,.cd-the #formKhuyenMai
){
  border:0;border-radius:18px;background:var(--v2-surface-soft);box-shadow:none
}

/* Field trên surface tonal trở lại màu trắng để nhìn ra vùng có thể nhập.
   Validation và focus vẫn được các rule chuyên biệt phía trên giữ rõ. */
html:not([data-nbkh-ui="v3"]) :where(
  .ve,.chietKhauCano,.boxHH .nhapHH,.xeThem,
  .bk-bo-chon-hen-moi,.bk-o-cai-hen,.cd-the #formKhuyenMai
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]),
  select:not([aria-invalid="true"]),textarea:not([aria-invalid="true"])
){
  background:#fff;border-color:transparent;border-radius:var(--v2-radius-control)
}

/* Choice trạng thái: ô chưa chọn trung tính, không stroke; icon luôn nằm giữa.
   Ô đã chọn vẫn dùng đúng màu nghiệp vụ để không làm mất nghĩa tiền/trạng thái. */
html:not([data-nbkh-ui="v3"]) .chonTT{align-items:stretch}
html:not([data-nbkh-ui="v3"]) .chonTT button{
  min-height:72px;padding:12px 8px;border:0;border-radius:18px;
  background:var(--v2-surface-soft);color:var(--mo);
  display:grid;grid-template-rows:22px auto;place-items:center;align-content:center;gap:7px
}
html:not([data-nbkh-ui="v3"]) .chonTT button .ic{
  width:21px;height:21px;margin:0;align-self:center;justify-self:center;stroke:currentColor
}
html:not([data-nbkh-ui="v3"]) .chonTT button:not(.on):active{
  background:var(--v2-surface-strong)
}
html:not([data-nbkh-ui="v3"]) .chonTT button.on{border:0;font-weight:850;box-shadow:none}
html:not([data-nbkh-ui="v3"]) .chonTT button.on.chua_chi{
  border:0;background:#fff7ed;color:#c2410c
}
html:not([data-nbkh-ui="v3"]) .chonTT button.on.da_chi,
html:not([data-nbkh-ui="v3"]) .chonTT button.on.lenbe{
  border:0;background:#ecfdf5;color:#047857
}
html:not([data-nbkh-ui="v3"]) .chonTT button.on.huy{
  border:0;background:#fef2f2;color:#b91c1c
}
html:not([data-nbkh-ui="v3"]) .chonTT button:disabled{opacity:.55;cursor:not-allowed}

/* Output tổng khách bằng đúng box input bên cạnh và bám đáy sau hàng label. */
html:not([data-nbkh-ui="v3"]) #manCt .hang.nhom > .oKhachTuTinh{
  min-height:46px;height:46px;padding:8px;align-self:flex-end;
  box-sizing:border-box;gap:4px
}
html:not([data-nbkh-ui="v3"]) #manCt .hangKhachBan{
  gap:var(--v2-gap-related)
}
html:not([data-nbkh-ui="v3"]) #manCt .hangKhachBan > *{
  flex:0 0 calc((100% - var(--v2-gap-related))/2);
  width:calc((100% - var(--v2-gap-related))/2);min-width:0;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .oKhachTuTinh b{
  font-size:11px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #manCt .oKhachTuTinh small{
  margin-top:2px;font-size:9px;line-height:1.1;letter-spacing:.3px;white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #manCt .oKhachTuTinh output{
  min-width:3ch;font-size:22px;line-height:1;text-align:right
}

/* Hai card tài chính đồng cấp dùng chung một nhịp spacing. Nội dung khác nhau
   nhưng mép card, khoảng tiêu đề, khoảng ngoài và padding control phải trùng. */
html:not([data-nbkh-ui="v3"]) #manCt > :where(.khoiHoaHong,.khoiTrangThai){
  padding:var(--v2-card-padding);margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt > :where(.khoiHoaHong,.khoiTrangThai) > h2{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt > :where(.khoiHoaHong,.khoiTrangThai) > :where(.boxHH,.chonTT){
  width:100%;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt > .khoiHoaHong .tomTatHH,
html:not([data-nbkh-ui="v3"]) #manCt > .khoiTrangThai .chonTT button{
  min-height:72px;padding:var(--v2-card-inner-padding)
}
html:not([data-nbkh-ui="v3"]) #manCt > .khoiTrangThai .motaTT{
  margin:0
}

/* Card lưu lượt KHÔNG tự đặt padding/margin nữa: nó đã mang class .theFigma
   nên đi theo quy cách thẻ chung, và khoảng cách giữa các thẻ do gap của
   #manNhapXe lo. Hai action khác độ rộng theo tần suất nhưng cùng chiều cao. */
html:not([data-nbkh-ui="v3"]) #manNhapXe > .khoiLuuLuot .nutTT{
  width:100%;gap:var(--v2-gap-related);align-items:stretch
}
html:not([data-nbkh-ui="v3"]) #manNhapXe > .the.khoiLuuLuot .nutTT button{
  height:var(--v2-action-height);min-height:var(--v2-action-height);
  padding:var(--v2-card-inner-padding);box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manNhapXe > .khoiLuuLuot #btnLenBe{
  flex:1 1 0;min-width:0
}

/* Xoá bản nháp là thao tác phụ: icon-only nhưng vùng chạm vẫn rộng và rõ focus. */
html:not([data-nbkh-ui="v3"]) .nutTT #btnXoaTT{
  flex:0 0 82px;min-width:72px;min-height:82px;padding:0;
  border:0;border-radius:var(--v2-radius-control);background:var(--v2-surface-strong);
  color:var(--v2-brand);display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) .nutTT #btnXoaTT .chuXoaTT{display:none}
html:not([data-nbkh-ui="v3"]) .nutTT #btnXoaTT .ic{
  display:block;margin:0;width:24px;height:24px;transform:none
}
html:not([data-nbkh-ui="v3"]) .nutTT #btnXoaTT:disabled{
  background:var(--v2-brand-soft-strong);color:#a3a3a3;opacity:.65;cursor:not-allowed
}

/* Sheet/modal mềm, bo lớn; bỏ đường phân cách không cần thiết. */
html:not([data-nbkh-ui="v3"]) :where(.popup,.theCN,.theLSTB,.bk-hop-bien-nhan){
  border-radius:var(--v2-radius-sheet) var(--v2-radius-sheet) 0 0;
  background:var(--v2-canvas);
  box-shadow:0 -18px 48px rgba(17,17,17,.16)
}
html:not([data-nbkh-ui="v3"]) :where(.lop,.lopCN,.bk-lop){background:rgba(17,17,17,.48)}
html:not([data-nbkh-ui="v3"]) .mucCN{border-top-color:#f3f4f6}
html:not([data-nbkh-ui="v3"]) .popup :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  background:#fff;box-shadow:0 2px 8px rgba(17,17,17,.045)
}
html:not([data-nbkh-ui="v3"]) .popup .dem :where(button,input){
  background:#fff;box-shadow:0 2px 8px rgba(17,17,17,.045)
}
html:not([data-nbkh-ui="v3"]) .popup :where(label,h3){color:#303846}

/* Nút trạng thái popup Gửi xe dùng CHUNG contract với Thu ngân (.luaChonFigma):
   nền tonal, nghĩa hành động nằm ở well tròn có màu quanh icon.
   Trước đây popup tự đè bằng nền đặc với lý do đọc được dưới nắng ngoài bến;
   đã bỏ theo yêu cầu đồng bộ hai app. Nếu nhân viên bến phản ánh khó nhìn
   ngoài trời thì đây là chỗ cần xem lại đầu tiên. */

/* Nút thư viện là control phụ trên card trắng, dùng surface xám để không chìm. */
html:not([data-nbkh-ui="v3"]) .btnThuVien{
  background:var(--v2-surface-strong)!important;color:var(--v2-brand)!important;
  box-shadow:none!important
}
html:not([data-nbkh-ui="v3"]) .btnThuVien .ic{stroke:currentColor}

/* Thanh đáy giống một pill nổi trên nền xám. */
html:not([data-nbkh-ui="v3"]) .tabApp-cum{
  border:0;border-radius:28px;background:rgba(255,255,255,.94);box-shadow:var(--v2-shadow-float)
}
html:not([data-nbkh-ui="v3"]) .tabApp-muc{border-radius:20px}
html:not([data-nbkh-ui="v3"]) .tabApp-them{
  border:0;box-shadow:0 10px 26px rgba(17,17,17,.2)
}
html:not([data-nbkh-ui="v3"]) .thanhDuoi{
  border-top-color:transparent;border-radius:22px 22px 0 0;
  box-shadow:0 -10px 28px rgba(17,17,17,.08)
}

/* Booking surfaces và segmented controls. */
html:not([data-nbkh-ui="v3"]) .bk-bo-cuc{gap:18px}
html:not([data-nbkh-ui="v3"]) .bk-muc{padding:16px 18px}
html:not([data-nbkh-ui="v3"]) .bk-lich-thang{padding:17px}
html:not([data-nbkh-ui="v3"]) .bk-doi-che-do{
  padding:4px;border-radius:18px;background:var(--v2-surface-strong)
}
html:not([data-nbkh-ui="v3"]) .bk-doi-che-do button{box-shadow:none!important}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay{
  border-radius:12px;background:var(--v2-surface-strong)
}
html:not([data-nbkh-ui="v3"]) .bk-ngay-grid-moi button:not(.on){
  background:var(--v2-surface-strong)
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay.co-booking{
  background:#d1fae5;color:#065f46
}
html:not([data-nbkh-ui="v3"]) .bk-ds-ngay-lich{
  border:0;border-radius:20px;background:var(--v2-surface-soft);padding:16px
}
html:not([data-nbkh-ui="v3"]) .bk-ds-ngay-lich h3,
html:not([data-nbkh-ui="v3"]) .bk-ds-ngay-lich p{text-align:center}
html:not([data-nbkh-ui="v3"]) .bk-main :where(
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]),
  textarea:not([aria-invalid="true"]),select:not([aria-invalid="true"])
):focus{
  outline:none;border-color:transparent;background:#fff;
  box-shadow:0 0 0 2px rgba(17,17,17,.12)
}
html:not([data-nbkh-ui="v3"]) .bk-main :where(
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]),
  textarea:not([aria-invalid="true"]),select:not([aria-invalid="true"])
):focus-visible{
  border-color:transparent;outline:2px solid var(--v2-focus-stroke);outline-offset:1px;
  background:#fff;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .bk-chon-dv .bk-icon-dv,
html:not([data-nbkh-ui="v3"]) .bk-chon-dv:has(input:checked) .bk-icon-dv{
  background:#fff;color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .bk-thanh-modal{background:var(--v2-canvas)}
html:not([data-nbkh-ui="v3"]) .bk-khung-gia{border-left:0;padding:var(--v2-space-a);border-radius:18px;background:var(--v2-surface-soft)}

/* Thiết lập: danh sách con nằm trên surface tonal, không khoanh từng hàng. */
html:not([data-nbkh-ui="v3"]) .cd-trang-thai{gap:10px;margin-bottom:16px}
html:not([data-nbkh-ui="v3"]) .cd-online,
html:not([data-nbkh-ui="v3"]) .cd-user{background:var(--v2-surface-soft);box-shadow:none}
html:not([data-nbkh-ui="v3"]) .cd-bang-wrap{overflow-x:auto;overflow-y:hidden;box-shadow:none}
html:not([data-nbkh-ui="v3"]) .cd-bang-quyen th{background:var(--v2-surface-soft)}
html:not([data-nbkh-ui="v3"]) .cd-the #formKhuyenMai{
  border:0;border-radius:20px;background:var(--v2-surface-soft)
}

/* Accent thông tin: chuyển mint thương hiệu sang thang xám. */
html:not([data-nbkh-ui="v3"]) .tinDong.chuaDoc,
html:not([data-nbkh-ui="v3"]) .mucLSTB.chuaDoc{
  background:var(--v2-brand-soft);border-color:var(--v2-brand-border)
}
html:not([data-nbkh-ui="v3"]) .tinDong.chuaDoc{
  background:#fff;border-color:transparent;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) .tinDong.chuaDoc .dauTin i{background:#dc2626}
html:not([data-nbkh-ui="v3"]) .mucLSTB.chuaDoc{border-left:0}
html:not([data-nbkh-ui="v3"]) .badgeLoaiTB.booking{
  background:#dbeafe;color:#1e40af
}
html:not([data-nbkh-ui="v3"]) .tongKhach{
  background:var(--v2-brand-soft);color:var(--v2-brand)
}

/* Khối tiền/hoa hồng chỉ mang accent, không phải trạng thái “đã chi”. */
html:not([data-nbkh-ui="v3"]) .veCano,
html:not([data-nbkh-ui="v3"]) .chietKhauCano,
html:not([data-nbkh-ui="v3"]) .boxHH{
  background:var(--v2-brand-soft);border-color:var(--v2-brand-border);color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .chietKhauCano label,
html:not([data-nbkh-ui="v3"]) .chietKhauCano small,
html:not([data-nbkh-ui="v3"]) .tomTatHH,
html:not([data-nbkh-ui="v3"]) .tomTatHH .hanhDongHH,
html:not([data-nbkh-ui="v3"]) .boxHH .d,
html:not([data-nbkh-ui="v3"]) .boxHH .nhapHH label,
html:not([data-nbkh-ui="v3"]) .boxHH .ghiChuHH{
  color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .chietKhauCano input,
html:not([data-nbkh-ui="v3"]) .veCano.veCanoSua input,
html:not([data-nbkh-ui="v3"]) .boxHH .nhapHH input{
  background:#fff;border-color:transparent;color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .veCano.veCanoSua label,
html:not([data-nbkh-ui="v3"]) .veCano.veCanoSua .goiYTien{
  color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .tomTatHH:focus-visible{outline-color:var(--v2-brand)}
html:not([data-nbkh-ui="v3"]) .chiTietHH,
html:not([data-nbkh-ui="v3"]) .boxHH .nhapHH,
html:not([data-nbkh-ui="v3"]) .boxHH .d.mo{
  border-color:var(--v2-brand-border)
}

/* Booking: tổng tiền và lựa chọn hiện tại dùng đen; trạng thái hoàn tất vẫn xanh. */
html:not([data-nbkh-ui="v3"]) .bk-tong,
html:not([data-nbkh-ui="v3"]) .bk-dau-loc-ngay,
html:not([data-nbkh-ui="v3"]) .bk-bn-tien{
  border:0;background:var(--v2-brand-soft);color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .bk-tong .bk-cuoi{border-color:var(--v2-brand-border)}
/* Tóm tắt cọc luôn có ba dòng ổn định: hai khoản thành phần và kết luận.
   Công thức vẫn do `tinhCocTuForm()` cung cấp; CSS chỉ đổi hierarchy. */
html:not([data-nbkh-ui="v3"]) #boxTong.ketQuaTinh{
  display:grid;align-items:stretch;justify-content:normal;gap:6px;
  min-height:0;padding:10px;margin:3px 0 15px;
  border:0;border-radius:18px;background:var(--v2-surface-strong);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-dong-tien{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  min-width:0;padding:10px 12px;border:0;border-radius:14px;background:#fff
}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-dong-tien span{
  min-width:0;color:var(--v2-brand-muted);font-size:12px;overflow-wrap:anywhere
}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-dong-tien b{
  color:var(--v2-brand);font-size:14px;white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-cuoi{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  min-width:0;margin:0;padding:11px 12px;border:0;border-radius:14px;
  background:var(--v2-brand);color:#fff
}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-cuoi :where(span,b){color:#fff}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-cuoi span{
  min-width:0;font-size:11px;line-height:1.35;overflow-wrap:anywhere
}
html:not([data-nbkh-ui="v3"]) #boxTong .bk-cuoi b{
  font-size:clamp(18px,5.2vw,22px);white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh button{
  --mau-loc:var(--v2-brand);--nen-loc:var(--v2-surface-soft);
  border:0;background:var(--nen-loc);border-radius:var(--v2-radius-control);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh button.tt-cho_xac_nhan{
  --mau-loc:#d97706
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh button.tt-da_xac_nhan{
  --mau-loc:#0284c7
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh button.tt-da_den{
  --mau-loc:#059669
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh button.tt-ket_thuc{
  --mau-loc:#dc2626
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh button.on{
  border-color:transparent;background:var(--v2-brand);box-shadow:none
}

html:not([data-nbkh-ui="v3"]) .bk-muc[role="button"]:focus-visible{
  outline-color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) :where(.bk-chon-hen-moi,.bk-nut-cai-hen)[aria-expanded="true"]{
  border-color:var(--v2-brand-border);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(.bk-chon-hen-moi,.bk-nut-cai-hen)[aria-expanded="true"]:focus-visible{
  border-color:var(--v2-brand-border);box-shadow:none!important;
  outline:2px solid rgba(51,65,85,.22);outline-offset:2px
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay:hover:not(:disabled):not(.co-booking):not(.dang-chon):not(.on){
  border-color:#e2e8f0!important;background:#f8fafc!important;color:#334155!important;outline:none!important
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay:focus-visible:not(.co-booking):not(.dang-chon):not(.on){
  border-color:#cbd5e1!important;background:#f8fafc!important;color:#334155!important;
  outline:2px solid rgba(51,65,85,.22)!important;outline-offset:1px
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay.co-booking{
  background:#d1fae5!important;color:#065f46!important
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay.dang-chon,
html:not([data-nbkh-ui="v3"]) .bk-ngay-grid-moi button.dang-chon,
html:not([data-nbkh-ui="v3"]) .bk-ngay-grid-moi button.on{
  border-color:#111!important;background:#d1fae5!important;color:#065f46!important;
  box-shadow:inset 0 0 0 1px #111!important
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay.co-booking:focus-visible,
html:not([data-nbkh-ui="v3"]) .bk-o-ngay.dang-chon:focus-visible,
html:not([data-nbkh-ui="v3"]) .bk-o-ngay.on:focus-visible{
  outline:2px solid rgba(6,95,70,.24)!important;outline-offset:1px
}
html:not([data-nbkh-ui="v3"]) .bk-o-ngay b,
html:not([data-nbkh-ui="v3"]) .bk-ngay-grid-moi button b{background:#dc2626!important;color:#fff!important}
html:not([data-nbkh-ui="v3"]) .bk-dau-loc-ngay b{color:var(--v2-brand)}
html:not([data-nbkh-ui="v3"]) .bk-buoc.xong .bk-moc{
  background:var(--luc);border-color:var(--luc)
}
html:not([data-nbkh-ui="v3"]) .bk-buoc.xong:not(:last-child)::before{background:var(--luc)}
html:not([data-nbkh-ui="v3"]) .bk-buoc.hien-tai .bk-moc{
  border-color:#737373;box-shadow:0 0 0 3px var(--v2-brand-soft-strong)
}
html:not([data-nbkh-ui="v3"]) .bk-buoc.hien-tai .bk-buoc-the{
  box-shadow:0 5px 14px rgba(0,0,0,.18)
}
html:not([data-nbkh-ui="v3"]) .bk-bn-chinh-sach a,
html:not([data-nbkh-ui="v3"]) .bk-bn-nha-be b{color:var(--v2-brand)}

/* Component đồng cấp V2. Các utility mới là tên contract; selector cũ là
   fallback để trạng thái đang render không đổi trong lúc chuyển dần markup. */

/* StatePanel: empty/loading/error cùng geometry, khác màu theo đúng nghĩa. */
html:not([data-nbkh-ui="v3"]) :where(
  .trangThaiNoiDung,.trongRong,.bk-trang-thai-ds,.cd-trong,.cd-skeleton,.thongBaoRong
){
  min-height:112px;padding:24px 18px;border:0;border-radius:20px;
  background:var(--v2-surface-soft);box-shadow:none;color:var(--mo);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;line-height:1.5
}
html:not([data-nbkh-ui="v3"]) :where(.bk-trang-thai-ds,.trangThaiNoiDung){min-height:140px}
html:not([data-nbkh-ui="v3"]) :where(
  .trangThaiNoiDung.loi,.trangThaiNoiDung[data-trang-thai="loi"],.bk-trang-thai-ds.loi
){
  background:#fef2f2;color:#b91c1c
}
html:not([data-nbkh-ui="v3"]) :where(
  .trangThaiNoiDung.dangTai,.trangThaiNoiDung[aria-busy="true"],.oDangLam,.nhanDangSua
){
  border:0;border-radius:18px;background:#eff6ff;color:#1d4ed8;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .oDangLam b,
html:not([data-nbkh-ui="v3"]) .nhanDangSua{color:#1d4ed8}
html:not([data-nbkh-ui="v3"]) :where(
  .trangThaiNoiDung,.bk-trang-thai-ds,.oDangLam,.nhanDangSua
) .quay{
  border-color:#bfdbfe;border-top-color:#2563eb
}
html:not([data-nbkh-ui="v3"]) :where(.cd-loi,.baoLoi,.bangAI.loi){
  border-color:transparent;border-radius:18px;background:#fef2f2;color:#b91c1c
}

/* Badge và indicator dùng cùng kích thước/pill; màu semantic không bị đổi. */
html:not([data-nbkh-ui="v3"]) :where(
  .badge,.bk-badge,.badgeLoaiTB,.badgeChuaDoc,.dangO,.cd-live,.cd-vai-tro,.cd-dem
){
  border:0;border-radius:999px;font-weight:800;line-height:1.2;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(.badge,.bk-badge){padding:5px 9px}
html:not([data-nbkh-ui="v3"]) .badge.cho_chot{background:#fef3c7;color:#92400e}
html:not([data-nbkh-ui="v3"]) .badge.chua_chi{background:#ffedd5;color:#9a3412}
html:not([data-nbkh-ui="v3"]) .badge.da_chi,
html:not([data-nbkh-ui="v3"]) .bk-badge.ok{background:#d1fae5;color:#065f46}
html:not([data-nbkh-ui="v3"]) .badge.huy,
html:not([data-nbkh-ui="v3"]) .bk-badge.xau{background:#fee2e2;color:#991b1b}
html:not([data-nbkh-ui="v3"]) .bk-badge.canh{background:#fef3c7;color:#92400e}
html:not([data-nbkh-ui="v3"]) .bk-badge.hoan,
html:not([data-nbkh-ui="v3"]) .badgeLoaiTB.luotMoi,
html:not([data-nbkh-ui="v3"]) .badgeLoaiTB.booking{background:#dbeafe;color:#1e40af}
html:not([data-nbkh-ui="v3"]) .badgeLoaiTB.capNhat{background:#fef3c7;color:#92400e}
html:not([data-nbkh-ui="v3"]) .badgeLoaiTB.tinNhan,
html:not([data-nbkh-ui="v3"]) :where(.dangO,.cd-live){background:#d1fae5;color:#065f46}
html:not([data-nbkh-ui="v3"]) .dangO.dangChon{
  background:var(--v2-brand-soft-strong);color:var(--v2-brand)
}
html:not([data-nbkh-ui="v3"]) .dangO.thanhCong{background:#d1fae5;color:#065f46}
html:not([data-nbkh-ui="v3"]) .badgeChuaDoc{background:#dc2626;color:#fff}
html:not([data-nbkh-ui="v3"]) :where(.cd-online-dot,.cd-live i,.cd-avt i){
  background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.15)
}
html:not([data-nbkh-ui="v3"]) :where(.tinDong.chuaDoc .dauTin i){background:#dc2626}
html:not([data-nbkh-ui="v3"]) :where(.chamTB){background:#dc2626}
html:not([data-nbkh-ui="v3"]) :where(.bangAI .cham){background:#2563eb}

/* Danh sách Gửi xe nằm trực tiếp trên canvas. Từng `.luot` tự sở hữu
   surface, radius và shadow; không bọc toàn bộ danh sách trong một card nữa. */
html:not([data-nbkh-ui="v3"]) #manDanhSachXe > .the{
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
  margin-bottom:var(--v2-card-gap)
}

/* Mọi control chỉ có icon giữ vùng chạm tối thiểu 44px. */
html:not([data-nbkh-ui="v3"]) #manDanhSachXe .hangNut{
  display:flex;align-items:center;gap:var(--v2-gap-control);margin-left:auto
}
html:not([data-nbkh-ui="v3"]) :where(
  header .nutTron,header .nutNguCanhQuayLai,.nutDongTB,.nutIconChuan,
  .btnTim,.bk-nut-icon,.bk-nut-lam-moi,.bk-doi-che-do button,
  .oTim > button,.bk-thanh-modal > button,.cd-sheet-head > .nutTron,
  .lichTN-dau > button,.bk-chon-thang > button:not(.bk-ve-thang-hien-tai),
  #btnXem,#btnSapXepGuiXe
){
  min-width:44px;min-height:44px;padding:0;display:grid;place-items:center;flex:0 0 auto
}
html:not([data-nbkh-ui="v3"]) .nutDongTB{
  width:44px;height:44px;border:0;border-radius:50%;background:#fff;
  color:var(--v2-brand);box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) :where(
  .nutDongTB,.nutIconChuan,.btnTim,.bk-nut-icon,.bk-nut-lam-moi,
  .bk-doi-che-do button,.oTim > button,.bk-thanh-modal > button,
  .cd-sheet-head > .nutTron,.lichTN-dau > button,#btnXem,#btnSapXepGuiXe
) :where(.ic,svg){width:21px;height:21px;margin:0}

/* Kết quả tính tự động có một vocabulary riêng, không giả làm ô nhập. */
html:not([data-nbkh-ui="v3"]) :where(.ketQuaTinh,.tongKhach,.oKhachTuTinh){
  min-width:0;border:0;border-radius:18px;background:var(--v2-surface-strong);
  color:var(--v2-brand-muted);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(.ketQuaTinh,.tongKhach){
  min-height:46px;padding:10px 13px;display:flex;align-items:center;
  justify-content:space-between;gap:12px
}
html:not([data-nbkh-ui="v3"]) :where(
  .ketQuaTinh b,.ketQuaTinh output,.tongKhach b,.oKhachTuTinh output
){
  color:var(--v2-brand);font-variant-numeric:tabular-nums;font-weight:850
}
html:not([data-nbkh-ui="v3"]) .oKhachTuTinh :where(b,small){color:var(--v2-brand-muted)}

/* Tổng quyết toán: ba dòng thành phần cùng cấp, dòng phải thu là kết luận.
   Khối này đứng sau vocabulary `.ketQuaTinh` để grid không bị generic flex lấn. */
html:not([data-nbkh-ui="v3"]) #qtTong.ketQuaTinh{
  display:grid;align-items:stretch;justify-content:normal;gap:6px;
  min-height:0;padding:10px;margin:3px 0 15px;
  border:0;border-radius:20px;background:#fff;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-dong-tien{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 11px;border:0;border-radius:12px;background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-dong-tien span{
  color:var(--v2-brand-muted);font-size:12px
}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-dong-tien b{
  color:var(--v2-brand);font-size:14px;white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-cuoi{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;
  margin:2px 0 0;padding:12px;border:0;border-radius:14px;
  background:var(--v2-brand);color:#fff
}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-cuoi :where(span,b){color:#fff}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-cuoi span{
  min-width:0;font-size:10.5px;line-height:1.35
}
html:not([data-nbkh-ui="v3"]) #qtTong .bk-cuoi b{
  font-size:clamp(18px,5.4vw,23px);white-space:nowrap
}

/* Summary số liệu là vùng đọc; summary bộ lọc là segmented control. */
html:not([data-nbkh-ui="v3"]) :where(.tomtat > .o,.bk-loc-tien-trinh > button){
  min-height:58px;padding:11px 3px;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) .tomtat.tomtat-so-lieu,
html:not([data-nbkh-ui="v3"]) .tomtat:has(> .o:not(button)){
  background:#fff;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) .tomtat.tomtat-so-lieu > .o,
html:not([data-nbkh-ui="v3"]) .tomtat:has(> .o:not(button)) > .o{
  cursor:default;background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) .tomtat.tomtat-so-lieu > .o:active,
html:not([data-nbkh-ui="v3"]) .tomtat:has(> .o:not(button)) > .o:active{transform:none}
html:not([data-nbkh-ui="v3"]) .tomtat.tomtat-bo-loc,
html:not([data-nbkh-ui="v3"]) .tomtat:has(> button.o){
  padding:var(--v2-gap-control);background:#fff;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh{
  gap:var(--v2-gap-control);margin-bottom:var(--v2-gap-section);
  padding:var(--v2-gap-control);border:0;border-radius:24px;
  background:#fff;box-shadow:var(--v2-shadow-card)
}
html:not([data-nbkh-ui="v3"]) .cd-loc{
  gap:4px;padding:5px;border:0;border-radius:24px;
  background:var(--v2-surface-strong);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .cd-loc button{box-shadow:none}
html:not([data-nbkh-ui="v3"]) .tomtat.tomtat-bo-loc > button.o:not(.on),
html:not([data-nbkh-ui="v3"]) .tomtat:has(> button.o) > button.o:not(.on){
  background:var(--v2-surface-soft);color:var(--mo)
}
html:not([data-nbkh-ui="v3"]) .tomtat.tomtat-bo-loc > button.o.on,
html:not([data-nbkh-ui="v3"]) .tomtat:has(> button.o) > button.o.on{
  background:var(--v2-brand);color:#fff;box-shadow:var(--v2-shadow-card)
}

/* Header cục bộ trong sheet/modal: title rõ, một nút đóng 44px, không kẻ line. */
html:not([data-nbkh-ui="v3"]) :where(.dauLSTB,.cd-sheet-head,.bk-thanh-modal,.lichTN-dau){
  min-height:44px;border-bottom:0
}
html:not([data-nbkh-ui="v3"]) :where(.popup > h3,.tieuDeTB,.cd-sheet-head h2,.bk-thanh-modal strong){
  color:var(--v2-brand);font-size:17px;font-weight:850;letter-spacing:-.01em
}
html:not([data-nbkh-ui="v3"]) .lichTN-dau{
  grid-template-columns:44px minmax(0,1fr) 44px
}

/* Disabled/pressed/focus là state của control, không dùng màu brand để thay
   cho các màu xanh/cam/đỏ/xanh dương mang nghĩa nghiệp vụ. */
html:not([data-nbkh-ui="v3"]) :where(
  button,a,input,select,textarea,[role="button"],[tabindex]
):focus-visible{
  outline:2px solid var(--v2-brand);outline-offset:2px;
  box-shadow:0 0 0 3px var(--v2-brand-ring)
}
/* Field nhập dùng một stroke xám duy nhất. Tránh cộng border + outline + ring
   thành ba đường đen như ảnh feedback, nhưng vẫn giữ tương phản bàn phím. */
html:not([data-nbkh-ui="v3"]) :where(
  .manDangNhap,#app,.popup,.theCN,.theLSTB,.bk-hop-bien-nhan,.lopCN
) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([aria-invalid="true"]),
  select:not([aria-invalid="true"]),textarea:not([aria-invalid="true"])
):focus-visible{
  border-color:transparent;outline:2px solid var(--v2-focus-stroke);outline-offset:1px;
  background:#fff;box-shadow:none
}
/* Composer có ring ở container qua :focus-within nên input con không vẽ thêm. */
html:not([data-nbkh-ui="v3"]) .goTin input:focus-visible{
  outline:none;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(
  .btnTim,.nutPhu,.bk-nut-icon,.bk-doi-che-do button,.loc button,.cd-loc button
):is([aria-pressed="true"],[aria-selected="true"]){
  border-color:transparent!important;background:var(--v2-brand)!important;
  color:#fff!important;box-shadow:none!important;font-weight:850
}
html:not([data-nbkh-ui="v3"]) :where(
  .nutChinh,.btnChup,.btnThem,.btnThemXe,.nutTT button,.xemThem,.nutXam,
  .btnTim,.nutPhu,.bk-nut-icon,.bk-nut-lam-moi,.bk-hanh-dong button,
  .cd-btn-chinh,.cd-btn-phu,.cd-hanh-dong button
):active:not(:disabled){transform:scale(.98)}
html:not([data-nbkh-ui="v3"]) :where(
  .nutChinh,.btnChup,.btnThem,.btnThemXe,.nutTT button,.xemThem,.nutXam,
  .btnTim,.nutPhu,.bk-nut-icon,.bk-nut-lam-moi,.bk-hanh-dong button,
  .bk-chon-thang button,.cd-btn-chinh,.cd-btn-phu,.cd-hanh-dong button
):disabled{
  cursor:not-allowed;box-shadow:none!important;filter:saturate(.65)
}
html:not([data-nbkh-ui="v3"]) :where(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
):disabled{
  background:var(--v2-surface-strong);color:var(--v2-brand-muted);
  -webkit-text-fill-color:var(--v2-brand-muted);opacity:1;cursor:not-allowed
}

/* Agentation UI-V4: action một dòng được bo tối đa thành pill/circle; panel
   nhiều dòng chỉ dùng radius panel để nội dung và padding không bị cong lấn. */
html:not([data-nbkh-ui="v3"]) #manNhapXe > .khoiLuuLuot #btnLenBe{
  border-radius:var(--v2-radius-action-max)
}
html:not([data-nbkh-ui="v3"]) #manNhapXe > .khoiLuuLuot #btnXoaTT{
  border-radius:var(--v2-radius-action-max)
}

html:not([data-nbkh-ui="v3"]) .tabApp-cum{
  position:relative;overflow:hidden;border-radius:var(--v2-radius-action-max)
}
html:not([data-nbkh-ui="v3"]) .tabApp-cum > .tabApp-muc{
  border-radius:var(--v2-radius-action-max);transition:transform .24s ease,opacity .2s ease
}

/* Counter khách là một primitive chung giữa Gửi xe và Booking. Hai form
   Booking dùng modifier riêng để không làm thay đổi counter quyết toán. */
html:not([data-nbkh-ui="v3"]) #khuCano.bk-chi-tiet-dv{
  padding-left:0;border-left:0
}
html:not([data-nbkh-ui="v3"]) .bk-luoi-khach{
  grid-template-columns:1fr;gap:10px;min-width:0
}
html:not([data-nbkh-ui="v3"]) .bk-luoi-khach > .bk-nhom{min-width:0;margin-bottom:0}
html:not([data-nbkh-ui="v3"]) :where(
  .khachTach > div > span,
  .bk-luoi-khach > .bk-nhom > label
){
  display:block;margin-bottom:6px;color:var(--v2-brand-muted);
  font-size:11.5px;font-weight:800;line-height:1.2
}
html:not([data-nbkh-ui="v3"]) :where(.khachTach .dem,.bk-luoi-khach .bk-dem){gap:5px;min-width:0}
html:not([data-nbkh-ui="v3"]) :where(.khachTach .dem,.bk-luoi-khach .bk-dem) :where(button,input){
  height:44px;min-height:44px;border:0;border-radius:var(--v2-radius-action-max);
  background:var(--v2-surface-soft);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(.khachTach .dem,.bk-luoi-khach .bk-dem) button{
  width:44px;min-width:44px;flex:0 0 44px
}
html:not([data-nbkh-ui="v3"]) :where(.khachTach .dem,.bk-luoi-khach .bk-dem) input{
  min-width:0;flex:1 1 0;padding:8px 3px;font-size:18px
}

html:not([data-nbkh-ui="v3"]) #manNhapXe .hangChup #btnChup{
  min-height:54px;border-radius:var(--v2-radius-action-max)
}
html:not([data-nbkh-ui="v3"]) #manNhapXe .hangChup #btnThuVien{
  width:54px;height:54px;min-width:54px;min-height:54px;flex:0 0 54px;
  border-radius:var(--v2-radius-action-max)!important
}

html:not([data-nbkh-ui="v3"]) #hangTim > .hangTim{
  width:max-content;max-width:100%;padding:0;gap:10px;
  border-radius:0;background:transparent;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #hangTim > .hangTim .btnTim{
  width:44px;height:44px;min-width:44px;min-height:44px;
  border-radius:var(--v2-radius-action-max)!important
}
html:not([data-nbkh-ui="v3"]) #hangTim > .oTim{
  transform-origin:center;will-change:opacity,transform
}
html:not([data-nbkh-ui="v3"]) #hangTim > .oTim.tim-vao{
  animation:nbkh-tim-vao .2s cubic-bezier(.2,.8,.2,1) both
}
html:not([data-nbkh-ui="v3"]) #hangTim > .oTim.tim-ra{
  pointer-events:none;animation:nbkh-tim-ra .16s ease-in both
}
@keyframes nbkh-tim-vao{
  from{opacity:0;transform:translateY(-6px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes nbkh-tim-ra{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-5px) scale(.985)}
}

/* Thông tin xe đi kèm chỉ mở khi cần, tránh bày sẵn field trống. */
html:not([data-nbkh-ui="v3"]) #manCt .xeThemTuyChon{margin:0 0 10px;min-width:0}
html:not([data-nbkh-ui="v3"]) #manCt .nutMoXeThem{
  width:100%;min-height:44px;padding:10px 14px;border:0;
  border-radius:var(--v2-radius-action-max);background:var(--v2-surface-soft);
  color:var(--v2-brand-muted);display:flex;align-items:center;justify-content:space-between;
  gap:10px;font:inherit;font-size:12px;font-weight:800
}
html:not([data-nbkh-ui="v3"]) #manCt .nutMoXeThem .ic{
  width:18px;height:18px;transition:transform .18s ease
}
html:not([data-nbkh-ui="v3"]) #manCt .nutMoXeThem[aria-expanded="true"] .ic{transform:rotate(180deg)}
html:not([data-nbkh-ui="v3"]) #manCt .xeThemChiTiet{
  margin:8px 0 0;padding:12px;border-radius:18px;background:var(--v2-surface-soft)
}
html:not([data-nbkh-ui="v3"]) #manCt .xeThemChiTiet :where(input,select,textarea){background:#fff}

/* Hộp xác nhận bỏ lượt nháp: hành động giữ dữ liệu là lựa chọn chính. */
html:not([data-nbkh-ui="v3"]) .xacNhanRoiLuot > p{
  margin:-4px 0 18px;color:var(--v2-brand-muted);font-size:13px;line-height:1.55
}
html:not([data-nbkh-ui="v3"]) .xacNhanRoiLuot .hangNut{align-items:stretch}
html:not([data-nbkh-ui="v3"]) .xacNhanRoiLuot .hangNut > button{
  min-height:50px;border-radius:var(--v2-radius-action-max)
}
html:not([data-nbkh-ui="v3"]) .xacNhanRoiLuot .vanRoi{color:#b91c1c}

html:not([data-nbkh-ui="v3"]) .bk-doi-che-do{
  border-radius:var(--v2-radius-action-max)
}
html:not([data-nbkh-ui="v3"]) #dongChiTiet{
  width:44px;height:44px;min-width:44px;min-height:44px;
  border-radius:var(--v2-radius-action-max)!important
}
/* Cụm đổi chế độ phải cao BẰNG nút bên cạnh (feedback chủ dự án 28/08/2026):
   khung đệm 4px + nút 36px = 44px tổng, icon thu về 18px cho cân. */
html:not([data-nbkh-ui="v3"]) .bk-doi-che-do button{
  width:36px;height:36px;min-width:36px;min-height:36px;padding:0;
  border-radius:var(--v2-radius-action-max)!important
}
html:not([data-nbkh-ui="v3"]) .bk-doi-che-do button :where(.ic,svg){width:18px;height:18px}
/* Nút sắp xếp quay lại dạng chỉ-icon 28/08/2026 (feedback chủ dự án): tròn
   44×44; kiểu sắp xếp đang dùng nói qua title/aria-label và toast khi đổi. */
html:not([data-nbkh-ui="v3"]) #btnSapXepBooking{
  width:44px;min-width:44px;height:44px;min-height:44px;padding:0;
  display:grid;place-items:center;
  border-radius:var(--v2-radius-action-max)!important
}
/* Thẻ yêu cầu web/chứng từ bo góc theo đúng card chuẩn của theme
   (feedback chủ dự án 28/08/2026: bo tròn theo style tổng thể). */
html:not([data-nbkh-ui="v3"]) .bk-web-muc{
  border-radius:var(--v2-radius-card)
}
html:not([data-nbkh-ui="v3"]) #qtTong.ketQuaTinh{
  border-radius:var(--v2-radius-panel-max)
}
/* Bước hiện tại: phần diễn giải chiếm bên trái, cụm action nằm bên phải
   khi đủ chỗ. Flex-wrap tự đưa action xuống hàng ở mobile hẹp. */
html:not([data-nbkh-ui="v3"]) .bk-buoc-the > .bk-buoc-noi-dung{
  display:block;min-width:0;max-width:100%;flex:1 1 100px
}
html:not([data-nbkh-ui="v3"]) .bk-buoc-noi-dung > div{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0
}
html:not([data-nbkh-ui="v3"]) .bk-buoc-noi-dung small{overflow-wrap:anywhere}
html:not([data-nbkh-ui="v3"]) .bk-buoc-the.co-hanh-dong{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:10px 12px;min-width:0;max-width:100%
}
html:not([data-nbkh-ui="v3"]) .bk-hanh-dong-buoc{
  width:max-content;max-width:100%;padding:5px;margin-top:9px;
  border:0;border-radius:var(--v2-radius-action-max);
  background:rgba(255,255,255,.16);grid-template-columns:none;
  grid-auto-flow:column;grid-auto-columns:44px
}
html:not([data-nbkh-ui="v3"]) .bk-buoc-the.co-hanh-dong > .bk-hanh-dong-buoc{
  display:grid;flex:0 0 auto;align-self:center;margin:0
}
html:not([data-nbkh-ui="v3"]) .bk-hanh-dong-buoc.co-hai-hanh-dong{
  grid-template-columns:repeat(2,44px);grid-auto-flow:row
}
html:not([data-nbkh-ui="v3"]) .bk-hanh-dong-buoc button{
  width:44px;min-width:44px;height:44px;min-height:44px;
  border-radius:var(--v2-radius-action-max)
}
html:not([data-nbkh-ui="v3"]) :where(
  .bk-nut-tao,.bk-nut-phu,.bk-hanh-dong button,.bk-nut-lam-moi,
  .bk-chon-thang button,.bk-dau-loc-ngay button,.bk-bo-loc,.bk-hang-sap-xep button
){border-radius:var(--v2-radius-action-max)}

/* Icon bút được dựng trực tiếp trong button để không phụ thuộc sprite thiếu;
   V2 tăng tương phản để icon không chìm vào nền trắng của nút phụ. */
html:not([data-nbkh-ui="v3"]) #ctBtnSua{
  background:#fff!important;color:var(--v2-brand)!important
}
html:not([data-nbkh-ui="v3"]) #ctBtnSua .ic{
  width:18px;height:18px;color:var(--v2-brand);stroke:currentColor;
  stroke-width:2.2;opacity:1
}

/* Thu ngân: lịch sử giao dịch dùng slot phải của compact header; fallback
   trong card vẫn giữ geometry ổn định trước khi controller chuyển node. */
html:not([data-nbkh-ui="v3"]) #manCt > .the > h2.dauTheCoHanhDong{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt > .the > h2.dauTheCoHanhDong > .cumHanhDongThongTin{
  display:flex;align-items:center;gap:7px;flex:0 0 auto
}
html:not([data-nbkh-ui="v3"]) #manCt #viTriNutLichSu{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .canNguCanh.coHanhDongNguCanh{
  display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .canNguCanh.coHanhDongNguCanh > #btnLichSuLuot{
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;
  border-radius:var(--v2-radius-action-max);display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .canNguCanh.coHanhDongNguCanh > #btnLichSuLuot .ic{
  width:21px;height:21px;margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt .oKhachTuTinh small,
html:not([data-nbkh-ui="v3"]) #manCt .chietKhauCano > small,
/* `#nhanSapXepBooking` đã ĐƯỢC BỎ khỏi danh sách này ngày 28/08/2026: nhãn nay
   nằm trong chính nút sắp xếp, và ẩn nó đi là lấy mất thông tin duy nhất cho
   biết danh sách đang xếp theo kiểu gì. `.bk-nhan-xep` (nhãn rời cũ) vẫn ẩn. */
html:not([data-nbkh-ui="v3"]) :where(
  .chuXoaLuot,.troGiupChietKhauCano,
  .bk-nhan-xep
){display:none}

html:not([data-nbkh-ui="v3"]) #thanhDuoi{
  border-radius:var(--v2-radius-panel-max) var(--v2-radius-panel-max) 0 0
}
html:not([data-nbkh-ui="v3"]) #thanhDuoi #btnXoa{
  width:52px;height:52px;min-width:52px;min-height:52px;flex:0 0 52px;
  padding:0;gap:0;border-radius:var(--v2-radius-action-max);font-size:0
}
html:not([data-nbkh-ui="v3"]) #thanhDuoi #btnXoa .ic{
  width:22px;height:22px;margin:0
}
html:not([data-nbkh-ui="v3"]) #thanhDuoi #btnLuu{
  min-height:52px;border-radius:var(--v2-radius-action-max)
}
/* Icon hai nút thanh dưới cùng một cỡ (feedback 28/08/2026: đồng bộ kích thước). */
html:not([data-nbkh-ui="v3"]) #thanhDuoi #btnLuu .ic{
  width:22px;height:22px;margin:0
}

/* STATUS-UX-V3: fallback và toast trong tab dùng cùng pill, type và màu.
   Success/trung tính là đen; lỗi giữ đỏ semantic. */
html:not([data-nbkh-ui="v3"]) body > #nbkhToast.toast{
  min-height:var(--status-ux-v3-min-height);max-width:450px;box-sizing:border-box;
  padding:8px 14px;border-radius:var(--status-ux-v3-radius);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;line-height:1.25;color:var(--status-ux-v3-text)
}

/* JS chuyển toast vào `.tabApp-cum` và thêm class hook này. Toast trượt thay
   cụm tab; CTA dấu cộng là sibling nên không bị che hoặc di chuyển. */
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp{
  height:auto;min-height:68px;align-items:flex-end
}
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum[data-toast-hien="true"]{
  height:max(64px,calc(var(--nbkh-toast-height,50px) + 14px));align-self:flex-end
}
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-them{
  align-self:flex-end
}
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum > #nbkhToast.nbkh-toast-thanh-tab{
  position:absolute;inset:7px 8px;z-index:3;width:auto;min-width:0;
  min-height:var(--status-ux-v3-min-height);
  margin:0;padding:8px 14px;box-sizing:border-box;border-radius:var(--status-ux-v3-radius);
  display:flex;align-items:center;justify-content:center;max-width:100%;overflow:visible;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  font-size:12.5px;line-height:1.25;text-align:center;
  transform:translate3d(110%,0,0);opacity:0;pointer-events:none;
  transition:transform .26s ease,opacity .18s ease
}
html:not([data-nbkh-ui="v3"]) body > #nbkhToast.toast.ok,
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum > #nbkhToast.nbkh-toast-thanh-tab.ok{
  background:var(--status-ux-v3-ok);color:var(--status-ux-v3-text)
}
html:not([data-nbkh-ui="v3"]) body > #nbkhToast.toast.loi,
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum > #nbkhToast.nbkh-toast-thanh-tab.loi{
  background:var(--status-ux-v3-error);color:var(--status-ux-v3-text)
}
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum > #nbkhToast.nbkh-toast-thanh-tab:is(.hien,[data-trang-thai="hien"]){
  transform:translate3d(0,0,0);opacity:1;pointer-events:auto
}
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum > #nbkhToast.nbkh-toast-thanh-tab:is(.dang-an,[data-trang-thai="ra"]){
  transform:translate3d(-110%,0,0);opacity:0;pointer-events:none
}
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum[data-toast-hien="true"] > .tabApp-muc,
html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum:has(> #nbkhToast.nbkh-toast-thanh-tab.hien) > .tabApp-muc{
  transform:translate3d(-110%,0,0);opacity:0;pointer-events:none
}

@media (prefers-reduced-motion:reduce){
  html:not([data-nbkh-ui="v3"]) #hangTim > .oTim:is(.tim-vao,.tim-ra){animation-duration:.01ms}
  html:not([data-nbkh-ui="v3"]) .tabApp-cum > .tabApp-muc,
  html:not([data-nbkh-ui="v3"]) body.nbkh-toast-trong-tab .tabApp-cum > #nbkhToast.nbkh-toast-thanh-tab{
    transition:none
  }
}

@media (max-width:430px){
  html:not([data-nbkh-ui="v3"]){--v2-card-padding:var(--v2-card-padding-compact)}
  html:not([data-nbkh-ui="v3"]) main{
    padding-left:calc(var(--v2-space-a) + env(safe-area-inset-left));
    padding-right:calc(var(--v2-space-a) + env(safe-area-inset-right))
  }
  html:not([data-nbkh-ui="v3"]) :where(.tomtat .o,.bk-loc-tien-trinh button){border-radius:16px}
  html:not([data-nbkh-ui="v3"]) .luot,
  html:not([data-nbkh-ui="v3"]) .bk-muc{border-radius:22px}
}

@media (max-width:360px){
  html:not([data-nbkh-ui="v3"]) .bk-buoc-the.co-hanh-dong{flex-wrap:wrap}
}

@media print{
  html:not([data-nbkh-ui="v3"]) :where(.bk-bien-nhan,.bk-hop-bien-nhan){
    border:1px solid #d1d5db;border-radius:0;box-shadow:none
  }
}

/* --------------------------------------------------------------------------
   THU NGÂN / FIGMA BASE 2026-08-10

   Sáu frame Figma dùng cùng một nhịp: canvas 560, card trắng radius 24 và
   hàng tonal cao 72/radius 20. Gutter, padding và margin giữa card tiếp tục
   dùng token mặc định của web; route V3 giữ design system riêng.
   Contract mới nhất ngày 2026-08-11 được bổ sung ở lớp override cuối file;
   ô Chiết khấu thêm vẫn giữ trong Cano dù frame tham chiếu không vẽ nó. */
html:not([data-nbkh-ui="v3"]){
  --tn-figma-canvas:#eeeeef;
  --tn-figma-surface:#ffffff;
  --tn-figma-row:#f8f8f9;
  --tn-figma-result:#e9e9e9;
  --tn-figma-commission:#dedede;
  --tn-figma-ink:#181818;
  --tn-figma-text:#545f71;
  --tn-figma-placeholder:rgba(84,95,113,.2);
  --tn-figma-line:#c7c7c7;
  --tn-figma-row-gap:var(--v2-space-a);
  --tn-figma-row-height:72px;
  --tn-figma-row-radius:20px;
}

html:not([data-nbkh-ui="v3"]) #manCt{
  width:100%;max-width:560px;padding:40px
    calc(var(--v2-space-a) + env(safe-area-inset-right)) 40px
    calc(var(--v2-space-a) + env(safe-area-inset-left));
  border-radius:24px;background:var(--tn-figma-canvas)
}
html:not([data-nbkh-ui="v3"]) #manCt > .the{
  width:100%;max-width:520px;margin:0;
  padding:var(--v2-space-a);border:0;border-radius:24px;
  background:var(--tn-figma-surface);box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #manCt > .the > h2{
  height:35px;min-height:35px;margin:0;display:flex;align-items:center;
  color:var(--tn-figma-ink);font-size:12px;font-weight:850;
  line-height:1.2;letter-spacing:-.01em;text-transform:none
}
html:not([data-nbkh-ui="v3"]) #manCt > .the > h2.dauTheCoHanhDong{
  height:35px;min-height:35px
}
html:not([data-nbkh-ui="v3"]) #thanhDuoi{
  max-width:560px;padding-right:calc(var(--v2-space-a) + env(safe-area-inset-right));
  padding-left:calc(var(--v2-space-a) + env(safe-area-inset-left))
}

/* Thông tin tài xế — view mode là các hàng dữ liệu, edit mode dùng cùng
   surface nhưng input trắng để nhận rõ vùng có thể thay đổi. */
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(#xemTT,#suaTT){
  min-width:0
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #xemTT{
  display:grid;gap:var(--tn-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #xemTT.an{display:none}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nhomThongTinChinh{
  display:grid;gap:var(--tn-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
  .nhomThongTinChinh > .dong,.hangTaiKhoan > .dong
){
  min-height:var(--tn-figma-row-height);margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  display:grid;grid-template-columns:minmax(88px,.8fr) minmax(0,1.7fr);
  align-items:center;gap:12px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .nhan{
  flex:none;color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .gtri{
  min-width:0;color:var(--tn-figma-text);font-size:20px;font-weight:850;
  line-height:1.15;text-align:right;overflow-wrap:anywhere
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .gtri.trong{
  color:var(--tn-figma-placeholder);font-weight:800;font-style:normal
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(.dongBienSo,.dongStk) .gtri{
  min-height:44px;padding:8px 14px;border-radius:var(--v2-radius-action-max);
  background:#fff;display:flex;align-items:center;justify-content:flex-end
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongBienSo .gtri{
  font-size:22px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongStk .gtri{
  font-size:16px;font-weight:750
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan .gtri{
  white-space:normal;overflow:visible;text-overflow:clip
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan > .dong{
  grid-template-columns:max-content minmax(0,1fr);gap:6px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan .nhan{
  font-size:11px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan .gtri{
  font-size:16px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nutMoXeThemTuXem{
  width:100%;min-height:44px;margin:-3px 0;padding:0 2px;border:0;
  border-radius:0;background:transparent;color:var(--tn-figma-text);
  box-shadow:none;justify-content:flex-end;font-size:10px;font-weight:750
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nutMoXeThemTuXem .ic{
  width:18px;height:18px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chiTietNguoiXuLy{
  margin-top:10px;border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row)
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chiTietNguoiXuLy > summary{
  min-height:44px;padding:10px 14px;cursor:pointer;list-style:none;
  color:var(--tn-figma-text);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:space-between
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chiTietNguoiXuLy > summary::-webkit-details-marker{
  display:none
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chiTietNguoiXuLy > summary::after{
  content:'⌄';font-size:16px;line-height:1
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chiTietNguoiXuLy .dong{
  min-height:36px;margin:0 14px;padding:6px 0;background:transparent;
  border-bottom:1px solid #fff
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT{
  display:grid;gap:var(--tn-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT.an{display:none}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT > :where(.nhom,.hang,.xeThemTuyChon){
  min-width:0;margin:0;padding:var(--v2-space-a);border-radius:var(--tn-figma-row-radius);
  background:var(--tn-figma-row)
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT label{
  color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT input{
  min-height:44px;border:0;border-radius:var(--v2-radius-action-max);background:#fff;
  color:var(--tn-figma-text);font-weight:800
}

/* Khách & bàn — hai output đầu cùng cấp; bộ đếm và bill là hàng 72px. */
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan :where(.hangKhachBan,.khachThuNgan){
  margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tn-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan > *{
  width:auto;min-height:var(--tn-figma-row-height);padding:var(--v2-space-a);
  border:0;border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(72px,auto);
  align-items:center;gap:8px
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan label{
  margin:0;color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBanAn{
  grid-template-columns:max-content minmax(0,1fr)
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBanAn label{
  white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan input{
  min-width:0;min-height:44px;padding:8px 12px;border:0;
  border-radius:var(--v2-radius-action-max);background:#fff;
  color:var(--tn-figma-text);font-size:24px;font-weight:850;text-align:right
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan .oKhachTuTinh{
  width:auto;height:auto;min-height:var(--tn-figma-row-height);align-self:auto;
  border:1px solid var(--tn-figma-line);background:var(--tn-figma-result)
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .oKhachTuTinh b{
  color:var(--tn-figma-text);font-size:11px;white-space:normal
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .oKhachTuTinh output{
  color:var(--tn-figma-text);font-size:24px
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .khachThuNgan{
  display:grid;grid-template-columns:1fr;gap:var(--tn-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan :where(.nhomSoKhach,.hangDemKhach){
  min-height:var(--tn-figma-row-height);padding:var(--v2-space-a);
  border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,202px);
  align-items:center;gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan :where(.nhomSoKhach,.hangDemKhach) > label{
  margin:0;color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan){
  min-width:0;display:flex;align-items:center;gap:5px
}
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) :where(button,input){
  height:44px;min-height:44px;border:0;border-radius:var(--v2-radius-action-max);
  background:#fff;color:var(--tn-figma-text);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) button{
  width:44px;min-width:44px;flex:0 0 44px;padding:0;display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) button .ic{
  width:22px;height:22px;margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) input{
  min-width:44px;flex:1 1 0;padding:8px 4px;text-align:center;
  font-size:20px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBillAn{
  min-height:var(--tn-figma-row-height);padding:var(--v2-space-a);
  border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  display:grid;grid-template-columns:minmax(90px,1fr) minmax(120px,2fr);
  align-items:center;gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBillAn label{
  margin:0;color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBillAn input{
  min-height:44px;padding:8px 14px;border:0;border-radius:var(--v2-radius-action-max);
  background:#fff;color:var(--tn-figma-text);font-size:20px;font-weight:850;text-align:right
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .goiYTien{min-height:0}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan > .goiy:last-child{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)
}

/* Cano — hai hàng vé chia sẻ primitive counter. Chiết khấu thêm là hàng
   nghiệp vụ bổ sung; tổng tiền và cờ đã chi nằm ở hàng cuối. */
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano{
  border-left:0
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve{
  min-height:var(--tn-figma-row-height);margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  display:grid;grid-template-columns:minmax(72px,1fr) minmax(140px,1.45fr) minmax(86px,105px);
  align-items:center;gap:8px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nhanVe{
  color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nutGia{
  width:100%;min-height:44px;padding:8px 9px;border:0;
  border-radius:var(--v2-radius-action-max);background:var(--tn-figma-result);
  color:var(--tn-figma-text);font-size:13px;justify-content:center
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nutGia .ic{
  width:20px;height:20px;order:-1;stroke:currentColor
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nutGia.khongHH{
  background:#fff1d5;color:#8b6b2e
}
/* Ô Tiền vé (nay là input sửa được) dùng CHUNG bộ luật với ô Chiết khấu thêm —
   cùng chiều cao hàng, cùng cỡ chữ, cùng nền (feedback chủ dự án 28/08/2026:
   hai thẻ phải tương đồng, đồng bộ). */
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .chietKhauCano,
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano.veCanoSua{
  min-height:var(--tn-figma-row-height);min-width:0;max-width:100%;box-sizing:border-box;
  margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  display:grid;grid-template-columns:minmax(104px,1fr) minmax(120px,1.5fr);
  align-items:center;gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .chietKhauCano label,
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano.veCanoSua label{
  margin:0;color:var(--tn-figma-text);font-size:13px;font-weight:850
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .chietKhauCano input,
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano.veCanoSua input{
  min-height:44px;border:0;border-radius:var(--v2-radius-action-max);background:#fff;
  color:var(--tn-figma-text);font-size:18px;font-weight:850;text-align:right
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .chietKhauCano :where(.goiYTien,small),
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano.veCanoSua .goiYTien{
  grid-column:1/-1
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .hangTongCano{
  display:grid;grid-template-columns:minmax(0,283fr) minmax(0,187fr);gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano :where(.veCano,#fChiCano){
  min-height:var(--tn-figma-row-height);margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--tn-figma-row-radius);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano{
  background:var(--tn-figma-result);color:var(--tn-figma-text);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;
  font-size:13px;text-align:left
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano > b{
  color:var(--tn-figma-text);font-size:20px;text-align:right
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano{
  background:var(--tn-figma-row);color:var(--tn-figma-text);gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano .dau{
  width:44px;height:44px;border:0;border-radius:11px;background:#fff
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano .chu b{
  color:var(--tn-figma-text);font-size:12px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano .chu small{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)
}

/* Hoa hồng — frame tham chiếu là trạng thái mở. Trạng thái thu gọn mặc định
   vẫn giữ để không làm dài thao tác thường ngày. */
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong{
  background:var(--tn-figma-commission)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .boxHH{
  border:0;border-radius:var(--tn-figma-row-radius);background:#fff;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .tomTatHH{
  min-height:var(--tn-figma-row-height);padding:var(--v2-space-a);color:var(--tn-figma-text)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .tomTatHH .soHH small{
  color:var(--tn-figma-text);font-size:13px;letter-spacing:0
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .tomTatHH .soHH b{
  color:var(--tn-figma-text);font-size:22px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .hanhDongHH{
  color:var(--tn-figma-text);font-size:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .chiTietHH{
  min-height:104px;padding:0 14px 14px;border:0;color:var(--tn-figma-text)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .boxHH .d{
  min-height:25px;padding:0;color:var(--tn-figma-text);font-size:13px;font-weight:500
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiHoaHong .boxHH .d b{
  font-weight:500
}

/* Trạng thái — icon well và label nằm ngang như frame; màu nền/icon vẫn
   truyền đạt đúng chờ/đã chi/hủy và aria-pressed tiếp tục là nguồn state. */
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT[data-so-lua-chon="4"]{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button{
  width:100%;min-width:0;min-height:var(--tn-figma-row-height);padding:4px;
  border:0;border-radius:19px;background:var(--tn-figma-row);
  color:var(--tn-figma-text);display:flex;flex-direction:row;
  align-items:center;justify-content:flex-start;
  gap:6px;font-size:13px;font-weight:850;line-height:1.15;text-align:left
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button .ic{
  width:44px;height:44px;min-width:44px;padding:10px;margin:0;
  border-radius:50%;background:#fff;stroke:currentColor
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.cho_chot .ic{
  background:#fef3c7;color:#92400e
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.chua_chi .ic{
  background:#fff1d5;color:#af9258
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.da_chi .ic{
  color:#65cb69
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.huy .ic{
  background:#ffd5d5;color:#9a3838
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.on.cho_chot{
  background:#fef3c7;color:var(--tn-figma-text)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.on.chua_chi{
  background:#fff1d5;color:var(--tn-figma-text)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.on.da_chi{
  background:#d5ffdb;color:var(--tn-figma-text)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button.on.huy{
  background:#ffe4e4;color:var(--tn-figma-text)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .motaTT{
  margin-top:9px;color:var(--tn-figma-text);font-size:10px;font-weight:300
}

@media (max-width:430px){
  html:not([data-nbkh-ui="v3"]) #manCt{
    padding:24px calc(var(--v2-space-a) + env(safe-area-inset-right)) 34px
      calc(var(--v2-space-a) + env(safe-area-inset-left))
  }
  html:not([data-nbkh-ui="v3"]) #manCt > .the{padding:var(--v2-space-a)}
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT{gap:6px}
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button{
    gap:3px;padding:3px;font-size:11.5px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button .ic{
    width:40px;height:40px;min-width:40px;padding:9px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve{
    min-height:112px;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nhan gia" "dem dem";gap:8px;padding:var(--v2-space-a)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nhanVe{grid-area:nhan}
  html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .demVeThuNgan{grid-area:dem}
  html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve > em{grid-area:gia}
  html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .hangTongCano{
    grid-template-columns:1fr
  }
}

@media (max-width:400px){
  html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
    .nhomThongTinChinh > .dong,.hangTaiKhoan > .dong
  ){
    grid-template-columns:minmax(74px,.8fr) minmax(0,1.7fr);padding:var(--v2-space-a)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .gtri{
    font-size:17px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongBienSo .gtri{
    font-size:19px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan > *{
    padding:var(--v2-space-a);grid-template-columns:minmax(0,1fr) minmax(54px,auto)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan :where(.nhomSoKhach,.hangDemKhach){
    padding:var(--v2-space-a);grid-template-columns:minmax(72px,1fr) minmax(0,164px)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBanAn input{
    font-size:clamp(20px,5.6vw,24px)
  }
}

/* --------------------------------------------------------------------------
   FIGMA PRIMITIVES / V3.0.7

   Hai frame rỗng/đã nhập dùng cùng một component contract. Các class này
   được gắn có chủ đích ở Thu ngân, Gửi xe và Booking V2 để field mới không
   quay lại kiểu label trên/input dưới hoặc counter vuông. V3 chỉ nhận hook
   markup, không nhận palette/hình học của block này. */
html:not([data-nbkh-ui="v3"]){
  --v2-figma-card-radius:24px;
  --v2-figma-row-radius:20px;
  --v2-figma-row-height:72px;
  --v2-figma-control-height:44px;
  --v2-figma-row-gap:10px;
  --v2-figma-card-gap:24px;
  --v2-figma-card-padding:var(--v2-space-a);
  /* Icon + nhãn trạng thái: cùng một khoảng a bao quanh icon và mép nhãn. */
  --v2-icon-status-inset:var(--v2-space-a);
  --v2-icon-status-gap:6px;
  --v2-icon-status-well:44px;
  --v2-figma-row:#f8f8f9;
  --v2-figma-output:#e9e9e9;
  --v2-figma-text:#545f71;
  --v2-figma-placeholder:rgba(84,95,113,.2)
}

/* KHÔNG dùng :where() ở đây: :where() có specificity 0 nên quy cách thẻ thua
   `.the{margin-bottom}` và `.the > h2{margin-bottom}`, tức viết ra mà không
   bao giờ áp dụng. Cần specificity thật để class opt-in này thắng. */
html:not([data-nbkh-ui="v3"]) .theFigma,
html:not([data-nbkh-ui="v3"]) .bk-the.theFigma{
  min-width:0;max-width:100%;padding:var(--v2-space-a);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a);
  border:0;border-radius:var(--v2-figma-card-radius);background:#fff;
  box-shadow:none;margin-bottom:0
}
/* Các thẻ cách nhau bằng gap của container, không phải margin của từng thẻ:
   một chỗ chỉnh duy nhất, không cộng dồn margin giữa các thẻ liền kề. */
/* :not(.an) là bắt buộc: selector có ID nên specificity cao hơn `.an{display:none}`,
   thiếu nó thì màn nhập không bao giờ ẩn được và màn danh sách không mở riêng. */
html:not([data-nbkh-ui="v3"]) #manNhapXe:not(.an){
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-figma-card-gap)
}
html:not([data-nbkh-ui="v3"]) #manNhapXe > .the{margin-bottom:0}
/* Gửi xe dùng một nhịp duy nhất trong mọi card: 14px giữa các phần tử,
   24px giữa các card. Scope theo màn nhập để không đổi mật độ app khác. */
html:not([data-nbkh-ui="v3"]) #manNhapXe > .theFigma{
  gap:var(--v2-space-a)
}
/* Căn giữa dọc là bắt buộc: thiếu nó thì chữ 14.4px nằm sát mép trên hộp 35px
   và dồn toàn bộ 20px trống xuống dưới, nhìn như tiêu đề không có padding.
   Thẻ mẫu #manCt > .the > h2 vốn đã căn giữa. */
html:not([data-nbkh-ui="v3"]) .theFigma > h2,
html:not([data-nbkh-ui="v3"]) .bk-the.theFigma > h2{
  height:35px;min-height:35px;margin:0;display:flex;align-items:center;
  color:#181818;font-size:12px;font-weight:850;
  line-height:1.2;letter-spacing:-.01em;text-transform:none
}

/* Một field = một row tonal 72px: label trái, control trắng dạng pill phải. */
html:not([data-nbkh-ui="v3"]) .truongFigma{
  position:relative;min-width:0;min-height:var(--v2-figma-row-height);
  margin:0;padding:var(--v2-space-a);border:0;border-radius:var(--v2-figma-row-radius);
  background:var(--v2-figma-row);display:grid;
  grid-template-columns:minmax(88px,.78fr) minmax(0,1.7fr);
  align-items:center;gap:8px;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .truongFigma > label{
  min-width:0;margin:0;color:var(--v2-figma-text);font-size:13px;
  font-weight:850;line-height:1.2
}
html:not([data-nbkh-ui="v3"]) .truongFigma > :where(
  input:not([type="checkbox"]):not([type="radio"]),select
){
  width:100%;min-width:0;height:var(--v2-figma-control-height);min-height:var(--v2-figma-control-height);
  padding:8px 14px;border:0;border-radius:var(--v2-radius-action-max);
  background:#fff;color:var(--v2-figma-text);box-shadow:none;
  font-size:17px;font-weight:800;text-align:right
}
html:not([data-nbkh-ui="v3"]) .truongFigma > :where(input,select)::placeholder{
  color:var(--v2-figma-placeholder);opacity:1
}
html:not([data-nbkh-ui="v3"]) .truongFigma > :where(.bk-loi-o,.bk-goi-y,.goiy){
  grid-column:1/-1
}
html:not([data-nbkh-ui="v3"]) :where(.theFigmaNhap,.khachTachFigma) .moTaFigmaAn,
html:not([data-nbkh-ui="v3"]) .theFigmaNhap #ghiChuBien{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) .truongFigma.oGoiY > .dsGoiY{
  left:14px;right:14px;top:calc(100% + 4px);z-index:40
}
html:not([data-nbkh-ui="v3"]) .truongFigmaNhieuDong{
  min-height:auto;grid-template-columns:1fr;align-items:start
}
html:not([data-nbkh-ui="v3"]) .truongFigmaNhieuDong > textarea{
  width:100%;min-width:0;min-height:104px;padding:var(--v2-space-a);border:0;
  border-radius:18px;background:#fff;color:var(--v2-figma-text);
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.45;
  resize:vertical;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) :where(.luoiTruongFigma,.hangTaiKhoanNhap){
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--v2-figma-row-gap);
  min-width:0;margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT{
  gap:var(--v2-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT > .truongFigma,
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoanNhap > .truongFigma{
  margin:0;padding:var(--v2-space-a);border-radius:var(--v2-figma-row-radius);
  background:var(--v2-figma-row)
}

/* Counter = row tonal + hai target tròn 44px + value pill. */
html:not([data-nbkh-ui="v3"]) :where(.khachTachFigma,.bk-luoi-khach){
  display:grid;grid-template-columns:1fr;gap:var(--v2-figma-row-gap);min-width:0
}
/* `.bk-luoi-khach` cũng mang class nền `.bk-luoi-2`; khai báo tường minh
   để primitive Figma luôn thắng độ ưu tiên cũ và mỗi counter có trọn một
   hàng 72px, kể cả ở 390px. */
html:not([data-nbkh-ui="v3"]) .bk-luoi-khach{
  display:grid;grid-template-columns:1fr;gap:var(--v2-figma-row-gap);min-width:0
}
html:not([data-nbkh-ui="v3"]) .nhomKhachFigma{
  position:relative;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .nhomKhachFigma > label:first-child{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) .nhomKhachFigma > .tongKhach{
  min-height:var(--v2-figma-row-height);margin:0;
  padding:var(--v2-space-a);border:0;border-radius:var(--v2-figma-row-radius);
  background:var(--v2-figma-output);display:flex;align-items:center;
  justify-content:space-between;color:var(--v2-figma-text);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manNhapXe .nhomKhachFigma > .tongKhach output{
  font-size:20px;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums
}
html:not([data-nbkh-ui="v3"]) .nhomDemFigma{
  min-width:0;min-height:var(--v2-figma-row-height);margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--v2-figma-row-radius);background:var(--v2-figma-row);
  display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,202px);
  align-items:center;gap:10px;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .nhomDemFigma > :where(label,span){
  min-width:0;margin:0;color:var(--v2-figma-text);font-size:13px;
  font-weight:850;line-height:1.2
}
html:not([data-nbkh-ui="v3"]) .demFigma{
  min-width:0;width:100%;display:flex;align-items:center;justify-self:end;gap:5px
}
html:not([data-nbkh-ui="v3"]) .demFigma :where(button,input){
  height:var(--v2-figma-control-height);min-height:var(--v2-figma-control-height);
  border:0;border-radius:var(--v2-radius-action-max);background:#fff;
  color:var(--v2-figma-text);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .demFigma button{
  width:44px;min-width:44px;flex:0 0 44px;padding:0;display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) .demFigma button .ic{
  width:24px;height:24px;margin:0;stroke:currentColor
}
html:not([data-nbkh-ui="v3"]) .demFigma input{
  min-width:44px;flex:1 1 0;padding:8px 3px;text-align:center;
  font-size:20px;font-weight:850;appearance:textfield;-moz-appearance:textfield
}
html:not([data-nbkh-ui="v3"]) .demFigma input::-webkit-inner-spin-button,
html:not([data-nbkh-ui="v3"]) .demFigma input::-webkit-outer-spin-button{
  margin:0;-webkit-appearance:none
}

/* Choice trạng thái dùng chung: row 72px/r19, icon-well 44px và label ngang. */
html:not([data-nbkh-ui="v3"]) .luaChonFigma{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
html:not([data-nbkh-ui="v3"]) .luaChonFigma button{
  min-width:0;min-height:var(--v2-figma-row-height);
  padding:var(--v2-icon-status-inset);
  border:0;border-radius:19px;background:var(--v2-figma-row);
  color:var(--v2-figma-text);display:grid;
  grid-template-columns:var(--v2-icon-status-well) minmax(0,1fr);
  align-items:center;justify-content:stretch;gap:var(--v2-icon-status-gap);
  font-size:13px;font-weight:850;text-align:left;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .luaChonFigma button .ic{
  width:var(--v2-icon-status-well);height:var(--v2-icon-status-well);
  min-width:var(--v2-icon-status-well);padding:10px;margin:0;
  border-radius:50%;background:#fff;stroke:currentColor
}
html:not([data-nbkh-ui="v3"]) :where(
  .luaChonFigma,
  #manCt .khoiTrangThai .chonTT
) .nhanTrangThai{
  width:100%;min-width:0;text-align:left;overflow-wrap:anywhere
}
html:not([data-nbkh-ui="v3"]) .luaChonFigma button.lenbe .ic{
  background:#e2fbe9;color:#0b8b65
}
html:not([data-nbkh-ui="v3"]) .luaChonFigma button.huy .ic{
  background:#ffd5d5;color:#9a3838
}
html:not([data-nbkh-ui="v3"]) .luaChonFigma button.on.lenbe{
  background:#d5ffdb;color:var(--v2-figma-text)
}
html:not([data-nbkh-ui="v3"]) .luaChonFigma button.on.huy{
  background:#ffe4e4;color:var(--v2-figma-text)
}

/* Booking kế thừa primitive thanh trạng thái dùng chung ở cuối file. */

@media (max-width:560px){
  html:not([data-nbkh-ui="v3"]) :where(.luoiTruongFigma,.hangTaiKhoanNhap){
    grid-template-columns:1fr
  }
}
@media (max-width:390px){
  html:not([data-nbkh-ui="v3"]){
    --v2-icon-status-gap:4px;
    --v2-icon-status-well:40px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan{
    grid-template-columns:1fr
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan > .dong{
    grid-template-columns:minmax(70px,auto) minmax(0,1fr)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan .gtri{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan > .hangBanAn{
    grid-template-columns:max-content minmax(0,1fr)
  }
  html:not([data-nbkh-ui="v3"]) .truongFigma{
    grid-template-columns:minmax(78px,.72fr) minmax(0,1.55fr);padding:var(--v2-space-a)
  }
  html:not([data-nbkh-ui="v3"]) .nhomDemFigma{
    grid-template-columns:minmax(72px,1fr) minmax(0,164px);padding:var(--v2-space-a)
  }
  html:not([data-nbkh-ui="v3"]) .luaChonFigma{gap:6px}
}

/* --------------------------------------------------------------------------
   AGENTATION / RHYTHM

   Row cùng card dùng nhịp liên quan; các card chi tiết dùng margin mặc định
   của web. Không thay payload, công thức hoặc trạng thái. */
html:not([data-nbkh-ui="v3"]) #manCt{
  border-radius:0;background:transparent
}
html:not([data-nbkh-ui="v3"]) #manCt #khuAnhChat{
  width:100%;min-width:0;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #manCt #khuAnhChat > .the.khongDem{
  width:100%;min-width:0;max-width:520px;margin:0;
  padding:var(--v2-space-a);
  border:0;border-radius:var(--v2-figma-card-radius);
  background:#fff;box-shadow:none;box-sizing:border-box
}

html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button{
  padding:var(--v2-icon-status-inset);display:grid;
  grid-template-columns:var(--v2-icon-status-well) minmax(0,1fr);
  align-items:center;justify-content:stretch;
  gap:var(--v2-icon-status-gap);text-align:left
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT .nhanTrangThai{
  width:100%;min-width:0;text-align:left;overflow-wrap:anywhere
}

html:not([data-nbkh-ui="v3"]) .theFigmaNhap > :where(.nhom,.nhomKhachFigma){
  margin:0
}
/* Nhóm khách tự làm grid: nhãn, hai ô đếm và dòng tổng cách nhau bằng gap,
   không phần tử nào tự đẩy bằng margin. */
html:not([data-nbkh-ui="v3"]) .nhomKhachFigma{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
/* Danh sách lượt: khoảng cách giữa các thẻ do container quản. */
html:not([data-nbkh-ui="v3"]) #dsLuot{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #dsLuot > .luot{margin-bottom:0}
/* .hangChup là con của thẻ grid nên margin nền tảng chỉ cộng dồn vào gap. */
html:not([data-nbkh-ui="v3"]) .theFigma > .hangChup{margin:0}
/* Popup sửa lượt của Gửi xe theo đúng quy cách thẻ: grid + một gap duy nhất. */
html:not([data-nbkh-ui="v3"]) .popupFigma{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .popupFigma > h3{margin:0}
html:not([data-nbkh-ui="v3"]) .popupFigma > :where(.nhom,.nhomKhachFigma,.goiy,.hangNut){
  margin:0
}
/* Mỗi .nhom trong popup là một grid: nhãn và control cách nhau bằng gap,
   nhãn không mang margin đáy mặc định của <label>. */
html:not([data-nbkh-ui="v3"]) .popupFigma > .nhom{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) .popupFigma > .nhom > label{margin:0}

html:not([data-nbkh-ui="v3"]) #formBooking > .bk-the.theFigma{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #formBooking > .bk-the.theFigma > :where(
  .bk-nhom,.bk-luoi-2,.bk-mo-ta,.bk-dich-vu,.bk-chi-tiet-dv,
  .bk-tong,.bk-canh-bao,.bk-nut-tao,.bk-goi-y,.bk-chon-hen-moi
){
  margin:0
}
html:not([data-nbkh-ui="v3"]) #formBooking .luoiTruongFigma{
  row-gap:var(--v2-space-a);column-gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #boxTong.ketQuaTinh{
  min-height:0;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #boxTong > :where(.bk-dong-tien,.bk-cuoi){
  min-width:0;min-height:var(--v2-figma-row-height);margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--v2-figma-row-radius);
  background:var(--v2-figma-row);color:var(--v2-figma-text);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--v2-figma-row-gap);box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #boxTong > .bk-cuoi{
  background:var(--v2-figma-output)
}
html:not([data-nbkh-ui="v3"]) #boxTong > :where(.bk-dong-tien,.bk-cuoi) :where(span,b){
  color:var(--v2-figma-text)
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-canh-bao{
  min-height:var(--v2-figma-row-height);margin:0;padding:var(--v2-space-a);
  border-radius:var(--v2-figma-row-radius);display:flex;align-items:center;
  box-sizing:border-box
}
@media (max-width:430px){
  html:not([data-nbkh-ui="v3"]){
    --v2-icon-status-gap:4px;
    --v2-icon-status-well:40px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button{
    font-size:clamp(10.5px,3vw,11.75px)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button .ic{
    width:var(--v2-icon-status-well);height:var(--v2-icon-status-well);
    min-width:var(--v2-icon-status-well)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT .nhanTrangThai{
    white-space:nowrap
  }
}

/* --------------------------------------------------------------------------
   THU NGÂN / RECORDED DETAIL — FIGMA 2026-08-11

   Các ký hiệu a/b/e trong Figma là quan hệ bằng nhau, không phải số đo mới.
   Màn chi tiết dùng `--v2-space-a` của app cho gutter/safe-area, card và hàng
   dữ liệu; không tạo token cục bộ hay suy ra một giá trị px từ bản vẽ. */
html:not([data-nbkh-ui="v3"]) #manCt{
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #manCt > .the{
  min-width:0;max-width:100%;padding:var(--v2-space-a);
  border-radius:24px;box-sizing:border-box
}

/* Lượt đã ghi: một surface tonal liền mạch. Mọi giá trị chỉ đọc là text trực
   tiếp; pill trắng chỉ thuộc trạng thái nhập có class semantic riêng. */
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nhomThongTinChinh{
  width:100%;min-width:0;max-width:100%;gap:0;overflow:hidden;
  border:0;border-radius:20px;background:#f8f8f9;box-shadow:none;
  box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .hangTaiKhoan{
  display:contents
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
  .nhomThongTinChinh > .dong,.hangTaiKhoan > .dong
){
  width:100%;min-width:0;max-width:100%;min-height:60px;margin:0;
  padding:0 var(--v2-space-a);border:0;border-bottom:1px solid #dedede;
  border-radius:0;background:transparent;box-shadow:none;
  display:grid;grid-template-columns:minmax(88px,.8fr) minmax(0,1.7fr);
  align-items:center;gap:12px;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nhomThongTinChinh > .dongGioTao{
  border-bottom:0
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .gtri,
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(.dongBienSo,.dongStk) .gtri{
  min-width:0;max-width:100%;min-height:0;padding:0;border:0;border-radius:0;
  background:transparent;color:#545f71;box-shadow:none;
  display:block;font-size:18px;font-weight:850;line-height:1.2;
  text-align:right;overflow-wrap:anywhere
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongBienSo .gtri{
  font-size:18px;white-space:pre-line
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
  .dongTenTaiXe,.dongZalo,.dongNganHang
) .gtri{
  font-size:18px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongStk .gtri{
  font-size:16px;font-weight:750
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongGioTao .gtri{
  font-size:20px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .gtri.trong{
  background:transparent;color:var(--tn-figma-placeholder);font-style:normal
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nutMoXeThemTuXem{
  display:none!important
}

/* Edit mode: semantic class quyết định control có pill hay là chữ trực tiếp.
   Độ ưu tiên được khóa trong `#manCt` để generic `.truongFigma` vẫn phục vụ
   Gửi xe và Booking như cũ. */
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT :where(
  .truongFigmaPill,.truongFigmaChuTrucTiep,.truongFigmaDropdownTrucTiep
){
  width:100%;min-width:0;max-width:100%;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT .truongFigmaPill > input{
  width:100%;min-width:0;max-width:100%;height:44px;min-height:44px;
  padding:var(--v2-gap-control) var(--v2-space-a);
  border:0;border-radius:var(--v2-radius-action-max);background:#fff;
  color:#545f71;box-shadow:none;font-size:17px;font-weight:800;text-align:right;
  box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT .truongFigmaChuTrucTiep > input{
  width:100%;min-width:0;max-width:100%;height:44px;min-height:44px;
  padding:var(--v2-gap-control) 0;
  border:0;border-radius:0;background:transparent;color:#545f71;
  box-shadow:none;font-size:18px;font-weight:800;text-align:right;
  box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT .truongFigmaChuTrucTiep > input:focus{
  border:0;background:transparent;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT .truongFigmaChuTrucTiep > input:focus-visible{
  outline:2px solid var(--v2-focus-stroke);outline-offset:2px;border-radius:4px
}

html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe #suaTT .truongFigmaDropdownTrucTiep > label[for="fNganHang"]{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chonNganHangFigma{
  width:100%;min-width:0;max-width:100%;display:grid;
  grid-template-columns:18px minmax(0,1fr);align-items:center;gap:6px;
  grid-column:1/-1;color:#545f71;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chevronNganHangFigma{
  width:18px;height:18px;margin:0;opacity:.68;stroke:currentColor;
  pointer-events:none
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chonNganHangFigma > select{
  appearance:none;-webkit-appearance:none;width:100%;min-width:0;max-width:100%;
  height:44px;min-height:44px;padding:var(--v2-gap-control) 0;
  border:0;border-radius:0;
  background:transparent;color:#545f71;box-shadow:none;
  font-family:inherit;font-size:18px;font-weight:800;line-height:1.2;
  text-align:right;text-align-last:right
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chonNganHangFigma > select:focus{
  border:0;background:transparent;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chonNganHangFigma > select:focus-visible{
  outline:2px solid var(--v2-focus-stroke);outline-offset:2px;border-radius:4px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .chonNganHangFigma > select > option{
  color:#181818;background:#fff
}

/* Cờ đã chi dùng result surface của Figma. (Ô tiền vé đã rời khỏi luật này
   28/08/2026: nó thành input sửa được và ăn theo bộ luật của Chiết khấu thêm.) */
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano{
  min-width:0;max-width:100%;border:1px solid #c7c7c7;
  background:#e9e9e9;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano{
  border:1px solid #c7c7c7;background:#e9e9e9
}

/* Giữ padding a mặc định ở 390px; chỉ thu icon/gap/chữ để ba trạng thái
   không tràn khỏi các cột bằng nhau. */
@media (max-width:390px){
  html:not([data-nbkh-ui="v3"]){
    --v2-icon-status-gap:2px;
    --v2-icon-status-well:36px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT{
    gap:var(--v2-gap-control)
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button{
    font-size:10px
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button .ic{
    padding:var(--v2-gap-control)
  }
}

/* Không đổi các màu semantic: --luc/thành công, cam/cảnh báo và đỏ/lỗi. */

/* --------------------------------------------------------------------------
   THU NGÂN / POLISH 2026-08-11

   Các chỉnh sửa dưới đây tiếp tục dùng token sẵn có của app: shadow, padding,
   khoảng card và chiều cao control. Không tạo số đo spacing riêng từ chú thích
   trong Figma. */

/* Card chi tiết có cùng lớp nổi nhẹ với card ở danh sách. */
html:not([data-nbkh-ui="v3"]) #manCt > .the,
html:not([data-nbkh-ui="v3"]) #manCt #khuAnhChat > .the.khongDem{
  box-shadow:var(--v2-shadow-card)
}

/* Divider của nhóm tài xế dừng tại mép nội dung thay vì chạy sát hai cạnh. */
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
  .nhomThongTinChinh > .dong,.hangTaiKhoan > .dong
){
  position:relative;border-bottom:0
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
  .nhomThongTinChinh > .dong,.hangTaiKhoan > .dong
)::after{
  content:"";position:absolute;right:var(--v2-space-a);bottom:0;
  left:var(--v2-space-a);height:1px;background:#dedede;pointer-events:none
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .nhomThongTinChinh > .dongGioTao::after{
  display:none
}

/* Thu gọn một bậc phần giá trị theo yêu cầu nghiệm thu mới nhất. */
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dong .gtri,
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe :where(
  .dongBienSo,.dongTenTaiXe,.dongZalo,.dongNganHang
) .gtri{
  font-size:16px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongStk .gtri{
  font-size:14px
}
html:not([data-nbkh-ui="v3"]) #manCt .theThongTinTaiXe .dongGioTao .gtri{
  font-size:18px
}

/* Output tổng khách dùng cùng padding a với ô Bàn ăn bên cạnh. */
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hang.nhom > .oKhachTuTinh.ketQuaTinh{
  padding:var(--v2-space-a)
}

/* Nút chỉnh giá co theo nội dung; vùng chạm dọc vẫn đủ 44px. Dùng trực tiếp
   asset bánh răng từ Figma để không làm méo nét qua CSS mask. */
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve > em{
  width:max-content;max-width:100%;justify-self:end;font-style:normal
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nutGia{
  width:max-content;min-width:0;max-width:100%;min-height:44px;
  padding:0;gap:6px;border:0;border-radius:0;background:transparent;
  color:var(--tn-figma-text);box-shadow:none;box-sizing:border-box;
  font-size:12px;justify-content:flex-end;white-space:nowrap
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nutGia .iconChinhGia{
  display:block;width:20px;height:20px;min-width:20px;padding:0;
  object-fit:contain;background:transparent;stroke:none
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .nutGia.khongHH{
  background:transparent;color:#8b6b2e
}

/* Ô đã chi có trạng thái chọn nhìn thấy rõ và luôn dùng đầy đủ nhãn. */
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano.on .dau{
  border-color:var(--luc);background:var(--luc)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano.on .dau .ic{
  opacity:1;stroke:#fff
}

/* Action lịch sử ở góc phải đồng bộ surface với nút quay lại bên trái. */
html:not([data-nbkh-ui="v3"]) header.dangDauNguCanh .canNguCanh.coHanhDongNguCanh > #btnLichSuLuot{
  border:0;background:#fff;color:var(--v2-brand);box-shadow:var(--v2-shadow-card)
}

/* Feature tách khách vẫn giữ DOM legacy để fallback, nhưng field cũ không
   được generic display:grid làm hiện lại khi đã bị đánh dấu ẩn. */
html:not([data-nbkh-ui="v3"]) #nhomKhachCu.an,
html:not([data-nbkh-ui="v3"]) #nhomKhachCu[hidden]{
  display:none
}

/* Hai action lưu/xoá ở Gửi xe dùng chiều cao control chuẩn thay vì 82px. */
html:not([data-nbkh-ui="v3"]) #manNhapXe > .the.khoiLuuLuot .nutTT button{
  height:var(--v2-figma-control-height);min-height:var(--v2-figma-control-height);
  padding:var(--v2-gap-control) var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #manNhapXe > .khoiLuuLuot #btnXoaTT{
  flex:0 0 var(--v2-figma-control-height);min-width:var(--v2-figma-control-height);
  height:var(--v2-figma-control-height);min-height:var(--v2-figma-control-height);padding:0
}

/* Bộ đếm là một capsule duy nhất: hai mũi tên và số dùng chung một surface.
   Màn rộng giãn theo cột; màn hẹp co về chiều rộng control tiêu chuẩn. */
html:not([data-nbkh-ui="v3"]) :is(.dem,.bk-dem).demFigma,
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan){
  width:100%;min-width:0;height:var(--v2-figma-control-height);
  min-height:var(--v2-figma-control-height);padding:0;border:0;
  border-radius:var(--v2-radius-action-max);background:#fff;
  display:grid;grid-template-columns:var(--v2-figma-control-height) minmax(44px,1fr) var(--v2-figma-control-height);
  align-items:center;gap:0;box-shadow:none;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) :is(.dem,.bk-dem).demFigma :where(button,input),
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) :where(button,input){
  width:100%;min-width:0;height:var(--v2-figma-control-height);
  min-height:var(--v2-figma-control-height);margin:0;padding:0;border:0;
  background:transparent;box-shadow:none;box-sizing:border-box
}
html:not([data-nbkh-ui="v3"]) :is(.dem,.bk-dem).demFigma button,
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) button{
  width:var(--v2-figma-control-height);min-width:var(--v2-figma-control-height);
  border-radius:50%;background:var(--v2-figma-row);display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) :is(.dem,.bk-dem).demFigma input,
html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan) input{
  border-radius:0;text-align:center;font-size:20px;font-weight:850
}

/* Mobile: icon nằm trên, nhãn nằm dưới và cả hai căn giữa trong ba cột. */
@media (max-width:430px){
  html:not([data-nbkh-ui="v3"]) :is(.dem,.bk-dem).demFigma,
  html:not([data-nbkh-ui="v3"]) #manCt :where(.demKhachThuNgan,.demVeThuNgan){
    width:min(100%,202px);justify-self:end
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT button{
    min-height:var(--tn-figma-row-height);padding:var(--v2-gap-control);
    display:grid;grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--v2-icon-status-well) auto;
    place-items:center;align-content:center;gap:4px;text-align:center
  }
  html:not([data-nbkh-ui="v3"]) #manCt .khoiTrangThai .chonTT .nhanTrangThai{
    width:100%;text-align:center;white-space:normal
  }
}

/* Counter + Cano V3.0.10
   - Vùng chạm mũi tên vẫn 44px, vòng tròn nhìn thấy đúng 36px theo variant.
   - Booking chỉ nhận cùng visual vòng tròn; layout và logic vẫn giữ nguyên.
   - Mỗi loại vé dùng đúng hai hàng: nhãn/giá ở trên, capsule số lượng ở dưới. */
html:not([data-nbkh-ui="v3"]) :is(
  .dem.demFigma,
  .bk-dem.demFigma,
  #manCt .demKhachThuNgan,
  #manCt .demVeThuNgan
) button{
  position:relative;isolation:isolate;background:transparent
}
html:not([data-nbkh-ui="v3"]) :is(
  .dem.demFigma,
  .bk-dem.demFigma,
  #manCt .demKhachThuNgan,
  #manCt .demVeThuNgan
) button::before{
  content:"";position:absolute;inset:4px;z-index:0;border-radius:50%;
  background:var(--v2-figma-row);pointer-events:none
}
html:not([data-nbkh-ui="v3"]) :is(
  .dem.demFigma,
  .bk-dem.demFigma,
  #manCt .demKhachThuNgan,
  #manCt .demVeThuNgan
) button .ic{
  position:relative;z-index:1
}

html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve{
  min-height:112px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"ttl" "dem";align-content:center;gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve .ttl{
  grid-area:ttl;min-width:0;display:flex;align-items:center;
  justify-content:space-between;gap:8px;margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .ve .ttl > em{
  width:max-content;max-width:100%;margin:0;font-style:normal;flex:0 1 auto
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .demVeThuNgan{
  grid-area:dem;width:100%;max-width:none;justify-self:stretch
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .hangTongCano{
  grid-template-columns:minmax(0,283fr) minmax(0,187fr);
  grid-template-areas:"tong daChi" "chiet .";align-items:stretch
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .veCano.veCanoSua{grid-area:tong}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .chietKhauCano{
  grid-area:chiet;margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano{grid-area:daChi}

@media (max-width:430px){
  html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .hangTongCano{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tong" "chiet" "daChi"
  }
}

/* Thanh trạng thái V2: cùng hình học và baseline trên cả ba app.
   Không dùng opacity để biểu đạt ô chưa chọn; màu nền/chữ đảm nhiệm việc đó. */
html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma{
  width:100%;min-width:0;max-width:100%;margin:0 0 var(--v2-gap-section);
  padding:var(--nbkh-status-shell-padding);border:0;
  border-radius:var(--nbkh-status-shell-radius);background:#fff;
  box-shadow:var(--v2-shadow-card);box-sizing:border-box;
  display:grid;grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  align-items:stretch;gap:var(--nbkh-status-shell-gap);
  overflow:visible;scroll-snap-type:none
}
html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma > :is(.o,button){
  appearance:none;-webkit-appearance:none;min-width:0;width:100%;max-width:100%;
  height:var(--nbkh-status-item-height);min-height:var(--nbkh-status-item-height);
  margin:0;padding:3px;border:0;border-radius:var(--nbkh-status-item-radius);
  background:var(--v2-surface-soft);color:var(--chu);opacity:1;
  box-shadow:none;box-sizing:border-box;font-family:inherit;text-align:center;
  display:grid;grid-template-rows:var(--nbkh-status-count-line) 24px;
  align-content:center;justify-items:center;gap:2px;overflow:hidden
}
html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma > :is(.o,button) b{
  display:block;min-width:0;margin:0;
  font-size:var(--nbkh-status-count-size);font-weight:850;
  line-height:var(--nbkh-status-count-line);font-variant-numeric:tabular-nums
}
html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma > :is(.o,button) span{
  width:100%;height:24px;min-width:0;margin:0;color:var(--mo);
  font-size:var(--nbkh-status-label-size);font-weight:500;
  line-height:var(--nbkh-status-label-line);letter-spacing:0;
  white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:normal;
  text-align:center;text-wrap:balance;display:grid;place-items:center
}
html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma > :is(.o,button).on{
  border-color:var(--v2-brand);background:var(--v2-brand);color:#fff;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma > :is(.o,button).on :is(b,span){
  color:#fff
}
html:not([data-nbkh-ui="v3"]) .bk-loc-tien-trinh.thanhTrangThaiFigma > button:not(.on) b{
  color:var(--mau-loc,var(--v2-brand))
}
@media (hover:hover) and (pointer:fine){
  html:not([data-nbkh-ui="v3"]) .thanhTrangThaiFigma > button:not(.on):hover{
    background:var(--v2-surface-strong)
  }
}

/* Khách & bàn — giữ hai ô đầu cùng hàng nhưng không dành chiều rộng cứng
   cho output. Điều này tránh nhãn/input chèn nhau ở 345–430px. */
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tn-figma-row-gap)
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan > *{
  width:auto;min-width:0;max-width:100%;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangKhachBan > .hangBanAn{
  grid-template-columns:max-content minmax(0,1fr)
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .hangBanAn input{
  width:100%;min-width:0;max-width:100%
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan .oKhachTuTinh output{
  width:auto;min-width:2ch;max-width:100%
}

/* Contract card chi tiết: mép trong 14px, nhịp giữa mọi khối con 14px.
   Không phần tử con nào tự tạo khoảng cách bằng margin; card/container grid
   là nguồn spacing duy nhất để không còn cộng dồn 10px + 14px. */
html:not([data-nbkh-ui="v3"]) #manCt > .the{
  margin:0;padding:var(--v2-space-a);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #manCt > .nutVeDanhSach{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt > .the > h2,
html:not([data-nbkh-ui="v3"]) #manCt > .the > h2.dauTheCoHanhDong{
  height:35px;min-height:35px;margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt .theKhachBan > :where(
  .hangKhachBan,.khachThuNgan,.hangBillAn,.goiYTien,.goiy
),
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano > :where(
  .ve,.goiy,.hangTongCano
),
html:not([data-nbkh-ui="v3"]) #manCt :where(
  .khoiHoaHong > .boxHH,.khoiTrangThai > .chonTT,.khoiTrangThai > .motaTT
){
  margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt > .khoiTrangThai > .chonTT,
html:not([data-nbkh-ui="v3"]) #manCt > .khoiTrangThai > .motaTT{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #manCt > .khoiTrangThai > .chonTT > button{
  margin:0;padding:var(--v2-space-a)
}

/* Thẻ tin nhắn ở màn nhập lượt: nền xám để ô nhập trắng nổi tách hẳn ra,
   khác với các thẻ khác vốn nền trắng và hàng con nền xám. */
html:not([data-nbkh-ui="v3"]) .khoiTinNhanMoi{
  background:var(--v2-surface-strong)
}
html:not([data-nbkh-ui="v3"]) .khoiTinNhanMoi > .goTinMoi{
  border:0;background:#fff;box-shadow:none
}

/* --------------------------------------------------------------------------
   CONTRACT CARD TOÀN APP

   Một card có mép trong 14px; các card/khối con cách nhau bằng gap 14px của
   container. Margin không còn tham gia tạo nhịp. Hàng tiêu đề card cao 35px.
   Các selector được giới hạn theo màn để không thay công thức hay control. */
html:not([data-nbkh-ui="v3"]) #khuTinhNang,
html:not([data-nbkh-ui="v3"]) .bk-cot,
html:not([data-nbkh-ui="v3"]) #formBooking,
html:not([data-nbkh-ui="v3"]) #dsBooking,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet,
html:not([data-nbkh-ui="v3"]) .trangDocLap,
html:not([data-nbkh-ui="v3"]) .cd-main{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .bk-bo-cuc{
  gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) :where(
  .bk-mo-dau,.bk-the,.bk-lich-thang,.bk-ds-ngay-lich,.bk-muc,
  .bk-chi-tiet-tom-tat,.bk-form-chi-tiet,.bk-khu-thao-tac,
  .bk-khu-quyet-toan,.bk-dau-vet,
  .cd-hero,.cd-trang-thai,.cd-the,.cd-status,.cd-skeleton,
  .cd-online,.cd-user,.nhomTrang,.hoSoTrang,.tinDong,
  .dauTrangCon,.tk-o-chinh,.tk-bo-loc,.tk-tom-tat
){
  margin:0
}
html:not([data-nbkh-ui="v3"]) :where(
  .bk-mo-dau,.bk-the,.bk-lich-thang,.bk-ds-ngay-lich,.bk-muc,
  .bk-chi-tiet-tom-tat,.bk-form-chi-tiet,.bk-khu-thao-tac,
  .bk-khu-quyet-toan,.bk-dau-vet,
  .cd-the,.cd-status,.cd-skeleton,.cd-online,.cd-user,
  .nhomTrang,.hoSoTrang,.tinDong,.tk-bo-loc,.tk-ket-qua-dong
){
  padding:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) :where(
  #formBooking > .bk-the,
  #noiDungChiTiet > .bk-form-chi-tiet,
  #noiDungChiTiet > .bk-khu-thao-tac,
  #noiDungChiTiet > .bk-khu-quyet-toan,
  #noiDungChiTiet > .bk-dau-vet,
  .cd-the,.nhomTrang
){
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) :where(
  #formBooking > .bk-the > h2,
  #noiDungChiTiet > :is(section,form) h3,
  .nhomTrang > h2
){
  height:35px;min-height:35px;margin:0;display:flex;align-items:center
}
html:not([data-nbkh-ui="v3"]) :where(
  #formBooking .bk-nhom,#formBooking .bk-luoi-2,#formBooking .bk-luoi-3,
  #formBooking .bk-mo-ta,#formBooking .bk-dich-vu,#formBooking .bk-chi-tiet-dv,
  #formBooking .bk-tong,#formBooking .bk-canh-bao,#formBooking .bk-goi-y,
  #noiDungChiTiet > :is(section,form) > :where(h3,p,.bk-ct-dau,.bk-hanh-trinh-dau,
    .bk-timeline,.bk-dich-vu,.bk-khung-gia,.bk-nhom,.bk-tong,.bk-canh-bao,
    .bk-tien-muc,.bk-hanh-dong),
  .cd-the > :where(.cd-dau-the,.cd-loc,.cd-online-list,.cd-user-list,
    .cd-mo-ta,.cd-bang-wrap,.cd-form),
  .cd-form .nhom,.cd-the #formKhuyenMai
){
  margin:0
}
html:not([data-nbkh-ui="v3"]) :where(.bk-ds,.cd-online-list,.cd-user-list,
  .cd-form,.dongThongBao,.tk-ket-qua){
  gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .bk-ngay-nhom{
  margin:0;min-height:35px
}
html:not([data-nbkh-ui="v3"]) .cd-trang-thai{
  gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .cd-dau-the{
  min-height:35px;margin:0
}
html:not([data-nbkh-ui="v3"]) .cd-dau-the > div{
  min-width:0;height:35px;min-height:35px;display:flex;flex-direction:column;justify-content:center
}
html:not([data-nbkh-ui="v3"]) .cd-dau-the h2{
  margin:0;line-height:20px
}
html:not([data-nbkh-ui="v3"]) .cd-dau-the .cd-nhan{
  line-height:12px
}
html:not([data-nbkh-ui="v3"]) .cd-the #formKhuyenMai{
  padding:var(--v2-space-a);display:grid;gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .trangTimKiem{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
/* Booking cũ có selector h3/p và cả style inline mạnh hơn contract dùng
   :where(). Khóa lại theo đúng cấu trúc DOM thật (chi tiết có cả section và
   form): card dùng grid gap 14px, mọi con trực tiếp không tự tạo margin. */
html:not([data-nbkh-ui="v3"]) #formBooking > .bk-the,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > .bk-form-chi-tiet,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > .bk-khu-thao-tac,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > .bk-khu-quyet-toan,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > .bk-dau-vet{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #formBooking > .bk-the > *,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > :is(
  .bk-form-chi-tiet,.bk-khu-thao-tac,.bk-khu-quyet-toan,.bk-dau-vet
) > *{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #formBooking :is(
  .bk-nhom,.bk-luoi-2,.bk-luoi-3,.bk-mo-ta,.bk-dich-vu,.bk-chi-tiet-dv,
  .bk-tong,.bk-canh-bao,.bk-goi-y
),
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet :is(
  .bk-nhom,.bk-luoi-2,.bk-luoi-3,.bk-thong-tin,.bk-dv-nhan,
  .bk-dich-vu,.bk-dich-vu-ct,.bk-khung-gia,.bk-tong,.bk-canh-bao,
  .bk-tien-muc,.bk-hanh-dong,.bk-ct-dau,.bk-hanh-trinh-dau,
  .bk-thiet-lap-hen,.bk-o-cai-hen,.bk-ghi-chu-ct
){
  margin:0
}
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet :is(
  #formSuaBooking,.bk-ct-tom-tat-khung,.bk-khung-gia
){
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet :is(
  #formSuaBooking,.bk-ct-tom-tat-khung,.bk-khung-gia
) > *{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > :is(section,form) > :is(h3,.bk-ct-dau) > h3,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet > :is(section,form) > h3{
  height:35px;min-height:35px;margin:0;display:flex;align-items:center
}
/* Selector tường minh nằm cuối file để thắng các rule component cũ có
   specificity cao hơn :where(), nhất là card danh sách và thông báo. */
html:not([data-nbkh-ui="v3"]) :is(
  .bk-mo-dau,.bk-the,.bk-lich-thang,.bk-ds-ngay-lich,.bk-muc,
  .bk-chi-tiet-tom-tat,.bk-form-chi-tiet,.bk-khu-thao-tac,
  .bk-khu-quyet-toan,.bk-dau-vet,.cd-the,.cd-status,.cd-skeleton,
  .cd-online,.cd-user,.nhomTrang,.hoSoTrang,.tinDong,.tk-bo-loc,.tk-ket-qua-dong
){
  margin:0;padding:var(--v2-space-a)
}

/* --------------------------------------------------------------------------
   BOOKING LAYER CONTRACT

   Card ngoài chỉ có một lớp padding 14px. Mọi nhịp giữa con trực tiếp do
   grid gap 14px; không cộng margin-top với padding-top/border của component
   cũ. Padding của control vẫn được giữ vì đó là vùng bấm, không phải gutter. */
html:not([data-nbkh-ui="v3"]) .bk-cot,
html:not([data-nbkh-ui="v3"]) #formBooking,
html:not([data-nbkh-ui="v3"]) #dsBooking,
html:not([data-nbkh-ui="v3"]) .bk-ds{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .bk-bo-cuc{
  gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) .bk-cot > *,
html:not([data-nbkh-ui="v3"]) #formBooking > *,
html:not([data-nbkh-ui="v3"]) #dsBooking > *{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #khuTaoBooking > *,
html:not([data-nbkh-ui="v3"]) #khuDanhSachBooking > *{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #dsBooking .bk-muc{
  margin:0;padding:var(--v2-space-a);display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #dsBooking .bk-muc > *,
html:not([data-nbkh-ui="v3"]) #dsBooking .bk-muc :is(
  .bk-ten,.bk-hen,.bk-thong-tin,.bk-dv-nhan,.bk-tien-muc
){
  margin:0
}
html:not([data-nbkh-ui="v3"]) #dsBooking .bk-muc :is(.bk-thong-tin,.bk-tien-muc){
  padding:0;border-top:0
}
html:not([data-nbkh-ui="v3"]) #dsBooking .bk-muc-dau > div:first-child{
  display:grid;grid-template-columns:minmax(0,1fr);gap:4px
}
html:not([data-nbkh-ui="v3"]) #dsBooking .bk-thong-tin{
  column-gap:var(--v2-space-a);row-gap:4px
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-dich-vu{
  gap:var(--v2-space-a);margin:0
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-dv{
  margin:0;padding:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-dv > span:last-child,
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-hen-moi > span:first-child{
  display:grid;grid-template-columns:minmax(0,1fr);gap:4px
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-dv :is(b,small),
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-hen-moi :is(b,small){
  margin:0
}

/* --------------------------------------------------------------------------
   BOOKING COMPOSITE CONTROL CONTRACT

   Control ghép dùng cùng một nhịp: cao tối thiểu 72px, padding trong 14px,
   margin ngoài bằng 0. Panel mở rộng tự chịu padding/gap 14px và không cộng
   thêm margin-top, padding-top hoặc border của component Booking cũ. */
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-hen-moi,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-nut-cai-hen{
  width:100%;min-width:0;min-height:var(--v2-figma-row-height);
  box-sizing:border-box;margin:0;padding:var(--v2-space-a);
  gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-chon-dv,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-chon-dv{
  min-height:var(--v2-figma-row-height);box-sizing:border-box;
  margin:0;padding:var(--v2-space-a);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-dich-vu,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-dich-vu{
  gap:var(--v2-space-a);margin:0
}
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-chon-dv > span:last-child,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-nut-cai-hen > span:first-child{
  display:grid;grid-template-columns:minmax(0,1fr);gap:4px
}
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-chon-dv :is(b,small),
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-nut-cai-hen :is(b,small){
  margin:0
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-bo-chon-hen-moi,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-o-cai-hen{
  margin:0;padding:var(--v2-space-a);display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--v2-space-a)
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-bo-chon-hen-moi > *,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-o-cai-hen > *{
  margin:0
}
html:not([data-nbkh-ui="v3"]) #formBooking .bk-bo-chon-hen-moi .bk-chon-gio-moi,
html:not([data-nbkh-ui="v3"]) #noiDungChiTiet .bk-o-cai-hen .bk-chon-gio-moi{
  margin:0;padding-top:0;border-top:0
}

/* --------------------------------------------------------------------------
   AGENTATION — THU NGÂN 13/08/2026

   Slot lịch sử được chuyển lên compact header bằng JavaScript. Khi slot trong
   card đã rỗng, nó không được tiếp tục giữ 44px và đẩy nút bút chì sang trái. */
html:not([data-nbkh-ui="v3"]) #manCt #viTriNutLichSu:empty{
  display:none;width:0;height:0;flex:0 0 0
}
html:not([data-nbkh-ui="v3"]) #manCt .dauTheCoHanhDong > .cumHanhDongThongTin{
  margin-left:auto
}

/* Hai xác nhận boolean dùng đúng một hình học, màu và indicator. Generic
   `.oTich` có margin-top nên phải khoá về 0 trong card grid 14px. */
html:not([data-nbkh-ui="v3"]) #manCt :is(#fBillKhongHH,#fChiCano){
  width:100%;min-width:0;min-height:var(--tn-figma-row-height);
  box-sizing:border-box;margin:0;padding:var(--v2-space-a);
  border:0;border-radius:var(--tn-figma-row-radius);background:var(--tn-figma-row);
  color:var(--tn-figma-text);gap:10px;box-shadow:none
}
html:not([data-nbkh-ui="v3"]) #manCt :is(#fBillKhongHH,#fChiCano) .dau{
  width:44px;height:44px;flex:0 0 44px;border:0;border-radius:11px;background:#fff
}
html:not([data-nbkh-ui="v3"]) #manCt :is(#fBillKhongHH,#fChiCano) .chu b{
  color:var(--tn-figma-text);font-size:12px
}
html:not([data-nbkh-ui="v3"]) #manCt :is(#fBillKhongHH,#fChiCano) .chu small{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)
}
html:not([data-nbkh-ui="v3"]) #manCt :is(#fBillKhongHH,#fChiCano).on .dau{
  border-color:var(--luc);background:var(--luc)
}
html:not([data-nbkh-ui="v3"]) #manCt :is(#fBillKhongHH,#fChiCano).on .dau .ic{
  opacity:1;stroke:#fff
}
html:not([data-nbkh-ui="v3"]) #manCt #fBillKhongHH,
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano #fChiCano{
  height:var(--tn-figma-row-height);min-height:var(--tn-figma-row-height);
  border:1px solid #c7c7c7;background:#e9e9e9;box-sizing:border-box
}

/* Nút "Đã chi hoa hồng cano" luôn là một hàng riêng như mobile; không để
   breakpoint màn hình làm thay đổi thứ tự đọc hay vị trí thao tác. */
html:not([data-nbkh-ui="v3"]) #manCt .khoiCano .hangTongCano{
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"tong" "chiet" "daChi";
  gap:var(--v2-space-a)
}