/* ============================================================
   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 ở GÓC TRÊN-TRÁI
       (theo yêu cầu 2026-08-11).
       Vì sao phải ra khỏi cụm: 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 (nay 3 viên vừa khít
       một hàng ở 390 — xem js/welcome.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 đã ra góc
           trên-trái nên bề rộng nhãn không còn ảnh hưởng gì.
       Vì sao TRÊN-TRÁI an toàn (đo thật 390×844, bộ skin MOBILE thật):
         · tấm menu của skin (logo + THAM QUAN/ẨM THỰC/…) bắt đầu ở y≈188, nút thu
           gọn « của nó ở x≈145·y≈208 → nút 44px ở 16,15 cách ra rất rõ;
         · cụm [menu][VI][chia sẻ] của trang bắt đầu ở x≈187 → không đụng;
         · góc dưới-trái là #fp-fabs, dưới-phải là hàng nút đáy của skin (y792–832).
       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 — đúng ý, vì ở khổ ngang sidebar skin chiếm 43.5% bề ngang bên TRÁI
       (xem js/floorplan.css) nên góc trên-trái lúc đó KHÔNG trống.

   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 [menu][ngôn ngữ][chia sẻ]
       (js/site-menu.css · js/lang-switch.css · js/tour-chrome.js) → bốn nút một
       đường ngang. Đứng NGAY TRÁI nút ngôn ngữ, tức đúng ô mà #st-menu đang giữ;
       #st-menu bị đẩy sang trái thêm 54px (44 nút + 10 khe) — xem override
       --st-menu-right ngay dưới.
       Xếp từ mép phải vào (đo thật ở khổ 390): chia sẻ 16 · ngôn ngữ 70 · GÓP Ý 159
       · menu 213. Hai biến đều ĐO LÚC CHẠY: --st-share-w do js/tour-chrome.js đặt,
       --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 44×44, chỉ còn biểu tượng. 44 là cỡ chung của mọi nút tròn trong trang
       (#fp-close, nút chia sẻ do js/tour-chrome.js dựng) và cũng là cỡ chạm tối
       thiểu khuyến nghị. */
    width: 44px;
    height: 44px;
    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). Ba nút cùng hàng ở đây — chia sẻ/ngôn ngữ/menu — đều
       là viên trò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;
  }

  /* Đẩy #st-menu sang trái nhường ô cho nút Góp ý. Quy tắc gốc nằm trong <style>
     inline của index.htm; feedback.css nạp SAU nên cùng độ đặc hiệu (#st-menu) thì
     đè được — không cần !important. */
  #st-menu {
    --st-menu-right: calc(16px + var(--st-share-w, 0px) + var(--st-lang-w, 88px) + 10px + 54px);
  }

  /* Ẩ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: 20px;
    height: 20px;
  }

  /* Bỏ VÒNG SÓNG của cụm #fp-fabs: nút này nay đứng trong hàng phải, mà ba nút ở đó
     (chia sẻ/ngôn ngữ/menu) đều tĩnh — một nút phát sóng giữa hàng là lạc lõng.
     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 + MENU ĐANG MỞ: rời hàng 1 cùng nhịp với các nút kia ─────────
   Hàng trên phải trống để 3 lựa chọn của #st-menu bung ra. Nút này XUỐNG HÀNG 2,
   đứng NGAY TRÁI nút ngôn ngữ — giữ đúng thứ tự lúc đóng, nên mắt không phải tìm lại.

   ĐI THEO HÌNH CHỮ L NHƯNG NGƯỢC CHIỀU nút ngôn ngữ: XUỐNG trước, SANG PHẢI sau.
   Không phải để cho khác — mà vì nút × quét ngang cả hàng 1 (right 213 → 16) và ô
   của nút này (159–203) nằm ngay đầu đường quét. Nếu đi "sang phải rồi mới xuống"
   như nút ngôn ngữ thì tới lúc × khởi hành (200ms) nó vẫn còn kẹt trong hàng 1 và
   hai nút chồng lên nhau. Cho nó rơi xuống ngay từ 40ms là × quét được sạch.

   Quãng ngang = ĐÚNG 54px (= --st-share-w), y hệt nút ngôn ngữ (70→16 và 159→105),
   nên khoảng cách giữa hai nút giữ nguyên suốt đường đi, không bao giờ chạm nhau.

   Bổ sung vào LỊCH CHẠY chung ở js/site-menu.css:
     MỞ                                THU
     40   góp ý ↓ 1 hàng   (110)       300  góp ý → phải  (100)
     110  góp ý → trái     (100)       330  góp ý ↑ 1 hàng (110)
   Lượt THU phải đợi × rời khỏi ô này (× về tới 213 lúc ~280ms) rồi mới quay lên. */
@media (max-width: 620px) {
  #st-feedback-btn {                              /* trạng thái ĐÓNG = lượt THU */
    transition: right .1s cubic-bezier(.34, 1.2, .5, 1) 300ms,
                top .11s cubic-bezier(.34, 1.2, .5, 1) 330ms;
  }

  body.st-menu-open #st-feedback-btn {            /* lượt MỞ */
    top: calc(69px + env(safe-area-inset-top, 0px));
    right: calc(16px + var(--st-lang-w, 88px) + 10px);
    transition: top .11s cubic-bezier(.34, 1.2, .5, 1) 40ms,
                right .1s cubic-bezier(.34, 1.2, .5, 1) 110ms;
  }
}

@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 góp ý cảnh nào (đặc tả §6). */
.st-fb-scene {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 18px 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  font-size: 12.5px;
  color: #14532d;
}

.st-fb-scene svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: #0e6b2e;
  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 —
   xanh lá của trang cho góp ý, đỏ hồng cho lời khen. */
.st-fb-pick[data-type="suggestion"].on {
  border-color: #0e6b2e;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(14, 107, 46, .1);
}

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

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

.st-fb-pick[data-type="compliment"].on {
  border-color: #e11d48;
  background: #fff1f2;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .1);
}

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

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

/* Nhánh LỜI KHEN: các ô tích và nút gửi đổi sang cùng tông đỏ hồng, để cả form
   nói cùng một chuyện chứ không phải nút xanh lá nằm giữa thẻ đỏ hồng. */
.st-fb-compliment .st-fb-opt input {
  accent-color: #e11d48;
}

.st-fb-compliment .st-fb-opt:has(input:checked) {
  border-color: #e11d48;
  background: #fff1f2;
}

.st-fb-compliment .st-fb-fld input:focus,
.st-fb-compliment .st-fb-fld textarea:focus {
  border-color: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .14);
}

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

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

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

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

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

/* 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: #0e6b2e;
  cursor: pointer;
}

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

.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: #0e6b2e;
  box-shadow: 0 0 0 3px rgba(14, 107, 46, .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: #0e6b2e;
}

/* 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: #0e6b2e;
  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: #0e6b2e;
  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: #0e6b2e;
  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;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
}

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

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