/* ============================================================================
   Trang chủ dạng ứng dụng — chỉ áp dụng dưới 768px (app iOS + web trên điện thoại).

   Máy tính để bàn KHÔNG chịu ảnh hưởng của file này: toàn bộ nội dung nằm trong
   @media (max-width: 767px), trừ đúng một dòng ẩn khối .apph ở khổ rộng.

   Nền: giữ nguyên nền sóng teal động của trang. Vì thẻ kính mờ đặt trên nền động
   sẽ làm lưới biểu tượng khó đọc (chữ nhảy theo sóng bên dưới), các thẻ ở đây
   dùng nền teal ĐỤC hẳn — sóng vẫn thấy ở khe giữa các thẻ, đủ giữ nhận diện.
   ========================================================================== */

/* Khổ rộng: các khối dạng ứng dụng không tồn tại. Đặt ngoài media query để chắc chắn ẩn
   kể cả khi file được nạp ở trang khác. */
.apph,
.apph-greet,
.apph-hero,
.apph-loi {
  display: none;
}

/* Đầu-nút-đóng của khối Thống kê chỉ có tác dụng khi nó là bottom-sheet trên điện thoại —
   trên máy tính khối vẫn nằm sẵn trong trang như trước, không cần tiêu đề/nút đóng thừa. */
.stats-section-dau,
.stats-section-nen {
  display: none;
}

/* Trên máy tính, mục "Tìm hiểu thêm" phải mở sẵn và không có dòng tiêu đề gập — bản web
   giữ nguyên như trước, người dùng không thấy có gì thay đổi.
   `display: contents` làm thẻ <details> biến mất khỏi bố cục, các <section> bên trong trở
   lại thành con trực tiếp của div bọc đúng như trước khi gói. */
@media (min-width: 768px) {
  .apph-more {
    display: contents;
  }

  .apph-more-sum {
    display: none;
  }
}

