/* ============================================================
   site-menu.css — logo góc trên-trái + nút CTA "Vé Combo" góc trên-phải
   (js/site-menu.js). Dùng chung cho index.htm · combo/index.html · map.html.
   ------------------------------------------------------------
   2026-08-21: BỎ hamburger + danh sách 3 trang. Cùng với nó bỏ luôn lịch chạy
   animation 5 mốc × 2 chiều từng trải trên 4 tệp (site-menu.css · lang-switch.css ·
   feedback.css · tour-chrome.css) để ba nút góc trên-phải nhường chỗ cho danh
   sách xổ ngang — nay không còn gì phải nhường: hàng trên-phải chỉ có
   [góp ý][ngôn ngữ], CTA nằm hàng dưới trên điện thoại và bên trái nút ngôn ngữ
   trên desktop. Class `body.st-menu-open` KHÔNG còn ai đặt.

   VỊ TRÍ CTA — hai biến, trang tự ghi đè:
     · mặc định        top 15 / right 150  (combo/index.html — nhưng ở đó CTA trỏ
       về chính nó nên KHÔNG được dựng, xem js/site-menu.js);
     · index.htm       top 15 / right = 16 + --st-share-w + --st-lang-w + 10
       (ngay trái nút ngôn ngữ) — khai trong <style> của chính trang, GATE
       `min-width: 641px` để không đè quy tắc điện thoại bên dưới;
     · điện thoại ≤640 top 69 / right 16 — HÀNG 2, ngay dưới [góp ý][ngôn ngữ]
       (yêu cầu 2026-08-21);
     · map.html        top 68 / right 16 — trang đó là bản đồ, hàng trên cùng bị
       thanh tìm kiếm chiếm (nó khai `left:12; right:64`, ô 64px chỉ đủ cho MỘT
       nút tròn 44px chứ không đủ viên thuốc CTA).

   VỊ TRÍ LOGO: top 15 / left 16 ở cả 3 trang; map.html đẩy xuống top 68 vì thanh
   tìm kiếm của bản đồ bắt đầu ở left 12. Đo thật trên bản dev (index.htm):
     · desktop 1280×800 — tấm sidebar của skin bắt đầu ở y≈160, dải y0–155 trống;
     · mobile 390×844   — tấm menu của skin bắt đầu ở y≈188, hàng y15–59 trống,
       và cụm nút phải bắt đầu ở x≈241 sau khi bỏ nút chia sẻ.
   ============================================================ */

/* ── LOGO (về trang tour 360°) ─────────────────────────────────────────── */
/* 2026-08-21 đợt 2 (yêu cầu "to hơn, không nền"): BỎ viên tròn trắng + bóng hộp,
   crest đứng THẲNG trên cảnh 360° và to hẳn lên — 64px điện thoại / 84px desktop.
   Ảnh nguồn có nền TRONG SUỐT thật (`img/logo/logosuoitien.png`, RGBA, alpha 0 ở
   góc — đã kiểm), nên bỏ nền là ra đúng hình huy hiệu chứ không phải ô vuông trắng.
   Thay viên trắng bằng `drop-shadow`: bóng ôm theo ĐƯỜNG VIỀN của crest (mask ảnh),
   nên các nét mảnh vẫn tách khỏi mây trắng mà không cần cái đế. */
#st-logo {
  position: fixed;
  top: calc(var(--st-logo-top, 15px) + env(safe-area-inset-top, 0px));
  left: var(--st-logo-left, 16px);
  right: var(--st-logo-right, auto);
  z-index: 10009;
  box-sizing: border-box;
  display: block;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 2px 5px rgba(9, 24, 14, .45));
  transition: transform .16s ease, opacity .18s ease, visibility 0s linear .18s;
}

#st-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

#st-logo:hover {
  transform: scale(1.06);
}

/* DESKTOP: to thêm một nấc nữa. Crest có rất nhiều nét mảnh (vành chữ "SUOI TIEN
   THEME PARK" + dòng "SINCE 1995") — càng to càng đọc được, và ở đây có chỗ. */
@media (min-width: 641px) {
  #st-logo {
    width: 84px;
    height: 84px;
  }
}

/* Ở CHÍNH trang tour thì logo không dẫn đi đâu — bỏ hiệu ứng "bấm được" cho khỏi
   hứa hẹn sai, nhưng vẫn để là <a> (bấm ra trang chủ tour là hành vi đúng). */
