/* Overlay chi tiết buổi + form đăng ký.
 *
 * Bản export Framer KHÔNG mang overlay ra được (FramerExporter chỉ xuất được
 * trang thật, overlay gắn trong trang thì rơi lại), nên toàn bộ phần này dựng
 * lại bằng tay theo hai ảnh mẫu chủ dự án gửi ngày 07/09/2026.
 *
 * Token lấy từ chính bản export để khớp hệ thiết kế, không phải ước lượng:
 *   nền   #FFFFF3   mực  #2E3028   nhấn #799BAF   nhãn nhỏ #6D705D
 *   xanh đậm #2A3B45
 *   tiêu đề  LC Sac Trial Regular  thân chữ  Zalando Sans SemiExpanded
 *
 * Đặt trong <head> nên sống sót qua hydrate của React. Không dùng tên lớp nào
 * của Framer — chúng mang hash và đổi sau mỗi lần xuất lại. */

:root {
  --tt-nen: #fffff3;
  --tt-muc: #2e3028;
  --tt-muc-mo: rgba(46, 48, 40, 0.68);
  --tt-vien: rgba(46, 48, 40, 0.14);
  --tt-nhan: #6d705d;
  --tt-nhan-manh: #799baf;
  /* Cùng sắc xanh ấy, hạ còn 72% độ sáng — giữ nguyên tỉ lệ ba kênh nên KHÔNG
     thêm một màu lạ nào vào hệ, chỉ đậm hơn.

     Dùng cho NHÃN NHỎ trong hồ sơ đối tác. #799BAF ở 11px chỉ được 2,93 trên
     nền kem và 2,63 trên nền bạc hà của khối nhấn; #57707E được 5,18 và 4,65.

     CHỈ TRONG HỒ SƠ, không đụng phần còn lại của trang: ngày 12/09 đã thử làm
     đậm chữ nhấn cỡ lớn (cụm 80px, ba số 01/02/03 cỡ 34px) rồi trả lại, vì ở
     cỡ ấy màu đậm kéo chữ nhấn về gần mực thân và mất hẳn cái nhẹ của trang.
     Nhãn 11px thì ngược lại: không ai đọc được ở 2,63, mà đậm lên cũng không
     làm đổi cảm giác chung. */
  --tt-nhan-dam: #57707e;
  --tt-xanh-dam: #2a3b45;
  --tt-tieu-de: "LC Sac Trial Regular", Georgia, serif;
  --tt-than: "Zalando Sans SemiExpanded", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------- khung */

/* HIỂN THỊ BẰNG `display`, KHÔNG BẰNG TRANSITION.
 *
 * Bản đầu dùng opacity 0 -> 1 kèm transition để mở. Nhược điểm không nằm ở
 * thẩm mỹ mà ở độ bền: khi trình duyệt hãm hiệu ứng (tab nền, thiết bị yếu,
 * người dùng bật giảm chuyển động ở tầng hệ điều hành), transition không chạy
 * và hộp thoại KẸT Ở opacity 0 — tức khách bấm vào thẻ và không thấy gì.
 * Đã gặp đúng cảnh đó khi kiểm: data-mo="1" mà computed opacity vẫn là 0.
 *
 * Nay việc hiện/ẩn do `display` quyết định, luôn tức thời và không phụ thuộc
 * hiệu ứng. Phần chuyển động chỉ còn là trang trí trên hộp bên trong; nó không
 * chạy thì hộp vẫn nằm đúng chỗ và vẫn đọc được. */
.tt-lop {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* trên cả thanh điều hướng dính của Framer */
  display: none;
  align-items: stretch;
  justify-content: center;
  background: rgba(28, 28, 28, 0.55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Đừng nối cú cuộn ra trang nền. Trên iOS, cuộn tới đáy lớp phủ rồi vuốt
     tiếp là trình duyệt chuyển luôn sang cuộn trang phía dưới, và người dùng
     mất phương hướng. */
  overscroll-behavior: contain;
}
.tt-lop[data-mo="1"] {
  display: flex;
}

.tt-hop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(1180px, 100%);
  margin: auto;
  background: var(--tt-nen);
  color: var(--tt-muc);
  font-family: var(--tt-than);
}
/* Chuyển động chỉ là trang trí: hộp đã ở đúng chỗ ngay từ đầu, animation chỉ
   thêm một nhịp trượt lên. Không chạy cũng không sao. */
.tt-lop[data-mo="1"] .tt-hop { animation: tt-len 0.28s ease both; }
@keyframes tt-len {
  from { transform: translateY(14px); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-lop[data-mo="1"] .tt-hop { animation: none; }
}

/* Bước form hẹp hơn, không cần cột ảnh. */
.tt-hop[data-buoc="form"] { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); }
.tt-hop[data-buoc="form"] .tt-anh { display: none; }

.tt-anh {
  margin: 0;
  min-height: 100%;
  background: rgba(46, 48, 40, 0.06);
}
.tt-anh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-noi-dung {
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Khối neo cao 0, dính đỉnh khung cuộn (.tt-lop) và mang nút đóng đi theo.
   grid-column trải hết bề ngang để nó không chiếm mất một ô của lưới hai cột —
   ảnh và cột chữ vẫn nằm cạnh nhau ở hàng dưới. */
.tt-neo-dong {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 0;
  grid-column: 1 / -1;
}

/* Nút đóng: 44px cho đủ vùng chạm theo khuyến nghị tối thiểu.
   Dấu × là SVG chứ không phải ký tự — xem ghi chú ở veDauX() trong dat-cho.js.
   padding: 0 vì <button> có đệm mặc định 1px 6px của trình duyệt; đệm ấy cân
   hai bên nên không làm lệch, nhưng nó bóp ô nội dung còn 32×42 và là một biến
   số không cần thiết ở một nút chỉ chứa một hình vuông 13px.
   line-height: 0 để không còn khoảng chân chữ nào lọt vào ô lưới. */
/* Ở bề ngang hẹp, cột chữ sát mép nên chữ TRÔI QUA PHÍA SAU nút đóng lúc
   cuộn — nút đặc nên không chồng chữ nữa, nhưng vẫn che mất vài từ khi đi qua.

   Chữa bằng một dải nền dính ngay sau nút: TRONG SUỐT khi còn ở trên ảnh (để
   ảnh mở ra trọn vẹn như bản mẫu), ĐẶC LẠI khi đã cuộn qua ảnh. Chữ chui xuống
   dưới một dải nền liền mạch thì mắt đọc ra là "trang đang trượt dưới thanh",
   không phải "một chữ bị mất".

   Đây đúng lối mà thanh đầu của bản điện thoại đã dùng (.mb-dau: trong suốt ở
   đỉnh trang, xanh khi cuộn) nên không thêm một ngôn ngữ mới nào.

   Dùng ::before chứ không cho .tt-neo-dong chiều cao thật: neo đang là ô lưới
   cao 0, đổi chiều cao là đẩy cả hộp xuống. Lớp phủ tuyệt đối thì không đụng
   một pixel bố cục nào.

   Bề ngang rộng KHÔNG cần: ở đó cột chữ có đệm 74px nên nút không bao giờ đè
   lên chữ — đã đo, 0 phần tử nằm dưới vùng nút. */
@media (max-width: 1200px) {
  .tt-neo-dong::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: var(--tt-nen);
    border-bottom: 1px solid var(--tt-vien);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }
  .tt-neo-dong[data-dinh="1"]::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-neo-dong::before { transition: none; }
}

.tt-dong {
  z-index: 1;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  /* NỀN ĐẶC, KHÔNG PHẢI 86%.
     Nút này dính (sticky) nên nó trôi theo lúc cuộn. Với nền kem 86% thì trên
     ẢNH nó hiện ra như một viên tròn, nhưng khi trôi xuống phần chữ — cũng nền
     kem — nó biến mất hẳn: còn trơ dấu X, và chữ bên dưới lộ qua 14% trong
     suốt. Chụp trên bản thật ở 375px thấy rõ: chữ "PERFUME" ở tiêu đề mục và
     cụm "gặp nhau ở" đều bị dấu X đè chồng, đọc ra hai lớp chữ.
     Nền đặc + viền mảnh + bóng nhẹ thì nó luôn là một cái nút, trên nền nào
     cũng vậy. */
  background: var(--tt-nen);
  border: 1px solid var(--tt-vien);
  box-shadow: 0 2px 10px rgba(46, 48, 40, 0.1);
  color: var(--tt-muc);
  line-height: 0;
  cursor: pointer;
}

/* svg mặc định là inline, tức nằm trên đường cơ sở và chừa chỗ cho phần chân
   chữ — đúng kiểu lệch vài pixel mà nhìn không ra nguyên nhân. */
.tt-dong svg { display: block; }
.tt-dong:hover { background: #fffff3; }
.tt-dong:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: 2px; }

/* ------------------------------------------------------------------- chữ */

.tt-nhan-nho {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tt-nhan);
}

