/* ===== wp.css — phần nối riêng của WordPress, nạp sau theme.css và pages.css (hai file đó giữ nguyên bản thiết kế) ===== */

/* Thuộc tính hidden luôn thắng các class đặt display */
[hidden]{display:none!important}

/* Ảnh thật trong khung .sb-media: phủ kín khung, bỏ nền sọc placeholder */
.sb-media.has-img{background-image:none}
.sb-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Ảnh nhỏ của danh mục trong menu dọc và ngăn kéo */
.sb-thumb{overflow:hidden}
.sb-thumb img{width:100%;height:100%;object-fit:cover}

/* Logo tải lên trong Customizer thay cho ô chữ */
.sb-branding__logo{display:block;width:auto;max-width:200px;height:40px;object-fit:contain;object-position:left center}
.sb-footer .sb-branding__logo{max-width:180px}

/* Logo thương hiệu (nếu có ảnh) trong khối thương hiệu */
.sb-brands a img{max-width:80%;max-height:48px;width:auto;height:auto;object-fit:contain}

/* Nút thêm vào giỏ đang gửi yêu cầu */
.woocommerce a.button.add_to_cart_button.loading{opacity:.7;cursor:progress}
.woocommerce li.product.outofstock a.button.add_to_cart_button{cursor:default}

/* Thanh quản trị khi đăng nhập: header dính bên dưới thanh này */
.admin-bar .sb-header{top:32px}
@media (max-width:782px){.admin-bar .sb-header{top:46px}}

/* Bộ lọc dạng ngăn kéo (tablet/mobile): ẩn hẳn khi đóng để phím Tab không đi vào phần nằm ngoài màn hình */
@media (max-width:1023px){
.sb-filters{visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.sb-filters.is-open{visibility:visible;transition:transform .25s ease,visibility 0s}
}

/* Hộp chọn khu vực giao hàng */
.sb-location-dialog{width:min(560px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 64px));padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--text);box-shadow:var(--shadow-md)}
.sb-location-dialog::backdrop{background:rgba(10,15,12,.45)}
.sb-location-dialog__panel{display:flex;flex-direction:column;gap:12px;padding:8px 20px 20px}
.sb-location-dialog__head{display:flex;align-items:center;justify-content:space-between}
.sb-location-dialog__head h2{margin:0;font-size:18px}
.sb-location-dialog__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;overflow:auto}
@media (max-width:767px){.sb-location-dialog__list .sb-chip{height:44px}.sb-location-dialog .sb-input{font-size:16px}}

/* Ảnh sản phẩm khi chỉ có một ảnh: bỏ cột dải ảnh nhỏ */
.sb-gallery--single{grid-template-columns:minmax(0,1fr)}
.sb-gallery__main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--surface)}
.sb-gallery__main .onsale{z-index:1}

/* Nút mua bị khóa khi phân loại hết hàng */
.sb-btn:disabled{opacity:.5;cursor:not-allowed}
.sb-swatch[data-unavailable]{opacity:.45;text-decoration:line-through}

/* Mô tả sản phẩm không có khung "Thông số chính" */
.sb-pdp-detail--single{grid-template-columns:minmax(0,1fr)}