#st-logo[data-here] {
  cursor: default;
}

#st-logo[data-here]:hover {
  transform: none;
}

/* Lớp phủ bản đồ đang mở TRÊN một trang có nội dung riêng (index.htm, combo/):
   hàng trên-trái lúc đó là ô tìm kiếm của bản đồ. map.html không có #fp-close nên
   không dính luật này — nó tự đẩy logo xuống top 68 (xem <style> của trang). */
body:has(#fp-close):has(#fp-overlay.open) #st-logo,
body:has(#fp-close):has(#fp-overlay.open) #st-menu {
  display: none;
}

/* ⚠ 2026-08-21 đợt 3: BỎ luật giấu logo khi cụm nút nổi mở (`body.st-fabs-open
   #st-logo`). Chốt lại với chủ dự án: chỉ bung một hàng nút ở góc dưới thì logo ở
   góc TRÊN-TRÁI chẳng vướng gì — hai chỗ cách nhau cả màn hình. Class
   `st-fabs-open` vẫn do js/floorplan.js đặt và js/floorplan.css vẫn dùng nó cho
   chính ba nút ấy; chỉ mỗi logo thôi không nghe nó nữa.
   Logo vẫn ẩn ở ba trường hợp CÓ LÝ DO: trang chào mở (js/welcome.css), lớp phủ
   bản đồ mở (ngay trên), và panel của skin che lên (js/tour-chrome.css). */

/* ── CTA "Vé Combo" ────────────────────────────────────────────────────── */
/* CỘT DỌC DƯỚI NÚT NGÔN NGỮ — ở CẢ desktop lẫn điện thoại (chốt 2026-08-21 đợt 7).
   Trước đó desktop xếp CTA ngang hàng, bên trái nút ngôn ngữ. Từ khi có HAI nút CTA
   (Mua combo · Mua vé) thì xếp ngang là một dải dài ~310px chạy ngang đỉnh màn, đè
   vào chỗ chrome của skin 3DVista; xếp dọc thì mỗi nút vẫn nguyên cỡ, cụm chỉ rộng
   bằng nút dài nhất, và hai nút đọc ra là MỘT nhóm hành động.
   `align-items: stretch` → hai nút BẰNG NHAU bề ngang (theo nút dài nhất), mép phải
   thẳng hàng với nút ngôn ngữ phía trên; mũi nhọn `margin-left: auto` nên luôn nằm
   sát mép phải của cả hai. Trang chỉ còn MỘT nút (combo/index.html) thì cột co lại
   vừa đúng nút đó — không có chỗ trống thừa. */
#st-menu {
  position: fixed;
  top: calc(var(--st-menu-top, 69px) + env(safe-area-inset-top, 0px));
  right: var(--st-menu-right, 16px);
  z-index: 10009;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  /* ĐỒNG BỘ VỚI SIDEBAR CỦA TOUR. Chữ sidebar do 3DVista VẼ TRÊN CANVAS (mỗi mục
     một canvas 185×45) nên computed style của DOM ở đó vô nghĩa — phải đọc thuộc
     tính của component mới ra sự thật: `fontFamily: "DVN - Gustavo"`, 14px.
     Hai tên họ font, CÓ CHỦ Ý xếp theo thứ tự này:
       · "DVN - Gustavo"  — đúng face của skin, khai ở vr-360/fonts.css, nhưng CHỈ
         index.htm nạp tệp đó;
       · "DVN Gustavo"    — cùng kiểu chữ, tự lưu ở welcome/assets/font/, khai trong
         js/floorplan.css mà CẢ BA trang (index/combo/map) đều nạp.
     Be Vietnam Pro giữ làm lớp đỡ cuối. */
  font-family: "DVN - Gustavo", "DVN Gustavo", 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

#st-menu[hidden] {
  display: none;
}

