.bk3-hs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
.bk3-hs::-webkit-scrollbar { display: none; }
.bk3-hs > * { flex: none; }
.bk3-hs.fr { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }

/* ---------- khung chính ---------- */
.bk3 { --bk-ac: var(--ds-mint-500); --bk-ac-50: var(--ds-mint-50); --bk-ac-100: var(--ds-mint-100); --bk-ac-700: var(--ds-mint-700); --bk-ac-2: #12b58c;
  position: relative; width: 100%; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-lg); box-shadow: var(--ds-sh-2); overflow: hidden; font-size: var(--ds-fs-13); color: var(--ds-ink-800); }
.bk3[data-tone="blue"] { --bk-ac: var(--ds-blue-500); --bk-ac-50: var(--ds-blue-50); --bk-ac-100: var(--ds-blue-100); --bk-ac-700: var(--ds-blue-700); --bk-ac-2: #6aa2f5; }
.bk3[data-tone="gray"] { --bk-ac: #8a93a6; --bk-ac-50: #f3f5f8; --bk-ac-100: #e9edf3; --bk-ac-700: #4a5266; --bk-ac-2: #a6aebf; }
.bk3 *, .bk3 *::before, .bk3 *::after { box-sizing: border-box; }
.bk3 i.ph-fill { line-height: 1; }
.bk3 button { font-family: inherit; }
.bk3--pop { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }

/* ---------- đầu khung: nhận diện + trạng thái + cam kết ---------- */
.bk3-hd { position: relative; padding: 16px 16px 0; background: linear-gradient(140deg, var(--bk-ac-100) 0%, var(--bk-ac-50) 62%, #fff 100%); overflow: hidden; }
.bk3-hd::after { content: ''; position: absolute; right: -18px; top: -26px; width: 140px; height: 140px; background: var(--bk-ac); opacity: .09; -webkit-mask: var(--bk-tooth) center/contain no-repeat; mask: var(--bk-tooth) center/contain no-repeat; transform: rotate(14deg); pointer-events: none; }
.bk3 { --bk-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200 24a56 56 0 0 0-72 8 56 56 0 0 0-72-8C32 38 24 66 32 98c6 24 14 36 18 62 4 24 8 60 26 62 14 1 20-18 24-42 3-18 12-26 28-26s25 8 28 26c4 24 10 43 24 42 18-2 22-38 26-62 4-26 12-38 18-62 8-32 0-60-24-74z'/%3E%3C/svg%3E"); }
.bk3-who { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.bk3-av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: #fff; box-shadow: 0 0 0 2px var(--bk-tier, var(--bk-ac)); }
.bk3-av img, .bk3-av > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--bk-ac-100); color: var(--bk-ac-700); font-size: 20px; }
.bk3-who .tx { min-width: 0; }
.bk3-eb { display: flex; align-items: center; gap: 5px; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); letter-spacing: .1em; text-transform: uppercase; color: var(--bk-ac-700); }
.bk3-eb i { font-size: 12px; }
.bk3-nmr { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 1px; }
.bk3-nmr .ds-tier { flex: none; margin-left: 0; }
.bk3-nm { margin: 0; min-width: 0; font-size: var(--ds-fs-15); font-weight: var(--ds-fw-700); line-height: 1.3; color: var(--ds-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-st { margin-top: 2px; display: flex; align-items: center; gap: 6px; font-size: var(--ds-fs-11); color: var(--ds-ink-700); white-space: nowrap; }
.bk3-st .dot { width: 7px; height: 7px; border-radius: 50%; background: #1fb26b; box-shadow: 0 0 0 0 rgba(31, 178, 107, .5); animation: bk3Pulse 2.2s infinite; flex: none; }
.bk3-st.off .dot { background: #b8bfcc; animation: none; }
.bk3-st b { font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
@keyframes bk3Pulse { 70% { box-shadow: 0 0 0 6px rgba(31, 178, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 178, 107, 0); } }
.bk3-pledge[hidden] { display: none; }
.bk3-pledge { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px -16px 0; padding: 10px 16px; background: rgba(255, 255, 255, .72); }
.bk3-pledge > div { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.bk3-pledge i { flex: none; font-size: 15px; color: var(--bk-ac); margin-top: 1px; }
.bk3-pledge b { display: block; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); line-height: 1.3; }
.bk3-pledge small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); line-height: 1.3; }

/* ---------- thanh tiến độ ---------- */
.bk3-steps { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 16px 4px; position: relative; }
.bk3-steps button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ds-ink-500); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); cursor: pointer; }
.bk3-steps .n { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-bg-soft); color: var(--ds-ink-700); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); transition: background .3s var(--ds-ease), color .3s var(--ds-ease), transform .3s var(--ds-ease); }
.bk3-steps .n em { display: none; font-style: normal; line-height: 0; }
.bk3-steps button::before { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--ds-bg-soft); }
.bk3-steps button:first-child::before { display: none; }
.bk3-steps button::after { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: var(--bk-ac); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ds-ease); }
.bk3-steps button:first-child::after { display: none; }
.bk3-steps button.done::after { transform: scaleX(1); }
.bk3-steps button.done .n { background: var(--bk-ac); color: #fff; }
.bk3-steps button.done .n em { display: block; } .bk3-steps button.done .n b { display: none; }
.bk3-steps button.cur .n { background: #fff; color: var(--bk-ac-700); box-shadow: 0 0 0 2px var(--bk-ac); }
.bk3-steps button.done, .bk3-steps button.cur { color: var(--ds-ink-900); }

/* ---------- mục (không khung: chỉ khoảng cách + nền nhạt) ---------- */
.bk3-body { padding: 4px 16px 16px; display: grid; gap: 18px; }
.bk3-sec { display: grid; gap: 8px; min-width: 0; }
.bk3-lb { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bk3-lb b { font-size: var(--ds-fs-13); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.bk3-lb small { font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; }
.bk3-hint { margin: 0; font-size: var(--ds-fs-11); color: var(--ds-ink-500); line-height: 1.45; display: flex; gap: 6px; align-items: flex-start; }
.bk3-hint i { flex: none; font-size: 13px; color: var(--bk-ac); margin-top: 1px; }
.bk3-er { margin: 0; display: none; align-items: flex-start; gap: 6px; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-500); color: #c2313f; line-height: 1.4; }
.bk3-er i { flex: none; font-size: 13px; margin-top: 1px; }
.bk3-er.on { display: flex; }
.bk3-sec.bad .bk3-ctl, .bk3-sec.bad .bk3-day, .bk3-sec.bad .bk3-per { border-color: #e9919a; }
.bk3-sec.bad .bk3-ctl { background: #fff8f8; }

.bk3-ctl { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-rd-sm); background: #fff; transition: border-color .2s var(--ds-ease), box-shadow .2s var(--ds-ease); }
.bk3-ctl:focus-within { border-color: var(--ds-blue-500); box-shadow: 0 0 0 3px rgba(84, 143, 235, .16); }
.bk3-ctl > i { flex: none; font-size: 16px; color: var(--ds-ink-400); }
.bk3-ctl input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--ds-fs-13); color: var(--ds-ink-900); }
.bk3-ctl input::placeholder { color: var(--ds-ink-400); }
.bk3-ctl.lock { background: var(--ds-bg); border-color: var(--ds-line); }
.bk3-ctl.lock input { color: var(--ds-ink-700); font-weight: var(--ds-fw-600); }
.bk3-ctl.lock > i { color: var(--bk-ac-700); }
.bk3-ctl .tg { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: var(--ds-rd-xs); background: var(--bk-ac-100); color: var(--bk-ac-700); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); }
.bk3-ctl .tg i { font-size: 10px; }
.bk3-ctl .clr { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--ds-bg-soft); color: var(--ds-ink-700); display: grid; place-items: center; font-size: 11px; cursor: pointer; }
.bk3-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.bk3-link { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 0; border: 0; background: none; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-blue-600); cursor: pointer; }
.bk3-link i { font-size: 14px; }
.bk3-link:hover { color: var(--ds-blue-700); }

/* dịch vụ */
.bk3-svc { position: relative; }
.bk3-pop { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); display: none; max-height: 252px; overflow-y: auto; scrollbar-width: none; background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-sm); box-shadow: var(--ds-sh-pop); padding: 4px; }
.bk3-pop::-webkit-scrollbar { display: none; }
.bk3-svc.open .bk3-pop { display: block; }
.bk3-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ds-rd-xs); background: none; text-align: left; cursor: pointer; }
.bk3-opt:hover, .bk3-opt.on { background: var(--bk-ac-50); }
.bk3-opt b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-opt small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-opt .pr { font-size: var(--ds-fs-12); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); white-space: nowrap; text-align: right; }
.bk3-opt .pr em { font-style: normal; font-weight: var(--ds-fw-400); font-size: var(--ds-fs-11); color: var(--ds-ink-500); margin-right: 2px; }
.bk3-opt.other { border-top: 1px dashed var(--ds-line); border-radius: 0 0 var(--ds-rd-xs) var(--ds-rd-xs); margin-top: 2px; }
.bk3-chips { display: flex; gap: 6px; }
.bk3-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--ds-rd-pill); background: var(--ds-bg-soft); font-size: var(--ds-fs-12); font-weight: var(--ds-fw-500); color: var(--ds-ink-700); white-space: nowrap; cursor: pointer; transition: background .2s var(--ds-ease), color .2s var(--ds-ease), transform .15s var(--ds-ease); }
.bk3-chip:hover { background: var(--bk-ac-100); }
.bk3-chip:active { transform: scale(.97); }
.bk3-chip[aria-pressed="true"] { background: var(--bk-ac-100); color: var(--bk-ac-700); font-weight: var(--ds-fw-600); }
.bk3-chip i { font-size: 13px; }

