/* F · Thước size: thẻ "Chọn size của bạn", thước dây, thanh size gọn, gợi ý ở trang sản phẩm,
   hộp "Hướng dẫn chọn size" (#dlg-reco: tấm đáy trên điện thoại, ngăn kéo phải từ 768px, 440–620px tuỳ bề rộng).
   Chỉ style các tiền tố .sf-* .tape* .sh-* .sg-*; màu, chữ, bo góc lấy từ token của shop.css. */

.sf-card, .sf-bar, .sf-hint, .sh-sheet, .pd-chart {
  /* Bí danh nội bộ của khu size, trỏ thẳng vào token của shop.css (một nguồn màu, chữ, chuyển động cho cả trang). */
  --sf-ink: var(--ink);
  --sf-paper: var(--paper);
  --sf-lining: var(--lining);
  --sf-stone: var(--stone);
  --sf-muted: var(--muted);
  --sf-brass: var(--brass);
  --sf-alert: var(--alert);
  --sf-on-ink: var(--on-ink);
  --sf-num: var(--f-display);
  --sf-body: var(--f-body);
  --sf-fast: var(--d-fast);
  --sf-ease: var(--ease);
  --sf-hl: color-mix(in srgb, var(--brass) 15%, var(--paper)); /* dòng size gợi ý trong bảng */
}
.sf-sz, .tape-in, .tape-n, .sh-size, .sh-num, .sf-hint b, .sg-in, .sg-pill b {
  font-family: var(--sf-num);
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- thẻ trang chủ */
.sf-card {
  --sf-pad: 16px;
  position: relative;
  background: var(--sf-paper);
  color: var(--sf-ink);
  border: 1px solid var(--sf-stone);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-2, 0 10px 30px -12px rgba(20, 27, 45, .28));
  padding: calc(var(--sf-pad) + 10px) var(--sf-pad) var(--sf-pad);
  overflow: hidden;
  scroll-margin-top: calc(var(--hdr-h, 56px) + 12px);
  font-family: var(--sf-body);
}
/* Mép trên in vạch thước: vạch nhỏ mực, vạch 5 đậm, vạch 10 màu đồng. */
.sf-edge, .sg-edge {
  position: absolute; inset: 0 0 auto 0; height: 10px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--sf-brass) 0 1.5px, transparent 0) var(--sf-pad, 20px) 0 / 80px 10px repeat-x,
    linear-gradient(90deg, var(--sf-ink) 0 1px, transparent 0) var(--sf-pad, 20px) 0 / 40px 7px repeat-x,
    linear-gradient(90deg, var(--sf-muted) 0 1px, transparent 0) var(--sf-pad, 20px) 0 / 8px 4px repeat-x;
  opacity: .7;
}
.sf-title {
  margin: 0 0 12px;
  font-family: "Archivo", var(--sf-body);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.sf-lede { display: none; margin: 0; color: var(--sf-muted); font-size: 15px; line-height: 1.55; max-width: 36ch; }

/* Nhóm size + chip */
.sf-groups { display: grid; gap: 12px; }
.sf-label { margin: 0 0 8px; color: var(--sf-muted); font: 500 13px/1.4 var(--sf-body); }
.sf-chips { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
.sf-sz {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 44px; height: 56px; padding: 0; margin: 0;
  border: 1px solid var(--sf-stone); border-radius: var(--r-xs, 6px);
  background: var(--sf-paper); color: var(--sf-ink);
  font-weight: 600; font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: background-color var(--sf-fast) var(--sf-ease), border-color var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease);
  -webkit-tap-highlight-color: transparent;
}
.sf-sz .szchip__num { font-size: 12px; font-weight: 500; color: var(--sf-muted); }
.sf-sz[aria-checked="true"] { background: var(--sf-ink); border-color: var(--sf-ink); color: var(--sf-on-ink); }
.sf-sz[aria-checked="true"] .szchip__num { color: inherit; opacity: .78; }
.sf-sz.is-out { background: var(--sf-lining); color: var(--sf-muted); border-color: transparent; cursor: default; }
.sf-sz.is-out .szchip__size { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sf-sz.szchip--suggest::after {
  content: ""; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sf-brass); box-shadow: 0 0 0 2px var(--sf-paper);
}
.sf-sz[aria-checked="true"].szchip--suggest::after { box-shadow: 0 0 0 2px var(--sf-ink); }
.sf-sz:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
@media (hover: hover) { .sf-sz:not(.is-out):not([aria-checked="true"]):hover { border-color: var(--sf-ink); } }

.sf-live {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px;
  min-height: 22px; margin: 12px 0 0;
  font: 500 14px/1.45 var(--sf-body); color: var(--sf-ink);
}
.sf-live-hint { color: var(--sf-muted); font-weight: 400; }
.sf-golink, .sf-hint-edit {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 4px; margin: -11px 0;
  border: 0; background: none; color: var(--sf-ink);
  font: 600 14px/1.2 var(--sf-body);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  cursor: pointer;
}
.sf-golink:focus-visible, .sf-hint-edit:focus-visible, .sf-bar-reco:focus-visible, .sf-guide:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }

/* Nút mở hộp "Hướng dẫn chọn size" (thẻ trang chủ) */
.sf-guide-row { margin-top: 14px; }
.sf-guide-row:empty { display: none; }
.sf-guide {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 8px 12px 8px 8px; margin: 0;
  border: 1px solid var(--sf-stone); border-radius: var(--r-sm, 8px);
  background: var(--sf-paper); color: var(--sf-ink); text-align: left; cursor: pointer;
  transition: border-color var(--sf-fast) var(--sf-ease), background-color var(--sf-fast) var(--sf-ease);
  -webkit-tap-highlight-color: transparent;
}
.sf-guide-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-xs, 6px); background: var(--sf-lining); color: var(--sf-ink);
}
.sf-guide-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-guide-t b { font: 600 15px/1.3 var(--sf-body); }
.sf-guide-t small { font: 400 13px/1.4 var(--sf-body); color: var(--sf-muted); }
.sf-guide-t small.is-got, .sf-guide-t small.is-over { color: var(--sf-ink); font-weight: 500; }
.sf-guide-t small.is-got::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 1px;
  border-radius: 50%; background: var(--sf-brass);
}
.sf-guide > svg:last-child { flex: none; color: var(--sf-muted); }
@media (hover: hover) { .sf-guide:hover { border-color: var(--sf-ink); } }

/* Nhắn shop */
.sf-chats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; margin-top: 12px; }
.sf-chat { min-height: 48px; justify-content: center; padding-inline: 12px; white-space: normal; }
.sf-chat--sm { min-height: 44px; font-size: 14px; }
.sf-note { margin: 10px 0 0; color: var(--sf-muted); font: 400 13px/1.45 var(--sf-body); }
.sf-note--out { color: var(--sf-alert); }

