/* =========================================================
   NGOC THAI SPORTS – giao diện trang khách (theme + bố cục)
   Theme: body[data-theme="court|night|clean|tropical|pro|brand"]
   Bố cục "Tất cả": body[data-layout="grid|list|big"]
   ========================================================= */

/* ---------- Theme tokens ---------- */
body[data-theme] {
  --font-display: "Barlow Condensed", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 14px; --r-ctl: 10px; --r-pill: 999px;
}
/* Sân pickleball: xanh sân, viền kitchen xanh lá, vàng bóng cho Sale */
body[data-theme="court"] {
  --bg: #EEF3F7; --surface: #FFFFFF; --ink: #13202E; --muted: #5B6B7C; --line: #D8E1EA;
  --accent: #1C4D8C; --accent-ink: #FFFFFF; --accent-soft: #E2EBF6;
  --sale-bg: #E2EE3F; --sale-ink: #13202E; --sale-badge: #13202E; --sale-badge-ink: #E2EE3F;
  --best: #2E7D5B; --best-ink: #FFFFFF;
  --top-bg: #1C4D8C; --top-ink: #FFFFFF; --star: #E8A317;
}
/* Trận đêm: nền xanh đêm, đèn sân vàng */
body[data-theme="night"] {
  --bg: #0E1828; --surface: #162337; --ink: #E8EEF6; --muted: #92A3B8; --line: #253650;
  --accent: #E2EE3F; --accent-ink: #0E1828; --accent-soft: #24354D;
  --sale-bg: #1C4D8C; --sale-ink: #FFFFFF; --sale-badge: #E2EE3F; --sale-badge-ink: #0E1828;
  --best: #3FA37A; --best-ink: #0E1828;
  --top-bg: #0B1320; --top-ink: #E8EEF6; --star: #E2EE3F;
  color-scheme: dark;
}
/* Cửa hàng tối giản: trắng, chữ đen, đỏ sale kiểu shop thể thao */
body[data-theme="clean"] {
  --font-display: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
  --bg: #FFFFFF; --surface: #F5F5F2; --ink: #111418; --muted: #686D74; --line: #E6E6E2;
  --accent: #111418; --accent-ink: #FFFFFF; --accent-soft: #EDEDE9;
  --sale-bg: #E0322B; --sale-ink: #FFFFFF; --sale-badge: #E0322B; --sale-badge-ink: #FFFFFF;
  --best: #111418; --best-ink: #FFFFFF;
  --top-bg: #FFFFFF; --top-ink: #111418; --star: #111418;
  --r-card: 6px; --r-ctl: 6px;
}
/* Biển Philippines: nền cát, xanh biển, vàng xoài */
body[data-theme="tropical"] {
  --font-display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;
  --bg: #FAF7F1; --surface: #FFFFFF; --ink: #1D2B2A; --muted: #5D6A68; --line: #E9DFD0;
  --accent: #0F7C7A; --accent-ink: #FFFFFF; --accent-soft: #DDEFEE;
  --sale-bg: #F2A900; --sale-ink: #1D2B2A; --sale-badge: #1D2B2A; --sale-badge-ink: #F2A900;
  --best: #D9483B; --best-ink: #FFFFFF;
  --top-bg: #0F7C7A; --top-ink: #FFFFFF; --star: #F2A900;
  --r-card: 18px;
}

body[data-theme] { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; }
body[data-theme] .wrap { max-width: 1180px; }
.sh-h { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; line-height: 1.05; margin: 0; }

/* Pro tối: bảng giá kiểu xưởng thể thao – xanh than, xanh bạc hà, chữ đậm nén */
body[data-theme="pro"] {
  --font-display: "Barlow Condensed", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Barlow", "Be Vietnam Pro", system-ui, sans-serif;
  --bg: #131917; --surface: #1A2320; --ink: #E7EFEB; --muted: #8FA29A; --line: #2A3732;
  --accent: #6CC3A0; --accent-ink: #0F1613; --accent-soft: #22302B;
  --sale-bg: #3A2620; --sale-ink: #F3E6DF; --sale-badge: #F08A4B; --sale-badge-ink: #1A0F0A;
  --best: #2B4A3E; --best-ink: #9FE0C4;
  --top-bg: #131917; --top-ink: #E7EFEB; --star: #F0B44B;
  --promo-bg: #3A2620; --promo-ink: #E9DCD5; --promo-hi: #F08A4B;
  --r-card: 16px; --r-ctl: 10px;
  color-scheme: dark;
}
body[data-theme="pro"] .sh-logo { font-weight: 800; font-size: 34px; letter-spacing: .01em; }
body[data-theme="pro"] .rail-head .sh-h, body[data-theme="pro"] .all-head .sh-h, body[data-theme="pro"] .group h2 { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
body[data-theme="pro"] .sh-trust .stars { color: var(--star); }
body[data-theme="pro"] .rail-sale .rail-head .sh-h { color: var(--promo-hi); }
@media (min-width: 721px) { body[data-theme="pro"] .sh-logo { font-size: 52px; } }

/* ---------- Đầu trang ---------- */
.sh-top { background: var(--top-bg); color: var(--top-ink); }
body[data-theme="clean"] .sh-top { border-bottom: 1px solid var(--line); }
.sh-top .wrap { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.sh-logo { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 0; line-height: 1; letter-spacing: .02em; }
.sh-tag { font-size: 12px; opacity: .78; margin-top: 3px; }
.sh-trust { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 600; color: inherit; text-decoration: none; }
.sh-trust .stars { color: var(--star); letter-spacing: 1px; }
body[data-theme="court"] .sh-trust .stars, body[data-theme="tropical"] .sh-trust .stars { color: #FFD24A; }
.sh-cartbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--r-pill); padding: 9px 14px; font-weight: 700; }
.sh-cartbtn .count { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); min-width: 22px; line-height: 22px; text-align: center; font-size: 12px; padding: 0 6px; }