.tt-ten {
  margin: 0;
  font-family: var(--tt-tieu-de);
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 52px);
  /* 1.12 chứ không phải 1.0: dấu tiếng Việt (ế ộ ữ) cần thêm chỗ, đúng lỗi đã
     đo được ở phần thân trang. */
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.tt-mo-ta {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tt-muc-mo);
  max-width: 46ch;
}

/* --------------------------------------------------------- bảng thông tin */

.tt-bang { margin: 6px 0 0; display: grid; gap: 0; }
.tt-hang {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--tt-vien);
  align-items: start;
}
.tt-hang:last-child { border-bottom: 1px solid var(--tt-vien); }
.tt-hang dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-nhan);
  line-height: 1.6;
}
.tt-hang dd { margin: 0; font-size: 15px; line-height: 1.55; }

.tt-con-cho { font-size: 13px; color: var(--tt-muc-mo); margin: 0; }
.tt-con-cho[data-het="1"] { color: #a0522d; }

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

/* NỀN THEO ĐÚNG NÚT CỦA BẢN MẪU: #799BAF với chữ kem.
   Từng đổi sang xanh đậm #2A3B45 cho đạt 11.52, nhưng như vậy nút của overlay
   khác màu nút của trang — hai nút cùng một trang mà hai màu xanh thì đọc ra
   là lỗi. Chủ dự án chọn giống mẫu, nên trả về #799BAF.

   17/09: nền nút đổi sang #57707E. Chữ kem trên #799BAF chỉ được 2,93 —
   đây là NÚT HÀNH ĐỘNG CHÍNH, chữ trên nó là thứ khách phải đọc được
   trước khi bấm, không phải một mảng màu trang trí. #57707E là chính sắc
   ấy hạ còn 72% độ sáng nên sắc không đổi, và cho 5,18.

   Dải xanh, thanh menu và các chip vẫn giữ #799BAF: đó là hệ màu nền của
   bản thiết kế, anh Long đã chốt giữ nguyên. Chỉ nút đổi. */
.tt-nut {
  display: block;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: var(--tt-nhan-dam);
  color: #fffff3;
  font-family: var(--tt-than);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease;
}
.tt-nut:hover:not(:disabled) { filter: brightness(0.92); }
.tt-nut:disabled { opacity: 0.45; cursor: not-allowed; }
.tt-nut:focus-visible { outline: 2px solid var(--tt-muc); outline-offset: 3px; }

.tt-ghi-chu {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tt-muc-mo);
}

/* ------------------------------------------------------------------ form */