/* ---------------------------------------------------------------- thước dây */
.tape { --tape-step: 12px; min-width: 0; }
.tape-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tape-l { font: 600 14px/1.3 var(--sf-body); color: var(--sf-ink); }
.tape-val { display: inline-flex; align-items: center; gap: 6px; }
.tape-in {
  width: 76px; height: 44px; padding: 0 6px; margin: 0;
  border: 1px solid var(--sf-stone); border-radius: var(--r-xs, 6px);
  background: var(--sf-paper); color: var(--sf-ink);
  font-size: 24px; font-weight: 600; line-height: 1; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.tape-in::-webkit-outer-spin-button, .tape-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tape-in::placeholder { color: var(--sf-muted); opacity: .75; }
.tape-in:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 1px; }
.tape-in[aria-invalid="true"] { border-color: var(--sf-alert); }
.tape-unit { min-width: 2ch; color: var(--sf-muted); font: 500 14px/1 var(--sf-body); }
.tape-win {
  position: relative; height: 56px;
  border-radius: var(--r-xs, 6px); background: var(--sf-lining);
  overflow: hidden;
}
.tape-win:has(.tape-track:focus-visible) { box-shadow: 0 0 0 2px var(--sf-paper), 0 0 0 4px var(--sf-ink); }
.tape-track {
  height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* pan-x pan-y: vuốt ngang chỉnh thước, vuốt dọc bắt đầu trên thước vẫn cuộn được trang (trình duyệt chọn trục). */
  touch-action: pan-x pan-y;
  cursor: grab;
  outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.tape-track::-webkit-scrollbar { display: none; }
.tape-track:active, .tape-track.is-drag { cursor: grabbing; }
.tape-rule {
  user-select: none; -webkit-user-select: none; /* kéo thước bằng chuột không bôi đen chữ số */
  display: flex; width: max-content; height: 100%;
  padding-inline: calc(50% - var(--tape-step) / 2);
  background-origin: content-box; background-clip: content-box;
  background-repeat: repeat-x;
  background-image:
    linear-gradient(90deg, transparent calc(var(--tape-step) / 2 - 1px), var(--sf-brass) 0 calc(var(--tape-step) / 2 + 1px), transparent 0),
    linear-gradient(90deg, transparent calc(var(--tape-step) / 2 - .5px), var(--sf-ink) 0 calc(var(--tape-step) / 2 + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(var(--tape-step) / 2 - .5px), var(--sf-muted) 0 calc(var(--tape-step) / 2 + .5px), transparent 0);
  background-size: calc(var(--tape-step) * 10) 24px, calc(var(--tape-step) * 5) 17px, var(--tape-step) 10px;
  background-position: 0 0, 0 0, 0 0;
}
.tape-u { position: relative; flex: none; width: var(--tape-step); height: 100%; scroll-snap-align: center; }
.tape-n {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  color: var(--sf-muted); font-size: 11px; font-weight: 600; line-height: 1;
  white-space: nowrap; pointer-events: none; user-select: none;
}
.tape-u:nth-child(10n+1) .tape-n { color: var(--sf-ink); font-size: 12px; }
.tape-needle {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--sf-brass); pointer-events: none;
  transition: opacity var(--sf-fast) var(--sf-ease);
}
.tape-needle::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--sf-brass); border-bottom-width: 0;
}
.tape.is-unset .tape-needle { opacity: .45; }
.tape-err { margin: 6px 0 0; color: var(--sf-alert); font: 500 13px/1.4 var(--sf-body); }
/* Thước mảnh dưới ô nhập (hộp "Hướng dẫn chọn size"): vuốt để chỉnh, gõ số vẫn là cách chính. */
.tape--slim { margin-top: 6px; }
.tape--slim .tape-win { height: 32px; border-radius: 4px; }
.tape--slim .tape-rule { background-size: calc(var(--tape-step) * 10) 13px, calc(var(--tape-step) * 5) 9px, var(--tape-step) 5px; }
.tape--slim .tape-n { bottom: 3px; font-size: 10px; }
.tape--slim .tape-u:nth-child(10n+1) .tape-n { font-size: 10px; }
.tape--slim .tape-needle::before { border-width: 4px; border-bottom-width: 0; }
.tape--slim.is-unset .tape-rule { opacity: .6; }