/* ---------- 3 chế độ giá ---------- */
.modes { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.modes .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; gap: 12px; }
.modes .seg { flex: 1; }
.sh-cartbtn.mini { display: none; background: var(--ink); color: var(--bg); }
.sh-cartbtn.mini .count { background: var(--accent); color: var(--accent-ink); }
.sh-cartbtn.mini b { font-family: var(--font-display); font-size: 17px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--accent-soft); padding: 4px; border-radius: calc(var(--r-ctl) + 4px); }
.seg button { border: 0; background: transparent; color: var(--ink); border-radius: var(--r-ctl); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.seg button b { font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; max-width: 100%; }
.seg button small { font-size: 11px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.seg button.on small { color: inherit; opacity: .8; }
.mode-note { font-size: 12px; color: var(--muted); padding-top: 8px; line-height: 1.4; }
.mode-note:empty { display: none; }

/* ---------- Khung chạy ngang (Sale, Bán chạy, Feedback) ---------- */
.rail { padding: 18px 0 6px; }
.rail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rail-head .sh-h { font-size: 26px; }
.rail-head .cnt { color: var(--muted); font-size: 13px; font-weight: 600; }
.rail-head .nav { margin-left: auto; display: none; gap: 6px; }
.rail-head .nav button { width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: 16px; padding: 2px 16px 12px; margin: 0 -16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }

/* Dải Sale: điểm nhấn duy nhất của trang */
.rail-sale { background: var(--sale-bg); color: var(--sale-ink); margin-top: 14px; padding-bottom: 10px; }
.rail-sale .rail-head .sh-h { font-size: 30px; }
.rail-sale .rail-head .cnt { color: inherit; opacity: .7; }
.rail-sale .rail-head .nav button { background: transparent; border-color: currentColor; color: inherit; }

/* Thẻ trong khung chạy ngang */
.rc { background: var(--surface); color: var(--ink); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); min-width: 0; position: relative; }
.rail-sale .rc { border-color: transparent; }
.rc .thumb { aspect-ratio: 1/1; position: relative; background: var(--accent-soft); cursor: pointer; }
.rc .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rc .rcb { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.rc .cbrand { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.rc .name { font-weight: 600; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; cursor: pointer; }
.rc .rcf { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 4px; }
.rc .price { font-family: var(--font-display); font-size: 21px; font-weight: 700; white-space: nowrap; }
/* nút + nằm góc dưới-phải của ảnh, không chen với giá */
.rc .plus { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: var(--r-pill); border: 0; background: var(--accent); color: var(--accent-ink); font-size: 21px; line-height: 1; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.18); z-index: 2; }
.rc .plus.in { background: var(--best); color: var(--best-ink); font-size: 14px; }

/* Nhãn */
.tag { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); line-height: 1.3; }
.tag-sale { background: var(--sale-badge); color: var(--sale-badge-ink); }
.tag-best { background: var(--best); color: var(--best-ink); }
.tag + .tag { top: 34px; }
.soldtag { text-transform: none; letter-spacing: .02em; }

/* ---------- Tất cả sản phẩm ---------- */
.all { padding: 22px 0 10px; }
.all-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.all-head .sh-h { font-size: 26px; }
.all-head .cnt { color: var(--muted); font-size: 13px; font-weight: 600; }
.tools { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 6px; }
.tools .search { border-radius: var(--r-ctl); border-color: var(--line); background: var(--surface); color: var(--ink); }
.tools .row2 { display: flex; gap: 8px; align-items: center; }
.tools .chips { flex: 1; min-width: 0; }
body[data-theme] .chip { background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: var(--r-pill); }
body[data-theme] .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tools select { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-ctl); padding: 7px 8px; font-size: 13px; max-width: 132px; }
.layout-pick { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; flex: 0 0 auto; }
.layout-pick button { border: 0; background: var(--surface); color: var(--muted); width: 34px; height: 32px; display: grid; place-items: center; }
.layout-pick button.on { background: var(--ink); color: var(--bg); }
.layout-pick svg { width: 16px; height: 16px; }

body[data-theme] .group h2 { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 20px; color: var(--ink); font-weight: 700; }
body[data-theme] .group h2::after { background: var(--line); }

