/* ============================================================
   feedback.css — nút "Góp ý" + hộp thoại góp ý trải nghiệm (js/feedback.js)
   ------------------------------------------------------------
   VỊ TRÍ (2026-08-11, theo yêu cầu):
     · DESKTOP — pill thứ 4 trong cụm #fp-fabs góc dưới-trái, ngay sau "Khám phá".
       Nền/viền/bo/bóng/font/vòng sóng DÙNG CHUNG, khai một chỗ ở js/floorplan.css
       (cùng lệ #welcome-launch); ở đây chỉ còn màu biểu tượng riêng.
     · ĐIỆN THOẠI (≤640px) — RA KHỎI cụm, thành NÚT TRÒN 44px NHẬP HÀNG CỤM PHẢI,
       đứng NGAY TRÁI nút ngôn ngữ (yêu cầu 2026-08-11, chiều).
       Hàng từ mép phải vào (đo lại 2026-08-21 ở khổ 390, sau khi bỏ nút chia sẻ):
       ngôn ngữ 16 (x295) · GÓP Ý 105 (x241). CTA "Vé Combo" xuống HÀNG 2 (top 69)
       nên không tranh ô với hàng này nữa — override --st-menu-right cũ đã gỡ.
       Vì sao phải ra khỏi cụm dưới-trái: cụm 4 viên thuốc rộng 576px, chỗ chứa ở khổ
       390 chỉ 358px → để nguyên là XUỐNG 2 HÀNG ở MỌI khổ điện thoại (từ 2026-08-21
       ba nút còn lại là NÚT TRÒN chỉ có biểu tượng, cụm rộng 152px — js/floorplan.css).
       ⚠ NGƯỠNG PHẢI ĐO LẠI MỖI KHI ĐỔI NHÃN NÚT, không phải con số cho sẵn:
         · 480 (chỗ cụm bắt đầu wrap) chưa đủ — dải 481–505px cụm chạm sát mép phải;
         · 560 đủ khi nhãn còn là "Góp ý" (cụm 486px), nhưng nhãn "Chia sẻ trải
           nghiệm" (đặc tả 2026-08-11) làm cụm nở lên 576px → ở khổ 600 chỉ còn
           ĐÚNG 8px lề phải, nhìn như bị cắt;
         · 640 (đang dùng): ở 641px lề phải còn 49px, dưới 640 thì nút đã sang hàng
           phải nên bề rộng nhãn không còn ảnh hưởng gì.
       KHỔ NGANG (844×390) KHÔNG dính luật này (rộng > 640) nên vẫn là viên thuốc
       trong cụm dưới-trái — đúng ý, vì ở khổ ngang sidebar skin chiếm 43.5% bề ngang
       bên TRÁI (xem js/floorplan.css) nên bên đó đã chật.
       ⚠ Nút phải có tên RIÊNG trong CHROME_IDS của js/tour-chrome.js: nó rời cụm nên
       hộp của #fp-fabs không còn đại diện cho nó khi tính "bị panel skin che".
       ⚠ Ở khổ này cụm #fp-fabs là LƯỚI 3 cột nút tròn + nút thu gọn (js/floorplan.css);
       nút này `position: fixed` nên rơi khỏi luồng và không chiếm ô nào của lưới.

   Nút vẫn là CON của #fp-fabs kể cả khi position:fixed → tự hưởng luật ẩn của cụm
   (trang chào `body.st-welcome-on #fp-fabs`) và tự bị lớp phủ bản đồ (z 10001) che,
   nên KHÔNG cần luật ẩn riêng nào ở đây.

   Hộp thoại z-index 10020 — trên cả chrome trang combo (10010+).
   ============================================================ */

#st-feedback-btn svg {
  stroke: #c2410c;
  fill: none;
}