@media (max-width: 767px) {

  /* ---------- Bố cục chung ---------- */

  .apph {
    display: block;
    /* 18px chu khong phai 16: do tren Dashboard, moi khoi noi dung deu cach mep 18px.
       De 16 thi luoi dich vu va muc Ho tro lech 2px so voi the vi va bang thong ke. */
    padding: 0 18px calc(8px + var(--safe-bottom, 0px));
    /* Cùng bề ngang với .shell để thẳng hàng với phần nội dung web bên dưới. */
    max-width: 100%;
  }

  /* Thẻ nền chung. --apph-card là teal đục, KHÔNG dùng backdrop-filter:
     lọc nền trên nền WebGL động là nguyên nhân tụt khung hình trên iPhone đời cũ. */
  .apph-card {
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }

  /* ---------- 1. Thẻ chào ---------- */

  /* Thẻ chào nằm NGOÀI khối .apph (xem partial app-home-greet) nên phải tự lo lề ngang,
     không thừa hưởng đệm 16px của .apph. */
  .apph-greet {
    display: block;
    padding: 18px;
    margin: 0 18px 20px;
  }

  .apph-greet-hi {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
  }

  .apph-greet-name {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    /* Tên dài không được đẩy vỡ thẻ. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .apph-greet-sub {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
  }

  .apph-bal-label {
    margin: 16px 0 0;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }

  .apph-bal {
    margin: 2px 0 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    /* Chữ số thẳng cột khi số dư đổi. */
    font-variant-numeric: tabular-nums;
  }

  .apph-bal-unit {
    margin-left: 3px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
  }

  .apph-greet-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 16px;
  }

  /* Nút chính dạng viên thuốc, giống nút vàng của app ngân hàng nhưng dùng
     màu nhấn sẵn có của trang. */
  .apph-btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f5c451, #d9a233);
    color: #1a1205;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .apph-btn-primary:active {
    transform: scale(0.98);
  }

  /* Nút phụ hình vuông bo góc bên phải nút chính. 48px là ngưỡng vùng chạm. */
  .apph-btn-square {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
  }

  /* Biến thể chữ (Đăng ký) cần rộng hơn ô vuông. */
  .apph-btn-square-wide {
    width: auto;
    flex: 0 0 auto;
    padding: 0 18px;
  }

  .apph-btn-square:active {
    transform: scale(0.98);
  }

  /* ---------- Hàng tiêu đề mục ---------- */

  .apph-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 10px;
  }

  .apph-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .apph-head-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Vùng chạm cao 44px nhưng không đẩy hàng tiêu đề giãn ra: dùng đệm dọc
       kèm lề âm để bù. */
    padding: 12px 2px;
    margin: -12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #7fe3cf;
    text-decoration: none;
    white-space: nowrap;
  }

  /* ---------- 2. Lưới biểu tượng 3 cột ---------- */

  .apph-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 4px;
    padding: 18px 10px;
    margin-bottom: 20px;
  }

  /* Bề mặt lấy ĐÚNG của thẻ "Hoàn tiền lên đến 20%" (#heroSection .hero-content) — cùng nền
     teal nổi khối, cùng viền kính 28%, cùng bóng teal, để hai thẻ nằm cạnh nhau trông cùng
     một bộ thay vì một thẻ teal sáng một thẻ xanh đen.

     Viết selector kép .apph-card.apph-grid: thẻ này mang cả hai lớp, mà .apph-card cũng đặt
     background/border/shadow. Hai lớp đơn có độ đặc hiệu bằng nhau nên chỉ hơn nhau ở thứ tự
     — dùng selector kép cho chắc chắn thắng, không phụ thuộc ai đứng trước ai sau.

     KHÔNG sửa thẳng .apph-card vì thẻ "Hỗ trợ 24/7" cũng dùng lớp đó, sửa vào là đổi luôn
     cả thẻ kia trong khi chỉ có thẻ dịch vụ được yêu cầu đổi. */
  .apph-card.apph-grid {
    background-color: rgb(17, 94, 89);
    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%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      0 12px 32px rgba(15, 118, 110, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  /* Một số ô là <button> (mở bảng hướng dẫn) chứ không phải <a>. Không gỡ kiểu nút
     mặc định thì ô đó hiện ra thành một nút trắng giữa lưới — đã thấy trên ảnh chụp. */
  .apph-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 4px;
    border: 0;
    background: none;
    border-radius: 14px;
    color: inherit;
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Nhãn hai dòng phải cùng chiều cao ở mọi ô để lưới không so le. */
    min-height: 96px;
  }

  .apph-cell:active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Huy hiệu tròn 3D — CÙNG công thức gradient với thẻ Ví thật (.apph-wallet .wallet-hero:
     nền teal đặc rgb(17,94,89) + 2 quầng sáng radial (lục lam góc trên-phải, vàng góc dưới-
     trái) + viền sáng mờ). Ở cỡ nhỏ 54px, tăng độ đậm quầng sáng lên (gốc 10-20%, đây 22-35%)
     vì mờ nhạt như bản gốc sẽ gần như không thấy được ở kích thước icon. Thêm inset shadow
     trên/dưới để tạo cảm giác nổi khối (bóng đổ trong) thay vì bẹt một màu. */
  .apph-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 54px;
    color: #fff;
    background-color: rgb(17, 94, 89);
    background-image:
      radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.4), transparent 60%),
      radial-gradient(85% 75% at 0% 100%, rgba(232, 163, 23, 0.28), transparent 55%),
      linear-gradient(145deg, rgba(15, 118, 110, 0.55) 0%, rgba(20, 184, 166, 0.4) 48%, rgba(13, 148, 136, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      0 6px 14px rgba(4, 20, 18, 0.4),
      inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
      inset 0 -3px 5px rgba(0, 0, 0, 0.2);
  }

  .apph-cell-label {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
  }

  /* Huy hiệu góc trên phải, như nhãn khuyến mãi đỏ của app ngân hàng. */
  .apph-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    background: #d92d20;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* ---------- 3. Thẻ đôi ---------- */

  .apph-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }

  /* Chỉ còn một sàn được bật thì thẻ trải hết bề ngang thay vì đứng lệch nửa. */
  .apph-duo-item:only-child {
    grid-column: 1 / -1;
  }

  .apph-duo-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    text-decoration: none;
  }

  .apph-duo-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    margin-bottom: 6px;
  }

  .apph-duo-ico img {
    width: 24px;
    height: 24px;
  }

  .apph-duo-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .apph-duo-sub {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
  }

  .apph-duo-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
  }

  .apph-duo-cta {
    font-size: 14px;
    font-weight: 600;
    color: #7fe3cf;
  }

  .apph-duo-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: rgba(127, 227, 207, 0.18);
    border: 1px solid rgba(127, 227, 207, 0.4);
    color: #7fe3cf;
  }

  /* ---------- 4. Hàng danh sách có mũi tên ---------- */

  .apph-list {
    padding: 4px 0;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .apph-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    background: none;
    border: 0;
    /* Đường kẻ giữa các hàng, hàng cuối không có — đúng lối danh sách iOS. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: inherit;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
  }

  .apph-list > :last-child {
    border-bottom: 0;
  }

  .apph-row:active {
    background: rgba(255, 255, 255, 0.07);
  }

  .apph-row-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #7fe3cf;
  }

  .apph-row-label {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
  }

  /* Chấm báo có thông báo mới chưa xem, cạnh nhãn "Thông báo hoạt động". */
  .apph-row-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #d92d20;
    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.25);
  }

  .apph-row-arrow {
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
  }

  /* ---------- Sắp lại thứ tự trang trên điện thoại ----------

     Khối .apph lên đầu, ô dán link (hero) ngay dưới nó, rồi số liệu; toàn bộ phần
     giới thiệu bằng văn xuôi lùi xuống cuối.

     KHÔNG dùng display:none cho các mục văn xuôi: Google xếp hạng theo bản điện
     thoại, ẩn đi là mất phần chữ đó khỏi chỉ mục. Đổi thứ tự thì chữ vẫn nằm
     nguyên trong HTML. */

  /* Mọi section của trang chủ nằm trong một div bọc (x-data của Alpine), KHÔNG phải
     con trực tiếp của <main>. Nên xếp thứ tự phải đặt trên chính div bọc đó. */
  .home-root {
    display: flex;
    flex-direction: column;
  }
       /* thẻ chào */
  .home-root > .hero { order: 3; }             /* ô dán link — việc chính, đưa lên cao */
  .home-root > .shell { order: 4; }            /* ô kết quả sản phẩm */
  .home-root > .apph { order: 5; }             /* lưới dịch vụ, thẻ sàn, hỗ trợ */
  .home-root > .stats-section { order: 6; }
  /* Trang chủ app DỪNG sau thẻ Hỗ trợ (theo ảnh mẫu) — toàn bộ nội dung văn xuôi bên dưới
     (Lợi ích, 4 bước, Quy trình, Ưu điểm, Giới thiệu bạn bè, CTA, FAQ, Pháp lý) không còn
     hiện trong luồng cuộn trên điện thoại nữa: FAQ và Pháp lý đã chuyển hẳn vào 2 popup mở
     từ nút "Câu hỏi thường gặp" / "Cam kết minh bạch" trong thẻ Hỗ trợ (xem faqModal,
     legalModal trong home.blade.php). Phần còn lại là văn bản marketing thuần, không có nút
     tương ứng nên bỏ hẳn khỏi bản điện thoại.

     KHÔNG xoá HTML: display:none vẫn giữ nội dung trong DOM để Google lập chỉ mục (đúng lý
     do trước đây dùng <details> thay vì ẩn hẳn) — chỉ người xem trên điện thoại không thấy. */
  .home-root > .apph-more,
  .home-root > .faq-section,
  .home-root > #minh-bach {
    display: none;
  }

  /* Chân trang (site-footer) nằm trong layout dùng chung layouts/htms.blade.php, không phải
     trong .home-root — hiện trên MỌI trang dùng layout này (blog, điều khoản...), nên không
     ẩn theo .home-root như 3 mục trên. Chỉ ẩn riêng ở trang chủ (body.is-wave-page, đặt qua
     $isWavePage — chỉ home.blade.php bật cờ này) để các trang khác không bị ảnh hưởng. Nội
     dung DANH MỤC/HỖ TRỢ/CAM KẾT trong chân trang đã trùng với thanh nav dưới + thẻ Hỗ trợ
     phía trên rồi, giữ lại chỉ khiến trang chủ kéo dài thêm sau thanh nav cố định. */
  body.is-wave-page .site-footer {
    display: none;
  }

  /* ---------- Thẻ ví trên trang chủ ----------

     Trang chủ dùng LẠI partial dashboard/partials/wallet_hero để thẻ ví giống hệt trang Ví.
     Nhưng partial đó viết bằng Tailwind, mà layout trang chủ (layouts/htms) KHÔNG nạp Tailwind
     — chèn vào mà không có khối này thì thẻ hiện ra trần trụi, không nền không khoảng cách.

     Nên dưới đây dựng lại đúng những lớp tiện ích mà partial dùng, ĐÓNG KHUNG trong .apph-wallet
     để không lớp nào rò ra phần còn lại của trang. Phần hình thức (nền, viền, bóng, lớp phủ,
     hai nút) chép đúng thông số từ public/css/htms-app.css mục "Wallet hero" để hai trang khớp
     nhau từng chi tiết.

     SỬA CẤU TRÚC THẺ VÍ BÊN DASHBOARD THÌ PHẢI XEM LẠI MỤC NÀY. */

  .apph-wallet {
    margin: 0 18px 20px;
  }

  .apph-wallet-hi {
    margin: 0 2px 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
  }

  .apph-wallet-hi strong {
    color: #fff;
    font-weight: 700;
  }

  /* --- Hình thức thẻ: chép từ htms-app.css để khớp trang Ví --- */

  .apph-wallet .wallet-hero {
    position: relative;
    overflow: hidden;
    /* Ba con so nay do TRUC TIEP tren the dang hien cua trang Vi (khong phai ban an 0x0
       cung ten lop): nen rgb(17,94,89), ban kinh 24px, dem 22px. Dat lech di la hai trang
       nhin ra hai the khac nhau du cung mot partial. */
    padding: 22px;
    border-radius: 24px;
    color: #fff;
    background-color: rgb(17, 94, 89);
    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%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      0 12px 32px rgba(15, 118, 110, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  /* Lớp phủ giữa ảnh ví 3D (z-0) và nội dung (z-10). Thiếu lớp này thì chữ nằm đè lên vùng
     tiền hồng, xu vàng của ảnh và mất tương phản — đúng vấn đề đã sửa bên Dashboard. */
  .apph-wallet .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%
    );
  }

  /* --- Lớp tiện ích thay cho Tailwind, chỉ có hiệu lực trong thẻ ví --- */

  .apph-wallet .relative { position: relative; }
  .apph-wallet .absolute { position: absolute; }
  .apph-wallet .z-0 { z-index: 0; }
  .apph-wallet .z-10 { z-index: 10; }
  .apph-wallet .flex { display: flex; }
  .apph-wallet .inline-flex { display: inline-flex; }
  .apph-wallet .grid { display: grid; }
  .apph-wallet .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apph-wallet .flex-1 { flex: 1 1 0%; }
  .apph-wallet .shrink-0 { flex-shrink: 0; }
  .apph-wallet .items-center { align-items: center; }
  .apph-wallet .justify-between { justify-content: space-between; }
  .apph-wallet .justify-center { justify-content: center; }
  .apph-wallet .block { display: block; }
  .apph-wallet .inline-block { display: inline-block; }
  .apph-wallet .overflow-hidden { overflow: hidden; }
  .apph-wallet .whitespace-nowrap { white-space: nowrap; }
  .apph-wallet .min-w-0 { min-width: 0; }
  .apph-wallet .w-auto { width: auto; }
  .apph-wallet .object-contain { object-fit: contain; }
  .apph-wallet .pointer-events-none { pointer-events: none; }
  .apph-wallet .select-none { user-select: none; }

  .apph-wallet .gap-1 { gap: 4.4px; }
  .apph-wallet .gap-1\.5 { gap: 6.6px; }
  .apph-wallet .gap-3 { gap: 13.2px; }
  .apph-wallet .gap-4 { gap: 17.6px; }

  /* space-y-5 của Tailwind: cách nhau 20px, phần tử đầu không có lề trên. */
  .apph-wallet .space-y-5 > * + * { margin-top: 22px; }

  .apph-wallet .mt-0\.5 { margin-top: 2.2px; }
  .apph-wallet .mt-1\.5 { margin-top: 6.6px; }
  .apph-wallet .mr-0\.5 { margin-right: 2.2px; }
  .apph-wallet .ml-0\.5 { margin-left: 2.2px; }
  .apph-wallet .pt-1 { padding-top: 4.4px; }
  .apph-wallet .pt-3 { padding-top: 13.2px; }
  .apph-wallet .px-3 { padding-left: 13.2px; padding-right: 13.2px; }
  .apph-wallet .px-4 { padding-left: 17.6px; padding-right: 17.6px; }
  .apph-wallet .py-1 { padding-top: 4.4px; padding-bottom: 4.4px; }
  .apph-wallet .py-3 { padding-top: 13.2px; padding-bottom: 13.2px; }

  .apph-wallet .rounded { border-radius: 4px; }
  .apph-wallet .rounded-xl { border-radius: 12px; }
  .apph-wallet .rounded-2xl { border-radius: 24px; }
  .apph-wallet .rounded-full { border-radius: 9999px; }

  .apph-wallet .border { border-width: 1px; border-style: solid; }
  .apph-wallet .border-t { border-top-width: 1px; border-top-style: solid; }
  .apph-wallet .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
  .apph-wallet .border-white\/15 { border-color: rgba(255, 255, 255, 0.15); }
  .apph-wallet .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

  .apph-wallet .bg-white { background-color: #fff; }
  .apph-wallet .bg-white\/15 { background-color: rgba(255, 255, 255, 0.15); }
  .apph-wallet .bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }

  /* Cỡ chữ: text-[10px] và text-[11px] đã được type-scale.css nâng lên mức sàn 12px, nên ở
     đây không khai lại — khai lại sẽ chỏi với mức sàn đã chốt. */
  .apph-wallet .text-xs { font-size: 13.2px; }
  .apph-wallet .text-base { font-size: 17.6px; }
  .apph-wallet .text-2xl { font-size: 26.4px; }
  .apph-wallet .text-4xl { font-size: 39.6px; }

  .apph-wallet .font-medium { font-weight: 500; }
  .apph-wallet .font-semibold { font-weight: 600; }
  .apph-wallet .font-bold { font-weight: 700; }
  .apph-wallet .font-extrabold { font-weight: 800; }
  .apph-wallet .font-black { font-weight: 900; }

  .apph-wallet .uppercase { text-transform: uppercase; }
  .apph-wallet .tracking-wider { letter-spacing: 0.05em; }
  .apph-wallet .tracking-widest { letter-spacing: 0.1em; }
  .apph-wallet .tracking-tight { letter-spacing: -0.025em; }
  .apph-wallet .leading-none { line-height: 1; }
  .apph-wallet .align-middle { vertical-align: middle; }

  .apph-wallet .text-white { color: #fff; }
  .apph-wallet .text-white\/80 { color: rgba(255, 255, 255, 0.8); }
  .apph-wallet .text-white\/95 { color: rgba(255, 255, 255, 0.95); }
  .apph-wallet .text-amber-200 { color: #fde68a; }

  .apph-wallet .h-36 { height: 158.4px; }
  .apph-wallet .h-9 { height: 39.6px; }
  .apph-wallet .w-32 { width: 140.8px; }
  .apph-wallet .w-3 { width: 13.2px; }
  .apph-wallet .h-3 { height: 13.2px; }
  .apph-wallet .w-3\.5 { width: 15.4px; }
  .apph-wallet .h-3\.5 { height: 15.4px; }
  .apph-wallet .w-4 { width: 17.6px; }
  .apph-wallet .h-4 { height: 17.6px; }

  .apph-wallet .right-\[-15px\] { right: -15px; }
  .apph-wallet .bottom-\[-10px\] { bottom: -10px; }

  /* Hai nút hành động: chép đúng thông số đã chốt bên Dashboard. Nút "Lịch sử" nằm đè lên
     vùng sáng của ảnh ví 3D nên phải có nền teal đậm bán trong, không dùng bg-white/15. */
  .apph-wallet .wallet-hero-btn {
    background: #fff;
    color: #0f766e;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  .apph-wallet .wallet-hero-btn-ghost {
    background: rgba(4, 47, 46, 0.58);
    color: #fff;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
  }

  .apph-wallet .wallet-hero-btn i,
  .apph-wallet .wallet-hero-btn svg { color: #0f766e; }

  /* Nút "Chi tiết ví" và nút con mắt ẩn/hiện số dư đều là thẻ <a>/<button> — gỡ kiểu mặc
     định để chúng không hiện ra thành nút xám của trình duyệt. */
  .apph-wallet a { text-decoration: none; }

  /* Nguong vung cham 44px cua iOS. Dashboard da ep muc nay cho hai nut nho trong the vi
     (nut "Chi tiet vi" va nut con mat an/hien so du). Do duoc: hang tieu de cao 44px va
     hang nhan so du cao 44px o trang Vi, so voi 29px va 19px o trang chu — cong lai lech
     22px chieu cao the. Ap o day de hai the bang nhau, dong thoi dung chuan vung cham. */
  .apph-wallet .wallet-hero .rounded-full,
  .apph-wallet .wallet-hero button {
    min-height: 44px;
  }

  /* Tailwind co san bo dat lai le (preflight) dua margin cua p/h* ve 0; trang chu khong co
     bo do. Le tren mac dinh cua the <p> ben trong tran ra ngoai theo luat margin collapsing,
     lam moi khe giua ba khoi tang tu 22px len 31px — do duoc the cao 295 thay vi 277. */
  .apph-wallet .wallet-hero p,
  .apph-wallet .wallet-hero h1,
  .apph-wallet .wallet-hero h2,
  .apph-wallet .wallet-hero h3,
  .apph-wallet .wallet-hero ul,
  .apph-wallet .wallet-hero li {
    margin: 0;
  }

  /* Bo dat lai le o tren co do dac hieu 0,3,1 nen thang luon lop .mt-1\.5 (0,2,0) cua dong
     so du — dong do mat 6.6px le tren. Khai lai rieng no voi do dac hieu cao hon. */
  .apph-wallet .wallet-hero p.mt-1\.5 {
    margin-top: 6.6px;
  }

  .apph-wallet button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ---------- Thẻ chào của khách (theo ảnh mẫu) ----------

     Phần tranh là ảnh nền, chữ và nút dựng thật bằng HTML. Ảnh đã cắt bỏ hết chữ in sẵn,
     xem chú thích trong partial app-home-greet.

     Trên điện thoại KHÔNG chia đôi trái/phải như ảnh mẫu: bề ngang chỉ còn ~358px, chia đôi
     thì cột chữ còn 160px, tiêu đề ba dòng vỡ vụn. Thay vào đó đặt tranh tràn nền, phủ một
     lớp tối nghiêng để chữ nằm trên vùng đủ tối, giữ đúng bố cục thị giác của mẫu. */

  /* ---------- Khối chào của khách (theo ảnh chốt) ----------

     Ảnh chốt đổi hẳn tông: NỀN ĐEN, không còn nền sóng teal. Vì thế khối này không tự vẽ một
     cái thẻ có viền nữa — tranh ví hoà thẳng vào nền trang, đúng như mẫu.

     Nền tối của cả trang đặt ở cuối tệp (mục "Nền tối cho bản điện thoại"), vì nó tác động
     lên <body> chứ không riêng khối này. */

  .apph-hero {
    display: block;
    position: relative;
    margin: 0 0 18px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
  }

  /* Anh bat dau DUOI dong chao: de inset:0 thi anh phu ca dong chao, nhin ra nhu chu
     nam trong o kinh ve san. Day anh xuong 30px = chieu cao dong chao 13px + le duoi 6px
     + chut du, nen dong chao nam han ben ngoai moi o kinh. */
  .apph-hero-tranh {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Ảnh mới của chủ (900x841, tỉ lệ 1.070): phủ TOÀN khối chứ không neo phải như ảnh cũ,
       vì bố cục nút vàng, ô Face ID và ba viên thuốc đều đã vẽ sẵn trong ảnh. */
    /* Ảnh gốc của chủ, ĐÃ VẼ SẴN bốn nút vào ảnh theo yêu cầu: Đăng nhập, dòng Hoặc,
       Đăng nhập với Face ID, Chưa có tài khoản? Đăng ký ngay.
       Hạ 1023px xuống 800px rồi mới làm nét (đúng thứ tự này mới ăn): 2,0 MB -> 170 KB,
       độ nét đo được tăng từ 6,87 lên 8,80. */
    background-image: url("/assets/images/hero-dem.webp?v=d2");
    background-repeat: no-repeat;
    /* KHÔNG dùng 100% 100%: đo được nội dung khối cao 683px ở màn 320px trong khi ảnh
       chỉ cao 299px theo tỉ lệ — ép đầy hai chiều là ảnh bị kéo dãn dọc 2,3 lần, cái ví
       và các đồng xu méo hẳn. Dùng cover: ảnh giữ đúng tỉ lệ, phủ kín khối, phần thừa bị
       cắt bớt hai bên thay vì méo. Neo đáy để giữ cái ví và ba viên thuốc trong khung. */
    /* Anh 921x1707 (ti le 0.540) khop dung chieu cao khoi sau khi da thu chu.
       100% 100% duoc phep o day vi hai ti le da bang nhau, khong con keo dan. */
    background-position: center top;
    background-size: 100% 100%;
  }

  /* Lớp phủ nghiêng cho chữ bên trái đọc được. Nền tranh vốn đã đen nên chỉ cần phủ nhẹ,
     phủ nặng như bản nền teal sẽ giết mất ánh đèn thành phố. */
  .apph-hero-tranh::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(100deg,
        rgba(2, 8, 12, 0.96) 0%,
        rgba(2, 8, 12, 0.88) 34%,
        rgba(2, 8, 12, 0.45) 58%,
        rgba(2, 8, 12, 0.08) 80%,
        rgba(2, 8, 12, 0) 100%),
      linear-gradient(180deg, rgba(2, 8, 12, 0.5) 0%, transparent 18%, transparent 72%, rgba(2, 8, 12, 0.92) 100%);
  }

  /* Lề ngang 8px — đồng bộ với chuẩn lề chung của trang chủ (xem mục "Đồng bộ lề trang
     chủ" ở cuối tệp: mọi khối khác đã kéo về 8px). Trước là 16px, lệch với phần còn lại. */
  .apph-hero-noidung {
    position: relative;
    z-index: 1;
    padding: 14px 8px 18px;
  }

  /* ---- Hàng đầu: logo + nhãn an toàn ---- */

  .apph-hero-dau {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
  }

  .apph-hero-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  .apph-hero-logo-mark {
    display: block;
    height: 34px;
    width: auto;
    flex: 0 0 auto;
  }

  .apph-hero-logo-chu {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .apph-hero-logo-ten {
    font-size: 17px;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .apph-hero-logo-ten strong { font-weight: 800; }

  .apph-hero-logo-ten small {
    font-size: 13px;
    font-weight: 700;
    color: #e8b53a;
  }

  .apph-hero-logo-phu {
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Nhãn "Bảo mật tuyệt đối" — trong ảnh chốt là một thẻ viền mảnh ở góc phải. */
  .apph-hero-antoan {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 14px;
    border: 1px solid rgba(120, 200, 255, 0.28);
    background: rgba(8, 24, 34, 0.72);
    color: #6fc6f5;
  }

  .apph-hero-antoan span {
    display: flex;
    flex-direction: column;
  }

  .apph-hero-antoan strong {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }

  .apph-hero-antoan small {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
  }

  /* ---- Lời chào và tiêu đề ---- */

  /* Nhỏ lại 15px -> 13px và sát trên cùng: mỗi px bớt đi ở đây là khối hero thấp thêm,
     đang phải bù 89px chênh giữa nội dung và ảnh nền ở màn 320px. */
  .apph-hero-chao {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
  }

  .apph-hero-ten {
    margin: 3px 0 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6fc6f5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .apph-hero-title {
    /* Thu tu 40px xuong 32px va lien dong hon: khoi hero phai thap di 78px cho khop
       anh nen 921x1707. Tieu de 3 dong nen moi px bot di an 3.4px chieu cao. */
    margin: 8px 0 0;
    font-size: clamp(21px, 6.6vw, 30px);
    font-weight: 800;
    line-height: 1.10;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .apph-hero-title span { display: block; }

  /* Ảnh chốt đổi chữ nhấn từ teal sang XANH DƯƠNG sáng. */
  .apph-hero-title-nhan { color: #5cc6f0; }

  .apph-hero-dan {
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 13px;
    line-height: 1.42;
    color: rgba(255, 255, 255, 0.72);
    max-width: 22ch;
  }

  /* ---- Hai nút ---- */

  .apph-hero-nut {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px;
  }

  .apph-hero-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f7cf6b, #edb63f 55%, #e0a52c);
    color: #20160a;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(224, 165, 44, 0.24);
  }

  .apph-hero-btn:active { transform: scale(0.98); }

  .apph-hero-btn-mui {
    margin-left: auto;
    opacity: 0.7;
  }

  .apph-hero-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    border: 1px solid rgba(92, 198, 240, 0.45);
    background: rgba(8, 24, 34, 0.7);
    color: #5cc6f0;
    cursor: pointer;
  }

  .apph-hero-face:active { transform: scale(0.96); }

  .apph-hero-face[disabled] { opacity: 0.55; }

  /* BẮT BUỘC: .apph-hero-face đặt display:flex, độ đặc hiệu ngang [hidden]{display:none} của
     trình duyệt nhưng nằm trong bảng của tác giả nên THẮNG — nút sẽ hiện cả khi đã đặt hidden. */
  .apph-hero-face[hidden] { display: none; }

  /* ---------- Ba nút hành động nhanh ----------

     Theo ảnh mẫu mới: nằm NGAY TRONG card chào (.apph-hero-noidung), ngay dưới hàng hai nút
     chính — không phải ba thẻ rời đặt bên ngoài như bản trước. Vì đã ở trong phần đệm sẵn có
     của card (14px 16px 18px) nên không cần lề ngang riêng nữa, chỉ cần khoảng cách phía trên
     với hàng nút. Xếp ba cột ở màn 390px thì mỗi ô còn ~102px — đủ cho chữ 12px xuống hai
     dòng, đã đo. */

  .apph-loi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
  }

  .apph-loi li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 8px;
    border-radius: 16px;
    border: 1px solid rgba(120, 200, 255, 0.16);
    background: rgba(8, 20, 28, 0.72);
    text-align: center;
    min-width: 0;
    /* Ô giữa có nhãn dài hơn xuống 2 dòng, làm icon lệch khỏi hai ô bên — đã thấy trên ảnh
       chụp. Đặt sàn chiều cao để ba ô luôn đều nhau bất kể nhãn ngắn hay dài. */
    min-height: 128px;
    justify-content: center;
  }

  .apph-loi-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: rgba(92, 198, 240, 0.12);
    border: 1px solid rgba(92, 198, 240, 0.3);
    color: #5cc6f0;
  }

  .apph-loi strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
  }

  .apph-loi small {
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
  }

  /* ---------- Nút Face ID và lời báo lỗi ---------- */

  /* Nút quét mặt dùng chung kiểu với .apph-btn-square, chỉ đổi màu viền cho nổi hơn vì
     đây là lối vào chính của người đã bật Face ID. */
  .apph-btn-face {
    border-color: rgba(245, 196, 81, 0.55);
    color: #f5c451;
  }

  .apph-btn-face[disabled] {
    opacity: 0.55;
  }

  /* Nay là một dải báo tin thật, nằm ngay dưới khối ảnh hero (xem app-home-greet.blade.php).
     Lấy đúng bộ màu và bo góc của .hero-form-alert để cả trang chỉ có một kiểu báo lỗi.
     Lề 8px cho thẳng hàng với mép các thẻ khác. */
  .apph-bio-msg {
    margin: 8px 8px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(120, 20, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: #ffe6e2;
  }

  /* ---------- Popup đăng nhập ---------- */

/* Trượt lên từ đáy — lối quen thuộc của bảng chọn trên iOS. */
@keyframes apph-truot-len {
    from { transform: translateY(14%); opacity: 0.4; }
    to   { transform: translateY(0);   opacity: 1; }
  }

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

  .apph-form-err {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(217, 45, 32, 0.18);
    border: 1px solid rgba(255, 138, 128, 0.45);
    font-size: 13px;
    line-height: 1.45;
    color: #ffd0c4;
  }

/* ---------- Khối mời bật Face ID ---------- */

  /* ---------- Ô dán link trên điện thoại ----------

     Hero không còn là trang bìa mà là "ô dán link" — thẻ thứ hai sau khối chào.

     Lưu ý bộ chọn: neo vào .apph-hero (khách) và .apph-wallet (đã đăng nhập) — hai khối chào
     của hai trạng thái. KHÔNG neo vào .apph ~ .hero: dấu ~ chỉ tìm anh em ĐỨNG SAU, mà khối
     .apph nằm DƯỚI hero nên không khớp gì cả. */

  .apph-hero ~ .hero,
  .apph-wallet ~ .hero {
    padding-top: 0;
    padding-bottom: 20px;
    min-height: 0;
  }

  /* Bỏ tiêu đề lớn và đoạn dẫn: thông điệp đó đã nằm ở khối chào ngay phía trên. */
  .apph-hero ~ .hero .hero-title,
  .apph-wallet ~ .hero .hero-title,
  .apph-hero ~ .hero .hero-lead,
  .apph-wallet ~ .hero .hero-lead {
    display: none;
  }

  /* Hai liên kết "Bạn chưa biết cách lấy link?" và "Lưu ý khi sử dụng" đã có sẵn thành hai
     hàng trong mục Hỗ trợ phía dưới — bỏ ở đây để khỏi trùng. */
  .apph-hero ~ .hero .hero-cta-row,
  .apph-wallet ~ .hero .hero-cta-row {
    display: none;
  }

  .apph-hero ~ .hero .hero-atmosphere,
  .apph-wallet ~ .hero .hero-atmosphere {
    display: none;
  }

  .apph-hero ~ .hero .hero-content,
  .apph-wallet ~ .hero .hero-content {
    padding: 16px;
    margin: 0 18px;
    background: rgba(8, 20, 28, 0.72);
    border: 1px solid rgba(120, 200, 255, 0.16);
    border-radius: 18px;
    /* .shell đặt max-width theo khổ máy tính; ở đây thẻ phải bám sát hai lề. */
    max-width: none;
    width: auto;
  }

  .apph-hero ~ .hero .hero-content::before,
  .apph-wallet ~ .hero .hero-content::before {
    content: "Kiểm tra tiền hoàn";
    display: block;
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .apph-hero ~ .hero .hero-form-hint,
  .apph-wallet ~ .hero .hero-form-hint {
    margin-top: 12px;
    font-size: 13px;
  }

  /* Khung riêng của .hero-form tạo ra thẻ lồng trong thẻ. Làm phẳng nó. */
  .apph-hero ~ .hero .hero-form,
  .apph-wallet ~ .hero .hero-form {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* Thẻ hẹp hơn khổ cũ nên chữ mời trong ô nhập từng bị cắt cụt.
     font-size PHẢI từ 16px — dưới mức này Safari trên iPhone tự phóng to cả trang khi bấm
     vào ô, tràn khỏi khung hình (đúng lỗi đã gặp ở ô chat AI, ô này cùng bệnh). */
  .apph-hero ~ .hero .link-field input,
  .apph-wallet ~ .hero .link-field input {
    padding-right: 2.75rem;
    font-size: 16px;
  }

  /* ---------- Bề ngang: đồng bộ với khu tài khoản ----------

     NGUYÊN NHÂN GỐC của việc trang chủ không tràn hết bề ngang, đo được trên Chrome ở 390px:

         .shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }   (styles.css:200)

     Phép calc(100% - 2rem) cho ra 357px rồi margin auto chia đều 16,6px mỗi bên. Tệ hơn, khi
     .shell nằm trong khối đã có lề (ví dụ .apph-more có margin 0 16px) thì 100% chỉ còn 358px,
     trừ tiếp 2rem rồi lại căn giữa — CỘNG DỒN thành 33px mỗi bên, đo được .shell chỉ còn 325px.

     Khu tài khoản làm khác: wrapper .px-4 tràn hết 390px rồi mới đệm 18px vào trong. Đó là
     cách đúng, và là chuẩn được lấy làm mốc ở đây.

     Sửa ở ĐÚNG CẤP — chính .shell — thay vì ép từng phần tử bằng 100vw. Dùng 100vw sẽ sinh
     cuộn ngang trên máy có thanh cuộn chiếm chỗ, vì 100vw tính cả thanh cuộn.

     Chỉ dưới 768px; từ 768px trở lên .shell giữ nguyên công thức cũ nên máy tính không đổi. */

  .shell,
  .is-wave-page .shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 18px;
  }

  /* Khối này tự mang lề 16px; để nguyên thì .shell bên trong lại đệm thêm 18px nữa.
     Bỏ lề đi, giao việc chừa mép cho .shell — một tầng lo một việc. */
  .apph-more {
    margin-left: 0;
    margin-right: 0;
  }

  /* ---------- Thanh đầu trang: cuộn cùng nội dung ----------

     Không cố định nữa. Trước đây nó dính trên đỉnh (sticky) nên luôn chiếm một dải ở vùng
     tai thỏ — mà dải đó lấy đệm từ htms/styles.css:236 (padding-top có var(--safe-top)),
     từ khi thanh trong suốt thì lộ nền gần đen thành một vệt đen.

     Để nó nằm trong luồng bình thường: cuộn xuống thì nó trôi đi mất, lướt lên thì nó về
     theo nội dung. Vừa hết vệt đen khi đang đọc, vừa không đè lên thẻ ví, mà vẫn còn nút
     ba gạch — không mất lối vào menu như cách ẩn hẳn. */
  /* Header NOI RA KHOI LUONG. Nho vay nen va khoi dau tien keo len tan mep tren — ke ca
     vung tai tho — dung nguyen tac: nen full-bleed, safe-area CHI dung de day chu xuong,
     khong dung de thu nho ca section.

     Truoc do de static (nam trong luong) thi no chiem 73px o dinh, day thed vi xuong, nen
     nhin ra khong "full" bang Dashboard — noi khong co header trong app. */
  body.is-wave-page .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
  }

  /* Noi dung bat dau tu mep tren, khong chua cho header nua. */
  body.is-wave-page #main {
    padding-top: 0;
  }

  /* Chi CHU ben trong moi ne header + tai tho. Nen cua khoi van tran len tren. */
  .home-root > .apph-hero .apph-hero-noidung,
  .home-root > .apph-wallet {
    padding-top: calc(73px + env(safe-area-inset-top, 0px));
  }

  /* Cơ chế tự ẩn dịch chuyển thanh theo trục dọc; thanh đã cuộn cùng nội dung rồi nên phép
     dịch đó chỉ làm nó giật. Vô hiệu hoá riêng ở đây. */
  body.is-wave-page.nav-auto-hide .site-header,
  body.is-wave-page .site-header.is-hidden {
    transform: none;
  }

  /* .promo-band vua la .shell vua la mot cai THE co nen. Quy tac .shell moi cho no tran het
     390px nen nen cua no keo sat hai mep, trong khac han cac the khac dang thut 18px.
     Tra ve dang the: bo width 100%% cua .shell, dung le 18px. */
  .shell.promo-band {
    width: auto;
    margin-inline: 18px;
  }

  /* ---------- Nền sóng cuộn cùng nội dung ----------

     Mặc định khung nền là position:fixed, cao đúng một màn hình, ghim ở top 0 — nội dung trôi
     qua trên nó còn sóng đứng yên. Chủ hệ thống muốn sóng TRÔI THEO nội dung, nên chuyển sang
     absolute và trải hết chiều cao trang.

     ĐÁNH ĐỔI ĐÃ BÁO: khung vẽ WebGL từ 844px thành cỡ chiều cao cả trang (~4100px), tốn máy
     hơn hẳn. Chỉ áp cho trang chủ, dưới 768px. */
  body.is-wave-page {
    position: relative;
  }

  body.is-wave-page .htms-animated-bg {
    position: absolute;
    inset: 0;
    height: auto;
  }

  /* Vanta vẽ canvas theo kích thước khối chứa lúc khởi tạo. Ép canvas trải hết khối để nếu
     nó chưa tự giãn thì vẫn phủ kín — tránh cảnh sóng chỉ có ở phần đầu trang. */
  body.is-wave-page .htms-animated-bg canvas {
    height: 100% !important;
    min-height: 100%;
  }

  /* ---------- Mã QR giới thiệu ----------

     Theo ảnh mẫu app ngân hàng: card SÁNG (khác các card teal tối còn lại của trang) đặt
     ngay dưới card chào, chứa QR + tên người dùng + nút Chia sẻ. */

  .apph-qr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  }

  .apph-qr-anh {
    display: block;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 10px;
    background: #fff;
  }

  .apph-qr-chu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .apph-qr-nhan {
    font-size: 13px;
    color: rgba(15, 40, 37, 0.6);
  }

  .apph-qr-ten {
    font-size: 15px;
    font-weight: 700;
    color: #0f2825;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .apph-qr-chiase {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: #0f766e;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }

  .apph-qr-chiase:active {
    transform: scale(0.96);
  }

  /* ---------- Banner quảng cáo ---------- */

  .apph-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(120deg, #0f4a44 0%, #146b62 55%, #1a8578 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  }

  .apph-banner-tieude {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
  }

  .apph-banner-tieude strong {
    color: #ffd257;
  }

  .apph-banner-mota {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
  }

  .apph-banner-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: rgba(255, 210, 87, 0.16);
    border: 1px solid rgba(255, 210, 87, 0.4);
    color: #ffd257;
  }

  /* ---------- Hỗ trợ 24/7 (card chat) ---------- */

  /* Thẻ ngoài chỉ còn margin: nền/viền/bo góc/đổ bóng đã có sẵn từ .apph-card. */
  .apph-hotro247 {
    margin: 0 0 20px;
    overflow: hidden;
  }

  /* Vùng chat: dùng NGUYÊN ẢNH do người dùng tự chuẩn bị (apph-hotro247-anh.png) — ảnh đã vẽ
     sẵn CẢ tiêu đề "Hỗ trợ 24/7", lời chào, nhãn nút, linh vật.

     Đã CẮT LẠI LẦN 2: bản đầu giữ nguyên khoảng đệm rỗng khá lớn bên dưới viên thuốc/nút gọi
     (tới tận viền bo tròn gốc của ảnh) rồi mới nối xuống .apph-hotro247-list (nền tối) —
     khoảng mint nhạt trống đó nằm ngay sát nền tối tạo ra một "múi nối" lệch tông rất rõ giữa
     2 khối. Cắt sát lại ngay sau hàng nút (chỉ chừa đệm nhỏ) để khối ảnh không còn phần rỗng
     thừa, đường kẻ mờ (border-bottom bên dưới) nối thẳng vào phần tối một cách tự nhiên hơn.
     Ảnh cắt lần 2 tỉ lệ 580:270 (trước là 580:299).

     LƯU Ý: phần định vị chữ/nút thật của thẻ này giờ nằm ở apph-hotro-chu.css (nạp sau file
     này, dùng !important) — ảnh nền + khung ở đây chỉ còn là lớp dự phòng/gốc, đừng sửa các
     giá trị bên dưới để né hình vẽ chữ nữa vì đã không còn tác dụng hiển thị thật. */
  .apph-hotro247-top {
    position: relative;
    aspect-ratio: 580 / 270;
    padding: 0;
    overflow: hidden;
    background-image: url("/assets/images/apph-hotro247-anh.png?v=2");
    background-size: 100% 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Chữ "Hỗ trợ 24/7 / lời chào" giờ nằm trong ảnh — .apph-hotro247-loi chỉ còn giữ lại cho
     trình đọc màn hình (xem .apph-sr-only cuối tệp), không hiển thị bằng mắt nữa. */
  .apph-hotro247-list {
    padding: 4px 0;
  }

  /* Đo lại trên ảnh cắt lần 2: viên thuốc trắng chiếm x:[6%,78.3%] y:[66.3%,95.6%], hình tròn
     chiếm x:[81.6%,93.3%] cùng hàng y. */
  .apph-hotro247-nut {
    position: absolute;
    z-index: 1;
    left: 6%;
    right: 6.7%;
    top: 66.3%;
    height: 29.3%;
    display: flex;
    align-items: stretch;
    gap: 3.8%;
  }

  /* Trong suốt hoàn toàn — hình viên thuốc + chữ + icon đã vẽ sẵn trong ảnh, đây chỉ giữ vùng
     bấm (nhãn thật nằm trong .apph-sr-only cho trình đọc màn hình). */
  .apph-hotro247-ai {
    position: relative;
    z-index: 1;
    flex: 1;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
  }

  .apph-hotro247-ai:active {
    opacity: 0.7;
  }

  /* Trong suốt — hình tròn nút gọi đã có sẵn trong ảnh, đây chỉ giữ vùng bấm.
     flex-basis quy đổi: bề rộng hình tròn (11.7%) / bề rộng hàng nút (100-6-6.7=87.3%) ≈ 13.4%. */
  .apph-hotro247-goi {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 13.4%;
    background: transparent;
    text-decoration: none;
  }

  /* Ẩn khỏi mắt nhưng vẫn còn cho trình đọc màn hình — dùng cho phần chữ/nhãn giờ đã vẽ sẵn
     trong ảnh nền (.apph-hotro247-loi, nhãn nút AI). Kiểu "visually hidden" chuẩn, không dùng
     display:none vì display:none sẽ ẩn luôn khỏi trình đọc màn hình. */
  .apph-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Icon gọi đã vẽ sẵn trong ảnh — vẽ thêm icon SVG ở đây thành 2 icon chồng nhau (đúng lỗi
     đã gặp). Chỉ giữ phần tử <a> làm vùng bấm + nhãn cho trình đọc màn hình. */
  .apph-hotro247-goi svg {
    display: none;
  }

  /* ---------- Cửa sổ chat AI ----------
     Bottom-sheet phủ toàn màn hình, ẩn/hiện bằng thuộc tính [hidden] + JS thêm class
     .mo để chạy hiệu ứng trượt lên (JS trong app-home.js). */

  .ai-chat {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
  }

  /* Selector [hidden] cụ thể hơn ".ai-chat" một bậc, nên thắng được nó — nếu không thì
     luật display:flex ở trên đè luôn thuộc tính [hidden], khiến lớp phủ trong suốt che
     kín cả trang và NUỐT MẤT cú bấm vào nút "Chat với AI hỗ trợ" ngay từ đầu, dù JS vẫn
     chạy đúng. Đây là lý do bấm nút không thấy popup hiện lên. */
  .ai-chat[hidden] {
    display: none;
  }

  /* Thanh điều hướng dưới cùng bị ép z-index: 9999 !important (xem bottom-nav.css) — cao
     hơn hẳn z-index: 60 của sheet này, nên vẽ ĐÈ NGANG qua giữa hộp chat, che mất ô nhập
     và nút gửi. Bảng "Thêm" (more-sheet) trước đây gặp đúng lỗi này và đã chọn cách ẩn hẳn
     nav khi mở thay vì nâng z-index — làm theo đúng cách đó cho nhất quán. */
  body.ai-chat-open .bottom-nav,
  body.stats-sheet-open .bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Hai nút nổi (lên đầu trang / liên hệ) đo thực tế vẫn vẽ đè lên góc dưới sheet Thống kê
     dù sheet có z-index cao hơn — nút nổi nằm trong ngữ cảnh xếp lớp riêng nên so z-index
     trực tiếp không ăn thua. Ẩn hẳn đi trong lúc sheet mở, giống cách đã làm với nav dưới. */
  body.stats-sheet-open .htms-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .ai-chat-nen {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 11, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .ai-chat-hop {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 100% của .ai-chat, không phải vh: khi bàn phím mở, JS co chiều cao .ai-chat lại
       đúng bằng vùng còn hiển thị (visualViewport) — nếu ở đây vẫn ghim theo vh cũ (đo
       trước khi có bàn phím) thì hộp chat sẽ cao vượt khỏi vùng đó, đẩy ô nhập/nút gửi
       xuống dưới, bị bàn phím che mất. */
    max-height: 100%;
    /* Cùng tông với sheet Thống kê và các thẻ chính (rgb(4,42,39)). Hai tấm trượt này luôn
       xuất hiện cùng một kiểu nên phải cùng màu, sửa một cái mà bỏ cái kia là lại lệch.
       Dùng màu ĐẶC vì đây là lớp phủ che nội dung phía sau — lý do như ở sheet Thống kê. */
    background: #042a27;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: transform 0.24s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .ai-chat.mo .ai-chat-nen {
    opacity: 1;
  }

  .ai-chat.mo .ai-chat-hop {
    transform: translateY(0);
  }

  .ai-chat-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .ai-chat-dau h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #eafffb;
  }

  .ai-chat-dong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #bfe0da;
    cursor: pointer;
  }

  .ai-chat-doan {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ai-chat-tin {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }

  .ai-chat-tin-bot {
    align-self: flex-start;
    background: rgba(127, 227, 207, 0.14);
    border: 1px solid rgba(127, 227, 207, 0.22);
    color: #eafffb;
    border-bottom-left-radius: 4px;
  }

  /* Số điện thoại / Zalo / Facebook / email trong câu trả lời của bot là liên kết bấm được
     (xem hàm dungLienKet trong app-home.js). Phải khác màu + gạch chân, nếu không khách
     không biết là bấm được. Màu vàng lấy đúng tông nút chính của trang, nổi rõ trên nền
     teal nhạt của bong bóng chat. break-word để link dài không đẩy rộng bong bóng. */
  .ai-chat-tin-bot a {
    color: #ffd257;
    text-decoration: underline;
    font-weight: 700;
    word-break: break-word;
  }

  .ai-chat-tin-bot a:active {
    opacity: 0.7;
  }

  .ai-chat-tin-toi {
    align-self: flex-end;
    background: #f5c451;
    color: #1a1205;
    font-weight: 600;
    border-bottom-right-radius: 4px;
  }

  .ai-chat-tin-loi {
    align-self: flex-start;
    background: rgba(217, 45, 32, 0.16);
    border: 1px solid rgba(217, 45, 32, 0.3);
    color: #ffd0c4;
    border-bottom-left-radius: 4px;
  }

  .ai-chat-tin-cho {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 13px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    background: rgba(127, 227, 207, 0.14);
    border: 1px solid rgba(127, 227, 207, 0.22);
  }

  .ai-chat-tin-cho span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7fe3cf;
    opacity: 0.4;
    animation: aiChatCham 1s infinite ease-in-out;
  }

  .ai-chat-tin-cho span:nth-child(2) { animation-delay: 0.15s; }
  .ai-chat-tin-cho span:nth-child(3) { animation-delay: 0.3s; }

  @keyframes aiChatCham {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
  }

  .ai-chat-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .ai-chat-form input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #eafffb;
    /* PHẢI từ 16px trở lên — dưới mức này Safari trên iPhone tự phóng to (zoom) cả trang khi
       bấm vào ô nhập, khiến trang tràn ra ngoài khung hình đúng như ảnh chụp màn hình. */
    font-size: 16px;
    font-family: inherit;
  }

  .ai-chat-form input::placeholder {
    color: rgba(234, 255, 251, 0.45);
  }

  .ai-chat-form input:focus {
    outline: none;
    border-color: #7fe3cf;
  }

  .ai-chat-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 0;
    border-radius: 50%;
    background: #0f766e;
    color: #eafffb;
    cursor: pointer;
  }

  .ai-chat-form button:disabled {
    opacity: 0.5;
  }

  /* ---------- Bảng thống kê ----------

     Mục này là HTML sẵn có của bản web, không nằm trong partial dạng ứng dụng, nhưng đã
     sửa thêm phần đầu-nút-đóng vào thẳng home.blade.php (xem chú thích ở đó) để dùng làm
     bottom-sheet trên điện thoại — đổi từ nằm sẵn trong luồng cuộn sang lớp phủ mở khi bấm
     nút "Thống kê hoạt động" trong thẻ Hỗ trợ, giống cách đã làm với FAQ/Cam kết minh
     bạch/Liên hệ hỗ trợ trước đó. .mo là class JS thêm vào lúc mở (app-home.js). */

  .home-root > .stats-section {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: flex-end;
    padding: 0;
    background: rgba(4, 12, 11, 0);
    visibility: hidden;
    transition: background 0.2s ease, visibility 0s linear 0.2s;
  }

  .home-root > .stats-section.mo {
    visibility: visible;
    background: rgba(4, 12, 11, 0.6);
    transition: background 0.2s ease;
  }

  .stats-section-nen {
    display: block;
    position: absolute;
    inset: 0;
  }

  .home-root > .stats-section .shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    max-height: min(78vh, 640px);
    /* hidden theo chiều ngang: lớp sóng ::before rộng hơn khối (inset -30%), nếu để auto
       thì nó đẻ ra thanh cuộn ngang. .modal-card cũng dùng đúng cặp này. */
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
    /* Nền lấy ĐÚNG công thức của .modal-card (popup "Câu hỏi thường gặp", "Lưu ý khi sử
       dụng"...) trong styles.css, để hai kiểu khối cùng nổi lên trên trang trông như một bộ.
       Trước đây khối này để màu phẳng nên nhìn khác hẳn các popup.

       Vẫn là nền ĐỤC HOÀN TOÀN (gradient không có alpha): đây là tấm trượt che kín nội dung
       phía sau, để trong suốt thì chữ và thẻ bên dưới lộ qua loang lổ. */
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(45, 212, 191, 0.22), transparent 55%),
      linear-gradient(165deg, #0b4f4a 0%, #0f6b64 48%, #0a4540 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: transform 0.24s ease;
    padding: 16px 18px calc(16px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  }

  /* Lớp sóng chuyển động bên trong, lấy đúng của .modal-card. z-index -1 + isolation:isolate
     ở khối cha để lớp này nằm GIỮA nền và chữ — thiếu isolate thì nó vẽ đè lên chữ. */
  .home-root > .stats-section .shell::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 45% 35% at 20% 30%, rgba(45, 212, 191, 0.3), transparent 70%),
      radial-gradient(ellipse 40% 40% at 78% 20%, rgba(15, 118, 110, 0.38), transparent 65%),
      radial-gradient(ellipse 50% 45% at 60% 80%, rgba(20, 184, 166, 0.26), transparent 70%);
    clip-path: polygon(8% 12%, 32% 4%, 58% 14%, 86% 8%, 98% 34%, 88% 58%, 96% 82%, 68% 96%, 38% 88%, 12% 94%, 2% 68%, 10% 40%);
    animation: wavePolyA 22s ease-in-out infinite alternate;
    opacity: 0.9;
  }

  .home-root > .stats-section.mo .shell {
    transform: translateY(0);
  }

  /* Safari iOS: lớp sóng ::before ở trên có animation + clip-path nên WebKit đưa nó lên
     một lớp hợp thành riêng và vẽ ĐÈ lên nội dung — isolation:isolate ở .shell chỉ chặn
     được trên Chrome. Hậu quả: mở sheet ra chỉ thấy nền và thanh tab (thanh tab thoát
     được vì có backdrop-filter, tự tạo lớp riêng), còn tiêu đề và 4 thẻ số liệu chiếm
     chỗ nhưng vô hình. Cho các khối con một ngữ cảnh xếp lớp riêng để chúng luôn nằm
     trên lớp sóng z-index:-1. Không đổi màu sắc, khoảng cách hay bố cục. */
  .home-root > .stats-section .shell > * {
    position: relative;
    z-index: 0;
  }

  .stats-section-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
  }

  .stats-section-tieude {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .stats-section-dong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #bfe0da;
    cursor: pointer;
  }

  .home-root > .stats-section .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .home-root > .stats-section .stats-grid li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 16px 14px;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    text-align: left;
  }

  .home-root > .stats-section .stats-grid li strong {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .home-root > .stats-section .stats-grid li span {
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.7);
  }

  /* ---------- Mục "Tìm hiểu thêm" gập lại ---------- */

  /* Khong thut le o day: .shell ben trong da tu de 18px roi, de them 16px nua thanh 34px —
     lech han so voi 18px cua cac muc khac. Mot tang lo mot viec. */
  .apph-more {
    margin: 0 0 8px;
  }

  /* .apph-more da bo le ngang de cac .shell ben trong tu lo 18px. Nhung dong tieu de gap
     nay KHONG phai .shell nen mat luon phan chua mep — do duoc 0/0, tran sat hai ben. */
  .apph-more-sum {
    margin: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.94);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    /* Bỏ mũi tam giác mặc định của trình duyệt, dùng mũi tên tự vẽ cho khớp lối iOS. */
    list-style: none;
  }

  .apph-more-sum::-webkit-details-marker {
    display: none;
  }

  .apph-more-sum svg {
    flex: 0 0 20px;
    color: rgba(255, 255, 255, 0.55);
    transition: transform 0.2s ease;
  }

  .apph-more[open] .apph-more-sum svg {
    transform: rotate(180deg);
  }

  /* Mục đầu tiên bên trong không cần đệm trên nữa vì đã có dòng tiêu đề gập. */
  .apph-more[open] > .section:first-of-type {
    padding-top: 1rem;
  }

  /* ---------- Ô dán link trên điện thoại ----------

     Hero không còn là trang bìa mà là "ô dán link" — thẻ số 2, đúng chỗ thẻ mã QR
     của app ngân hàng.

     Lưu ý bộ chọn: neo vào .apph-hero (khách) và .apph-wallet (đã đăng nhập) — hai thẻ chào
     của hai trạng thái. KHÔNG neo vào .apph ~ .hero: dấu ~ chỉ tìm anh em ĐỨNG SAU, mà khối
     .apph nay nằm DƯỚI hero (thẻ chào ở trên, lưới dịch vụ ở dưới) nên không khớp gì cả.
     (.apph-greet giữ lại phòng khi còn chỗ nào dùng tên lớp cũ.) */

  /* ---------- FAQ theo lối danh sách iOS ----------

     Phần này là HTML sẵn có của bản web (bảng FAQ do quản trị nhập), chỉnh bằng CSS. */

  .home-root > .faq-section {
    padding-top: 4px;
    padding-bottom: 8px;
  }

  /* Nhãn "FAQ" phía trên tiêu đề là lối trình bày của trang giới thiệu, không hợp
     với màn hình ứng dụng — bỏ, giữ lại đúng một dòng tiêu đề mục. */
  .home-root > .faq-section .eyebrow {
    display: none;
  }

  .home-root > .faq-section h2 {
    margin: 0 2px 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -0.01em;
  }

  .home-root > .faq-section .faq-list {
    display: block;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
  }

  /* Từng câu hỏi là một hàng trong thẻ chung, không còn là thẻ rời. */
  /* padding: 0 là bắt buộc — thẻ .faq-item ở bản web có đệm riêng, chỉ gỡ nền và viền
     thì mỗi hàng vẫn cao ~200px thay vì 56px. */
  .home-root > .faq-section .faq-item {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: none;
  }

  .home-root > .faq-section .faq-item:last-child {
    border-bottom: 0;
  }

  .home-root > .faq-section .faq-item summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.94);
  }

  /* Mũi tên chỉ xuống, xoay lên khi mở — dấu hiệu bấm được, giống hàng danh sách iOS. */
  .home-root > .faq-section .faq-item summary::after {
    content: "›";
    margin-left: auto;
    padding-left: 12px;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
    transform: rotate(90deg);
    transition: transform 0.2s ease;
  }

  .home-root > .faq-section .faq-item[open] summary::after {
    transform: rotate(-90deg);
  }

  /* Bỏ mũi tam giác mặc định của trình duyệt để không có hai dấu chỉ hướng. */
  .home-root > .faq-section .faq-item summary {
    list-style: none;
  }

  .home-root > .faq-section .faq-item summary::-webkit-details-marker {
    display: none;
  }

  /* Chrome đời mới bỏ qua list-style trên <summary>, phải gỡ thêm ::marker — nếu không
     sẽ có HAI dấu chỉ hướng cạnh nhau: tam giác mặc định và mũi tên tự vẽ. */
  .home-root > .faq-section .faq-item summary::marker,
  .apph-more-sum::marker {
    content: "";
  }

  .home-root > .faq-section .faq-answer {
    padding: 0 16px 14px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
  }

  /* ---------- Mục minh bạch ---------- */

  .home-root > #minh-bach {
    padding-top: 4px;
  }

  .home-root > #minh-bach .shell {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-root > #minh-bach .section-lead {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
  }

  /* Bốn liên kết chính sách thành bốn hàng có mũi tên, giống mục Hỗ trợ phía trên. */
  .home-root > #minh-bach .legal-links {
    display: block;
    padding: 0;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    list-style: none;
  }

  .home-root > #minh-bach .legal-links li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .home-root > #minh-bach .legal-links li:last-child {
    border-bottom: 0;
  }

  .home-root > #minh-bach .legal-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none;
  }

  /* Mũi tên › dựng bằng ::after để không phải sửa HTML của phần này. */
  .home-root > #minh-bach .legal-links a::after {
    content: "›";
    margin-left: auto;
    padding-left: 12px;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
  }

  /* ---------- Phần đầu trang ----------

     Thanh trắng bo góc là lối của trang web; app ngân hàng để phần đầu TRONG SUỐT,
     logo và nút nổi thẳng trên nền. Chỉ đổi ở trang chủ (body.is-wave-page) — khu
     tài khoản dùng layout khác, không đụng tới. */

  body.is-wave-page .site-header {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  body.is-wave-page .site-header .header-bar {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Chữ trắng trên nền sóng: thêm bóng đổ mảnh để chữ không chìm ở chỗ sóng sáng.

     Phải nhắm CẢ HAI phần tử. Trên điện thoại .logo-name bị đặt display:none, chữ nhìn
     thấy thực ra là <small class="logo-mark-text"> — chỉ sửa .logo-name thì màu tính ra
     đúng là trắng nhưng trên màn hình vẫn là chữ teal chìm vào nền sóng. */
  /* ---------- Thanh đầu trang: logo là MỘT tệp ảnh duy nhất ----------

     Đặt ảnh làm NỀN của thẻ <a class="logo"> rồi giấu các phần tử con, thay vì sửa markup.
     Lý do: thanh đầu trang dùng chung cho mọi trang của layout trang chủ (Xếp hạng, Blog,
     trang tĩnh…). Đổi markup là đổi cho tất cả, mà những trang kia vẫn nền teal. Làm bằng CSS
     có phạm vi body.is-wave-page + dưới 768px thì chỉ trang chủ trên điện thoại đổi.

     ĐÃ THỬ và BỎ hai hướng khác trong cùng phiên này:
       - Cắt chữ ra khỏi ảnh, dựng lại bằng CSS gradient-text: dáng chữ khác hẳn ảnh mẫu,
         không giả được mặt vát 3D.
       - Tách riêng dấu hiệu N (ảnh) + cụm chữ "nhantien365.com" (ảnh) + slogan (CSS text):
         đúng ảnh mẫu nhất, nhưng chủ hệ thống yêu cầu lùi lại bản MỘT TỆP DUY NHẤT này.

     logo-ngang.png = file PNG của chủ (N 3D + nhantien365.com + slogan), không crop. */

  body.is-wave-page .site-header .header-bar {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    height: 104px;
    overflow: visible;
  }

  /* Logo phủ KÍN hai bên và mép trên: đặt ảnh làm nền của cả thanh header thay vì của
     riêng thẻ <a>. Thẻ <a> nằm trong .header-bar vốn có lề 18px + đệm 12px nên không bao
     giờ chạm được mép màn hình.

     background-size: 100% auto — kéo hết bề ngang, chiều cao tự theo tỉ lệ nên chữ KHÔNG
     bị bóp. Ảnh logo-bang-header.webp đã nới thêm 197px nền teal bên phải để nội dung chỉ
     chiếm 78% bề ngang; không nới thì chữ ".com" chui xuống dưới nút chuông.

     Bỏ đệm trên của header (9.15px) để ảnh chạm đúng mép trên. */
  /* Nội dung trang cố tình nằm DƯỚI header (header trong suốt nên vẫn nhìn xuyên qua).
     Băng logo giờ đục nên che mất phần đầu khối hero của khách — đo được 95px ở khung
     390px. Đẩy riêng phần nội dung hero xuống đúng chiều cao băng; ảnh nền của hero vẫn
     bắt đầu từ y=0 nên vẫn phủ kín mép trên.
     22.58vw = 100vw ÷ 4.43, đúng tỉ lệ ảnh băng (1400x316). */
  /* .apph-hero = bản của khách, .apph-wallet = bản đã đăng nhập (chứa dòng chào
     "Chào buổi trưa, ..."). Chỉ bù cho bản khách thì dòng chào của người đã đăng nhập
     nằm lọt dưới băng logo và bị che trắng. Bù cho cả hai. */
  .home-root > .apph-hero,
  .home-root > .apph-wallet {
    padding-top: 0;
  }

  /* Nút chuông trên băng logo: nền băng chỗ nó đứng sáng 80/255 và ám teal, nên nút kính
     nhạt mặc định vừa mờ vừa lẫn màu. Đổi thành đĩa teal ĐẬM viền sáng, icon trắng —
     cùng công thức đã dùng cho header khu tài khoản. Giữ nguyên 44px vùng chạm. */
  /* Thẻ .logo để flex:1 1 auto nên nuốt hết bề ngang, cụm nút bên phải bị bóp còn 0x0 —
     đo được nút chuông 0x0, tức có trong mã mà không hiện. Khoá kích thước cả cụm lẫn nút. */
  body.is-wave-page .site-header .header-mobile-tools {
    flex: 0 0 auto;
    min-width: 44px;
  }

  body.is-wave-page .site-header .nav-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    background: rgba(4, 40, 38, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }

  body.is-wave-page .site-header .nav-icon-btn i,
  body.is-wave-page .site-header .nav-icon-btn svg {
    color: #ffffff;
    stroke: #ffffff;
  }

  body.is-wave-page .site-header {
    padding-top: 0;
    background-image: url("/assets/images/banner-header.webp?v=bn4");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% auto;
  }

  body.is-wave-page .site-header .logo {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 52px);
    height: 96px;
    background-image: none;
  }

  body.is-wave-page .site-header .logo-icon,
  body.is-wave-page .site-header .logo-text {
    display: none;
  }

  /* Nút ba gạch thành nút tròn kính teal cho hợp nền trong suốt. Giữ nguyên 44px —
     ngưỡng vùng chạm tối thiểu của iOS đã chốt từ trước. */
  body.is-wave-page .site-header .nav-toggle {
    background: rgba(4, 42, 39, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }

  body.is-wave-page .site-header .nav-toggle span {
    background: #fff;
  }
}

/* Khoá cuộn nền khi popup đăng nhập đang mở, nếu không thì cuộn trong popup sẽ kéo cả
   trang phía sau (hiện tượng cuộn xuyên của iOS). */

/* ==========================================================================
   Đồng bộ lề trang chủ (mobile)

   Trang chủ đang có hai cơ chế lề khác nhau cùng cho ra 18px: phần lớn khối nằm trong
   .shell (width: min(container, calc(100% - 2.5rem))), còn .apph-wallet / .apph-more-sum /
   .promo-band / .hero-content thì tự đặt margin 0 18px.

   Thẻ ví lại lấn ra 8px (nó tự đặt lề âm 10px trong wallet_hero.blade.php), nên trên trang
   chủ nó rộng hơn mọi khối khác. Khối dưới đây kéo TẤT CẢ về cùng 8px:
     - chuẩn hoá mọi chủ sở hữu lề về "width tự do + margin 8px" thay vì mỗi nơi một kiểu,
       như vậy không cộng dồn margin với width tính sẵn (cộng dồn là tràn ngang);
     - riêng thẻ ví bỏ lề âm đi, vì khung bao đã 8px rồi — để nguyên là nó thành -2px,
       tức lòi ra khỏi màn hình.

   Chỉ mobile: khổ rộng vẫn dùng .shell canh giữa theo --container như cũ.
   ========================================================================== */
@media (max-width: 767px) {
  .home-root .shell,
  .home-root .apph-wallet,
  .home-root .apph-more-sum,
  .home-root .apph-greet {
    width: auto;
    max-width: none;
    margin-left: 8px;
    margin-right: 8px;
  }

  /* .apph-loi KHÔNG còn nằm trực tiếp trong .home-root nữa — đã dời vào bên trong card
     .apph-hero (xem app-home-greet.blade.php), ăn lề từ chính đệm của card. Thêm 8px lề
     ngang ở đây sẽ làm nó hẹp hơn hàng nút phía trên, lệch mép. */
  .home-root .apph-loi {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Khung .apph không dùng margin mà dùng padding 0 18px; đám .apph-card / .apph-duo /
     .apph-head bên trong đều ăn lề từ đây. */
  .home-root .apph {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* .shell bọc các mục (FAQ, thống kê, liên kết pháp lý) còn có thêm padding 18px, cộng với
     margin 8px ở trên thành 26px. Bỏ đệm ngang cho các .shell dạng KHUNG BAO.
     Chừa .promo-band và .hero-content: hai cái đó là THẺ có nền riêng, đệm 18px là khoảng
     thở bên trong thẻ — bỏ đi thì chữ dính sát viền. */
  .home-root .shell:not(.promo-band):not(.hero-content) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Mục "Minh bạch & pháp lý" tự đặt đệm 18px bằng bộ chọn có mã định danh (dòng ~1417),
     mà mã định danh thắng mọi bộ chọn theo lớp — nên phải viết lại đúng bộ chọn đó. */
  .home-root > #minh-bach .shell {
    padding-left: 0;
    padding-right: 0;
  }

  /* Ô "Kiểm tra tiền hoàn": luật gốc là `.apph-wallet ~ .hero .hero-content` (3 lớp) nên
     luật 2 lớp ở trên thua. Viết đủ 3 lớp và đặt SAU luật gốc trong cùng file để thắng. */
  .home-root .hero .hero-content {
    margin-left: 8px;
    margin-right: 8px;
  }

  .home-root .vi-render,
  .home-root .vr-phu-day {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ==========================================================================
   Thẻ "Kiểm tra tiền hoàn" (mobile) — dựng bằng CSS, bỏ hẳn ảnh nền

   Bản trước vẽ sẵn ô kính, ô nhập, nút cam và logo hai sàn vào một ảnh WebP rồi
   phủ các thẻ HTML trong suốt lên đúng toạ độ. Bốn hệ quả đo được:
     - ảnh 1290x832 chỉ nặng 28KB, nén quá mạnh nên phóng lên bị mờ và bệt màu;
     - aspect-ratio 1151/767 khoá cứng nên thẻ cao theo bề ngang máy chứ không
       theo nội dung — máy hẹp thì thẻ lùn, chữ bị bóp theo;
     - mọi cỡ chữ tính bằng cqw nên ra số lẻ (đo ở máy 320px: viên thuốc 9.12px)
       vừa nhỏ hơn ngưỡng đọc vừa rơi vào nửa điểm ảnh nên nhìn rung;
     - icon dán và logo Shopee/TikTok buộc phải ẩn vì đã vẽ trong ảnh.

   Bản này: một hệ chữ duy nhất (kế thừa font trang, chỉ đổi cỡ và độ đậm), mọi
   cỡ là px chẵn; khoảng cách dựng bằng gap nên đều nhau; token thẻ lấy đúng của
   .apph-card kế bên để hai thẻ cùng một phong cách.
   ========================================================================== */

/* Banner đã chuyển vào thẻ kiểm tra. Trên máy tính ẩn hẳn — trước đây nó nằm trong .apph
   nên desktop vốn không thấy. Không để lộ ra hero desktop. */
.hero-content > .apph-banner {
  display: none;
}

@media (max-width: 767px) {
  #heroSection .hero-content {
    /* Gỡ toàn bộ dấu vết bản ảnh */
    position: relative;
    aspect-ratio: auto;
    container-type: normal;
    background-image: none;
    /* Token dùng chung với .apph-card */
    display: flex;
    flex-direction: column;
    /* Một nhịp duy nhất 12px cho MỌI khoảng cách trong thẻ (tiêu đề - ô nhập -
       nút - hàng nền tảng), lề thẻ 16px. */
    gap: 12px;
    max-width: none;
    width: auto;
    margin: 0 8px;
    padding: 16px;
    /* Cùng bề mặt với .apph-wallet .wallet-hero (đo trên thẻ ví đang hiện:
       nền rgb(17,94,89), viền kính 0.28, bo 24px, bóng teal + highlight trong). */
    background-color: rgb(17, 94, 89);
    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%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 24px;
    box-shadow:
      0 12px 32px rgba(15, 118, 110, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    overflow: hidden;
  }

  /* Tiêu đề CSS "Kiểm tra tiền hoàn" đã bỏ theo yêu cầu. content:none để đè luật
     app-home.css vẫn ghi chữ này lên ::before. */
  #heroSection .hero-content::before {
    content: none;
    display: none;
    margin: 0;
  }

  /* Banner "Hoàn tiền lên đến 20%" gộp vào thẻ này: bỏ nền/viền riêng để không thành
     thẻ lồng thẻ, giữ nguyên chữ và icon sấm. */
  #heroSection .hero-content > .apph-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  #heroSection .hero-content .apph-banner-tieude {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
  }

  #heroSection .hero-content .apph-banner-tieude strong {
    color: #ffd257;
    font-weight: 800;
  }

  #heroSection .hero-content .apph-banner-mota {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.78);
  }

  #heroSection .hero-content .apph-banner-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: rgba(255, 210, 87, 0.16);
    border: 1px solid rgba(255, 210, 87, 0.4);
    color: #ffd257;
  }

  #heroSection .hero-content .apph-banner-ico svg {
    width: 22px;
    height: 22px;
  }

  /* Form trở lại dòng chảy thường; bản ảnh cho nó position:absolute inset:0 */
  #heroSection .hero-content .hero-form {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* Bản ảnh đặt display:contents để các con tự định vị tuyệt đối.
     Đệm phải về 0: luật gốc để 7.49px trên/dưới và 8.5px hai bên, khiến ô nhập và
     nút thụt vào 8.5px so với tiêu đề (đo được: tiêu đề mép 17px, ô nhập 25.5px)
     và cộng thêm 7.49px vào khoảng cách trên/dưới nên các nhịp không còn đều. */
  #heroSection .hero-content .hero-form-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    /* Viền 1px của luật gốc là trong suốt nên không thấy, nhưng box-sizing:border-box
       làm ô nhập và nút thụt vào 1px so với tiêu đề — lệch lề đúng 1px. */
    border: 0;
    /* Nền trắng 10% của luật gốc: bản ảnh đặt display:contents nên hàng không vẽ gì,
       nay nó là khối thật nên nền đó hở ra thành một vạch sáng ở khe 12px giữa ô
       nhập và nút. */
    background: none;
    box-shadow: none;
  }

  /* ---------- Ô nhập link ---------- */
  #heroSection .hero-content .link-field {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    /* Luật gốc đặt flex:1. Trong hàng xếp dọc, flex mới là thứ định chiều cao nên
       height:48px bị bỏ qua và ô bị co về chiều cao nội dung (48 của input + 2 viền
       = 50px), cao hơn nút 48px. Trả flex về mặc định để height có hiệu lực. */
    flex: 0 0 auto;
    min-height: 0;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(4, 42, 39, 0.12);
    border-radius: 14px;
    box-shadow: none;
  }

  #heroSection .hero-content .link-field input {
    width: 100%;
    height: 100%;
    /* min-height:48px gốc lớn hơn lòng ô (48 - 2 viền = 46) nên input tràn ra 2px. */
    min-height: 0;
    /* chừa chỗ cho nút dán bên phải: 6 + 36 + 8 = 50 */
    padding: 0 50px 0 14px;
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    border-radius: 14px;
    /* PHẢI từ 16px — xem chú thích ở luật .link-field input phía trên cho lý do. */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #0b2f2a;
  }

  #heroSection .hero-content .link-field input::placeholder {
    color: #7c9a95;
    font-weight: 500;
  }

  #heroSection .hero-content .link-field input:-webkit-autofill,
  #heroSection .hero-content .link-field input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 100px #fff;
    -webkit-text-fill-color: #0b2f2a;
  }

  /* ---------- Nút dán: hiện lại icon thật ---------- */
  #heroSection .hero-content .link-field-actions {
    position: absolute;
    left: auto;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #heroSection .hero-content .link-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 42, 39, 0.07);
    border: 0;
    border-radius: 10px;
    color: #0f766e;
  }

  /* Bản ảnh ẩn icon vì đã vẽ trong ảnh; nay vẽ lại bằng vector nên luôn sắc nét */
  #heroSection .hero-content .link-icon-btn svg {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* Vùng chạm 44px cho ngón tay, không làm nút to lên về mặt nhìn */
  #heroSection .hero-content .link-icon-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* ---------- Nút chính ---------- */
  #heroSection .hero-content .btn-accent {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: 48px;
    min-height: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8a317 0%, #f59e0b 55%, #ea580c 100%);
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
  }

  #heroSection .hero-content .btn-accent:active { transform: scale(0.99); }

  /* ---------- Hàng "Nền tảng hỗ trợ" ---------- */
  #heroSection .hero-content .hero-form-hint {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #bfe0da;
  }

  #heroSection .hero-content .hero-form-hint .pill {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: 28px;
    margin: 0;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #eafffb;
  }

  /* Logo hai sàn: bản ảnh ẩn <img> vì đã vẽ trong ảnh, nay dùng SVG gốc nên nét ở
     mọi mật độ điểm ảnh. Khoá CHIỀU CAO và để bề ngang tự tính: shopee.svg tỉ lệ
     ~0.7 chứ không vuông, ép 16x16 là kéo ngang nó ra 42%. */
  #heroSection .hero-content .hero-form-hint .pill-ico {
    display: block;
    width: auto;
    height: 16px;
    max-width: 20px;
    flex: 0 0 auto;
    object-fit: contain;
  }

  /* ---------- Báo lỗi ---------- */
  #heroSection .hero-content .hero-form-alert:not([hidden]) {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    min-height: 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    background: rgba(120, 20, 20, 0.72);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #ffe6e2;
  }
}