/* Form viết đánh giá và chấm sao */
.sb-review-form{display:flex;flex-direction:column;gap:14px;max-width:820px}
.sb-review-form .sb-card__title{margin:0}
.sb-rate{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.sb-rate input{position:absolute;width:1px;height:1px;opacity:0}
.sb-rate label{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--border-strong);cursor:pointer}
.sb-rate label .sb-ic{width:28px;height:28px}
.sb-rate input:checked~label,.sb-rate label:hover,.sb-rate label:hover~label{color:#D69E00}
.sb-rate input:focus-visible+label{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}
.sb-rv p{margin:0}

/* Thông báo lỗi và khoảng cách giữa các thông báo của WooCommerce */
.sb-notice--err{background:#FDECEA}
.sb-notice--err>.sb-ic{color:var(--error)}
.sb-notice ul{margin:0;padding:0;list-style:none}
.sb-notice a{font-weight:600}
.sb-notice .button{margin-left:8px;font-weight:600}
.woocommerce-notices-wrapper:not(:empty){display:flex;flex-direction:column;gap:8px;margin-bottom:16px}

/* Thanh toán */
.sb-form-grid>wc-order-attribution-inputs{display:none}
.sb-field.woocommerce-invalid .sb-input,.sb-field.woocommerce-invalid .sb-select,.sb-field.woocommerce-invalid .sb-textarea{border-color:var(--error)}
.sb-field .checkout-inline-error-message{margin:0;font-size:13px;color:var(--error)}
.sb-choice:has(.payment_box){flex-wrap:wrap}
.sb-choice .payment_box{flex-basis:100%;font-size:13px;color:var(--text-2)}
.sb-choice .payment_box p{margin:0}
.woocommerce-NoticeGroup-checkout,.sb-coupon-notice{margin-bottom:16px}
@media (max-width:767px){.sb-textarea{font-size:16px}}

/* Tài khoản */
.sb-acc-nav li>a[aria-current="page"]{background:var(--tint);color:var(--primary);font-weight:700}
.sb-acc-nav li>a[aria-current="page"] .sb-ic{color:var(--primary)}
.sb-addr--new:hover{text-decoration:none}
.sb-addr form{display:contents}
.sb-fieldset{margin:0;padding:0;border:0;min-width:0}
.sb-fieldset>legend{padding:0;margin-bottom:6px}
.sb-chips-row a.sb-chip:hover{text-decoration:none}
@media (max-width:1023px){.sb-acc-nav li>a[aria-current="page"]{border-color:var(--primary)}}
@media (max-width:767px){.sb-auth .sb-row a,.sb-auth-card form>a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
/* Thanh menu tài khoản cuộn ngang trên mobile: cột lưới phải được co nhỏ hơn nội dung, nếu không cả trang tràn ngang. */
.sb-account>*{min-width:0}
/* .sb-pagination span (ô số trang) cũng trúng biểu tượng mũi tên bên trong link → trả biểu tượng về đúng kiểu .sb-ic. */
.sb-pagination .sb-ic{min-width:0;width:18px;height:18px;padding:0;border:0;border-radius:0;background:currentColor}
.sb-map iframe{display:block;width:100%;height:100%;border:0}
/* Cột lưới chứa thanh cuộn ngang (chip chuyên mục, menu chính sách) phải co được, nếu không trang tràn ngang trên mobile. */
.sb-doc>*,.sb-blog>*,.sb-contact>*{min-width:0}
.sb-blogo img{max-width:80%;max-height:80%;object-fit:contain}
/* Khối nhận hàng (bánh, hoa): chọn "lấy tại cửa hàng" thì ẩn địa chỉ, hiện thông tin cửa hàng. */
.sb-fulfil:has(.sb-ship-methods input[value^="local_pickup"]:checked) .sb-addr-fields{display:none}
.sb-fulfil:has(.sb-ship-methods input[value^="local_pickup"]:checked) .sb-store-pick{display:flex}
/* Giới hạn số thẻ ở khối Bán chạy / Gợi ý theo bề rộng: quy tắc gốc trong theme.css thua độ ưu tiên của
   ".woocommerce ul.products li.product{display:flex}" nên không có tác dụng; khai lại với độ ưu tiên cao hơn. */
.woocommerce ul.products.sb-grid--best li.product:nth-child(n+6),.woocommerce ul.products.sb-grid--rec li.product:nth-child(n+11){display:none}
@media (max-width:1279px){.woocommerce ul.products.sb-grid--best li.product:nth-child(n+5),.woocommerce ul.products.sb-grid--rec li.product:nth-child(n+9){display:none}}
@media (max-width:1023px){.woocommerce ul.products.sb-grid--best li.product:nth-child(n+5),.woocommerce ul.products.sb-grid--rec li.product:nth-child(n+9){display:flex}.woocommerce ul.products.sb-grid--rec li.product:nth-child(n+10){display:none}}
@media (max-width:767px){.woocommerce ul.products.sb-grid--best li.product:nth-child(n+5),.woocommerce ul.products.sb-grid--rec li.product:nth-child(n+7){display:none}}
.sb-swatches--grid.sb-swatches--grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Bình luận bài viết (thiết kế không có khối này): dùng token của theme. */
.sb-comments{max-width:760px}
.sb-comment-list,.sb-comment-list .children{list-style:none;margin:0;padding:0}
.sb-comment-list .children{padding-left:24px}
.sb-comment-list .comment-body{padding:16px 0;border-bottom:1px solid var(--border)}
.sb-comment-list .comment-author{display:flex;align-items:center;gap:10px;font-weight:600}
.sb-comment-list .comment-author img{border-radius:50%}
.sb-comment-list .comment-metadata{font-size:12px;color:var(--text-2);margin:2px 0 8px 50px}
.sb-comment-list .comment-metadata a{color:inherit}
.sb-comment-list .reply{font-size:13px;font-weight:600}
.sb-comments .comment-form{display:grid;gap:12px;margin-top:12px}
.sb-comments .comment-form p{margin:0}
.sb-comments .comment-form label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.sb-comments .comment-form textarea,.sb-comments .comment-form input[type=text],.sb-comments .comment-form input[type=email],.sb-comments .comment-form input[type=url]{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;font:inherit;background:#fff;color:var(--text)}
.sb-comments .comment-form-cookies-consent{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.sb-comments .comment-form-cookies-consent label{font-weight:400;margin:0}
@media (max-width:767px){.sb-comments .comment-form textarea,.sb-comments .comment-form input{font-size:16px}}
/* Mobile: phần chừa cho thanh cố định ở đáy nằm trong chân trang (cùng màu), không để lộ dải nền trang dưới chân trang. */
@media (max-width:767px){body{padding-bottom:0}.sb-footer{padding-bottom:72px}}
/* Mobile: 5 cột thanh đáy co theo màn hẹp (320px) thay vì giữ bề rộng tối thiểu của chữ, tránh đẩy mục cuối ra ngoài. */
@media (max-width:767px){.sb-bottomnav{grid-template-columns:repeat(5,minmax(0,1fr))}.sb-bottomnav a,.sb-bottomnav button{min-width:0;white-space:nowrap}}
/* Khối đăng ký nhận tin: con của lưới không được nở theo bề rộng tối thiểu của ô email + nút (tràn ngang ở 320px). */
.sb-newsletter>*{min-width:0}
/* Mobile, khung .sb-posts (trang chủ, bài liên quan, tìm kiếm): danh sách dạng hàng, số phút đọc nằm dưới tiêu đề thay vì cột hẹp bị ngắt mỗi chữ một dòng. */
@media (max-width:767px){.sb-posts .sb-post a{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:center}.sb-posts .sb-post .sb-media{grid-row:1/span 2}.sb-posts .sb-post__title{grid-column:2;grid-row:1;align-self:end}.sb-posts .sb-post__meta{grid-column:2;grid-row:2;align-self:start}}
/* Mobile: 4 cam kết trong một khung 2×2 có vạch ngăn, biểu tượng tròn nhỏ (thay 4 thẻ rời cao). */
@media (max-width:767px){.sb-usp{grid-template-columns:1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}.sb-usp li{min-width:0}.sb-usp li:nth-child(odd){border-right:1px solid var(--border)}.sb-usp li:nth-child(-n+2){border-bottom:1px solid var(--border)}.sb-usp a{flex-direction:row;align-items:flex-start;gap:8px;padding:12px 10px;border:0;border-radius:0;background:transparent;box-shadow:none}.sb-usp__icon{width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--primary)}.sb-usp__icon .sb-ic{width:16px;height:16px}.sb-usp strong{font-size:13px;line-height:1.3}.sb-usp small{font-size:11.5px;line-height:1.35}}
/* Mobile, khung .sb-posts: có vạch ngăn, ảnh có viền, tiêu đề tối đa 2 dòng. Lưới bài trang tin tức (.sb-post-grid) giữ bố cục riêng. */
@media (max-width:767px){.sb-posts{gap:0}.sb-posts .sb-post{border-bottom:1px solid var(--border);padding:12px 0}.sb-posts .sb-post:first-child{padding-top:0}.sb-posts .sb-post:last-child{border-bottom:0;padding-bottom:0}.sb-posts .sb-post a{grid-template-columns:88px minmax(0,1fr)}.sb-posts .sb-post .sb-media{width:88px;height:66px;border:1px solid var(--border)}.sb-posts .sb-post__title{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sb-posts .sb-post__meta{color:var(--text-2);font-weight:400}}
/* Mobile, trang chủ: bài đầu tiên là bài nổi bật ảnh lớn, các bài sau dạng danh sách. */
@media (max-width:767px){.sb-posts--home .sb-post:first-child{padding-bottom:14px}.sb-posts--home .sb-post:first-child a{display:flex;flex-direction:column;gap:8px}.sb-posts--home .sb-post:first-child .sb-media{width:100%;height:auto;aspect-ratio:16/9}.sb-posts--home .sb-post:first-child .sb-post__title{order:1;align-self:stretch;font-size:17px;-webkit-line-clamp:3}.sb-posts--home .sb-post:first-child .sb-post__meta{order:2;align-self:stretch}}
/* Màn hẹp (dưới 380px): biểu tượng và khoảng đệm nhỏ lại để tiêu đề cam kết vừa một dòng. */
@media (max-width:379px){.sb-usp a{padding:10px 8px;gap:6px}.sb-usp__icon{width:24px;height:24px}.sb-usp__icon .sb-ic{width:14px;height:14px}.sb-usp strong{font-size:12.5px}}
/* Mobile, tablet: "Xem tất cả" cùng dòng với tiêu đề khối bán chạy, hàng tab xuống dòng dưới (thay vì nút lẻ ở dòng thứ ba). */
@media (max-width:1023px){.sb-best .sb-section__head{align-items:center}.sb-best .sb-section__more{order:1;margin-left:auto}.sb-best .sb-tabs{order:2}}
/* Mobile: khung cuộn ngang có snap + lề trong 16px cần scroll-padding bằng lề, nếu không trình duyệt tự cuộn thẻ đầu sát mép trái ngay khi mở trang. */
@media (max-width:767px){.sb-promos,.woocommerce .sb-deal ul.products,.woocommerce ul.products.sb-hscroll{scroll-padding-inline:16px}}
/* Màn dưới 380px: bỏ biểu tượng phong bì trong ô email để chữ gợi ý không bị cắt cạnh nút Đăng ký. */
@media (max-width:379px){.sb-nl-field{padding-left:14px}.sb-nl-field>.sb-ic{display:none}}
/* Mobile: dải thông báo trên cùng luôn 1 dòng (chữ nhỏ lại ở màn hẹp, quá dài thì cắt bằng dấu …) thay vì vắt 2 dòng. */
@media (max-width:767px){.sb-topbar .sb-container>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
@media (max-width:399px){.sb-topbar{font-size:11.5px}}
/* Mobile: logo thanh toán (chân trang, khung tóm tắt giỏ hàng) xếp lưới 6 cột đều, mỗi logo tối đa 52px → luôn vừa một hàng. */
@media (max-width:767px){.sb-footer .sb-pays,.cart_totals .sb-pays{display:grid;grid-template-columns:repeat(6,minmax(0,52px));gap:6px}.sb-footer .sb-pay,.cart_totals .sb-pay{width:100%;height:auto;aspect-ratio:52/33}}
/* Link "xem tất cả" dài (bài viết, thương hiệu) rút gọn trên mobile để nằm cùng dòng tiêu đề khối. */
.sb-more-short{display:none}
@media (max-width:767px){.sb-more-full{display:none}.sb-more-short{display:inline}}
/* Mobile: đầu khối không có tab giữ link "xem tất cả" cùng dòng; tiêu đề quá dài thì tự xuống dòng thay vì đẩy link xuống. */
@media (max-width:767px){.sb-section__head:not(:has(.sb-tabs)){flex-wrap:nowrap;align-items:center}.sb-section__head:not(:has(.sb-tabs)) .sb-section__title{min-width:0}.sb-section__head:not(:has(.sb-tabs)) .sb-section__more{flex:none}}
@media (max-width:379px){.sb-section__title{font-size:18px}}
/* Ô chọn tự vẽ (theme.js ddBuild): <select> gốc ẩn bên dưới, nút mang class sb-select nên giữ nguyên kiểu ô đóng theo thiết kế. */
.sb-dd{position:relative}
.sb-sort .sb-dd{display:inline-block}
@media (max-width:767px){.sb-sort .sb-dd{display:block;width:100%}}
.sb-dd__native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.sb-dd__btn{display:flex;align-items:center;text-align:left;font-family:inherit}
.sb-dd__value{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-dd__btn.is-placeholder .sb-dd__value{color:var(--placeholder)}
.sb-dd__btn[aria-expanded="true"]{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint)}
.sb-dd__btn:disabled{cursor:not-allowed;opacity:.6}
.sb-dd__panel{position:absolute;z-index:90;left:0;right:0;top:calc(100% + 6px);min-width:200px;display:flex;flex-direction:column;max-height:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);overflow:hidden}
.sb-dd__panel[hidden],.sb-dd__scrim[hidden],.sb-dd__search[hidden],.sb-dd__empty[hidden]{display:none}
.sb-dd.is-up .sb-dd__panel{top:auto;bottom:calc(100% + 6px)}
.sb-dd__head{display:none}
.sb-dd__search{flex:none;padding:8px;border-bottom:1px solid var(--border)}
.sb-dd__search input{width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;font-size:14px;outline:0}
.sb-dd__search input:focus{border-color:var(--primary)}
.sb-dd__list{position:relative;flex:1;min-height:0;margin:0;padding:6px;list-style:none;overflow-y:auto;overscroll-behavior:contain}
.sb-dd__list li{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;border-radius:var(--r-sm);color:var(--text);font-size:14px;line-height:1.35;cursor:pointer}
.sb-dd__list li.is-active{background:var(--tint)}
.sb-dd__list li[aria-selected="true"]{color:var(--primary);font-weight:600}
.sb-dd__list li .sb-ic{margin-left:auto}
.sb-dd__list li[aria-disabled]{opacity:.45;cursor:default}
.sb-dd__empty{margin:0;padding:16px;text-align:center;color:var(--text-2);font-size:14px}
/* Mobile: khung trượt từ đáy (gắn ra body lúc mở), nền mờ phía sau; tầng 239/240 trên ngăn kéo và hộp thoại. */
.sb-dd__scrim{position:fixed;inset:0;z-index:239;background:rgba(0,0,0,.45)}
.sb-dd__panel.is-sheet{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:240;max-height:min(80dvh,560px);border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom)}
.sb-dd__panel.is-sheet .sb-dd__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 8px 16px;font-size:16px}
.sb-dd__close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer}
.sb-dd__close .sb-ic{color:var(--text)}
.sb-dd__panel.is-sheet .sb-dd__search{padding:0 16px 10px;border-bottom:1px solid var(--border)}
.sb-dd__panel.is-sheet .sb-dd__search input{height:44px;font-size:16px}
.sb-dd__panel.is-sheet .sb-dd__list{padding:6px 8px}
.sb-dd__panel.is-sheet .sb-dd__list li{min-height:48px;font-size:15px}
html.sb-dd-lock{overflow:hidden}
/* Thanh toán: WooCommerce chèn khung lỗi vào đầu form (form là lưới 2 cột) → khung phải trải hết các cột, nếu không nó chiếm cột trái và đẩy ô nhập sang phải. */
form.checkout>.woocommerce-NoticeGroup{grid-column:1/-1}
/* Khung lỗi: chữ màu chữ thường (link dẫn tới ô sai không tô màu thương hiệu), dòng bị ẩn vì đã có lỗi dưới ô thì ẩn hẳn. */
.sb-notice--err a{color:var(--text);text-decoration:none}
.sb-notice--err a:hover{text-decoration:underline}
.sb-notice li[hidden]{display:none}
/* Lỗi mã giảm giá nằm ngay dưới ô mã; form liên hệ cuộn tới đúng chỗ sau khi gửi (chừa header dính). */
.sb-coupon__notice{margin:-4px 0 16px}
#lien-he{scroll-margin-top:calc(var(--header-h,0px) + 16px)}
/* WooCommerce đặt focus vào khung thông báo (tabindex=-1) để trình đọc màn hình đọc ngay; khung không bấm được nên bỏ viền focus. */
.sb-notice[tabindex="-1"]:focus,.woocommerce-error[tabindex="-1"]:focus,.woocommerce-message[tabindex="-1"]:focus,.woocommerce-info[tabindex="-1"]:focus{outline:none}
/* Màn dưới 360px: cụm "− 1 +" (118px) không vừa cột số lượng → thành tiền xuống dòng dưới, canh trái. */
@media (max-width:359px){.sb-cart-item{grid-template-areas:"img info rm" "img qty qty" "img total total"}.sb-cart-item__total{text-align:left}}
/* Thanh mua cố định (mobile): chữ trên nút giữ 1 dòng — lề trong của thiết kế quá rộng nên "Thêm vào giỏ" vắt 2 dòng ở mọi cỡ điện thoại. */
@media (max-width:767px){.sb-paybar .sb-btn{padding:0 12px;gap:6px;white-space:nowrap}}
@media (max-width:379px){.sb-paybar{gap:8px}.sb-paybar .sb-btn{padding:0 8px;font-size:14px}}
/* Thanh bước (mobile): thiết kế ẩn chữ bước chưa tới bằng "li:not(.is-current) span" nên ẩn luôn dấu ✓ (cũng là span) trong vòng tròn bước đã xong. */
.sb-steps li:not(.is-current) b .sb-ic{display:inline-block}
/* Tùy chọn món trong giỏ trên mobile: cột chữ chỉ còn ~120px, chia 2 cột nhãn/giá trị thì giá trị còn ~50px (mỗi dòng một chữ).
   Cho chạy liền "Nhãn: giá trị" và tự xuống dòng. */
@media (max-width:767px){.sb-item-opts div{display:block}.sb-item-opts dt,.sb-item-opts dd{display:inline}.sb-item-opts dt::after{content:": "}}
/* Ô logo thương hiệu (thẻ nổi bật, đầu trang thương hiệu): logo thường là dạng ngang, tên chữ viết hoa cũng dài; ô vuông của thiết kế
   bóp logo còn ~43×16px hoặc làm chữ tràn sang tên bên cạnh → ô giãn ngang theo nội dung, logo ảnh giữ chiều cao cố định. */
.sb-bfeat .sb-blogo{width:auto;min-width:56px;max-width:60%;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-bfeat .sb-blogo img{max-width:100%;max-height:none;width:auto;height:26px}
.sb-brand-hero{grid-template-columns:auto minmax(0,1fr) auto}
.sb-brand-hero .sb-blogo{width:auto;min-width:112px;padding:0 16px;white-space:nowrap}
.sb-brand-hero .sb-blogo img{max-width:none;max-height:none;width:auto;height:44px}
@media (max-width:767px){.sb-brand-hero{grid-template-columns:auto minmax(0,1fr)}.sb-brand-hero .sb-blogo{min-width:72px;padding:0 10px}.sb-brand-hero .sb-blogo img{height:28px}}
/* Cột widget trang tin: cột lưới co theo màn hình thay vì giãn theo widget rộng nhất (tràn ngang ở 320px). */
@media (max-width:1023px){.sb-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.sb-widgets{grid-template-columns:minmax(0,1fr)}}
/* Bảng trong trang chính sách trên mobile: giữ bề rộng tối thiểu và cuộn ngang trong khung, không ép mỗi ô còn một chữ. */
@media (max-width:767px){.sb-table-wrap table{min-width:520px}}
/* Ô liên hệ: hai cột luôn bằng nhau; email dài được ngắt dòng thay vì giãn cột phải và ép cột trái (màn 320px). */
.sb-contact-ways{grid-template-columns:repeat(2,minmax(0,1fr))}
.sb-way strong{overflow-wrap:anywhere}
/* Ô danh mục tròn dưới 360px: 4 cột chỉ còn ~63px, tên như "Kem chống nắng" bị chia mỗi dòng một chữ → 3 cột. */
@media (max-width:359px){.sb-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Slide và ô quảng cáo có ảnh: ảnh phủ kín khung, chữ nằm đè lên vùng trống bên trái ảnh; lớp phủ màu nền nhạt dần từ trái
   giữ chữ đọc được dù ảnh thay đổi. Chưa có ảnh thì giữ bố cục chia đôi của thiết kế (không để nền sọc sau chữ). */
.sb-slide:has(>.sb-slide__media.has-img){position:relative;grid-template-columns:minmax(0,1fr)}
.sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__media{position:absolute;inset:0;z-index:0;padding:0}
.sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__media>img{object-position:100% 60%}
.sb-slide:has(>.sb-slide__media.has-img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(160deg,color-mix(in srgb,var(--secondary) 80%,transparent) 0%,color-mix(in srgb,var(--secondary) 45%,transparent) 36%,transparent 62%)}
.sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{position:relative;z-index:2;align-self:start;max-width:min(62%,520px);padding-top:44px}
.sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:40px}
.sb-slide:has(>.sb-slide__media.has-img) .sb-slide__text{max-width:74%}
@media (max-width:1365px){.sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:36px}}
@media (max-width:1023px){.sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:32px}}
.sb-promo:has(>.sb-media.has-img){position:relative;grid-template-columns:minmax(0,1fr)}
.sb-promo:has(>.sb-media.has-img)>.sb-media{position:absolute;inset:0;z-index:0;padding:0}
.sb-promo:has(>.sb-media.has-img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,color-mix(in srgb,var(--secondary) 78%,transparent) 0%,color-mix(in srgb,var(--secondary) 40%,transparent) 38%,transparent 62%)}
.sb-promo:has(>.sb-media.has-img)>.sb-media>img{object-position:100% 100%}
.sb-promo:has(>.sb-media.has-img)>.sb-promo__body{position:relative;z-index:2;justify-content:flex-start;max-width:60%}
@media (max-width:767px){
 .sb-slide:has(>.sb-slide__media.has-img){min-height:0;aspect-ratio:5/4}
 .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__media{aspect-ratio:auto}
 .sb-slide:has(>.sb-slide__media.has-img)::before{background:linear-gradient(170deg,color-mix(in srgb,var(--secondary) 88%,transparent) 0%,color-mix(in srgb,var(--secondary) 55%,transparent) 34%,transparent 58%)}
 .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{max-width:76%;align-self:start;padding:14px 12px 40px 16px;gap:6px}
 .sb-slide:has(>.sb-slide__media.has-img) .sb-tag{position:static}
 .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:20px;line-height:1.2}
 .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__text{display:none}
 .sb-slide:has(>.sb-slide__media.has-img) .sb-btn{width:auto;height:40px;padding:0 16px;font-size:14px}
 .sb-promo:has(>.sb-media.has-img){position:static;grid-template-columns:72px 1fr}
 .sb-promo:has(>.sb-media.has-img)::before{display:none}
 .sb-promo:has(>.sb-media.has-img)>.sb-media{position:relative;inset:auto}
 .sb-promo:has(>.sb-media.has-img)>.sb-media>img{object-position:88% 82%;transform:scale(1.9);transform-origin:88% 82%}
 .sb-promo:has(>.sb-media.has-img)>.sb-promo__body{max-width:none;justify-content:center}
}
/* Màn dưới 360px: khung 5:4 không đủ cao cho nhãn + tiêu đề 3 dòng + nút → khung vuông. */
@media (max-width:359px){.sb-slide:has(>.sb-slide__media.has-img){aspect-ratio:1/1}.sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{max-width:86%;padding:12px 10px 36px 14px}}
/* Thanh menu 1024–1279px: 6 mục + dòng ghi chú giao hàng vượt bề rộng (tràn ngang ~110px); thiết kế đã ẩn ghi chú dưới 1024px. */
@media (max-width:1279px){.sb-nav__note{display:none}}
/* Các slide chồng chung một ô lưới: slide không ảnh (khung 4:3 trên mobile) lấy chiều cao của slide có ảnh rồi suy ra bề rộng
   theo tỉ lệ, kéo cả khung slider rộng hơn màn hình. Cột lưới giới hạn theo bề rộng khung. */