.tt-form { display: flex; flex-direction: column; gap: 20px; margin: 4px 0 0; }
.tt-o { display: flex; flex-direction: column; gap: 8px; }
.tt-o > label {
  font-size: 14px;
  color: var(--tt-muc-mo);
}
.tt-o input,
.tt-o select,
.tt-o textarea {
  width: 100%;
  padding: 18px 16px;
  border: 1px solid var(--tt-vien);
  border-radius: 0;
  background: transparent;
  color: var(--tt-muc);
  font-family: var(--tt-than);
  font-size: 15px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
/* Ô ghi chú. Cùng khung với ô nhập để biểu mẫu đọc ra một khối, chỉ khác ở
   chiều cao và ở chỗ cho khách kéo dãn thêm nếu muốn viết dài.
   resize: vertical chứ không phải both — kéo ngang thì ô thò ra ngoài hộp
   thoại và vỡ bố cục, mà cũng chẳng để làm gì. */
.tt-o textarea {
  min-height: 88px;
  resize: vertical;
  font: inherit;
  font-size: 15px;
}
.tt-o textarea::placeholder { color: rgba(46, 48, 40, 0.42); }

.tt-o select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232e3028' stroke-width='1.4'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}
.tt-o input::placeholder { color: rgba(46, 48, 40, 0.42); }
.tt-o input:focus,
.tt-o select:focus,
.tt-o textarea:focus { outline: 2px solid var(--tt-xanh-dam); outline-offset: -2px; }

/* 16px TRÊN MÁY CẢM ỨNG — đây là ngưỡng, không phải cỡ chữ chọn cho đẹp.
 *
 * iOS Safari tự phóng to cả trang khi khách bấm vào một ô nhập có cỡ chữ DƯỚI
 * 16px, rồi để nguyên như thế: khách phải chụm tay thu lại mới thấy hết biểu
 * mẫu. Ba ô ở đây đang 15px — hụt đúng một pixel — mà đây lại là thao tác quan
 * trọng nhất trang.
 *
 * pointer: coarse chứ không phải max-width: bệnh này thuộc về cách nhập liệu,
 * không thuộc về bề ngang màn hình. Máy tính bảng màn rộng vẫn dính, còn cửa sổ
 * desktop kéo hẹp thì không — nên hỏi đúng câu "có phải ngón tay không".
 * Desktop giữ 15px như bản thiết kế.
 *
 * Không dùng cách `maximum-scale=1` ở thẻ meta viewport: chặn được phóng thật
 * nhưng đồng thời chặn luôn việc khách tự phóng to để đọc — đổi một phiền toái
 * lấy một rào cản. */
@media (pointer: coarse) {
  .tt-o input,
  .tt-o select,
  .tt-o textarea { font-size: 16px; }
}

/* Dòng trạng thái dưới ô điện thoại. Ba trạng thái, ba màu — không dùng màu
   làm tín hiệu duy nhất, mỗi trạng thái đều có chữ nói rõ. */
.tt-bao { margin: 0; font-size: 13px; line-height: 1.5; }
.tt-bao[data-loai="cho"] { color: var(--tt-muc-mo); }
.tt-bao[data-loai="ok"] { color: #3f6b52; }
.tt-bao[data-loai="loi"] { color: #a0522d; }
.tt-bao a { color: inherit; }

/* ----------------------------------------------------------------- Zalo OA

   Khối thay chỗ ô "Mã thành viên" (bỏ 21/09). Ba mặt, và chỉ một mặt hiện
   mỗi lúc — xem capNhatZalo() trong dat-cho.js.

   HAI NÚT "Rồi/Chưa" LÀ <button>, KHÔNG PHẢI radio. Radio trong một <form>
   đi kèm nhãn, tab-index và trạng thái :checked mà ở đây không dùng tới, còn
   button thì aria-pressed nói đúng chuyện đang xảy ra: một lựa chọn bật/tắt
   chứ không phải một trường sẽ được gửi theo tên. (type="button" là bắt
   buộc — mặc định của <button> trong form là submit.)

   MÀU KHÔNG LÀ TÍN HIỆU DUY NHẤT: nút đang chọn đổi cả nền lẫn viền, và
   aria-pressed nói ra cho trình đọc màn hình. */

.tt-o-zalo { gap: 10px; }
.tt-o-zalo > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tt-muc-mo); }

.tt-zalo-chon { display: flex; gap: 10px; }

.tt-zalo-nut {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 12px 20px;
  border: 1px solid var(--tt-vien);
  background: transparent;
  color: var(--tt-muc);
  font-family: var(--tt-than);
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tt-zalo-nut:hover { border-color: var(--tt-nhan-manh); }
.tt-zalo-nut:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: 2px; }
.tt-zalo-nut[aria-pressed="true"] {
  border-color: var(--tt-nhan-dam);
  background: var(--tt-nhan-dam);
  color: #fffff3;
}

.tt-zalo-sang {
  display: inline-block;
  align-self: flex-start;
  padding: 13px 22px;
  background: var(--tt-nhan-manh);
  color: #fffff3;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.tt-zalo-sang:hover { background: var(--tt-nhan-dam); }
.tt-zalo-sang:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: 2px; }

/* `hidden` thua trong cuoc tranh chap voi display:flex/inline-block o tren
   neu khong noi ro — day la cai bay co that voi moi phan tu vua co class vua
   co thuoc tinh hidden. */
.tt-o-zalo[hidden],
.tt-zalo-sang[hidden],
.tt-zalo-chon[hidden] { display: none; }

@media (pointer: coarse) {
  .tt-zalo-nut, .tt-zalo-sang { font-size: 16px; }
}

/* --------------------------------------------------------- trạng thái xong */

.tt-xong { display: flex; flex-direction: column; gap: 14px; }
.tt-xong .tt-ten { font-size: clamp(28px, 2.6vw, 38px); }

/* ---------------------------------------------------------------- mobile

   Bản export khai khung nhìn cố định 1440px nên trang chính chưa có bố cục
   mobile. Overlay này thì có: nó do mình dựng, không phụ thuộc breakpoint của
   Framer, nên khi nào bản export có mobile thì phần này đã sẵn sàng. */
@media (max-width: 1200px) {
  .tt-hop { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .tt-anh { max-height: 40vh; }
  .tt-noi-dung { padding: 28px 20px 32px; gap: 18px; }
  .tt-hang { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; }
}

/* ------------------------------------------------------------- hồ sơ đối tác

   HAI CỘT, ảnh dọc bên trái — theo mockup Framer mà tài liệu 17/09 chỉ tới.

   Trước ngày 17/09 khối này là MỘT CỘT và ảnh bị ẩn hẳn, vì hồ sơ đối tác
   không có ảnh nào trong bản xuất nên lưới hai cột sẽ để trống một nửa. Nay
   mỗi đối tác đã có ảnh riêng (tt-dt-*), nên trả về đúng bản mẫu.

   Tỉ lệ 46/54 lấy từ bản mẫu (ảnh 450px, cột chữ 530px trong hộp 980px). Cột
   chữ vì thế rộng khoảng 470px trừ đệm — vẫn dưới ngưỡng 70 ký tự một dòng,
   là lý do lượt trước phải bóp hộp lại còn 620px. */
.tt-hop[data-buoc="doi-tac"] {
  width: min(1060px, 100%);
}

/* MỘT CỘT LÀ MẶC ĐỊNH, hai cột chỉ bật ở màn rộng (xem khối @media cuối tệp).
   Bản đầu đặt hai cột ở đây và nó ĐÈ luôn khối @media (max-width: 1200px) bên
   trên — chọn theo thuộc tính nên mạnh hơn, lại còn đứng sau. Đo được ở 375px:
   hộp vẫn chia 172.5px ảnh + 202.5px chữ, cột chữ hẹp bằng một nửa màn hình. */
.tt-hop[data-buoc="doi-tac"] { grid-template-columns: minmax(0, 1fr); }

/* Câu trích: dấu ngoặc do CSS vẽ, không nằm trong dữ liệu. Bản gốc của Peonia
   thiếu dấu mở và thừa một dấu đóng thẳng, nên để dấu trong chữ thì một trong
   năm hồ sơ sẽ lệch. */
.tt-trich {
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--tt-nhan-manh);
  font-family: var(--tt-tieu-de);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
  color: var(--tt-muc);
}
.tt-trich::before { content: "\201C"; }
.tt-trich::after { content: "\201D"; }

.tt-muc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--tt-vien);
}
.tt-muc h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tt-nhan);
}
.tt-muc p {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--tt-muc);
}