@media (max-width: 640px) {
  #st-feedback-btn {
    position: fixed;
    /* NHẬP HÀNG với cụm phải: cùng `top: 15px` của nút ngôn ngữ
       (js/lang-switch.css) → hai nút một đường ngang. Đứng NGAY TRÁI nút ngôn ngữ.
       Xếp từ mép phải vào (đo 2026-08-21 ở khổ 390): ngôn ngữ 16 · GÓP Ý 105. Hai
       biến đều ĐO LÚC CHẠY: --st-share-w do js/tour-chrome.js đặt (nay luôn 0),
       --st-lang-w do js/lang-switch.js đo bề rộng viên thuốc (nhãn VI/EN khác nhau). */
    top: calc(15px + env(safe-area-inset-top, 0px));
    left: auto;
    right: calc(16px + var(--st-share-w, 0px) + var(--st-lang-w, 88px) + 10px);
    /* Tròn 34×34, chỉ còn biểu tượng — CÙNG CỠ với viên cờ ngôn ngữ bên cạnh và với
       nút thu/mở cụm nút nổi góc dưới-trái (`#fp-fabs-toggle`). Cả trang chỉ còn MỘT
       cỡ "nút phụ" trên điện thoại (2026-08-21 đợt 11; trước là 44px).
       ⚠ Nhỏ hơn 44px khuyến nghị của WCAG, nhưng đây là cỡ chủ dự án chốt và đã dùng
       sẵn cho nút thu/mở — để 44 một mình giữa hàng 34 thì lệch hẳn đường tâm. */
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    /* BỎ VIỀN: viền xanh 1.5px là dấu hiệu của cụm #fp-fabs góc dưới-trái (nơi nút
       này đứng trên desktop). Nút ngôn ngữ đứng cạnh nó ở hàng này là viên trắng
       KHÔNG viền, chỉ có bóng; giữ viền thì một nút trong hàng nổi khung lên, đúng
       kiểu "dán thêm vào" chứ không phải thuộc về cụm.
       Bóng giữ nguyên vì vốn đã trùng khớp: 0 2px 10px rgba(15,23,42,.28). */
    border: 0;
  }

  /* Ẩn CHỮ chứ không xoá khỏi DOM: trình đọc màn hình vẫn còn aria-label, và khi
     xoay ngang (>640px) nhãn hiện lại ngay không cần JS. */
  #st-feedback-btn span {
    display: none;
  }

  #st-feedback-btn svg {
    width: 17px;
    height: 17px;
  }

  /* Bỏ VÒNG SÓNG của cụm #fp-fabs: nút này nay đứng trong hàng phải, mà nút ngôn ngữ
     cạnh nó thì tĩnh — một nút phát sóng giữa hàng là lạc lõng (vòng sóng của cụm
     dưới-trái và của CTA "Vé Combo" đủ để dẫn mắt rồi).
     Trên desktop nó vẫn là viên thuốc trong cụm dưới-trái nên vẫn có sóng như cũ. */
  #st-feedback-btn::before,
  #st-feedback-btn::after {
    animation: none;
  }
}

/* ── MÀN HẸP: NHƯỜNG CHỖ CHO HÀNG CỜ NGÔN NGỮ (2026-08-21) ───────────────
   Bấm nút ngôn ngữ → danh sách xổ NGANG SANG TRÁI (js/lang-switch.css), và ở khổ
   ≤640px chỗ ấy chính là ô nút này đang đứng (đo ở 390: hàng cờ chiếm x185–285,
   nút Góp ý x241–285). Nên nút lùi đi trong lúc chọn rồi quay lại — thay vì nhồi
   hai thứ vào một chỗ hoặc bắt hàng cờ xổ xuống dưới, nơi đã có cột "Mua combo"/
   "Mua vé".
   CHUỖI: nút co về 0 NGAY (0ms) → hàng cờ đợi 130ms (`--st-lang-lag`) mới bung,
   nên không có khung hình nào hai thứ cùng chiếm một ô. Lúc thu thì ngược: cờ rút
   trước, nút hiện lại sau 190ms.
   Class `body.st-lang-open` do js/lang-switch.js đặt — phải đi qua <body> vì CSS
   không chọn ngược lên phần tử anh em đứng trước (cùng lệ `body.st-fabs-open`). */
