/**
 * HTMS Design System — Dashboard / member app
 * Đồng bộ token + chrome với trang chủ HTMS. Không đụng homepage markup.
 * Load sau Tailwind + darkmode. Không thay đổi nghiệp vụ.
 */

/* ========== Design tokens (SOURCE OF TRUTH = Mobile Home / htms/styles.css) ========== */
html {
  /* Tăng cỡ chữ 10% cho Dashboard (yêu cầu riêng, khác trang chủ +4%) — đặt trên html để mọi
     rem/Tailwind text-* co giãn theo tỉ lệ, không phải sửa từng class. */
  font-size: 110%;
  /* Nền gốc teal làm lớp dự phòng — xem giải thích đầy đủ ở html trong htms/styles.css.
     Lớp sóng là position:fixed nên không với tới vùng nảy quá đầu trang / safe-area, chỗ đó
     trình duyệt sơn trắng nếu phần tử gốc không có màu. Bình thường không nhìn thấy màu này. */
  background-color: #0b4f4a;
  --ink: #0b1c1a;
  --ink-soft: #243532;
  --muted: #5a6b68;
  --teal: #0f766e;
  --teal-bright: #14b8a6;
  --teal-deep: #115e59;
  --wave-deep: #0b4f4a;
  --wave-mid: #115e59;
  --wave-lit: #0f766e;
  --gold: #e8a317;
  --gold-deep: #c2410c;
  --mist: #e8f5f2;
  --fog: #f4faf8;
  --surface: #ffffff;
  --line: rgba(15, 118, 110, 0.14);
  --shadow: 0 18px 50px rgba(6, 45, 42, 0.12);
  --shadow-sm: 0 8px 24px rgba(6, 45, 42, 0.08);
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  /* Alpha 0.45 chứ không phải 0.1 như trang chủ. Đây là khác biệt CÓ CHỦ Ý giữa hai nơi:

     Trang chủ chỉ có tiêu đề lớn và vài dòng mô tả, để kính thật trong (0.1) cho thấy rõ hình
     polygon phía sau là đẹp và vẫn đọc được. Khu tài khoản thì ngược lại — dày đặc số liệu,
     nhãn 11px, mã đơn, ngày giờ. Đo trên pixel thật bằng Chrome: với alpha 0.1, nền card sau
     khi chồng lên sóng teal cho ra khoảng rgb(30,138,130). Ở nền sáng cỡ đó thì NGAY CẢ CHỮ
     TRẮNG TINH cũng chỉ đạt tương phản 4.27 — dưới ngưỡng 4.5 của chữ nhỏ. Nghĩa là không có
     màu chữ nào cứu được, buộc phải hạ độ sáng của NỀN.

     Với 0.45, nền thành khoảng rgb(16,84,79) và chữ mint #99f6e4 lên ~6.8. Card vẫn trong suốt
     (nhìn xuyên thấy sóng), chỉ là đậm hơn. --glass-bg của trang chủ trong htms/styles.css
     giữ nguyên 0.1, không bị ảnh hưởng. */
  --glass-bg: rgba(240, 253, 250, 0.15);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: none;
  --glass-shadow: 0 2px 10px rgba(6, 45, 42, 0.18);
  --header-glass: rgba(255, 255, 255, 0.86);
  --header-glass-border: rgba(255, 255, 255, 0.55);
  --header-glass-blur: blur(16px) saturate(1.25);
  --nav-glass: rgba(255, 255, 255, 0.92);
  /* Thiếu 3 biến này khiến var(--text-on-wave*) trả về rỗng trên Dashboard — mọi rule của tôi
     tự viết thẳng mã hex nên không lộ ra, nhưng bất kỳ CSS nào khác (kể cả file dùng chung như
     bottom-nav.css) tham chiếu đúng tên biến sẽ mất màu. Khai báo khớp y hệt htms/styles.css. */
  --text-on-wave: #ecfdf8;
  --text-on-wave-soft: #cdf3ea;
  --text-on-wave-mute: #99f6e4;
  --btn-accent: linear-gradient(135deg, var(--gold) 0%, #f59e0b 55%, #ea580c 100%);
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", "Inter", system-ui, sans-serif;
  --header-h: 64px;
  --bottom-nav-h: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Brand → Tailwind shopee bridge */
  --theme-color: #0f766e !important;
  --theme-color-light: #14b8a6 !important;
  --theme-color-dark: #115e59 !important;
  --theme-color-bg: #e8f5f2 !important;
  --theme-bg: #f4faf8 !important;
  --shopee-color: #0f766e !important;
  --shopee-color-light: #14b8a6 !important;
  --shopee-color-dark: #115e59 !important;
  --shopee-color-bg: #e8f5f2 !important;
  --color-shopee: #0f766e !important;
  --color-shopee-light: #14b8a6 !important;
  --color-shopee-dark: #115e59 !important;
  --color-shopee-bg: #e8f5f2 !important;
}

html.dark {
  --ink: #e2e8f0;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --mist: #1e293b;
  --fog: #0f172a;
  --surface: #1e293b;
  --line: rgba(148, 163, 184, 0.16);
  --shadow: 0 18px 50px rgba(6, 45, 42, 0.45);
  --shadow-sm: 0 8px 24px rgba(6, 45, 42, 0.38);
  --theme-bg: #0f172a !important;
}

/* ========== Base / Retina ========== */
body.htms-app {
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* KHÔNG chặn overflow-x ở cấp body: trên iOS việc này làm WebKit bỏ vùng cuộn tăng tốc
     phần cứng của trang, mất quán tính vuốt — vuốt một cái chỉ đi được đoạn ngắn rồi khựng.
     Đã đo cuộn ngang = 0px trên mọi trang nên không cần chặn. Phần tử nào tràn thì xử lý
     tại chính nó bằng max-width: 100%. */
}

/* Stack: motion (-1) → UI (1+).
   TỪNG có lớp "mist wash" ::before (nền trắng/mint phủ toàn viewport, alpha tới 0.78) chèn giữa
   sóng động và nội dung — SAI CĂN BẢN: trang chủ (.htms-has-animated-bg nhưng KHÔNG có .htms-app)
   không hề có lớp này, nên đây là nguyên nhân trực tiếp khiến riêng khu vực dashboard bị phủ mờ
   trắng/xanh toàn màn hình mà trang chủ thì không. Bỏ hẳn để dashboard khớp y hệt trang chủ. */
body.htms-app .htms-animated-bg,
body.htms-app [data-htms-bg] {
  z-index: -1 !important;
}
body.htms-app > header,
body.htms-app > main,
body.htms-app > footer,
/* :not(.bottom-nav): thanh điều hướng dưới dùng chung với trang chủ là thẻ <nav> con trực tiếp
   của body và phải bám đáy màn hình bằng position:fixed. Nếu để quy tắc này quét trúng, nó bị
   ép về position:relative (0,1,2 thắng .bottom-nav 0,1,0) và trôi xuống tận cuối trang —
   đúng lỗi "thanh điều hướng nằm ở dưới cùng". Vị trí của nav do bottom-nav.css tự lo. */
body.htms-app > nav:not(.bottom-nav),
body.htms-app > .htms-bottom-nav,
body.htms-app > [x-cloak],
/* :not(.fixed): TUYỆT ĐỐI không ép position:relative lên bất kỳ div nào Tailwind đã đánh dấu
   .fixed. Trước đây chỉ loại trừ .htms-float, nên mọi div khác có class "fixed" — menu "Thêm"
   (#dashboardMoreSheet), popup cài PWA (#pwa-install-prompt), v.v. — đều bị quy tắc này thắng
   đè (độ ưu tiên 0,3,2 > .fixed của Tailwind 0,1,0), biến chúng thành position:relative. Hậu
   quả: phần tử không còn bám viewport mà TRÔI THEO DÒNG CHẢY TÀI LIỆU BÌNH THƯỜNG, rơi xuống
   tận cuối trang — "hiện ra" theo displayer nhưng nằm ngoài khung nhìn nên nhìn như vô hình,
   bấm không trúng. Loại trừ theo class .fixed một lần cho tất cả, không phải vá từng id.

   :not(.more-sheet): bảng "Thêm" dùng chung với trang chủ là <div class="more-sheet"> con trực
   tiếp của body, dùng CSS thuần (không có class .fixed của Tailwind) nên vẫn lọt qua bộ lọc
   trên. Bị ép relative thì lớp phủ và bảng trượt rơi xuống cuối trang thay vì phủ kín màn hình. */
body.htms-app > div:not(.htms-animated-bg):not([data-htms-bg]):not(.fixed):not(.more-sheet) {
  position: relative;
  z-index: 1;
}

/* ===== Nút nổi bám viewport (back-to-top + liên hệ nhanh) =====
   Quy tắc position:relative ở trên có độ ưu tiên 0,3,2, thắng đứt class .fixed của Tailwind
   (0,1,0) nên trước đây nó biến hai nút nổi thành relative: nút trôi theo nội dung, và thuộc
   tính right/left vốn dành cho fixed lại kéo nút lệch ra ngoài mép màn hình.
   Vì vậy hai nút được gắn class .htms-float để loại khỏi quy tắc đó và ghim lại bằng fixed.

   z-index 35: cao hơn nội dung (1) và header (20) nhưng THẤP HƠN bottom-nav (40).
   Trước đây để 60 — cao hơn nav — nên khi nút bị kéo xuống sát đáy nó nằm đè lên thanh điều
   hướng và nuốt mất cú chạm, điển hình là nút ba gạch "Thêm" ở góc phải bấm không ăn.
   Để thấp hơn nav thì thanh điều hướng luôn nhận được thao tác, bất kể nút nổi ở đâu. */
body.htms-app > .htms-float {
  position: fixed !important;
  z-index: 30 !important;
}
/* Vùng thả "X" (kéo nút nổi vào để tắt) cũng là <div> con trực tiếp của body và KHÔNG mang class
   .fixed, nên bị quy tắc quét rộng ở trên ép thành position:relative — đo được nó rơi xuống
   top 2584px thay vì bám đỉnh màn hình, tức tính năng kéo-để-tắt hỏng hoàn toàn trên Dashboard
   (trang chủ không có quy tắc đó nên vẫn chạy). Ghim lại đúng như khai báo gốc trong partial. */
body.htms-app > .htms-float-trash {
  position: fixed !important;
  z-index: 70 !important;
}
body.htms-app > header.htms-app-header {
  z-index: 20;
}
body.htms-app > .htms-bottom-nav {
  z-index: 9999 !important;
  pointer-events: auto !important;
}

body.htms-app h1,
body.htms-app h2,
body.htms-app h3,
body.htms-app .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* SVG / icon sharpness */
body.htms-app svg,
body.htms-app [data-lucide] {
  shape-rendering: geometricPrecision;
  flex-shrink: 0;
}

body.htms-app img {
  max-width: 100%;
  height: auto;
}

/* Mobile content clearance for bottom nav */
@media (max-width: 767px) {
  body.htms-app:not(.from-app) {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  }
  body.htms-app main {
    padding-bottom: 0.5rem;
  }
}

/* ========== Background blobs → teal only (no purple/pink clash) ========== */
body.htms-app .htms-blob-layer > div:nth-child(1) {
  background: rgba(15, 118, 110, 0.12) !important;
}
body.htms-app .htms-blob-layer > div:nth-child(2) {
  background: rgba(20, 184, 166, 0.1) !important;
}
body.htms-app .htms-blob-layer > div:nth-child(3) {
  background: rgba(17, 94, 89, 0.08) !important;
}
html.dark body.htms-app .htms-blob-layer > div:nth-child(1) {
  background: rgba(20, 184, 166, 0.12) !important;
}
html.dark body.htms-app .htms-blob-layer > div:nth-child(2) {
  background: rgba(15, 118, 110, 0.14) !important;
}
html.dark body.htms-app .htms-blob-layer > div:nth-child(3) {
  background: rgba(20, 184, 166, 0.08) !important;
}

/* ========== Header (glass = Mobile Home SoT) ========== */
body.htms-app header.htms-app-header {
  background: var(--header-glass) !important;
  backdrop-filter: var(--header-glass-blur);
  -webkit-backdrop-filter: var(--header-glass-blur);
  border-bottom: 1px solid var(--header-glass-border) !important;
  box-shadow: 0 8px 28px rgba(6, 45, 42, 0.1);
  min-height: var(--header-h);
}
html.dark body.htms-app header.htms-app-header {
  background: rgba(6, 45, 42, 0.9) !important;
  border-bottom-color: rgba(148, 163, 184, 0.12) !important;
}

body.htms-app header.htms-app-header .htms-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Desktop nav pills */
body.htms-app header.htms-app-header nav a {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.875rem;
}
body.htms-app header.htms-app-header nav a:hover,
body.htms-app header.htms-app-header nav a.is-active {
  color: var(--teal) !important;
  background: var(--mist);
}
html.dark body.htms-app header.htms-app-header nav a:hover,
html.dark body.htms-app header.htms-app-header nav a.is-active {
  background: rgba(20, 184, 166, 0.12);
  color: var(--teal-bright) !important;
}

/* ========== Bottom navigation (glass = Mobile Home SoT) ========== */
body.htms-app .htms-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  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);
  padding: 6px 4px calc(6px + var(--safe-bottom));
  box-shadow: 0 -8px 28px rgba(6, 45, 42, 0.12);
}
html.dark body.htms-app .htms-bottom-nav {
  background: rgba(6, 45, 42, 0.94);
  border-top-color: rgba(148, 163, 184, 0.14);
}
@media (min-width: 768px) {
  body.htms-app .htms-bottom-nav {
    display: none !important;
  }
}

body.htms-app .htms-bottom-nav a,
body.htms-app .htms-bottom-nav button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  min-width: 0;
  padding: 6px 2px 4px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: #64748b;
  font-family: var(--font-body);
  font-size: 0.6875rem; /* 11px — readable labels, Mobile SoT */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
body.htms-app .htms-bottom-nav a:active,
body.htms-app .htms-bottom-nav button:active {
  transform: scale(0.94);
}
body.htms-app .htms-bottom-nav a span:last-child,
body.htms-app .htms-bottom-nav button span:last-child,
body.htms-app .htms-bottom-nav .bn-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
body.htms-app .htms-bottom-nav .is-active,
body.htms-app .htms-bottom-nav a.text-shopee,
body.htms-app .htms-bottom-nav [class*="text-shopee"] {
  color: var(--teal) !important;
}
body.htms-app .htms-bottom-nav a.is-active::before,
body.htms-app .htms-bottom-nav button.is-active::before,
body.htms-app .htms-bottom-nav a:has(.bg-shopee\/10)::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));
}
body.htms-app .htms-bottom-nav .bg-shopee\/10,
body.htms-app .htms-bottom-nav .bg-shopee\/20 {
  background: rgba(15, 118, 110, 0.12) !important;
  color: var(--teal) !important;
  border-radius: 999px;
}
body.htms-app .htms-bottom-nav svg,
body.htms-app .htms-bottom-nav [data-lucide] {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2;
}

/* More sheet (Alpine) — HTMS sheet feel */
body.htms-app .htms-more-sheet-panel {
  border-radius: 28px 28px 0 0 !important;
  background: var(--surface) !important;
  box-shadow: 0 -12px 40px rgba(6, 45, 42, 0.16) !important;
  max-height: min(85vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1rem + var(--safe-bottom) + 90px) !important;
}
/* #dashboardMoreSheet chỉ có z-50 (Tailwind mặc định) trong khi .htms-bottom-nav bị ép z-index:
   9999 !important (fix landmine cũ) — khi mở sheet, thanh nav dưới cùng đè LÊN TRÊN phần cuối
   sheet (vùng 776-844px trùng với nút "Đăng xuất ví" 755-803px), che mất/chặn click dù nút vẫn
   tồn tại trong DOM. Ép z-index sheet vượt hẳn nav. Đồng thời tăng padding-bottom panel (dòng
   trên) để nội dung cuối luôn cuộn được lên khỏi vùng nav, không chỉ dựa vào z-index. */
body.htms-app #dashboardMoreSheet {
  z-index: 10000 !important;
}
body.htms-app .htms-more-sheet-panel a,
body.htms-app .htms-more-sheet-panel button {
  border-radius: 14px !important;
  font-weight: 600;
}
body.htms-app .htms-more-sheet-panel a:hover,
body.htms-app .htms-more-sheet-panel button:hover {
  background: var(--fog) !important;
}
body.htms-app .htms-more-sheet-panel .bg-shopee\/5,
body.htms-app .htms-more-sheet-panel .bg-shopee\/10 {
  background: rgba(15, 118, 110, 0.1) !important;
  color: var(--teal) !important;
}

/* ========== Cards / surfaces — glass on motion bg (not solid opaque white) ========== */
/* Bề mặt .bg-white: TÀN DƯ của hệ "kính SÁNG" giai đoạn trước (nền trắng 88%). Sau khi toàn bộ
   giao diện chuyển sang kính TỐI trên nền sóng, mảng trắng này thành nguồn lỗi lớn nhất còn lại:
   nền vẫn trắng trong khi chữ bên trong đã được map sang trắng/mint => chữ trắng trên nền trắng.
   Rà soát tự động đếm được ~50 chỗ như vậy (Hồ sơ, Phím tắt, Nhiệm vụ, Điểm danh...). Chuyển hẳn
   sang kính tối cùng token với mọi nơi khác — đúng yêu cầu "nền cần trong suốt phải trong suốt
   hoàn toàn, không còn mảng nền trắng thừa sau chữ". Ô nhập liệu vẫn giữ nền đặc riêng ở dưới. */