/* ============================================================================
   Phần "Tìm hiểu thêm" (Lợi ích, 4 bước, Quy trình, Ưu điểm, Giới thiệu, CTA cuối) —
   app-card hoá.

   Các mục này giữ nguyên HTML/CSS gốc của bản web (landing page): nền trong suốt,
   danh sách trần cách nhau bằng khoảng trắng lớn, thẻ kính (glass) sáng — đúng ngôn
   ngữ marketing site, khác hẳn các thẻ đục kiểu app (.apph-card) ở phần trên. Từ khi
   gập vào sau nút "Tìm hiểu thêm", chúng vẫn hiện nguyên bản cũ mỗi khi người dùng bấm
   mở ra, nên phần này vẫn "lộ web" rõ nhất trên trang.

   Gom mỗi mục thành một thẻ đục + danh sách hàng có đường kẻ, đúng kiểu iOS list đã
   dùng cho "Hỗ trợ" (.apph-list) — không đụng HTML, chỉ đổi CSS trong khổ hẹp; bản
   desktop không đổi vì toàn bộ nằm trong @media (max-width: 767px). */
@media (max-width: 767px) {

  .home-root .apph-more .section {
    padding: 0 18px 22px;
  }

  .home-root .apph-more .eyebrow {
    font-size: 13px;
  }

  .home-root .apph-more .section h2 {
    font-family: inherit;
    font-size: 18px;
    letter-spacing: -0.01em;
  }

  .home-root .apph-more .section-lead {
    font-size: 14px;
    line-height: 1.5;
    max-width: none;
  }

  /* ---------- Lợi ích (#loi-ich) và Ưu điểm (#uu-diem) ----------
     Cùng hình dạng: icon tròn + tiêu đề + mô tả. #loi-ich dùng .stats-grid (lưới thẻ rời,
     icon nằm TRÊN chữ nhờ margin inline), #uu-diem dùng .benefit-list (đã sẵn dạng
     icon-trái/chữ-phải). Đưa cả hai về cùng một khuôn: một thẻ đục, mỗi mục một hàng. */

  .home-root #loi-ich .stats-grid {
    display: block;
    margin: 0;
    padding: 4px 0;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }

  .home-root #loi-ich .stats-grid > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }

  .home-root #loi-ich .stats-grid > li:last-child {
    border-bottom: 0;
  }

  /* Icon gốc có style inline "margin:0 auto .6rem" để tự canh giữa trong lưới cũ —
     cần !important mới thắng được vì style inline luôn mạnh hơn stylesheet ngoài. */
  .home-root #loi-ich .stats-grid .feature-icon {
    margin: 0 !important;
    flex: 0 0 44px;
  }

  .home-root #loi-ich .stats-grid strong,
  .home-root #uu-diem .benefit-list h3 {
    display: block;
    margin: 0 0 3px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
  }

  .home-root #loi-ich .stats-grid span,
  .home-root #uu-diem .benefit-list p {
    display: block;
    font-size: 13px;
    line-height: 1.5;
  }

  .home-root #uu-diem .benefit-list {
    border-top: 0;
    margin: 0;
    padding: 4px 16px;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }

  .home-root #uu-diem .benefit-list li {
    padding: 14px 0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .home-root #uu-diem .benefit-list li:last-child {
    border-bottom: 0;
  }

  .home-root #uu-diem .feature-icon {
    width: 40px;
    height: 40px;
  }

  /* ---------- 4 bước (#huong-dan) ---------- */

  .home-root #huong-dan .how-steps {
    gap: 0;
    margin: 0 0 18px;
    padding: 4px 16px;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }

  .home-root #huong-dan .how-steps li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .home-root #huong-dan .how-steps li:last-child {
    border-bottom: 0;
  }

  .home-root #huong-dan .how-num {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(127, 227, 207, 0.45);
    color: #7fe3cf;
    font-family: inherit;
  }

  .home-root #huong-dan .how-steps h3 {
    font-family: inherit;
    font-size: 15px;
  }

  .home-root #huong-dan .how-steps p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* ---------- Quy trình (#quy-trinh) ---------- */

  .home-root #quy-trinh .timeline {
    display: block;
    gap: 0;
    padding: 4px 16px;
    background: rgba(4, 42, 39, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  }

  .home-root #quy-trinh .timeline li {
    padding: 14px 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    box-shadow: none;
  }

  .home-root #quy-trinh .timeline li:last-child {
    border-bottom: 0;
  }

  .home-root #quy-trinh .timeline h3 {
    font-family: inherit;
    font-size: 15px;
  }

  /* ---------- Giới thiệu bạn bè (#gioi-thieu) và CTA cuối trang (#uu-dai) ----------
     .promo-band dùng nền kính SÁNG (--glass-bg) — ngược hướng phủ với thẻ đục TỐI dùng
     khắp nơi trong app, nên nổi lên như một hệ thiết kế khác khi mở ra. Đổi về cùng nền
     đục để đồng bộ; nút bên trong kéo full-width bo tròn viên thuốc theo lối app. */

  .home-root #gioi-thieu .promo-band,
  .home-root #uu-dai .promo-band {
    background: rgba(4, 42, 39, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    border-radius: 20px;
  }

  .home-root #gioi-thieu .promo-band .btn,
  .home-root #uu-dai .promo-band .btn {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    font-size: 15px;
  }

  /* ---------- Nút CTA của "4 bước": kéo full-width, bo viên thuốc theo lối app ---------- */

  .home-root #huong-dan .how-cta {
    flex-direction: column;
  }

  .home-root #huong-dan .how-cta .btn {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    font-size: 15px;
  }

  /* ---------- Kết quả dán link (#product-result-card) ----------
     Thẻ này dùng style inline (background: var(--surface), border: var(--line)...) render
     từ HTML gốc — !important mới thắng được vì style inline mạnh hơn mọi selector ngoài.
     Giữ nguyên nền sáng: đây là thẻ hiển thị ẢNH + GIÁ sản phẩm thật, cần nền trung tính để
     ảnh/giá không ám màu — giống các app mua sắm vẫn dùng thẻ sáng cho kết quả sản phẩm dù
     nền chung tối. Chỉ bo góc/đổ bóng lại cho khớp ngôn ngữ bo tròn 20px dùng khắp trang. */
  .home-root #product-result-card {
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
    padding: 18px !important;
  }
}

