/* Product layout A — approved responsive layout and cart actions. */
@media(max-width:720px){
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-page{width:calc(100% - 16px)!important;padding-top:4px!important;background:transparent!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-breadcrumb{min-height:32px!important;font-size:12px!important;line-height:18px!important;gap:7px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .brand-showcase{height:52px!important;padding:4px!important;border:0!important;background:transparent!important;overflow:auto!important;scrollbar-width:none!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .brand-showcase__track{animation:none!important;transform:none!important;width:max-content!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .brand-showcase__group{gap:6px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .brand-showcase button{width:84px!important;min-width:84px!important;flex:0 0 84px!important;height:44px!important;border:1px solid #dceaf5!important;border-radius:10px!important;background:#fff!important;padding:5px 7px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .brand-showcase img{max-width:70px!important;max-height:24px!important;object-fit:contain!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-layout{margin-top:10px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-results{padding:12px 8px!important;border:1px solid #e2edf6!important;border-radius:14px!important;background:#fff!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-results__head{display:grid!important;grid-template-columns:minmax(0,1fr) 52px!important;grid-template-areas:'title title' 'count count' 'sort filter'!important;gap:6px!important;align-items:center!important;margin:0 0 12px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-results__head>div:first-child{display:contents!important}
html:root:root:has(:is(.catalog-page,.product-detail)) #catalog-results-title{font-size:20px!important;line-height:26px!important;margin:0!important;font-weight:700!important}
html:root:root:has(:is(.catalog-page,.product-detail)) #result-range{font-size:13px!important;line-height:20px!important;margin:0!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-sort-scroll{grid-area:sort!important;min-width:0!important;display:flex!important;overflow-x:auto!important;gap:6px!important;padding:2px 0!important;margin:2px 0 0!important;scrollbar-width:none!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-sort-scroll button{flex:0 0 auto!important;min-height:40px!important;padding:0 10px!important;border-radius:10px!important;font-size:13px!important;line-height:18px!important;white-space:nowrap!important}
html:root:root:has(:is(.catalog-page,.product-detail)) #filter-open{grid-area:filter!important;position:static!important;width:52px!important;height:40px!important;min-height:40px!important;display:flex!important;justify-content:center!important;gap:3px!important;margin-top:2px!important;border-radius:10px!important;font-size:13px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) #filter-open::after{content:'Lọc'}
html:root:root:has(:is(.catalog-page,.product-detail)) #filter-open svg{width:16px!important;height:16px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-grid{gap:8px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card{border-radius:11px!important;border:1px solid #e1ebf5!important;box-shadow:none!important;background:#fff!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__image img{object-fit:contain!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-sidebar{height:min(70dvh,620px)!important;bottom:57px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-breadcrumb{width:calc(100% - 16px)!important;font-size:12px!important;line-height:18px!important;min-height:34px!important;gap:6px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-hero{width:calc(100% - 16px)!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:'heading' 'gallery' 'summary'!important;padding:10px!important;gap:10px!important;border:1px solid #e0ebf5!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-heading{padding:0!important}
html:root:root:has(:is(.catalog-page,.product-detail)) #product-title{font-size:20px!important;line-height:26px!important;font-weight:700!important;margin:0!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-summary__meta{font-size:13px!important;line-height:20px!important;margin-top:5px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-gallery{position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr) 48px!important;gap:7px!important;align-items:start!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-gallery__main{grid-column:1!important;grid-row:1!important;aspect-ratio:1/1!important;width:100%!important;height:auto!important;min-height:0!important;border:1px solid #e0ebf5!important;border-radius:10px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) #product-main-image{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;padding:5px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-gallery__thumbs{grid-column:2!important;grid-row:1!important;width:48px!important;max-height:280px!important;display:flex!important;flex-direction:column!important;gap:6px!important;padding:0!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-gallery__thumbs button{width:46px!important;height:46px!important;flex:0 0 46px!important;min-height:46px!important;padding:3px!important;border-radius:7px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-gallery__thumbs img{width:100%!important;height:100%!important;object-fit:contain!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-summary{display:flex!important;flex-direction:column!important;gap:10px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-price-card{padding:9px 11px!important;border:1px solid #cfe7fa!important;border-radius:10px!important;background:linear-gradient(120deg,#f4fbff,#eef9ff)!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-price-card__label{font-size:13px!important;line-height:18px!important;margin-bottom:3px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-price strong{font-size:24px!important;line-height:30px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-variations{margin:0!important;padding:0!important;min-width:0!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-variations legend{font-size:14px!important;line-height:20px!important;margin-bottom:6px!important;font-weight:600!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-variation-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-variation-options>button{min-width:0!important;width:100%!important;min-height:68px!important;height:auto!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;padding:6px 4px!important;border:1px solid #dce8f4!important;border-radius:8px!important;font-size:12px!important;line-height:17px!important;font-weight:500!important;background:#fff!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-variation-options>button[aria-pressed=true]{background:#eaf7ff!important;border-color:#008de3!important;box-shadow:inset 0 0 0 1px #008de3!important;color:#0054b9!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-variation-options>button small{font-size:12px!important;line-height:17px!important;margin-top:3px!important;font-weight:400!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .stw-woo-purchase--simple{display:block!important;border:0!important;padding:0!important;background:transparent!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-purchase{gap:8px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-purchase__top{gap:12px!important;align-items:end!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-purchase__top>div>span,html:root:root:has(:is(.catalog-page,.product-detail)) .product-subtotal span{font-size:13px!important;line-height:18px!important;margin-bottom:4px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .quantity-control{width:112px!important;height:40px!important;grid-template-columns:34px minmax(0,1fr) 34px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .quantity-control input{font-size:16px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-subtotal strong{font-size:20px!important;line-height:26px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-purchase__actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-buy{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;min-width:0!important;min-height:48px!important;padding:6px 8px!important;border-radius:9px!important;font-size:14px!important;line-height:20px!important;white-space:normal!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-buy--primary strong{font-size:14px!important;line-height:20px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-buy--primary span{font-size:11px!important;line-height:15px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-shipping-policy{font-size:12px!important;line-height:18px!important;margin:0!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-assurances{display:grid!important;grid-template-columns:1fr 1fr!important;border:1px solid #d8ecfa!important;border-radius:9px!important;background:#f1faff!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-assurances>a{min-width:0!important;padding:8px 6px!important;gap:5px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-assurances strong{font-size:12px!important;line-height:17px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-assurances small{font-size:11px!important;line-height:16px!important;white-space:normal!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .mobile-buy-bar__buy{background:linear-gradient(120deg,#0069d8,#009de6)!important;color:#fff!important;border-radius:11px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .mobile-buy-bar__buy span{color:#fff!important;font-size:13px!important;line-height:18px!important}
}

@media(max-width:720px){
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__body{grid-template-columns:minmax(0,1fr) 44px!important;grid-template-rows:34px minmax(44px,auto)!important;column-gap:4px!important;align-items:center!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card h2{grid-column:1/-1!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__price{grid-column:1!important;grid-row:2!important;min-width:0!important;flex-wrap:wrap!important;overflow:visible!important;gap:0 2px!important;align-content:center!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__cart{grid-column:2!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border:1px solid #c9e7fa!important;border-radius:50%!important;background:#f0faff!important;color:#0054b9!important;cursor:pointer!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__cart:focus-visible{outline:2px solid #0054b9!important;outline-offset:2px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-buy:has(.product-cart-icon){flex-direction:row!important;gap:7px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-cart-icon{display:inline-flex!important;flex:0 0 21px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-cart-notice{position:fixed;bottom:70px;left:12px;right:12px;z-index:99999;padding:10px;border-radius:8px;background:#083c69;color:white;font:13px/20px Arial;text-align:center}
}

@media(min-width:721px){
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__body{grid-template-columns:minmax(0,1fr) 44px!important;grid-template-rows:34px minmax(44px,auto)!important;column-gap:4px!important;align-items:center!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card h2{grid-column:1/-1!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__price{grid-column:1!important;grid-row:2!important;min-width:0!important;flex-wrap:wrap!important;overflow:visible!important;gap:0 2px!important;align-content:center!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__cart{grid-column:2!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border:1px solid #c9e7fa!important;border-radius:50%!important;background:#f0faff!important;color:#0054b9!important;cursor:pointer!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__cart:focus-visible{outline:2px solid #0054b9!important;outline-offset:2px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-buy:has(.product-cart-icon){flex-direction:row!important;gap:7px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .product-cart-icon{display:inline-flex!important;flex:0 0 21px!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-cart-notice{position:fixed;bottom:70px;left:12px;right:12px;z-index:99999;padding:10px;border-radius:8px;background:#083c69;color:white;font:13px/20px Arial;text-align:center}
}

html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-cart-notice a{color:inherit;text-decoration:underline;font-weight:600}

/* Cart feedback stays on the clicked control; the live status is for assistive technology. */
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-card__cart.is-added{background:#0054b9!important;color:#fff!important;border-color:#0054b9!important}
html:root:root:has(:is(.catalog-page,.product-detail)) .catalog-cart-notice{position:absolute!important;inset:auto!important;left:0!important;top:0!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}