/* bác sĩ */
.bk3-dr { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ds-rd-sm); background: var(--bk-ac-50); }
.bk3-dr img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.bk3-dr .t { flex: 1; min-width: 0; }
.bk3-dr b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-dr small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* voucher */
.bk3-vc-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.bk3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--ds-rd-sm); background: var(--ds-ink-900); color: #fff; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); cursor: pointer; white-space: nowrap; transition: background .2s var(--ds-ease), transform .15s var(--ds-ease); }
.bk3-btn:hover { background: #24365c; }
.bk3-btn:active { transform: translateY(1px) scale(.98); }
.bk3-btn.soft { background: var(--ds-bg-soft); color: var(--ds-ink-900); } .bk3-btn.soft:hover { background: #e3e8f1; }
.bk3-btn.pri { background: var(--ds-blue-500); } .bk3-btn.pri:hover { background: #4a84e2; }
.bk3-btn.mint { background: var(--ds-mint-500); } .bk3-btn.mint:hover { background: #0a8a6b; }
.bk3-btn.sm { height: 32px; padding: 0 11px; font-size: var(--ds-fs-12); }
.bk3-btn i { font-size: 15px; }
.bk3-vc { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: var(--ds-rd-sm); background: var(--ds-orange-50); }
.bk3-vc.ev { background: var(--ds-violet-50); }
.bk3-vc .ic { width: 34px; height: 34px; border-radius: var(--ds-rd-sm); display: grid; place-items: center; background: var(--ds-orange-100); color: var(--ds-orange-500); font-size: 18px; }
.bk3-vc.ev .ic { background: var(--ds-violet-100); color: var(--ds-violet-500); }
.bk3-vc b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); letter-spacing: .02em; }
.bk3-vc small { display: block; font-size: var(--ds-fs-11); color: var(--ds-orange-700); font-weight: var(--ds-fw-500); }
.bk3-vc.ev small { color: var(--ds-violet-700); }
.bk3-vc .x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(19, 33, 60, .06); color: var(--ds-ink-700); display: grid; place-items: center; font-size: 12px; cursor: pointer; }
.bk3-vc .x:hover { background: rgba(19, 33, 60, .12); }
.bk3-fl { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--ds-rd-xs); background: var(--ds-orange-500); color: #fff; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); font-variant-numeric: tabular-nums; margin-left: 6px; vertical-align: 1px; }
.bk3-fl i { font-size: 11px; }

/* thời điểm */
.bk3-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: var(--ds-rd-sm); background: var(--ds-bg-soft); }
.bk3-seg button { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: 5px; background: transparent; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-700); cursor: pointer; transition: background .2s var(--ds-ease), color .2s var(--ds-ease); }
.bk3-seg button i { font-size: 15px; }
.bk3-seg button[aria-selected="true"] { background: #fff; color: var(--bk-ac-700); box-shadow: var(--ds-sh-1); }
.bk3-seg button:disabled { cursor: not-allowed; color: var(--ds-ink-400); }
.bk3-seg .bk3-vp { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 5px; border-radius: var(--ds-rd-xs); background: var(--ds-gold-100); color: #8a6511; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); }
.bk3-seg .bk3-vp i { font-size: 10px; }
.bk3-days { display: flex; gap: 6px; padding: 2px 0; }
.bk3-day { flex: 1 0 42px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 6px; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-sm); background: #fff; color: var(--ds-ink-700); cursor: pointer; transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease), transform .15s var(--ds-ease); }
.bk3-day:hover:not(:disabled) { border-color: var(--bk-ac); background: var(--bk-ac-50); }
.bk3-day .w { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-500); }
.bk3-day .d { font-size: var(--ds-fs-17); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); line-height: 1.25; }
.bk3-day .s { font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; }
.bk3-day[aria-pressed="true"] { background: var(--bk-ac); border-color: var(--bk-ac); color: #fff; }
.bk3-day[aria-pressed="true"] .d, .bk3-day[aria-pressed="true"] .s, .bk3-day[aria-pressed="true"] .w { color: #fff; }
.bk3-day:disabled { cursor: not-allowed; background: var(--ds-bg); border-style: dashed; }
.bk3-day:disabled .d { color: var(--ds-ink-400); }
.bk3-pers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bk3-per { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; align-items: start; padding: 9px 9px; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-sm); background: #fff; text-align: left; cursor: pointer; transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease); }
.bk3-per > i { grid-row: span 2; font-size: 17px; color: var(--ds-ink-400); margin-top: 1px; }
.bk3-per b { font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); line-height: 1.3; }
.bk3-per small { font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; }
.bk3-per:hover { border-color: var(--bk-ac); }
.bk3-per[aria-pressed="true"] { background: var(--bk-ac-50); border-color: var(--bk-ac); }
.bk3-per[aria-pressed="true"] > i { color: var(--bk-ac); }
.bk3-per .ok { position: absolute; right: 5px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--bk-ac); color: #fff; display: none; place-items: center; font-size: 9px; }
.bk3-per[aria-pressed="true"] .ok { display: grid; }
.bk3-per .hot { position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-orange-500); }
.bk3-per[aria-pressed="true"] .hot { display: none; }
.bk3-per:disabled { cursor: not-allowed; background: var(--ds-bg); }
.bk3-per:disabled b, .bk3-per:disabled > i { color: var(--ds-ink-400); }
.bk3-grp { display: grid; gap: 6px; }
.bk3-grp > small { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-500); }
.bk3-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bk3-slot { height: 34px; border: 1px solid var(--ds-line); border-radius: var(--ds-rd-sm); background: #fff; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease); }
.bk3-slot:hover:not(:disabled) { border-color: var(--bk-ac); background: var(--bk-ac-50); }
.bk3-slot[aria-pressed="true"] { background: var(--bk-ac); border-color: var(--bk-ac); color: #fff; }
.bk3-slot:disabled { background: var(--ds-bg); color: var(--ds-ink-400); text-decoration: line-through; cursor: not-allowed; }
.bk3-lunch { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--ds-rd-sm); background: var(--ds-bg); font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-lunch i { font-size: 14px; }
.bk3-empty { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: var(--ds-rd-sm); background: var(--ds-bg); font-size: var(--ds-fs-12); color: var(--ds-ink-700); line-height: 1.45; }
.bk3-empty i { flex: none; font-size: 16px; color: var(--ds-ink-500); margin-top: 1px; }

/* liên hệ */
.bk3-tg { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--ds-rd-sm); background: var(--ds-bg); cursor: pointer; }
.bk3-tg .sw { flex: none; position: relative; width: 32px; height: 18px; border-radius: 9px; background: #cbd2de; transition: background .2s var(--ds-ease); }
.bk3-tg .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ds-ease); }
.bk3-tg[aria-checked="true"] .sw { background: var(--bk-ac); } .bk3-tg[aria-checked="true"] .sw::after { transform: translateX(14px); }
.bk3-tg b { display: block; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-tg small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-ta { width: 100%; min-height: 64px; padding: 10px 12px; resize: none; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-rd-sm); font: inherit; font-size: var(--ds-fs-13); color: var(--ds-ink-900); outline: 0; }
.bk3-ta:focus { border-color: var(--ds-blue-500); box-shadow: 0 0 0 3px rgba(84, 143, 235, .16); }
.bk3-gst { display: flex; align-items: center; gap: 6px; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-gst a { color: var(--ds-blue-600); font-weight: var(--ds-fw-600); }

/* ---------- PHIẾU HẸN: xem trước đứng trước nút gửi (luật §13.11) ---------- */
.bk3-tk { position: relative; border-radius: var(--ds-rd-sm); background: var(--bk-ac-50); }
.bk3-tk .tp { padding: 12px 14px 10px; display: grid; gap: 7px; }
.bk3-tk .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
.bk3-tk .hd b { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); letter-spacing: .1em; text-transform: uppercase; color: var(--bk-ac-700); display: flex; align-items: center; gap: 5px; }
.bk3-tk .hd b i { font-size: 12px; }
.bk3-tk .hd em { font-style: normal; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-tk .r { display: grid; grid-template-columns: 16px 74px minmax(0, 1fr); gap: 6px; align-items: start; font-size: var(--ds-fs-12); line-height: 1.4; }
.bk3-tk .r i { font-size: 14px; color: var(--bk-ac); margin-top: 1px; }
.bk3-tk .r span { color: var(--ds-ink-500); }
.bk3-tk .r b { font-weight: var(--ds-fw-600); color: var(--ds-ink-900); overflow-wrap: anywhere; }
.bk3-tk .r b.na { color: var(--ds-ink-400); font-weight: var(--ds-fw-400); }
.bk3-tk .cut { position: relative; height: 0; margin: 0 14px; border-top: 1.5px dashed rgba(19, 33, 60, .18); }
.bk3-tk .cut::before, .bk3-tk .cut::after { content: ''; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.bk3-tk .cut::before { left: -21px; } .bk3-tk .cut::after { right: -21px; }
.bk3-tk .bt { padding: 10px 14px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.bk3-tk .bt small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-tk .old { font-size: var(--ds-fs-12); color: var(--ds-ink-500); text-decoration: line-through; margin-right: 6px; }
.bk3-tk .now { font-size: var(--ds-fs-17); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); line-height: 1.2; font-variant-numeric: tabular-nums; }
.bk3-tk .now.sale { color: var(--ds-orange-700); }
.bk3-tk .sv { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); color: var(--ds-orange-700); background: var(--ds-orange-100); padding: 3px 7px; border-radius: var(--ds-rd-xs); white-space: nowrap; }

/* ---------- nút gửi ---------- */
.bk3-bn { display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--ds-rd-sm); background: #fff1f2; color: #a9262f; font-size: var(--ds-fs-12); line-height: 1.45; }
.bk3-bn.on { display: flex; }
.bk3-bn i { flex: none; font-size: 16px; margin-top: 1px; }
.bk3-bn .a { margin-left: auto; align-self: center; }
.bk3-bn.net { background: #fff6e9; color: #8f4a07; }
.bk3-act { display: grid; gap: 10px; }
.bk3-go { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border: 0; border-radius: var(--ds-rd-sm); background: linear-gradient(120deg, var(--bk-ac) 0%, var(--bk-ac-2) 100%); color: #fff; font-size: var(--ds-fs-14); font-weight: var(--ds-fw-700); letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 16px -6px var(--bk-ac); transition: transform .15s var(--ds-ease), box-shadow .25s var(--ds-ease), filter .25s var(--ds-ease); }
.bk3-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); }
.bk3-go:hover::after { animation: bk3Sheen .9s var(--ds-ease); }
.bk3-go:hover { box-shadow: 0 10px 22px -8px var(--bk-ac); }
.bk3-go:active { transform: translateY(1px) scale(.992); }
.bk3-go i { font-size: 18px; transition: transform .3s var(--ds-ease); }
.bk3-go:hover i.pl { transform: translateX(3px) rotate(-8deg); }
.bk3-go:disabled { filter: grayscale(.6) opacity(.6); cursor: not-allowed; box-shadow: none; }
.bk3-go:disabled::after { display: none; }
@keyframes bk3Sheen { to { left: 120%; } }
.bk3-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: bk3Spin .7s linear infinite; }
@keyframes bk3Spin { to { transform: rotate(360deg); } }
.bk3-sec-note { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: var(--ds-fs-11); color: var(--ds-ink-500); line-height: 1.45; }
.bk3-sec-note i { flex: none; font-size: 13px; color: var(--bk-ac); margin-top: 1px; }
.bk3-sec-note a { color: var(--ds-ink-700); text-decoration: underline; text-underline-offset: 2px; }
.bk3-nav { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.bk3[data-ph="sending"] .bk3-body { opacity: .6; pointer-events: none; }


/* ---------- thành công ---------- */
.bk3-ok { padding: 22px 16px 16px; display: grid; gap: 16px; }
.bk3-ok .top { display: grid; justify-items: center; text-align: center; gap: 6px; }
.bk3-ok .chk { width: 54px; height: 54px; border-radius: 50%; background: var(--bk-ac-100); display: grid; place-items: center; }
.bk3-ok .chk svg { width: 30px; height: 30px; fill: none; stroke: var(--bk-ac-700); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; animation: bk3Draw .6s .15s var(--ds-ease) backwards; }
@keyframes bk3Draw { from { stroke-dashoffset: 40; } }
.bk3-ok h3 { margin: 4px 0 0; font-size: var(--ds-fs-17); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.bk3-ok p { margin: 0; font-size: var(--ds-fs-12); color: var(--ds-ink-700); line-height: 1.5; max-width: 300px; }
.bk3-code { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bk3-code span { font-size: var(--ds-fs-11); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-ink-500); font-weight: var(--ds-fw-600); }
.bk3-code b { font-size: var(--ds-fs-24); font-weight: var(--ds-fw-800); letter-spacing: .04em; color: var(--bk-ac-700); font-variant-numeric: tabular-nums; }
.bk3-code button { width: 28px; height: 28px; border: 0; border-radius: var(--ds-rd-xs); background: var(--ds-bg-soft); display: grid; place-items: center; font-size: 14px; color: var(--ds-ink-700); cursor: pointer; }
.bk3-tl { display: grid; gap: 0; }
.bk3-tl > div { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.bk3-tl > div:last-child { padding-bottom: 0; }
.bk3-tl > div::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--ds-bg-soft); }
.bk3-tl > div:last-child::before { display: none; }
.bk3-tl .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-bg-soft); color: var(--ds-ink-700); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-700); }
.bk3-tl .n.on { background: var(--bk-ac); color: #fff; }
.bk3-tl b { display: block; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); line-height: 1.4; }
.bk3-tl small b { display: inline; font-weight: var(--ds-fw-600); }
.bk3-tl small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); line-height: 1.4; }
.bk3-ok .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk3-ok .btns .full { grid-column: 1 / -1; }
.bk3-reg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: var(--ds-rd-sm); background: var(--ds-blue-50); }
.bk3-reg > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ds-rd-sm); background: var(--ds-blue-100); color: var(--ds-blue-600); font-size: 18px; }
.bk3-reg b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-reg p { margin: 2px 0 8px; font-size: var(--ds-fs-11); color: var(--ds-ink-700); max-width: none; line-height: 1.45; }
.bk3-reg .row { display: flex; gap: 6px; }