/* ============================================================================
   Danh sách trong popup "Thông báo hoạt động" (#activityModal, home.blade.php).
   Không đặt trong khổ hẹp: popup này giống các popup khác (FAQ, Cam kết minh bạch...),
   nền/màu chữ đã có sẵn từ .is-wave-page .modal-card (styles.css) — ở đây chỉ định hình
   từng mục trong danh sách.
   ========================================================================== */

.activity-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-item-title {
  margin: 0 0 4px;
  font-weight: 700;
}

.activity-item-line {
  margin: 0;
  font-size: 0.9rem;
}

.activity-item-line + .activity-item-line {
  margin-top: 2px;
}


/* ==========================================================================
   Hero khách: đặt chữ vào ĐÚNG các ô kính vẽ sẵn trong ảnh (mobile)

   Ảnh hero-khach.webp (gốc 921x1707) vẽ sẵn 6 ô rỗng. Trước đây HTML tự vẽ nền kính
   riêng rồi xếp theo dòng, nên hai lớp chồng lệch nhau: ô vẽ sẵn bỏ trống còn màn hình
   hiện hai khối. Nay khoá tỉ lệ khối theo ảnh rồi đặt tuyệt đối từng phần tử.

   Toạ độ đo từ ảnh gốc, quy ra % của khối:
     viên thuốc bảo mật   3.3% .. 42.3% x  |  13.2% .. 20.8% y
     ô kính lớn           3.3% .. 42.3% x  |  23.1% .. 60.3% y
     thanh nút đăng nhập  3.3% .. 82.0% x  |  63.3% .. 70.0% y
     vòng tròn Face ID   84.1% .. 98.3% x  |  63.3% .. 70.0% y
     ba ô tính năng       2.7/34.7/67.3% mỗi ô rộng ~30%  |  72.3% .. 96.7% y

   Icon khoá, Face ID và ba icon tính năng ĐÃ CÓ trong ảnh nên ẩn bản HTML đi, nếu không
   là vẽ chồng hai lần.
   ========================================================================== */