/* ---------------------------------------------------------------- thanh size gọn (trang danh mục) */
.sf-bar {
  display: flex; align-items: center; gap: 12px;
  max-width: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 4px 28px 4px 2px; font-family: var(--sf-body); color: var(--sf-ink);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.sf-bar::-webkit-scrollbar { display: none; }
.sf-bar[hidden] { display: none; }
.sf-bar-l { flex: none; font: 600 14px/1.3 var(--sf-body); }
.sf-bar-chips { display: flex; align-items: center; gap: 12px; flex: none; }
.sf-bar .sf-group { display: flex; align-items: center; gap: 8px; }
.sf-bar .sf-label { margin: 0; white-space: nowrap; }
.sf-bar .sf-chips { display: flex; gap: 6px; }
.sf-bar .sf-sz { flex: none; width: 48px; height: 46px; font-size: 16px; }
.sf-bar .sf-sz .szchip__num { font-size: 12px; }
.sf-bar-reco {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; margin: 0;
  border: 1px solid var(--sf-stone); border-radius: var(--r-xs, 6px);
  background: var(--sf-paper); color: var(--sf-ink);
  font: 600 14px/1.2 var(--sf-body); white-space: nowrap; cursor: pointer;
}
.sf-bar-reco svg:last-child { color: var(--sf-muted); }
.sf-bar-reco-t { display: inline-flex; flex-direction: column; gap: 1px; }
.sf-bar-over { font: 400 12.5px/1.3 var(--sf-body); color: var(--sf-muted); }
@media (hover: hover) { .sf-bar-reco:hover { border-color: var(--sf-ink); } }
/* Điện thoại: hai cách chọn size đều thấy ngay, không phải vuốt ngang tìm.
   Hàng 1: chip size (bỏ chữ "Size của bạn:" dưới 400px cho vừa 5 chip). Hàng 2: nút "Hướng dẫn chọn size". */
@media (max-width: 767.98px) {
  .sf-bar {
    flex-wrap: wrap; row-gap: 10px; overflow: visible; padding: 4px 2px;
    -webkit-mask-image: none; mask-image: none;
  }
  .sf-bar-chips { flex: 0 1 auto; min-width: 0; }
  .sf-bar-reco { flex: 1 1 100%; justify-content: flex-start; white-space: normal; text-align: left; }
  .sf-bar-reco-t { flex: 1 1 auto; }
}
@media (max-width: 399.98px) { .sf-bar-l { display: none; } }

/* ---------------------------------------------------------------- gợi ý ở trang sản phẩm */
.sf-hint { color: var(--sf-ink); font: 400 14px/1.45 var(--sf-body); }
.sf-hint:empty { display: none; }
.sf-hint-t { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.sf-hint-t > svg { flex: none; margin-top: 1px; color: var(--sf-muted); }
.sf-hint b { font-size: 17px; font-weight: 700; }
.sf-hint-me { color: var(--sf-muted); }
.sf-hint-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; padding-left: 26px; }
.sf-hint-act .sf-note { margin: 0; }
.sf-hint-out { margin: 6px 0 0; padding-left: 26px; }
.sf-hint-pick { min-height: 44px; padding: 0 18px; }
/* Đã chọn đúng size gợi ý: nhãn tĩnh thay cho nút "Chọn M" */
.sf-hint-on { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px/1.2 var(--sf-body); color: var(--sf-ink); }
.sf-hint-on > svg { flex: none; color: var(--sf-brass); }
/* Vượt size lớn nhất: lời nói thẳng, giới hạn của shop, nút nhắn shop (không nút chọn size) */
.sf-hint-none { font-weight: 600; }
.sf-hint-lim { color: var(--sf-ink); }
/* Vùng mềm: size lớn nhất vẫn gợi ý, kèm lời cảnh báo "có thể chật" */
.sf-hint-soft { display: flex; gap: 6px; align-items: flex-start; color: var(--sf-ink); box-shadow: inset 3px 0 0 var(--sf-ink); padding: 6px 8px 6px 12px; margin-left: 26px; }
.sf-hint-soft svg { flex: none; margin-top: 2px; }
.sf-hint-soft + .sf-chats, .sf-hint .sf-chats { margin-top: 8px; }
.sf-hint-act--none { align-items: flex-start; gap: 4px 16px; }
.sf-hint-act--none .sf-chats { flex: 1 1 260px; margin-top: 4px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.sf-hint-act--none .sf-chat { padding-inline: 10px; white-space: nowrap; }
.sf-hint-act--none .sf-hint-edit { margin: 0; align-self: center; }

/* ---------------------------------------------------------------- hộp "Hướng dẫn chọn size" */
/* Điện thoại: tấm đáy cao 92% màn hình (chiều cao cố định: đổi tab hay hiện kết quả không làm hộp nhảy). */
.sheet.sh-sheet {
  height: 92vh; height: 92dvh; max-height: 92dvh;
  border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
}
@media (min-width: 768px) {
  /* Máy tính bảng trở lên: ngăn kéo bên phải, cao hết màn hình, cuộn riêng (bề rộng: khối bên dưới). */
  .sheet.sh-sheet {
    /* right âm đúng bằng rãnh thanh cuộn (khoá cuộn giữ rãnh: scrollbar-gutter stable): ngăn kéo sát mép phải màn hình,
       không để lại dải trắng bên phải trên máy có thanh cuộn cố định (Windows). Không có rãnh thì right = 0. */
    inset: 0 calc(100% - 100vw) 0 auto; margin: 0;
    height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0;
  }
  .sheet.sh-sheet[open] { animation-name: drawer-in; }
  .sheet.sh-sheet.is-closing { animation-name: drawer-out; }
}
/* Máy tính bảng / máy tính: ngăn kéo rộng hơn và bảng gọn hơn để thấy đủ cột (tới ~8 cột) không phải cuộn ngang:
   bảng co theo khung (min-width: 0), tên cột xuống dòng, số không xuống dòng. Bảng vẫn rộng hơn khung (shop thêm
   nhiều cột) thì vẫn cuộn ngang được, mép phải mờ báo còn cột. Điện thoại giữ cuộn ngang + cột Size cố định. */
@media (min-width: 768px) {
  .sheet.sh-sheet { width: clamp(440px, 66vw, 520px); }
  .sh-sheet .sh-table { min-width: 0; }
  .sh-sheet .sh-table th, .sh-sheet .sh-table td { padding: 8px 7px; }
  .sh-sheet .sh-table td { font-size: 14px; }
  .sh-sheet .sh-table thead th { font-size: 11.5px; white-space: normal; min-width: 44px; }
}
@media (min-width: 1024px) {
  .sheet.sh-sheet { width: clamp(520px, 48vw, 620px); }
}
.sh-sheet > .sheet-in { scroll-padding-top: 132px; position: relative; }
/* Chỉ phần ruột (.sheet-in) cuộn: hộp không bao giờ bị cuộn theo (scrollIntoView / focus từng đẩy cả hộp lên, mất đầu hộp).
   position: relative ở trên giữ các chữ ẩn (.sr-only, position absolute) bên trong vùng cuộn thay vì tràn ra hộp. */
.sheet.sh-sheet { overflow: hidden; overflow: clip; }

.sg-top {
  --sf-pad: 20px;
  position: sticky; top: 0; z-index: 3;
  background: var(--sf-paper); border-bottom: 1px solid var(--sf-stone);
  font-family: var(--sf-body);
}
.sg-edge { height: 8px; opacity: .55; }
/* Vạch kéo: chỉ trên điện thoại (tấm đáy), kéo phần đầu hộp xuống để đóng. */
.sg-grab { display: none; }
@media (max-width: 767.98px) {
  .sg-top { touch-action: none; }
  .sg-grab { display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--sf-stone); }
  .sg-grab + .sg-head { padding-top: 8px; }
}
.sg-head { display: flex; align-items: flex-start; gap: 8px; padding: 18px 8px 2px 20px; }
.sg-titles { flex: 1 1 auto; min-width: 0; }
.sg-title {
  margin: 0; font-family: var(--f-display); font-stretch: 106%; font-weight: 700;
  font-size: 20px; line-height: 1.25; letter-spacing: -.005em;
}
.sg-sub { margin: 2px 0 0; color: var(--sf-muted); font: 400 13px/1.4 var(--sf-body); overflow-wrap: anywhere; }
.sg-x { margin-top: -6px; }
.sg-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 6px 20px 0; }
.sg-tab {
  min-height: 48px; padding: 0 8px; margin: 0; border: 0; background: none;
  color: var(--sf-muted); font: 600 15px/1.2 var(--sf-body); text-align: center; cursor: pointer;
  transition: color var(--sf-fast) var(--sf-ease);
  -webkit-tap-highlight-color: transparent;
}
.sg-tab[aria-selected="true"] { color: var(--sf-ink); }
@media (hover: hover) { .sg-tab[aria-selected="false"]:hover { color: var(--sf-ink); } }
.sg-tab:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: -2px; border-radius: 4px; }
.sg-ink {
  position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--sf-ink);
  transition: transform var(--d-base, 240ms) var(--sf-ease);
}
.sg-tabs[data-tab="chart"] .sg-ink { transform: translateX(100%); }