.sb-slider__track{grid-template-columns:minmax(0,1fr)}
/* Banner chiến dịch có ảnh: ảnh phủ kín khung, chữ đè lên vùng trống bên trái. Mobile giữ ảnh trên – chữ dưới của thiết kế:
   khối này có mô tả + 2 nút, đè lên ảnh ở màn hẹp sẽ che gần hết ảnh. */
.sb-campaign:has(>.sb-media.has-img){position:relative;grid-template-columns:minmax(0,1fr)}
.sb-campaign:has(>.sb-media.has-img)>.sb-media{position:absolute;inset:0;z-index:0;padding:0}
.sb-campaign:has(>.sb-media.has-img)>.sb-media>img{object-position:100% 55%}
.sb-campaign:has(>.sb-media.has-img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--secondary) 86%,transparent) 0%,color-mix(in srgb,var(--secondary) 55%,transparent) 42%,transparent 68%)}
.sb-campaign:has(>.sb-media.has-img)>.sb-campaign__body{position:relative;z-index:2;max-width:min(62%,640px)}
@media (max-width:767px){.sb-campaign:has(>.sb-media.has-img){position:static}.sb-campaign:has(>.sb-media.has-img)::before{display:none}.sb-campaign:has(>.sb-media.has-img)>.sb-media{position:relative;inset:auto}.sb-campaign:has(>.sb-media.has-img)>.sb-campaign__body{max-width:none}}
/* Báo lỗi form: icon cảnh báo (dấu !) thay cho icon thông tin (chữ i) để khung lỗi không trông như thông báo thường. */
.sb-ic--alert{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018zM12%207.5v5.5M12%2016.5h.01%27%2F%3E%3C%2Fsvg%3E")}
/* Lỗi dưới từng ô (theme.js fvSet) và lỗi dưới ô của trang thanh toán (WooCommerce) dùng chung một kiểu. */
.sb-field-err,.sb-field .checkout-inline-error-message{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:13px;line-height:1.45;color:var(--error)}
.sb-field-err .sb-ic{margin-top:2px}
.sb-field .checkout-inline-error-message::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018zM12%207.5v5.5M12%2016.5h.01%27%2F%3E%3C%2Fsvg%3E")}
.sb-input[aria-invalid="true"],.sb-select[aria-invalid="true"],.sb-textarea[aria-invalid="true"],.sb-dd:has(>.sb-dd__native[aria-invalid="true"]) .sb-dd__btn{border-color:var(--error)}
.sb-input[aria-invalid="true"]:focus,.sb-textarea[aria-invalid="true"]:focus,.sb-dd:has(>.sb-dd__native[aria-invalid="true"]) .sb-dd__btn:focus{border-color:var(--error);box-shadow:0 0 0 3px #FDECEA}
.sb-check input[aria-invalid="true"]{outline:2px solid var(--error);outline-offset:1px}
.sb-check+.sb-field-err{margin-top:-6px}
.sb-coupon+.sb-field-err{margin:-2px 0 10px}
/* Ô nhận tin nằm trên nền màu đậm: lỗi ghi vào dòng gợi ý (chữ trắng), viền ô đổi màu sáng để vẫn thấy trên nền đậm. */
.sb-nl-field:has(input[aria-invalid="true"]){border-color:#FFB4A9}
.sb-nl-hint.is-err{color:#fff;font-weight:600}
/* Lỗi chung (không gắn ô nào) được theme.js dời vào đầu form đang dùng. */
.sb-notice--inform{margin:0 0 16px}.sb-auth__main form>.sb-notice--inform,.sb-auth-card form>.sb-notice--inform{margin:0}
/* Đăng nhập / đăng ký: thẻ thành viên vẽ bằng CSS thay cho ảnh ở cột giới thiệu. Màu theo token của ngành;
   tấm thẻ mờ xoay nghiêng phía sau tạo chiều sâu. Cột giới thiệu 768–1023px không có chỗ (thiết kế cũng ẩn ảnh ở đó). */
.sb-member{flex:1;display:grid;place-items:center;min-height:240px;margin-top:8px;position:relative}
.sb-member::before{content:"";position:absolute;width:min(100%,360px);aspect-ratio:1.586;border-radius:18px;background:rgba(255,255,255,.14);transform:rotate(-7deg) translate(-14px,8px)}
.sb-member-card{position:relative;width:min(100%,360px);aspect-ratio:1.586;display:flex;flex-direction:column;justify-content:space-between;padding:20px 22px;border-radius:18px;background:var(--surface);color:var(--text);box-shadow:0 18px 40px rgba(0,0,0,.25);overflow:hidden;transform:rotate(2deg)}
.sb-member-card::before{content:"";position:absolute;top:-70px;right:-60px;width:210px;height:210px;border-radius:50%;background:var(--tint)}
.sb-member-card::after{content:"";position:absolute;bottom:-50px;right:40px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.sb-member-card>*{position:relative;z-index:1}
.sb-member-card__top{display:flex;align-items:center;gap:10px;font:700 15px/1.2 var(--font-ui);color:var(--primary)}
.sb-member-card__top .sb-branding__mark{width:34px;height:34px;font-size:18px;border-radius:var(--r-sm)}
.sb-member-card__top b{min-width:0;overflow-wrap:anywhere}
.sb-member-card__tag{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--primary);color:var(--on-primary);font:600 11px/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.sb-member-card__perk{display:flex;flex-direction:column;gap:4px;max-width:85%}
.sb-member-card__perk small{font-size:12px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}
.sb-member-card__perk b{font:700 18px/1.3 var(--font-display);color:var(--primary-hover)}
.sb-member-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sb-member-card__foot>span:first-child{display:flex;flex-direction:column;gap:2px}
.sb-member-card__no{font:600 15px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--text)}
.sb-member-card__foot small{font-size:12px;color:var(--text-2)}
.sb-member-card__icons{display:flex;gap:6px}
.sb-member-card__icons .sb-ic{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--tint);color:var(--primary);-webkit-mask:none;mask:none;position:relative}
.sb-member-card__icons .sb-ic::before{content:"";position:absolute;inset:6px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
@media (max-width:1023px){.sb-member{display:none}}

/* ===== Điện máy: phần WordPress thêm vào thiết kế ===== */
/* Cửa hàng không có hàng (thiết kế chỉ có "còn" và "còn ít"). */
.sb-stockdot--out{color:var(--text-2);font-weight:500}
.sb-storelist li[hidden]{display:none}
.sb-cmpbar__item .sb-thumb{overflow:hidden;border-radius:var(--r-sm);background:var(--secondary)}
.sb-cmpbar__item .sb-thumb img{width:100%;height:100%;object-fit:cover}
/* Thanh so sánh dính đáy che phần cuối trang: chừa chỗ bằng chiều cao thanh. */
html.sb-has-cmpbar body{padding-bottom:72px}
@media (max-width:767px){html.sb-has-cmpbar body{padding-bottom:60px}}
/* Kết quả tìm sản phẩm để thêm vào bảng so sánh. */
.sb-cmp-addbox{position:relative}
.sb-cmp-results{position:absolute;left:10px;right:10px;top:calc(100% - 64px);z-index:5;margin:0;padding:4px;list-style:none;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.12));text-align:left}
.sb-cmp-results[hidden]{display:none}
.sb-cmp-results button{display:flex;flex-direction:column;gap:2px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r-sm);background:none;font:inherit;font-size:13px;line-height:1.35;color:var(--text);text-align:left;cursor:pointer}
.sb-cmp-results button:hover,.sb-cmp-results button:focus-visible{background:var(--tint)}
.sb-cmp-results small{color:var(--sale);font-weight:600}
.sb-cmp-results__none{padding:10px;font-size:13px;color:var(--text-2)}
.sb-cmp-table .sb-media.has-img img{width:100%;height:100%;object-fit:contain}
/* Sản phẩm một ảnh: khung ảnh chỉ có 1 cột, nút So sánh/Yêu thích nằm dưới ảnh (thiết kế đặt nó ở cột 2 cạnh dải ảnh nhỏ). */
.sb-gallery--single .sb-gallery__actions{grid-column:1/-1}
/* Kích thước tivi: 4 ô một hàng như thiết kế (lưới 2 cột chỉ dành cho ô có mô tả dài của ngành bánh/hoa). */
.preset-dienmay .sb-swatches--grid.sb-swatches--grid-2{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Bảng so sánh: overflow-y:hidden của thiết kế làm khung bảng thành vùng cuộn riêng, hàng sản phẩm dính theo khung
   (lệch xuống đúng chiều cao header, đè lên các dòng đầu) thay vì dính theo màn hình. */
@media (min-width:1024px){.sb-cmp-wrap{overflow:visible}}
/* Nút bỏ sản phẩm là thẻ <a> nên dính luật ".sb-cmp-prodin>a" (flex + đệm phải) của link tên sản phẩm. */
.sb-cmp-prodin>a.sb-cmp-rm{display:grid;place-items:center;gap:0;padding:0;color:var(--text-2)}
/* Trang trả góp sau khi gửi: thông báo ở đầu trang cho mobile (cột tóm tắt bị ẩn dưới 768px); máy tính dùng khối trong cột tóm tắt. */
.sb-ig-done--top{margin-top:16px}
@media (min-width:768px){.sb-ig-done--top{display:none}}
/* Màn 320px: "Trả góp 0%" + "Góp từ 13.490.000đ/tháng" không vừa một dòng (thiết kế ép nowrap) → cho xuống dòng. */
@media (max-width:359px){.sb-installment__head{flex-wrap:wrap}}
/* Header gọn khi cuộn (theme.js thêm .is-compact khi header đang dính): chỉ còn hàng logo + tìm kiếm + giỏ. */
.sb-header.is-compact .sb-nav{display:none}
/* Nút So sánh / Yêu thích nổi ở góc phải trên của ảnh lớn trang sản phẩm. */
.sb-gallery__main{position:relative}
.sb-gallery__tools{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;gap:8px}
.sb-gallery__tool{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.94);color:var(--text);box-shadow:0 2px 8px rgba(18,28,43,.08);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sb-gallery__tool:hover{border-color:var(--primary);color:var(--primary)}
.sb-gallery__tool:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sb-gallery__tool[data-cmp-toggle][aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary,#fff)}
.sb-gallery__tool[data-fav][aria-pressed="true"]{border-color:var(--sale);color:var(--sale)}
.sb-gallery__tool .sb-gallery__on,.sb-gallery__tool[aria-pressed="true"] .sb-gallery__off{display:none}
.sb-gallery__tool[aria-pressed="true"] .sb-gallery__on{display:inline-block}
/* Dòng nhắc dưới ảnh chỉ chiếm chỗ khi có nội dung. */
.sb-gallery__actions:not(:has(> :not([hidden]))){display:none}
.sb-gallery__actions .sb-link-btn{margin-left:6px}
/* Lời nhắn của thanh so sánh (khác loại, đã đủ). */
.sb-cmpbar__msg{flex:1 1 100%;font-size:13px;color:var(--warning,#9a5b00)}
.sb-cmpbar__msg[hidden]{display:none}
.sb-cmpbar .sb-container:has(.sb-cmpbar__msg:not([hidden])){flex-wrap:wrap;padding-block:8px}
@media (max-width:767px){.sb-cmpbar__msg{order:-1}}
/* Điện thoại so sánh tối đa 2 sản phẩm: đủ 2 thì ẩn cột "Thêm sản phẩm". */
@media (max-width:767px){.sb-cmp-table:is([data-count="2"],[data-count="3"],[data-count="4"]) :is(.sb-cmp-add,td.is-empty){display:none}}
/* Banner ảnh tràn khung: khối chữ (z-index 2) phủ lên chấm chuyển slide → đưa chấm lên trên. */
.sb-slider__dots{z-index:3}
/* Bong bóng kết quả sau khi bấm chia sẻ / sao chép link (chữ lấy từ data-flash): cột chia sẻ nằm bên phải bài nên mở sang trái; màn hẹp hàng nút nằm ngang nên mở lên trên, căn giữa nút. */
.sb-share :is(a,button){position:relative}
.sb-share [data-flash]::after{content:attr(data-flash);position:absolute;z-index:5;right:calc(100% + 8px);top:50%;transform:translateY(-50%);width:max-content;max-width:220px;padding:6px 10px;border-radius:8px;background:var(--text);color:var(--surface);font-size:12px;line-height:1.4;text-align:left;pointer-events:none}
@media (max-width:1023px){.sb-share [data-flash]::after{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}}
/* Nút +/− đã chạm giới hạn số lượng. */
.sb-qty button:disabled{opacity:.35;cursor:not-allowed;background:transparent}
/* Bài SEO cuối trang danh mục / thương hiệu: thu gọn còn ~320px, mờ dần ở mép dưới. */
.sb-seo{margin:40px 0 0;padding:28px 32px 20px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.sb-seo__body{position:relative;max-width:none}
.sb-seo.is-collapsed .sb-seo__body{max-height:320px;overflow:hidden}
.sb-seo.is-collapsed .sb-seo__body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none}
.sb-seo__toggle{display:flex;align-items:center;gap:6px;margin:12px auto 0;min-height:44px;padding:0 20px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--primary);font:600 14px/1 var(--font-ui);cursor:pointer}
.sb-seo__toggle[hidden]{display:none}
.sb-seo__toggle:hover{border-color:var(--primary)}
.sb-seo__toggle[aria-expanded="true"] .sb-ic{transform:rotate(180deg)}
@media (max-width:767px){.sb-seo{margin-top:28px;padding:20px 16px 16px}.sb-seo.is-collapsed .sb-seo__body{max-height:260px}}
/* Bộ lọc thương hiệu dạng logo. */
.sb-fchip--logo>span{min-height:48px;padding:6px 10px}
.sb-fchip--logo img{display:block;width:auto;max-width:100%;height:auto;max-height:28px;object-fit:contain}
/* Hộp báo thêm giỏ ở trang sản phẩm (theme.js tạo): góc phải dưới header trên máy tính, ngay trên thanh mua trên điện thoại. */
.sb-toast{position:fixed;z-index:230;top:calc(var(--header-h) + 16px);right:24px;display:flex;align-items:center;gap:12px;width:min(420px,calc(100vw - 32px));padding:12px 44px 12px 12px;border:1px solid var(--border);border-left:4px solid var(--success);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-md);animation:sb-toast-in .2s ease-out}
.sb-toast--err{border-left-color:var(--error)}
.sb-toast.is-out{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.sb-toast__img{flex:none;width:56px;height:56px;border-radius:var(--r-sm);object-fit:contain;background:var(--bg)}
.sb-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.4}
.sb-toast__body strong{color:var(--text)}
.sb-toast--err .sb-toast__body strong{color:var(--error)}
.sb-toast__body span{color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-toast .sb-btn{flex:none;white-space:nowrap}
.sb-toast__close{position:absolute;top:4px;right:4px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:22px;line-height:1;cursor:pointer}
.sb-toast__close:hover{background:var(--secondary);color:var(--text)}
@keyframes sb-toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:1023px){.sb-toast{top:auto;right:16px;left:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:auto}@keyframes sb-toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
@media (prefers-reduced-motion:reduce){.sb-toast{animation:none}}
/* Ảnh đại diện người đánh giá. */
.sb-avatar--img{overflow:hidden;background:var(--secondary)}
.sb-avatar--img img{display:block;width:100%;height:100%;object-fit:cover}
/* Sản phẩm gợi ý trong bài viết: cột nội dung chỉ ~720px, 5 thẻ/hàng làm giá bị cắt → 3 thẻ/hàng, vuốt xem thêm. */
@media (min-width:768px){.sb-prose ul.products.sb-hscroll li.product{flex-basis:calc((100% - 32px)/3)}}
/* Bài viết liên quan chỉ có 3 bài: chia đều 3 cột thay vì để trống cột thứ tư. */
@media (min-width:1024px){.sb-posts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Bảng thông số (tab Đặc điểm nổi bật / Thông số kỹ thuật): sọc xen kẽ thay cho cột nhãn tô nền và kẻ từng dòng. */
.sb-specs th,.sb-specs td{padding:12px 16px;border-bottom:0;line-height:1.5}
.sb-specs th{width:40%;background:none;font-weight:400;color:var(--text-2)}
.sb-specs td{font-weight:500;color:var(--text)}
.sb-specs tbody tr:nth-child(even){background:var(--bg)}
.sb-specs caption{padding:16px 16px 12px;font-size:16px;font-weight:700;border-bottom:1px solid var(--border)}
.sb-specs-groups .sb-specs+.sb-specs{border-top:0}
.sb-specs-groups caption{padding:12px 16px;border-bottom:0;background:var(--tint);color:var(--primary);font-size:14px}
.sb-pdp-detail--single>.sb-card{max-width:820px}
@media (max-width:767px){.sb-specs th,.sb-specs td{padding:10px 12px}.sb-specs th{width:44%}}
/* Trang so sánh: đầu bảng không dính nữa (cao ~260px che màn hình); thanh mỏng tên + giá thay thế khi cuộn (appliances.js). */
.sb-cmp-table thead th{position:static}
.sb-cmp-mini{position:sticky;top:var(--header-h,0px);z-index:4;height:0}
.admin-bar .sb-cmp-mini{top:calc(var(--header-h,0px) + 32px)}
.sb-cmp-mini__in{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:200px repeat(var(--n,4),minmax(0,1fr));border-bottom:2px solid var(--border);background:var(--surface);box-shadow:0 6px 12px -8px rgba(15,23,42,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s}
.sb-cmp-mini.is-on .sb-cmp-mini__in{opacity:1;visibility:visible;transform:none}
.sb-cmp-mini__in[data-cols="2"]{--n:1}.sb-cmp-mini__in[data-cols="3"]{--n:2}.sb-cmp-mini__in[data-cols="4"]{--n:3}.sb-cmp-mini__in[data-cols="5"]{--n:4}
.sb-cmp-mini__item{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 14px;color:var(--text);text-decoration:none}
.sb-cmp-mini__item b{font-size:13px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-cmp-mini__item span{font-size:14px;font-weight:700;color:var(--sale)}
@media (prefers-reduced-motion:reduce){.sb-cmp-mini__in{transition:none}}
@media (min-width:1024px){.sb-cmp-prod .sb-media{max-width:120px}}
@media (max-width:1023px){.sb-cmp-mini{top:0}.sb-cmp-mini__in{grid-template-columns:132px repeat(var(--n,4),minmax(0,1fr))}}
/* Điện thoại, 1–2 sản phẩm: tên thông số thành dòng nhỏ phía trên, hai sản phẩm chia đôi màn hình, không cuộn ngang. */
@media (max-width:767px){
 .sb-cmp-wrap:has(.sb-cmp-table:is([data-count="1"],[data-count="2"])){overflow:visible}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]){display:block;min-width:0}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) :is(thead,tbody){display:block}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) .sb-cmp-corner{display:none}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) :is(th,td){width:auto}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) thead th+th{border-left:1px solid var(--border)}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) .sb-cmp-group th{grid-column:1/-1}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) tbody th[scope=row]{grid-column:1/-1;width:auto;padding:10px 12px 2px;border-bottom:0;font-size:12px}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) tbody td{padding:2px 12px 10px}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) tbody td+td{border-left:1px solid var(--border)}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) tr.is-diff>th[scope=row]{background:#FFF8E6}
 .sb-cmp-table:is([data-count="1"],[data-count="2"]) .sb-cmp-prod .sb-media{max-width:112px;margin-inline:auto}
 .sb-cmp-mini__in{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sb-cmp-mini__corner{display:none}
 .sb-cmp-mini__item+.sb-cmp-mini__item{border-left:1px solid var(--border)}
 .sb-cmp-wrap:not(:has(.sb-cmp-table:is([data-count="1"],[data-count="2"]))) .sb-cmp-mini{display:none}
}
/* Khung xổ của ô chọn sát mép phải: căn theo cạnh phải (theme.js thêm is-end khi tràn màn hình). */
.sb-dd.is-end .sb-dd__panel{left:auto;right:0}
/* Điện thoại: hộp báo hẹp, nút xuống hàng riêng để chữ không bị cắt. */
@media (max-width:767px){.sb-toast{flex-wrap:wrap;padding-right:12px}.sb-toast__body{flex:1 1 calc(100% - 68px);padding-right:32px}.sb-toast__body span{-webkit-line-clamp:3}.sb-toast .sb-btn{flex:1 1 100%;justify-content:center}}
/* Trang tin tức: bài nổi bật trong khung thẻ, các bài sau là danh sách ngang (ảnh trái, chữ phải). */
.sb-feature{padding:16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);margin-bottom:8px;transition:border-color .15s,box-shadow .15s}
.sb-feature:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.sb-feature .sb-media{border-radius:var(--r-md)}
.sb-feature>span{padding-right:12px}
.sb-feature .sb-post__info{display:block;margin-top:14px}
.sb-post-list{display:flex;flex-direction:column}
.sb-post-list .sb-post{border-bottom:1px solid var(--border)}
.sb-post-list .sb-post:last-child{border-bottom:0}
.sb-post-list .sb-post a{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center;padding:20px 0;color:var(--text)}
.sb-post-list .sb-post a:hover{color:var(--text)}
.sb-post-list .sb-post a:hover .sb-post__title{color:var(--primary)}
.sb-post-list .sb-post .sb-media{width:100%;aspect-ratio:16/10;border-radius:var(--r-md)}
.sb-post-list .sb-post a>span:not(.sb-media){display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-post-list .sb-post__title{font-size:18px;line-height:1.4;transition:color .15s}
.sb-post-list .sb-post__excerpt{font-size:14px;line-height:1.6}
.sb-post__info{font-size:13px;color:var(--text-2)}
@media (max-width:1023px){.sb-post-list .sb-post a{grid-template-columns:200px minmax(0,1fr);gap:18px}}
@media (max-width:767px){
 .sb-feature{padding:12px}.sb-feature>span{padding:0 4px 4px}
 .sb-post-list .sb-post a{grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0}
 .sb-post-list .sb-post .sb-media{height:84px;aspect-ratio:auto;padding:0}.sb-post-list .sb-post .sb-media::after{display:none}
 .sb-post-list .sb-post a>span:not(.sb-media){gap:4px}
 .sb-post-list .sb-post__meta{order:0}
 .sb-post-list .sb-post__title{font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .sb-post-list .sb-post__excerpt{display:none}
 .sb-post-list .sb-post__info{font-size:12px}
}
/* Ô chữ tác giả ở đầu bài: luật ".sb-byline span{display:flex}" đè cách căn giữa của .sb-avatar → chữ lệch trái. */
.sb-byline .sb-avatar{display:grid;place-items:center;justify-content:center;flex:none;font-size:12px;line-height:1}
/* Pickleball: slide và ô quảng cáo tràn khung đã có lớp phủ tối và bố cục chữ riêng (pages.css, .preset-pb). Kiểu "ảnh phủ kín"
   dùng chung ở trên thêm lớp phủ sáng và thu nhỏ chữ cho nền sáng → trả lại bố cục của ngành khi có ảnh. */
.preset-pb .sb-slide:has(>.sb-slide__media.has-img)::before,.preset-pb .sb-promo:has(>.sb-media.has-img)::before{content:none}
.preset-pb .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{align-self:auto;max-width:560px;padding:40px 24px 72px 48px}
.preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:46px}
.preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__text{max-width:none}
.preset-pb .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__media>img,.preset-pb .sb-promo:has(>.sb-media.has-img)>.sb-media>img{object-position:100% 50%}
.preset-pb .sb-promo:has(>.sb-media.has-img)>.sb-promo__body{max-width:none}
@media (max-width:1279px){.preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:36px}.preset-pb .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{max-width:480px;padding:32px 20px 64px 32px}}
@media (min-width:1280px){.preset-pb .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{padding:28px 24px 52px 44px}.preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:40px}}
/* Điện thoại: banner xếp nhãn → tiêu đề → mô tả (tối đa 2 dòng) → nút vừa chữ từ trên xuống, chấm ở đáy banner (đáy chừa 48px).
   Hai ô quảng cáo về kiểu thẻ sáng mặc định (ảnh nhỏ 72px trái, chữ phải); ảnh ô là ảnh ngang có món đồ ở 40% bên phải nên phóng
   vào phần đó. Nền tối + chữ trắng + lớp phủ của ô (pages.css) chỉ hợp kiểu ảnh phủ kín ở màn rộng. */