@media (max-width: 767px) {
  .apph-hero-chao {
    margin: 0 0 8px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
  }

  .apph-hero {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1023 / 1537;
    min-height: 0;
    padding: 0;
  }

  .apph-hero-noidung {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
  }

  .apph-hero-noidung > * { position: absolute; margin: 0; }

  /* --- viên thuốc bảo mật --- */
  .apph-hero-dau {
    left: 3.3%; top: 13.2%; width: 39%; height: 7.6%;
    display: flex; align-items: center;
  }
  .apph-hero-antoan {
    display: flex; align-items: center; width: 100%; height: 100%;
    padding-left: 15%;
    background: none; border: 0; box-shadow: none; backdrop-filter: none;
  }
  .apph-hero-antoan > svg { display: none; }
  .apph-hero-antoan strong { display: block; font-size: 13px; font-weight: 700; color: #fff; }
  .apph-hero-antoan small  { display: block; font-size: 13px; color: rgba(255,255,255,.7); }

  /* --- câu trong ô kính lớn --- */
  .apph-hero-title {
    left: 3.3%; top: 23.1%; width: 39%; height: 37.2%;
    display: flex; flex-direction: column; justify-content: center;
    font-size: clamp(18px, 5.4vw, 24px); line-height: 1.18;
  }

  /* --- nút đăng nhập + Face ID --- */
  .apph-hero-nut {
    left: 3.3%; top: 63.3%; width: 95%; height: 6.7%;
    display: block; gap: 0;
  }
  .apph-hero-btn {
    position: absolute; left: 0; top: 0; width: 82.8%; height: 100%;
    min-height: 0; margin: 0;
    background: none !important; border: 0; box-shadow: none; color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 700;
  }
  .apph-hero-face {
    position: absolute; left: 85.1%; top: 0; width: 14.9%; height: 100%;
    min-height: 0; margin: 0;
    background: none !important; border: 0; box-shadow: none;
  }
  .apph-hero-face svg, .apph-hero-face i { display: none; }

  /* --- ba ô tính năng --- */
  /* Dung right thay cho width: dat width:95% thi chu ben trong day lui khoi grid lam ca
     khoi rong ra, do duoc tran ngang o 390 va 430px. Neo hai mep roi khoa box-sizing va
     min-width:0 cho tung o thi chu dai buoc phai xuong dong thay vi day khung. */
  .apph-loi {
    left: 2.7%; right: 2.3%; top: 72.3%; width: auto; height: 24.4%;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2%;
    margin: 0; padding: 0; list-style: none; box-sizing: border-box;
  }
  .apph-loi li {
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 2px; padding: 0 6% 12%;
    min-width: 0; box-sizing: border-box; overflow-wrap: anywhere;
    background: none; border: 0; box-shadow: none;
  }
  .apph-loi-ico { display: none; }
  .apph-loi li strong { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25; }
  .apph-loi li small  { font-size: 13px; color: rgba(255,255,255,.68); line-height: 1.25; }
}


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

   Trước đó header là băng logo phủ kín. Nay bỏ toàn bộ: không logo, không nút chuông.
   Điều hướng dồn hết xuống thanh dưới — khách có Trang chủ / Ví / Dán link / Đăng nhập /
   Đăng ký, người đã đăng nhập có thêm nút "Thêm" chứa Thông báo và mọi mục còn lại.

   Bỏ luôn phần bù chiều cao băng đã thêm cho hero và thẻ ví: không còn băng che nữa,
   để nguyên là chừa một khoảng trống to bằng băng ở đầu trang.

   Máy tính KHÔNG đổi: mọi thứ ở đây nằm trong @media (max-width: 767px).
   ========================================================================== */
@media (max-width: 767px) {
  body.is-wave-page .site-header { display: none; }

  .home-root > .apph-hero,
  .home-root > .apph-wallet { padding-top: 0; }
}


/* ==========================================================================
   Hero khách: ảnh nền SẠCH của chủ, nút do HTML vẽ

   Ảnh hero-khach.webp là ẢNH GỐC chủ gửi, KHÔNG vẽ thêm chữ hay nút nào vào. Mọi nút và
   chữ đều do HTML dựng và đặt lên trên. Tỉ lệ 1023:1537 khoá cứng theo ảnh.
   ========================================================================== */
@media (max-width: 767px) {
  .apph-hero { aspect-ratio: 1023 / 1537; }

  /* Ảnh của chủ KHÔNG có hai thứ này nên không được tự vẽ lên:
       - "Bảo mật tuyệt đối / An toàn 100%"  (.apph-hero-dau)
       - "Mua sắm hoàn tiền lên đến 20% mỗi đơn hàng"  (.apph-hero-title)
     Chỉ ẩn bằng CSS, KHÔNG xoá khỏi mã: khổ máy tính vẫn dùng hai khối này. */
  .apph-hero-dau,
  .apph-hero-title { display: none; }

  /* Nút do HTML vẽ, có nền và viền riêng vì ảnh không vẽ sẵn nút nào. */
  .apph-hero-nut  { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .apph-hero-nut > * { pointer-events: auto; }
  /* Nút đã VẼ TRONG ẢNH nên HTML chỉ đặt vùng bấm trong suốt chồng lên, không vẽ lại.
     Hình vẽ trong ảnh nằm ở: nút 74.2..79.7%, Face ID 84.9..90.4%, Đăng ký 93.5..96.7%.

     VÙNG BẤM NỚI RỘNG HƠN HÌNH VẼ (20/08/2026) — đo trên máy 390px: thẻ hero cao 562px nên
     5.5% chỉ ra 31px, còn nút Đăng ký 3.2% ra 18px. Cả ba đều thấp hơn ngưỡng vùng chạm tối
     thiểu 44px của Apple, bấm hay trượt.

     Cách nới: GIỮ NGUYÊN TÂM của từng nút để vùng bấm vẫn trùng khít hình vẽ, chỉ kéo dài
     đều ra hai phía. Ví dụ nút Đăng nhập tâm ở 76.95%, cần 7.8% (≈44px) nên lấy
     76.95 ∓ 3.9 = 73.05..80.85%.

     Vùng bấm rộng hơn hình vẽ là CÓ CHỦ Ý: ngón tay chạm hụt ra ngoài viền nút một chút vẫn
     ăn. Đã kiểm tra hai nút không chồng lên nhau (còn cách 2.9% ≈ 16px) và không đè lên dòng
     Đăng ký (cách 1.95% ≈ 11px). */
  .apph-hero-btn  { position: absolute; left: 15.2%; width: 69.6%; top: 72.85%; height: 8.2%;
                    min-height: 0; margin: 0; font-size: 0;
                    background: none !important; border: 0; box-shadow: none; }
  .apph-hero-btn svg, .apph-hero-btn i { display: none; }
  .apph-hero-face { position: absolute; left: 15.2%; width: 69.6%; top: 83.55%; height: 8.2%;
                    min-height: 0; margin: 0; font-size: 0;
                    background: none !important; border: 0; box-shadow: none; }
  .apph-hero-face svg, .apph-hero-face i { display: none; }

  /* Dòng "Chưa có tài khoản? Đăng ký ngay" là chữ nhỏ nên không đủ chỗ cho trọn 44px —
     nới từ 3.2% (18px) lên 4.5% (≈25px), vẫn chừa khoảng hở với nút Face ID phía trên. */
  .apph-hero-dangky { position: absolute; left: 0; width: 100%; top: 92.5%; height: 4.5%;
                      display: block; background: none; }
  .apph-loi { display: none; }
}


/* ==========================================================================
   Hero khách: ảnh chạm mép màn hình, dòng chào nằm trong ảnh (19/08/2026)
   ========================================================================== */
@media (max-width: 767px) {
  /* Chạm hẳn mép: khối này đang có lề 8px từ mục "đồng bộ lề trang chủ" phía trên,
     ghi đè về 0 riêng cho hero. */
  .home-root > .apph-hero {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  /* Dòng chào: nằm trong ảnh, to và rõ hơn. Có bóng đổ vì nền phía sau là ảnh
     thành phố nhiều chi tiết — không có bóng thì chữ lẫn vào các ô cửa sổ sáng. */
  .apph-hero-chao {
    position: absolute;
    left: 5%;
    top: 3.5%;
    margin: 0;
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    color: #FFFFFF;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 26px rgba(0, 0, 0, .5);
  }
}


/* ==========================================================================
   BỎ HẾT LỚP PHỦ TỐI trên ảnh hero khách (19/08/2026)

   .apph-hero-tranh::after đang phủ hai lớp gradient đen lên ảnh, chỗ đậm nhất tới 96%.
   Nó sinh ra hồi ảnh còn phải đỡ chữ "Bảo mật tuyệt đối" và "Mua sắm hoàn tiền 20%" ở
   nửa trái — phủ tối để chữ đọc được. Hai khối chữ đó nay đã ẩn, nên lớp phủ chỉ còn tác
   dụng làm tối ảnh và làm chìm hai nút đã vẽ sẵn.

   Tắt bằng display:none chứ không xoá luật: khổ máy tính và các bản bố cục cũ vẫn dùng.
   ========================================================================== */
@media (max-width: 767px) {
  .apph-hero-tranh::after { display: none; }
}

/* ==========================================================================
   ẢNH HERO THEO BUỔI (21/08/2026)

   Hai ảnh cùng khung cảnh Sài Gòn: hero-ngay.webp (trời xanh) và hero-dem.webp
   (lên đèn). Lớp .apph-hero--ngay do máy chủ gắn theo giờ Việt Nam 6h-18h, xem
   resources/views/layouts/partials/app-home-greet.blade.php.

   Chọn ở máy chủ chứ không bằng JS: đổi ảnh sau khi trang đã hiện sẽ nháy một nhịp
   ảnh sai, lại tải cả hai ảnh làm tốn dung lượng của khách.

   Đặt ở CUỐI TỆP và trong đúng media query của ảnh gốc: vừa hơn về độ ưu tiên (hai
   lớp class so với một), vừa đứng sau, nên chắc chắn thắng dù luật trên có đổi.
   ========================================================================== */
@media (max-width: 767px) {
  .apph-hero--ngay .apph-hero-tranh {
    background-image: url("/assets/images/hero-ngay.webp?v=d2");
  }
}