/* Bond p22: Mua Kèm bar (Figma 1011:92) + Xem ngay sheet (276:115). Mobile only. */
.bond-mk, .bond-mk-backdrop { display: none; }
@media (max-width: 849px) {
html body .bond-mk:not(#bond-x):not(#bond-y):not(#bond-z) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; font-family: "Be Vietnam Pro", sans-serif; color: #000; }
html body.single-product:not(#bond-x):not(#bond-y):not(#bond-z) { padding-bottom: 95px; }
html body .bond-mk *:not(#bond-x):not(#bond-y):not(#bond-z) { font-family: "Be Vietnam Pro", sans-serif !important; box-sizing: border-box; letter-spacing: 0; text-transform: none; }
html body .bond-mk-bar:not(#bond-x):not(#bond-y):not(#bond-z) { position: relative; background: #fff; border-radius: 5px 5px 0 0; padding: 10px 2.6% 18px; box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
html body .bond-mk.is-open .bond-mk-bar:not(#bond-x):not(#bond-y):not(#bond-z) { border-radius: 0; box-shadow: none; }
html body .bond-mk-toggle:not(#bond-x):not(#bond-y):not(#bond-z) { display: flex; align-items: center; gap: 5px; width: 100%; margin: 0 0 9px; padding: 0; min-height: 0; height: 17px; border: 0; background: none; box-shadow: none; cursor: pointer; text-align: left; color: #000; line-height: 1; }
html body .bond-mk-toggle img:not(#bond-x):not(#bond-y):not(#bond-z) { width: 17px; height: 17px; flex: none; margin: 0; }
html body .bond-mk-msg:not(#bond-x):not(#bond-y):not(#bond-z) { flex: 1; min-width: 0; font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .bond-mk-see:not(#bond-x):not(#bond-y):not(#bond-z) { flex: none; font-size: 12px; font-weight: 300; white-space: nowrap; }
html body .bond-mk-see i:not(#bond-x):not(#bond-y):not(#bond-z) { display: inline-block; font-style: normal; font-weight: 400; margin-left: 4px; transform: rotate(-90deg); transition: transform .2s; }
html body .bond-mk.is-open .bond-mk-see i:not(#bond-x):not(#bond-y):not(#bond-z) { transform: rotate(90deg); }
html body .bond-mk-cart:not(#bond-x):not(#bond-y):not(#bond-z) { display: flex; align-items: center; height: 37px; padding: 0 11px 0 17px; border-radius: 20px; background: #efffd1; color: #34c759; text-decoration: none; }
html body .bond-mk-cart-ic:not(#bond-x):not(#bond-y):not(#bond-z) { width: 17px; height: 15px; margin: 0 8px 0 0; object-fit: contain; }
html body .bond-mk-cart b:not(#bond-x):not(#bond-y):not(#bond-z) { font-size: 13px; font-weight: 700; color: #34c759; }
html body .bond-mk-dot:not(#bond-x):not(#bond-y):not(#bond-z) { width: 4px; height: 4px; margin: 0 13px 0 7px; border-radius: 50%; background: #34c759; }
html body .bond-mk-count:not(#bond-x):not(#bond-y):not(#bond-z) { font-size: 13px; font-weight: 400; color: #34c759; }
html body .bond-mk-total:not(#bond-x):not(#bond-y):not(#bond-z), html body .bond-mk-total *:not(#bond-x):not(#bond-y):not(#bond-z) { margin-left: auto; font-size: 16px !important; font-weight: 700 !important; color: #34c759 !important; white-space: nowrap; }
/* sheet */
html body .bond-mk-sheet:not(#bond-x):not(#bond-y):not(#bond-z) { display: none; background: #fff; border-radius: 5px 5px 0 0; padding: 22px 5.3% 0; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); flex-direction: column; }
html body .bond-mk.is-open .bond-mk-sheet:not(#bond-x):not(#bond-y):not(#bond-z) { display: flex; }
html body .bond-mk-tabs:not(#bond-x):not(#bond-y):not(#bond-z) { display: flex; gap: 8px; margin: 0 0 7px; flex: none; }
html body .bond-mk-tab:not(#bond-x):not(#bond-y):not(#bond-z) { margin: 0; padding: 0 11px; height: 29px; min-height: 0; line-height: 27px; border: .5px solid #000; border-radius: 5px; background: #fff; color: #000; font-size: 12px; font-weight: 400; box-shadow: none; }
html body .bond-mk-tab.is-on:not(#bond-x):not(#bond-y):not(#bond-z) { background: #efffd1; border-color: #34c759; }
html body .bond-mk-list:not(#bond-x):not(#bond-y):not(#bond-z) { display: none; list-style: none; margin: 0 -18px 0 0; padding: 0 18px 10px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #34c759 #efffd1; }
html body .bond-mk-list.is-on:not(#bond-x):not(#bond-y):not(#bond-z) { display: block; }
html body .bond-mk-list::-webkit-scrollbar { width: 3px; }
html body .bond-mk-list::-webkit-scrollbar-track { background: #efffd1; }
html body .bond-mk-list::-webkit-scrollbar-thumb { background: #34c759; border-radius: 3px; }
html body .bond-mk-item:not(#bond-x):not(#bond-y):not(#bond-z) { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 0 13px; border-bottom: 1px solid #efffd1; list-style: none; }
html body .bond-mk-item:last-child:not(#bond-x):not(#bond-y):not(#bond-z) { border-bottom: 0; }
html body .bond-mk-thumb:not(#bond-x):not(#bond-y):not(#bond-z) { flex: none; width: 81px; height: 81px; border-radius: 5px; background: #fdffeb; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
html body .bond-mk-thumb img:not(#bond-x):not(#bond-y):not(#bond-z) { width: 100%; height: 100%; object-fit: contain; margin: 0; }
html body .bond-mk-info:not(#bond-x):not(#bond-y):not(#bond-z) { flex: 1; min-width: 0; }
html body .bond-mk-name:not(#bond-x):not(#bond-y):not(#bond-z) { display: block; font-size: 13px; font-weight: 700; line-height: 16px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .bond-mk-price:not(#bond-x):not(#bond-y):not(#bond-z) { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
html body .bond-mk-price b:not(#bond-x):not(#bond-y):not(#bond-z), html body .bond-mk-price b *:not(#bond-x):not(#bond-y):not(#bond-z) { font-size: 16px; font-weight: 700; line-height: 20px; color: #34c759; }
html body .bond-mk-price del:not(#bond-x):not(#bond-y):not(#bond-z), html body .bond-mk-price del *:not(#bond-x):not(#bond-y):not(#bond-z) { font-size: 13px; font-weight: 400; line-height: 16px; color: #000; text-decoration: line-through; opacity: 1; }
html body .bond-mk-save:not(#bond-x):not(#bond-y):not(#bond-z), html body .bond-mk-save *:not(#bond-x):not(#bond-y):not(#bond-z) { font-size: 9px; font-weight: 400; line-height: 11px; color: #ff8000; }
html body .bond-mk-desc:not(#bond-x):not(#bond-y):not(#bond-z) { margin: 3px 0 0; font-size: 12px; font-weight: 400; line-height: 15px; color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .bond-mk-add:not(#bond-x):not(#bond-y):not(#bond-z) { flex: none; width: 28px; height: 28px; min-height: 0; margin: 6px 0 0; padding: 0; border: 0; border-radius: 3px; background: #efffd1; color: #000; font-size: 18px; font-weight: 400; line-height: 28px; text-align: center; text-decoration: none; box-shadow: none; }
html body .bond-mk-add.is-loading:not(#bond-x):not(#bond-y):not(#bond-z) { opacity: .5; }
html body .bond-mk-add.is-added:not(#bond-x):not(#bond-y):not(#bond-z) { background: #34c759; color: #fff; font-size: 14px; }
html body .bond-mk-backdrop:not(#bond-x):not(#bond-y):not(#bond-z) { position: fixed; inset: 0; z-index: 9989; background: rgba(0,0,0,.45); }
html.bond-mk-lock body .bond-mk-backdrop:not(#bond-x):not(#bond-y):not(#bond-z) { display: block; }
html.bond-mk-lock:not(#bond-x), html.bond-mk-lock body:not(#bond-x) { overflow: hidden; }
}