@media (max-width: 640px) {
  #st-lang {
    --st-lang-lag: 130ms;
  }

  #st-feedback-btn {
    transition: opacity .16s ease 190ms,
                transform .26s cubic-bezier(.34, 1.5, .5, 1) 190ms,
                visibility 0s linear 190ms;
  }

  body.st-lang-open #st-feedback-btn {
    opacity: 0;
    visibility: hidden;
    transform: scale(.4) translateX(20px);
    transition-delay: 0ms;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  #st-feedback-btn {
    transition-duration: .01ms;
    transition-delay: 0ms !important;
  }
}

/* ⚠ 2026-08-21: khối `@media (max-width: 620px)` cũ ở đây ĐÃ GỠ — nó dời nút này
   xuống hàng 2 theo lịch chạy khi `body.st-menu-open` bật. Nút hamburger không còn
   (xem js/site-menu.js) nên không ai đặt class đó nữa; nút góp ý đứng yên ở hàng
   trên-phải, ngay trái nút ngôn ngữ. */

@media (prefers-reduced-motion: reduce) {
  #st-feedback-btn {
    transition-duration: .01ms;
    transition-delay: 0ms !important;
  }
}

/* Phương án dự phòng: trang KHÔNG có cụm #fp-fabs thì js/feedback.js tự dựng
   #st-feedback ở góc dưới-phải (hiện chưa trang nào rơi vào nhánh này). */
#st-feedback {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 10009;
}

body.st-welcome-on #st-feedback,
body:has(#fp-close):has(#fp-overlay.open) #st-feedback {
  display: none;
}

/* ---------- lớp nền mờ ---------- */
#st-fb-back {
  position: fixed;
  inset: 0;
  z-index: 10020;
  /* .vis bật hiển thị, .on chạy hiệu ứng — tách đôi vì transition không chạy được
     từ display:none, mà chỉ để opacity:0 thì nền mờ vẫn nuốt cú bấm vào tour. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .55);
  opacity: 0;
  transition: opacity .22s ease;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#st-fb-back.vis {
  display: flex;
}

#st-fb-back.on {
  opacity: 1;
}

/* ---------- thẻ hộp thoại ---------- */
#st-fb-card {
  width: min(480px, 100%);
  max-height: min(92vh, 780px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #0f172a;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  transform: translateY(14px);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

#st-fb-back.on #st-fb-card {
  transform: none;
}

.st-fb-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.st-fb-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.st-fb-head p {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.4;
}

#st-fb-close {
  flex: none;
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#st-fb-close:hover {
  background: #e2e8f0;
}

/* Chip cảnh — khách phải thấy NGAY mình đang chia sẻ về cảnh nào (đặc tả §6).
   TRUNG TÍNH (xám đá), KHÔNG mang màu của nhánh nào: đây là thông tin ngữ cảnh,
   không phải điều khiển. Trước đây nó xanh lá — nay xanh lá là màu của LỜI KHEN
   nên để nguyên thì chip sẽ tự nhận màu của một nhánh trong khi nó thuộc về cả hai. */
.st-fb-scene {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 18px 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
  color: #334155;
}

.st-fb-scene svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: #64748b;
  fill: none;
}

.st-fb-scene b {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-fb-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 4px;
}

.st-fb-q {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
}

/* ── Hai thẻ chọn loại chia sẻ (Góp ý ↔ Lời khen) ─────────────────────
   Đặc tả: MỘT popup duy nhất, hai lựa chọn dạng thẻ đặt ngang nhau ở trên; chọn
   bên nào thì chỉ phần GIỮA form đổi, còn cảnh + thông tin khách + nút gửi giữ
   nguyên chỗ. Làm hai form riêng sẽ bắt khách nhập lại từ đầu khi đổi ý. */
.st-fb-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.st-fb-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.st-fb-pick:hover {
  background: #f8fafc;
}

.st-fb-pick b {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

.st-fb-pick small {
  font-size: 11.5px;
  line-height: 1.3;
  color: #64748b;
}

.st-fb-pick-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #f1f5f9;
}

.st-fb-pick-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #64748b;
}

