/**
 * Thanh điều hướng dưới + bảng "Thêm" — DÙNG CHUNG cho cả trang chủ và Dashboard.
 *
 * Tách riêng khỏi htms/styles.css để Dashboard (nền Tailwind) dùng được cùng một
 * component với trang chủ (nền CSS thuần), thay vì mỗi bên một bản rồi lệch nhau.
 * Chỉ chứa style của thanh nav — không kéo theo phần còn lại của design system.
 */

.bottom-nav,
.more-sheet {
  display: none;
}

body.more-sheet-open {
  overflow: hidden;
}

body:not(.is-admin) #moreSheetAdminLink {
  display: none !important;
}

/**
 * Ghim vị trí ngay tại component, không để layout ngoài ghi đè.
 *
 * Layout Dashboard có quy tắc quét rộng (body.htms-app > nav / > div) ép position:relative để
 * đẩy nội dung lên trên nền động. Quy tắc đó có độ ưu tiên cao hơn class đơn, từng khiến thanh
 * nav rơi khỏi đáy màn hình xuống cuối trang. Khai báo dưới đây có độ ưu tiên 0,2,1 nên luôn
 * thắng, kể cả khi sau này có ai thêm lại quy tắc quét rộng tương tự.
 */
body .bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  transition: opacity 0.2s ease;
}

body .more-sheet {
  position: fixed;
  inset: 0;
  z-index: 1500;
}

/**
 * Khi bảng "Thêm" mở: ẩn hẳn thanh điều hướng phía sau.
 *
 * Thanh nav được đặt z-index: 9999 !important (xem quy tắc trong media query bên dưới) — CAO HƠN
 * bảng "Thêm" (1500) — nên nó vẽ ĐÈ LÊN phần đáy của bảng, nuốt mất mục cuối cùng là nút
 * "Đăng xuất ví". Nền bảng lại trong mờ nên càng lộ icon/chữ của nav xuyên qua.
 *
 * Không hạ z-index của nav (giá trị đó đang giải quyết việc khác), mà ẩn hẳn nav trong lúc bảng
 * mở — lúc này nav đang bị bảng phủ kín, ẩn đi không mất chức năng nào.
 * Cần !important vì quy tắc gốc của nav cũng dùng pointer-events: auto !important.
 */