/* ---------- không nhận đặt ---------- */
.bk3-cl { padding: 22px 16px 16px; display: grid; gap: 14px; }
.bk3-cl .top { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.bk3-cl .top > i { width: 40px; height: 40px; border-radius: var(--ds-rd-sm); display: grid; place-items: center; background: var(--bk-ac-100); color: var(--bk-ac-700); font-size: 22px; }
.bk3-cl h3 { margin: 0; font-size: var(--ds-fs-15); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.bk3-cl p { margin: 3px 0 0; font-size: var(--ds-fs-12); color: var(--ds-ink-700); line-height: 1.5; }
.bk3-sg { display: grid; gap: 6px; }
.bk3-sg > small { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-500); }
.bk3-nk { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--ds-rd-sm); background: var(--ds-bg); text-decoration: none; }
.bk3-nk img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.bk3-nk b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-nk small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-nk > i { font-size: 14px; color: var(--ds-ink-400); }

/* ---------- chọn nha khoa (popup đầu trang) ---------- */
.bk3-pick { position: relative; }
.bk3-pick .bk3-pop { max-height: 280px; }
.bk3-pk { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--ds-rd-xs); background: none; text-align: left; cursor: pointer; }
.bk3-pk:hover { background: var(--bk-ac-50); }
.bk3-pk img, .bk3-pk > i { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.bk3-pk > i { display: grid; place-items: center; background: var(--ds-blue-100); color: var(--ds-blue-600); font-size: 16px; }
.bk3-pk b { display: flex; align-items: center; gap: 6px; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-pk small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-pkd { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ds-rd-sm); background: var(--bk-ac-50); }
.bk3-pkd img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.bk3-pkd .t { flex: 1; min-width: 0; }
.bk3-pkd b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-pkd small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }

/* ---------- bản rút gọn, nút gọi nhanh ---------- */
.bk3--pop .bk3-steps { padding-top: 4px; }


.bk3-intro { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 0; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-intro b { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-intro b i { font-size: 14px; color: var(--bk-ac); }
.bk3-intro span { font-weight: var(--ds-fw-600); color: var(--bk-ac-700); }
.bk3-steps { padding: 10px 16px 6px; }
.bk3-steps button { color: var(--ds-ink-700); font-weight: var(--ds-fw-500); }
.bk3-steps button.cur { color: var(--ds-ink-900); font-weight: var(--ds-fw-700); }
.bk3-steps button.cur .n { background: var(--bk-ac); color: #fff; box-shadow: 0 0 0 4px var(--bk-ac-100); }
.bk3-steps button.next { color: var(--ds-ink-400); }
.bk3-steps button.next .n { background: var(--ds-bg-soft); color: var(--ds-ink-400); }
.bk3-steps button.cur::after, .bk3-steps button.done::after { transform: scaleX(1); }
.bk3-steps button.done .n { background: var(--bk-ac-100); color: var(--bk-ac-700); }
.bk3-steps button.done .n em { display: block; } .bk3-steps button.done .n b { display: none; }

.bk3-body { display: flex; flex-direction: column; gap: 14px; padding: 8px 16px 16px; }
.bk3-stage { display: grid; align-content: start; gap: 18px; }
.bk3-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.bk3-foot .bk3-go { flex: 0 0 62%; width: 62%; }
.bk3-back { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 6px; border: 0; border-radius: var(--ds-rd-xs); background: none; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-700); cursor: pointer; transition: background .2s var(--ds-ease); }
.bk3-back i { font-size: 14px; }
.bk3-back:hover { background: var(--ds-bg-soft); color: var(--ds-ink-900); }
.bk3-cap { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ds-fs-11); color: var(--ds-ink-500); line-height: 1.3; }
.bk3-cap i { font-size: 14px; color: var(--bk-ac); flex: none; }

/* ô chọn dịch vụ (không phải ô tìm kiếm) */
.bk3-sel { display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-rd-sm); background: #fff; text-align: left; font-size: var(--ds-fs-13); color: var(--ds-ink-400); cursor: pointer; transition: border-color .2s var(--ds-ease), box-shadow .2s var(--ds-ease); }
.bk3-sel > i:first-child { flex: none; font-size: 17px; color: var(--ds-ink-400); }
.bk3-sel .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-sel.has { color: var(--ds-ink-900); font-weight: var(--ds-fw-600); }
.bk3-sel.has > i:first-child { color: var(--bk-ac); }
.bk3-sel .pv { flex: none; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
.bk3-sel .pv em { font-style: normal; font-weight: var(--ds-fw-400); font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-sel .cv { flex: none; font-size: 14px; color: var(--ds-ink-500); transition: transform .25s var(--ds-ease); }
.bk3-svc.open .bk3-sel { border-color: var(--ds-blue-500); box-shadow: 0 0 0 3px rgba(84, 143, 235, .16); }
.bk3-svc.open .bk3-sel .cv { transform: rotate(180deg); }
.bk3-sel:disabled { background: var(--ds-bg); cursor: not-allowed; }
.bk3-sec.bad .bk3-sel { border-color: #e9919a; background: #fff8f8; }
.bk3-pop-h { display: none; }
.bk3-opt.on { background: var(--bk-ac-50); }
.bk3-opt.on b { color: var(--bk-ac-700); }
.bk3-pop { max-height: 300px; }

@media (max-width: 480px) {
  .bk3-svc.open::before { content: ''; position: fixed; inset: 0; z-index: 90; background: rgba(19, 33, 60, .45); }
  .bk3-svc.open .bk3-pop { position: fixed; z-index: 91; left: 0; right: 0; top: auto; bottom: 0; max-height: 72vh; padding: 0 8px 18px; border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(19, 33, 60, .25); }
  .bk3-pop-h { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 14px 8px 8px; }
  .bk3-pop-h b { font-size: var(--ds-fs-15); font-weight: var(--ds-fw-700); color: var(--ds-ink-900); }
  .bk3-pop-h button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ds-bg-soft); display: grid; place-items: center; font-size: 13px; color: var(--ds-ink-700); }
  .bk3-opt { padding: 12px 10px; }
}

.bk3-stage { display: flex; flex-direction: column; gap: 18px; }
.bk3-stage > .bk3-sec, .bk3-stage > .bk3-tk { flex: none; }
.bk3-foot .bk3-go { flex: 0 0 58%; width: 58%; }
.bk3-cap { white-space: nowrap; }
.bk3-after { margin-top: auto; display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--ds-rd-sm); background: var(--ds-bg); }
.bk3-after b { font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-500); }
.bk3-after p { margin: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; font-size: var(--ds-fs-12); color: var(--ds-ink-700); line-height: 1.4; }
.bk3-after p i { font-size: 15px; color: var(--bk-ac); margin-top: 0; }
.bk3-slots { display: flex; gap: 6px; padding: 1px 0; }
.bk3-slot { flex: none; width: 62px; }
@media (max-width: 480px) { .bk3-foot .bk3-go { flex-basis: 56%; width: 56%; } }
.bk3-timebox { grid-template-columns: minmax(0, 1fr); }
/* ==========================================================================
   Phần thêm khi đưa vào site (không có trong demo): ẩn bằng thuộc tính hidden, ô gốc ẩn, chọn nha khoa, ưu đãi của nha khoa, thân mềm
   ========================================================================== */
