/* Trang khách đợt 3 (sx-v2.js, 24/10/2026) theo mẫu v3: bộ ảnh chung kiểu Shopee, ký họa + ô vải, khung xem ảnh lớn. Dùng chung lớp .sx / .sx-nut / .sx-cham của sx-v1.css */
.sx3-anh{display:block}
.sx3-lon{position:relative;border:1px solid #e6eaf2;border-radius:16px;background:#fff;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in}
.sx3-noi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sx3-noi>img{max-width:100%;max-height:100%;object-fit:contain}
.sx3-mui{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #e3e6ea;background:rgba(255,255,255,.92);font-size:22px;line-height:1;color:#1d1d1f;cursor:pointer;z-index:2}
.sx3-mui.t{left:10px}.sx3-mui.p{right:10px}
.sx3-cap{font-size:12.5px;color:#5f6b7d;margin:6px 2px 0;line-height:1.4}
.sx3-dai{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.sx3-dai button{flex:none;position:relative;width:64px;height:64px;border:1.5px solid #e3e6ea;border-radius:10px;background:#fff;padding:2px;cursor:pointer;overflow:hidden}
.sx3-dai button.on{border-color:#03438b}
.sx3-dai img{width:100%;height:100%;object-fit:contain}
.sx3-ma{position:absolute;left:2px;right:2px;bottom:2px;font-size:10px;line-height:1.3;background:rgba(255,255,255,.9);border-radius:4px;color:#1d1d1f}
/* ký họa không tô (nền CSS, không phải thẻ ảnh) + ô vải mang mã, tên màu */
.sx3-ky{position:relative;display:block;width:100%;height:100%;background:#fff no-repeat center 42%/78% auto}
.sx3-vai{position:absolute;right:5%;bottom:5%;width:40%;aspect-ratio:1/1;border-radius:12px;border:1px solid rgba(0,0,0,.15);background-size:100% 150%;background-position:center top;display:flex;flex-direction:column;justify-content:flex-end;padding:10px;color:#fff;font-size:13px;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 2px 10px rgba(16,24,40,.12)}
.sx3-vai b{font-size:18px}
/* ảnh mẫu thật 640x463: phóng theo chiều cao 125% từ mép trên -> dải logo / mã ở 16% đáy nằm ngoài ô */
.sx3-vai.that{background-size:100% 100%,auto 125%;background-position:0 0,center top;background-repeat:no-repeat}
.sx3-vai.nho{width:46%;right:3px;bottom:3px;border-radius:6px;padding:2px 3px;font-size:9px}
.sx3-vai.nho b{font-size:10px}
.sx3-mh{position:absolute;left:10px;top:10px;font-style:normal;font-size:12px;background:#fff4e5;color:#b54708;border:1px solid #f5c98f;border-radius:999px;padding:2px 10px}
/* khối chọn */
.sx3-ten{font-size:13px;color:#5f6b7d;margin:2px 0 0}
.sx3-ds{color:#5f6b7d;font-weight:400}
.sx3-cham button{position:relative}
.sx3-co{position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:50%;background:#fff;border:1px solid #cfd6e1;font:normal 10px/15px sans-serif;text-align:center;color:#5f6b7d}
.sx3-cung{margin-top:14px;border:1px solid #e3e6ea;border-radius:10px;padding:9px 12px;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sx3-cung a{white-space:nowrap;color:#03438b;font-weight:600}
/* khung xem ảnh lớn */
.sx3-xl{position:fixed;inset:0;z-index:2147483000;background:rgba(10,16,28,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px}
.sx3-xl[hidden]{display:none}
.sx3-xl-k{position:relative;width:min(78vh,94vw);aspect-ratio:1/1;background:#fff;border-radius:12px;overflow:hidden}
.sx3-xl-noi{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sx3-xl-noi>img{max-width:100%;max-height:100%;object-fit:contain}
.sx3-xl-cap{color:#fff;font-size:13px;margin:0;text-align:center}
.sx3-xl-luoi{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:94vw}
.sx3-xl-luoi button{position:relative;width:52px;height:52px;border-radius:7px;border:2px solid transparent;background:#fff;padding:2px;cursor:pointer;overflow:hidden}
.sx3-xl-luoi button.on{border-color:#7fb0ff}
.sx3-xl-luoi img{width:100%;height:100%;object-fit:contain}
.sx3-dong{position:absolute;top:8px;right:14px;color:#fff;font-size:34px;line-height:1;background:none;border:0;cursor:pointer}
html.sx3-khoa,html.sx3-khoa body{overflow:hidden}
@media (max-width:600px){.sx3-dai button{width:56px;height:56px}.sx3-vai b{font-size:15px}.sx3-xl-luoi button{width:44px;height:44px}}