/* ══ CTA = NÚT BẤM KHỐI NỔI, MẶT VÀNG RỰC ═════════════════════════════════
   (2026-08-21 đợt 5 — "cần nút combo CHÓI và đặc sắc hơn về mặt thị giác")

   ⚠ ĐỔI MÀU MẶT NÚT TỪ XANH SANG VÀNG — có lý do đo được, không phải đổi gu:
   nền của nút này là ảnh 360° của một CÔNG VIÊN, tức phần lớn khung hình là cây
   xanh và trời xanh. Một nút xanh lá đậm (#0e6b2e) đặt lên đó là màu đặt cạnh
   chính họ màu của nền → không đời nào "chói" được, dù có thêm bao nhiêu hiệu ứng.
   Vàng #FFC02E là màu SÁNG NHẤT trong bảng màu của công viên (dải băng trong crest)
   và nằm ở phía đối diện của bánh xe màu so với cây cối → tách khỏi nền ở mọi cảnh,
   cả cảnh trời sáng lẫn cảnh tán cây tối.

   XANH VẪN LÀ MÀU CHỦ ĐẠO CỦA TRANG, chỉ đảo vai trong nút này: xanh nay là MỰC
   (chữ + mũi nhọn) và ĐĨA BIỂU TƯỢNG, nên nút vẫn nói cùng ngôn ngữ với phần còn
   lại. Chữ xanh #0B3B1C trên vàng #FFC02E đạt ~7.8:1.

     ┌──────────────────────────┐
     │ (◉)  VÉ COMBO         ›  │  mặt vàng PHẲNG + viền TRẮNG 2.5px
     └──────────────────────────┘
      ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔  gờ dày 4px hổ phách đậm — khối, không phải bóng mờ

   BA THỨ LÀM NÊN CÁI "CHÓI", xếp theo mức đóng góp đo được:
     1. bản thân màu vàng (độ sáng cao nhất bảng màu) — 80% hiệu quả;
     2. viền TRẮNG 2,5px: tách nút khỏi MỌI nền ảnh, kể cả khi cảnh 360° đổi sang
        tông vàng/nắng — không có nó thì nút chìm vào mấy cảnh cổng tam quan sơn son;
     3. hai đốm LẤP LÁNH nảy ở hai góc + vệt loá quét ngang mạnh hơn (.5 → .75).
   Giữ nguyên từ đợt 4: hình khối có gờ, nhịp tự-bấm-xuống, không gradient. */
.st-cta {
  /* MẶT KÍNH MỜ (2026-08-21 đợt 9, chỉnh lại đợt 10): giữ NGUYÊN màu và thiết kế,
     chỉ còn là tấm KÍNH ÁM VÀNG — đục **45%**, nhìn xuyên thấy cảnh 360° phía sau.
     Vẫn là cái nút bấm: gờ, nhịp nhún, hover nửa-lún, viền trắng đều còn nguyên.
     ⚠ Bản đầu để đục 80% (hiểu "trong suốt 80%" thành "còn 80% đục") — nhìn ra thì
     y như nút đặc: vàng phủ lên nền trời sáng thì 20% nền lọt qua gần như không đổi
     màu. Phải xuống ~1/3 mới ĐỌC RA là kính.
     ⚠ Alpha và `backdrop-filter` phải đi CÙNG NHAU: filter làm mờ thứ NẰM SAU phần
     tử nên chỉ thấy được khi nút thật sự trong suốt; hạ alpha mà quên blur thì nút
     chỉ trông bạc màu. Kèm tiền tố `-webkit-` cho Safari.
     ⚠ CHỌN SỐ BẰNG CÁCH CHỤP TRÊN NỀN CÓ CHI TIẾT, không phải trên nền trời: kính
     đặt trên mảng trời trắng trơn thì đục bao nhiêu cũng "không thấy trong" — không
     có gì phía sau để mà nhìn xuyên. Đã thử 32%: trên nền trời nó bạc thành màu kem,
     mất hẳn nhận dạng vàng. 45% + `saturate(1.8)` là chỗ vừa: đặt trên vùng ảnh nhiều
     chi tiết thì thấy rõ cảnh nhoè phía sau, đặt trên trời vẫn còn ra vàng.
     `brightness(1.06)` chỉ nhấc nền lên một chút cho chữ xanh đậm khỏi tụt tương phản
     khi khách vào cảnh tối (tán cây, trong đền).
     ⚠ Gờ nút là `box-shadow` nên nằm NGOÀI hộp → không được blur theo; nó chỉ trong
     suốt như mặt nút. Chấp nhận: gờ chỉ dày 4px, không ai đọc ra là "kính". */
  --tk-face: rgba(255, 186, 20, .45);  /* vàng rực, PHẲNG, đục 45% → thấy nền xuyên qua */
  --tk-edge: rgba(201, 138, 0, .62);   /* gờ — chính màu ấy đậm hơn, KHÔNG gradient */
  --tk-ink: #0B3B1C;             /* mực: chữ + mũi nhọn (~7.8:1 trên mặt vàng) */
  --tk-green: #0e6b2e;           /* xanh thương hiệu — nay là nền đĩa biểu tượng */
  --tk-lift: 4px;                /* độ dày gờ = độ cao nút so với mặt phẳng */

  box-sizing: border-box;
  position: relative;
  overflow: hidden;              /* cắt vệt loá quét ngang theo bo góc */
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px 0 7px;
  border: 2.5px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  background: var(--tk-face);
  backdrop-filter: blur(14px) saturate(1.8) brightness(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.06);
  color: var(--tk-ink);
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;          /* KHÔNG viết `font: … inherit` — xem js/lang-switch.css */
  /* Lớp 1 = GỜ (blur 0 → mảng màu đặc). Lớp 2 = bóng đổ thật để tách khỏi ảnh 360°.
     Cả hai được nhắc lại trong keyframes bên dưới → sửa số ở đây phải sửa cả ở đó. */
  box-shadow: 0 var(--tk-lift) 0 var(--tk-edge), 0 8px 16px rgba(11, 59, 28, .42);
  animation: st-cta-press 3.2s cubic-bezier(.3, .9, .35, 1) infinite;
}