.sg-body { padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); font-family: var(--sf-body); color: var(--sf-ink); }
.sg-panel:focus { outline: none; }
.sg-panel[hidden] { display: none; }
.sg-panel > * + * { margin-top: 22px; }
.sg-panel > .sr-only + * { margin-top: 22px; }
.sg-label { display: block; margin: 0 0 8px; font: 600 14px/1.3 var(--sf-body); color: var(--sf-ink); }
.sg-h3 { margin: 0 0 10px; font: 700 16px/1.3 var(--sf-body); color: var(--sf-ink); }
.sg-h3-sub { font-weight: 500; color: var(--sf-muted); }

/* Ô chiều cao / cân nặng: hai cột, số to, đơn vị bên phải; thước mảnh bên dưới */
.sg-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sg-field { min-width: 0; }
.sg-inwrap { position: relative; }
.sg-in {
  display: block; width: 100%; height: 52px; padding: 0 44px 0 14px; margin: 0;
  border: 1px solid var(--sf-stone); border-radius: var(--r-sm, 8px);
  background: var(--sf-paper); color: var(--sf-ink);
  font-size: 22px; font-weight: 600; line-height: 1;
  transition: border-color var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease);
  appearance: none; -webkit-appearance: none;
}
.sg-in::placeholder { color: var(--sf-muted); opacity: .5; font-weight: 500; }
.sg-in:focus { outline: none; border-color: var(--sf-ink); box-shadow: 0 0 0 1px var(--sf-ink); }
.sg-in[aria-invalid="true"] { border-color: var(--sf-alert); box-shadow: 0 0 0 1px var(--sf-alert); }
.sg-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sf-muted); font: 500 15px/1 var(--sf-body); pointer-events: none;
}
.sg-err { margin: 6px 0 0; color: var(--sf-alert); font: 500 13px/1.4 var(--sf-body); }