body.htms-app .htms-card,
body.htms-app .rounded-2xl.bg-white,
body.htms-app .rounded-3xl.bg-white,
body.htms-app .rounded-xl.bg-white,
body.htms-app .bg-white.rounded-2xl,
body.htms-app .bg-white.rounded-3xl,
body.htms-app .bg-white.shadow-xl,
body.htms-app .bg-white.shadow-lg,
body.htms-app .bg-white.shadow-md,
body.htms-app main .bg-white,
html.dark body.htms-app .htms-card,
html.dark body.htms-app main .bg-white,
html.dark body.htms-app .rounded-2xl.bg-white,
html.dark body.htms-app .rounded-3xl.bg-white {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: var(--radius-lg) !important;
}
/* Pill/tab đang được chọn dùng .bg-white để "nổi" hơn phần còn lại — nay là kính nên tăng nhẹ
   độ sáng lớp kính để vẫn phân biệt được trạng thái đang chọn.
   TRỪ .wallet-hero-btn: đây là nút hành động chính trên thẻ số dư, phải giữ nền trắng ĐẶC + chữ
   teal (nhận diện thương hiệu); nếu thành kính thì chữ teal đậm chìm vào nền teal phía sau. */
body.htms-app main .bg-white.rounded-xl:not(.wallet-hero-btn),
body.htms-app main .bg-white.rounded-lg:not(.wallet-hero-btn),
body.htms-app main .bg-white.rounded-full:not(.wallet-hero-btn) {
  background: rgba(255, 255, 255, 0.16) !important;
}
body.htms-app main .wallet-hero-btn.bg-white {
  background: #ffffff !important;
  color: var(--teal) !important;
}

/* Màu chữ MẶC ĐỊNH của vùng nội dung: nhiều phần tử không có class màu nào (nút lọc "Từ chối",
   tiêu đề "Hộp Thư Thông Báo"...) nên thừa hưởng --ink (gần đen) => tối trên nền sóng tối.
   Đặt màu thừa kế sang tông sáng; các class màu cụ thể vẫn ghi đè bình thường. */
body.htms-app main {
  color: #ecfdf8;
}

html.dark body.htms-app .htms-card,
html.dark body.htms-app .rounded-2xl.bg-white,
html.dark body.htms-app .rounded-3xl.bg-white,
html.dark body.htms-app .rounded-xl.bg-white,
html.dark body.htms-app .bg-white.rounded-2xl,
html.dark body.htms-app .bg-white.rounded-3xl,
html.dark body.htms-app .dark\:bg-slate-900 {
  /* keep dark surfaces via existing dark: classes; tighten border */
  border-color: rgba(148, 163, 184, 0.14) !important;
}