/* Đĩa tròn XANH ôm biểu tượng trắng — chỗ neo màu thương hiệu trong một nút vàng,
   và là mảng tối duy nhất nên mắt bắt vào nó trước cả chữ. */
.st-cta-ic {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Đĩa đục HƠN mặt nút (.88) chứ không đặc: nó là chỗ neo màu thương hiệu và là nền
     của biểu tượng trắng — để trong như mặt kính thì hình trắng chìm mất. */
  background: rgba(14, 107, 46, .88);
}

.st-cta-ic svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: #fff;
}

.st-cta-body {
  display: flex;
  align-items: center;
  font-weight: 700;              /* 500/700 là hai face CÓ THẬT của DVN Gustavo */
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Mũi nhọn chỉ hướng đi — vẽ bằng hai cạnh viền của một ô vuông xoay 45°, KHÔNG
   dùng ký tự trong `content`: chữ trong pseudo bị một số trình đọc màn hình đọc
   lên, mà đây thuần trang trí. Nó nhích sang phải trong nhịp bấm (keyframes dưới). */
.st-cta::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;             /* hai nút bằng bề ngang → mũi nhọn thẳng hàng nhau */
  border-right: 2.4px solid var(--tk-ink);
  border-top: 2.4px solid var(--tk-ink);
  transform: rotate(45deg);
  animation: st-cta-nudge 3.2s ease-out infinite;
}

/* HOVER (chỉ máy CÓ chuột) = nút bị ấn xuống MỘT NỬA: dịch xuống 2px, gờ còn 2px —
   đúng nửa đường của cú bấm thật (4px / gờ 0) bên dưới. Nhờ vậy rê chuột vào là
   thấy nút "nhả lún" một nấc, bấm tiếp thì lún nốt: một chuyển động liên tục chứ
   không phải hai hiệu ứng rời.
   ⚠ PHẢI gate `hover: hover`: trên máy cảm ứng, `:hover` DÍNH LẠI sau khi chạm nên
   nút sẽ nằm im ở trạng thái lún nửa chừng cho tới khi khách chạm chỗ khác.
   ⚠ PHẢI `animation: none`: nhịp nghỉ đang hoạt hoá đúng hai thuộc tính này, mà
   animation thắng khai báo thường — không tắt thì hover không có tác dụng gì. */
@media (hover: hover) and (pointer: fine) {
  .st-cta {
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  }

  .st-cta:hover {
    background: rgba(255, 210, 77, .46);
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--tk-edge), 0 4px 10px rgba(11, 59, 28, .4);
    animation: none;
  }
}

/* Bấm THẬT = nút lún hẳn xuống gờ: dịch xuống đúng --tk-lift và gờ biến mất. Cùng
   ngôn ngữ với nhịp nghỉ bên dưới nên cú bấm của khách nối liền vào đó. */
.st-cta:active {
  transform: translateY(var(--tk-lift));
  box-shadow: 0 0 0 var(--tk-edge), 0 2px 6px rgba(11, 59, 28, .45);
  animation: none;
}

.st-cta:focus-visible {
  outline: 3px solid var(--tk-green);
  outline-offset: 3px;
}