/* Thẻ đang chọn: mỗi nhánh một màu để khách thấy ngay mình đang ở hướng nào.
   BẢNG MÀU (chốt 2026-08-11):
     · LỜI KHEN = XANH LÁ #0e6b2e — hài lòng, thành công, niềm vui. Cũng đúng màu
       thương hiệu của trang, nên lời khen "nói cùng giọng" với phần còn lại.
     · GÓP Ý    = XANH DƯƠNG #1769ff — tin cậy, trung lập; báo "cần cải thiện" mà
       không gắt như đỏ.
   Vì sao KHÔNG dùng vàng/cam cho góp ý dù cũng được đề xuất: vàng trên nền trắng
   có vấn đề tương phản đã đo trong repo này (#dea800 chỉ ~2.0:1, phải đậm
   thành #a37400 mới đạt 4.3:1) — dùng cho nét mảnh và chữ trên nút thì bạc màu.
   #1769ff đã có sẵn trong bảng màu trang (biểu tượng nút "Điểm đến").
   Bản trước: góp ý xanh lá, lời khen đỏ hồng — đỏ dễ đọc thành "lỗi/cảnh báo",
   ngược hẳn ý nghĩa của một lời khen. */
.st-fb-pick[data-type="suggestion"].on {
  border-color: #1769ff;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .12);
}

.st-fb-pick[data-type="suggestion"].on .st-fb-pick-ic {
  background: #dbeafe;
}

.st-fb-pick[data-type="suggestion"].on .st-fb-pick-ic svg {
  stroke: #1769ff;
}

.st-fb-pick[data-type="compliment"].on {
  border-color: #0e6b2e;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(14, 107, 46, .1);
}

.st-fb-pick[data-type="compliment"].on .st-fb-pick-ic {
  background: #dcfce7;
}

.st-fb-pick[data-type="compliment"].on .st-fb-pick-ic svg {
  stroke: #0e6b2e;
  fill: #0e6b2e;
}

/* Nhánh LỜI KHEN: ô tích, viền focus và nút gửi đổi sang XANH LÁ để cả form nói
   cùng một chuyện. Mặc định (nhánh góp ý) là xanh dương — xem khối màu ở trên. */
.st-fb-compliment .st-fb-opt input {
  accent-color: #0e6b2e;
}

.st-fb-compliment .st-fb-opt:has(input:checked) {
  border-color: #0e6b2e;
  background: #f0fdf4;
}

.st-fb-compliment .st-fb-fld input:focus,
.st-fb-compliment .st-fb-fld textarea:focus {
  border-color: #0e6b2e;
  box-shadow: 0 0 0 3px rgba(14, 107, 46, .14);
}

.st-fb-compliment #st-fb-send {
  background: #0e6b2e;
}

.st-fb-compliment #st-fb-send:hover {
  background: #0b52d1;
}

/* Màn cảm ơn của nhánh lời khen */
.st-fb-compliment .st-fb-done .tick {
  background: #f0fdf4;
}

.st-fb-compliment .st-fb-done .tick svg {
  stroke: #0e6b2e;
  fill: #0e6b2e;
}

.st-fb-compliment .st-fb-done button {
  background: #0e6b2e;
}

/* Màn hẹp: hai thẻ vẫn đứng NGANG nhau (đặc tả yêu cầu "đặt ngang nhau"), chỉ bóp
   đệm và cỡ chữ. Xếp dọc thì mất luôn cảm giác "hai lựa chọn song song" và đẩy
   phần còn lại của form xuống quá sâu. */
@media (max-width: 420px) {
  .st-fb-picks {
    gap: 8px;
  }

  .st-fb-pick {
    padding: 10px 9px;
  }

  .st-fb-pick b {
    font-size: 12.5px;
  }

  .st-fb-pick small {
    font-size: 10.5px;
  }
}

.st-fb-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.st-fb-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.st-fb-opt:hover {
  background: #f8fafc;
}

.st-fb-opt input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: #1769ff;
  cursor: pointer;
}

.st-fb-opt:has(input:checked) {
  border-color: #1769ff;
  background: #eff6ff;
}