/* Vòng bụng (không bắt buộc): dòng bấm mở, ô số cùng cỡ với chiều cao / cân nặng, lời đo bên cạnh */
.sg-panel > .sg-bellybox { margin-top: 10px; }
.sg-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; margin: 0;
  border: 0; background: none; color: var(--sf-ink); cursor: pointer;
  font: 600 15px/1.3 var(--sf-body); text-align: left;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  -webkit-tap-highlight-color: transparent;
}
.sg-more > svg { flex: none; color: var(--sf-muted); }
.sg-more:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sg-belly { padding-top: 8px; }
.sg-opt { font-weight: 400; color: var(--sf-muted); }
.sg-belly-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.sg-belly-hint { margin: 0; color: var(--sf-muted); font: 400 13px/1.4 var(--sf-body); }

/* Dáng người: ba thẻ hình cùng một dáng, ba vóc */
.sg-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sg-shape {
  --card-bg: var(--sf-paper);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 44px; padding: 10px 4px 10px; margin: 0;
  border: 1px solid var(--sf-stone); border-radius: var(--r-md, 12px);
  background: var(--card-bg); color: var(--sf-muted); cursor: pointer;
  transition: border-color var(--sf-fast) var(--sf-ease), background-color var(--sf-fast) var(--sf-ease), color var(--sf-fast) var(--sf-ease), box-shadow var(--sf-fast) var(--sf-ease);
  -webkit-tap-highlight-color: transparent;
}
.sg-fig { width: 100%; height: 96px; overflow: visible; }
.sg-fig .f-solid { fill: currentColor; }
.sg-fig .f-cut, .sg-fig .f-dot { fill: var(--card-bg); }
.sg-fig .f-line { fill: none; stroke: var(--card-bg); stroke-width: 1; }
.sg-fig .f-head { fill: none; stroke: currentColor; stroke-width: 1.8; }
.sg-shape-l { font: 500 14px/1.25 var(--sf-body); color: var(--sf-ink); text-align: center; }
.sg-shape[aria-checked="true"] {
  --card-bg: var(--sf-lining);
  border-color: var(--sf-ink); box-shadow: inset 0 0 0 1px var(--sf-ink); color: var(--sf-ink);
}
.sg-shape[aria-checked="true"] .sg-shape-l { font-weight: 700; }
/* Dấu chọn: tròn mực, móc trắng (tối: tròn sáng, móc tối) */
.sg-shape[aria-checked="true"]::before {
  content: ""; position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--sf-ink);
}
.sg-shape[aria-checked="true"]::after {
  content: ""; position: absolute; top: 11px; right: 13px; width: 5px; height: 8px;
  border: solid var(--sf-on-ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sg-shape:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
@media (hover: hover) { .sg-shape[aria-checked="false"]:hover { border-color: var(--sf-ink); color: var(--sf-ink); } }

/* Kết quả */
.sg-wait {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px;
  border-radius: var(--r-md, 12px); background: var(--sf-lining); color: var(--sf-muted);
  font: 400 14px/1.45 var(--sf-body);
}
.sg-wait > svg { flex: none; color: var(--sf-ink); }
.sg-res-k { margin: 0 0 10px; font: 700 16px/1.3 var(--sf-body); color: var(--sf-ink); }
.sg-rows { display: grid; gap: 10px; }
.sg-row { padding: 14px; border-radius: var(--r-md, 12px); background: var(--sf-lining); }
.sg-row.is-none { padding: 12px 14px; }
.sg-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  min-height: 40px; margin: 0; padding: 0 16px 0 12px;
  border-radius: var(--r-round, 999px); background: var(--sf-ink); color: var(--sf-on-ink);
  font: 500 15px/1.2 var(--sf-body);
}
.sg-pill b { font-size: 20px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sg-pill-c { min-width: 0; overflow-wrap: anywhere; }
.sg-pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-on-ink) 35%, transparent); }
.sg-pill-near {
  margin-left: 2px; padding: 2px 8px; border-radius: var(--r-round, 999px);
  background: color-mix(in srgb, var(--sf-on-ink) 16%, transparent); font-size: 12px; font-weight: 600;
}
.sg-row.is-near .sg-pill, .sg-row.is-soft .sg-pill { background: var(--sf-paper); color: var(--sf-ink); box-shadow: inset 0 0 0 1px var(--sf-ink); }
.sg-row.is-near .sg-pill-dot, .sg-row.is-soft .sg-pill-dot { display: none; }
.sg-row.is-soft .sg-why { color: var(--sf-ink); box-shadow: inset 3px 0 0 var(--sf-ink); padding-left: 10px; }
.sg-row.is-near .sg-pill-near, .sg-row.is-soft .sg-pill-near { background: var(--sf-lining); }
.sg-set { margin: 8px 0 0; font: 500 14px/1.45 var(--sf-body); color: var(--sf-ink); }
.sg-why { margin: 8px 0 0; color: var(--sf-muted); font: 400 14px/1.5 var(--sf-body); }
.sg-row.is-none .sg-why { margin: 0; }
.sg-why b { color: var(--sf-ink); font-weight: 600; }
.sg-stock { margin: 8px 0 0; font: 600 14px/1.45 var(--sf-body); color: var(--sf-ink); }
.sg-stock.is-low, .sg-stock.is-out { color: var(--sf-alert); }
.sg-acts { display: grid; gap: 8px; margin-top: 12px; }
.sg-pick { min-height: 48px; white-space: normal; }
.sg-other {
  display: inline-flex; align-items: center; justify-self: start; min-height: 44px;
  color: var(--sf-ink); font: 600 14px/1.3 var(--sf-body); text-decoration: underline; text-underline-offset: 3px;
}
.sg-go { margin-top: 12px; min-height: 48px; }
.sg-disclaim { margin-top: 12px; }
.sg-result .sf-chats { margin-top: 12px; }