.bk3 [hidden] { display: none !important; }
.bk3 input, .bk3 textarea, .bk3 select { font-family: inherit; }
.bk3-form { margin: 0; }
.bk3-msg:empty { display: none; }
.bk3-hs.fr { -webkit-mask-image: none; mask-image: none; }
.bk3-hs.fr.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.bk3-tier-un { background: var(--ds-bg-soft); color: var(--ds-ink-700); }
.bk3-pkd .ds-tier, .bk3-pk .ds-tier { margin-left: 0; }
.bk3-timebox { display: grid; gap: 8px; }
.bk3-dr-i, .bk3-pkd-i { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-white); color: var(--bk-ac-700); font-size: 18px; }
.bk3-sel .pv:empty { display: none; }
.bk3-allday { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-rd-sm); background: #fff; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-700); cursor: pointer; transition: background .2s var(--ds-ease), border-color .2s var(--ds-ease); }
.bk3-allday i { font-size: 15px; color: var(--ds-ink-400); }
.bk3-allday:hover { border-color: var(--bk-ac); }
.bk3-allday[aria-pressed="true"] { background: var(--bk-ac-50); border: 1px solid var(--bk-ac); color: var(--bk-ac-700); }
.bk3-allday[aria-pressed="true"] i { color: var(--bk-ac); }
.bk3-allday:disabled { background: var(--ds-bg); color: var(--ds-ink-400); cursor: not-allowed; }
.bk3-hot-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-orange-500); margin-right: 4px; vertical-align: 1px; }
.bk3-bn { display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--ds-rd-sm); background: #fff1f2; color: #a9262f; font-size: var(--ds-fs-12); line-height: 1.45; }
.bk3-bn.on { display: flex; }
.bk3-bn i { flex: none; font-size: 16px; margin-top: 1px; }
.bk3-bn.net { background: #fff6e9; color: #8f4a07; }
.bk3-bn .a { margin-left: auto; align-self: center; }
/* ô chọn nha khoa trong popup */
.bk3-pickw { position: relative; }
.bk3-pickw .bk3-pop { max-height: 280px; }
.bk3-pickw.open .bk3-pop { display: block; }
.bk3-pk { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--ds-rd-xs); background: none; text-align: left; cursor: pointer; }
.bk3-pk:hover, .bk3-pk.on { background: var(--bk-ac-50); }
.bk3-pk img, .bk3-pk > i { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.bk3-pk > i { display: grid; place-items: center; background: var(--ds-blue-100); color: var(--ds-blue-600); font-size: 16px; }
.bk3-pk b { display: flex; align-items: center; gap: 6px; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-pk small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-pkd { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--ds-rd-sm); background: var(--bk-ac-50); }
.bk3-pkd img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.bk3-pkd .t { flex: 1; min-width: 0; }
.bk3-pkd b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk3-pkd small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ưu đãi của chính nha khoa (popup) */
.bk3-offers { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--ds-rd-sm); background: var(--ds-orange-50); }
.bk3-offers-h { display: flex; align-items: center; gap: 6px; font-size: var(--ds-fs-12); color: var(--ds-ink-900); }
.bk3-offers-h i { font-size: 15px; color: var(--ds-orange-500); }
.bk3-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px dashed rgba(19, 33, 60, .12); }
.bk3-offer.mut { opacity: .6; }
.bk3-offer b { display: block; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-offer small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-500); }
.bk3-offer .am { font-size: var(--ds-fs-12); font-weight: var(--ds-fw-700); color: var(--ds-orange-700); white-space: nowrap; }
.bk3-vcw { display: grid; gap: 8px; }
.bk3-ok .bk3-btn { text-decoration: none; }
.bk3--pop .bk3-sec-note { display: none; }
.bk3-tk .r b[data-t="tm"] { overflow-wrap: anywhere; }
/* hộp gợi ý nâng hạng cho chủ nha khoa (ngoài khung) */
.bk3-upsell { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: var(--ds-rd-lg); background: var(--ds-orange-50); }
.bk3-upsell .t { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.bk3-upsell .t i { font-size: 18px; color: var(--ds-orange-500); }
.bk3-upsell b { display: block; font-size: var(--ds-fs-13); font-weight: var(--ds-fw-600); color: var(--ds-ink-900); }
.bk3-upsell small { display: block; font-size: var(--ds-fs-11); color: var(--ds-ink-700); line-height: 1.45; }
.bk3-upsell .bk3-btn { justify-self: start; }
/* popup đầu trang: khung hộp thoại theo demo */
dialog.bkdlg { border-radius: var(--ds-rd-lg); box-shadow: var(--ds-sh-pop); width: min(460px, calc(100vw - 24px)); }
.bkdlg .hd { background: #fff; color: var(--ds-ink-900); border-bottom: 1px solid var(--ds-line); }
.bkdlg .hd .ic { background: var(--ds-blue-100); color: var(--ds-blue-600); border-radius: var(--ds-rd-sm); }
.bkdlg .hd b { font-size: var(--ds-fs-15); font-weight: var(--ds-fw-700); }
.bkdlg .hd small { color: var(--ds-ink-500); opacity: 1; font-size: var(--ds-fs-11); }
.bkdlg .hd .x { background: var(--ds-bg-soft); color: var(--ds-ink-700); border-radius: 50%; }
.bkdlg .bd { padding: 6px 16px 16px; }
.bk3.flash-on { box-shadow: 0 0 0 3px var(--ds-orange-500), 0 12px 30px rgba(239, 125, 26, .25); transition: box-shadow .3s; }
/* cột hẹp (hồ sơ nha khoa ~330px): cam kết chỉ giữ dòng đậm để vẫn gọn một hàng như demo (demo rộng 380px) */
.bk3 { container-type: inline-size; }
@container (max-width: 360px) { .bk3-pledge small { display: none; } .bk3-pledge > div { align-items: center; } }
.bk3-vc-add input:not(:placeholder-shown) { text-transform: uppercase; }
/* vùng bấm đủ lớn cho liên kết chữ; icon căn trên khi chữ nhiều dòng */
.bk3-link { min-height: 28px; align-items: center; }
.bk3-dr, .bk3-pkd { align-items: flex-start; }
.bk3-dr > .bk3-link, .bk3-pkd > .bk3-link { align-self: center; }
.bk3 .bk3-tier-un, .bk3 .ds-tier { height: 16px; padding: 0 6px; gap: 3px; border-radius: var(--ds-rd-xs); font-size: var(--ds-fs-10); }
.bk3 .ds-tier i { font-size: 10px; }

/* ==========================================================================
   Khung DÍNH ở cột phải (hồ sơ nha khoa, hồ sơ nha sĩ): cao tự nhiên theo nội dung, không min-height.
   Cao hơn màn hình thì chỉ vùng nội dung cuộn nội bộ (ẩn thanh cuộn, mép mờ); đầu khung + thanh nút luôn thấy.
   ========================================================================== */
.pside:has(> .bk3-stick) { position: static; }
.bk3-stick { --bk-top: calc(var(--hdr-h, 52px) + 12px); position: sticky; top: var(--bk-top); z-index: 5; display: flex; flex-direction: column; max-height: calc(100vh - var(--bk-top) - 12px); }
.cl3 .bk3-stick { --bk-top: calc(var(--hdr-h, 52px) + 56px); }
.bk3-stick > .bk3 { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bk3-stick > .bk3 > form, .bk3-stick > .bk3 .bk3-form { min-height: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.bk3-stick .bk3-hd, .bk3-stick .bk3-steps, .bk3-stick .bk3-intro { flex: none; }
.bk3-stick .bk3-body { flex: 1 1 auto; min-height: 0; }
.bk3-stage { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.bk3-stage::-webkit-scrollbar { display: none; }
.bk3-stage.more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.bk3-foot { flex: none; }
/* ô dịch vụ đang xổ: tạm nới vùng nội dung để danh sách không bị cắt */
.bk3-stage:has(.bk3-svc.open) { min-height: 300px; }
@media (max-width: 960px) { .bk3-stick { position: static; max-height: none; } }
.bk3-stick > .selfnote { flex: none; }
/* nội dung cột phải trôi xuống DƯỚI khung dính: nền trang che kín, không lộ chữ xuyên qua */
.bk3-stick { background: var(--bg-2); box-shadow: 0 10px 0 0 var(--bg-2), -4px 0 0 0 var(--bg-2), 4px 0 0 0 var(--bg-2); }
/* tên dài: xuống tối đa 2 dòng, chip hạng bám ngay sau tên (hoặc xuống dòng kế khi hết chỗ) */
.bk3-nmr { flex-wrap: wrap; row-gap: 3px; }
.bk3-nmr .bk3-nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; }
/* cột lưới của mục co theo khung (trước đây nở theo nội dung nowrap, tràn vào lề phải) */
.bk3-sec, .bk3-grp, .bk3-vcw { grid-template-columns: minmax(0, 1fr); }
.bk3-dr .t, .bk3-pkd .t { min-width: 0; }
/* thanh nút: không tràn lề phải ở cột hẹp (chú thích co lại, nút chính ~55%) */
.bk3-foot { min-width: 0; }
.bk3-foot .bk3-cap { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk3-foot .bk3-go { flex: 0 0 52%; width: 52%; }
.bk3-foot .bk3-back { flex: none; }