.st-fb-fld {
  margin-bottom: 12px;
}

.st-fb-fld label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.st-fb-fld label i {
  font-style: normal;
  color: #dc2626;
}

.st-fb-fld input,
.st-fb-fld textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
}

.st-fb-fld textarea {
  min-height: 78px;
  resize: vertical;
}

.st-fb-fld input:focus,
.st-fb-fld textarea:focus {
  outline: none;
  border-color: #1769ff;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .14);
}

.st-fb-fld input.bad,
.st-fb-fld textarea.bad {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.st-fb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.st-fb-sub {
  margin: 18px 0 10px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  font-size: 13.5px;
  font-weight: 700;
}

.st-fb-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #475569;
  cursor: pointer;
}

.st-fb-consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #1769ff;
}

/* Honeypot — người thật không bao giờ thấy ô này (xem js/feedback.js). */
.st-fb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.st-fb-foot {
  flex: none;
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.st-fb-gift {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 12.5px;
  line-height: 1.4;
  color: #92400e;
}

.st-fb-gift svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: #b45309;
  fill: none;
}

#st-fb-send {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #1769ff;
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s;
}

#st-fb-send:hover {
  background: #0b5726;
}

#st-fb-send:disabled {
  opacity: .6;
  cursor: default;
}

#st-fb-err {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #dc2626;
}

/* ---------- màn cảm ơn ---------- */
.st-fb-done {
  padding: 34px 26px 30px;
  text-align: center;
}

.st-fb-done .tick {
  width: 62px;
  height: 62px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #ecfdf3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-fb-done .tick svg {
  width: 30px;
  height: 30px;
  stroke: #1769ff;
  fill: none;
}

.st-fb-done h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.st-fb-done p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #475569;
}

.st-fb-done button {
  min-width: 160px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: #1769ff;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- màn hẹp: hộp thoại thành tấm trượt từ đáy ---------- */
@media (max-width: 560px) {
  #st-fb-back {
    padding: 0;
    align-items: flex-end;
  }

  #st-fb-card {
    width: 100%;
    max-height: 94vh;
    /* dvh = phần viewport THẬT SỰ nhìn thấy. Trên điện thoại, `vh` tính theo khung
       lúc thanh địa chỉ đã thu, nên khi thanh địa chỉ còn hiện thì 94vh CAO HƠN màn:
       tấm trượt bị đẩy chìm dưới mép dưới, phần đầu bị đẩy khuất — đúng triệu chứng
       "vài máy cuộn rất khó chịu". Trình duyệt cũ không hiểu dvh thì bỏ qua dòng này
       và dùng 94vh ở trên. */
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);

    /* ── CUỘN CẢ TẤM, KHÔNG GHIM ĐẦU ────────────────────────────────────────
       Trên desktop thẻ là flex 3 tầng: đầu ghim · thân cuộn · chân ghim. Ở màn
       hẹp thì đầu (tiêu đề + mô tả + chip cảnh) ngốn ~140px trong khi vùng cuộn
       chỉ còn vài trăm px — khách phải cuộn một khe hẹp, và trên máy có bàn phím
       ảo bật lên thì khe đó gần như biến mất. Nay CHÍNH thẻ là vùng cuộn: đầu
       trôi theo nội dung, chỉ nút gửi còn dính đáy (sticky) để không phải cuộn
       xuống cuối mới bấm được.
       `overflow-x: hidden` giữ nguyên việc cắt góc bo của bản gốc (`overflow: hidden`). */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Thân hết vai trò vùng cuộn. PHẢI bỏ `flex: 1` + `min-height: 0`: trong một flex
     column, item co đúng bằng chỗ còn lại của thẻ nên tổng chiều cao KHÔNG BAO GIỜ
     vượt thẻ → thẻ chẳng có gì để cuộn, và thân lại cuộn trong khe hẹp như cũ. */
  .st-fb-body {
    flex: none;
    min-height: auto;
    overflow: visible;
  }

  .st-fb-foot {
    position: sticky;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  #st-fb-back,
  #st-fb-card {
    transition: none;
  }
}