/* G3 · nền, chữ và viền theo token theme; màu cảnh báo trộn với nền hiện hành. */
.bb-root{--bb-ink:var(--ink);--bb-muted:var(--ink-2);--bb-line:var(--line);--bb-soft:var(--bg);position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:var(--bb-ink);font:15px/1.5 system-ui,-apple-system,sans-serif;overflow:hidden;z-index:1200}
.bb-root::backdrop{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.bb-root *,.bb-list-dong *{box-sizing:border-box;min-width:0}
.bb-ngan{position:absolute;inset:0 0 0 auto;width:700px;max-width:100%;background:var(--card,var(--bg));box-shadow:-12px 0 32px color-mix(in srgb,var(--ink) 17%,transparent);display:flex;flex-direction:column;border-left:1px solid var(--bb-line)}
.bb-dau{background:var(--card,var(--bg));display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--bb-line);flex-shrink:0}
.bb-dau>div{flex:1}.bb-dau h2{font-size:18px;margin:0;font-weight:800}.bb-dau p{font-size:13px;color:var(--bb-muted);margin:3px 0 0;overflow-wrap:anywhere}
.bb-root h3,.bb-root h4,.bb-list-dong h4{margin:4px 0 8px;overflow-wrap:anywhere}.bb-root p{margin:6px 0 12px}.bb-root li{margin-bottom:5px;overflow-wrap:anywhere}.bb-root ol,.bb-root ul{padding-left:24px}
.bb-nut{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:36px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card,var(--bg));color:var(--ink);font:600 13px/1.4 system-ui,-apple-system,sans-serif;cursor:pointer;white-space:normal;overflow-wrap:anywhere;text-align:center;vertical-align:middle}
.bb-nut:hover{background:var(--bb-soft,var(--bg))}.bb-nut.bb-chinh{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.bb-nut:disabled{cursor:default;opacity:1}.bb-nut[aria-pressed=true]{background:var(--primary);color:var(--primary-ink)}.bb-nut:focus-visible,.bb-root :is(input,textarea,select):focus-visible,.bb-buoc button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.bb-back{display:none}.bb-x{flex-shrink:0}.bb-buoc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 12px;gap:4px;border-bottom:1px solid var(--bb-line);background:var(--bb-soft);flex-shrink:0}
.bb-buoc button{border:0;background:transparent;border-radius:8px;padding:7px 3px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--bb-muted);font:600 12px/1.3 system-ui,-apple-system,sans-serif;cursor:pointer}.bb-buoc button span{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border:1px solid var(--bb-line);border-radius:50%;background:var(--card,var(--bg));flex-shrink:0}.bb-buoc [aria-current]{background:var(--card,var(--bg));color:var(--primary);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 13%,transparent)}.bb-buoc button:disabled{cursor:default;color:var(--ink-2)}
.bb-than{flex:1;overflow:auto;overscroll-behavior:contain;padding:16px 18px;scrollbar-gutter:stable;overflow-wrap:anywhere}.bb-than>*{margin-bottom:12px}.bb-chan{flex-shrink:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--bb-soft,var(--bg));border-top:1px solid var(--bb-line,var(--line))}
.bb-o,.bb-dong label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;margin-bottom:12px}.bb-root input:not([type=checkbox]),.bb-root textarea,.bb-root select{width:100%;min-height:38px;border:1px solid var(--bb-line);border-radius:8px;background:var(--card,var(--bg));color:var(--bb-ink);padding:9px 10px;font:400 14px/1.5 system-ui,-apple-system,sans-serif}.bb-root input[type=date],.bb-root input[type=time]{max-width:100%}.bb-root textarea{resize:vertical;white-space:pre-wrap;overflow-wrap:anywhere}.bb-root :is(input,textarea)::placeholder{color:var(--ink-2);opacity:1}.bb-root [readonly]{background:var(--bg)}.bb-root [aria-invalid=true]{border:2px solid var(--danger);outline-color:var(--danger)}.bb-hai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bb-root fieldset{border:1px solid var(--bb-line);border-radius:10px;padding:10px 12px;margin:0 0 12px}.bb-root legend{font-size:13px;font-weight:700;padding:0 4px}.bb-tp{max-height:260px;overflow:auto}.bb-tp label,.bb-tick{display:flex;gap:8px;align-items:center;font-size:13px;min-height:36px;font-weight:500}.bb-tp label:has(input:disabled){color:var(--ink-2)}.bb-root input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--primary)}
.bb-goi{font-size:13px;font-weight:400;color:var(--bb-muted,var(--ink-2))}.bb-ctx,.bb-canh,.bb-loi,.bb-rong{border:1px solid var(--bb-line,var(--line));border-radius:12px;padding:12px 14px;font-size:13px;overflow-wrap:anywhere;background:var(--bb-soft,var(--bg))}.bb-ctx{border-left:3px solid var(--primary)}.bb-canh{background:color-mix(in srgb,var(--warn) 12%,var(--card,var(--bg)));color:var(--ink);border-color:var(--warn)}.bb-loi{background:color-mix(in srgb,var(--danger) 10%,var(--card,var(--bg)));color:var(--ink);border-color:var(--danger)}.bb-rong{border-style:dashed;color:var(--bb-muted,var(--ink-2))}
.bb-soan{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}.bb-co-ai{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.bb-ai{border:1px solid var(--bb-line);border-left:3px solid var(--primary);border-radius:12px;padding:12px;background:var(--bb-soft);font-size:13px;align-self:start}.bb-vanban{white-space:pre-wrap;overflow-wrap:anywhere}.bb-kv{display:grid;grid-template-columns:95px minmax(0,1fr);gap:8px}.bb-kv dd{margin:0;overflow-wrap:anywhere}.bb-kv dt{color:var(--bb-muted)}
.bb-viec{width:100%;min-width:0}.bb-bang{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--bb-line);border-radius:10px;overflow:hidden;background:var(--card,var(--bg));font-size:12px}.bb-bang th{background:var(--bb-soft);text-align:left;font-size:12px;color:var(--bb-muted);padding:8px;vertical-align:top}.bb-bang th:first-child{width:29%}.bb-bang th:nth-child(2){width:21%}.bb-bang th:nth-child(3){width:17%}.bb-bang th:nth-child(4){width:19%}.bb-bang th:last-child{width:14%}.bb-bang td{padding:8px 5px;border-top:1px solid var(--bb-line);vertical-align:top;overflow-wrap:anywhere}.bb-bang :is(input,select,textarea){font-size:12px!important;padding:6px!important;margin-bottom:6px}.bb-bang input[type=date]{font-size:11px!important}.bb-bang .bb-nut{padding:6px;font-size:12px}.bb-cancu{font-size:12px;color:var(--bb-muted);padding:7px 5px;border-radius:7px;background:var(--bb-soft)}.bb-trangthai{font-size:12px;font-weight:500}.bb-nhan-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.bb-hoi-nen{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 36%,transparent);display:flex;align-items:center;justify-content:center;padding:16px;z-index:2}.bb-hoi{width:460px;max-width:100%;max-height:90%;overflow:auto;background:var(--card,var(--bg));border-radius:16px;border:1px solid var(--bb-line);box-shadow:0 15px 50px color-mix(in srgb,var(--ink) 27%,transparent);padding:20px}.bb-hoi .bb-chan{padding:14px 0 0;background:var(--card,var(--bg))}
.bb-moi{width:100%;margin-bottom:10px}.bb-loc{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.bb-list-dong{color:var(--ink);padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card,var(--bg));margin-bottom:9px;font-size:13px;overflow-wrap:anywhere}.bb-list-dong>span{font-size:12px;color:var(--ink-2)}.bb-list-dong p{margin:6px 0}.lh-viec-h{flex-wrap:wrap}.lh-viec-h h4{flex:1 1 180px}
@media(max-width:767px){.bb-ngan{inset:0;width:100%;border:0}.bb-dau{padding:8px;gap:6px}.bb-back{display:inline-flex;flex:0 0 auto}.bb-x{display:none}.bb-dau h2{font-size:16px}.bb-than{padding:12px;scrollbar-gutter:auto}.bb-co-ai{grid-template-columns:minmax(0,1fr)}.bb-hai{gap:8px}.bb-bang,.bb-bang tbody{display:block;width:100%;border:0;overflow:visible}.bb-bang thead{display:none}.bb-bang .bb-dong{display:block;margin-bottom:12px;border:1px solid var(--bb-line);border-radius:12px;padding:8px}.bb-bang td{display:block;width:100%;border:0;padding:5px}.bb-bang td::before{content:attr(data-nhan);display:block;font-weight:700;font-size:13px;margin-bottom:5px}.bb-bang :is(input,select,textarea){font-size:14px!important}.bb-bang input[type=date]{font-size:14px!important}.bb-buoc{padding:6px;gap:0}.bb-buoc button{min-height:44px;flex-direction:column;font-size:11px;gap:3px}.bb-buoc button span{width:20px;height:20px}.bb-nut{min-height:44px;min-width:44px}.bb-root :is(input:not([type=checkbox]),select){min-height:44px}.bb-tp label,.bb-tick{min-height:44px}.bb-chan{padding:8px;gap:6px}.bb-chan .bb-nut{flex:1}.bb-hoi{padding:16px}.bb-root input[type=checkbox]{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.bb-root *{scroll-behavior:auto}}

@media(max-width:767px){.bb-root{height:100dvh}.bb-chan{padding-bottom:max(8px,env(safe-area-inset-bottom))}.lh-mb .lh-loc button{min-width:44px;min-height:44px}.bb-back{min-width:44px}}
/* G3-kh2: bộ chọn thành phần, chỉ dùng token theme của ứng dụng. */
.bb-root [hidden]{display:none!important}
.bb-root .bb-o>span{display:block;position:static;transform:none;line-height:1.5}
.bb-root :is(.bb-nut,.bb-buoc button){min-height:44px}.bb-root .bb-nut{min-width:44px}
.bb-tp-moi{position:relative}.bb-tp-tom{display:grid;gap:10px;border:1px solid var(--bb-line);border-radius:12px;padding:12px;font-size:13px}
.bb-p-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.bb-p-heading small,.bb-p-heading>span{font-size:12px;color:var(--bb-muted)}
.bb-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.bb-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:44px;padding:0 4px 0 9px;border:1px solid var(--bb-line);border-radius:8px;background:color-mix(in srgb,var(--primary) 6%,var(--card,var(--bg)));font-size:12px}
.bb-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px;flex:1}.bb-chip small{color:var(--bb-muted);flex-shrink:0}.bb-chip .bb-chip-x{flex-shrink:0;border:0;background:transparent;padding:0;font-size:20px;width:44px;height:44px}
.bb-tp-loi{font-size:13px;color:var(--danger);font-weight:600}.bb-tp-loi:empty{display:none}
.bb-picker{position:relative;z-index:1;margin-top:8px;display:flex;flex-direction:column;max-height:70vh;border:1px solid var(--bb-line);border-radius:12px;background:var(--card,var(--bg));box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.bb-p-top{padding:12px;border-bottom:1px solid var(--bb-line);flex-shrink:0;max-height:55vh;overflow:auto}.bb-p-top>.bb-p-heading{margin-bottom:8px}.bb-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.bb-quick .bb-nut{padding:6px 9px;font-size:12px}
.bb-p-them,.bb-p-nguon,.bb-cap{border:1px solid var(--bb-line);border-radius:9px;padding:10px;margin-top:8px;background:var(--bb-soft)}.bb-p-them .bb-nut{margin:0 5px 6px 0}.bb-p-nguon{display:grid;gap:6px}.bb-p-nguon .bb-nut{text-align:left;justify-content:flex-start}.bb-p-tin{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-top:8px}
.bb-p-body{flex:1;min-height:100px;overflow:auto;overscroll-behavior:contain;padding:12px}.bb-selection{border-bottom:1px solid var(--bb-line);padding-bottom:10px;margin-bottom:10px}.bb-selection .bb-chips{max-height:150px;overflow:auto;margin-top:8px}
.bb-nhom{border:1px solid var(--bb-line);border-radius:10px;overflow:hidden;margin-top:8px}.bb-nhom-dau{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 8px;background:var(--bb-soft)}.bb-nhom-dau .bb-nhom-ten{flex:1;justify-content:flex-start;text-align:left;border:0;background:transparent;max-width:100%;min-width:100px;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap}.bb-nhom-dau>small{font-size:12px;color:var(--bb-muted)}.bb-nhom-all{display:flex;align-items:center;gap:5px;min-height:44px;font-size:12px;cursor:pointer}.bb-nhom-all input{margin:0}
.bb-nguoi{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px;border-top:1px solid var(--bb-line);cursor:pointer}.bb-nguoi:hover,.bb-nguoi:focus-within{background:color-mix(in srgb,var(--primary) 7%,var(--card,var(--bg)))}.bb-nguoi:focus-within{outline:2px solid var(--primary);outline-offset:-2px}.bb-nguoi>input{margin:0}.bb-nguoi-chu{flex:1;display:flex;flex-direction:column;min-width:0}.bb-nguoi-chu>b,.bb-nguoi-chu>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.bb-nguoi-chu>b{font-size:13px}.bb-nguoi-chu>small{font-size:12px;color:var(--bb-muted)}.bb-nguoi-chu .bb-nhan{color:var(--primary)}.bb-cam{cursor:default;background:var(--bb-soft)}.bb-root mark{color:var(--bb-ink);background:color-mix(in srgb,var(--warn) 30%,var(--card,var(--bg)));font-weight:800}
.bb-p-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--bb-line);flex-shrink:0;background:var(--card,var(--bg))}.bb-phim{font-size:11px;color:var(--bb-muted)}.bb-p-foot>.bb-nut{margin-left:auto;min-width:100px}
.bb-khach{border:1px solid var(--bb-line);border-radius:10px;padding:0 12px}.bb-khach>summary{cursor:pointer;min-height:44px;align-content:center;font-size:13px;font-weight:650}.bb-root .bb-khach fieldset{border:0;padding:8px 0;margin:0}
@media(max-width:767px){.bb-chon-mo .bb-ngan{visibility:hidden}.bb-chon-mo .bb-picker{visibility:visible;position:fixed;inset:0;width:100%;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;z-index:3}.bb-chon-mo .bb-hoi-nen{z-index:4}.bb-p-top{padding:12px;max-height:55dvh}.bb-p-body{min-height:0}.bb-p-foot{padding-bottom:max(12px,env(safe-area-inset-bottom))}.bb-phim{display:none}.bb-chip>span{max-width:220px}.bb-nhom-dau .bb-nhom-ten{flex-basis:65%;padding-left:0}.bb-nhom-all{margin-left:auto}.bb-nguoi{min-height:70px}.bb-selection .bb-chips{max-height:135px}.bb-p-heading>small{max-width:100%}}