/* ========== Balance / wallet hero card (Rút tiền + Ví) — teal glass, NOT slate black ========== */
body.htms-app .htms-balance-card {
  background-color: var(--glass-bg) !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(232, 163, 23, 0.1), transparent 50%),
    linear-gradient(145deg, rgba(15, 118, 110, 0.14) 0%, rgba(20, 184, 166, 0.12) 48%, rgba(13, 148, 136, 0.14) 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 32px rgba(15, 118, 110, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
body.htms-app .htms-balance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, transparent 42%);
  border-radius: inherit;
}
/* Legacy black wallet gradients still in markup elsewhere → force teal */
body.htms-app .bg-gradient-to-br.from-\[\#1E293B\],
body.htms-app .bg-gradient-to-br.from-\[\#1e293b\] {
  background-color: var(--glass-bg) !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
    linear-gradient(145deg, rgba(15, 118, 110, 0.14) 0%, rgba(20, 184, 166, 0.12) 48%, rgba(13, 148, 136, 0.14) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 12px 32px rgba(15, 118, 110, 0.28) !important;
}

/* Banner tiêu đề trang (Rút tiền / Đơn hàng / Nhiệm vụ / Tiếp thị liên kết...) dùng nền kem/hồng
   nhạt đục (from-[#FFF4EC], from-[#fff0ed]...) — cũng phải trong suốt 90% như mọi card khác,
   giữ chút sắc cam nhạt thay vì đặc. Icon badge bên trong giữ nền đục riêng để dễ nhìn. */
body.htms-app .bg-gradient-to-r.from-\[\#FFF4EC\],
body.htms-app .bg-gradient-to-r.from-\[\#fff0ed\] {
  background-color: var(--glass-bg) !important;
  background-image: linear-gradient(120deg, rgba(232, 163, 23, 0.12), rgba(255, 255, 255, 0.04)) !important;
  border-color: var(--glass-border) !important;
}
body.htms-app .bg-gradient-to-r.from-\[\#FFF4EC\] h1,
body.htms-app .bg-gradient-to-r.from-\[\#FFF4EC\] .text-gray-900,
body.htms-app .bg-gradient-to-r.from-\[\#fff0ed\] h1,
body.htms-app .bg-gradient-to-r.from-\[\#fff0ed\] .text-gray-900 {
  color: #ffffff !important;
}
body.htms-app .bg-gradient-to-r.from-\[\#FFF4EC\] p,
body.htms-app .bg-gradient-to-r.from-\[\#FFF4EC\] .text-gray-500,
body.htms-app .bg-gradient-to-r.from-\[\#fff0ed\] p,
body.htms-app .bg-gradient-to-r.from-\[\#fff0ed\] .text-gray-500 {
  color: #e6fffa !important;
}
body.htms-app .bg-gradient-to-r.from-\[\#FFF4EC\] .bg-\[\#FFEFEB\],
body.htms-app .bg-gradient-to-r.from-\[\#fff0ed\] .bg-\[\#fff0ed\] {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Card mốc thưởng chuỗi điểm danh (checkin) — nền mint đục [#f4faf8] → trong suốt 90% đồng bộ.
   Thanh tiến trình nhỏ [#e8f5f2] bên trong giữ đục vì là UI chức năng (progress track), không
   phải khối trang trí lớn. */
body.htms-app .bg-\[\#f4faf8\] {
  background-color: var(--glass-bg) !important;
  background-image: linear-gradient(120deg, rgba(45, 212, 191, 0.1), rgba(255, 255, 255, 0.03)) !important;
  border-color: var(--glass-border) !important;
}
body.htms-app .bg-\[\#f4faf8\] .text-gray-800 {
  color: #ffffff !important;
}
body.htms-app .bg-\[\#f4faf8\] .text-gray-500 {
  color: #e6fffa !important;
}

/* ========== Buttons ========== */
body.htms-app .btn-htms,
body.htms-app button.bg-shopee,
body.htms-app a.bg-shopee,
body.htms-app .bg-shopee.text-white,
body.htms-app button.from-shopee,
body.htms-app a.from-shopee {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.htms-app button.bg-shopee:hover,
body.htms-app a.bg-shopee:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.28);
}
body.htms-app button.bg-shopee:active,
body.htms-app a.bg-shopee:active {
  transform: scale(0.98);
}
body.htms-app button:disabled,
body.htms-app button[disabled],
body.htms-app .opacity-50.pointer-events-none {
  cursor: not-allowed;
  filter: grayscale(0.2);
}

body.htms-app .bg-gradient-to-r.from-shopee,
body.htms-app .bg-gradient-to-br.from-shopee,
body.htms-app .bg-gradient-to-tr.from-shopee,
body.htms-app .from-shopee.to-shopee-light {
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%) !important;
}
/* Banner hero dạng <div> (giftcode, notifications...) dùng CÙNG gradient shopee→teal nhưng
   là khối trang trí lớn, không phải nút — phải trong suốt 90% như wallet-hero. Chỉ khớp thẻ
   div (thêm "div" vào selector để độ ưu tiên CAO HƠN rule chung phía trên) để không đụng tới
   nút/link CTA cũng dùng chung class gradient này. */
body.htms-app div.bg-gradient-to-r.from-shopee,
body.htms-app div.bg-gradient-to-br.from-shopee,
body.htms-app div.bg-gradient-to-tr.from-shopee {
  background-color: var(--glass-bg) !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.2), transparent 55%),
    linear-gradient(135deg, rgba(15, 118, 110, 0.14) 0%, rgba(20, 184, 166, 0.12) 100%) !important;
}

/* ========== Inputs ========== */
body.htms-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body.htms-app select,
body.htms-app textarea {
  border-radius: 12px !important;
  border-color: var(--line) !important;
  font-family: var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.htms-app input:not([type="checkbox"]):not([type="radio"]):focus,
body.htms-app select:focus,
body.htms-app textarea:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14) !important;
  outline: none !important;
}

/* ========== Orange leftovers → teal (full Tailwind orange scale + gradients) ========== */
body.htms-app .bg-orange-50,
body.htms-app .bg-orange-50\/50,
body.htms-app .bg-orange-50\/60,
body.htms-app .bg-orange-50\/80,
body.htms-app .bg-orange-100,
body.htms-app .bg-orange-100\/40,
body.htms-app .bg-orange-100\/50,
body.htms-app .from-orange-50,
body.htms-app .from-orange-50\/60,
body.htms-app .from-orange-50\/20,
body.htms-app .to-orange-50\/20,
body.htms-app .to-orange-50\/5 {
  background-color: rgba(15, 118, 110, 0.1) !important;
}
body.htms-app .bg-gradient-to-br.from-orange-50\/60,
body.htms-app .bg-gradient-to-b.from-orange-50,
body.htms-app .from-orange-500,
body.htms-app .to-rose-500,
body.htms-app .bg-gradient-to-r.from-orange-500,
body.htms-app .bg-gradient-to-br.from-orange-400,
body.htms-app .bg-gradient-to-br.from-orange-500,
body.htms-app .bg-gradient-to-r.from-orange-400,
body.htms-app .bg-gradient-to-tr.from-orange-400,
body.htms-app .from-orange-400,
body.htms-app .via-orange-500,
body.htms-app .to-orange-600,
body.htms-app .to-rose-400,
body.htms-app .to-rose-600 {
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 55%, #0d9488 100%) !important;
  background-color: transparent !important;
}
/* Rose leftovers → teal (keep red only for true error states via .text-red-*) */
body.htms-app .bg-rose-50,
body.htms-app .bg-rose-100,
body.htms-app .bg-rose-500,
body.htms-app .bg-rose-600 {
  background-color: rgba(15, 118, 110, 0.12) !important;
}
body.htms-app .text-rose-500,
body.htms-app .text-rose-600,
body.htms-app .text-rose-700 {
  color: var(--teal) !important;
}
body.htms-app .border-rose-100,
body.htms-app .border-rose-200 {
  border-color: rgba(15, 118, 110, 0.2) !important;
}
/* Amber accent only for gold CTA (not full orange UI chrome) */
body.htms-app .bg-amber-400,
body.htms-app .bg-amber-500 {
  background-color: var(--gold) !important;
}

/* Force any leftover orange→rose CTA gradients to teal */
body.htms-app .from-orange-500.to-rose-500,
body.htms-app .bg-gradient-to-r.from-orange-500.to-rose-500,
body.htms-app [class*="from-orange-500"][class*="to-rose-500"] {
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 100%) !important;
}

/* Check-in page: kill fixed orange wash overlay fighting motion bg */
body.htms-app .from-orange-50.to-transparent {
  background-image: linear-gradient(to bottom, rgba(232, 245, 242, 0.55), transparent) !important;
}

/* Purple milestone leftovers → teal mist */
body.htms-app .bg-purple-50,
body.htms-app .bg-purple-50\/40,
body.htms-app .bg-purple-100,
body.htms-app .border-purple-100,
body.htms-app .border-purple-200 {
  background-color: rgba(15, 118, 110, 0.08) !important;
  border-color: rgba(15, 118, 110, 0.18) !important;
}
body.htms-app .text-purple-500,
body.htms-app .text-purple-600,
body.htms-app .text-purple-700 {
  color: var(--teal) !important;
}
body.htms-app .text-orange-400,
body.htms-app .text-orange-500,
body.htms-app .text-orange-600,
body.htms-app .text-orange-700,
body.htms-app .text-orange-500\/80,
body.htms-app .text-orange-600\/80,
body.htms-app .dark\:text-orange-400,
body.htms-app .dark\:text-orange-400\/70 {
  color: var(--teal) !important;
}
html.dark body.htms-app .dark\:text-orange-400,
html.dark body.htms-app .dark\:text-orange-400\/70 {
  color: var(--teal-bright) !important;
}
body.htms-app .bg-orange-600,
body.htms-app .bg-orange-500,
body.htms-app .bg-orange-500\/30 {
  background-color: var(--teal) !important;
}
body.htms-app .border-orange-100,
body.htms-app .border-orange-100\/50,
body.htms-app .border-orange-100\/70,
body.htms-app .border-orange-200,
body.htms-app .border-orange-200\/50,
body.htms-app .border-orange-200\/70,
body.htms-app .border-orange-300,
body.htms-app .border-orange-350,
body.htms-app .border-orange-800\/50,
body.htms-app .hover\:border-orange-200\/50:hover {
  border-color: rgba(15, 118, 110, 0.22) !important;
}
body.htms-app .shadow-orange-500\/5 {
  --tw-shadow-color: rgba(15, 118, 110, 0.08) !important;
}
body.htms-app .ring-orange-500,
body.htms-app .focus\:ring-orange-500,
body.htms-app .focus\:ring-shopee\/20:focus {
  --tw-ring-color: rgba(15, 118, 110, 0.25) !important;
}
/* Dark orange leftovers */
html.dark body.htms-app .dark\:bg-orange-950\/10,
html.dark body.htms-app .dark\:bg-orange-950\/15,
html.dark body.htms-app .dark\:bg-orange-950\/20,
html.dark body.htms-app .dark\:bg-orange-950\/30,
html.dark body.htms-app .dark\:bg-orange-900\/30,
html.dark body.htms-app .dark\:from-orange-950\/10,
html.dark body.htms-app .dark\:to-orange-950\/5 {
  background-color: rgba(20, 184, 166, 0.12) !important;
}
html.dark body.htms-app .dark\:border-orange-900\/20,
html.dark body.htms-app .dark\:border-orange-900\/30,
html.dark body.htms-app .dark\:border-orange-900\/40,
html.dark body.htms-app .dark\:border-orange-800\/50,
html.dark body.htms-app .dark\:hover\:border-orange-900\/40:hover {
  border-color: rgba(20, 184, 166, 0.22) !important;
}

/* Glass surfaces on app pages — soft translucent white like Mobile chrome */
body.htms-app main .bg-white\/80,
body.htms-app main .bg-white\/90,
body.htms-app main .backdrop-blur,
body.htms-app main .backdrop-blur-md,
body.htms-app main .backdrop-blur-lg,
body.htms-app main .backdrop-blur-xl {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* Money / tabular nums readability */
body.htms-app .font-mono,
body.htms-app [class*="balance"],
body.htms-app .tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Chặn tràn ngang CHỈ ở <main>, không ở <body>.

   overflow-x trên body (kể cả giá trị clip) khiến iOS bỏ vùng cuộn tăng tốc phần cứng của
   trang và mất quán tính vuốt. Giữ trên main vẫn chặn được tràn ngang mà không đụng tới vùng
   cuộn gốc. Bỏ luôn max-width:100vw trên body vì 100vw không trừ thanh cuộn, chính nó cũng
   là một nguồn tràn ngang trên máy tính. */
body.htms-app main {
  overflow-x: clip;
  max-width: 100%;
}

/* Floating action stack (lang/currency FAB) must not stretch full width */
body.htms-app .fixed.left-6.bottom-20,
body.htms-app .fixed[class*="left-6"][class*="bottom-20"],
body.htms-app .fixed[class*="left-6"][class*="bottom-8"] {
  width: auto !important;
  max-width: max-content !important;
  right: auto !important;
}

/* Min readable body on mobile.
   ĐÃ bỏ "font-size: 15px" trên body — trang chủ không hề giảm cỡ chữ gốc ở mobile (giữ 16px mặc
   định trình duyệt), nên riêng Dashboard nhỏ hơn ~6% tạo cảm giác không đồng nhất khi chuyển tab. */
@media (max-width: 480px) {
  body.htms-app .text-xs {
    font-size: 0.8125rem !important;
    line-height: 1.4;
  }
}

/* ========== Sidebar ========== */
body.htms-app .htms-sidebar,
body.htms-app aside .htms-sidebar {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
body.htms-app .htms-sidebar .htms-avatar,
body.htms-app .htms-sidebar .bg-orange-600 {
  background: linear-gradient(135deg, var(--teal), var(--teal-bright)) !important;
  color: #fff !important;
}
body.htms-app .htms-sidebar nav a {
  border-radius: 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  min-height: 42px;
}
body.htms-app .htms-sidebar nav a:hover {
  background: var(--fog) !important;
  color: var(--teal) !important;
}
body.htms-app .htms-sidebar nav a[class*="bg-orange"],
body.htms-app .htms-sidebar nav a[class*="bg-shopee"] {
  background: rgba(15, 118, 110, 0.1) !important;
  color: var(--teal) !important;
}

/* ========== Wallet hero (same language as htms-balance-card — bright teal glass) ========== */
body.htms-app .wallet-hero.bg-gradient-to-tr,
body.htms-app .wallet-hero.bg-gradient-to-br,
body.htms-app .wallet-hero {
  background-color: var(--glass-bg) !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.2), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(232, 163, 23, 0.1), transparent 50%),
    linear-gradient(145deg, rgba(15, 118, 110, 0.14) 0%, rgba(20, 184, 166, 0.12) 48%, rgba(13, 148, 136, 0.14) 100%) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 12px 32px rgba(15, 118, 110, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
/* Lớp phủ dịu đặt GIỮA ảnh ví 3D (z-0) và phần nội dung (z-10).
   Ảnh trang trí rất sáng (tiền hồng, xu vàng) và trải gần hết thẻ, nên mọi chữ nằm đè lên nó
   đều mất tương phản: "Chi tiết ví" đo được 2.28 (cần 4.5), nhãn "SỐ DƯ KHẢ DỤNG" cũng chìm.
   Vá riêng từng nút thì sẽ phải vá mãi mỗi khi thêm phần tử; phủ một lớp cho cả thẻ giải quyết
   một lần. Ảnh vẫn nhìn thấy rõ (lớp phủ chỉ 45%), chỉ bớt chói. */
body.htms-app .wallet-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(4, 32, 29, 0.5) 0%,
    rgba(4, 32, 29, 0.34) 45%,
    rgba(4, 32, 29, 0.5) 100%
  );
}

/* Phải có `main` trong selector. Quy tắc "pill nền trắng -> kính 16%" ở phía trên là
   `body.htms-app main .bg-white.rounded-xl` = (0,3,2), cao hơn `.wallet-hero .wallet-hero-btn`
   = (0,3,1), nên nó thắng và biến nút CTA chính thành trong suốt — chữ teal đậm #0f766e nằm
   trên ảnh ví 3D sáng chỉ còn tương phản 1.06, không đọc nổi. Thêm `main` đưa lên (0,4,2). */
body.htms-app main .wallet-hero .wallet-hero-btn,
body.htms-app .wallet-hero .wallet-hero-btn {
  color: #0f766e !important;
  background: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
/* Nút phụ ("Lịch sử") nằm ĐÈ LÊN ảnh ví 3D trang trí — vùng cam/vàng rất sáng. Với nền
   bg-white/15 như trước, chữ trắng chỉ đạt tương phản 1.82 (đo trên pixel ảnh chụp, ngưỡng
   cần 3.0) nên gần như tàng hình. Đặt nền teal đậm bán trong để cắt hẳn ảnh phía sau.
   Khai báo ở đây thay vì dùng lớp Tailwind bg-teal-900/55 vì KHÔNG có biến thể bg-teal-900/*
   nào trong app-*.css đã build — lớp đó sẽ im lặng mất tác dụng. */
body.htms-app main .wallet-hero .wallet-hero-btn-ghost,
body.htms-app .wallet-hero .wallet-hero-btn-ghost {
  background: rgba(4, 47, 46, 0.58) !important;
  border-radius: 12px !important;
}
body.htms-app main .wallet-hero .wallet-hero-btn-ghost:hover,
body.htms-app .wallet-hero .wallet-hero-btn-ghost:hover {
  background: rgba(4, 47, 46, 0.7) !important;
}

/* ========== Typography / overflow fixes ========== */
body.htms-app .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* line-clamp-1 (Tailwind: overflow:hidden; display:-webkit-box; -webkit-line-clamp:1) chỉ THỰC SỰ
   hoạt động khi trình duyệt áp dụng display:-webkit-box — nhưng nhiều bản Chrome/Safari serialize
   lại display máy tính thành "flow-root", và khi đó -webkit-line-clamp không cắt dòng nữa. Kết hợp
   với line-height ép !important ở trên (đọc dễ hơn trên mobile) tạo ra lỗi "chữ chồng/ma" thấy rõ
   ở bảng Thông Báo (dòng 2 bị vẽ đè lên dòng 1 khi tiêu đề dài tràn 2 dòng). Test trên Chrome thật
   với dữ liệu thông báo thật đã tái hiện đúng lỗi. Đổi hẳn sang cắt 1 dòng kiểu nowrap+ellipsis —
   cách CHẮC CHẮN hoạt động, không phụ thuộc hành vi khác nhau giữa các trình duyệt. */
body.htms-app .line-clamp-1 {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* nowrap + ellipsis chỉ cắt được chữ khi phần tử CÓ chiều rộng giới hạn. Trong bảng layout tự
   động, ô co giãn theo nội dung nên chữ dài làm bảng phình ngang, đẩy cột "Thời gian" ra khỏi
   màn hình thay vì hiện dấu "...". table-layout:fixed khoá chiều rộng cột theo hàng tiêu đề
   (# = 2rem, Thời gian = 92px, Nội dung = phần còn lại) nên ô "Nội dung" có mốc để cắt chữ. */
body.htms-app .htms-noti-table {
  table-layout: fixed;
  width: 100%;
}
/* Nền bảng phải TRONG SUỐT như mọi card khác. Trước đây hàng tiêu đề (bg-gray-50/50) và cả hàng
   nội dung (hover:bg-gray-50) đều bị quy tắc "giữ nền đục cho ô nhập liệu" ở dưới ép thành trắng
   0.92 — vì [class*="bg-gray-50"] khớp CHUỖI CON nên trúng luôn cả biến thể hover:. Hậu quả: nền
   trắng gần đặc trong khi chữ đã đổi sang trắng/mint => chữ trắng trên nền trắng, không đọc nổi.
   Đã loại tr/td/th khỏi quy tắc đó; ở đây khai báo lại đúng kiểu kính cho bảng. */
body.htms-app .htms-noti-table thead tr {
  background: rgba(255, 255, 255, 0.1) !important;
}
body.htms-app .htms-noti-table thead th {
  color: #e6fffa !important;
}
body.htms-app .htms-noti-table tbody tr {
  background: transparent !important;
}
body.htms-app .htms-noti-table tbody tr:hover,
body.htms-app .htms-noti-table tbody tr:active {
  background: rgba(255, 255, 255, 0.08) !important;
}
body.htms-app .htms-noti-table tbody tr + tr {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.htms-app table {
  width: 100%;
}
body.htms-app .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}
/* Never render unreadable micro type in member UI */
body.htms-app .text-\[9px\],
body.htms-app .text-\[10px\],
body.htms-app .text-\[11px\] {
  font-size: 0.75rem !important; /* 12px floor */
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  line-height: 1.35 !important;
}
body.htms-app .htms-balance-card .text-\[9px\],
body.htms-app .htms-balance-card .text-\[10px\],
body.htms-app .wallet-hero .text-\[9px\],
body.htms-app .wallet-hero .text-\[10px\] {
  font-size: 0.6875rem !important; /* 11px labels on teal cards */
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  opacity: 0.95;
}
/* Money amounts never wrap mid-number */
body.htms-app .htms-balance-card .text-2xl,
body.htms-app .htms-balance-card .text-3xl,
body.htms-app .wallet-hero .text-2xl,
body.htms-app .wallet-hero .text-3xl,
body.htms-app .wallet-hero .text-4xl,
body.htms-app [class*="balance"] .font-bold {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@media (max-width: 380px) {
  body.htms-app .text-xl {
    font-size: 1.125rem !important;
  }
  body.htms-app .text-2xl {
    font-size: 1.25rem !important;
  }
  body.htms-app .text-3xl {
    font-size: 1.5rem !important;
  }
}

/* Status badges unified */
body.htms-app .rounded-full.px-2,
body.htms-app .rounded-full.px-2\.5,
body.htms-app .rounded-full.px-3,
body.htms-app span.inline-flex.items-center.rounded-full {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* Tiêu đề trang nằm trên nền sóng tối => phải TRẮNG, không dùng --ink (gần đen).
   Đây là chỗ khiến "Hộp Thư Thông Báo" (trang Thông báo) tối trên nền tối, tương phản 1.7. */
body.htms-app main h1 {
  color: #ffffff;
  text-wrap: balance;
}
body.htms-app main > .max-w-7xl > .mb-6 p,
body.htms-app main .text-slate-500,
body.htms-app main .text-gray-500 {
  color: var(--muted) !important;
}

/* Empty states */
body.htms-app main .text-center .text-slate-400,
body.htms-app main .text-center .text-gray-400 {
  color: var(--muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.5;
}

/* Tables stay inside glass cards */
body.htms-app main table th {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
body.htms-app main table td {
  font-size: 0.875rem !important;
}

/* ===== Card nội dung dashboard: kính mờ ĐÚNG tỉ lệ trang chủ =====
   Dùng thẳng token --glass-bg/--glass-border của trang chủ (kính tối, alpha 0.1 = trong suốt
   90%) thay vì kính sáng — bản kính sáng trước tuy an toàn cho chữ nhưng không đạt tỉ lệ trong
   suốt như trang chủ, vì màu kính TỰ NÓ ám teal thay vì chỉ lộ màu sóng phía sau (vốn nhạt gần
   đầu trang, khó thấy rõ). Đổi lại: BẮT BUỘC phải map lại toàn bộ màu chữ bên trong card (khối
   phía dưới) — nếu không chữ tối nguyên bản (thiết kế cho nền trắng) sẽ chìm vào nền kính gần
   như trong suốt, thành khó đọc. KHÔNG dùng blur/text-shadow để "cứu" độ rõ — đúng tinh thần
   trang chủ gốc là nền phẳng trong suốt + viền sáng, sóng động hiện SẮC NÉT phía sau, không nhòe.

   Nhận diện card cấp trang qua tổ hợp 3 class .bg-white + .dark:bg-slate-900 + .rounded-2xl/3xl.
   Ô nhập liệu/dropdown dùng tổ hợp khác (dark:bg-slate-700/800, hoặc bg-gray-50/50) nên không
   trúng — vẫn giữ nền đặc, cần thiết để gõ chữ/đọc danh sách chọn cho rõ. :not(.absolute) loại
   trừ 2 dropdown chọn ngân hàng/liên kết đang dùng đúng tổ hợp class nhưng cần đọc rõ khi chọn. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute),
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute),
/* rounded-xl bổ sung sau: các HÀNG dữ liệu (dòng đơn hàng ở dashboard/index) dùng rounded-xl
   chứ không phải 2xl, nên trước đây lọt khỏi quy tắc này và giữ nguyên nền TRẮNG ĐẶC — trong
   khi chữ bên trong vẫn bị khối "map màu chữ" ở cuối file đổi sang tông sáng dành cho nền tối.
   Hậu quả đo được trên Chrome: nhãn "Từ chối" tương phản 1.36 và "+0₫" 1.62 (ngưỡng cần 4.5/3.0)
   — gần như không đọc được. Vẫn giữ đủ tổ hợp 3 class + :not(.absolute) nên ô nhập liệu và
   dropdown (dùng dark:bg-slate-700/800) không bị trúng. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-xl:not(.absolute) {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}

/* Bảng màu lấy nguyên từ .is-wave-page của trang chủ (public/htms/styles.css) để hai nơi nhất
   quán. Ánh xạ theo ĐỘ ĐẬM gốc — chữ càng tối (càng nổi bật trên nền trắng cũ) thì càng chuyển
   sang màu càng sáng, giữ đúng thứ bậc nổi bật/mờ ban đầu:
     gray/slate 900,800,700  (tối nhất, tiêu đề/số liệu chính) -> #ffffff
     gray/slate 600,650,550  (thân bài)                        -> #ecfdf8 (--text-on-wave)
     gray/slate 500          (phụ)                              -> #cdf3ea (--text-on-wave-soft)
     gray/slate 400,350,300,200,100 (đã mờ sẵn/nhãn)            -> #99f6e4 (--text-on-wave-mute) */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-900,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-900,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-800,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-800,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-700,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-700,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-800,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-800,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-700,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-700,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .dark\:text-white,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .dark\:text-white {
  color: #ffffff !important;
}
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-600,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-600,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-650,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-650,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-550,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-550,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-600,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-600,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-650,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-650 {
  color: #f5fffd !important;
}
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-500,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-500,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-500,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-500 {
  color: #e6fffa !important;
}
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-400,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-400,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-300,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-300,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-gray-200,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-gray-200,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-400,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-400,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-350,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-350,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-300,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-300,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-200,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-200,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .text-slate-100,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .text-slate-100,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .dark\:text-slate-400,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .dark\:text-slate-400 {
  color: #ccfbf1 !important;
}

/* CHỈ ô nhập liệu giữ nền trắng đặc (cần gõ số / đọc giá trị đã chọn cho rõ).
   Trước đây quy tắc này ép cả hộp [class*="bg-gray-50"] bên trong card thành trắng 92% — đó là
   nguồn lỗi lớn nhất còn lại khi rà soát (trang Hồ sơ, Phím tắt, Thông báo: chữ đã đổi sang
   trắng/mint nhưng nền vẫn trắng => không đọc được). Các hộp đó nay dùng kính trong suốt. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) input,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) input,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) select,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) select,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) textarea,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #123f3a !important;
}
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) input::placeholder,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) input::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}
/* Trừ input ẩn (CSRF token, radio/checkbox nền của nút chọn Ngân hàng/Ví điện tử) — ép nền trắng
   lên chúng vô hại vì không hiển thị, nhưng riêng size 0/hidden thì bỏ qua để không lệch layout. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) input[type="hidden"],
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) input[type="hidden"] {
  background: transparent !important;
}

/* ===== Overlay glass (modal chi tiết đơn hàng + sheet "Thêm") — tầng "Primary Glass" =====
   Đây là các lớp CHE nội dung phía sau để người dùng tập trung thao tác, nên đục hơn tầng card
   nội dung thường (alpha 0.55 so với 0.1) nhưng vẫn PHẢI là kính teal tối, không phải card trắng
   đặc — đúng yêu cầu "không dùng card trắng đặc" áp dụng cho MỌI thành phần, kể cả modal/sheet.
   Trước đây 2 khối này rơi vào rule .bg-white/.rounded-xl chung (nền trắng 0.88, y hệt lỗi
   footer) vì không khớp đúng tổ hợp .rounded-2xl/.rounded-3xl của rule card chính. */
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900,
body.htms-app .htms-more-sheet-panel.bg-white {
  background: rgba(8, 59, 54, 0.62) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-border) !important;
}
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 .text-gray-900,
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 .text-gray-800,
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 .dark\:text-white,
body.htms-app .htms-more-sheet-panel.bg-white .text-gray-900,
body.htms-app .htms-more-sheet-panel.bg-white .text-gray-800,
body.htms-app .htms-more-sheet-panel.bg-white .dark\:text-white {
  color: #ffffff !important;
}
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 .text-gray-500,
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 .text-gray-400,
body.htms-app .htms-more-sheet-panel.bg-white .text-gray-500,
body.htms-app .htms-more-sheet-panel.bg-white .text-gray-400 {
  color: #e6fffa !important;
}
/* CHỈ ô nhập liệu mới giữ nền trắng đục (cần gõ/đọc rõ). Trước đây quy tắc này ép CẢ các hộp
   [class*="bg-gray-50"] trong popup thành trắng 0.92, trong khi chữ bên trong đã đổi sang
   trắng/mint => chữ trắng trên nền trắng, đúng lỗi thấy ở popup chi tiết đơn hàng (tên sản phẩm,
   "DÒNG THỜI GIAN TRẠNG THÁI", "Giá gốc", "Lượt click" đều không đọc được). Các hộp đó nay chuyển
   sang kính trong suốt ở khối cuối file. */
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 input,
body.htms-app .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 select {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #123f3a !important;
}

/* Footer — ĐỒNG BỘ Y HỆT trang chủ (.site-footer trong htms/styles.css): trong suốt hoàn toàn,
   để sóng động hiện xuyên qua, chữ màu mint/trắng theo đúng token --text-on-wave*. Bản cũ ở đây
   từng là "glass strip" nền trắng đục kèm chữ tối — sai hoàn toàn so với phần còn lại của trang
   (đã là dark-glass 90% trong suốt từ lâu) — đây là lỗi thật, không phải mờ cache. */
body.htms-app > footer,
html.dark body.htms-app > footer {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 1px solid rgba(167, 243, 208, 0.22) !important;
}
body.htms-app > footer.brand-teal {
  color: #ccfbf1 !important;
}
body.htms-app > footer.brand-teal .text-white {
  color: #ffffff !important;
}
body.htms-app > footer.brand-teal .text-slate-400,
body.htms-app > footer.brand-teal .text-slate-500,
body.htms-app > footer.brand-teal .text-slate-300,
body.htms-app > footer.brand-teal .text-slate-200 {
  color: #ccfbf1 !important;
}
body.htms-app > footer.brand-teal a:hover,
body.htms-app > footer.brand-teal a.hover\:text-white:hover,
body.htms-app > footer.brand-teal a.active\:text-white:active,
html.dark body.htms-app > footer.brand-teal a:hover,
html.dark body.htms-app > footer.brand-teal a.hover\:text-white:hover,
html.dark body.htms-app > footer.brand-teal a.active\:text-white:active {
  color: #ffffff !important;
}
/* Icon/khối "Cam kết" và badge liên hệ — nền trắng mờ trong suốt, y hệt .footer-social-btn
   của trang chủ, thay vì mảng nền tối/sáng đặc trước đây. */
body.htms-app > footer.brand-teal .bg-slate-900\/50,
body.htms-app > footer.brand-teal .bg-slate-900\/60,
body.htms-app > footer.brand-teal .bg-slate-900\/40,
body.htms-app > footer.brand-teal .bg-slate-900\/30,
html.dark body.htms-app > footer.brand-teal .bg-slate-900\/50,
html.dark body.htms-app > footer.brand-teal .bg-slate-900\/60,
html.dark body.htms-app > footer.brand-teal .bg-slate-900\/40,
html.dark body.htms-app > footer.brand-teal .bg-slate-900\/30 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
body.htms-app > footer.brand-teal .border-slate-800,
body.htms-app > footer.brand-teal .border-slate-800\/80,
body.htms-app > footer.brand-teal .border-slate-800\/70,
body.htms-app > footer.brand-teal .border-slate-800\/60,
body.htms-app > footer.brand-teal .border-slate-900,
body.htms-app > footer.brand-teal .divide-slate-900\/70 {
  border-color: rgba(167, 243, 208, 0.18) !important;
}

/* Khối "Cam Kết" (mobile) — quy tắc bg-slate-900\/50 chung ở trên chỉ làm nhạt (6%) chứ chưa bỏ
   hẳn khung, nên vẫn còn thấy viên thuốc mờ lạc lõng trên nền footer kính sáng. Trang chủ không
   hề có khung này — chỉ icon + chữ trần trên nền trong suốt. Đồng bộ y hệt: bỏ hẳn nền lẫn viền.
   Dùng .rounded-2xl để CHỈ khoanh đúng khối Cam Kết, không đụng nút icon mạng xã hội tròn cạnh
   đó (nút social dùng .rounded-xl khác, vẫn cần giữ khung cho ra hình nút bấm). */
body.htms-app > footer.brand-teal .rounded-2xl.bg-slate-900\/50 {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ========== States: empty / loading / error / success ========== */
body.htms-app .htms-empty,
body.htms-app .empty-state {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--muted);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px dashed var(--line);
}
body.htms-app .htms-empty svg,
body.htms-app .empty-state svg {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  color: var(--teal-bright);
  opacity: 0.85;
}
body.htms-app .htms-error,
body.htms-app .text-red-600.bg-red-50 {
  border-radius: 12px;
}
body.htms-app .htms-success,
body.htms-app .text-green-700.bg-green-50 {
  border-radius: 12px;
}

/* NProgress brand color */
#nprogress .bar {
  background: var(--teal) !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--teal), 0 0 5px var(--teal) !important;
}

/* ========== Footer (already brand-teal; tighten type) ========== */
body.htms-app footer.brand-teal {
  font-family: var(--font-body);
}
body.htms-app footer.brand-teal h3,
body.htms-app footer.brand-teal .font-bold {
  font-family: var(--font-display);
}

/* ========== Focus visibility a11y ========== */
body.htms-app a:focus-visible,
body.htms-app button:focus-visible,
body.htms-app input:focus-visible,
body.htms-app select:focus-visible,
body.htms-app textarea:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
}

/* ========== Safe areas for fixed UI ========== */
body.htms-app .safe-bottom {
  padding-bottom: var(--safe-bottom);
}

/* Back-to-top above bottom nav on mobile */
@media (max-width: 767px) {
  body.htms-app .htms-back-top {
    bottom: 5.5rem !important;
  }

  /* Vùng an toàn iPhone (thanh home indicator) cộng thêm cho MỌI nút nổi.
     Dùng margin-bottom thay vì gộp vào bottom để giữ nguyên chênh lệch chiều cao giữa các nút
     do blade quy định — nếu ép cùng một giá trị bottom, hai nút sẽ chồng lên nhau khi admin
     đổi bong bóng liên hệ sang góc phải. */
  body.htms-app > .htms-float {
    margin-bottom: var(--safe-bottom);
  }
}

/* ========== Touch targets (a11y mobile) ========== */
@media (max-width: 767px) {
  body.htms-app button:not(.htms-icon-xs),
  body.htms-app a.inline-flex,
  body.htms-app .htms-bottom-nav a,
  body.htms-app .htms-bottom-nav button {
    min-height: 44px;
  }
  body.htms-app header.htms-app-header button,
  body.htms-app header.htms-app-header a[class*="p-2"] {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ========== Modals / dialogs / drawers ========== */
body.htms-app [role="dialog"],
body.htms-app .fixed.inset-0 > .bg-white,
body.htms-app .fixed.inset-0 > [class*="rounded-t"],
body.htms-app .fixed.inset-0 > [class*="rounded-2xl"],
body.htms-app .fixed.inset-0 > [class*="rounded-3xl"] {
  font-family: var(--font-body);
}
body.htms-app .fixed.inset-0.bg-black\/60,
body.htms-app .fixed.inset-0.bg-black\/50,
body.htms-app .fixed.inset-0.bg-black\/40 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ========== Badges / status pills ========== */
body.htms-app .rounded-full.bg-shopee,
body.htms-app .rounded-full.bg-orange-500,
body.htms-app .rounded-full.bg-orange-600 {
  background-color: var(--teal) !important;
}
body.htms-app .badge-pending,
body.htms-app .status-pending {
  background: rgba(232, 163, 23, 0.14);
  color: #b45309;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.7rem;
}
body.htms-app .badge-success,
body.htms-app .status-success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.7rem;
}
body.htms-app .badge-error,
body.htms-app .status-error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.7rem;
}

/* ========== Tables ========== */
body.htms-app table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
body.htms-app table tbody td {
  font-size: 0.875rem;
  color: var(--ink);
}
body.htms-app table tbody tr {
  border-color: var(--line);
}

/* ========== Pagination ========== */
body.htms-app nav[role="navigation"] span[aria-current="page"] span,
body.htms-app .pagination .active,
body.htms-app [aria-current="page"] > span {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* ========== Toast / alert polish ========== */
body.htms-app .toast,
body.htms-app [x-data*="toast"] {
  border-radius: 14px !important;
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ========== Horizontal overflow guard ========== */
body.htms-app main,
body.htms-app .max-w-7xl {
  max-width: 100%;
}
body.htms-app .overflow-x-auto {
  max-width: 100%;
}

/* ========== Tabs ========== */
body.htms-app [role="tablist"] button[aria-selected="true"],
body.htms-app .tab-active {
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  font-weight: 700;
}

/* ========== Loading skeleton ========== */
body.htms-app .animate-pulse {
  background-color: rgba(15, 118, 110, 0.08);
}
html.dark body.htms-app .animate-pulse {
  background-color: rgba(148, 163, 184, 0.12);
}

/* ========== Currency / money readability ========== */
body.htms-app .wallet-hero p,
body.htms-app [class*="font-black"][class*="tracking-tight"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ========== Ranking / coupons residual orange utilities ========== */
body.htms-app .from-orange-400,
body.htms-app .from-orange-500,
body.htms-app .to-orange-500,
body.htms-app .to-orange-600,
body.htms-app .via-orange-500 {
  --tw-gradient-from: #0f766e !important;
  --tw-gradient-to: #14b8a6 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
body.htms-app .shadow-orange-500\/20,
body.htms-app .shadow-orange-500\/30,
body.htms-app .shadow-orange-100 {
  --tw-shadow-color: rgba(15, 118, 110, 0.25) !important;
}
body.htms-app .fill-orange-500,
body.htms-app .fill-orange-300 {
  fill: var(--teal-bright) !important;
}
body.htms-app .ring-orange-200,
body.htms-app .ring-white {
  /* keep white rings; orange rings → teal */
}
body.htms-app .ring-orange-500 {
  --tw-ring-color: rgba(15, 118, 110, 0.35) !important;
}

/* ========== Check-in / coupons hard hex (Tailwind arbitrary) via attribute fallback ========== */
body.htms-app .text-\[\#FF6600\],
body.htms-app .text-\[\#f95522\],
body.htms-app .text-\[\#ee4d2d\],
body.htms-app .dark\:text-orange-400,
body.htms-app .dark\:text-orange-500 {
  color: var(--teal) !important;
}
html.dark body.htms-app .text-\[\#FF6600\],
html.dark body.htms-app .dark\:text-orange-400 {
  color: var(--teal-bright) !important;
}
body.htms-app .bg-\[\#f95522\],
body.htms-app .bg-\[\#FF6600\],
body.htms-app .bg-\[\#ee4d2d\],
body.htms-app .hover\:bg-\[\#e04516\]:hover {
  background-color: var(--teal) !important;
}
body.htms-app .from-\[\#FF7A37\],
body.htms-app .to-\[\#FF5500\],
body.htms-app .via-\[\#FF5500\],
body.htms-app .from-\[\#FF9D66\],
body.htms-app .to-\[\#FF6600\] {
  --tw-gradient-from: #0f766e !important;
  --tw-gradient-to: #14b8a6 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
body.htms-app .bg-\[\#FFECE0\],
body.htms-app .bg-\[\#FFF8F3\] {
  background-color: var(--mist) !important;
}
body.htms-app .border-\[\#FFDAB9\],
body.htms-app .border-orange-200 {
  border-color: rgba(15, 118, 110, 0.22) !important;
}

/* ========== Main content spacing under sticky header ========== */
body.htms-app > main,
body.htms-app main {
  position: relative;
  z-index: 1;
}

/* ========== Disabled form controls ========== */
body.htms-app input:disabled,
body.htms-app select:disabled,
body.htms-app textarea:disabled,
body.htms-app button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* ========== Min typography: nâng mọi chữ quá nhỏ (7-10px) lên >=11px theo SoT Home ========== */
body.htms-app { min-font-size: 0; }
body.htms-app .text-\[7px\],
body.htms-app .text-\[8px\],
body.htms-app .text-\[9px\],
body.htms-app .text-\[10px\],
body.htms-app .sm\:text-\[7px\],
body.htms-app .sm\:text-\[8px\],
body.htms-app .sm\:text-\[9px\],
body.htms-app .sm\:text-\[10px\],
body.htms-app .md\:text-\[9px\],
body.htms-app .md\:text-\[10px\] {
  font-size: 11px !important;
  line-height: 1.3 !important;
}
/* Màn hình nhỏ cũng không xuống dưới 11px cho các cỡ đẹp hơn */

/* ========== Unread badge đọc được (tránh 99+/số đè) ========== */
body.htms-app .unread-badge,
body.htms-app [class*="unread-badge"] {
  min-width: 20px;
  height: 20px;
  font-size: 11px !important;
  line-height: 1;
  padding-inline: 5px;
}/* ========== Gold CTA (SoT Home) - tránh bị mapping teal override ========== */
body.htms-app .htms-btn-gold {
  background: linear-gradient(135deg, #e8a317 0%, #f59e0b 55%, #ea580c 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
body.htms-app .htms-btn-gold:hover {
  filter: brightness(1.06);
}
body.htms-app .htms-btn-gold:active {
  transform: scale(0.98);
}
body.htms-app .htms-btn-gold i,
body.htms-app .htms-btn-gold svg,
body.htms-app .htms-btn-gold span {
  color: #ffffff !important;
}

/* ==========================================================================
   ĐỒNG BỘ KÍNH TRONG SUỐT + MÀU CHỮ TRÊN NỀN SÓNG — ÁP CHO TOÀN BỘ DASHBOARD
   --------------------------------------------------------------------------
   Vì sao cần khối này: các quy tắc phía trên chỉ đổi màu chữ BÊN TRONG đúng một
   tổ hợp card (.bg-white + .dark:bg-slate-900 + .rounded-2xl/3xl). Rà soát tự động
   bằng Chrome trên 17 trang phát hiện 156 chỗ chữ không đọc được, thuộc 2 nhóm:

     A. Hộp phụ nền xám nhạt (bg-gray-50/100) bị ép thành trắng gần đặc, trong khi
        chữ bên trong đã đổi sang trắng/mint => CHỮ TRẮNG TRÊN NỀN TRẮNG.
     B. Chữ nằm trong các loại card khác (banner hero, thanh tab, trang Thông báo,
        thẻ số liệu) chưa từng được map màu => CHỮ TỐI TRÊN NỀN SÓNG TỐI.

   Cách xử lý: nâng phạm vi map màu lên cấp `main` để phủ hết mọi loại card, đồng
   thời chuyển các hộp phụ sang kính trong suốt (đúng yêu cầu "toàn bộ dùng loại
   trong suốt"). Chỉ TRỪ RA bề mặt cố ý giữ đục — ô nhập liệu và nút/pill nền
   trắng — vì ở đó chữ tối mới là đúng.
   ========================================================================== */

/* --- 1. Hộp phụ nền màu nhạt (xám + các tông màu) -> kính trong suốt ---
   Áp cho CẢ nội dung trang (main) LẪN popup/bottom-sheet, vì popup chi tiết đơn hàng cũng đầy
   hộp nền nhạt. Giữ đúng sắc màu ngữ nghĩa (xanh lá = tiền hoàn, đỏ = từ chối...) bằng cách
   dùng chính tông màu đó ở độ mờ thấp, thay vì xoá sạch thành trắng. */
body.htms-app main [class*="bg-gray-50"]:not(tr):not(td):not(th):not(input):not(select):not(textarea),
body.htms-app main [class*="bg-gray-100"]:not(tr):not(td):not(th):not(input):not(select):not(textarea),
body.htms-app main [class*="bg-slate-50"]:not(tr):not(td):not(th),
body.htms-app .fixed.inset-0.z-50 [class*="bg-gray-50"]:not(input):not(select):not(textarea),
body.htms-app .fixed.inset-0.z-50 [class*="bg-gray-100"]:not(input):not(select):not(textarea),
body.htms-app .more-sheet-panel [class*="bg-gray-50"],
body.htms-app .more-sheet-panel [class*="bg-gray-100"] {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.htms-app main [class*="bg-green-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-green-50"],
body.htms-app main [class*="bg-emerald-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-emerald-50"],
body.htms-app main [class*="bg-green-500\/10"], body.htms-app .fixed.inset-0.z-50 [class*="bg-green-500\/10"] {
  background-color: rgba(110, 231, 183, 0.16) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
}
body.htms-app main [class*="bg-teal-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-teal-50"] {
  background-color: rgba(94, 234, 212, 0.16) !important;
  border-color: rgba(94, 234, 212, 0.28) !important;
}
body.htms-app main [class*="bg-blue-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-blue-50"],
body.htms-app main [class*="bg-sky-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-sky-50"],
body.htms-app main [class*="bg-indigo-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-indigo-50"] {
  background-color: rgba(147, 197, 253, 0.16) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
}
body.htms-app main [class*="bg-red-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-red-50"],
body.htms-app main [class*="bg-rose-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-rose-50"],
body.htms-app main [class*="bg-pink-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-pink-50"] {
  background-color: rgba(253, 164, 175, 0.16) !important;
  border-color: rgba(253, 164, 175, 0.3) !important;
}
body.htms-app main [class*="bg-yellow-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-yellow-50"],
body.htms-app main [class*="bg-amber-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-amber-50"] {
  background-color: rgba(253, 230, 138, 0.16) !important;
  border-color: rgba(253, 230, 138, 0.3) !important;
}
body.htms-app main [class*="bg-purple-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-purple-50"],
body.htms-app main [class*="bg-violet-50"], body.htms-app .fixed.inset-0.z-50 [class*="bg-violet-50"] {
  background-color: rgba(216, 180, 254, 0.16) !important;
  border-color: rgba(216, 180, 254, 0.3) !important;
}

/* --- 2. Map màu chữ mặc định sang bảng màu "trên nền sóng" (cả trang lẫn popup) --- */
body.htms-app main .text-gray-900,
body.htms-app main .text-gray-800,
body.htms-app main .text-gray-700,
body.htms-app main .text-slate-900,
body.htms-app main .text-slate-800,
body.htms-app main .text-slate-700,
body.htms-app .fixed.inset-0.z-50 .text-gray-900,
body.htms-app .fixed.inset-0.z-50 .text-gray-800,
body.htms-app .fixed.inset-0.z-50 .text-gray-700,
body.htms-app .fixed.inset-0.z-50 .text-slate-800,
body.htms-app .fixed.inset-0.z-50 .text-slate-700 {
  color: #ffffff !important;
}
body.htms-app main .text-gray-600,
body.htms-app main .text-slate-600,
body.htms-app .fixed.inset-0.z-50 .text-gray-600,
body.htms-app .fixed.inset-0.z-50 .text-slate-600 {
  color: #f5fffd !important;
}
body.htms-app main .text-gray-500,
body.htms-app main .text-slate-500,
body.htms-app .fixed.inset-0.z-50 .text-gray-500,
body.htms-app .fixed.inset-0.z-50 .text-slate-500 {
  color: #e6fffa !important;
}
body.htms-app main .text-gray-400,
body.htms-app main .text-gray-300,
body.htms-app main .text-slate-400,
body.htms-app main .text-slate-300,
body.htms-app .fixed.inset-0.z-50 .text-gray-400,
body.htms-app .fixed.inset-0.z-50 .text-gray-300,
body.htms-app .fixed.inset-0.z-50 .text-slate-400,
body.htms-app .fixed.inset-0.z-50 .text-slate-300 {
  color: #ccfbf1 !important;
}

/* --- 3. Màu nhấn: bản gốc là tông đậm cho nền trắng, cần sáng lên trên nền sóng --- */
body.htms-app main .text-shopee,
body.htms-app main .text-\[\#0f766e\],
body.htms-app main .text-teal-650,
body.htms-app main .text-teal-600,
body.htms-app main .text-teal-700 {
  /* #5eead4 (teal-300) trên nền kính teal chỉ đạt 3.35 — dưới ngưỡng 4.5 của chữ nhỏ.
     #ccfbf1 (teal-100) sáng hơn nên vượt ngưỡng, vẫn giữ đúng sắc teal của thương hiệu. */
  color: #ccfbf1 !important;
}
body.htms-app main .text-green-650,
body.htms-app main .text-green-600,
body.htms-app main .text-green-555,
body.htms-app main .text-emerald-600,
body.htms-app main .text-emerald-500 {
  color: #6ee7b7 !important;
}
body.htms-app main .text-yellow-650,
body.htms-app main .text-yellow-600,
body.htms-app main .text-amber-600 {
  color: #fde68a !important;
}
body.htms-app main .text-rose-500,
body.htms-app main .text-rose-600,
body.htms-app main .text-red-600 {
  /* rose-300 trên kính chỉ đạt 3.71; rose-200 sáng hơn, vượt 4.5 mà vẫn rõ là tông đỏ. */
  color: #fecdd3 !important;
}
body.htms-app main .text-blue-600,
body.htms-app main .text-blue-500 {
  color: #93c5fd !important;
}
body.htms-app main .text-orange-600,
body.htms-app main .text-orange-500 {
  color: #fdba74 !important;
}

/* --- 4. NGOẠI LỆ DUY NHẤT: ô nhập liệu ---
   Mọi bề mặt .bg-white nay đã là kính tối (khối trên), nên KHÔNG còn ngoại lệ "chữ tối" nào cho
   nút/pill/tab nữa — trước đây chính các ngoại lệ đó gây ra chữ tối-trên-nền-tối. Chỉ ô nhập
   liệu còn giữ nền trắng đặc (bắt buộc, để gõ và đọc giá trị cho rõ).
   Màu chữ dùng teal rất đậm #123f3a thay cho gần-đen — theo yêu cầu không dùng màu đen. */
body.htms-app main input,
body.htms-app main select,
body.htms-app main textarea,
body.htms-app main select option,
body.htms-app .fixed.inset-0.z-50 input,
body.htms-app .fixed.inset-0.z-50 select {
  color: #123f3a !important;
}
body.htms-app main input::placeholder,
body.htms-app main textarea::placeholder {
  color: #4b6360 !important;
  opacity: 1;
}

/* --- 5. Màu nhấn trong popup/bottom-sheet (khung popup dùng .bg-white + .rounded-t-3xl nên
   KHÔNG thuộc nhóm card kính .rounded-2xl/3xl; trước đây rơi vào ngoại lệ "giữ chữ tối" ở trên
   khiến giá tiền / lượt click / link mua hàng bị tối đen trên nền popup tối). --- */
body.htms-app .fixed.inset-0.z-50 .text-shopee,
body.htms-app .fixed.inset-0.z-50 .text-\[\#0f766e\],
body.htms-app .fixed.inset-0.z-50 .text-teal-600,
body.htms-app .fixed.inset-0.z-50 .text-teal-700,
body.htms-app .fixed.inset-0.z-50 a:not(.btn):not([class*="bg-"]) {
  color: #5eead4 !important;
}
body.htms-app .fixed.inset-0.z-50 .text-green-600,
body.htms-app .fixed.inset-0.z-50 .text-emerald-600,
body.htms-app .fixed.inset-0.z-50 .text-emerald-500 {
  color: #6ee7b7 !important;
}
body.htms-app .fixed.inset-0.z-50 .text-rose-500,
body.htms-app .fixed.inset-0.z-50 .text-rose-600,
body.htms-app .fixed.inset-0.z-50 .text-red-600,
body.htms-app .fixed.inset-0.z-50 .text-red-500 {
  color: #fda4af !important;
}
body.htms-app .fixed.inset-0.z-50 .text-yellow-600,
body.htms-app .fixed.inset-0.z-50 .text-amber-600 {
  color: #fde68a !important;
}
body.htms-app .fixed.inset-0.z-50 .text-blue-600,
body.htms-app .fixed.inset-0.z-50 .text-blue-500 {
  color: #93c5fd !important;
}

/* --- 6. Hộp nền GRADIENT màu nhạt (from-green-50, from-orange-50...) ---
   Quy tắc ở mục 1 chỉ đổi background-color, không bắt được gradient (nằm ở background-image),
   nên hộp "Hoàn tiền ước tính" trong popup vẫn là mảng trắng-xanh đặc giữa nền kính tối.
   Xoá gradient và thay bằng nền kính cùng tông để đồng bộ. */
body.htms-app main [class*="from-green-50"],
body.htms-app main [class*="from-emerald-50"],
body.htms-app .fixed.inset-0.z-50 [class*="from-green-50"],
body.htms-app .fixed.inset-0.z-50 [class*="from-emerald-50"] {
  background-image: none !important;
  background-color: rgba(110, 231, 183, 0.16) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
}
body.htms-app main [class*="from-blue-50"],
body.htms-app .fixed.inset-0.z-50 [class*="from-blue-50"] {
  background-image: none !important;
  background-color: rgba(147, 197, 253, 0.16) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
}
body.htms-app main [class*="from-red-50"],
body.htms-app main [class*="from-rose-50"],
body.htms-app .fixed.inset-0.z-50 [class*="from-red-50"],
body.htms-app .fixed.inset-0.z-50 [class*="from-rose-50"] {
  background-image: none !important;
  background-color: rgba(253, 164, 175, 0.16) !important;
  border-color: rgba(253, 164, 175, 0.3) !important;
}
/* Chữ trong hộp gradient xanh lá: bản gốc dùng green-600 (tối) cho nền trắng */
body.htms-app .fixed.inset-0.z-50 [class*="from-green-50"] .text-green-600,
body.htms-app .fixed.inset-0.z-50 [class*="from-green-50"] [class*="text-green-600"],
body.htms-app main [class*="from-green-50"] .text-green-600 {
  color: #6ee7b7 !important;
}

/* ==========================================================================
   LỚP NỀN CHUYỂN ĐỘNG — làm dịu RIÊNG cho khu tài khoản

   Đo trên Chrome (6 trang × 3 kích thước, lấy màu nền từ pixel ảnh chụp): 266/426 lỗi
   tương phản đều là cùng một màu chữ #99f6e4 nằm TRỰC TIẾP trên lớp sóng, không phải
   trong card. Nền sóng ở đó vào khoảng rgb(30,135,128); với nền sáng cỡ này thì NGAY CẢ
   CHỮ TRẮNG TINH cũng chỉ đạt 4.27 — dưới ngưỡng 4.5 của chữ nhỏ. Không có màu chữ nào
   cứu được, nên phải hạ độ sáng của chính lớp nền.

   Trang chủ GIỮ NGUYÊN (khai báo gốc nằm ở htms/styles.css, file này chỉ nạp ở layout
   khu tài khoản): trang chủ chỉ có tiêu đề lớn nên nền sáng vẫn đọc tốt, và đó là ấn
   tượng thị giác đầu tiên của sản phẩm.

   Chuyển động được giữ nguyên hoàn toàn — vẫn đúng hai lớp polygon và hai animation cũ,
   chỉ giảm độ mờ để chúng không kéo nền sáng trở lại.
   ========================================================================== */
body.htms-app .htms-animated-bg {
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(13, 148, 136, 0.28), transparent 58%),
    radial-gradient(900px 600px at 88% 72%, rgba(232, 163, 23, 0.07), transparent 55%),
    linear-gradient(165deg, #05302e 0%, #073f3b 42%, #0a4f49 72%, #042a28 100%);
}
body.htms-app .htms-animated-bg--soft {
  background:
    radial-gradient(1100px 640px at 15% 10%, rgba(13, 148, 136, 0.24), transparent 58%),
    radial-gradient(800px 520px at 88% 78%, rgba(232, 163, 23, 0.06), transparent 55%),
    linear-gradient(165deg, #052e2c 0%, #073c38 45%, #0a4b45 78%, #042926 100%);
}
/* Polygon chuyển động: giữ nguyên hình, nhịp và animation, chỉ hạ độ mờ để không làm
   sáng lại phần nền vừa hạ ở trên. */
body.htms-app .htms-animated-bg::before {
  opacity: 0.42;
}
body.htms-app .htms-animated-bg::after {
  opacity: 0.28;
}

/* --- 7. Màn hình rất nhỏ (<=360px): chống cắt chữ ---
   Đo trên Chrome ở 320px: mô tả dưới tiêu đề trang Đơn hàng/Rút tiền bị ép 1 dòng bằng
   whitespace-nowrap nên tràn khỏi khung 70% (right 337 > 320) và bị cắt; hàng 2 dropdown lọc
   ở trang Giới thiệu tràn tới 400px. Cho phép xuống dòng thay vì cắt mất chữ. */
@media (max-width: 360px) {
  body.htms-app main .bg-gradient-to-r[class*="from-[#FFF4EC]"] p,
  body.htms-app main .bg-gradient-to-r[class*="from-[#fff0ed]"] p {
    white-space: normal !important;
  }
  body.htms-app main .bg-gradient-to-r[class*="from-[#FFF4EC]"] > .flex,
  body.htms-app main .bg-gradient-to-r[class*="from-[#fff0ed]"] > .flex {
    max-width: 78% !important;
  }
  body.htms-app main .flex.items-center.gap-x-4 {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.htms-app main select {
    max-width: 100%;
  }
}

/* --- 8. Nền GRADIENT SÁNG còn sót (from-orange-50 to-white, from-gray-50...) ---
   Phát hiện qua ảnh chụp trang Hồ sơ: thẻ đầu trang vẫn là mảng trắng-cam trong khi chữ đã đổi
   sang trắng => tên tài khoản và email không đọc được. Bài rà soát tự động bỏ sót vì nền gradient
   nằm ở background-image (không phải background-color). Gom hết các gradient sáng về kính. */
body.htms-app main [class*="bg-gradient"][class*="from-orange-50"],
body.htms-app main [class*="bg-gradient"][class*="from-amber-50"],
body.htms-app main [class*="bg-gradient"][class*="from-yellow-50"],
body.htms-app main [class*="bg-gradient"][class*="from-gray-50"],
body.htms-app main [class*="bg-gradient"][class*="from-slate-50"],
body.htms-app main [class*="bg-gradient"][class*="from-teal-50"],
body.htms-app main [class*="bg-gradient"][class*="to-white"],
body.htms-app .fixed.inset-0.z-50 [class*="bg-gradient"][class*="from-orange-50"],
body.htms-app .fixed.inset-0.z-50 [class*="bg-gradient"][class*="to-white"] {
  background-image: none !important;
  background-color: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}

/* --- 9. Hai màu nhấn còn sót (đo được ở vòng rà soát cuối) ---
   - text-[#10B981]: mã màu viết tay (không phải class Tailwind chuẩn) nên các quy tắc map ở trên
     không trúng => "+50,000đ" xanh lá đậm trên nền teal, tương phản 1.82.
   - text-orange-700 trên huy hiệu bước: bị khối "orange -> teal" cũ đổi thành teal đậm, đặt trên
     nền tối thành 2.41. Đưa cả hai về tông sáng của bảng màu hiện tại. */
body.htms-app main .text-\[\#10B981\],
body.htms-app .fixed.inset-0.z-50 .text-\[\#10B981\] {
  color: #6ee7b7 !important;
}
body.htms-app main .text-orange-700,
body.htms-app main .text-orange-800 {
  color: #fdba74 !important;
}
body.htms-app main [class*="from-orange-100"] {
  background-image: none !important;
  background-color: rgba(253, 186, 116, 0.18) !important;
  border-color: rgba(253, 186, 116, 0.3) !important;
}

/* Lớp làm dịu nền sóng — chỉ bật ở khu tài khoản (xem partials/animated-background).
   z-index 2 để nằm trên canvas Vanta; nội dung trang ở tầng cao hơn nên không bị ảnh hưởng.
   Đây mới là chỗ thực sự hạ được độ sáng nền: sửa `background` của thẻ cha vô tác dụng vì
   canvas WebGL vẽ đè lên. */
body.htms-app .htms-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(3, 26, 24, 0.5);
}

/* --- 10. Tablet 768–1023px: chống tràn ngang ở header ---
   Đo trên Chrome ở 768px: scrollWidth 938 > 768, trang cuộn ngang được. Lý do: đúng mốc `md`
   Tailwind bật CÙNG LÚC thanh nav desktop (hidden md:flex) và cụm nút desktop, cộng logo thì vượt
   bề rộng. Trong khoảng này thanh điều hướng DƯỚI vẫn đang hiện (chỉ ẩn từ 880px) nên thanh nav
   desktop là thừa — ẩn nó tới khi đủ rộng (>=1024px). Không đụng bố cục desktop. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.htms-app header.htms-app-header nav.md\:flex {
    display: none !important;
  }
  body.htms-app header.htms-app-header .max-w-7xl > .flex {
    min-width: 0;
  }
}

/* --- 11. Hàng bộ lọc trên mọi mobile (<=480px) ---
   Bản vá ở mục 7 chỉ áp <=360px nên ở 390px (iPhone phổ biến nhất) hàng "Cấp / Trạng thái" của
   trang Giới thiệu vẫn tràn tới 400px và bị cắt. Nới phạm vi, đồng thời cho các hàng chip lọc
   dùng shrink-0 được xuống dòng thay vì bị cắt mất ở mép. */
@media (max-width: 480px) {
  body.htms-app main .flex.items-center.gap-x-4,
  body.htms-app main .flex.items-center.gap-x-5 {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  body.htms-app main select {
    max-width: 100%;
    min-width: 0;
  }
  /* Hàng chip lọc: cho xuống dòng, trừ khi nằm trong vùng cuộn ngang cố ý */
  body.htms-app main .flex.items-center.gap-2:not(.overflow-x-auto):has(> .shrink-0) {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* --- 12. KHÔNG DÙNG MÀU ĐEN CHO NỀN ---
   Lớp phủ sau popup/bottom-sheet đang dùng class bg-black/60 (đen thuần) của Tailwind, và vùng
   thả "X" dùng rgba(15,23,42) (xanh đen slate). Đổi sang teal đậm cùng hệ thương hiệu để không
   còn mảng đen nào trên giao diện. Token kính/bóng đổ cũng đã đổi từ rgba(4,26,23)/rgba(0,0,0)
   sang rgba(8,59,54)/rgba(6,45,42). */
body.htms-app .bg-black\/60,
body.htms-app .bg-black\/50,
body.htms-app .bg-black\/40,
body.htms-app .bg-black\/30,
body.htms-app .bg-black\/20,
body.htms-app .bg-black\/10,
body.htms-app .bg-black\/5 {
  background-color: rgba(6, 45, 42, 0.55) !important;
}
body.htms-app .htms-float-trash {
  background: rgba(8, 59, 54, 0.9) !important;
}

/* --- 13. Dòng meta bài viết (lượt xem / ngày / thời gian đọc) trên màn hình nhỏ ---
   Đo ở 320px trang /blog: hàng meta rộng hơn thẻ cha 46px và chạm mép màn hình (right 321/320),
   ký tự cuối của số lượt xem bị sát mép. Cho phép xuống dòng thay vì để tràn. */
@media (max-width: 420px) {
  body.htms-app main .flex.items-center.gap-3.text-xs {
    flex-wrap: wrap;
    row-gap: 4px;
    min-width: 0;
  }
}

/* ==========================================================================
   14. SẮC NÉT: BỎ HIỆU ỨNG LÀM NHOÈ CHỮ & ICON
   Yêu cầu: chữ/icon phải sắc, không blur–glow–bóng mờ, không bị opacity dìm.
   Lưu ý: chỉ gỡ hiệu ứng trên NỘI DUNG (chữ, icon). Không đụng backdrop-filter
   của header/thanh nav vì đó là lớp chrome cần tách khỏi nội dung cuộn phía sau.
   ========================================================================== */

/* 14.1 Không bóng chữ, không glow */
body.htms-app main,
body.htms-app main *,
body.htms-app .fixed.inset-0.z-50 *,
body.htms-app .more-sheet-panel * {
  text-shadow: none !important;
}

/* 14.2 Icon: sắc nét, không đổ bóng/nhoè, không bị làm mờ bằng opacity */
body.htms-app main svg,
body.htms-app main [data-lucide],
body.htms-app .fixed.inset-0.z-50 svg,
body.htms-app .more-sheet-panel svg {
  filter: none !important;
  shape-rendering: geometricPrecision;
}
/* Các tiện ích Tailwind hay dùng để "làm dịu" icon — trên nền kính lại khiến icon biến mất */
body.htms-app main svg.opacity-50,
body.htms-app main svg.opacity-60,
body.htms-app main svg.opacity-70,
body.htms-app main i.opacity-50,
body.htms-app main i.opacity-60,
body.htms-app main i.opacity-70,
body.htms-app main .opacity-50 > svg,
body.htms-app main .opacity-60 > svg {
  opacity: 1 !important;
}
/* Nét icon đủ dày để không bị mảnh/mờ ở cỡ nhỏ */
body.htms-app main svg[stroke-width="1"],
body.htms-app main svg[stroke-width="1.5"] {
  stroke-width: 2 !important;
}

/* 14.3 Card kính: không blur nền để hoạ tiết sóng phía sau vẫn SẮC, viền đủ rõ để
   thấy ranh giới card, bóng đổ nhẹ thay vì đậm gây cảm giác đục. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute),
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute),
body.htms-app .htms-card,
body.htms-app main .bg-white {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-width: 1px !important;
}

/* 14.4 Chữ chính không được để opacity thấp */
body.htms-app main p.opacity-60,
body.htms-app main p.opacity-70,
body.htms-app main span.opacity-60,
body.htms-app main span.opacity-70,
body.htms-app main .text-white\/60,
body.htms-app main .text-white\/70,
body.htms-app main .text-white\/80 {
  opacity: 1 !important;
  color: #f5fffd !important;
}

/* ==========================================================================
   15. HAI BẬC NỀN CARD — đo bằng Chrome sau khi làm sáng kính
   Làm sáng kính giúp card nội dung tách khỏi nền (chữ trắng đạt ~4.7), NHƯNG các thẻ
   vốn đã có sắc teal riêng (Ví, Số dư, Mốc điểm danh) cộng thêm lớp sáng thì hoá quá
   sáng: đo được nền rgb(59,184,170) và rgb(74,218,200), chữ trắng chỉ còn 2.45 / 1.73.
   => Thẻ HERO dùng nền teal ĐẬM để chữ trắng nổi; thẻ nội dung giữ kính sáng.
   ========================================================================== */
body.htms-app main .wallet-hero,
body.htms-app main .wallet-hero.bg-gradient-to-tr,
body.htms-app main .wallet-hero.bg-gradient-to-br,
body.htms-app main .htms-balance-card,
body.htms-app main [class*="from-orange-100"],
body.htms-app main .bg-\[\#f4faf8\] {
  background-color: rgba(6, 60, 55, 0.55) !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.2), transparent 55%),
    linear-gradient(145deg, rgba(20, 184, 166, 0.14) 0%, rgba(13, 148, 136, 0.12) 100%) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
body.htms-app main .wallet-hero,
body.htms-app main .wallet-hero *,
body.htms-app main .htms-balance-card,
body.htms-app main .htms-balance-card * {
  color: #ffffff !important;
}
body.htms-app main .wallet-hero .wallet-hero-btn,
body.htms-app main .wallet-hero .wallet-hero-btn * {
  color: var(--teal) !important;
}

/* Huy hiệu trạng thái: nền màu nhạt trên card ĐÃ sáng => chữ pastel chìm (đo 2.19-2.49).
   Cho nền huy hiệu tối lại, giữ chữ pastel sáng => tương phản ~4.5. */
body.htms-app main [class*="bg-green-50"],
body.htms-app main [class*="bg-emerald-50"],
body.htms-app main [class*="bg-teal-50"],
body.htms-app main [class*="bg-blue-50"],
body.htms-app main [class*="bg-sky-50"],
body.htms-app main [class*="bg-indigo-50"],
body.htms-app main [class*="bg-red-50"],
body.htms-app main [class*="bg-rose-50"],
body.htms-app main [class*="bg-pink-50"],
body.htms-app main [class*="bg-yellow-50"],
body.htms-app main [class*="bg-amber-50"],
body.htms-app main [class*="bg-purple-50"],
body.htms-app main [class*="bg-violet-50"],
body.htms-app main [class*="bg-orange-50"] {
  background-color: rgba(6, 60, 55, 0.5) !important;
}

/* 15.b Các banner hero khác cũng dùng gradient (Thông báo, Giftcode, Tiếp thị liên kết,
   avatar hồ sơ) — trước đây gán nền kính SÁNG nên hoá teal/vàng nhạt, chữ trắng chỉ đạt
   1.86-2.45. Đưa về cùng nền teal đậm như thẻ hero. */
body.htms-app main div[class*="bg-gradient"][class*="from-shopee"],
body.htms-app main .bg-gradient-to-r[class*="from-[#FFF4EC]"],
body.htms-app main .bg-gradient-to-r[class*="from-[#fff0ed]"] {
  background-color: rgba(6, 60, 55, 0.58) !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, rgba(13, 148, 136, 0.1) 100%) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
/* Avatar chữ cái: giữ khối teal ĐẶC để chữ trắng luôn nổi, không phải kính */
body.htms-app main .rounded-2xl[class*="bg-gradient"][class*="from-shopee"],
body.htms-app main .rounded-full[class*="bg-gradient"][class*="from-shopee"] {
  background-color: var(--teal-deep) !important;
  background-image: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%) !important;
}

/* ==========================================================================
   ĐỒNG BỘ THEO TRANG CHỦ — nền chuyển động và card

   Trước đó tôi làm riêng cho khu tài khoản: nền sóng tối hơn, thêm lớp phủ .htms-bg-scrim,
   và --glass-bg đục hơn (0.45) — mục đích là kéo tương phản chữ nhỏ lên đủ ngưỡng.

   Nay theo yêu cầu, độ sáng và màu của cả nền chuyển động lẫn card phải khớp trang chủ.
   Khối này hoàn tác đúng ba thứ đó, đưa về nguyên giá trị của htms/styles.css.

   Đánh đổi cần biết: trên nền sáng của trang chủ, chữ nhỏ 12px không thể đạt ngưỡng 4.5 —
   đo được ngay cả CHỮ TRẮNG TINH cũng chỉ tới khoảng 4.3. Bù lại bằng cách đẩy màu chữ lên
   mức sáng nhất có thể (khối map màu ở trên) và giữ sàn cỡ chữ 12px.
   ========================================================================== */
body.htms-app {
  /* NỀN CHUYỂN ĐỘNG giữ y hệt trang chủ (xem khối bên dưới) — chỉ nền CARD là đậm hơn.

     Lý do: khu tài khoản dày đặc nhãn nhỏ, mã đơn, ngày giờ. Với kính mint sáng 15% của
     trang chủ, nền card sau khi chồng lên sóng ra khoảng rgb(246,250,249) — gần trắng.
     Chữ trắng trên đó chỉ đạt 1.05, gần như vô hình; đo được ở nhãn "Số tiền cần rút (VND)"
     và dòng "Số tiền tối thiểu | Phí rút".

     Không thể cứu bằng cách đổi màu chữ: trên nền sáng cỡ đó, chữ trắng tinh cũng chỉ tới
     ~4.3, dưới ngưỡng 4.5 của chữ nhỏ. Buộc phải hạ độ sáng của nền card.

     0.30 là mức dung hoà: card vẫn trong suốt thấy sóng chạy phía sau, nhưng đủ tối để chữ
     sắc nét. Trang chủ và lớp nền động của khu tài khoản không đổi gì. */
  --glass-bg: rgba(4, 32, 29, 0.3);
}

/* Trả nền sóng về đúng gradient của trang chủ */
body.htms-app .htms-animated-bg {
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(20, 184, 166, 0.35), transparent 58%),
    radial-gradient(900px 600px at 88% 72%, rgba(232, 163, 23, 0.12), transparent 55%),
    linear-gradient(165deg, var(--wave-deep) 0%, var(--wave-mid) 42%, var(--wave-lit) 72%, #0a3d3a 100%);
}
body.htms-app .htms-animated-bg--soft {
  background:
    radial-gradient(1100px 640px at 15% 10%, rgba(20, 184, 166, 0.28), transparent 58%),
    radial-gradient(800px 520px at 88% 78%, rgba(232, 163, 23, 0.08), transparent 55%),
    linear-gradient(165deg, #0c5550 0%, #0f6b64 45%, #12857c 78%, #0a4540 100%);
}
/* Polygon chuyển động: trả về đúng độ mờ gốc 0.85 / 0.55 */
body.htms-app .htms-animated-bg::before { opacity: 0.85; }
body.htms-app .htms-animated-bg::after  { opacity: 0.55; }

/* Bỏ lớp phủ làm tối — trang chủ không có lớp này */
body.htms-app .htms-bg-scrim {
  background: transparent;
}

/* Tên thương hiệu trên header khu tài khoản — thu nhỏ ở màn hẹp để không bị cắt.
   Đo được ở màn 390px: cần 258px nhưng khung chỉ còn 211px (sau khi trừ logo xu, chuông và
   nút ba gạch) nên truncate cắt thành "…TikTo…". Ở 14px chỉ còn ~205px, vừa khít.
   Giữ truncate làm lưới an toàn cho các tên site dài hơn nữa. */
@media (max-width: 430px) {
  body.htms-app .htms-brand-name {
    font-size: 14px !important;
  }
}
@media (max-width: 360px) {
  body.htms-app .htms-brand-name {
    font-size: 13px !important;
  }
}

/* 15.c Ô vuông chứa icon (icon chip) nền sáng — icon đã đổi sang mint/trắng nên biến mất.
   Đo được: icon #ccfbf1 trên nền rgb(236,243,243) => tương phản 1.0 (vô hình hoàn toàn).
   Gồm các nền hex viết cứng (#FFEFEB, #e8f5f2, #fff0ed) và chip xám. Đưa hết về teal đậm. */
body.htms-app main .bg-\[\#FFEFEB\],
body.htms-app main .bg-\[\#e8f5f2\],
body.htms-app main .bg-\[\#fff0ed\],
body.htms-app main .bg-gradient-to-r[class*="from-[#FFF4EC]"] .bg-\[\#FFEFEB\],
body.htms-app main .bg-gradient-to-r[class*="from-[#fff0ed]"] .bg-\[\#fff0ed\] {
  background-color: rgba(6, 60, 55, 0.5) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
/* Chip xám nhỏ đựng icon: nền trắng 10% nằm trên card ĐÃ sáng nên vẫn sáng => icon chìm.
   Đổi sang teal đậm giống huy hiệu trạng thái. */
body.htms-app main [class*="bg-gray-50"]:not(tr):not(td):not(th):not(input):not(select):not(textarea),
body.htms-app main [class*="bg-gray-100"]:not(tr):not(td):not(th):not(input):not(select):not(textarea) {
  background-color: rgba(6, 60, 55, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
/* Icon bên trong các chip trên: dùng mint sáng để nổi trên nền teal đậm */
body.htms-app main [class*="bg-gray-50"] svg,
body.htms-app main [class*="bg-gray-100"] svg,
body.htms-app main .bg-\[\#FFEFEB\] svg,
body.htms-app main .bg-\[\#e8f5f2\] svg,
body.htms-app main .bg-\[\#fff0ed\] svg {
  color: #ccfbf1 !important;
  stroke: currentColor !important;
}

/* ==========================================================================
   16. MÀU ICON/CHỮ NGỮ NGHĨA — PHỦ CẢ FOOTER, không chỉ <main>
   Rà soát icon bằng Chrome (đã hỗ trợ đọc màu oklch của Tailwind v4) phát hiện:
   icon "zap" xanh dương ở khối Cam Kết trong FOOTER lặp trên 12 trang chỉ đạt 1.64;
   cùng loạt icon crown/hourglass/loader/shield-alert dùng sắc đậm nên chìm trên nền teal.
   Gom về bảng pastel sáng, áp cho main + footer + popup.
   ========================================================================== */
body.htms-app main [class*="text-blue-"],
body.htms-app main [class*="text-sky-"],
body.htms-app main [class*="text-indigo-"],
body.htms-app > footer [class*="text-blue-"],
body.htms-app > footer [class*="text-sky-"],
body.htms-app .fixed.inset-0.z-50 [class*="text-blue-"] {
  color: #93c5fd !important;
}
body.htms-app main [class*="text-green-"],
body.htms-app main [class*="text-emerald-"],
body.htms-app > footer [class*="text-green-"],
body.htms-app > footer [class*="text-emerald-"],
body.htms-app .fixed.inset-0.z-50 [class*="text-green-"],
body.htms-app .fixed.inset-0.z-50 [class*="text-emerald-"] {
  color: #6ee7b7 !important;
}
body.htms-app main [class*="text-orange-"],
body.htms-app main [class*="text-amber-"],
body.htms-app main [class*="text-yellow-"],
body.htms-app > footer [class*="text-orange-"],
body.htms-app > footer [class*="text-amber-"],
body.htms-app > footer [class*="text-yellow-"] {
  color: #fdba74 !important;
}
body.htms-app main [class*="text-red-"],
body.htms-app main [class*="text-rose-"],
body.htms-app main [class*="text-pink-"],
body.htms-app > footer [class*="text-red-"],
body.htms-app > footer [class*="text-rose-"],
body.htms-app .fixed.inset-0.z-50 [class*="text-red-"],
body.htms-app .fixed.inset-0.z-50 [class*="text-rose-"] {
  color: #fda4af !important;
}
body.htms-app main [class*="text-purple-"],
body.htms-app main [class*="text-violet-"],
body.htms-app > footer [class*="text-purple-"] {
  color: #d8b4fe !important;
}
body.htms-app main [class*="text-teal-"],
body.htms-app > footer [class*="text-teal-"] {
  color: #5eead4 !important;
}
/* Chip xám còn sót (gray-200, slate-50/100) vẫn sáng khiến icon trắng biến mất (đo 1.08-1.10) */
body.htms-app main [class*="bg-gray-200"]:not(input):not(select):not(textarea),
body.htms-app main [class*="bg-slate-50"]:not(input):not(select):not(textarea),
body.htms-app main [class*="bg-slate-100"]:not(input):not(select):not(textarea) {
  background-color: rgba(6, 60, 55, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* 16.b Ba mẫu chip nền sáng cuối cùng (soi từng cái bằng Chrome, không suy đoán):
   - bg-[#F4F6F8]: ô tròn khoá ngày điểm danh (6 cái), icon trắng trên nền sáng => 1.08
   - bg-<màu>-500/10: chip alpha Tailwind, nằm trên card đã sáng nên vẫn sáng
   - gradient vàng nhạt from-amber-100/200: huy hiệu vương miện, icon cam => 1.29-2.12
   Liệt kê tường minh từng lớp, KHÔNG dùng [class*="/10"] chung vì sẽ trúng nhầm
   shadow-shopee/20 của thẻ Ví và phá nền thẻ đó. */
body.htms-app main .bg-\[\#F4F6F8\],
body.htms-app main [class*="bg-blue-500/1"],
body.htms-app main [class*="bg-green-500/1"],
body.htms-app main [class*="bg-emerald-500/1"],
body.htms-app main [class*="bg-red-500/1"],
body.htms-app main [class*="bg-rose-500/1"],
body.htms-app main [class*="bg-amber-500/1"],
body.htms-app main [class*="bg-orange-500/1"],
body.htms-app main [class*="bg-yellow-500/1"],
body.htms-app main [class*="bg-purple-500/1"],
body.htms-app main [class*="bg-teal-500/1"],
body.htms-app main [class*="bg-shopee/1"],
body.htms-app main [class*="from-amber-100"],
body.htms-app main [class*="from-amber-200"],
body.htms-app main [class*="from-yellow-100"] {
  background-color: rgba(6, 60, 55, 0.5) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 16.c Chip icon trong FOOTER — nằm ngoài <main> nên toàn bộ quy tắc chip ở trên không với tới.
   Đo được: chip bg-blue-500/10 ở khối "Cam Kết" giữ nguyên nền xanh nhạt, icon chìm (1.64).
   Áp cùng nền teal đậm để icon pastel nổi rõ. */
body.htms-app > footer [class*="bg-blue-500/1"],
body.htms-app > footer [class*="bg-green-500/1"],
body.htms-app > footer [class*="bg-emerald-500/1"],
body.htms-app > footer [class*="bg-amber-500/1"],
body.htms-app > footer [class*="bg-orange-500/1"],
body.htms-app > footer [class*="bg-yellow-500/1"],
body.htms-app > footer [class*="bg-red-500/1"],
body.htms-app > footer [class*="bg-rose-500/1"],
body.htms-app > footer [class*="bg-teal-500/1"],
body.htms-app > footer [class*="bg-shopee/1"],
body.htms-app > footer [class*="bg-gray-50"],
body.htms-app > footer [class*="bg-gray-100"],
body.htms-app > footer [class*="from-amber-100"],
body.htms-app > footer [class*="from-yellow-100"] {
  background-color: rgba(6, 60, 55, 0.5) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 16.d Huy hiệu dùng sắc -100 (bg-orange-100/60, bg-emerald-100/60, bg-green-100...) —
   nhìn thấy trên ảnh chụp trang Điểm danh: pill "CHƯA ĐẠT" gần như vô hình vì nền sáng
   nằm trên card cũng sáng. Đưa về nền teal đậm như các huy hiệu khác. */
body.htms-app main [class*="bg-orange-100"],
body.htms-app main [class*="bg-amber-100"],
body.htms-app main [class*="bg-yellow-100"],
body.htms-app main [class*="bg-green-100"],
body.htms-app main [class*="bg-emerald-100"],
body.htms-app main [class*="bg-teal-100"],
body.htms-app main [class*="bg-blue-100"],
body.htms-app main [class*="bg-indigo-100"],
body.htms-app main [class*="bg-purple-100"],
body.htms-app main [class*="bg-violet-100"],
body.htms-app main [class*="bg-red-100"],
body.htms-app main [class*="bg-rose-100"],
body.htms-app main [class*="bg-pink-100"] {
  background-color: rgba(6, 60, 55, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 16.e Nâng pastel sáng thêm một bậc — sau khi card sáng lên, các màu nhấn pastel cũ chỉ còn
   2.1-2.5. Sáng hơn = tương phản tốt hơn trên nền teal trung tính của card. */
body.htms-app main [class*="text-red-"],
body.htms-app main [class*="text-rose-"],
body.htms-app main [class*="text-pink-"],
body.htms-app > footer [class*="text-red-"],
body.htms-app > footer [class*="text-rose-"] { color: #fecdd3 !important; }
body.htms-app main [class*="text-orange-"],
body.htms-app main [class*="text-amber-"],
body.htms-app main [class*="text-yellow-"],
body.htms-app > footer [class*="text-orange-"],
body.htms-app > footer [class*="text-amber-"] { color: #fed7aa !important; }
body.htms-app main [class*="text-blue-"],
body.htms-app main [class*="text-sky-"],
body.htms-app main [class*="text-indigo-"],
body.htms-app > footer [class*="text-blue-"] { color: #bfdbfe !important; }
body.htms-app main [class*="text-green-"],
body.htms-app main [class*="text-emerald-"],
body.htms-app > footer [class*="text-green-"],
body.htms-app > footer [class*="text-emerald-"] { color: #a7f3d0 !important; }

/* Nút mạng xã hội giữ NỀN THƯƠNG HIỆU sáng (Zalo #e8f2ff) — ở đây chữ phải TỐI mới đọc được,
   không áp bảng pastel. Đo trước khi sửa: chữ #93c5fd trên nền #e8f2ff chỉ 1.6. */
body.htms-app main .bg-\[\#e8f2ff\],
body.htms-app main .bg-\[\#e8f2ff\] * {
  color: #1d4ed8 !important;
}

/* ==========================================================================
   17. TRANG NỘI DUNG TĨNH (/page/dieu-khoan-dich-vu, /page/chinh-sach-bao-mat)
   Đo trên Chrome: khối bài viết dùng class bg-white/70 — KHÁC token .bg-white nên toàn bộ
   quy tắc kính ở trên không với tới, giữ nguyên nền trắng 70% trong khi chữ đã đổi sang
   trắng/mint => tiêu đề 1.59, dòng ngày tháng 1.41 (không đọc được).
   Chỉ đổi các mức trắng ĐẬM (>=70%) vốn dùng làm nền card; giữ nguyên bg-white/20 dùng cho
   nút trên thẻ Ví. Nội dung bài dùng Tailwind Typography (.prose) có bảng màu riêng nên
   phải map lại tương tự cách đã làm cho blog.css.
   ========================================================================== */
body.htms-app main [class*="bg-white/70"],
body.htms-app main [class*="bg-white/75"],
body.htms-app main [class*="bg-white/80"],
body.htms-app main [class*="bg-white/85"],
body.htms-app main [class*="bg-white/90"],
body.htms-app main [class*="bg-white/95"] {
  background-color: var(--glass-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--glass-border) !important;
}
body.htms-app main .prose,
body.htms-app main .prose p,
body.htms-app main .prose li,
body.htms-app main .prose td,
body.htms-app main .prose blockquote {
  color: #f5fffd !important;
}
body.htms-app main .prose h1,
body.htms-app main .prose h2,
body.htms-app main .prose h3,
body.htms-app main .prose h4,
body.htms-app main .prose strong,
body.htms-app main .prose b {
  color: #ffffff !important;
}
body.htms-app main .prose a {
  color: #5eead4 !important;
}
body.htms-app main .prose th {
  background-color: rgba(6, 60, 55, 0.5) !important;
  color: #ffffff !important;
}
body.htms-app main .prose code {
  background-color: rgba(6, 60, 55, 0.5) !important;
  color: #ccfbf1 !important;
}
body.htms-app main .prose hr,
body.htms-app main .prose td,
body.htms-app main .prose th {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ==========================================================================
   18. TRẢ LẠI TÔNG TỐI CHO SẮC 800/900/950
   Các quy tắc pastel ở mục 16 dùng [class*="text-amber-"] nên khớp CẢ CHUỖI CON — đổi nhầm
   luôn text-amber-950, vốn là chữ nâu đậm CỐ Ý đặt trên chip màu sáng (huy hiệu hạng nền
   bg-amber-300 ở trang /ranking). Kết quả đo: chữ sáng trên nền vàng => 1.07, không đọc nổi.
   Các sắc 800/900/950 luôn là "chữ tối trên nền sáng" nên phải giữ tối. Dùng tông đậm CÙNG HỌ
   MÀU (không dùng đen) để vừa đọc rõ vừa giữ nhận diện.
   ========================================================================== */
body.htms-app main [class*="text-amber-800"],
body.htms-app main [class*="text-amber-900"],
body.htms-app main [class*="text-amber-950"],
body.htms-app main [class*="text-yellow-800"],
body.htms-app main [class*="text-yellow-900"],
body.htms-app main [class*="text-orange-800"],
body.htms-app main [class*="text-orange-900"],
body.htms-app main [class*="text-orange-950"] {
  color: #451a03 !important;
}
body.htms-app main [class*="text-green-800"],
body.htms-app main [class*="text-green-900"],
body.htms-app main [class*="text-green-950"],
body.htms-app main [class*="text-emerald-800"],
body.htms-app main [class*="text-emerald-900"],
body.htms-app main [class*="text-emerald-950"] {
  color: #052e16 !important;
}
body.htms-app main [class*="text-blue-800"],
body.htms-app main [class*="text-blue-900"],
body.htms-app main [class*="text-blue-950"],
body.htms-app main [class*="text-sky-800"],
body.htms-app main [class*="text-sky-900"],
body.htms-app main [class*="text-indigo-800"],
body.htms-app main [class*="text-indigo-900"] {
  color: #172554 !important;
}
body.htms-app main [class*="text-red-800"],
body.htms-app main [class*="text-red-900"],
body.htms-app main [class*="text-red-950"],
body.htms-app main [class*="text-rose-800"],
body.htms-app main [class*="text-rose-900"],
body.htms-app main [class*="text-rose-950"],
body.htms-app main [class*="text-pink-900"] {
  color: #4c0519 !important;
}
body.htms-app main [class*="text-purple-800"],
body.htms-app main [class*="text-purple-900"],
body.htms-app main [class*="text-violet-900"] {
  color: #2e1065 !important;
}
body.htms-app main [class*="text-teal-800"],
body.htms-app main [class*="text-teal-900"],
body.htms-app main [class*="text-teal-950"] {
  color: #042f2e !important;
}

/* ==========================================================================
   19. TRANG BẢNG XẾP HẠNG (/ranking)
   ========================================================================== */

/* 19.a Tiêu đề dùng bg-clip-text (chữ tô bằng gradient). Quy tắc ép gradient teal ở mục "orange
   leftovers" đổi nền gradient của nó thành teal ĐẬM => chữ teal đậm trên card teal đậm, chìm hẳn
   (ảnh chụp: "Cao Thủ Hoàn Tiền" mờ hơn hẳn dòng trên). Cho gradient SÁNG để chữ nổi trên nền tối. */
body.htms-app main .bg-clip-text.bg-gradient-to-r,
body.htms-app main .bg-clip-text.bg-gradient-to-br,
body.htms-app main .bg-clip-text.bg-gradient-to-tr,
body.htms-app main .text-transparent.bg-clip-text {
  background-image: linear-gradient(135deg, #ffffff 0%, #5eead4 100%) !important;
}



/* ==========================================================================
   20. KHỐI .prose KHÔNG ĐƯỢC CÓ NỀN RIÊNG
   Khối nội dung bài viết mang các class biến thể của Tailwind Typography như
   "prose-th:bg-gray-50" (chỉ định nền cho thẻ <th> BÊN TRONG). Selector chip
   [class*="bg-gray-50"] khớp theo CHUỖI CON nên trúng luôn chính khối .prose,
   tô nguyên bài thành mảng teal đặc vuông góc — đúng chỗ nhìn rất xấu.
   Trả .prose về trong suốt; nền chỉ áp cho <th> thật (đã khai ở mục 17).
   ========================================================================== */
/* Lặp .prose 3 lần để độ ưu tiên (0,4,3) vượt selector chip (0,2,8) — selector chip có
   6 mệnh đề :not() nên tự nó đã rất "nặng"; chỉ thêm !important là chưa đủ thắng. */
body.htms-app main .prose.prose.prose {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   21. CĂN LỀ 2 BÊN CHO NỘI DUNG BÀI DÀI
   Áp cho đoạn văn và danh sách trong trang tĩnh (.prose) và bài blog (.blog-content).
   KHÔNG áp cho tiêu đề — tiêu đề căn đều 2 bên sẽ bị giãn chữ xấu khi chỉ có vài từ.
   overflow-wrap: break-word để URL/mã dài không phá khung khi bị kéo giãn.
   ========================================================================== */
body.htms-app main .prose p,
body.htms-app main .prose li,
body.htms-app main .prose blockquote,
body.htms-app main .blog-content p,
body.htms-app main .blog-content li {
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
}

/* ==========================================================================
   22. MỖI ĐIỀU KHOẢN MỘT CARD (trang nội dung tĩnh)
   Nội dung do TinyMCE sinh ra là chuỗi phẳng h2/p/ul liên tiếp; view đã tách theo <h2>
   và bọc mỗi mục vào <section class="term-card">. Ở đây chỉ lo phần nhìn.
   Cỡ chữ 12px theo yêu cầu — đặt cụ thể cho p/li/td để không đụng tiêu đề mục.
   ========================================================================== */
/* Nền card lấy ĐÚNG giá trị của khối Mục lục (đo được: rgba(6,60,55,0.45), viền trắng 18%)
   để cả trang là một bộ thống nhất, thay vì card kính sáng lạc lõng cạnh mục lục đậm. */
body.htms-app main .term-card {
  background-color: rgba(6, 60, 55, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin: 0 0 0.85rem;
}
body.htms-app main .term-card:last-child {
  margin-bottom: 0;
}
/* Tiêu đề mục: bỏ margin-top mặc định của .prose để không tạo khoảng hở đầu card */
body.htms-app main .term-card > h2:first-child {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: 15px !important;
  line-height: 1.35;
}
body.htms-app main .term-card p,
body.htms-app main .term-card li,
body.htms-app main .term-card td,
body.htms-app main .term-card th {
  font-size: 12px !important;
  line-height: 1.6;
}
body.htms-app main .term-card p {
  margin-bottom: 0.55rem !important;
}
body.htms-app main .term-card p:last-child,
body.htms-app main .term-card ul:last-child,
body.htms-app main .term-card ol:last-child {
  margin-bottom: 0 !important;
}
body.htms-app main .term-card ul,
body.htms-app main .term-card ol {
  margin: 0.4rem 0 !important;
}
body.htms-app main .term-card li {
  margin-bottom: 0.3rem !important;
}
body.htms-app main .term-card h3 {
  font-size: 13px !important;
  margin: 0.6rem 0 0.35rem !important;
}

/* ==========================================================================
   23. DÒNG "Xuất bản / Chỉnh sửa" Ở CUỐI BÀI
   Hai mục nằm cạnh nhau trong một hàng flex hẹp (chỉ 230px ở màn 320px) nên NHÃN bị vỡ
   giữa chừng: "Xuất / bản:" và "Chỉnh / sửa:" — đo được mỗi mục chiếm tới 5 dòng.
   Cách xử lý: khoá không cho vỡ trong từng mục, đồng thời cho cả hàng xuống dòng —
   khi đủ chỗ thì nằm ngang, chật thì mỗi mục một dòng trọn vẹn.
   ========================================================================== */
body.htms-app main article footer .flex.items-center.gap-4 {
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}
body.htms-app main article footer span,
body.htms-app main article footer time {
  white-space: nowrap;
}

/* ==========================================================================
   24. CHỐNG BÓP VỠ CHỮ Ở HÀNG "NHÃN + NÚT"
   Rà soát 19 trang × 2 kích thước tìm được 14 chỗ chữ bị bóp: phần tử được cấp bề rộng
   NHỎ HƠN mức cần cho 1 dòng, dù khung cha vẫn còn chỗ. Nguyên nhân chung: nhãn/tiêu đề
   nằm cùng hàng flex justify-between với một nút thao tác, flex chia phần làm nhãn co lại
   rồi vỡ chữ. Ví dụ đo được: "Khóa API Token (API Key)" cần 185px nhưng chỉ được 113px
   (cha còn 239px); "Sổ tài khoản đã lưu" cần 139px, được 85px.
   Cách xử lý: khoá không cho vỡ chữ trong nhãn/nút, đồng thời cho hàng xuống dòng —
   đủ chỗ thì nằm ngang, chật thì nhãn chiếm trọn một dòng.
   ========================================================================== */
body.htms-app main .flex.justify-between:has(> label),
body.htms-app main .flex.justify-between:has(> h3),
body.htms-app main .flex.justify-between:has(> h4),
body.htms-app main .flex.justify-between:has(> span > label) {
  flex-wrap: wrap;
  row-gap: 0.3rem;
}
body.htms-app main .flex.justify-between > label,
body.htms-app main .flex.justify-between > h3,
body.htms-app main .flex.justify-between > h4,
body.htms-app main .flex.justify-between > button,
body.htms-app main .flex.justify-between > a {
  white-space: nowrap;
}
/* Khối 2FA / OTP: tiêu đề và huy hiệu trạng thái cùng hàng, tiêu đề bị bóp */
body.htms-app main .flex.items-start.justify-between,
body.htms-app main .flex.items-center.justify-between {
  min-width: 0;
}
body.htms-app main h4.font-bold,
body.htms-app main h3.font-bold {
  overflow-wrap: normal;
}

/* 24.b Nhãn dạng <span> viết hoa (API Key / API URL ở trang Phím tắt) — cùng hàng với nút
   "Sao chép", bị bóp còn 122px trong khi cần 159px. Dùng .uppercase làm dấu hiệu nhận
   diện nhãn để không ảnh hưởng các hàng justify-between khác. */
body.htms-app main .flex.justify-between:has(> span.uppercase) {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
body.htms-app main .flex.justify-between > span.uppercase {
  white-space: nowrap;
}
/* 24.c Nhãn đứng trước giá trị trong hàng gọn (vd "Tầng 2 (F2): 2%") — nhãn phải liền mạch */
body.htms-app main .flex.items-center.gap-1\.5 > span:first-child,
body.htms-app main .flex.items-center.gap-1 > span:first-child {
  white-space: nowrap;
}

/* 18.b THU HẸP QUY TẮC "GIỮ CHỮ TỐI"
   Mục 18 trả tông tối cho mọi sắc 800/900/950 — đúng với huy hiệu hạng (chữ text-amber-950
   nằm TRÊN CHÍNH nền sáng bg-amber-300 của nó), nhưng SAI với chữ sắc đậm nằm trong hộp đã
   bị làm tối: đo được "Lưu ý về nhiệm vụ:" chữ #451a03 trên nền teal đậm chỉ đạt 1.68.
   Phân biệt bằng: phần tử có TỰ mang class nền (bg-*) hay không.
     - Có nền riêng  -> nền đó vẫn sáng  -> giữ chữ tối (mục 18 lo).
     - Không nền riêng -> đang nằm trên nền tối -> phải sáng lại. */
body.htms-app main [class*="text-amber-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-amber-9"]:not([class*="bg-"]),
body.htms-app main [class*="text-yellow-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-yellow-9"]:not([class*="bg-"]),
body.htms-app main [class*="text-orange-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-orange-9"]:not([class*="bg-"]) {
  color: #fed7aa !important;
}
body.htms-app main [class*="text-green-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-green-9"]:not([class*="bg-"]),
body.htms-app main [class*="text-emerald-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-emerald-9"]:not([class*="bg-"]) {
  color: #a7f3d0 !important;
}
body.htms-app main [class*="text-blue-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-blue-9"]:not([class*="bg-"]),
body.htms-app main [class*="text-sky-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-indigo-8"]:not([class*="bg-"]) {
  color: #bfdbfe !important;
}
body.htms-app main [class*="text-red-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-red-9"]:not([class*="bg-"]),
body.htms-app main [class*="text-rose-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-rose-9"]:not([class*="bg-"]) {
  color: #fecdd3 !important;
}
body.htms-app main [class*="text-teal-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-teal-9"]:not([class*="bg-"]),
body.htms-app main [class*="text-purple-8"]:not([class*="bg-"]),
body.htms-app main [class*="text-purple-9"]:not([class*="bg-"]) {
  color: #ccfbf1 !important;
}

/* 24.d Ba chỗ vỡ dòng cuối cùng (đo ở 320px, đếm dòng chỉ trên phần chữ):
   - Nhãn nút "ĐIỂM DANH NGAY": cần 122px, khung 119px -> vỡ 2 dòng. Nút đủ chỗ để nở
     rộng (cha còn 186px) nên chỉ cần cấm vỡ chữ.
   - Chip danh mục blog "Tin tức Thương mại điện tử": cần 187px, được 180px, cha còn 204px. */
body.htms-app main button > span:not([class]),
body.htms-app main a.btn > span:not([class]) {
  white-space: nowrap;
}
body.htms-app main a > span.flex.items-center.gap-2,
body.htms-app main span.flex.items-center.gap-2 {
  white-space: nowrap;
}

/* 24.e Tên thương hiệu ở chân trang bản mobile của Dashboard: nằm cạnh logo nên chỉ được
   236px trong khi cần 282px -> vỡ 2 dòng. Khối này vốn căn giữa, cho xuống dòng thì logo
   một dòng, tên một dòng trọn vẹn — hợp với bố cục căn giữa sẵn có. */
body.htms-app > footer .flex.items-center.gap-3 {
  flex-wrap: wrap;
  justify-content: center;
}
body.htms-app > footer .flex.items-center.gap-3 > span {
  white-space: nowrap;
}

/* ==========================================================================
   25. CHỮ GỢI Ý TRONG Ô NHẬP BỊ CẮT MẤT ĐUÔI
   Đo trên trang Rút tiền: "Nhập số tài khoản/số điện thoại nhận tiền" cần 287px nhưng ô
   chỉ rộng 202px (màn 320px) / 272px (màn 390px); "VIET HOA KHONG DAU (Ví dụ: NGUYEN VAN A)"
   cần tới 332px. Cỡ chữ gốc 14.3px là quá lớn so với ô.
   Cho cỡ chữ gợi ý co theo bề rộng màn hình, sàn 11px để không nhỏ quá mức đọc được.
   Chỉ áp cho ::placeholder — giá trị người dùng gõ vào vẫn giữ cỡ chữ bình thường. */
body.htms-app main input::placeholder,
body.htms-app main textarea::placeholder {
  font-size: clamp(11px, calc(4.31vw - 5.09px), 14.3px);
}

/* 25.b Nhãn hình thức nhận tiền ("Ngân hàng" / "Ví điện tử") nằm cạnh icon trong ô chọn,
   bị bóp còn 69px trong khi cần 71px nên vỡ thành "Ngân / hàng". Ô còn thừa chỗ ngang,
   chỉ cần cấm vỡ chữ. */
body.htms-app main label .flex.items-center.gap-2 > span,
body.htms-app main .flex.items-center.gap-2 > span.font-bold {
  white-space: nowrap;
}

/* Nút trong cụm header mobile: ghim đúng 44x44 bằng PX, không dùng lớp rem của Tailwind.

   w-11 = 2.75rem. Cỡ gốc của khu tài khoản là 17.6px nên 2.75 × 17.6 = 48.4px, không phải
   44px. Vẫn trên ngưỡng chạm tối thiểu của iOS, nhưng lệch 4px so với nút trang chủ
   (.nav-toggle vốn khai báo thẳng 44px) nên hai bên vẫn không khớp.

   Đây đúng cái bẫy đã gặp ở nhãn thanh điều hướng dưới: mọi đơn vị rem đều bị nhân với cỡ
   gốc khác 16px. Với kích thước vùng chạm thì phải khai báo px tuyệt đối. */
@media (max-width: 767px) {
  /* CHỈ nhắm các nút trong cụm hành động của header.

     Bản trước tôi viết `header ... a` — quá rộng. Drawer menu nằm BÊN TRONG thẻ <header>
     (nó là phần tử absolute trong đó), nên quy tắc này ép luôn mọi mục menu xuống 44px bề
     ngang, làm chữ "Trang chủ", "Đơn hàng"… bị xuống dòng giữa chừng.

     Loại trừ tường minh .htms-mobile-drawer để lỗi đó không tái diễn nếu sau này có ai
     nới lại selector. */
  body.htms-app header.htms-app-header .nav-toggle,
  body.htms-app header.htms-app-header a[href*="notifications"]:not(.htms-mobile-drawer a) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  body.htms-app header.htms-app-header .htms-mobile-drawer a,
  body.htms-app header.htms-app-header .htms-mobile-drawer button {
    width: auto;
    height: auto;
    min-width: 0;
  }
}

/* ==========================================================================
   26. PANEL DROPDOWN NỔI PHẢI ĐỤC (chọn ngân hàng / chọn ví điện tử)

   Panel bung ra khi bấm ô chọn đang lấy --glass-bg = rgba(4,32,29,0.3). Mức trong suốt đó
   đúng cho CARD (card nằm trên nền sóng, thấy sóng chạy phía sau là có chủ đích) nhưng SAI
   cho một lớp NỔI ĐÈ LÊN nội dung: panel phủ đúng lên phần form bên dưới nên nhãn "SỐ TÀI
   KHOẢN NGÂN HÀNG", "HỌ TÊN CHỦ TÀI KHOẢN", chữ gợi ý trong ô và cả nút "Gửi yêu cầu rút
   tiền" đâm xuyên qua, chồng lên tên ngân hàng — đo được ở cả hai panel, giống hệt nhau
   (ví điện tử chỉ đỡ lộ hơn vì danh sách 3 mục nên che ít nội dung hơn).

   Không tăng độ mờ nền chung: chỉ riêng lớp nổi mới cần đục. Toàn bộ card khác giữ nguyên. */
body.htms-app main .absolute.z-50.bg-white {
  background-color: #073b37 !important;
  background-image: none !important;
  backdrop-filter: none !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 14px 34px rgba(2, 20, 18, 0.55) !important;
}

/* Vạch ngăn dưới ô tìm kiếm và nền ô tìm kiếm bên trong panel */
body.htms-app main .absolute.z-50.bg-white > div {
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}
/* Ô tìm kiếm bên trong panel CỐ Ý giữ nền sáng 0.92 giống mọi ô nhập khác của form —
   đây là quy ước sẵn có của khu tài khoản, không phải lỗi. Chỉ icon kính lúp đè lên nó là
   sai màu, xử lý chung ở mục 27 cùng các ô nhập còn lại. */

/* Các mục trong danh sách: chữ sáng trên nền đục, mục đang chọn dùng cam thương hiệu */
body.htms-app main .absolute.z-50.bg-white li {
  color: var(--text-on-wave) !important;
}
body.htms-app main .absolute.z-50.bg-white li:hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
}
body.htms-app main .absolute.z-50.bg-white li[class*="text-shopee"] {
  background-color: rgba(238, 77, 45, 0.18) !important;
  color: #ffb59f !important;
}

/* ==========================================================================
   27. ICON ĐÈ LÊN Ô NHẬP ĐANG VÔ HÌNH

   Mục 15.c/16 đổi icon sang mint sáng để nổi trên nền sóng teal tối. Đúng cho icon nằm trên
   card, nhưng icon đặt tuyệt đối ĐÈ LÊN Ô NHẬP thì nền dưới nó là ô nhập sáng 0.92
   (rgb(236,241,241)), không phải sóng — nên mint #ccfbf1 chỉ đạt tương phản 1.01, tức mất hẳn.

   Quét Chrome 6 trang khu tài khoản: 11 icon dính lỗi — kính lúp trong panel chọn ngân hàng /
   ví điện tử, icon ví ở ô "Số tiền cần rút", và cả cụm mail / user / phone / key / khoá cùng
   hai nút con mắt · sao chép ở trang Hồ sơ. Tất cả đều 1.01–1.13.

   Nhận diện đúng bối cảnh bằng :has() — chỉ khối .relative có ô nhập THẬT làm con trực tiếp,
   loại trừ radio/checkbox ẩn (ô chọn hình thức nhận tiền dùng input ẩn trong khối .relative,
   icon ở đó vẫn nằm trên nền tối nên phải giữ mint).

   MỐC PHÂN BIỆT SÁNG/TỐI: phải là "ô nằm trong card kính", không phải "ô có lớp .bg-white".
   Lần đầu tôi lấy .bg-white làm mốc và sai — hỏi Chrome bằng CSS.getMatchedStylesForNode mới
   thấy rõ hai đường đi khác nhau:
     · ô Ở TRONG card .bg-white.dark:bg-slate-900.rounded-2xl/3xl:not(.absolute)
       → trúng luật riêng cho ô nhập, nền rgba(255,255,255,0.92) = SÁNG, cần icon đậm;
     · ô NGOÀI card đó (ô nhập mã trang Giftcode) → rơi về luật kính chung
       var(--glass-bg) = rgba(4,32,29,0.3) = TỐI, phải giữ icon sáng.
   Cả hai ô đều mang lớp .bg-white nên lấy lớp đó làm mốc thì vừa bỏ sót 5 icon trong bộ lọc
   Đơn hàng, vừa tô nhầm icon Giftcode. Bám theo card mới đúng nhân quả. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .relative:has(> input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.hidden)) svg,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .relative:has(> input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):not(.hidden)) svg,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .relative:has(> select) svg,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .relative:has(> select) svg,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) .relative:has(> textarea) svg,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) .relative:has(> textarea) svg {
  color: #0b5a53 !important;
  stroke: currentColor !important;
}

/* 27.b Ô nhập BỊ KHOÁ cũng dính đúng lỗi đó, nhưng ở phần GIÁ TRỊ chứ không phải icon nên
   máy quét tương phản chính bỏ sót (giá trị nằm trong thuộc tính value, không phải text node).
   Ô email đã xác minh ở trang Hồ sơ: chữ mint #ccfbf1 phủ thêm opacity 0.55 trên nền ô sáng
   => 1.01, nhìn như ô trống. Đổi sang teal đậm và bỏ lớp mờ; vẫn nhạt hơn ô đang sửa được
   nên người dùng vẫn nhận ra là ô chỉ đọc. */
body.htms-app main input:not(.bg-white):disabled,
body.htms-app main input:not(.bg-white)[readonly],
body.htms-app main textarea:not(.bg-white):disabled,
body.htms-app main textarea:not(.bg-white)[readonly] {
  color: #2a6b64 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #2a6b64 !important;
}

/* 27.c Cùng quy tắc trên nhưng bám theo card, vì bên trong card có một luật mạnh hơn.

   Hỏi thẳng Chrome (CSS.getMatchedStylesForNode) mới ra thủ phạm: luật đổi chữ xám thành mint
   cho nội dung trong card — ".bg-white.dark:bg-slate-900.rounded-2xl:not(.absolute)
   .text-gray-400" — có độ ưu tiên (0,6,1), nuốt mất luật 27.b (0,3,3). Ô email bị khoá mang
   sẵn lớp .text-gray-400 nên rơi đúng vào đó: opacity đã sửa được mà màu thì không.

   Luật này lẽ ra chỉ dành cho CHỮ trên nền card, không phải cho ô nhập — ô nhập tự có nền
   sáng riêng. Bám đúng ngữ cảnh card để lên (0,6,2), vừa đủ thắng mà không phải nhân bản
   lớp body cho cao điểm. */
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) input:disabled,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) input:disabled,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) input[readonly],
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) input[readonly],
body.htms-app .bg-white.dark\:bg-slate-900.rounded-2xl:not(.absolute) textarea:disabled,
body.htms-app .bg-white.dark\:bg-slate-900.rounded-3xl:not(.absolute) textarea:disabled {
  color: #2a6b64 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #2a6b64 !important;
}

/* ==========================================================================
   28. Ô CHỌN NGÀY VỠ TRÊN SAFARI iOS (bộ lọc Đơn hàng)

   Chrome vẽ đúng: hai ô 152px cân nhau trong lưới 2 cột. Trên iPhone thì hỏng — một ô kéo dài
   gần hết hàng, ô kia co lại thành ô vuông nhỏ, và cả hai không hiện chữ gì.

   Safari iOS đối xử với input[type=date] như một điều khiển gốc: nó tự quyết bề rộng theo nội
   dung và bỏ qua width/padding của mình chừng nào chưa tắt -webkit-appearance. Ô rỗng thì
   không có nội dung nên co lại — đúng hình ô vuông trắng trong ảnh. Phần chữ ngày còn nằm
   trong lớp giả ::-webkit-date-and-time-value, mặc định canh giữa nên lệch hẳn khỏi icon
   bên trái.

   Tắt appearance để lấy lại quyền định cỡ, ép ô lấp đầy ô lưới, và kéo chữ ngày về canh trái
   cho thẳng hàng với icon. Vẫn giữ nguyên type=date nên iPhone mở bánh xe chọn ngày như cũ. */
body.htms-app main input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
body.htms-app main input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
/* Ô rỗng trên iOS không vẽ chữ nào nên trông như ô trắng trơn; giữ đúng chiều cao dòng để ô
   không tự xẹp và luôn thẳng hàng với ô bên cạnh. */
body.htms-app main input[type="date"]::-webkit-datetime-edit {
  line-height: 1.2;
  padding: 0;
}
/* Icon lịch gốc của trình duyệt nằm bên phải, trùng vai trò với icon lịch mình đặt bên trái.
   Giữ lại vì đó là chỗ bấm quen thuộc, chỉ hạ độ nổi để không tranh chấp thị giác. */
body.htms-app main input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
}

/* 28.b Màn rất hẹp: xếp dọc hai ô ngày thay vì bóp chữ.
   Ở 320px mỗi ô chỉ còn ~124px, trừ padding và nút mở lịch thì phần chữ không đủ cho
   "dd/mm/yyyy" nên trình duyệt tự cắt năm còn "yy". Hạ cỡ chữ để nhét vừa sẽ làm ô ngày
   lệch hẳn với các ô lọc khác, nên cho mỗi ô một hàng riêng — rộng gấp đôi, thừa chỗ. */
@media (max-width: 360px) {
  body.htms-app main .grid.grid-cols-2:has(> div > input[type="date"]) {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Khối rộng bằng thẻ ví — cụm trên cùng trang Rút tiền

   Thẻ ví (dashboard/partials/wallet_hero) tự đặt lề âm 10px mỗi bên để lấn ra ngoài đệm
   17.6px của khung trang, nên nó rộng hơn mọi thẻ khác và chỉ còn cách mép màn hình 7.6px.
   Trên trang Rút tiền thẻ ví nằm GIỮA stack (dưới banner và hàng tab), nên nếu chỉ mình nó
   rộng thì thành bậc thang: banner 17.6 → tab 17.6 → ví 7.6 → quy định 17.6.

   Lớp này đưa banner và hàng tab về cùng bề ngang với thẻ ví, để cụm trên cùng đồng bộ.
   CHỈ áp dụng trên mobile vì thẻ ví dạng ảnh cũng chỉ hiện ở đó (desktop dùng thẻ cũ).

   Con số -10px phải khớp với rule trong wallet_hero.blade.php; đổi một bên thì đổi cả hai.
   Không gộp chung một chỗ được: partial còn dùng ở trang chủ (layout htms) mà layout đó
   không nạp file này.
   ========================================================================== */
@media (max-width: 767px) {
  .htms-rong-bang-vi {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* ==========================================================================
   Logo ngang trên header khu tài khoản (mobile)

   Header trang chủ đã đổi sang ảnh logo ngang (app-home.css, body.is-wave-page). Khu tài
   khoản vẫn là "đồng xu N + tên site bằng chữ" nên hai bên lệch nhau. Dùng đúng cách của
   trang chủ: đặt ảnh làm NỀN của thẻ <a>, ẩn hai phần tử con bên trong.

   Khác trang chủ ở chiều cao: thanh header ở đây là 64px (h-16) chứ không phải 104px, nên
   logo chỉ cao 44px — bằng ngưỡng vùng chạm, và vẫn chừa 10px trên dưới. Ảnh tỉ lệ 2.11
   nên ở 44px nó rộng 93px; dòng slogan trong ảnh sẽ rất nhỏ ở cỡ này.

   Chỉ mobile: từ 768px trở lên giữ nguyên đồng xu + tên site như cũ.
   ========================================================================== */
@media (max-width: 767px) {
  /* Băng logo phủ KÍN header khu tài khoản, đồng bộ với trang chủ.
     Đặt ảnh làm nền của cả thẻ <header> thay vì của riêng thẻ <a>: thẻ <a> nằm trong
     .px-4 (đệm 17.6px) nên không bao giờ chạm mép màn hình.
     background-size 100% auto giữ đúng tỉ lệ 4.43 nên chữ không bị bóp. */
  /* !important: co mot luat khac dung `background` dang rut gon tren cung bo chon nay,
     no dat lai background-image ve none. Da thu nang dac hieu nhung khong an. */
  body.htms-app header.htms-app-header {
    background-image: url("/assets/images/banner-header.webp?v=bn4") !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    background-size: 100% auto !important;
    background-color: transparent !important;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Hàng bên trong phải cao bằng băng, nếu không băng bị cắt cụt ở đáy.
     22.58vw = 100vw ÷ 4.43. */
  body.htms-app header.htms-app-header > div > div {
    height: 22.58vw;
    min-height: 22.58vw;
  }

  /* Logo và tên site đã nằm trong ảnh rồi. Giữ thẻ <a> làm vùng bấm về trang chủ. */
  body.htms-app .htms-logo-ngang {
    display: block;
    flex: 0 0 auto;
    width: 60%;
    height: 100%;
    background: none;
  }

  body.htms-app .htms-logo-ngang > * {
    display: none;
  }

  /* Nút chuông: nền băng chỗ nó đứng có độ sáng 80/255 và ám teal (43,98,97). Nút mặc định
     là tròn xám rất nhạt nên vừa mờ vừa lẫn màu. Đổi thành đĩa teal ĐẬM viền sáng, icon
     trắng — tương phản icon/nền lên khoảng 9:1, vượt xa ngưỡng 4.5:1 của WCAG.
     Giữ nguyên 44px vùng chạm. */
  body.htms-app header.htms-app-header a[href*="notifications"] {
    background: rgba(4, 40, 38, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }

  body.htms-app header.htms-app-header a[href*="notifications"] i,
  body.htms-app header.htms-app-header a[href*="notifications"] svg {
    color: #ffffff;
    stroke: #ffffff;
  }
}


/* ==========================================================================
   BỎ HẲN THANH HEADER khu tài khoản trên mobile (chủ chốt ngày 19/08/2026)

   Đồng bộ với trang chủ. Nút chuông mất theo, nhưng Thông báo vẫn vào được từ nút
   "Thêm" ở thanh dưới. Máy tính giữ nguyên header như cũ.
   ========================================================================== */
@media (max-width: 767px) {
  body.htms-app header.htms-app-header { display: none !important; }
}