/* Lưới (mặc định) */
body[data-theme] .card { background: var(--surface); border-color: var(--line); border-radius: var(--r-card); box-shadow: none; color: var(--ink); }
body[data-theme] .thumb { background: var(--accent-soft); }
body[data-theme] .cbrand { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); }
body[data-theme] .price { font-family: var(--font-display); font-size: 19px; }
body[data-theme] .add { background: var(--accent-soft); color: var(--accent); border-radius: var(--r-ctl); }
body[data-theme="night"] .add { color: var(--accent); }
body[data-theme] .add.in { background: var(--accent); color: var(--accent-ink); }
body[data-theme] .vtag { background: transparent; border-color: var(--line); color: var(--muted); }
body[data-theme] .qty { border-color: var(--line); }
body[data-theme] .qty button { background: var(--surface); color: var(--ink); }
body[data-theme] .badge { display: none; }

/* Danh sách gọn – giống bảng giá giấy */
body[data-layout="list"] #list .grid { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
body[data-layout="list"] #list .card { flex-direction: row; align-items: center; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; gap: 10px; padding: 8px 10px; background: transparent; }
body[data-layout="list"] #list .card:last-child { border-bottom: 0; }
body[data-layout="list"] #list .card .thumb { width: 56px; height: 56px; flex: 0 0 56px; aspect-ratio: auto; border-radius: 8px; }
body[data-layout="list"] #list .card .thumb .tag, body[data-layout="list"] #list .card .thumb .soldtag { display: none; }
body[data-layout="list"] #list .card .ph span, body[data-layout="list"] #list .card .ph svg { display: none; }
body[data-layout="list"] #list .cbody { flex-direction: row; align-items: center; padding: 0; gap: 10px; }
body[data-layout="list"] #list .cbody > .cbrand { display: none; }
body[data-layout="list"] #list .cbody .name { flex: 1; font-size: 14px; }
body[data-layout="list"] #list .cbody .vtags { display: none; }
body[data-layout="list"] #list .cbody .row { margin: 0; padding: 0; gap: 10px; flex-wrap: nowrap; }
body[data-layout="list"] #list .lmeta { display: block; }
.lmeta { display: none; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.lmeta .s { color: var(--sale-badge); font-weight: 700; }
body[data-theme="court"] .lmeta .s, body[data-theme="tropical"] .lmeta .s { color: var(--best); }

/* Thẻ lớn */
body[data-layout="big"] #list .grid { grid-template-columns: 1fr; gap: 14px; }
body[data-layout="big"] #list .card .thumb { aspect-ratio: 4/3; }
body[data-layout="big"] #list .card .name { font-size: 17px; }
body[data-layout="big"] #list .price { font-size: 24px; }

/* ---------- Feedback ---------- */
.reviews { padding: 26px 0 8px; }
.rv-sum { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; margin-bottom: 12px; }
.rv-avg { text-align: center; flex: 0 0 auto; }
.rv-avg b { font-family: var(--font-display); font-size: 44px; line-height: 1; display: block; }
.rv-avg .stars { color: var(--star); font-size: 15px; letter-spacing: 1px; }
.rv-avg small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rv-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.rv-bars div { display: grid; grid-template-columns: 22px 1fr 26px; gap: 6px; align-items: center; }
.rv-bars i { height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.rv-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--star); border-radius: 3px; }
.rv-track { grid-auto-columns: 84%; }
.rvc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rvc .who { display: flex; align-items: center; gap: 10px; }
.rvc .av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; flex: 0 0 36px; }
.rvc .who b { display: block; font-size: 14px; }
.rvc .who small { color: var(--muted); font-size: 12px; }
.rvc .stars { color: var(--star); letter-spacing: 1px; font-size: 14px; }
.rvc p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rvc .pins { font-size: 11px; font-weight: 700; color: var(--best); }
.rvc .shots { display: flex; gap: 6px; }
.rvc .shots img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--line); }
.rvc .reply { font-size: 13px; background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.rvc .reply b { font-weight: 700; }
.rv-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.btn2 { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: var(--r-ctl); padding: 10px 16px; font-weight: 700; }
.btn1 { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-ctl); padding: 11px 16px; font-weight: 700; }
.rv-empty { color: var(--muted); font-size: 14px; padding: 6px 0 4px; }
.rv-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rv-grid .rvc p { -webkit-line-clamp: unset; }

/* Form viết đánh giá */
.rate-pick { display: flex; gap: 4px; font-size: 30px; }
.rate-pick button { border: 0; background: none; color: var(--line); padding: 0 2px; line-height: 1; }
.rate-pick button.on { color: var(--star); }
body[data-theme] .modal .box { background: var(--surface); color: var(--ink); }
body[data-theme] .inp { background: var(--bg); color: var(--ink); border-color: var(--line); }
body[data-theme] label { color: var(--muted); }
.hp { position: absolute; left: -9999px; }

/* Ảnh phóng to */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 95; display: none; align-items: center; justify-content: center; padding: 16px; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- Chân trang ---------- */
.sh-foot { color: var(--muted); font-size: 13px; padding: 28px 0 120px; border-top: 1px solid var(--line); margin-top: 26px; line-height: 1.6; }
.sh-foot .linkbtn { color: var(--accent); }
body[data-theme="night"] .sh-foot .linkbtn { color: var(--accent); }
.sh-foot a { color: var(--accent); }