body.more-sheet-open .bottom-nav {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Giữ khoảng hở dưới cùng cho mục cuối, tính cả vùng home indicator của iPhone.
   Có giá trị dự phòng để nếu layout nào chưa khai báo --safe-bottom thì dòng padding
   vẫn hợp lệ (thiếu fallback là cả khai báo bị bỏ qua, nút cuối dính sát mép máy). */
body .more-sheet-panel {
  padding-bottom: calc(20px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
}

@media (max-width: 879px) {
  /* Bottom nav — glass translucent (Mobile SoT), không solid white */
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(var(--bn-cols, 4), minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999 !important;
    pointer-events: auto !important;
    background: var(--nav-glass);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid rgba(255, 255, 255, 0.45);
    column-gap: 8px;
    padding: 6px 12px calc(6px + var(--safe-bottom));
    box-shadow: 0 -8px 28px rgba(6, 45, 42, 0.12);
  }
  html.dark .bottom-nav {
    background: rgba(6, 45, 42, 0.94);
    border-top-color: rgba(148, 163, 184, 0.14);
  }
  .bottom-nav-guest:not([hidden]),
  .bottom-nav-member:not([hidden]) {
    display: contents;
  }
  .bottom-nav-guest[hidden],
  .bottom-nav-member[hidden] {
    display: none !important;
  }
  .bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px 4px;
    border: 0;
    border-radius: 14px;
    background: none;
    /* #94a3b8 (slate-400) trên nền thanh sáng chỉ đạt tương phản 2.3 — đo bằng Chrome trên
       pixel thật, dưới xa ngưỡng 4.5. Đổi sang slate-600 cho lên ~8.0 mà vẫn nhạt hơn rõ
       so với màu teal của mục đang chọn, nên thứ bậc hiển thị không đổi. */
    color: #475569;
    font: inherit;
    /* Đặt bằng px chứ không phải rem: hai layout có cỡ gốc khác nhau nên 0.6875rem ra 11px
       ở khu tài khoản nhưng 11.4px ở trang chủ — cả hai đều dưới sàn 12px.
       Nâng 12 -> 13px ngày 20-08-2026 theo sàn cỡ chữ mới của trang. */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    width: 100%;
    transition: color .15s ease, background .15s ease, transform .12s ease;
  }
  /* Nhãn KHÔNG được gãy dòng. Ở 12px mọi nhãn vừa một dòng, nhưng 13px thì "Đăng nhập"
     tràn xuống dòng thứ hai, làm ô đó cao hơn hẳn bốn ô còn lại và lệch cả hàng.
     Đệm ngang về 1px để nhường hết bề ngang ô cho chữ. */
  .bottom-nav-item > span {
    white-space: nowrap;
  }
  .bottom-nav-item {
    padding-left: 1px;
    padding-right: 1px;
  }

  .bottom-nav-item:active {
    transform: scale(0.94);
  }
  .bottom-nav-item .bn-ico {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }
  .bottom-nav-item.is-active {
    color: var(--teal);
  }
  .bottom-nav-item.is-active::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    width: 28px;
    height: 3px;
    margin-left: -14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), var(--teal-bright, #14b8a6));
  }
  .bottom-nav-item .bn-dot {
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #fff;
  }
  html.dark .bottom-nav-item .bn-dot {
    border-color: #0f172a;
  }
  .more-sheet-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #99f6e4;
  }
  .more-sheet-item.is-active .more-sheet-ico,
  .more-sheet-item:hover .more-sheet-ico {
    color: #5eead4;
  }

  /* More sheet */
  .more-sheet {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
    visibility: hidden;
  }
  .more-sheet.open {
    display: block;
    pointer-events: auto;
    visibility: visible;
  }
  .more-sheet[hidden] {
    display: none !important;
  }
  .more-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 45, 42, 0.5);
  }
  /* Panel dùng giá trị viết cứng (không phải var(--surface)/--ink) — vì file này nạp ở CẢ 2
     layout với 2 bộ token gốc khác nhau (styles.css vs htms-app.css); nếu để var, Dashboard ra
     nền trắng đặc (--surface: #fff) trong khi trang chủ ra khác, đúng lỗi "nền trắng/xanh phủ
     toàn giao diện, không đồng bộ trang chủ". Viết cứng kính teal tối để CHẮC CHẮN giống nhau. */
  .more-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(88vh, 720px);
    overflow: auto;
    background: rgba(8, 59, 54, 0.76);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 14px 8px calc(14px + var(--safe-bottom));
    transform: translateY(110%);
    transition: transform 0.28s ease;
  }
  .more-sheet.open .more-sheet-panel {
    transform: translateY(0);
  }
  .more-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 12px 14px;
  }
  .more-sheet-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .more-sheet-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ccfbf1;
    color: var(--teal-deep);
    font-weight: 700;
    flex-shrink: 0;
  }
  .more-sheet-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .more-sheet-user-meta strong {
    font-size: 1rem;
    color: #ffffff;
  }
  .more-sheet-user-meta span {
    font-size: 0.8125rem;
    color: #cdf3ea;
  }
  .more-sheet-list,
  .more-sheet-footer {
    display: flex;
    flex-direction: column;
  }
  .more-sheet-footer {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .more-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
  }
  .more-sheet-item:hover,
  .more-sheet-item:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .more-sheet-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
  }
  .more-sheet-item-admin,
  .more-sheet-item-logout {
    color: #f87171;
  }
}

/* ==========================================================================
   Drawer hamburger (menu trên header, mobile) — ĐỒNG BỘ với bảng "Thêm"

   Trước đây hai bảng điều hướng của cùng một app lại là hai phong cách khác hẳn:
     - bảng "Thêm" (.more-sheet-panel): kính teal TỐI, chữ sáng, thấy nền sóng phía sau
     - drawer hamburger: nền TRẮNG đục, chữ tối
   Ngoài chuyện lệch nhau, nền trắng còn khiến nội dung trang phía sau lộ lên loang lổ
   sau lớp chữ. Đưa drawer về đúng bộ token của .more-sheet-panel: cùng màu nền, cùng
   blur, cùng viền, cùng bảng màu chữ — nền sóng động vẫn hiện xuyên qua như các bề mặt
   kính khác trong hệ thống.

   Dùng !important vì các lớp tiện ích của Tailwind trong blade (text-gray-700,
   divide-gray-100 …) nằm rải khắp hàng chục phần tử con; ghi đè ở một chỗ gọn hơn nhiều
   so với sửa từng lớp một, và cũng dễ giữ đồng bộ về sau.
   ========================================================================== */