/* ── NHỊP NGHỈ 3,2s: nút TỰ BẤM XUỐNG rồi bật lên ────────────────────────
   Cử chỉ nói đúng việc của nút: nó nhún xuống như có người ấn, gờ dẹp lại, rồi bật
   lên quá đà một nhịp. Vệt loá quét ngang, mũi nhọn nhích sang phải và hai đốm lấp
   lánh nảy lên ĐÚNG lúc nút bật lên — bốn lớp cùng chu kỳ 3,2s, cùng mốc 0, đọc ra
   MỘT cử chỉ. Gọn trong ~0,9s đầu, phần còn lại đứng yên: nút này ở trên màn suốt
   buổi tham quan, động đậy liên tục là phiền chứ không phải mời gọi. */
@keyframes st-cta-press {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 var(--tk-lift) 0 var(--tk-edge), 0 8px 16px rgba(11, 59, 28, .42);
  }
  5% {                                   /* lún hẳn xuống gờ */
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--tk-edge), 0 2px 6px rgba(11, 59, 28, .45);
  }
  12% {                                  /* bật lên quá đà */
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--tk-edge), 0 13px 20px rgba(11, 59, 28, .38);
  }
  18%, 22% {
    transform: translateY(0);
    box-shadow: 0 var(--tk-lift) 0 var(--tk-edge), 0 8px 16px rgba(11, 59, 28, .42);
  }
}

@keyframes st-cta-nudge {
  0%, 6%, 22%, 100% { transform: rotate(45deg) translate(0, 0); }
  12%               { transform: rotate(45deg) translate(3px, -3px); }   /* = sang phải 4px */
}

/* Vệt LOÁ quét ngang — trắng .75 (đợt trước .5): trên mặt vàng sáng, một vệt mờ
   không đọc ra là loá; phải gần trắng mới thấy. */
.st-cta::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  width: 38px;
  left: -74px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(18deg);
  pointer-events: none;
  animation: st-cta-shine 3.2s ease-out infinite;
}

@keyframes st-cta-shine {
  0%, 8%   { left: -74px; }
  26%      { left: 115%; }
  100%     { left: 115%; }
}

/* ── HAI ĐỐM LẤP LÁNH ────────────────────────────────────────────────────
   PHẢI treo trên #st-menu, KHÔNG phải trên .st-cta: nút có `overflow: hidden` (để
   cắt vệt loá) nên mọi thứ ló ra ngoài mép nút đều bị xén — mà đốm lấp lánh thì
   phải nằm ĐÈ LÊN mép mới ra dáng ánh sáng loé. Container không cắt gì.
   Hình 4 cánh vẽ bằng `clip-path` trên một ô vuông trắng: nét gọn ở mọi cỡ, không
   cần ảnh, không cần font biểu tượng. */
#st-menu::before,
#st-menu::after {
  content: "";
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  /* Quầng trắng quanh cánh sao: không có nó thì đốm nằm trên viền trắng của nút là
     mất hút, mà đúng lúc nút bật lên thì hai thứ chồng nhau. */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95));
  pointer-events: none;
  opacity: 0;
}

#st-menu::before {                        /* đốm to — góc trên-phải cụm */
  top: -8px;
  right: 4px;
  width: 21px;
  height: 21px;
  animation: st-cta-spark 3.2s ease-out infinite;
}

/* Đốm nhỏ ở góc DƯỚI-TRÁI cụm và lệch nhịp .71s (= .55s của nút dưới + .16s như
   trước): cụm xếp dọc nên nó rơi đúng cạnh nút thứ hai, loé ngay sau khi nút ấy
   nhún — hai đốm vì thế chia nhau hai đầu cụm thay vì cùng nháy một chỗ. */
#st-menu::after {
  bottom: -5px;
  left: -6px;
  width: 14px;
  height: 14px;
  animation: st-cta-spark 3.2s ease-out infinite .71s;
}

@keyframes st-cta-spark {
  0%, 6%    { opacity: 0; transform: scale(.2) rotate(0deg); }
  13%       { opacity: 1; transform: scale(1) rotate(35deg); }
  26%, 100% { opacity: 0; transform: scale(.3) rotate(70deg); }
}