@media (max-width:767px){
 .preset-pb .sb-slide:has(>.sb-slide__media.has-img){aspect-ratio:auto;min-height:calc((100vw - 32px) * .75)}
 .preset-pb .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{max-width:none;align-self:stretch;justify-content:flex-start;padding:20px 16px 48px;gap:8px}
 .preset-pb .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body>*{flex-shrink:0}
 .preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__title{font-size:26px;line-height:1.1}
 .preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45}
 .preset-pb .sb-slide:has(>.sb-slide__media.has-img) .sb-btn{width:auto;height:40px;padding:0 18px;font-size:15px;margin-top:4px}
 .preset-pb .sb-slider__dots{bottom:0}
 .preset-pb .sb-promo,.preset-pb .sb-promo:has(>.sb-media.has-img){position:static;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;min-height:0;padding:12px;background:var(--secondary);border-color:var(--border);color:var(--text)}
 .preset-pb .sb-promo:hover{border-color:var(--primary);color:var(--text)}
 .preset-pb .sb-promo::after{content:none}
 .preset-pb .sb-promo .sb-media,.preset-pb .sb-promo:has(>.sb-media.has-img)>.sb-media{position:relative;inset:auto;order:-1;width:72px;height:72px;border-radius:var(--r-md);background-color:var(--tint)}
 .preset-pb .sb-promo:has(>.sb-media.has-img)>.sb-media>img{object-position:80% 50%;transform:scale(1.6);transform-origin:80% 50%}
 .preset-pb .sb-promo__body,.preset-pb .sb-promo:has(>.sb-media.has-img)>.sb-promo__body{position:static;width:auto;max-width:none;padding:0;gap:2px;justify-content:center}
 .preset-pb .sb-promo__title{font-size:16px;line-height:1.3;color:var(--primary-hover)}
 .preset-pb .sb-promo__text{color:var(--text-2)}
 .preset-pb .sb-promo .sb-btn{display:none}
}
/* Pickleball: thẻ bài viết của ngành (.preset-pb .sb-post có viền + nền, pages.css) trúng cả danh sách ngang ở trang tin tức, vốn
   ngăn bằng gạch dưới không khoảng cách → các khung dính nhau, ảnh sát mép, thẻ cuối mất viền dưới. Giữ kiểu thẻ như bài nổi bật,
   thêm khoảng cách và lề trong. */