/* Chưa có dữ liệu: nói thẳng + nhắn shop (lời nhắn có sẵn chiều cao, cân nặng, dáng) */
.sg-empty { padding: 16px; border-radius: var(--r-md, 12px); background: var(--sf-lining); }
.sg-empty-ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px;
  border-radius: 50%; background: var(--sf-paper); color: var(--sf-ink);
}
.sg-empty-t { margin: 0; font: 700 16px/1.35 var(--sf-body); color: var(--sf-ink); }
.sg-empty-d { margin: 4px 0 0; font: 400 14px/1.5 var(--sf-body); color: var(--sf-muted); }
.sg-empty .sf-chats { margin-top: 14px; }
.sg-empty .sf-chat { background: var(--sf-paper); }
/* Số đo vượt size lớn nhất của shop: không có ô size, chỉ lời nói thẳng + nhắn shop */
.sg-nofit { box-shadow: inset 3px 0 0 var(--sf-ink); }
.sg-nofit .sg-empty-d { color: var(--sf-ink); }

/* Bảng size */
.sg-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sg-switch-b { min-height: 44px; }
.sg-tgroup + .sg-tgroup, .sg-howto-g + .sg-howto-g { margin-top: 18px; }
.sg-tgroup-t { margin: 0 0 6px; font: 600 13px/1.3 var(--sf-body); color: var(--sf-muted); }
.sh-chart { min-width: 0; }
.sh-chart-scroll {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--sf-stone); border-radius: var(--r-sm, 8px);
  -webkit-overflow-scrolling: touch;
}
/* Còn cột ở bên phải: mép phải mờ dần (sizefinder.js bật .is-more khi bảng rộng hơn khung và chưa cuộn tới cuối). */
.sh-chart-scroll.is-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, .25));
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, .25));
}
.sh-chart-scroll:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sh-table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; font: 400 14px/1.3 var(--sf-body); }
.sh-table th, .sh-table td { padding: 10px 12px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--sf-stone); }
.sh-table tbody tr:last-child th, .sh-table tbody tr:last-child td { border-bottom: 0; }
.sh-table thead th { background: var(--sf-lining); color: var(--sf-muted); font: 600 12px/1.3 var(--sf-body); vertical-align: bottom; }
.sh-table thead th small { display: block; font-weight: 400; font-size: 11px; }
/* Cột size dính bên trái khi kéo ngang */
.sh-table tr > :first-child {
  position: sticky; left: 0; z-index: 1; text-align: left;
  background: var(--sf-paper); box-shadow: inset -1px 0 0 var(--sf-stone);
}
.sh-table thead tr > :first-child { background: var(--sf-lining); }
.sh-table td { font-family: var(--sf-num); font-stretch: 87.5%; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; }
.sh-size { font-size: 16px; font-weight: 600; }
.sh-num { margin-left: 6px; color: var(--sf-muted); font-size: 12px; }
.sh-out { display: block; color: var(--sf-muted); font-size: 11px; font-weight: 500; line-height: 1.2; }
.sh-table tr.is-out td, .sh-table tr.is-out .sh-size { color: var(--sf-muted); }
.sh-table tr.is-out .sh-size { text-decoration: line-through; }
.sh-table tr.is-suggest > * { background: var(--sf-hl); }
.sh-table tr.is-suggest .sh-size::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 2px;
  border-radius: 50%; background: var(--sf-brass);
}
.sh-notes { margin-top: 10px; }
@media (max-width: 399.98px) {
  .sh-table th, .sh-table td { padding: 9px 8px; }
  .sh-table td { font-size: 14px; }
}

