/* ===== HUI VARIANT UI: desktop kieu Shopee, mobile kieu TikTok Shop ===== */
.hui-vx .swatch{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 0 16px!important;padding:0!important}
.hui-vx .swatch .header{flex:0 0 96px;padding-top:11px;margin:0!important;font-size:14px;color:#757575;font-weight:400}
.hui-vx .swatch .header .value-roperties{display:none}
.hui-vx .swatch .hui-opts{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.hui-vx .swatch>:not(.header):not(.hui-opts){flex-basis:100%;padding-left:96px;margin-top:8px}
.hui-vx .swatch-element{margin:0!important;float:none!important;position:relative;width:auto!important;height:auto!important}
.hui-vx .swatch-element input{position:absolute!important;opacity:0!important;pointer-events:none;width:1px;height:1px}
.hui-vx .swatch-element label{display:flex!important;align-items:center;justify-content:center;gap:8px;min-width:64px;min-height:40px;height:auto!important;width:auto!important;margin:0!important;padding:4px 14px!important;border:1px solid rgba(0,0,0,.14)!important;border-radius:2px!important;background:#fff!important;color:rgba(0,0,0,.85)!important;font-size:14px!important;line-height:1.25!important;font-weight:400!important;cursor:pointer;position:relative;overflow:hidden;box-shadow:none!important;transition:border-color .15s,color .15s;text-transform:none!important}
.hui-vx .swatch-element label:hover{border-color:#e01a22!important;color:#e01a22!important}
.hui-vx .swatch-element input:checked+label{border-color:#e01a22!important;color:#e01a22!important}
.hui-vx .swatch-element input:checked+label:after{content:"";position:absolute;right:0;bottom:0;border:8px solid transparent;border-right-color:#e01a22;border-bottom-color:#e01a22}
.hui-vx .swatch-element input:checked+label:before{content:"";position:absolute;right:1px;bottom:3px;width:6px;height:3px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg);z-index:1}
.hui-vx .swatch-element .crossed-out{display:none!important}
.hui-vx .swatch-element.soldout label{opacity:.45;background:#fafafa!important;cursor:not-allowed}
.hui-vx .swatch-element.soldout .hui-name{text-decoration:line-through}
.hui-vx .hui-color label{justify-content:flex-start;padding:4px 12px 4px 4px!important}
.hui-vx .hui-color .hui-thumb{width:32px;height:32px;object-fit:cover;flex:none;display:block;background:#f3f3f3}
.hui-vx .hui-scroll{display:none}
.hui-vx .swatch .hui-count{display:none}
.btn-mua.button_actions{flex-wrap:wrap}
.btn-mua.button_actions>.btn{flex:1 1 40%;min-width:0}
.hui-guarantee-line{flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.hui-guarantee-line .hgl-item{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#fff5f5;border:1px solid #f6d0d0;border-radius:6px;line-height:1.3;text-align:left}
.hui-guarantee-line .hgl-item svg{flex:none;width:26px;height:26px;color:#e01a22}
.hui-guarantee-line b{display:block;font-size:13px;color:#c8102e}
.hui-guarantee-line small{display:block;font-size:12px;color:#555}
@media (max-width:767px){
 .hui-vx .swatch{display:block}
 .hui-vx .swatch .header{padding:0;margin:0 0 10px!important;font-size:15px;font-weight:700;color:#222}
 .hui-vx .swatch .hui-count{display:inline;font-weight:700;margin-left:4px}
 .hui-vx .swatch .header .value-roperties{display:inline;font-weight:400;color:#e01a22}
 .hui-vx .swatch .header .value-roperties:before{content:" · ";color:#999}
 .hui-vx .swatch>:not(.header):not(.hui-opts){padding-left:0}
 .hui-vx .hui-color .hui-opts{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - 16px)/3.25);gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:1px}
 .hui-vx .hui-color.hui-1row .hui-opts{grid-template-rows:auto}
 .hui-vx .hui-color .hui-opts::-webkit-scrollbar{display:none}
 .hui-vx .hui-color .swatch-element{scroll-snap-align:start}
 .hui-vx .hui-color label{flex-direction:column;align-items:stretch;gap:0;padding:0!important;border-radius:8px!important;min-height:0;width:100%!important}
 .hui-vx .hui-color .hui-thumb{width:100%;height:auto;aspect-ratio:1/1}
 .hui-vx .hui-color .hui-name{display:block;padding:8px 4px;text-align:center;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hui-vx .hui-color input:checked+label{box-shadow:0 0 0 1px #e01a22!important}
 .hui-vx .hui-color input:checked+label:after,.hui-vx .hui-color input:checked+label:before{display:none}
 .hui-vx .hui-scroll{display:block;width:60px;height:3px;background:#e5e5e5;border-radius:3px;margin:10px auto 0;position:relative;overflow:hidden}
 .hui-vx .hui-scroll i{position:absolute;top:0;left:0;height:100%;background:#222;border-radius:3px}
 .hui-vx .hui-size .hui-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
 .hui-vx .hui-size label{min-width:0;min-height:44px;border-radius:6px!important;font-size:15px!important;padding:4px!important}
 .hui-vx .hui-size input:checked+label{box-shadow:0 0 0 1px #e01a22!important}
 .hui-guarantee-line{gap:6px}
 .hui-guarantee-line .hgl-item{flex-direction:column;text-align:center;padding:8px 4px;gap:4px}
 .hui-guarantee-line b{font-size:12px}
 .hui-guarantee-line small{font-size:11px}
}