/* Hàng đối tác nay bấm được: cho nó cùng vòng tiêu điểm thấy được như thẻ buổi,
   nếu không thì người dùng bàn phím Tab tới mà không biết mình đang ở đâu. */
#main [data-tt-dt]:focus-visible,
#tt-mobile [data-tt-dt]:focus-visible {
  outline: 2px solid var(--tt-xanh-dam);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .tt-hop[data-buoc="doi-tac"] .tt-noi-dung { padding: 44px 22px 32px; }
}

/* Dưới mốc hai cột, ảnh nằm TRÊN chữ nên phải có trần chiều cao: ảnh dọc
   900×1540 mà để tự do thì nó chiếm 2764px, khách cuộn mãi mới tới chữ. */
@media (max-width: 1200px) {
  .tt-hop[data-buoc="doi-tac"] .tt-anh { max-height: 46vh; }
}

/* Lưu ý ngay trên nút gửi: đây là YÊU CẦU giữ chỗ, chưa phải chỗ đã có.
   Viền trái cùng màu nhấn để mắt bắt được nó như một lời dặn, không trôi lẫn
   vào phần chữ phụ bên dưới nút. */
.tt-luu-y {
  margin: 0;
  padding: 12px 0 12px 14px;
  border-left: 2px solid var(--tt-nhan-manh);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tt-muc);
}


/* ============================================================ hồ sơ đối tác

   Dựng theo mockup Framer mà tài liệu 17/09 chỉ tới. Đóng khung theo
   [data-buoc="doi-tac"] để không đụng tới hộp buổi, vốn dùng chung .tt-muc,
   .tt-nhan-nho và .tt-bang.

   KHÁC BẢN MẪU ĐÚNG MỘT ĐIỀU: CỠ CHỮ. Mockup đặt chữ thân 10px, nhãn 9px
   trong hộp rộng 980px. Chữ Việt có dấu ở 10px thì dấu chồng lên nhau, và cả
   trang này đã đặt chữ thân ở 15px. Nên giữ nguyên cấu trúc, màu và tỉ lệ
   nhấn của bản mẫu, còn cỡ chữ theo thang của trang. Muốn đúng 10px thì sửa
   ở đây. */

/* Nhãn mục trong hồ sơ là XANH NHẤN, khác nhãn olive của hộp buổi. */
.tt-hop[data-buoc="doi-tac"] .tt-muc > h3,
.tt-hop[data-buoc="doi-tac"] .tt-khoi > h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-nhan-dam);
}

.tt-hop[data-buoc="doi-tac"] .tt-muc > p,
.tt-hop[data-buoc="doi-tac"] .tt-khoi > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tt-muc-mo);
}

/* Viên liên kết mạng xã hội. Viền mảnh, không tô nền: đây là lối rẽ phụ, việc
   chính của hồ sơ vẫn là dẫn khách sang buổi.

   Cao 44px: cả trang đã đặt mọi vùng bấm ở mức đó, và lượt quét nào cũng báo
   "0 vùng bấm dưới 44px". Để 40px ở đây là tự tạo ra ngoại lệ đầu tiên. */
.tt-xh {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tt-vien-lk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--tt-vien);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--tt-muc);
  text-decoration: none;
}
.tt-vien-lk:hover,
.tt-vien-lk:focus-visible {
  border-color: var(--tt-nhan-manh);
  color: var(--tt-xanh-dam);
}

/* Viên từ khoá. Nền xanh nhấn 15% như bản mẫu — đây là nhãn đọc, không bấm
   được, nên KHÔNG cho viền hay con trỏ tay: trang này đã một lần mời bấm vào
   thứ bấm không được. */
.tt-the {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.tt-the li {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(121, 155, 175, 0.15);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--tt-xanh-dam);
}

/* Danh sách thế mạnh (chỉ Peonia có). Gạch đầu dòng bằng dấu chấm tròn nhỏ
   màu xanh nhấn thay vì bullet mặc định. */
.tt-gach {
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tt-gach li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tt-muc-mo);
}
.tt-gach li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tt-nhan-manh);
}

/* Hai khối được nhấn trong bản mẫu: góc nhìn đối tác, và buổi tại TeeTee&Co. */
.tt-khoi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 12px;
  background: rgb(231, 245, 239);
}

.tt-loi {
  margin: 0;
  font-family: var(--tt-tieu-de);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--tt-xanh-dam);
}

/* NEO ĐỦ MẠNH. Đây là thẻ <p> nằm trong .tt-khoi, mà luật chữ thân ở trên
   (.tt-hop[data-buoc="doi-tac"] .tt-khoi > p) có độ ưu tiên cao hơn một lớp
   đơn — nên bản đầu tên buổi bị kéo xuống 14px, bằng đúng cỡ chữ thân, và cả
   khối đọc ra phẳng lì. Trong bản mẫu đây là chữ lớn nhất của khối. */
.tt-hop[data-buoc="doi-tac"] .tt-khoi > .tt-khoi-ten {
  margin: 0;
  font-family: var(--tt-tieu-de);
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.25;
  color: var(--tt-xanh-dam) !important;
}

/* Ba bước của buổi. Số dùng chữ tiêu đề như bản mẫu. */
.tt-buoc {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tt-buoc li {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tt-xanh-dam);
}
.tt-buoc-so {
  flex: none;
  font-family: var(--tt-tieu-de);
  font-size: 14px;
  color: var(--tt-nhan-dam);
}