/* Nút thứ hai LỆCH NHỊP .55s: hai nút nhún cùng lúc thì đọc ra như cả cụm bị giật
   một cái; lệch nhau thì thành hai vật rời, và mắt bị kéo qua lại giữa chúng. Áp cho
   CẢ ba lớp (nhún · loá · mũi nhọn) để mỗi nút vẫn là một cử chỉ liền mạch. */
#st-menu > .st-cta:nth-child(2),
#st-menu > .st-cta:nth-child(2)::before,
#st-menu > .st-cta:nth-child(2)::after {
  animation-delay: .55s;
}

.st-cta-short {
  display: none;
}

/* ── DESKTOP (≥641px): HAI NÚT NẰM NGANG, LÊN HÀNG TRÊN CÙNG ─────────────
   (2026-08-21 đợt 9) Cột dọc hai nút chiếm 96px chiều cao ở mép phải — trên màn
   rộng thì thừa chỗ ngang mà lại tốn chỗ dọc, nên xếp ngang cùng hàng với viên cờ
   ngôn ngữ: [Mua combo][Mua vé][🇻🇳] cùng `top 15`. Đổi lại, dải ngay dưới nút ngôn
   ngữ trống ra để danh sách ngôn ngữ xổ THẲNG XUỐNG (js/lang-switch.css).
   `right` neo theo `--st-lang-w` ĐO THẬT (viên cờ 46px) — trang không có nút ngôn
   ngữ (combo/index.html, map.html) tự khai `--st-menu-right: 16px`.
   ⚠ ĐIỆN THOẠI KHÔNG ĐỔI: cột dọc 69/16 vẫn là MẶC ĐỊNH, mọi luật ở đây đều nằm
   trong `min-width: 641px`. */
@media (min-width: 641px) {
  #st-menu {
    --st-menu-top: 15px;
    --st-menu-right: calc(16px + var(--st-lang-w, 46px) + 10px);
    flex-direction: row;
  }
}

/* ── ĐIỆN THOẠI (≤640px): THU VỀ ĐÚNG CỠ NÚT THU-GỌN Ở GÓC DƯỚI ─────────
   (2026-08-21 đợt 11, yêu cầu) Nút CTA cao 44px × 2 + nút ngôn ngữ 46px là ba mảng
   lớn chồng lên cảnh 360° ở góc phải; trên điện thoại chúng ăn mất một phần tư
   chiều cao màn. Nay cao **34px** — đúng bằng `#fp-fabs-toggle` (nút thu/mở cụm
   nút nổi góc dưới-trái, js/floorplan.css), nên cả trang có MỘT cỡ "nút phụ" duy
   nhất thay vì ba cỡ khác nhau.
   Khối `@media (max-width: 360px)` cũ bỏ luôn: 34px + chữ 11.5px đã vừa cả khổ 320
   (đo: cụm rộng 145px, mép trái x159), không cần một nấc nhỏ hơn nữa.
   Gờ mỏng theo (4 → 3px), nếu không nút thấp mà gờ vẫn dày thì trông nặng đầu. */
@media (max-width: 640px) {
  #st-menu {
    gap: 6px;
  }

  .st-cta {
    --tk-lift: 3px;
    height: 34px;
    padding: 0 11px 0 5px;
    gap: 7px;
    border-width: 2px;
    border-radius: 11px;
  }

  .st-cta-ic {
    width: 24px;
    height: 24px;
  }

  .st-cta-ic svg {
    width: 14px;
    height: 14px;
  }

  .st-cta-body {
    font-size: 11.5px;
    letter-spacing: .4px;
  }

  .st-cta::after {
    width: 5px;
    height: 5px;
    border-right-width: 2px;
    border-top-width: 2px;
  }

  /* Đốm lấp lánh co theo cụm, nếu không hai đốm 21/14px sẽ to gần bằng chính nút. */
  #st-menu::before {
    top: -6px;
    right: 3px;
    width: 15px;
    height: 15px;
  }

  #st-menu::after {
    bottom: -4px;
    left: -5px;
    width: 10px;
    height: 10px;
  }
}

/* Tôn trọng thiết lập "giảm chuyển động": vé vẫn là vé, chỉ bỏ nhịp nảy + vệt sáng. */
@media (prefers-reduced-motion: reduce) {
  .st-cta,
  .st-cta::before,
  .st-cta::after,
  #st-menu::before,
  #st-menu::after {
    animation: none;
  }

  #st-logo,
  #st-logo:hover {
    transition: none;
    transform: none;
  }
}