/* ---------- Thanh giỏ hàng dưới đáy (điện thoại) ---------- */
.cartbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: none; align-items: center; gap: 10px;
  background: var(--ink); color: var(--bg); border-radius: 16px; padding: 10px 10px 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cartbar.show { display: flex; }
.cartbar .t { flex: 1; min-width: 0; }
.cartbar .t b { font-family: var(--font-display); font-size: 20px; display: block; line-height: 1.1; }
.cartbar .t small { opacity: .75; font-size: 12px; }
.cartbar button { border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 12px; padding: 11px 16px; font-weight: 700; }
body[data-theme="clean"] .cartbar button, body[data-theme="night"] .cartbar { }
body[data-theme="clean"] .cartbar button { background: var(--sale-bg); color: var(--sale-ink); }

/* Giỏ hàng, chi tiết theo theme */
body[data-theme] .drawer { background: var(--surface); color: var(--ink); }
body[data-theme] .drawer header, body[data-theme] .drawer footer, body[data-theme] .line { border-color: var(--line); }
body[data-theme] .btn { background: var(--accent); color: var(--accent-ink); border-radius: var(--r-ctl); }
body[data-theme] .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
body[data-theme] .btn.messenger { background: #0866ff; color: #fff; }
body[data-theme] .gallery { background: var(--accent-soft); }
body[data-theme] .vopt { background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: var(--r-ctl); }
body[data-theme] .vopt.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
body[data-theme] .vdesc-view { background: var(--bg); color: var(--ink); }
body[data-theme] .desc { color: var(--ink); opacity: .85; }
body[data-theme] .x { color: var(--ink); }
body[data-theme] .pbox .x.close { background: var(--surface); }
body[data-theme] .modal pre { background: var(--bg); color: var(--ink); }
.pinfo .psale { align-self: flex-start; position: static; }
body[data-theme] .pinfo h3 { font-family: var(--font-display); font-size: 26px; }
body[data-theme] .price.big { font-size: 30px; }

/* Điện thoại: chi tiết sản phẩm dạng bảng trượt từ dưới lên */
@media (max-width: 720px) {
  body[data-theme] #pModal { align-items: flex-end; padding: 0; }
  body[data-theme] #pModal .pbox { border-radius: 18px 18px 0 0; max-height: 92vh; }
  body[data-theme] .gallery .main { aspect-ratio: 4/3; }
  body[data-theme] .buyrow { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 4px; }
  body[data-theme] .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body[data-layout="big"] #list .grid { grid-template-columns: 1fr; }
  .sh-cartbtn .lbl { display: none; }
}

/* Máy tính */
/* Danh sách gọn trên điện thoại: tên + giá xếp dọc, nút bên phải */
body[data-layout="list"] #list .cbody { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center; }
body[data-layout="list"] #list .cbody .name { grid-column: 1; }
body[data-layout="list"] #list .cbody .row { display: contents; }
body[data-layout="list"] #list .cbody .price { grid-column: 1; grid-row: 2; font-size: 18px; }
body[data-layout="list"] #list .cbody .add, body[data-layout="list"] #list .cbody .qty { grid-column: 2; grid-row: 1 / span 2; }
body[data-layout="list"] #list .add { padding: 8px 12px; font-size: 13px; }
body:has(.cartbar.show) .toast { bottom: 92px; }

@media (min-width: 721px) {
  .track { grid-auto-columns: calc((100% - 4 * 12px) / 5); gap: 12px; margin: 0; padding: 2px 0 12px; scroll-padding-left: 0; }
  .rv-track { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
  .rail-head .nav { display: inline-flex; }
  .rail-head .sh-h { font-size: 30px; }
  .rail-sale .rail-head .sh-h { font-size: 36px; }
  .all-head .sh-h { font-size: 30px; }
  .sh-logo { font-size: 28px; }
  .seg { max-width: 640px; }
  .sh-cartbtn.mini { display: inline-flex; }
  .seg button { padding: 9px 10px; }
  .seg button b { font-size: 14.5px; }
  .tools { flex-direction: row; align-items: center; }
  .tools .search { max-width: 340px; }
  .tools .row2 { flex: 1; min-width: 0; }
  body[data-theme] .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  body[data-layout="list"] #list .grid { display: grid; grid-template-columns: 1fr 1fr; }
  body[data-layout="list"] #list .card { border-right: 1px solid var(--line); }
  body[data-layout="list"] #list .card:nth-child(2n) { border-right: 0; }
  body[data-layout="list"] #list .card:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  body[data-layout="big"] #list .grid { grid-template-columns: repeat(3, 1fr); }
  .rv-sum { max-width: 520px; }
  .rv-grid { grid-template-columns: repeat(3, 1fr); }
  .cartbar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) { .track { scroll-behavior: auto; } }
:focus-visible { outline: 2px solid var(--accent, #1C4D8C); outline-offset: 2px; }

.price small.from { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--muted); margin-right: 3px; }
.price small.cur { font-family: var(--font-body); font-size: 11px; font-weight: 700; margin-left: 3px; color: var(--muted); }

/* Thanh xem thử theme (chỉ bản DEMO) – nằm trên cùng, cuộn ngang trên điện thoại */
.lookbar { display: flex; gap: 8px; align-items: center; background: #13202E; color: #fff; padding: 8px 16px; font-size: 12px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.lookbar::-webkit-scrollbar { display: none; }
.lookbar > span:first-child { opacity: .7; }
.lb-group { display: inline-flex; gap: 2px; background: rgba(255,255,255,.12); border-radius: 10px; padding: 2px; flex: 0 0 auto; }
.lb-group button { border: 0; background: transparent; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.lb-group button.on { background: #fff; color: #13202E; }

/* ---------- Giảm theo số lượng ---------- */
.tierbanner { margin-top: 10px; background: var(--promo-bg, var(--accent-soft)); color: var(--promo-ink, var(--ink)); border-radius: var(--r-card); padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.tierbanner b { color: var(--promo-hi, var(--accent)); }
.tline { font-size: 12px; color: var(--muted); }
.tline b { color: var(--ink); font-family: var(--font-display); font-size: 14px; }
body[data-layout="list"] #list .tline { display: none; }

/* Thẻ "bảng giá theo số lượng" */
body[data-layout="tiers"] #list .grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tcard { padding: 16px; gap: 10px; display: flex; flex-direction: column; }
.tcard .tpills { display: flex; gap: 6px; flex-wrap: wrap; }
.tcard .tpills:empty { display: none; }
.pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.pill.best { background: var(--best); color: var(--best-ink); }
.pill.sale { background: var(--sale-badge); color: var(--sale-badge-ink); }
.pill.out { background: var(--line); color: var(--muted); }
.tcard .name { font-weight: 700; font-size: 18px; line-height: 1.25; cursor: pointer; }
body[data-theme="pro"] .tcard .name { font-size: 20px; }
.vsel { width: 100%; background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--r-ctl); padding: 11px 12px; font-size: 15px; font-weight: 600; }
.vsel:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.tchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.tc { border: 1px solid var(--line); border-radius: 8px; padding: 5px 4px; text-align: center; background: var(--bg); min-width: 0; }
.tc small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.tc b { font-family: var(--font-display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcard .tfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.tcard .tfoot .price { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; }
.tcard .tfoot .price .cur { font-size: 14px; }
.tcard .tadd, body[data-theme] .tcard .add.tadd { background: var(--accent); color: var(--accent-ink); padding: 12px 22px; font-size: 16px; font-weight: 700; border-radius: var(--r-ctl); }
.tcard.sold { opacity: .6; }
.tcard .qty button { width: 40px; height: 44px; }

/* Chi tiết: bảng giá theo số lượng */
.ptiers table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px; }
.ptiers td { padding: 7px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ptiers td:last-child { text-align: right; color: var(--best-ink, var(--accent)); font-weight: 700; }
body[data-theme="court"] .ptiers td:last-child, body[data-theme="clean"] .ptiers td:last-child, body[data-theme="tropical"] .ptiers td:last-child { color: var(--best); }

/* Giỏ: tiết kiệm + gợi ý mua thêm */
.savebox { background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 4px; }
.line .info s { color: var(--muted); font-weight: 400; }
.nexthint { display: block; color: var(--promo-hi, var(--accent)) !important; font-weight: 600; margin-top: 2px; }
body[data-theme="court"] .nexthint, body[data-theme="clean"] .nexthint, body[data-theme="tropical"] .nexthint { color: var(--best) !important; }

@media (min-width: 721px) {
  body[data-layout="tiers"] #list .grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
}

body[data-theme] .toast { background: var(--ink); color: var(--bg); }
body[data-theme] .line .lthumb { background: var(--accent-soft); }
body[data-theme] .vlabel { text-transform: none; letter-spacing: 0; font-size: 13px; }
.tchips { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.tchips.vnd .tc b { font-size: 13.5px; }
.tcard { container-type: inline-size; }
@container (max-width: 340px) { .tchips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Thẻ Giá theo SL: ảnh trên cùng, tràn sát mép thẻ */
.tcard { overflow: hidden; }
.tcard > .thumb { margin: -16px -16px 2px; aspect-ratio: 4/3; position: relative; cursor: pointer; background: var(--accent-soft); }
.tcard > .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 720px) {
  /* điện thoại: 2 cột, ảnh vuông, chữ gọn hơn */
  body[data-layout="tiers"] #list .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcard { padding: 12px; gap: 8px; }
  .tcard > .thumb { margin: -12px -12px 2px; aspect-ratio: 1/1; }
  .tcard .name { font-size: 15px; }
  body[data-theme="pro"] .tcard .name { font-size: 16px; }
  .vsel { padding: 8px 8px; font-size: 13px; }
  .tchips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tc b { font-size: 15px; }
  .tcard .tfoot { flex-direction: column; align-items: stretch; gap: 8px; }
  .tcard .tfoot .price { font-size: 24px; }
  .tcard .tadd, body[data-theme] .tcard .add.tadd { padding: 10px; width: 100%; }
  .tcard .qty { justify-content: space-between; }
}

/* =========================================================
   Đầu trang: logo + tên shop + dải cam kết (dùng cho mọi theme)
   ========================================================= */
.sh-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sh-words { min-width: 0; }
.sh-emblem { flex: none; width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.usp { background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); }
.usp .wrap { display: grid; grid-template-columns: repeat(var(--usp-n, 3), minmax(0, 1fr)); padding-top: 10px; padding-bottom: 10px; }
.usp-i { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 12px; }
.usp-i + .usp-i { border-left: 1px solid var(--line); }
.usp-i:first-child { padding-left: 0; }
.usp-i .ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.usp-i .ic svg { width: 21px; height: 21px; }
.usp-i .tx { min-width: 0; }
.usp-i b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.usp-i small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 1px; }
@media (max-width: 720px) {
  .sh-emblem { width: 44px; height: 44px; }
  .usp .wrap { padding-top: 8px; padding-bottom: 8px; }
  .usp-i { flex-direction: column; text-align: center; gap: 5px; padding: 0 4px; }
  .usp-i:first-child { padding-left: 4px; }
  .usp-i .ic { width: 32px; height: 32px; }
  .usp-i .ic svg { width: 18px; height: 18px; }
  .usp-i b { font-size: 12px; }
  .usp-i small { display: none; }
}

/* =========================================================
   Theme "brand": màu logo Ngoc Thai Sports – xanh, trắng, đỏ
   ========================================================= */
body[data-theme="brand"] {
  --font-display: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --blue: #1F4FA6; --navy: #14295E; --red: #D62D35;
  --bg: #F3F5FA; --surface: #FFFFFF; --ink: #0F1D40; --muted: #5B6786; --line: #DDE3EF;
  --accent: #1F4FA6; --accent-ink: #FFFFFF; --accent-soft: #E8EEF9;
  --sale-bg: #D62D35; --sale-ink: #FFFFFF; --sale-badge: #D62D35; --sale-badge-ink: #FFFFFF;
  --best: #14295E; --best-ink: #FFFFFF;
  --top-bg: #FFFFFF; --top-ink: #14295E; --star: #F2B01E;
  --promo-bg: #FDEDEE; --promo-ink: #0F1D40; --promo-hi: #D62D35;
  --r-card: 12px; --r-ctl: 8px;
}
/* Đầu trang trắng, viền dưới xanh–đỏ như logo */
body[data-theme="brand"] .sh-top { position: relative; }
body[data-theme="brand"] .sh-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0 72%, #fff 72% 73%, var(--red) 73%); }
body[data-theme="brand"] .sh-top .wrap { padding-top: 14px; padding-bottom: 18px; }
body[data-theme="brand"] .sh-emblem { box-shadow: none; padding: 0; }
body[data-theme="brand"] .sh-logo { font-weight: 800; font-size: 25px; color: var(--blue); letter-spacing: .01em; line-height: .95; font-style: italic; }
body[data-theme="brand"] .sh-logo .w2 { display: block; font-style: normal; font-weight: 700; font-size: 12px; letter-spacing: .5em; color: var(--red); margin-top: 4px; }
body[data-theme="brand"] .sh-trust { color: var(--muted); font-size: 12.5px; }
body[data-theme="brand"] .sh-cartbtn { background: var(--blue); color: #fff; }
body[data-theme="brand"] .sh-cartbtn .count { background: var(--red); color: #fff; }
body[data-theme="brand"] .sh-cartbtn.mini { background: var(--navy); color: #fff; }
body[data-theme="brand"] .sh-cartbtn.mini .count { background: var(--red); }
/* Dải cam kết: nền xanh đậm, icon tròn đỏ */
body[data-theme="brand"] .usp { background: var(--navy); color: #fff; border-bottom: 0; }
body[data-theme="brand"] .usp-i + .usp-i { border-left-color: rgba(255,255,255,.16); }
body[data-theme="brand"] .usp-i .ic { background: var(--red); color: #fff; }
body[data-theme="brand"] .usp-i b { letter-spacing: .01em; }
body[data-theme="brand"] .usp-i small { color: rgba(255,255,255,.72); }
/* Chọn bảng giá */
body[data-theme="brand"] .modes { background: rgba(243,245,250,.94); backdrop-filter: blur(8px); }
body[data-theme="brand"] .seg { background: #fff; border: 1px solid var(--line); }
body[data-theme="brand"] .seg button.on { background: var(--blue); box-shadow: inset 0 -3px 0 var(--red); }
/* Tiêu đề khung: chữ in đậm + vạch đỏ */
body[data-theme="brand"] .rail-head .sh-h, body[data-theme="brand"] .all-head .sh-h { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; padding-left: 12px; border-left: 5px solid var(--red); color: var(--navy); }
body[data-theme="brand"] .rail-sale .rail-head .sh-h { color: #fff; border-left-color: #fff; }
body[data-theme="brand"] .group h2 { font-weight: 800; color: var(--navy); text-transform: uppercase; font-size: 18px; letter-spacing: .03em; }
body[data-theme="brand"] .rail-sale { background: linear-gradient(135deg, var(--red) 0%, #B8222A 100%); }
body[data-theme="brand"] .rail-sale .tag-sale { background: var(--navy); }
/* Thẻ sản phẩm */
body[data-theme="brand"] .card, body[data-theme="brand"] .rc { box-shadow: 0 1px 2px rgba(15,29,64,.05); transition: box-shadow .15s, transform .15s; }
@media (hover: hover) { body[data-theme="brand"] .card:hover, body[data-theme="brand"] .rc:hover { box-shadow: 0 6px 18px rgba(15,29,64,.12); transform: translateY(-2px); } }
body[data-theme="brand"] .thumb { background: #F5F7FB; }
body[data-theme="brand"] .price { color: var(--navy); font-weight: 800; }
body[data-theme="brand"] .chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
body[data-theme="brand"] .tierbanner { border-left: 4px solid var(--red); }
/* Chân trang xanh đậm */
body[data-theme="brand"] .sh-foot { background: var(--navy); color: rgba(255,255,255,.78); border-top: 4px solid var(--red); }
body[data-theme="brand"] .sh-foot a, body[data-theme="brand"] .sh-foot .linkbtn { color: #fff; }
@media (min-width: 721px) {
  body[data-theme="brand"] .sh-emblem { width: 64px; height: 64px; }
  body[data-theme="brand"] .sh-logo { font-size: 32px; }
  body[data-theme="brand"] .sh-logo .w2 { font-size: 14px; }
}
/* Chữ logo dạng ảnh: chỉ hiện ở theme brand (nền trắng), theme khác dùng chữ */
.sh-wordmark { display: none; }
body[data-theme="brand"].has-wordmark .sh-wordmark { display: block; height: 46px; width: auto; max-width: 100%; }
body[data-theme="brand"].has-wordmark .sh-logo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-theme="brand"].has-wordmark .sh-trust { margin-top: 5px; }
@media (min-width: 721px) { body[data-theme="brand"].has-wordmark .sh-wordmark { height: 60px; } }

/* Chip bậc giá bấm được: thêm đúng số cây của mức vào giỏ */
button.tc { font: inherit; color: inherit; cursor: pointer; display: block; width: 100%; transition: border-color .12s, background .12s, transform .08s; }
button.tc:hover:not(:disabled) { border-color: var(--accent); }
button.tc:active:not(:disabled) { transform: scale(.97); }
button.tc:disabled { opacity: .45; cursor: not-allowed; }
button.tc.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.tc.on small { color: inherit; opacity: .85; }
.ptiers tr[data-pq] { cursor: pointer; }
.ptiers tr[data-pq]:hover td { background: var(--accent-soft); }
.ptiers tr.on td { background: var(--accent-soft); font-weight: 700; }
.ptiers .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
body[data-theme="brand"] .ptiers td:last-child { color: var(--red); }
body[data-theme="brand"] button.tc.on { box-shadow: inset 0 -3px 0 var(--red); }

/* =========================================================
   Chi tiết sản phẩm: khung cố định – đổi ảnh / phân loại không làm popup co giãn
   ========================================================= */
#pModal .gallery .main { position: relative; overflow: hidden; }
#pModal .gallery .main img, #pModal .gallery .main .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#pModal .gallery .main img { transition: opacity .15s; }
#pModal .gthumbs { flex: none; }
@media (min-width: 721px) {
  body[data-theme] #pModal .pbox { height: min(640px, 90vh); max-height: none; overflow: hidden; display: flex; }
  #pModal .pgrid { flex: 1; min-height: 0; grid-template-rows: 100%; }
  #pModal .gallery { min-height: 0; }
  #pModal .gallery .main { flex: 1; min-height: 0; aspect-ratio: auto; }
  #pModal .pinfo { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  #pModal .buyrow { position: sticky; bottom: -24px; background: var(--surface, #fff); padding: 12px 0 24px; margin-bottom: -24px; }
}
@media (max-width: 720px) {
  body[data-theme] #pModal .pbox { height: 90vh; height: 90dvh; max-height: none; overscroll-behavior: contain; }
  #pModal .gallery .main { aspect-ratio: 4/3; flex: none; }
  #pModal .pgrid { display: flex; flex-direction: column; min-height: 100%; }
  #pModal .gallery { flex: none; }
  #pModal .pinfo { flex: 1; }   /* nút Thêm vào giỏ luôn nằm sát đáy khung */
}

/* Lọc nhanh: Tất cả / Bán chạy / Sale */
.qfilter { display: inline-flex; gap: 4px; padding: 4px; background: var(--accent-soft); border-radius: calc(var(--r-ctl) + 4px); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.qfilter[hidden] { display: none; }
.qfilter button { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: var(--r-ctl); white-space: nowrap; cursor: pointer; }
.qfilter button small { font-weight: 600; opacity: .6; margin-left: 2px; }
.qfilter button.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.qfilter button.on small { opacity: .85; }
.qfilter button[data-qf="sale"].on { background: var(--sale-badge); color: var(--sale-badge-ink); }
@media (min-width: 721px) {
  .tools { flex-wrap: wrap; }
  .tools .row2 { flex-basis: 100%; }
  .qfilter { align-self: center; }
}

/* =========================================================
   Ảnh sản phẩm lấp đầy khung (cover) – khung dọc 4:5 hợp với ảnh vợt
   ========================================================= */
.thumb img, .rc .thumb img, .tcard > .thumb img { object-fit: cover; object-position: center; }
.thumb, .rc .thumb, .tcard > .thumb { aspect-ratio: 4/5; overflow: hidden; }
@media (max-width: 720px) { .tcard > .thumb { aspect-ratio: 4/5; } }
body[data-layout="big"] #list .card .thumb { aspect-ratio: 1/1; }
body[data-layout="list"] #list .card .thumb { aspect-ratio: auto; }
.line .lthumb { object-fit: cover; }
/* Popup: ảnh phủ kín khung cố định */
#pModal .gallery .main img { object-fit: cover; object-position: center; }
@media (max-width: 720px) { #pModal .gallery .main { aspect-ratio: 1/1; } }
/* Lọc tầm giá */
.pfilter button[data-pf].on { background: var(--ink); color: var(--bg); }
body[data-theme="brand"] .pfilter button[data-pf].on { background: var(--navy); color: #fff; }
@media (max-width: 720px) {
  .tools .row2 { flex-wrap: wrap; }
  .tools .row2 .chips { flex-basis: 100%; order: 2; }   /* điện thoại: hàng hãng riêng, đủ rộng để vuốt */
  .tools .row2 #sort { flex: 1; }
}

/* Mô tả sản phẩm có định dạng (**đậm**, gạch đầu dòng, tiêu đề) */
.md { white-space: normal; line-height: 1.55; }
.md p { margin: 0 0 .7em; }
.md p:last-child, .md ul:last-child, .md ol:last-child { margin-bottom: 0; }
.md strong { font-weight: 700; color: var(--ink); }
.md h4 { margin: .9em 0 .35em; font-size: 15px; font-weight: 700; color: var(--ink); }
.md h4:first-child { margin-top: 0; }
.md ul, .md ol { margin: 0 0 .7em; padding-left: 1.25em; }
.md li { margin: .25em 0; }
.md li::marker { color: var(--accent); }
body[data-theme="brand"] .md li::marker { color: var(--red); }



/* =========================================================
   Ảnh: thẻ sản phẩm khung VUÔNG phủ kín (ảnh dọc hay ngang đều chỉ cắt nhẹ, sản phẩm luôn ở giữa)
   Popup: khung cố định, ảnh PHỦ KÍN khung (cắt nhẹ mép nếu ảnh lệch dáng) – không đổi kích thước popup
   ========================================================= */
.thumb, .rc .thumb, .tcard > .thumb { aspect-ratio: 1/1; }
@media (max-width: 720px) { .tcard > .thumb { aspect-ratio: 1/1; } }
body[data-layout="big"] #list .card .thumb { aspect-ratio: 4/3; }
body[data-layout="list"] #list .card .thumb { aspect-ratio: auto; }
#pModal .gallery { background: #F4F5F7; }
body[data-theme="night"] #pModal .gallery, body[data-theme="pro"] #pModal .gallery { background: #0D1210; }
#pModal .gallery .main img { object-fit: cover; object-position: center; }   /* phủ kín khung, không khoảng trống */
@media (min-width: 721px) {
  body[data-theme] #pModal .pbox { max-width: 980px !important; }
  #pModal .pgrid { grid-template-columns: 1.25fr 1fr; }   /* vùng ảnh gần vuông: ảnh ngang hay dọc đều to */
}

/* Quà tặng kèm */
.gift { display: flex; gap: 10px; align-items: flex-start; background: var(--promo-bg, var(--accent-soft)); color: var(--promo-ink, var(--ink)); border-radius: var(--r-ctl, 10px); padding: 10px 12px; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.gift svg { flex: none; width: 20px; height: 20px; color: var(--promo-hi, var(--accent)); margin-top: -1px; }
.gift.sm { font-size: 12.5px; padding: 8px 10px; margin-bottom: 8px; }
.gift.sm svg { width: 17px; height: 17px; }
.gift[hidden] { display: none; }

/* =========================================================
   Giá gốc gạch ngang + Pre-order
   ========================================================= */
.price s.was, s.was { font-family: var(--font-body); font-size: .6em; font-weight: 500; color: var(--muted); text-decoration-thickness: 1.5px; margin-right: 5px; vertical-align: .12em; white-space: nowrap; }
.price.big s.was { font-size: .55em; }
.price .save { display: inline-block; vertical-align: middle; font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--sale-badge-ink); background: var(--sale-badge); border-radius: var(--r-pill); padding: 3px 9px; margin-left: 6px; }
.tag.tag-pre { top: auto !important; bottom: 8px; background: #0E7490; color: #fff; }
.pill.pre { background: #0E7490; color: #fff; }
.lmeta .pre { color: #0E7490; font-weight: 700; }
.pretag { display: inline-block; font-size: 10.5px; font-weight: 700; background: #0E7490; color: #fff; border-radius: 4px; padding: 1px 6px; vertical-align: middle; margin-left: 4px; }
.preinfo { background: #E6F4F7; color: #0B4F5F; border-left: 4px solid #0E7490; border-radius: var(--r-ctl, 8px); padding: 9px 12px; font-size: 13.5px; line-height: 1.45; }
.preinfo[hidden] { display: none; }
body[data-theme="night"] .preinfo, body[data-theme="pro"] .preinfo { background: #0F2A30; color: #BDE8F1; }