/* ============================================================================
   BẢN MOBILE — thiết kế riêng, KHÔNG dính gì tới bản desktop
   ============================================================================

   VÌ SAO TÁCH HẲN. Bản export Framer khai khung nhìn cố định 1440px và có 0
   media query; bố cục của nó là các khung định vị tuyệt đối tính cho đúng bề
   rộng đó. Đã thử tái dòng khung đó xuống 375px và đo được giới hạn thật: mỗi
   luật chung sửa được một chỗ thì làm hỏng hai chỗ khác (nới overflow → 22
   khung đè nhau; gỡ flex-basis → cột còn 0px; nới cao → ảnh trong thẻ xẹp còn
   24px). Không phải lỗi cài đặt — là giới hạn của cách tiếp cận.

   Nên: dưới 1200px ẩn hẳn #main, mobile.js dựng một trang mới vào <body>, và
   tệp này tạo kiểu cho trang đó. KHÔNG dùng chung một luật nào với desktop,
   không kế thừa gì từ CSS của Framer, token riêng mang tiền tố --mb-.

   NGÔN NGỮ THIẾT KẾ (khác hẳn desktop, cố ý):

     desktop                        mobile
     nền kem, chữ mực               nền XANH ĐẬM #2A3B45, chữ kem
     thẻ có viền, có lề hai bên     ảnh TRÀN VIỀN, chữ đặt đè lên ảnh
     lưới nhiều cột                 một cột dọc + các RAY CUỘN NGANG
     nút nằm trong luồng chữ        THANH THAO TÁC DÍNH ĐÁY, trong tầm ngón cái
     lịch là một lưới thẻ           lịch là THANH NGÀY như ứng dụng lịch

   Cùng bảng màu, cùng bộ ảnh, cùng hai bộ chữ — khác cách dùng.

   Token lấy từ chính bản export, không ước lượng:
     kem #FFFFF3 · mực #2E3028 · nhấn #799BAF · xanh đậm #2A3B45
     xanh nhạt #BCCCD1 · bạc hà #E7F5EF
     LC Sac Trial Regular (tiêu đề) · Zalando Sans SemiExpanded (thân chữ)
   ========================================================================= */

#tt-mobile { display: none; }

/* MỐC 1200px, KHÔNG PHẢI 900px.
 *
 * Bản export dựng cho đúng 1440px. Khung nhìn hẹp lại thì nó hỏng dần theo ba
 * cách độc lập nhau, và register.js chữa được hai cách rưỡi. Số chỗ CHỮ BỊ CẮT
 * đo được trên bản desktop:
 *
 *              trước khi sửa    sau khi sửa      còn lại là gì
 *   920px           13              —            (đã giao cho tablet)
 *   1010px           9              5            3 chỗ thật, cắt 30–128px
 *   1100px           —              5            3 chỗ thật, cắt 13–38px
 *   1200px           8              3            cả 3 chỉ 1–3px, không thấy được
 *   1366px           1              0
 *   1440px           0              0            chiều cao trang không đổi: 7250px
 *
 * Từ 1200px trở lên coi như sạch. Dưới đó vẫn còn ba chỗ bị cắt thật — mấy nút
 * hero và một dòng số liệu nằm trong hàng ngang không con nào co được — và
 * đuổi tiếp thì đúng vào ván bài dự án này đã chơi và đã thua một lần rồi (xem
 * chú thích đầu tệp: đã thử nới cả xâu khung, chữ vẫn cắt mà trang phình thêm
 * 1600px).
 *
 * Nên dải 901–1200px giao cho tầng tablet của trang này: nó co giãn thật, đo ở
 * 960px sạch cả ba phép (tràn khung nhìn 0, tràn khung xén 0, nét chữ bị xén
 * 0), và đọc tốt hơn hẳn một khung 1440px bị bóp lại. Mốc đặt ở chỗ ĐO ĐƯỢC LÀ
 * SẠCH, không đặt ở chỗ đoán là ổn. */