/* Hồ sơ dài hơn hộp buổi nhiều, nên cột chữ phải tự cuộn được thay vì kéo cả
   hộp cao quá màn hình. Cột ảnh dính lại để luôn thấy. */
/* Mốc 1201px cho khớp với khối @media (max-width: 1200px) ở trên: dưới mốc ấy
   hộp đã về một cột và ảnh nằm trên, nên không có cột nào để dính. Đặt 861px
   như bản đầu thì khoảng 861-1200 vừa một cột vừa bị ép dính — ảnh cao 92vh
   đẩy hết chữ xuống dưới màn hình. */
@media (min-width: 1201px) {
  /* CHIỀU CAO PHẢI XÁC ĐỊNH, không phải max-height.
     max-height trên khung lưới KHÔNG ép được hàng co lại: hàng vẫn được đo
     theo nội dung rồi tràn ra ngoài. Đo được: hộp báo cao 828px mà cột chữ
     vẫn 1485px và chữ đổ hẳn ra ngoài khung.
     Cho cao xác định + hàng minmax(0,1fr) thì hàng mới nhận đúng 828px, và
     cột chữ có chỗ để cuộn. Bản mẫu cũng là hộp cao cố định (980×770). */
  .tt-hop[data-buoc="doi-tac"] {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    height: min(860px, 92vh);
    /* Hàng đầu là nút đóng dính (cao 0, nằm đè); hàng hai là nội dung. */
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  /* min-height: 0 LÀ BẮT BUỘC. Mặc định của một ô lưới là min-height:auto, tức
     nó không chịu co nhỏ hơn nội dung — nên overflow-y:auto không có gì để
     cuộn và cả cột tràn ra ngoài hộp. Đo được trước khi thêm dòng này: hộp cao
     828px mà cột chữ cao 1485px, chữ đổ hẳn ra ngoài khung. */
  .tt-hop[data-buoc="doi-tac"] .tt-noi-dung {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .tt-hop[data-buoc="doi-tac"] .tt-anh {
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }
}

/* Logo đối tác đè lên ảnh trong hồ sơ, canh giữa gần mép trên — theo bản mẫu.

   Ba logo có tỉ lệ rất khác nhau: Cleopatra là con dấu vuông 512×512, còn
   Cham và Camélia là chữ nằm ngang (3,7:1 và 3,5:1). Nên chặn theo CẢ chiều
   cao lẫn bề ngang: con dấu vuông ăn trần chiều cao, chữ nằm ngang ăn trần bề
   ngang. Đặt một con số cứng thì một trong hai loại sẽ sai cỡ.

   drop-shadow rất nhẹ để nét trắng không tan vào vùng sáng của ảnh. */
.tt-hop[data-buoc="doi-tac"] .tt-anh { position: relative; }
/* Neo theo .tt-anh img cho DU MANH: luat .tt-anh img { width:100%; height:100% }
   o tren co do uu tien cao hon mot lop don, nen ban dau logo nhan width 100%
   roi bi max-width cat lai — hop rong 283px trong khi con dau cua Cleopatra
   chi vuong 92px. object-fit: contain van canh giua nen nhin khong sai, nhung
   hop thi sai, va cai sai lang le ay se can o lan sua sau. */
.tt-anh img.tt-dt-logo {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  max-height: 92px;
  max-width: 58%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 6px rgba(16, 22, 26, 0.35));
  pointer-events: none;
}

@media (max-width: 1200px) {
  .tt-anh img.tt-dt-logo { max-height: 68px; }
}

/* ================================================= 23/09: FULL · hết chỗ · Zalo

   ẨN THẺ BẰNG THUỘC TÍNH, KHÔNG BẰNG KIỂU NỘI TUYẾN.
   anBuoiBiTat() đặt `display:none` nội tuyến lên thẻ — và React của Framer
   dựng lại thẻ là xoá nó. Đo trên bản thật 23/09: thẻ mang `data-tt-an="1"`
   mà vẫn `display: block`, tức bấm "Ẩn" trên Sheet KHÔNG giấu được thẻ nào ở
   bản máy tính. Thuộc tính thì sống sót qua lượt dựng lại, nên CSS neo vào
   thuộc tính là bền. */
#main [data-tt-an="1"] { display: none !important; }

/* Ô "FULL" góc trên bên phải — Doc LP Feedbacks mục 5.
   Thẻ đã `position: relative; overflow: hidden` (đo 23/09), nên đặt tuyệt đối
   là nằm đúng góc ảnh mà không đụng bố cục Framer.

   ::before, KHÔNG PHẢI ::after. ::after của thẻ Framer ĐÃ CÓ CHỦ: nó là đường
   viền thẻ (`inset: 0; border: 1px solid …`). Bản đầu dùng ::after và kế
   thừa luôn `inset: 0` — ô FULL phủ kín cả thẻ thành một mảng xanh đậm, và
   viền thẻ biến mất. ::before thì trống trên cả chín thẻ (đo 23/09). Vẫn đặt
   rõ inset/width/height để không kế thừa gì nếu một ngày Framer dùng nó.

   Nền xanh đậm chữ kem: 12:1, đọc được trên mọi ảnh — cùng lối với tem ngày
   bên mobile. Nhãn phân loại của thẻ nằm góc trên TRÁI, nên hai tem không chạm. */
#main [data-tt-full="1"]::before {
  content: "FULL";
  position: absolute;
  inset: auto;
  top: 14px;
  right: 14px;
  width: auto;
  height: auto;
  border: 0;
  z-index: 3;
  padding: 10px 16px 9px;
  background: var(--tt-xanh-dam);
  color: #fffff3;
  font-family: var(--tt-than);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
  pointer-events: none;
}

/* Khối Zalo chăm sóc — dùng chung cho mọi màn kết thúc của phễu.
   Nút nền #57707E chứ không phải #799BAF: chữ kem trên #799BAF chỉ 2,93:1,
   mà đây là một nút khách PHẢI đọc được (xem chú thích ở .tt-nut). */
.tt-zalo-ht {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--tt-vien);
  background: rgba(121, 155, 175, 0.08);
}
.tt-zalo-ht-chu {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tt-muc);
}
.tt-zalo-ht-nut {
  align-self: flex-start;
  display: inline-block;
  padding: 12px 18px;
  background: var(--tt-nhan-dam);
  color: #fffff3;
  font-family: var(--tt-than);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.tt-zalo-ht-nut:hover { background: var(--tt-xanh-dam); }
.tt-zalo-ht-nut:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: 2px; }