.preset-pb .sb-feature{margin-bottom:12px}
.preset-pb .sb-post-list{gap:12px}
.preset-pb .sb-post-list .sb-post,.preset-pb .sb-post-list .sb-post:last-child{border:1px solid var(--border)}
.preset-pb .sb-post-list .sb-post:hover{border-color:var(--primary)}
.preset-pb .sb-post-list .sb-post a{padding:16px;height:auto}
.preset-pb .sb-post-list .sb-post .sb-media{border-radius:var(--r-md)}
.preset-pb .sb-post-list .sb-post__meta,.preset-pb .sb-post-list .sb-post__title{padding:0}
@media (max-width:767px){.preset-pb .sb-feature{margin-bottom:10px}.preset-pb .sb-post-list{gap:10px}.preset-pb .sb-post-list .sb-post a{padding:12px}}
/* Cùng lý do cho lưới bài viết (bài liên quan, bài trong kết quả tìm): điện thoại xếp dòng ngăn bằng gạch, gap 0. */
@media (max-width:767px){
 .preset-pb .sb-posts{gap:10px}
 .preset-pb .sb-posts .sb-post,.preset-pb .sb-posts .sb-post:first-child,.preset-pb .sb-posts .sb-post:last-child{padding:0;border:1px solid var(--border)}
 .preset-pb .sb-posts .sb-post:hover{border-color:var(--primary)}
}
/* Banner Pickleball luôn nền tối: chấm màu chữ phụ / xanh đậm của theme gần như không thấy. */
.preset-pb .sb-slider .sb-dot::before{background:#fff;opacity:.5}
.preset-pb .sb-slider .sb-dot[aria-current="true"]::before{background:var(--lime);opacity:1}
/* Yoga, Lều xông hơi dùng chung bố cục .preset-pb nhưng banner nền sáng: chấm trắng của Pickleball không thấy trên nền sáng. */
.preset-yg .sb-slider .sb-dot::before,.preset-lx .sb-slider .sb-dot::before{background:var(--primary);opacity:.3}
.preset-yg .sb-slider .sb-dot[aria-current="true"]::before,.preset-lx .sb-slider .sb-dot[aria-current="true"]::before{background:var(--primary);opacity:1}
/* Tab "So sánh độ dày & chất liệu": hai bảng xếp chồng trong một ô nội dung lấy từ danh mục. */
.preset-yg .sb-guide-stack,.preset-lx .sb-guide-stack{display:grid;gap:16px}
/* Tiêu đề Yoga dài hơn Pickleball: màn 320–375px banner cao theo chữ nên chấm chỉ cách nút 22px; nới đệm đáy cho đủ 24px. */
@media (max-width:767px){.preset-yg .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body,.preset-lx .sb-slide:has(>.sb-slide__media.has-img)>.sb-slide__body{padding-bottom:56px}}
/* Thảm có 3 độ dày: kiểu "4mm · 279.000đ" một dòng của Pickleball (flex-wrap) rớt ô thứ 3 xuống hàng; thiết kế Yoga 3 ô một hàng, giá dưới độ dày. */
.preset-yg .sb-summary .sb-swatches--grid,.preset-lx .sb-summary .sb-swatches--grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.preset-yg .sb-summary .sb-swatches--grid.sb-swatches--grid-2,.preset-lx .sb-summary .sb-swatches--grid.sb-swatches--grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.preset-yg .sb-summary .sb-swatches--grid .sb-swatch--stack,.preset-lx .sb-summary .sb-swatches--grid .sb-swatch--stack{max-width:none;flex-direction:column;align-items:center;text-align:center;padding:8px 6px}
.preset-yg .sb-summary .sb-swatches--grid .sb-swatch__price::before,.preset-lx .sb-summary .sb-swatches--grid .sb-swatch__price::before{content:none}
/* Hàng banner cao theo menu danh mục bên trái (14 mục, 2 mục xuống dòng → 526px, banner gần vuông). Dòng menu thấp hơn,
   mỗi mục một dòng: hàng còn 436px, banner và hai ô quảng cáo thành hình chữ nhật. */
@media (min-width:1280px){.preset-yg .sb-catmenu a,.preset-lx .sb-catmenu a{min-height:28px;white-space:nowrap;gap:10px;padding:0 8px;font-size:13.5px}.preset-yg .sb-catmenu .sb-thumb,.preset-lx .sb-catmenu .sb-thumb{width:22px;height:22px}}
/* Điện thoại: chữ banner nằm phía trên, nhưng lớp phủ sáng của gói đi từ đáy lên tới 85% chiều cao nên che gần hết ảnh.
   Phủ từ trái sang, nhạt dần, hết ở 80% bề ngang; chữ có viền sáng mờ cho chỗ dòng chữ dài chạm vào vật tối trong ảnh. */
@media (max-width:767px){.preset-yg .sb-slide::after{background:linear-gradient(90deg,rgba(250,247,253,.94) 0%,rgba(250,247,253,.84) 50%,rgba(250,247,253,0) 80%)}.preset-yg .sb-slide__title,.preset-yg .sb-slide__text{text-shadow:0 0 10px rgba(250,247,253,.95),0 0 3px rgba(250,247,253,.95)}}
/* Banner sáng của Yoga, Lều xông hơi giữ khung chữ 380px của thiết kế: luật max-width:none ở trên viết cho banner tối Pickleball làm dòng mô tả chạy dài đè lên vật trong ảnh. */
.preset-yg .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__text,.preset-lx .sb-slide:has(>.sb-slide__media.has-img) .sb-slide__text{max-width:380px}
@media (max-width:767px){.preset-lx .sb-slide::after{background:linear-gradient(90deg,rgba(255,249,245,.94) 0%,rgba(255,249,245,.84) 50%,rgba(255,249,245,0) 80%)}.preset-lx .sb-slide__title,.preset-lx .sb-slide__text{text-shadow:0 0 10px rgba(255,249,245,.95),0 0 3px rgba(255,249,245,.95)}}