/* Cách đo */
.sg-howto { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sf-stone); }
.sg-panel > .sg-howto { margin-top: 28px; }
.sg-howto-lede { margin: 0 0 14px; color: var(--sf-muted); font: 400 14px/1.5 var(--sf-body); }
.sg-howto-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sg-howto-i { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 14px; }
.sg-jk {
  width: 60px; height: 64px; padding: 4px; border-radius: var(--r-sm, 8px); background: var(--sf-lining); overflow: visible;
}
.sg-jk .j-body { fill: none; stroke: var(--sf-muted); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.sg-jk .j-m { stroke: var(--sf-ink); stroke-width: 2.4; stroke-linecap: round; }
.sg-jk .j-end { fill: var(--sf-ink); }
.sg-howto-t { margin: 0; font: 600 14px/1.35 var(--sf-body); color: var(--sf-ink); }
.sg-howto-d { margin: 2px 0 0; font: 400 13px/1.45 var(--sf-body); color: var(--sf-muted); }

/* Bảng size trong accordion trang sản phẩm */
.pd-chart .sh-chart { padding-bottom: 4px; }

/* ---------------------------------------------------------------- bố cục theo bề rộng */
@media (min-width: 390px) {
  .sg-fig { height: 104px; }
}
@media (min-width: 768px) {
  .sf-card { --sf-pad: 24px; }
  .sf-title { font-size: 24px; }
  .sf-chips { grid-template-columns: repeat(var(--n, 5), minmax(52px, 64px)); }
  .sf-guide { width: auto; max-width: 520px; }
  .sg-fig { height: 108px; }
}
@media (min-width: 1024px) {
  /* Máy tính: tiêu đề + nút "Hướng dẫn chọn size" cột trái, các hàng chip size cột phải. */
  .sf-card--home {
    --sf-pad: 32px;
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr;
    gap: 20px 32px; align-items: start;
  }
  .sf-card--home .sf-intro { grid-column: 1; grid-row: 1; }
  .sf-card--home .sf-main { grid-column: 2; grid-row: 1 / span 2; }
  .sf-card--home .sf-guide-row { grid-column: 1; grid-row: 2; margin-top: 0; }
  .sf-card--home .sf-guide { width: 100%; }
  .sf-card--home .sf-title { font-size: clamp(24px, 1vw + 14px, 30px); margin-bottom: 12px; }
  .sf-lede { display: block; }
  .sf-card--home .sf-sz { height: 60px; }
  .sf-card--home .sf-chips { grid-template-columns: repeat(var(--n, 5), 64px); }
  .sf-bar { overflow: visible; flex-wrap: wrap; padding-right: 2px; -webkit-mask-image: none; mask-image: none; }
}
@media (pointer: coarse) {
  .sf-chat--sm { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-card *, .sf-bar *, .sf-hint *, .sh-sheet *, .tape * { transition: none !important; }
  .sheet.sh-sheet, .sheet.sh-sheet::backdrop { animation: none !important; }
  .tape-track { scroll-behavior: auto; }
}

/* Shop chưa cài Messenger/Zalo: nút "Chép lời nhắn" + dòng hướng dẫn xếp dọc (một cột), nút không bị kéo cao. */
.sf-chats.sf-chats--copy, .sf-hint-act--none .sf-chats.sf-chats--copy { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.sf-chats--copy .sf-chat { min-width: 168px; }
.sf-chats--copy .sf-note { margin: 0; }