.htms-mobile-drawer {
  background: rgba(8, 59, 54, 0.76) !important;
  backdrop-filter: blur(10px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 0 0 20px 20px;
}

/* Đường kẻ ngăn cách giữa các mục */
.htms-mobile-drawer .divide-y > * + *,
.htms-mobile-drawer [class*="border-t"],
.htms-mobile-drawer [class*="divide-gray"] > * + * {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Chữ chính của từng mục — trắng, đủ đậm để sắc nét trên nền tối */
.htms-mobile-drawer span,
.htms-mobile-drawer a,
.htms-mobile-drawer button {
  color: #ffffff !important;
}

/* Icon dẫn hướng và mũi tên: mint dịu, giữ đúng thứ bậc so với chữ chính */
.htms-mobile-drawer i[data-lucide],
.htms-mobile-drawer svg {
  color: #99f6e4 !important;
}

/* Mục đang mở: dùng đúng mint sáng như .more-sheet-item.is-active */
.htms-mobile-drawer .text-shopee,
.htms-mobile-drawer .text-shopee span,
.htms-mobile-drawer [class*="text-shopee"] {
  color: #5eead4 !important;
}

/* Hai mục cảnh báo (Trang quản trị / Đăng xuất) giữ sắc đỏ nhưng phải sáng lên mới
   đọc được trên nền tối — #dc2626 nguyên bản dành cho nền trắng. */
.htms-mobile-drawer .text-red-600,
.htms-mobile-drawer .text-red-600 span,
.htms-mobile-drawer span.text-red-600,
.htms-mobile-drawer .text-red-500,
.htms-mobile-drawer .text-red-400,
.htms-mobile-drawer .text-red-500 i,
.htms-mobile-drawer i.text-red-500 {
  color: #fecdd3 !important;
}

/* Nút Đăng nhập / Đăng ký cho khách: nền phải là kính, không phải xám đục */
.htms-mobile-drawer [class*="bg-gray-50"],
.htms-mobile-drawer [class*="bg-gray-100"] {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Lớp nền mờ phía sau drawer — mảnh ghép còn thiếu để hai bảng điều hướng thật sự giống nhau.

   Bảng "Thêm" có .more-sheet-backdrop (rgba(11,28,26,.45)) phủ kín màn hình phía sau, nên nội
   dung trang không lộ lên. Drawer thì không có, nên dù nền đã là kính teal tối, chữ của trang
   ("DANH SÁCH ĐƠN HÀNG", thẻ đơn hàng, ảnh ví) vẫn xuyên qua 28% còn lại và chồng vào chữ menu.
   backdrop-filter không cứu được: đo trên Chrome thấy phần phía sau KHÔNG hề bị làm mờ, vì lớp
   nền động nằm ở stacking context khác.

   Drawer đã có z-index 30 + position:absolute nên tự tạo stacking context; đặt z-index -1 cho
   lớp này khiến nó nằm sau nền của drawer nhưng vẫn trên toàn bộ nội dung trang. */
.htms-mobile-drawer::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(6, 45, 42, 0.55);
}

/* Nền drawer đặc hơn bảng "Thêm" một chút (0.85 thay vì 0.72): drawer nằm ngay dưới header,
   phía sau nó là vùng nội dung dày đặc chữ và ảnh, trong khi bảng "Thêm" trượt lên từ đáy nơi
   nền phần lớn là sóng trơn. Vẫn nhìn xuyên thấy nền động, chỉ đủ để chữ menu sắc nét. */
.htms-mobile-drawer {
  background: rgba(8, 59, 54, 0.88) !important;
}

/* ==========================================================================
   Drawer TRANG CHỦ (.mobile-nav-panel) — đồng bộ nốt với hai bảng còn lại

   Trang chủ và khu tài khoản dùng HAI component drawer khác nhau: trang chủ là
   .mobile-nav / .mnav-* khai báo trong htms/styles.css, khu tài khoản là
   .htms-mobile-drawer trong app.blade.php. Lần trước tôi mới sửa cái thứ hai, nên
   trang chủ vẫn là nền trắng đục (background: var(--surface)) trong khi bảng "Thêm" và
   drawer dashboard đã là kính teal tối — đúng chỗ lệch còn lại.

   File này nạp SAU htms/styles.css ở cả hai layout nên các khai báo dưới đây thắng.
   Dùng cùng bộ giá trị viết cứng như .more-sheet-panel để ba bảng chắc chắn giống nhau,
   không phụ thuộc token gốc (hai layout có hai bộ token khác nhau).
   ========================================================================== */
@media (max-width: 879px) {
  .mobile-nav-panel {
    /* Giữ nguyên tông màu đang dùng, chỉ hạ độ đục 0.92 -> 0.85 cho khớp .htms-mobile-drawer
       của khu tài khoản. Ở 0.92 drawer trang chủ phủ toàn màn hình nên gần như đặc kín, nhìn
       lệch hẳn so với bảng "Thêm"; 0.85 vẫn thấy nền sóng phía sau mà chữ vẫn sắc. */
    background: rgba(8, 59, 54, 0.85) !important;
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
  }

  /* Chữ của mục menu — trắng, cùng cấp với .more-sheet-item */
  .mobile-nav-panel .mnav-item {
    color: #ffffff !important;
  }
  .mobile-nav-panel .mnav-item:hover,
  .mobile-nav-panel .mnav-item:active {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Icon dẫn hướng: mint dịu, giữ đúng thứ bậc so với chữ chính */
  .mobile-nav-panel .mnav-ico {
    color: #99f6e4 !important;
  }
  .mobile-nav-panel .mnav-item.is-active,
  .mobile-nav-panel .mnav-item.is-active .mnav-ico {
    color: #5eead4 !important;
  }

  /* Mục "Trang quản trị": #dc2626 là đỏ dành cho nền trắng, trên nền tối phải sáng lên */
  .mobile-nav-panel .mnav-item-admin,
  .mobile-nav-panel .mnav-item-admin .mnav-ico {
    color: #fecdd3 !important;
  }

  /* Đường kẻ, nhãn phụ và mũi tên trong drawer */
  .mobile-nav-panel .mnav-item + .mnav-item,
  .mobile-nav-panel .mnav-list,
  .mobile-nav-panel .mnav-top {
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  .mobile-nav-panel .nav-icon-btn {
    color: #ffffff !important;
  }
}

/* ==========================================================================
   NÚT BA GẠCH DÙNG CHUNG (.nav-toggle)

   Trang chủ và khu tài khoản trước đây là hai nút hoàn toàn khác nhau: khác kích thước
   (44 với 36), khác bo góc, khác nền, khác độ dài vạch giữa, và chỉ một bên có hoạt ảnh.

   Bản gốc .nav-toggle của trang chủ (htms/styles.css) đã đúng chuẩn: 44x44, ba vạch đều
   nhau, bấm vào thì hai vạch chéo lại thành dấu × qua [aria-expanded="true"]. Nên lấy nó
   làm chuẩn và chép sang đây — file này nạp ở CẢ HAI layout, còn styles.css thì chỉ nạp ở
   trang chủ.

   Khu tài khoản đổi trạng thái bằng Alpine, trang chủ đổi bằng JS thuần; cả hai đều ghi
   aria-expanded nên cùng một quy tắc CSS phục vụ được cả hai, không cần biết bên nào dùng
   cơ chế gì.

   Kích thước khai báo bằng PX: cỡ chữ gốc hai bên khác nhau (16px với 17.6px) nên mọi đơn
   vị rem sẽ cho ra hai kết quả lệch nhau. */
body .nav-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
body .nav-toggle:focus-visible {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}
body .nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #0b1c1a;
  transition: transform 0.2s, opacity 0.2s;
}
body .nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}
body .nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
body .nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Drawer khu tài khoản: đưa PHẦN NHÌN về giống drawer trang chủ

   Đối chiếu hai bên thấy khác ở: đường kẻ ngăn mục, cỡ mũi tên, khoảng cách dòng, và độ
   đục của nền. Trang chủ (.mobile-nav-panel) sạch hơn nên lấy làm chuẩn.
   ========================================================================== */

/* Bỏ đường kẻ ngăn giữa các mục — trang chủ không có, và bỏ đi thì danh sách nhẹ mắt hơn. */
.htms-mobile-drawer .divide-y > * + *,
.htms-mobile-drawer [class*="border-t"],
.htms-mobile-drawer [class*="divide-gray"] > * + * {
  border-top-color: transparent !important;
  border-color: transparent !important;
}

/* Khoảng cách dòng bằng trang chủ (.mnav-item dùng padding 14px 12px). */
.htms-mobile-drawer a,
.htms-mobile-drawer button[type="submit"] {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Mũi tên chỉ hướng: trang chủ dùng cỡ nhỏ và mờ hơn, đây đang to và đậm. */
.htms-mobile-drawer i[data-lucide="chevron-right"],
.htms-mobile-drawer svg.lucide-chevron-right {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.55;
}

/* Nền đặc hơn cho khớp trang chủ: ở mức cũ, số dư và các thẻ phía sau lộ lên rõ,
   trong khi drawer trang chủ che kín hoàn toàn. */
.htms-mobile-drawer {
  background: rgba(8, 59, 54, 0.97) !important;
}

/* ==========================================================================
   Tự ẩn/hiện header + thanh điều hướng dưới khi lướt

   Chỉ có tác dụng khi <body> mang class .nav-auto-hide, và class đó chỉ do
   public/htms/auto-hide-nav.js gắn. Trang nào không nạp file JS đó thì không có transition
   nào được gắn vào header hay nav — tức hành vi không đổi một chút nào.

   Hai layout có hai header khác tên: trang chủ dùng .site-header, khu tài khoản dùng
   .htms-app-header. Cả hai đều position: sticky nên vẫn giữ chỗ trong bố cục khi bị đẩy
   lên, nội dung phía dưới không dịch chuyển.

   Dùng transform thay vì display/height: hai thứ sau buộc tính lại bố cục và làm nội dung
   nhảy; transform chạy trên lớp hợp thành nên không đụng dòng chảy trang.

   Quãng dịch cộng thêm safe-area để trên iPhone tai thỏ, header lên hết phần tai và nav
   xuống hết phần vạch home, không hở một dải mỏng.
   ========================================================================== */
body.nav-auto-hide .site-header,
body.nav-auto-hide .htms-app-header,
body.nav-auto-hide .bottom-nav {
  will-change: transform;
}

body.nav-auto-hide .site-header,
body.nav-auto-hide .htms-app-header {
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Giữ nguyên transition opacity vốn có của nav (dùng khi mở bảng "Thêm"), chỉ thêm transform. */
body.nav-auto-hide .bottom-nav {
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

body.nav-auto-hide.nav-hidden .site-header,
body.nav-auto-hide.nav-hidden .htms-app-header {
  transform: translateY(calc(-100% - var(--safe-top, 0px)));
}

body.nav-auto-hide.nav-hidden .bottom-nav {
  transform: translateY(calc(100% + var(--safe-bottom, 0px)));
}

@media (prefers-reduced-motion: reduce) {
  body.nav-auto-hide .site-header,
  body.nav-auto-hide .htms-app-header,
  body.nav-auto-hide .bottom-nav {
    transition: none;
  }
}

/* ==========================================================================
   NÚT ĐÓNG (×) — bộ thống nhất cho mọi nơi

   Đo trước khi sửa: nút × của toast chỉ 22×22px (dưới xa ngưỡng chạm 44px của iOS) và màu
   để ở độ mờ 70%. Các nút × khác thì nền trong suốt hoàn toàn, nên tuỳ thứ nằm phía sau mà
   lúc rõ lúc chìm — trên ảnh sản phẩm hoặc nền sóng sáng thì gần như mất dấu.

   Cách xử lý: cho mỗi nút một nền tròn bán trong riêng. Nhờ đó dấu × luôn có nền tương phản
   của chính nó, không phụ thuộc thứ đằng sau. Vùng chạm ghim 44×44 bằng px tuyệt đối — không
   dùng rem vì hai layout có cỡ chữ gốc khác nhau (16px với 17.6px).
   ========================================================================== */
body .more-sheet-close,
body .signup-toast-close,
body #mobileNavClose,
body .modal-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(4, 26, 23, 0.42);
  color: #ffffff !important;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.12s ease;
}

body .more-sheet-close:hover,
body .signup-toast-close:hover,
body #mobileNavClose:hover,
body .modal-close:hover {
  background: rgba(4, 26, 23, 0.62);
}

body .more-sheet-close:active,
body .signup-toast-close:active,
body #mobileNavClose:active,
body .modal-close:active {
  transform: scale(0.92);
}

/* Nét × dày hơn một chút cho rõ ở cỡ nhỏ. Áp cho cả dạng SVG lẫn dạng ký tự "×". */
body .more-sheet-close svg,
body #mobileNavClose svg,
body .modal-close svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

/* Nút × của hộp thoại nằm trên nền sáng của thanh tiêu đề dính, nên dùng nền ngược lại. */
body .modal-card .modal-close {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}
body .modal-card .modal-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Vòng focus bàn phím: giữ nhìn thấy được, đổi sang mint cho hợp tông. */
body .more-sheet-close:focus-visible,
body .signup-toast-close:focus-visible,
body #mobileNavClose:focus-visible,
body .modal-close:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 2px;
}

/* ============================================================================
   Nút "Dán link" nhô giữa thanh điều hướng dưới.

   Là một ô thật trong lưới (xem partials/bottom-nav-fab.blade.php), nên số cột đã
   được cộng thêm 1 ở phía Blade — không cần chỉnh grid-template-columns ở đây.

   Đĩa tròn nhô lên khỏi mép thanh 14px. Không nhô cao hơn: thanh này có nền mờ và
   nằm đè lên nội dung trang, đĩa nhô quá sẽ trôi lơ lửng tách khỏi thanh.
   ========================================================================== */
@media (max-width: 879px) {
  .bottom-nav-fab {
    /* Nhãn nút nhô luôn đậm hơn các mục khác vì đây là việc chính của trang. */
    color: #0f766e;
    font-weight: 700;
  }

  .bottom-nav-fab .bn-fab-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -14px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5c451, #d9a233);
    color: #1a1205;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    /* Viền sáng tách đĩa khỏi nền thanh khi hai màu gần nhau. */
    border: 2px solid rgba(255, 255, 255, 0.9);
  }

  .bottom-nav-fab .bn-ico {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
  }

  /* Mục đang chọn có vạch ngang phía trên; nút nhô không cần vì đã nổi sẵn. */
  .bottom-nav-fab.is-active::before {
    display: none;
  }
}

/* ==========================================================================
   Hàng "Chế độ tối" trong bảng "Thêm"

   Dời xuống từ menu 3 gạch (nút đó đã bỏ với người đã đăng nhập). Công tắc gốc là
   .mnav-theme-switch nhưng nó khai báo trong htms/styles.css — khu tài khoản KHÔNG nạp file
   đó, nên chép lại thành lớp riêng ngay đây để bảng "Thêm" chạy giống nhau ở cả hai layout.

   Hàng này không phải liên kết nên không có :hover đổi nền; công tắc tự đẩy sang phải.
   ========================================================================== */
.more-sheet-item-theme {
  cursor: default;
}
.more-sheet-item-theme > span {
  margin-right: auto;
}
.more-theme-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  appearance: none;
  transition: background 0.2s;
}
.more-theme-switch.is-on {
  background: #2dd4bf;
}
.more-theme-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(6, 45, 42, 0.35);
  transition: transform 0.2s;
}
.more-theme-switch.is-on .more-theme-knob {
  transform: translateX(18px);
}
.more-theme-switch:focus-visible {
  outline: 2px solid #7ff0dc;
  outline-offset: 2px;
}
/* Vùng chạm 44px: công tắc chỉ cao 26px cho đẹp hàng, nới phần chạm bằng lớp giả trong
   suốt — cùng cách đã dùng cho nút ẩn/hiện số dư và ba nút trên thẻ ví. */
.more-theme-switch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/**
 * Bàn phím mở lên thì ẩn thanh điều hướng (20-08-2026).
 *
 * Trên WKWebView của iOS, bàn phím làm khung nhìn co lại nhưng position:fixed vẫn neo theo
 * khung nhìn cũ, nên thanh nav bị đẩy lên GIỮA MÀN HÌNH và đè lên đúng ô người dùng đang gõ.
 * Đo trên iPhone thật ở trang Rút tiền: thanh nav nằm chắn ngang giữa "Tên ngân hàng nhận" và
 * "Số tài khoản", che mất một phần biểu mẫu.
 *
 * Ẩn hẳn trong lúc gõ là đúng: đang nhập liệu thì không ai bấm điều hướng, mà thanh nav khuất
 * đi lại còn thêm chỗ nhìn thấy nội dung. Nhả bàn phím ra là hiện lại ngay.
 *
 * Dùng display:none chứ không phải opacity — opacity:0 vẫn chiếm chỗ và vẫn ăn cú chạm ở
 * vùng đó (con nút Dán link nhô lên có pointer-events riêng).
 */
body.bn-dang-go .bottom-nav {
  display: none !important;
}