/* Danh sách "các buổi còn chỗ" trong popup hết chỗ. Mỗi dòng là một nút:
   bấm vào là mở đúng buổi ấy, không bắt khách đóng popup rồi tự tìm lại. */
.tt-ds-khac-nhan {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tt-nhan);
}
.tt-ds-khac { display: flex; flex-direction: column; border-top: 1px solid var(--tt-vien); }
.tt-ds-khac-muc {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 14px 2px;
  border: 0;
  border-bottom: 1px solid var(--tt-vien);
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--tt-than);
  color: var(--tt-muc);
}
.tt-ds-khac-muc:hover .tt-ds-khac-ten { text-decoration: underline; text-underline-offset: 3px; }
.tt-ds-khac-muc:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: -2px; }
.tt-ds-khac-ngay { font-size: 12px; letter-spacing: 0.06em; color: var(--tt-nhan); }
.tt-ds-khac-ten { font-size: 15px; line-height: 1.35; }
.tt-ds-khac-cho { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tt-muc-mo); white-space: nowrap; }
@media (max-width: 420px) {
  .tt-ds-khac-muc { grid-template-columns: 44px 1fr; }
  .tt-ds-khac-cho { grid-column: 2; }
}

/* Video ở ô mở đầu (03/10/2026, thay dải ảnh cuộn). Phủ đúng khung của ảnh
   gốc; KHÔNG đặt z-index để lớp phủ gradient và chữ của hero (đứng sau trong
   DOM) vẫn nằm trên video. Ẩn tới khi clip đầu thật sự chạy — trước đó khách
   thấy ảnh gốc, không thấy ô đen. Hai thẻ <video> chồng nhau, thẻ đang chạy
   hiện dần lên trên thẻ kia. */
.tt-hero-vid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease-out;
}
.tt-hero-vid.is-chay { opacity: 1; }
.tt-hero-vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .6s ease-out;
  pointer-events: none;
}
.tt-hero-vid video.is-tren { opacity: 1; }

/* 03/10 anh Long: "load lại trang vẫn bị hiện cái hình running". Ảnh gốc của ô
   mở đầu (tấm chạy bộ sBtSk…) hiện trong lúc clip đầu đang tải. Thay bằng
   KHUNG ĐẦU của clip đầu: tải lại trang thấy ngay cảnh của video, video chạy
   là nối liền. Làm bằng CSS chứ không đổi src: React của Framer đặt lại src lúc
   hydrate, còn CSS có hiệu lực từ khung hình đầu. Chỉ trong "Opening Image" —
   thẻ Running Club dùng tệp riêng (tt-running-club). Mobile: mobile.js. */
#main [data-framer-name="Opening Image"] [data-framer-background-image-wrapper] {
  background: url("/videos/hero-dau-v2.webp") center / cover no-repeat;
}
#main [data-framer-name="Opening Image"] img[src*="sBtSkFy1UYTWvfDi2xCzk39D0vM"] {
  visibility: hidden;
}

/* 24/09 — BỎ HẲN TEM "TeeTee Pick" (anh Long dặn bỏ từ lâu).
   register.js (boNhanPick) vẫn gỡ nó bằng JS, nhưng chỉ SAU khi React dựng lại
   thẻ — mỗi lần bấm, lọc hay rê chuột làm React vẽ lại là tem lóe lên một nhịp
   (tới 120ms, cửa sổ gộp của MutationObserver). CSS thì có hiệu lực từ khung
   hình đầu và không bao giờ trễ. Ba lớp dưới là ba khung viên thuốc chứa chữ
   "TeeTee pick" trong bó mã (thẻ Running Club, Workshops, Culture & Lifestyle);
   thẻ nhân bản chép từ khuôn nên mang theo lớp và cũng bị ẩn. */
#main .framer-1aal53n,
#main .framer-145dneo,
#main .framer-fjcpgj {
  display: none !important;
}

/* 24/09 — LƯỚI BUỔI VÀ HÀNG ĐỐI TÁC CHỈ HIỆN KHI ĐÃ YÊN. Xem danhDauYen() trong
   register.js: trong 0,8 giây đầu hai mục này đổi chỗ hai lần (HTML máy chủ →
   bản sửa → React dựng lại → bản sửa). Trong suốt thì vẫn chiếm chỗ và máy tìm
   kiếm vẫn đọc được. Animation là lưới an toàn: JS hỏng hẳn thì 2,5 giây sau
   vẫn hiện. */
@keyframes tt-hien-dan { to { opacity: 1; } }
html:not([data-tt-on="1"]) #main #chon-hoat-dong,
html:not([data-tt-on="1"]) #main #partner {
  opacity: 0;
  animation: tt-hien-dan 0.2s ease 2.5s forwards;
}
html[data-tt-on="1"] #main #chon-hoat-dong,
html[data-tt-on="1"] #main #partner {
  opacity: 1;
  transition: opacity 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  html[data-tt-on="1"] #main #chon-hoat-dong,
  html[data-tt-on="1"] #main #partner { transition: none; }
}

/* 24/09 — BUỔI ĐỦ CHỖ PHẢI NHÌN RA TỪ XA, không chỉ đọc được ở góc thẻ. Anh
   Long: "khi 1 trải nghiệm full thì phải có cái tag là full ở bên ngoài".
   Tem FULL ở góc trên + ảnh nhạt đi: lướt qua lưới là thấy buổi nào hết chỗ,
   trước cả khi đọc dòng "Đã đủ chỗ". */
#main [data-tt-full="1"] img {
  filter: grayscale(0.55) brightness(0.82);
}

/* 24/09 — BUỔI LẶP LẠI GỘP VỀ MỘT THẺ (dat-cho.js, veCho). Thẻ con vẫn nằm
   trong lưới để được vẽ số chỗ riêng, nhưng không hiện: ẩn bằng THUỘC TÍNH vì
   lý do như data-tt-an ở trên. Thẻ đại diện mang tem "n buổi · Chọn ngày" ở
   đúng góc tem FULL — cả lớp đầy thì veCho gỡ tem này và FULL hiện thay. */
#main [data-tt-gop="1"] { display: none !important; }
#main [data-tt-so-buoi]::before {
  content: attr(data-tt-so-buoi);
  position: absolute;
  inset: auto;
  top: 14px;
  right: 14px;
  width: auto;
  height: auto;
  border: 0;
  z-index: 3;
  padding: 10px 14px 9px;
  background: #fffff3;
  color: var(--tt-xanh-dam);
  font-family: var(--tt-than);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