@media (max-width: 1200px) {

  /* Giấu bố cục desktop, KHÔNG xoá: React của Framer vẫn hydrate bình thường
     phía sau, và mobile.js đọc chữ từ chính cây DOM đó. Khi khung nhìn rộng
     trở lại thì nó hiện ngay, không phải dựng lại. */
  #main { display: none !important; }

  /* ------------------------------------------------------------- token */

  /* BA BẢNG MÀU, CHIA THEO THỨ CHỮ ĐANG NẰM LÊN — không phải theo khối.

     Bản đầu ở đây dựng một hệ TỐI (nền #2A3B45, chữ kem) vì nghĩ "dựa vào màu
     sắc" là được phép đảo tông. Sai: bản mẫu Framer là hệ SÁNG — nền kem
     #FFFFF3 chiếm gần hết diện tích, xanh #799BAF chỉ dùng làm DẢI, mực
     #2E3028, nhãn nhỏ #6D705D. Trang này nay dùng đúng bảng đó.

     Chia ba bảng vì trang có ba loại nền thật, và trộn chúng vào một bảng là
     nguồn gốc của mọi lỗi tương phản kiểu "đúng chỗ này, sai chỗ kia":

       nền  — nền kem của trang. Mặc định.
       dải  — khối xanh #799BAF cố ý nổi lên, đúng vai bản mẫu dùng nó.
       ảnh  — chữ đặt ĐÈ LÊN ẢNH. Luôn kem trên lớp phủ tối, bất kể tông
              chung của trang là sáng hay tối: ảnh nào cũng có thể có vùng
              trời trắng, nên chữ tối đặt lên là mất hút. Đây là chuyện đọc
              được chữ trên ảnh, không phải chuyện tông màu. */
  #tt-mobile {
    --mb-nen: #fffff3;
    --mb-muc: #2e3028;
    --mb-mo: rgba(46, 48, 40, 0.68);
    /* Trang trí thôi (dấu chấm ngăn, nét mảnh). KHÔNG dùng cho chữ: 40% mực
       trên nền kem chỉ đạt 2.4:1. */
    --mb-nhat: rgba(46, 48, 40, 0.4);
    --mb-vien: rgba(46, 48, 40, 0.14);
    --mb-nhan: #6d705d;
    /* Dùng làm màu chữ ở hai chỗ: số thứ tự đối tác 34px và số bước 26px.
       Cả hai đều là chữ lớn nên ngưỡng là 3.0, mà đo được 2.93 — hụt 0.07.
       Ngày 12/09 đã thử hạ còn 76% độ sáng cho đủ chuẩn rồi trả lại: ở cỡ ấy
       không ai đọc khó, còn màu đậm thì mất hẳn cái nhẹ của trang. Xem khối
       chú thích ở suaTuongPhan() trong register.js. */
    --mb-diem: #799baf;
    --mb-dam: #2a3b45;

    /* dải xanh — vai của #799BAF trong bản mẫu.
     *
     * CHỮ TRÊN DẢI XANH LÀ MỰC TỐI, không phải kem (đổi 12/09, anh Long duyệt).
     * Chữ kem trên #799BAF chỉ được 2,93–2,95:1, dưới ngưỡng 4.5 của chữ
     * thường. Mực thân của site #2E3028 cho 4,54:1 — đạt, và là màu đã có sẵn
     * trong bảng màu chứ không phải màu nghĩ thêm. Mực #2A3B45 (--mb-dam) chỉ
     * được 3,93:1 nên KHÔNG dùng ở đây.
     *
     * Trước đó chỉ chip đang chọn mới dùng mực tối, còn các mảng lớn
     * (.mb-voucher, .mb-ket, thanh dính, nhãn phụ trên thanh đầu) giữ chữ kem
     * với lý do "mảng nền chứ không phải chip, chữ ở đó cỡ lớn". Đo lại thì
     * không đúng: trong ba mảng ấy có 14px, 12px và 10,5px — đều là chữ
     * thường. Nay thống nhất cả dải.
     *
     * Bản desktop đổi cùng lúc, bằng latMucTrenXanh() trong register.js.
     *
     * NGOẠI LỆ DUY NHẤT: logo "TeeTee&Co." trên thanh đầu giữ màu kem
     * (.mb-dau đặt --mb-anh-muc). WCAG miễn trừ logotype, và nó cũng không
     * phải chữ để đọc — desktop cũng giữ kem, hai bản khớp nhau. */
    --mb-dai: #799baf;
    --mb-dai-muc: #fffff3;
    --mb-chon-muc: #fffff3;
    /* ĐẶC, không hạ độ mờ: phân cấp trong dải xanh làm bằng cỡ chữ và giãn
       chữ. Đo được mực 72% hoà lên nền xanh chỉ còn 2,92:1, mà tới 92% cũng
       mới 4,02:1 — không có khoảng nào vừa mờ vừa đạt. */
    --mb-dai-mo: #fffff3;
    --mb-dai-vien: rgba(255, 255, 243, 0.28);

    /* chữ trên ảnh */
    --mb-anh-muc: #fffff3;
    /* KEM ĐẶC, cùng lý do như --mb-dai-mo ở trên, và lần này có số đo từ chính
       ảnh thật. Đo bằng cách vẽ từng tấm ảnh ra canvas, lấy pixel nằm ngay
       dưới nét chữ, hoà lớp phủ .mb-the-phu/.mb-hero-phu ở đúng độ mờ của
       gradient tại vị trí đó, rồi mới tính tỉ lệ — đo theo màu nền CSS là vô
       nghĩa vì nền ở đây là một tấm ảnh.

       Ở 0.72: 15 chỗ trượt chuẩn AA, thấp nhất 2.78 ("Culture & Lifestyle
       Events" nằm trên vạt ảnh sáng màu). Chỉ cần bỏ độ mờ là còn 3 chỗ, thấp
       nhất 3.80. Cộng thêm nhịp lớp phủ mạnh hơn một chút ở dải giữa thì còn 0.

       Phân cấp vẫn còn nguyên, làm bằng cỡ chữ và giãn chữ: nhãn 10.5px giãn
       chữ, tên buổi 22px, tiêu đề hero 45px. */
    --mb-anh-mo: #fffff3;
    --mb-anh-nhat: rgba(255, 255, 243, 0.4);
    --mb-anh-vien: rgba(255, 255, 243, 0.22);
    --mb-anh-nen: #2a3b45;

    --mb-kaki: #bfb792;
    --mb-bac-ha: #e7f5ef;

    --mb-td: "LC Sac Trial Regular", Georgia, "Times New Roman", serif;
    --mb-than: "Zalando Sans SemiExpanded", system-ui, -apple-system, "Segoe UI", sans-serif;

    --mb-le: 22px;
    --mb-dau: 58px;   /* mobile.js đo lại và ghi đè */
    --mb-day: 74px;   /* mobile.js đo lại và ghi đè */

    display: block;
    background: var(--mb-nen);
    color: var(--mb-muc);
    font-family: var(--mb-than);
    font-size: 15px;
    line-height: 1.62;
    /* Chặn tràn ngang mà không biến khối này thành khung cuộn: clip không tạo
       hộp cuộn nên scrollIntoView vẫn đi thẳng lên khung nhìn. */
    overflow-x: clip;
    /* Chừa chỗ cho thanh thao tác dính đáy, cộng vùng an toàn của máy có
       thanh vuốt (iPhone). Thiếu dòng này thì thanh che mất dòng cuối. */
    padding-bottom: calc(var(--mb-day) + env(safe-area-inset-bottom, 0px));
  }

  /* Đặt lại trong phạm vi #tt-mobile. Trang này nằm cạnh #main nên vẫn hứng
     mọi luật toàn cục của Framer; khai lại cho chắc thay vì đoán cái gì lọt
     qua.

     BỌC :where() QUANH #tt-mobile. Đây là chỗ đã tự bắn vào chân một lần:
     viết thẳng "#tt-mobile button" là độ cụ thể (1,0,1), mà mọi luật thành
     phần bên dưới chỉ là một lớp (0,1,0) — nên khối ĐẶT LẠI thắng hết. Đo
     được: chip lọc mất viền và mất nền, ô ngày đang chọn không sáng lên, chữ
     dẫn mất cả margin. :where() đóng góp 0 vào độ cụ thể nên các luật này rơi
     xuống mức phần tử (0,0,1): vẫn chặn được luật phần tử của Framer (mobile.css
     nạp sau nên thắng khi hoà), mà lớp .mb-* nào cũng đè lên được. */
  :where(#tt-mobile) *,
  :where(#tt-mobile) *::before,
  :where(#tt-mobile) *::after { box-sizing: border-box; }

  /* [hidden] thì ngược lại, PHẢI mạnh. Luật của trình duyệt là
     "[hidden] { display: none }" — độ cụ thể (0,1,0), đúng bằng một lớp, nên
     mọi luật lớp đặt display nạp sau đều thắng nó: đã đo, lọc lịch đặt
     el.hidden = true, JS đếm ra 0 thẻ mà màn hình vẫn hiện đủ 6 thẻ vì
     ".mb-the { display: block }" ăn đứt. */
  #tt-mobile [hidden] { display: none !important; }

  :where(#tt-mobile) :is(p, ul, li, figure) { margin: 0; padding: 0; list-style: none; }
  :where(#tt-mobile) img { display: block; max-width: 100%; }
  :where(#tt-mobile) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }
  :where(#tt-mobile) a { color: inherit; text-decoration: none; }

  /* ----------------------------------------------------------- chữ nghĩa

     Giãn dòng tính theo TIẾNG VIỆT, không theo chữ Latin trần. Đo trên chính
     trang này: Playfair ở cỡ 41px có nét chữ cao 55px — tỉ lệ 1,33 — vì dấu
     chồng (ế ộ ữ) ăn thêm chỗ phía trên. Giãn dòng 1.1 kiểu Latin thì hai dòng
     liền nhau chồng lấn 10px. */
  :where(#tt-mobile) :is(h1, h2, h3) {
    font-family: var(--mb-td);
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.012em;
  }
  :where(#tt-mobile) h1 { font-size: clamp(40px, 12vw, 58px); line-height: 1.14; }
  :where(#tt-mobile) h2 { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.22; }
  :where(#tt-mobile) h3 { font-size: 22px; line-height: 1.3; }

  .mb-nhan {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mb-nhan);
    line-height: 1.5;
  }

  .mb-khoi { padding: 64px var(--mb-le); }
  /* Khối mở đầu bằng ảnh tràn viền thì bỏ đệm trên: đệm dưới của khối trước
     cộng đệm trên của khối này thành 128px nền trống trước một tấm ảnh chạy
     hết bề ngang — đọc ra như thiếu nội dung chứ không như khoảng thở. */
  .mb-khoi-tran { padding-top: 0; }
  .mb-tieu { margin-bottom: 26px; }
  .mb-tieu h2 { margin-top: 10px; }
  .mb-dan { margin-top: 14px; color: var(--mb-mo); max-width: 34em; }

  /* Nhảy tới một khối bằng liên kết #: thanh đầu dính che mất dòng đầu nếu
     không chừa chỗ. --mb-dau do mobile.js đo — chiều cao thanh đầu phụ thuộc
     cỡ chữ hệ thống của khách, không đoán cứng được. */
  #tt-mobile [id] { scroll-margin-top: calc(var(--mb-dau) + 12px); }

  /* =====================================================  thanh đầu  ===== */

  /* Cố định chứ không dính: trên hero nó trong suốt để ảnh chạy hết khung
     nhìn, cuộn qua hero mới đặc lại. Dính (sticky) thì phải nằm trong luồng và
     sẽ đẩy hero xuống. */
  .mb-dau {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* ĐỆM LỆCH 13/15, KHÔNG PHẢI 14/14 — cố ý, và đây là lý do.
     *
     * Thanh tiến độ 2px (thêm 12/09) nằm ở mép dưới thanh đầu, nên DẢI XANH
     * THẤY ĐƯỢC không phải 50px mà là:
     *
     *     50 (thanh) − 1 (viền dưới) − 2 (thanh tiến độ) = 47px
     *
     * `align-items: center` căn nội dung vào giữa HỘP ĐỆM. Với 14/14 thì tâm
     * hộp đệm trùng tâm hộp viền 50px — tức thấp hơn tâm dải xanh thấy được
     * 1px, và cả logo lẫn nhãn phụ cùng bị trĩu xuống 1px. Anh Long nhìn ra
     * ngày 13/09.
     *
     * Dịch 1px bằng đệm chứ không bằng `top` của từng phần tử: sửa ở một chỗ
     * thì logo và nhãn phụ cùng đi, không lệch nhau. Nhích `top` của riêng logo
     * thì nó lại lệch 1px so với nhãn bên phải — mà mắt so hai vật cạnh nhau
     * nhạy hơn so với mép thanh nhiều.
     *
     * Tổng đệm vẫn 28px nên thanh vẫn đúng 50px, không đụng gì tới phần dưới.
     * Đổi độ dày thanh tiến độ hay chiều cao thanh thì phải chia lại cặp số
     * này. */
    padding: 13px var(--mb-le) 15px;
    padding-top: calc(13px + env(safe-area-inset-top, 0px));
    color: var(--mb-anh-muc);
    /* Không để trong suốt hẳn ngay cả trên hero: ảnh hero có vùng trời sáng và
       chữ "TeeTee&Co." màu kem đặt lên đó thì mất tương phản. Một lớp chuyển
       mờ luôn có sẵn giữ chữ đọc được với bất kỳ ảnh nào, mà vẫn không thành
       một thanh đặc che mất ảnh. */
    background: linear-gradient(to bottom, rgba(42, 59, 69, 0.62), rgba(42, 59, 69, 0));
    border-bottom: 1px solid transparent;
    transition: background 0.28s ease, border-color 0.28s ease;
  }
  .mb-dau[data-dac="1"] {
    /* Gần đặc hẳn. 0.94 vẫn để chữ chạy phía dưới đọc được lờ mờ — trông như
       lỗi hiển thị chứ không như hiệu ứng, và backdrop-filter không phải máy
       nào cũng có. */
    /* Đặc lại thì thành DẢI XANH, đúng thanh điều hướng của bản mẫu. */
    /* 25/09 (cuộn giật): bỏ backdrop-filter. Nền 0.985 đã gần đặc nên lớp mờ
       phía sau không ai thấy, mà máy phải làm mờ lại MỖI KHUNG HÌNH khi cuộn —
       thứ đắt nhất trên điện thoại. Nền đặc hẳn cho khỏi lệch màu. */
    background: rgb(121, 155, 175);
    border-bottom-color: var(--mb-dai-vien);
  }
  /* Thanh cho biết đang lướt tới đâu — cùng cách làm với bản desktop, xem khối
     chú thích ở fix.css. Nét mực trên nền xanh của thanh khi nó đã đặc lại.
     Lúc thanh còn trong suốt (chỉ ở ngay đầu trang, trên ảnh hero) thì tiến độ
     gần bằng 0 nên chẳng có gì để nhìn — không cần lo tương phản ở đó. */
  .mb-dau::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--mb-chon-muc);
    transform: scaleX(var(--tt-tien-do, 0));
    transform-origin: left center;
    pointer-events: none;
  }
  /* NÉT CHỮ CĂN GIỮA, KHÔNG PHẢI HỘP CHỮ.
     Thanh cao 50px, `align-items: center` căn đúng hộp — đo được hộp lệch tâm
     0,5px. Nhưng nét mực thì lệch LÊN 2,5px: "TeeTee&Co." không có chữ nào thò
     xuống, mà hộp vẫn chừa chỗ cho đuôi chữ, nên khối chữ bị đẩy lên. Nhãn bên
     phải chỉ lệch 0,5px, thành ra hai thứ còn lệch nhau 2px — nhìn ra ngay.
     Cùng một bệnh với ký tự × của nút đóng: căn hộp đúng, mắt vẫn thấy sai.

     Bù bằng em chứ không bằng px, để còn đúng nếu sau này đổi cỡ chữ:
     2,5 / 21 = 0,119em. Con số này gắn với phông LC Sac; đổi phông tiêu đề thì
     phải đo lại. Không dùng `text-box: trim-both` vì Safari và Chrome hỗ trợ
     lệch pha nhau — thà lệch giống nhau ở mọi máy còn hơn đúng ở một nửa.

     Phép bù này chỉ lo phần LỆCH TRONG HỘP CHỮ do phông gây ra. Việc dải xanh
     thấy được ngắn hơn hộp thanh 3px (viền + thanh tiến độ) là chuyện khác, đã
     xử ở `padding` của .mb-dau — xem chú thích ở đó. Hai phép bù độc lập nhau:
     một cái co theo cỡ chữ, một cái không. */
  .mb-dau-ten {
    font-family: var(--mb-td);
    font-size: 21px;
    line-height: 1;
    position: relative;
    top: 0.12em;
  }
  .mb-dau-phu {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mb-dai-mo);
    /* Ẩn khi thanh còn trong suốt: trên ảnh hero nó rơi vào vùng sáng và mất
       tương phản, mà đây chỉ là chữ phụ. */
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  .mb-dau[data-dac="1"] .mb-dau-phu { opacity: 1; }

  /* ==========================================================  hero  ===== */

  /* svh chứ không vh: trên iOS thanh địa chỉ co giãn làm 100vh nhảy vài chục
     px mỗi lần cuộn — README đã ghi một lần vì đúng lỗi này. Dòng vh phía trên
     là bản lùi cho trình duyệt chưa biết svh. */
  .mb-hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
  }
  .mb-hero img { width: 100%; height: 100%; object-fit: cover; }
  /* Mốc cho IntersectionObserver: 1px ở 62% chiều cao hero. Xem chú thích
     theoDoiHero() trong mobile.js về lý do quan sát một mốc thay vì cả khối. */
  /* 34% chứ không phải 62%: thanh đầu phải đặc lại TRƯỚC khi chữ hero (neo ở
     đáy hero) trôi lên tới nó. Đặt mốc ở 62% thì có một quãng chữ hero chạy
     dưới thanh trong suốt và đè lên chữ "TeeTee&Co." — đã thấy trên ảnh chụp
     giữa lúc cuộn. */
  .mb-moc { position: absolute; top: 34%; left: 0; width: 1px; height: 1px; }
  .mb-hero-phu {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(42, 59, 69, 0.96) 4%, rgba(42, 59, 69, 0.76) 36%, rgba(42, 59, 69, 0.12) 68%, rgba(42, 59, 69, 0.42) 100%);
  }
  /* z-index BẮT BUỘC: chữ và lớp phủ nằm cùng khung, cùng z-index tự động, nên
     thứ tự vẽ theo thứ tự DOM. Thiếu dòng này lớp phủ vẽ đè lên tiêu đề — đã
     đo, chữ #FFFFF3 hiện ra xám mờ. */
  .mb-hero-chu {
    position: absolute;
    z-index: 1;
    color: var(--mb-anh-muc);
    left: var(--mb-le);
    right: var(--mb-le);
    bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }
  /* Nhãn nhỏ .mb-nhan dùng chung cho cả trang, mà mặc định của nó là màu nhãn
     TRÊN NỀN KEM (#6D705D). Trong hero và trên thẻ thì nó nằm ĐÈ LÊN ẢNH —
     để nguyên là chữ olive sẫm trên lớp phủ tối, mất hút hẳn. Đã thấy đúng
     cảnh đó ngay lượt đo đầu sau khi lật tông: dòng "TEETEE&CO. CLUB ·
     SEPTEMBER 2026" chìm hoàn toàn dù lớp phủ chỗ đó đã tối tới 0.72.
     Cứ chỗ nào chữ nằm trên ảnh thì kéo về bảng ảnh. */
  .mb-hero-chu .mb-nhan,
  .mb-the-duoi .mb-nhan { color: var(--mb-anh-mo); }
  .mb-hero-chu h1 { margin: 12px 0 0; }
  .mb-hero-dan { margin-top: 18px; color: var(--mb-anh-mo); font-size: 15.5px; max-width: 30em; }

  .mb-cuon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mb-anh-mo);
  }
  .mb-cuon::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, var(--mb-anh-vien), transparent);
  }

  /* MÁY XOAY NGANG. min-height:560px ở trên là để hero không bị bẹp trên màn
     rất thấp — nhưng xoay ngang thì nó làm đúng điều ngược lại: khung nhìn chỉ
     còn 375px cao mà hero vẫn 560px, tức cao gấp rưỡi màn hình. Đo được ở
     812×375: khối chữ hero chạy từ y=189 tới y=526, tràn xuống dưới đáy màn
     hình 151px — tiêu đề bị cắt ngang, phần mô tả và dòng "cuộn xuống" nằm hẳn
     ngoài màn hình, khách không thấy gì ngoài nửa dòng chữ.

     Màn thấp thì bỏ sàn chiều cao đi: hero bằng đúng khung nhìn, chữ neo đáy
     nên nằm gọn. Bỏ luôn dòng "cuộn xuống" — nó là chi tiết trang trí, và ở
     khổ này mỗi pixel chiều cao đều phải dành cho chữ thật. */
  @media (max-height: 520px) {
    .mb-hero { min-height: 0; }
    .mb-hero-chu { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    .mb-hero-dan { margin-top: 12px; font-size: 14px; }
    .mb-cuon { display: none; }
  }

  /* ========================================================  số liệu  ==== */

  .mb-so {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 34px var(--mb-le) 6px;
  }
  .mb-so > div { border-top: 1px solid var(--mb-vien); padding-top: 14px; }
  /* Ô số liệu dùng CHỮ THÂN, không dùng font tiêu đề — theo đúng bản mẫu
     (Zalando 34px cho "04", "48", "∞"). Không chỉ là chuyện giống mẫu: ô thứ
     ba là ký tự ∞ (U+221E), mà LC Sac Trial không có glyph đó. Để font tiêu
     đề thì riêng ô ấy rơi sang font dự phòng — một con số lệch kiểu chữ giữa
     hàng ba ô. */
  .mb-so b {
    display: block;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.25;
  }
  .mb-so span {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--mb-mo);
  }

  /* =========================================================  ray ngang  =

     Mẫu dùng lại ba chỗ: thanh ngày, chip nhóm, băng đối tác. Lề âm để ray
     chạm mép màn hình còn con đầu/con cuối vẫn thẳng hàng với chữ — cuộn ngang
     mà bị thụt vào hai bên thì trông như lỗi chứ không như còn nội dung. */
  .mb-ray {
    display: flex;
    gap: 10px;
    margin-left: calc(var(--mb-le) * -1);
    margin-right: calc(var(--mb-le) * -1);
    padding: 2px var(--mb-le);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* BẮT BUỘC đi kèm scroll-snap. Điểm neo của snap tính từ mép hộp cuộn chứ
       không tính từ mép phần đệm, nên trình duyệt tự kéo con đầu tiên áp sát
       mép trái và ăn mất 22px lề — đo được: chữ "Tất cả" bị cắt ở x=0 ngay khi
       trang vừa dựng xong, chưa ai vuốt gì. */
    scroll-padding-inline: var(--mb-le);
  }
  .mb-ray::-webkit-scrollbar { display: none; }
  .mb-ray > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* ---------------------------------------------------------- thanh ngày */

  .mb-ngay-ray { padding-top: 4px; padding-bottom: 4px; }
  .mb-ngay {
    width: 62px;
    padding: 12px 0;
    text-align: center;
    border: 1px solid var(--mb-vien);
    border-radius: 4px;
    color: var(--mb-mo);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  .mb-ngay b {
    display: block;
    font-family: var(--mb-td);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.25;
  }
  .mb-ngay span {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .mb-ngay[aria-pressed="true"] {
    background: var(--mb-dai);
    border-color: var(--mb-dai);
    color: var(--mb-chon-muc);
  }
  /* Nhãn phụ dùng ĐÚNG màu chữ chính, không làm mờ đi.
     Đo được: rgba(46, 48, 40, 0.72) hoà lên nền xanh chỉ còn 2,92:1, mà chữ
     này 10,5px — chữ nhỏ, ngưỡng 4.5. Thử tới độ mờ 0.92 vẫn chỉ 4,02:1; phải
     đục hẳn mới đạt 4,54:1. Thứ bậc thị giác ở đây do CỠ CHỮ gánh (10,5px so
     với 15px) chứ không phải do độ mờ. */
  .mb-ngay[aria-pressed="true"] span { color: var(--mb-chon-muc); }

  /* Nhãn tháng giữa dải ngày khi lịch trải qua nhiều tháng (25/09: mở thêm
     buổi tháng 11). Chữ đứng dọc để không chiếm bề ngang của một ô ngày. */
  .mb-ngay-thang {
    align-self: stretch;
    display: grid;
    place-items: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 0 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--mb-mo);
  }

  /* Ô "Tất cả": cùng chiều cao ô ngày nhưng một dòng chữ, canh giữa. */
  .mb-ngay-tat {
    display: grid;
    place-items: center;
    width: auto;
    min-width: 76px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.2;
  }

  /* ------------------------------------------------------------ chip nhóm */

  .mb-chip-ray { margin-top: 12px; }
  .mb-chip {
    /* 12px đệm cho chip cao 41px. Chip là thứ khách bấm nhiều nhất trên trang
       này; 9px cho ra 35px, hụt so với mức ngón tay chạm gọn. */
    padding: 12px 16px;
    border: 1px solid var(--mb-vien);
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--mb-mo);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  /* Chip đang chọn là DẢI XANH — đúng cách bản mẫu tô ô "Tất cả" đang chọn.
     Thống nhất với ô ngày đang chọn: trên trang này "đang chọn" luôn là nền
     xanh, chỉ khác hình viên thuốc hay ô vuông. */
  .mb-chip[aria-pressed="true"] {
    background: var(--mb-dai);
    border-color: var(--mb-dai);
    color: var(--mb-chon-muc);
  }

  /* ==========================================================  thẻ buổi  =

     Ảnh tràn viền, chữ đặt đè lên ảnh. Đây là chỗ khác desktop rõ nhất: bản
     desktop dùng thẻ có viền nằm trong lưới; ở đây mỗi buổi chiếm trọn bề
     ngang màn hình như một trang tạp chí. */
  .mb-the-ds {
    margin: 26px calc(var(--mb-le) * -1) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mb-the {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Nền chờ ảnh: kaki của bản mẫu, đúng màu ô ảnh chưa tải ở đó. */
    background: var(--mb-kaki);
  }
  .mb-the img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .mb-the:active img { transform: scale(1.03); }
  .mb-the-phu {
    position: absolute;
    inset: 0;
    /* Nhịp giữa nâng 0.6 -> 0.7 và đẩy mốc nhạt 70% -> 74%: đúng dải mà
       nhãn loại và dòng giờ/địa điểm nằm lên. Xem số đo ở --mb-anh-mo. */
    background: linear-gradient(to top, rgba(42, 59, 69, 0.94) 6%, rgba(42, 59, 69, 0.7) 40%, rgba(42, 59, 69, 0.1) 74%, rgba(42, 59, 69, 0.34) 100%);
  }
  .mb-the-tren {
    position: absolute;
    z-index: 1;
    top: 18px;
    left: var(--mb-le);
    right: var(--mb-le);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }
  .mb-the-ngay {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 8px 12px;
    background: var(--mb-anh-muc);
    color: var(--mb-anh-nen);
    border-radius: 3px;
  }
  .mb-the-ngay b { font-family: var(--mb-td); font-weight: 400; font-size: 19px; line-height: 1; }
  .mb-the-ngay span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  /* Nền xanh đậm chứ không phải xanh nhấn. #2E3028 trên #799BAF chỉ đạt tỉ lệ
     tương phản 4.0:1 — dưới mức 4.5:1 cần cho chữ nhỏ — và nhãn này nằm đè lên
     ẢNH, có thẻ ảnh nền trời sáng trắng khiến nó chìm hẳn. Đảo lại thành nền
     tối chữ kem: 12:1, đọc được trên bất kỳ ảnh nào, và tự phân biệt với ô
     ngày màu kem ở góc đối diện. */
  /* Tem này bên desktop có nền #799BAF chứ không phải xanh đậm — đo được.
     Lấy đúng nền ấy, NHƯNG GIỮ CHỮ TỐI: desktop để chữ kem trên nền đó, chỉ
     được 2,93:1 ở cỡ 9px. Chép y nguyên là kéo tem mobile từ 11,52:1 tụt xuống
     dưới ngưỡng. Chữ #2E3028 trên #799BAF cho 4,54:1 — cùng lối đã áp cho chip
     đang chọn. */
  .mb-the-pick {
    padding: 8px 11px;
    background: var(--mb-diem);
    color: var(--mb-muc);
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .mb-the-duoi {
    position: absolute;
    z-index: 1;
    left: var(--mb-le);
    right: var(--mb-le);
    bottom: 20px;
  }
  .mb-the-duoi { color: var(--mb-anh-muc); }
  .mb-the-duoi h3 { margin: 8px 0 10px; }
  .mb-the-meta { font-size: 13px; color: var(--mb-anh-mo); }
  /* Dấu chấm giữa đặt ở ::before của phần tử SAU, không phải ::after của phần
     tử trước — xuống hàng thì dấu đi theo chứ không mồ côi cuối dòng trên. */
  .mb-the-meta span + span::before { content: " · "; color: var(--mb-anh-nhat); }
  .mb-the-chan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mb-anh-vien);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mb-anh-mo);
  }
  .mb-the-chan[data-het="1"] { color: #e8b48c; }
  /* Mũi tên là SVG chứ không phải ký tự "→" — xem ghi chú ở veMuiTen() trong
     mobile.js. Bỏ font-size vì trong này không còn chữ nào; line-height: 0 để
     không còn khoảng chân chữ lọt vào ô lưới. */
  .mb-the-mui {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mb-anh-vien);
    border-radius: 999px;
    line-height: 0;
    color: var(--mb-anh-muc);
  }

  .mb-the-mui svg { display: block; }

  /* Không có buổi nào khớp bộ lọc. Trạng thái rỗng phải nói được cách thoát
     ra, nếu không khách tưởng trang hỏng. */
  .mb-rong {
    margin: 26px var(--mb-le) 0;
    padding: 30px 22px;
    border: 1px dashed var(--mb-vien);
    border-radius: 6px;
    text-align: center;
    color: var(--mb-mo);
  }
  .mb-rong button {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 20px;
    border: 1px solid var(--mb-muc);
    border-radius: 999px;
    color: var(--mb-muc);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* =========================================================  đối tác  === */

  .mb-dt-ray { margin-top: 24px; padding-bottom: 6px; }
  .mb-dt {
    width: min(78vw, 320px);
    padding: 26px 22px 28px;
    border: 1px solid var(--mb-vien);
    border-radius: 6px;
    background: rgba(46, 48, 40, 0.03);
    white-space: normal;
  }
  .mb-dt-stt {
    font-family: var(--mb-td);
    font-size: 34px;
    line-height: 1;
    color: var(--mb-diem);
  }
  .mb-dt .mb-nhan { display: block; margin-top: 18px; }
  .mb-dt h3 { margin: 6px 0 10px; font-size: 21px; }
  .mb-dt p { color: var(--mb-mo); font-size: 13.5px; }

  /* Thẻ đối tác nay mở ra hồ sơ. Trên điện thoại không có con trỏ để báo hiệu
     bấm được, nên phải nói ra bằng chữ — nếu không thì cả năm thẻ trông y hệt
     phần chữ tĩnh bên cạnh và không ai thử chạm. */
  .mb-dt[data-tt-dt] { cursor: pointer; }
  .mb-dt-mo {
    margin-top: 16px !important;
    /* --mb-diem (#799BAF) trên nền thẻ chỉ đạt 2.78:1 — dưới chuẩn 4.5 cho chữ
       12px. Dùng --mb-dam đã có sẵn trong bảng màu (10.94:1) thay vì nghĩ ra
       một mã màu mới: cùng họ xanh, và không thêm một màu lạc nữa vào hệ. */
    color: var(--mb-dam) !important;
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  /* KHÔNG dùng ký tự thoát trong content. Dòng cũ viết `content: " \2192"`
     nhưng script sinh ra nó là chuỗi Python thường, nên `\21` bị hiểu là số bát
     phân (= U+0011, một ký tự điều khiển) và "92" rơi lại thành chữ. Trên máy
     khách nó hiện ra thành ô vuông rồi "92": "XEM HỒ SƠ ⌷92".
     Bỏ hẳn mũi tên — chữ "Xem hồ sơ" tự nó đã đủ nghĩa, và không còn gì để hỏng. */
  .mb-dt[data-tt-dt]:focus-visible {
    outline: 2px solid var(--mb-dam);
    outline-offset: 3px;
  }

  .mb-dem {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mb-mo);
  }

  /* ============================================================  café  === */

  /* Ảnh tràn viền chạy hết bề ngang, chữ nằm dưới trên nền xanh. */
  .mb-tran { margin: 0 calc(var(--mb-le) * -1); }
  .mb-tran img { width: 100%; height: 100%; object-fit: cover; }
  .mb-ti-3-2 { aspect-ratio: 3 / 2; overflow: hidden; }
  .mb-ti-4-3 { aspect-ratio: 4 / 3; overflow: hidden; }

  .mb-gio { margin-top: 26px; }
  .mb-gio > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--mb-vien);
  }
  .mb-gio b { font-family: var(--mb-td); font-weight: 400; font-size: 25px; }

  .mb-ghi {
    margin-top: 22px;
    padding: 18px 18px 18px 20px;
    border-left: 2px solid var(--mb-diem);
    background: var(--mb-bac-ha);
    font-size: 13.5px;
    line-height: 1.62;
  }
  /* Ghi chú thứ hai trở đi là lời rào của bản dựng ("giờ trên là nội dung
     demo"), không phải thông tin khách cần. Cùng kiểu hộp thì hai câu nặng
     ngang nhau — hạ xuống chữ nhỏ, mờ, không hộp. */
  .mb-ghi ~ .mb-ghi {
    margin-top: 14px;
    padding: 0;
    border-left: 0;
    background: none;
    font-size: 12px;
    color: var(--mb-mo);
  }

  /* ========================================================  quyền lợi  == */

  .mb-hang-ray { margin-top: 22px; }
  .mb-hang {
    padding: 12px 18px;
    border: 1px solid var(--mb-vien);
    border-radius: 999px;
    font-size: 13px;
    color: var(--mb-mo);
  }
  /* Trạng thái "đang chọn" phải theo aria-pressed, không gán cứng vào
     :first-child nữa — chip hạng nay bấm đổi được, mà tô đậm mãi cái đầu thì
     bấm sang hạng khác vẫn thấy hạng cũ đang sáng.
     Giữ :first-child cho nhánh dự phòng (khi không lấy được dữ liệu hạng thì
     chip vẫn là nhãn trần, không có aria-pressed). */
  .mb-hang[aria-pressed="true"],
  .mb-hang:first-child:not([aria-pressed]) {
    background: var(--mb-dai);
    border-color: var(--mb-dai);
    color: var(--mb-chon-muc);
  }
  .mb-hang[aria-pressed] { cursor: pointer; }
  .mb-hang[aria-pressed]:focus-visible {
    outline: 2px solid var(--mb-dam);
    outline-offset: 3px;
  }

  /* Khối xanh duy nhất trong mục này: voucher là quyền lợi cụ thể nhất, đổi
     sang dải xanh để nó tự nổi lên giữa nền kem mà không cần thêm chữ nhấn
     mạnh nào. */
  .mb-voucher {
    margin-top: 26px;
    padding: 28px 22px 30px;
    background: var(--mb-dai);
    color: var(--mb-dai-muc);
    border-radius: 6px;
  }
  .mb-voucher .mb-nhan { color: var(--mb-dai-mo); }
  .mb-voucher h3 { margin: 10px 0 12px; }
  .mb-voucher p { color: var(--mb-dai-mo); font-size: 14px; }
  .mb-voucher .mb-them {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mb-dai-vien);
    font-size: 12px;
    color: var(--mb-dai-mo);
  }

  /* ==========================================================  ba bước  == */

  .mb-buoc > div {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0 14px;
    padding: 22px 0;
    border-top: 1px solid var(--mb-vien);
  }
  .mb-buoc .mb-stt {
    grid-row: 1 / 3;
    font-family: var(--mb-td);
    font-size: 26px;
    line-height: 1.15;
    color: var(--mb-diem);
  }
  .mb-buoc h3 { font-size: 20px; }
  .mb-buoc p { margin-top: 6px; color: var(--mb-mo); font-size: 14px; }

  /* ============================================================  kết  ==== */

  /* Dải xanh khép trang: cả trang nền kem, một dải màu ở cuối là nhịp nghỉ
     trước chân trang và làm nút hành động cuối nổi bật nhất trang. */
  .mb-ket {
    background: var(--mb-dai);
    color: var(--mb-dai-muc);
    text-align: center;
    padding: 72px var(--mb-le) 76px;
  }
  .mb-ket .mb-nhan { color: var(--mb-dai-mo); }
  .mb-ket h2 { margin: 12px 0 26px; }
  /* Nút trên dải xanh: nền xanh đậm #2A3B45 chữ kem cho 11.5:1. Để nền kem
     chữ mực thì nút lẫn vào chính nền trang phía trên nó. */
  /* NỀN KEM, KHÔNG PHẢI XANH ĐẬM.
     Nút này nằm TRÊN dải xanh #799BAF, mà nền cũ là #2A3B45 — hai màu xanh
     chồng nhau, một cái rất tối, nhìn nặng và đục. Bản desktop không làm vậy:
     đo được nút cùng vai trò bên đó ("CHỌN HOẠT ĐỘNG CỦA BẠN") có nền TRẮNG và
     chữ #2E3028. Đây là sửa cho khớp bản xuất, không phải đổi theo gu.
     Tương phản tăng từ 11,52:1 lên ~13:1. */
  .mb-ket-nut {
    display: inline-block;
    padding: 18px 34px;
    background: var(--mb-nen);
    color: var(--mb-muc);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* =======================================================  chân trang  == */

  .mb-chan { padding: 56px var(--mb-le) 64px; }
  .mb-chan-cot + .mb-chan-cot { margin-top: 30px; }
  .mb-chan .mb-nhan { display: block; margin-bottom: 6px; }
  .mb-chan ul { display: flex; flex-direction: column; }
  /* Đệm dọc để mỗi liên kết cao 45px thay vì đúng 17px của một dòng chữ. Thẻ
     <a> nội dòng chỉ cao bằng nét chữ, mà đây là số điện thoại và địa chỉ —
     những thứ khách bấm thật trên điện thoại.

     min-width cho vùng bấm đủ 44px cả bề ngang. Đo được "Zalo" chỉ rộng 31px —
     chữ ngắn nhất trong danh sách — nên vùng bấm hụt so với mức 44×44 thường
     lấy làm chuẩn cho đầu ngón tay. Vì các thẻ này nội dòng-khối và gạch chân
     vẽ dưới NÉT CHỮ chứ không dưới cả hộp, nới hộp ra không kéo dài gạch chân:
     đo lại sau khi nới thì hộp 44px mà nét chữ vẫn đúng 31px. */
  .mb-chan ul a {
    display: inline-block;
    min-width: 44px;
    padding: 11px 0;
    font-size: 14.5px;
    color: var(--mb-muc);
    text-decoration: underline;
    text-decoration-color: var(--mb-vien);
    text-underline-offset: 4px;
  }
  .mb-chan-ban-quyen {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--mb-vien);
    font-size: 11.5px;
    color: var(--mb-mo);
  }

  /* ==============================================  thanh thao tác đáy  ===

     Việc trang này cần khách làm là chọn một buổi. Trên điện thoại, chỗ ngón
     cái với tới dễ nhất là đáy màn hình — nên nút đó nằm luôn ở đó thay vì bắt
     khách cuộn ngược lên tìm. Chỉ hiện sau khi qua khỏi hero (trên hero thì
     tiêu đề mới là thứ cần đọc). */
  .mb-thanh {
    position: fixed;
    z-index: 55;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px var(--mb-le);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    /* Dải xanh, cùng vai với thanh đầu khi đặc. */
    /* Nền đặc, không backdrop-filter — cùng lý do với .mb-dau (25/09). */
    background: rgb(121, 155, 175);
    color: var(--mb-dai-muc);
    border-top: 1px solid var(--mb-dai-vien);
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mb-thanh[data-hien="1"] { transform: none; }
  .mb-thanh-chu { min-width: 0; }
  .mb-thanh-chu b {
    display: block;
    font-family: var(--mb-td);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
  }
  .mb-thanh-chu span {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mb-dai-mo);
  }
  /* Cùng lý do với .mb-ket-nut: nút này cũng nằm trên dải xanh #799BAF. */
  .mb-thanh-nut {
    flex: 0 0 auto;
    padding: 15px 22px;
    background: var(--mb-nen);
    color: var(--mb-muc);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  /* Phễu đăng ký mở ra là thanh này biến mất: nó nằm dưới lớp phủ nên bấm
     không được, để lại thì chỉ là một vệt mờ ở đáy. */
  #tt-mobile.mb-dang-mo .mb-thanh,
  #tt-mobile.mb-dang-mo .mb-dau { transform: translateY(105%); opacity: 0; pointer-events: none; }
  #tt-mobile.mb-dang-mo .mb-dau { transform: translateY(-105%); }

  /* Khách tắt hiệu ứng chuyển động trong cài đặt máy thì bỏ hết chuyển động,
     chỉ giữ đóng/mở. */
  @media (prefers-reduced-motion: reduce) {
    #tt-mobile *,
    #tt-mobile *::before,
    #tt-mobile *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================  tablet  =====

   600–1200px vẫn dùng trang này (bố cục desktop cần tới 1440px). Một cột kéo
   giãn ra 768px cho dòng chữ dài ~95 ký tự, quá dài để đọc trôi. Ở khổ này:
   thẻ buổi hai cột, chữ giới hạn bề rộng, chân trang ba cột. Không đổi màu,
   không đổi kiểu chữ — cùng thiết kế đó đặt vào khung rộng hơn. */
@media (min-width: 600px) and (max-width: 1200px) {
  #tt-mobile { --mb-le: 44px; font-size: 16px; }
  #tt-mobile .mb-khoi { padding: 88px var(--mb-le); }
  #tt-mobile .mb-hero-chu h1 { max-width: 11ch; }
  #tt-mobile .mb-hero-dan,
  #tt-mobile .mb-dan,
  #tt-mobile .mb-ghi,
  #tt-mobile .mb-gio,
  #tt-mobile .mb-buoc,
  #tt-mobile .mb-voucher { max-width: 60ch; }

  #tt-mobile .mb-the-ds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  #tt-mobile .mb-the { aspect-ratio: 3 / 4; }
  #tt-mobile .mb-the-tren,
  #tt-mobile .mb-the-duoi { left: 20px; right: 20px; }

  #tt-mobile .mb-so { padding: 44px var(--mb-le) 10px; }
  #tt-mobile .mb-so b { font-size: 40px; }

  #tt-mobile .mb-chan {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
    align-items: start;
  }
  #tt-mobile .mb-chan-cot + .mb-chan-cot { margin-top: 0; }
  #tt-mobile .mb-chan-ban-quyen { grid-column: 1 / -1; margin-top: 6px; }
}

/* Thiết bị có con trỏ thật (chuột, bút) thì TRẢ LẠI THANH CUỘN cho dải ngang.
   Ẩn thanh cuộn là đúng cho ngón tay — vuốt là biết còn nội dung — nhưng với
   chuột thì nó xoá mất cả cách kéo lẫn dấu hiệu còn nội dung. Băng đối tác
   rộng 1547px trong khung 375px: không có thanh cuộn thì bốn trong năm đối tác
   coi như không tồn tại. Đi kèm kéo-thả bằng chuột ở mobile.js. */
@media (max-width: 1200px) and (hover: hover) and (pointer: fine) {
  .mb-ray {
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 48, 40, 0.3) transparent;
    cursor: grab;
  }
  .mb-ray::-webkit-scrollbar { display: block; height: 6px; }
  .mb-ray::-webkit-scrollbar-track { background: transparent; }
  .mb-ray::-webkit-scrollbar-thumb {
    background: rgba(46, 48, 40, 0.3);
    border-radius: 3px;
  }

  /* Trong lúc kéo: đổi con trỏ, tắt snap (không tắt thì nó giật về điểm neo
     từng khung hình), và cấm bôi đen chữ cho khỏi thành vệt xanh. */
  .mb-ray.mb-dang-keo {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
  .mb-ray.mb-dang-keo * { pointer-events: none; }
}

/* 23/09 — tem FULL trên thẻ mobile (Doc LP Feedbacks mục 5).
   Là PHẦN TỬ THẬT trong .mb-the-tren chứ không phải ::after: hàng này đã có
   tem "TeeTee Pick" ở góc phải, đè tuyệt đối lên là hai tem chồng nhau. Nằm
   trong hàng flex thì chúng tự xếp cạnh nhau. Bản mobile không có React nên
   phần tử chèn vào không bị dựng lại mất. */
.mb-the-full {
  margin-left: auto;
  padding: 8px 11px;
  background: #2a3b45;
  color: #fffff3;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}
.mb-the-pick + .mb-the-full { margin-left: 0; }

/* 24/09 — ảnh của buổi đủ chỗ nhạt đi, cùng một ý với bản desktop. */
.mb-the:has(.mb-the-full) img {
  filter: grayscale(0.55) brightness(0.82);
}

/* 24/09 — tem "n buổi" của lớp lặp lại (gộp về một thẻ, chọn ngày trong
   popup). Cùng khuôn với tem FULL, nền kem chữ xanh đậm để hai tem không lẫn;
   cả lớp đầy thì mobile.js gỡ tem này, FULL đứng thay. */
.mb-the-gop {
  margin-left: auto;
  padding: 8px 11px;
  background: #fffff3;
  color: #2a3b45;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}