/* Ô chọn ngày trong popup. Mỗi ngày một nút: thứ, ngày, số suất còn. Ngày đã
   đủ số lượng vẫn hiện (khách cần biết là có) nhưng mờ và không bấm được. */
.tt-chon-ngay {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin: 2px 0 6px;
}
.tt-ngay-nut {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 11px 12px 10px;
  border: 1px solid var(--tt-vien);
  background: transparent;
  color: var(--tt-muc);
  font-family: var(--tt-than);
  text-align: left;
  cursor: pointer;
}
.tt-ngay-nut:hover { border-color: var(--tt-nhan-dam); }
.tt-ngay-nut:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: 2px; }
.tt-ngay-nut[aria-pressed="true"] {
  border-color: var(--tt-xanh-dam);
  background: var(--tt-xanh-dam);
  color: #fffff3;
}
.tt-ngay-thu {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.tt-ngay-so { font-family: var(--tt-tieu-de); font-size: 22px; line-height: 1; }
.tt-ngay-cho { font-size: 11.5px; line-height: 1.3; opacity: 0.85; }
.tt-ngay-nut[data-het="1"] {
  cursor: not-allowed;
  color: var(--tt-muc-mo);
  background: rgba(46, 48, 40, 0.04);
  border-style: dashed;
}
.tt-ngay-nut[data-het="1"] .tt-ngay-cho { color: #a0522d; opacity: 1; }
/* v82: ngày kín còn suất chờ thì chọn được — đang chọn phải trông như đang chọn. */
.tt-ngay-nut[data-het="1"]:not(:disabled) { cursor: pointer; }
.tt-ngay-nut[data-het="1"][aria-pressed="true"] {
  border-style: solid;
  border-color: var(--tt-xanh-dam);
  background: var(--tt-xanh-dam);
  color: #fffff3;
}
.tt-ngay-nut[data-het="1"][aria-pressed="true"] .tt-ngay-cho { color: #f3c9a8; }

/* Tem FULL và tem "n buổi" (z-index 3) từng NỔI ĐÈ LÊN THANH MENU khi cuộn —
   thanh menu là sticky z-index 1, còn thẻ không tạo ngữ cảnh xếp lớp riêng nên
   z-index của tem so thẳng với menu (đo 24/09). isolation: isolate nhốt tem
   trong phạm vi thẻ; không đổi bố cục, không đụng React. */
#main [data-tt-full="1"],
#main [data-tt-so-buoi] { isolation: isolate; }
@media (max-width: 480px) {
  .tt-chon-ngay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 24/09 tối — hai chỉnh theo ảnh anh Long.
   1) Popup: phần dưới (giờ, nơi, số suất, nút) nằm trong .tt-phan-duoi để vẽ
      lại khi chọn ngày; khối bọc ấy làm mất khoảng cách 22px của .tt-noi-dung
      nên "Còn 19/19 suất" dính vào đường kẻ và nút. display: contents trả các
      con về làm con trực tiếp của khung flex. */
.tt-phan-duoi { display: contents; }
/* 2) Thẻ lớp lặp lại: cột ngày in thêm các ngày còn suất khác, dưới "OCT."
      DÙNG ::before, KHÔNG DÙNG ::after (25/09): ::after của cột ngày là ĐƯỜNG
      KẺ DỌC của Framer (border-right, top 0 → bottom 0). Ghi đè nó bằng top:80px
      là kéo đường kẻ xuống theo — anh Long thấy "gạch dọc bị ngắt ở đoạn trên". */
#main [data-tt-ngay-them]::before {
  border: 0;
  content: attr(data-tt-ngay-them);
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  text-align: center;
  white-space: pre;
  font-family: var(--tt-tieu-de);
  font-size: 17px;
  line-height: 1.8;
  color: rgba(46, 48, 40, 0.55);
  pointer-events: none;
}

/* =========================================================== KHUNG LỊCH
   01/10 — lịch tháng đặt trên khối "Chọn hoạt động" (dat-cho.js, veLich).
   Máy bàn: .tt-lich, mỗi ô ghi giờ + tên buổi. Điện thoại: .tt-lich-gon,
   ô chỉ có chấm màu, danh sách của ngày đang chọn nằm dưới lưới.
   Màu nhóm đi qua biến --tt-lich-mau (đặt nội tuyến theo từng buổi). */
.tt-lich {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 88px 50px 8px;
  font-family: var(--tt-than);
  color: var(--tt-muc);
}
.tt-lich *, .tt-lich *::before, .tt-lich *::after { box-sizing: border-box; }
.tt-lich-dau {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.tt-lich-nhan {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tt-nhan);
}
.tt-lich-td {
  margin: 0;
  font-family: var(--tt-tieu-de);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tt-lich-td span { color: var(--tt-nhan-manh); }
.tt-lich-dieu { display: flex; gap: 8px; }
.tt-lich-chuyen {
  width: 44px;
  height: 44px;
  border: 1px solid var(--tt-vien);
  border-radius: 50%;
  background: transparent;
  color: var(--tt-muc);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.tt-lich-chuyen svg { display: block; }
.tt-lich-chuyen:hover:not(:disabled) { border-color: var(--tt-muc); }
.tt-lich-chuyen:disabled { opacity: 0.3; cursor: default; }
.tt-lich-chuyen:focus-visible,
.tt-lich-buoi:focus-visible,
.tt-lich-so:focus-visible { outline: 2px solid var(--tt-xanh-dam); outline-offset: 2px; }
.tt-lich-chu-giai {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 18px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--tt-muc-mo);
}
.tt-lich-chu-giai li { display: flex; align-items: center; gap: 8px; }
.tt-lich-chu-giai li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tt-lich-mau);
}
.tt-lich-luoi {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--tt-vien);
  border-left: 1px solid var(--tt-vien);
}
.tt-lich-thu {
  padding: 10px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--tt-nhan);
  border-right: 1px solid var(--tt-vien);
  border-bottom: 1px solid var(--tt-vien);
}
.tt-lich-o {
  min-height: 112px;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--tt-vien);
  border-bottom: 1px solid var(--tt-vien);
  min-width: 0;
}
.tt-lich-o[data-trong] { background: rgba(46, 48, 40, 0.025); }
.tt-lich-o > span.tt-lich-so {
  font-family: var(--tt-tieu-de);
  font-size: 20px;
  line-height: 1;
  margin: 2px 4px 4px;
}
.tt-lich-o[data-qua] > span.tt-lich-so { color: rgba(46, 48, 40, 0.35); }
/* Hôm nay: vòng tròn mảnh căn giữa con số (bản trước là viên đặc lệch tâm). */
.tt-lich-o[data-nay] > span.tt-lich-so {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -3px 0 0 -2px;
  border: 0;
  border-radius: 50%;
  background: var(--tt-nhan-manh);
  color: var(--tt-nen);
  box-shadow: 0 0 0 3px rgba(121, 155, 175, 0.22);
}
/* Nhãn "Hôm nay" cạnh số (01/10 chiều, anh Long: "highlight hơn 1 chút"). */
.tt-lich-o[data-nay] > span.tt-lich-so::after {
  content: "Hôm nay";
  position: absolute;
  left: 38px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--tt-than);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tt-nhan-dam);
}
.tt-lich-o[data-nay] > span.tt-lich-so { position: relative; }
.tt-lich-o[data-nay] { background: rgba(121, 155, 175, 0.1); box-shadow: inset 0 2px 0 var(--tt-nhan-manh); }
.tt-lich-buoi {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "gio con" "ten ten" "cho cho";
  column-gap: 6px;
  row-gap: 1px;
  align-items: baseline;
  width: 100%;
  min-width: 0;
  padding: 5px 7px 5px 9px;
  border: 0;
  border-left: 3px solid var(--tt-lich-mau);
  border-radius: 3px;
  background: rgba(121, 155, 175, 0.1);
  color: var(--tt-muc);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tt-lich-buoi:hover:not(:disabled) { background: rgba(121, 155, 175, 0.24); }
.tt-lich-gio { grid-area: gio; font-size: 11px; color: var(--tt-muc-mo); }
.tt-lich-ten {
  grid-area: ten;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tt-lich-con { grid-area: con; justify-self: end; font-size: 10px; letter-spacing: 0.04em; color: var(--tt-nhan); }
.tt-lich-buoi[data-het] { background: rgba(46, 48, 40, 0.04); }
.tt-lich-cho { grid-area: cho; font-size: 10.5px; letter-spacing: 0.02em; color: #a0522d; }
.tt-lich-buoi[data-het] .tt-lich-ten { color: var(--tt-muc-mo); }
.tt-lich-buoi[data-qua] { opacity: 0.45; cursor: default; }
.tt-lich-nhom { display: none; }

/* ---- bản gọn (điện thoại) ---- */
.tt-lich-gon { padding: 48px var(--mb-le, 22px) 4px; max-width: none; }
.tt-lich-gon .tt-lich-td { font-size: 36px; white-space: nowrap; }
.tt-lich-gon .tt-lich-o[data-trong] { background: transparent; }
.tt-lich-gon .tt-lich-chuyen { width: 40px; height: 40px; }
.tt-lich-gon .tt-lich-chu-giai { gap: 6px 14px; margin: 16px 0 14px; font-size: 11px; }
.tt-lich-gon .tt-lich-luoi { border: 0; gap: 2px; }
.tt-lich-gon .tt-lich-thu { border: 0; padding: 6px 0; text-align: center; font-size: 10px; }
.tt-lich-gon .tt-lich-o { min-height: 0; padding: 0; border: 0; }
.tt-lich-gon button.tt-lich-so {
  width: 100%;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--tt-muc);
  font: inherit;
  padding: 4px 0;
  cursor: pointer;
}
.tt-lich-gon button.tt-lich-so b { font-family: var(--tt-tieu-de); font-weight: 400; font-size: 18px; line-height: 1; }
.tt-lich-gon button.tt-lich-so:disabled { color: rgba(46, 48, 40, 0.3); cursor: default; }
.tt-lich-gon .tt-lich-o[data-co] button.tt-lich-so { background: rgba(121, 155, 175, 0.1); }
.tt-lich-gon .tt-lich-o[data-qua] button.tt-lich-so { opacity: 0.5; }
.tt-lich-gon .tt-lich-o[data-nay] button.tt-lich-so { border: 2px solid var(--tt-nhan-manh); background: rgba(121, 155, 175, 0.16); }
.tt-lich-gon .tt-lich-o[data-nay] { background: transparent; box-shadow: none; }
/* 01/10: hôm nay không có buổi thì nút bị disabled (chữ mờ 30%) — vẫn phải nổi: chữ đậm màu nhấn, nền đậm hơn. */
.tt-lich-gon .tt-lich-o[data-nay] button.tt-lich-so,
.tt-lich-gon .tt-lich-o[data-nay] button.tt-lich-so:disabled { color: var(--tt-xanh-dam); opacity: 1; background: rgba(121, 155, 175, 0.24); }
.tt-lich-gon .tt-lich-o[data-nay] button.tt-lich-so b { font-weight: 700; }
.tt-lich-gon .tt-lich-o button.tt-lich-so[aria-pressed="true"] { background: var(--tt-xanh-dam); color: var(--tt-nen); opacity: 1; }
.tt-lich-cham { display: flex; gap: 3px; min-height: 5px; }
.tt-lich-cham i { width: 5px; height: 5px; border-radius: 50%; background: var(--tt-lich-mau); }
.tt-lich-cham i[data-mo] { opacity: 0.4; }
.tt-lich-gon button.tt-lich-so[aria-pressed="true"] .tt-lich-cham i { box-shadow: 0 0 0 1px var(--tt-nen); }
.tt-lich-ngay-ds { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.tt-lich-ngay-td { margin: 0 0 2px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-nhan); }
.tt-lich-gon .tt-lich-buoi {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "gio ten" "gio nhom";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  min-height: 56px;
  padding: 10px 14px;
  font-size: 14px;
  border-left-width: 4px;
  border-radius: 4px;
}
.tt-lich-gon .tt-lich-gio { grid-area: gio; min-width: 3.1em; font-size: 15px; color: var(--tt-muc); }
.tt-lich-gon .tt-lich-ten { grid-area: ten; display: block; overflow: visible; }
.tt-lich-gon .tt-lich-nhom { display: block; grid-area: nhom; font-size: 11px; color: var(--tt-muc-mo); }
.tt-lich-gon .tt-lich-con { grid-area: auto; grid-column: 2; justify-self: start; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .tt-lich-buoi { transition: none; } }