/* Trang Reel kiểu TikTok — /reel/<userId>/<postId> (js/reel.js, chủ trang 12/10/2026).
   Lớp phủ toàn màn nền đen. z-index 1045: trên navbar (1030), DƯỚI hộp Bootstrap (1055 — bảng
   đăng nhập, hộp đăng bài) và bảng bình luận / ai đã thích (10000), để chúng mở được đè lên. */

#reel-view {
  position: fixed;
  inset: 0;
  z-index: 1045;
  display: none;
  background: #000;
  color: #fff;
  /* Phông như TikTok (chủ trang 12/10/2026): TikTok dùng phông hệ thống — SF Pro trên iPhone,
     Roboto trên Android, Segoe UI trên Windows — không phải Be Vietnam Pro của site. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  height: 100vh;
  height: 100dvh;
}
#reel-view.is-open { display: block; }
/* Reel đang mở: khoá cuộn trang phía sau, ẩn nút nổi Zalo / Gọi (nằm đè lên cột nút). */
html.rl-dang-mo, html.rl-dang-mo body { overflow: hidden; }
/* Thanh trạng thái (và thanh công cụ) iPhone ĐEN như TikTok (chủ trang 12/10/2026): trang cố ý
   không khai theme-color, iOS Safari lấy màu CANVAS (nền <html>) tô hai thanh — mặc định
   trong suốt nên ra trắng. Cùng cách html.livestream-active (#111) trong index.html. */
html.rl-dang-mo, html.rl-dang-mo body { background-color: #000; }
html.rl-dang-mo #linkzalo, html.rl-dang-mo #linkphoneCircle { display: none !important; }

#reel-view button {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#reel-view svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  overflow: visible;
}
#reel-view svg.rl-dac { fill: currentColor; stroke: none; }

/* ── Cột cuộn: mỗi bài cao đúng một màn, vuốt dừng đúng từng bài ── */
.rl-cuon {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Đổi bài là NHẢY, không trượt (js/reel.js nhayToi) — không để luật smooth nào lọt vào. */
  scroll-behavior: auto;
}
.rl-cuon::-webkit-scrollbar { display: none; }

.rl-o {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}
.rl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Video dọc PHỦ KÍN khung như TikTok — xén chút mép, không còn viền đen hai bên khi màn
     rộng hơn 9:16 (chủ trang 29/10/2026). Video ngang (.rl-ngang, js/reel.js) vẫn để trọn. */
  object-fit: cover;
  background: #000;
  /* Bình luận mở: video thu nhỏ lên phần trên bảng như TikTok (js/reel.js thuNhoChoBinhLuan đặt
     --rl-co). Cùng đường cong trượt với bảng (css/comment-sheet.css) để hai thứ đi cùng nhau. */
  transform-origin: 50% 0;
  transition: transform .26s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Thẻ nối (js/reel.js "Nối đoạn đầu"): tải tệp gốc khuất sau video đang phát, chưa hiện. Không
   display:none — Safari không giải mã thẻ bị ẩn hẳn, tới lúc đổi chỗ lại phải chờ. */
.rl-video.rl-ngang { object-fit: contain; }
.rl-video.rl-noi {
  opacity: 0;
  pointer-events: none;
}
#reel-view.rl-co-bl .rl-video { transform: scale(var(--rl-co, 1)); }
/* Bàn phím mở khi đang gõ bình luận: Safari cuộn trang (visualViewport.offsetTop), lớp fixed trôi
   lên — js/comment-sheet.js kéo lớp reel xuống đúng chừng đó (ghi thẳng style.top của #reel-view,
   bám từng khung hình — không lướt, lướt là trễ sau bàn phím) để video thu nhỏ vẫn nằm ngay trên bảng. */
#reel-view .rl-tren, #reel-view .rl-cot, #reel-view .rl-chu { transition: opacity .2s ease; }
/* Cột nút + chú thích: chỉ ẨN Ở Ô ĐANG XEM (.rl-o-bl, js/reel.js thuNhoChoBinhLuan) — chủ trang
   29/10/2026: "bật tắt bảng bình luận hơi chậm". Trước đây ẩn theo #reel-view.rl-co-bl ở CẢ ~320 ô:
   bật/tắt bảng là ~640 hiệu ứng mờ chạy cùng lúc, trình duyệt tính lại kiểu cho chúng mỗi khung
   hình (đo Chrome CPU chậm 4×: mở bảng đứng hình ~1,2 giây, đóng ~0,7 giây). Ô khác nằm ngoài màn. */
#reel-view.rl-co-bl .rl-tren, #reel-view .rl-o-bl .rl-cot, #reel-view .rl-o-bl .rl-chu {
  opacity: 0;
  pointer-events: none;
}
.rl-trong {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .7);
  font-size: .95rem;
}
.rl-cuon > .rl-trong { position: static; height: 100%; }

/* ▶ giữa màn khi đang tạm dừng */
.rl-phat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.rl-phat svg { width: 64px !important; height: 64px !important; opacity: .75; }
.rl-o.rl-dung .rl-phat { opacity: 1; }

/* Bóng chữ / icon cho đọc được trên mọi nền video. */
.rl-tren, .rl-cot, .rl-chu { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* ── Thanh trên GIỐNG HỆT TikTok (chủ trang 12/10/2026): icon TV "LIVE" bên trái, "Đề xuất" đậm
   giữa với gạch chân NGẮN (không dài bằng chữ), kính lúp bên phải — cùng một hàng, nổi trên
   video (không nền), chỉ có bóng mờ phía trên cho chữ đọc được trên video sáng. ── */
.rl-tren {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: calc(env(safe-area-inset-top, 0px) + 56px);
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.rl-tren > * { pointer-events: auto; }
.rl-live {
  position: absolute;
  left: 14px;
  display: flex !important;
  align-items: center;
}
#reel-view svg.rl-tv {
  width: 34px;
  height: 28px;
  stroke-width: 2.2;
  /* Nhích lên 1px (chủ trang 12/10/2026): ăng-ten làm thân TV thấp hơn tâm hình ~1,9px — đo điểm
     ảnh, thân TV giữa ở 29,9px còn chữ "Đề xuất" 29,2 / kính lúp 28,7. */
  transform: translateY(-1px);
}
#reel-view svg.rl-tv text {
  fill: currentColor;
  stroke: none;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
}
.rl-tieu-de {
  position: relative;
  /* 17px nét 600 như tab "Đề xuất" của TikTok (trước 700, đậm quá). */
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  /* Không gạch chân dưới chữ (chủ trang 12/10/2026: "xoá gạch chân"). */
}
.rl-tim-kiem {
  position: absolute;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.rl-tim-kiem svg { width: 27px !important; height: 27px !important; stroke-width: 2.4 !important; }

/* ── Cột phải: avatar, tim, bình luận, lưu, chia sẻ ── */
.rl-cot {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
}
/* Avatar + nút ➕ đỏ đè mép dưới, như TikTok. */
.rl-av-khung {
  position: relative;
  display: block;
  margin-bottom: 22px;
}
#reel-view .rl-theo {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fe2c55;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
/* Dấu + / ✓ vẽ bằng CSS (không phụ thuộc phông). */
#reel-view .rl-theo::before,
#reel-view .rl-theo::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 1px;
}
#reel-view .rl-theo::before { width: 11px; height: 2.2px; }
#reel-view .rl-theo::after { width: 2.2px; height: 11px; }
#reel-view .rl-theo.is-on { background: #fff; }
#reel-view .rl-theo.is-on::before,
#reel-view .rl-theo.is-on::after { background: #fe2c55; }
#reel-view .rl-theo.is-on::before { width: 5px; height: 2.2px; transform: translate(-3px, 1px) rotate(45deg); }
#reel-view .rl-theo.is-on::after { width: 2.2px; height: 10px; transform: translate(1.5px, -1px) rotate(45deg); }
#reel-view .rl-theo:active { transform: translateX(-50%) scale(.88); }
.rl-av {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  /* Không viền trắng — như avatar TikTok (chủ trang 12/10/2026). */
  background: #333;
}
.rl-nut {
  width: 48px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.rl-nut svg { width: 32px; height: 32px; }
/* Phải có #reel-view: luật chung "#reel-view button { color: inherit }" và "#reel-view svg
   { fill: none }" mạnh hơn .rl-nut.is-on — trước đây bấm tim vẫn trắng (chủ trang 14/10/2026). */
#reel-view .rl-nut.is-on svg { fill: currentColor; }
#reel-view .rl-nut[data-rl="heart"].is-on { color: #ff3040; }   /* đỏ tim Instagram (17/10/2026) */
#reel-view .rl-nut[data-rl="save"].is-on { color: #fcc12b; }
.rl-so {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  margin: 2px 0 14px;
  min-height: .78rem;
  cursor: pointer;
}
.rl-so:not([data-rl]) { cursor: default; }

/* ── Góc dưới trái: tên + chú thích ── */
.rl-chu {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 76px;
  /* Ô reel đã dừng ngay trên thanh dưới (.rl-cuon chừa chỗ) — chỉ cách mép ô 14px như TikTok.
     Trước để 72px + safe-area (tính như thể ô kéo tới đáy màn) nên dưới chú thích hở một khoảng. */
  bottom: 14px;
}
/* 600 (Semibold trên iPhone) như tên người đăng TikTok — 700 trông quá đậm (chủ trang 14/10/2026). */
.rl-ten { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.rl-cap {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
}
/* "thêm" nối ngay sau "… " của chữ, đậm hơn chữ thường — như TikTok. */
#reel-view .rl-them {
  display: inline;
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
}
#reel-view .rl-them[hidden], #reel-view .rl-an[hidden] { display: none; }
.rl-cap.is-mo {
  white-space: pre-line;   /* mở ra thì giữ xuống dòng người viết gõ */
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* "ẩn bớt" canh phải, dòng riêng dưới chữ — như TikTok. */
#reel-view .rl-an {
  display: block;
  margin: 4px 0 0 auto;
  font-weight: 700;
  font-size: .9rem;
}

/* ── Thanh dưới kiểu app ── */
.rl-duoi {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.rl-duoi button {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: .68rem !important;
  color: rgba(255, 255, 255, .92) !important;
}
.rl-duoi svg { width: 25px; height: 25px; }
.rl-cong { flex: 0 0 auto !important; }
.rl-cong span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: -3px 0 0 #25f4ee, 3px 0 0 #fe2c55;
}
/* Cột cuộn chừa chỗ cho thanh dưới: video không bị thanh che. */
.rl-cuon { bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); }

/* Màn rộng (máy tính): MỌI THỨ nằm trong MỘT khung dọc 9:16 giữa màn — thanh trên (LIVE / Đề
   xuất / tìm kiếm), ô video với cột nút + tên đè lên mép trong video, và thanh dưới — đúng như
   trên điện thoại, chỉ là khung hẹp lại. Trước đây mỗi phần một bề ngang (thanh trên trải cả
   cửa sổ, ô video rộng hơn video 80px, thanh dưới cố định 520px) nên LIVE / kính lúp văng ra
   hai mép màn, cột nút lệch nửa trong nửa ngoài video, tên người đăng thụt ra ngoài (chủ trang
   12/10/2026 gửi ảnh: "các thành phần bị lạc chỗ, xếp lại trong hình chữ nhật").
   Bề cao ô = 100dvh − thanh dưới 56px (.rl-cuon), nên khung rộng đúng bằng video 9:16. */
   Chi tiết (thanh trên, cột nút, chữ, thanh dưới) thu nhỏ đều theo --rl-ti = khung ÷ 400px
   (datTiLe() trong js/reel.js; chủ trang: "đang bị to quá, giữ tỉ lệ") bằng CSS zoom. Phần tử
   bị zoom thì max-width của chính nó cũng bị nhân hệ số — chia ngược lại cho đủ bề khung. */
#reel-view { --rl-ti: 1; }
@media (min-width: 768px) {
  #reel-view { --rl-khung: min(100vw, calc((100dvh - 56px * var(--rl-ti)) * 9 / 16)); }
  .rl-cuon { bottom: calc(env(safe-area-inset-bottom, 0px) + 56px * var(--rl-ti)); }
  .rl-o { max-width: var(--rl-khung); margin: 0 auto; }
  .rl-tren, .rl-duoi {
    zoom: var(--rl-ti);
    max-width: calc(var(--rl-khung) / var(--rl-ti));
    margin: 0 auto;
  }
  .rl-cot, .rl-chu, .rl-phat { zoom: var(--rl-ti); }
}

/* Lớp tối mờ dần ở nửa dưới ô (như TikTok) cho tên + chú thích đọc rõ trên video sáng; chú thích
   đang bung dài thì phủ tối cả ô — chữ dài đè lên phim CT/siêu âm sáng là không đọc nổi
   (chủ trang 12/10/2026 gửi ảnh). Dưới cột nút và chữ (z-index 2), trên video. */
.rl-o::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rl-phu, 40%);   /* tới dòng tên người đăng — datPhu() trong js/reel.js */
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .16));   /* nhạt hơn — chủ trang 12/10/2026 */
  transition: height .2s ease, background .2s ease;
}
.rl-o:has(.rl-cap.is-mo)::after {
  /* Chủ trang 12/10/2026: bản 80% phủ đen quá cao — chỉ nhỉnh hơn lúc thu gọn, đậm dần ở đáy
     dưới khối chữ, như TikTok. */
  /* Cao tới dòng tên người đăng (--rl-phu, datPhu() trong js/reel.js đo); độ mờ GIỮ NGUYÊN. */
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .2) 55%);   /* nhạt hơn — chủ trang 12/10/2026 */
}
/* Chú thích bung: cuộn trong khung, đủ chỗ dưới thanh trên. */
.rl-chu:has(.rl-cap.is-mo) { top: calc(env(safe-area-inset-top, 0px) + 64px); display: flex; flex-direction: column; justify-content: flex-end; }
.rl-chu:has(.rl-cap.is-mo) .rl-cap { max-height: none; overflow-y: auto; min-height: 0; }

/* Vuốt ngang LiveStream ⇄ Reel (js/reel.js): Reel trượt vào từ trái (ra thì sang LiveStream ngay). */
@keyframes rl-vao-trai { from { transform: translateX(-100%); } to { transform: none; } }
#reel-view.rl-vao-trai { animation: rl-vao-trai .25s ease-out; }
@keyframes rl-vao-phai { from { transform: translateX(100%); } to { transform: none; } }
#reel-view.rl-vao-phai { animation: rl-vao-phai .25s ease-out; }
@media (prefers-reduced-motion: reduce) {
  #reel-view.rl-vao-trai, #reel-view.rl-vao-phai { animation: none; }
}

/* Dấu + của nút đăng bài vẽ bằng hai vạch CSS, đứng ĐÚNG tâm ô (chủ trang 12/10/2026: "dấu cộng
   chính giữa") — ký tự "+" của phông nằm lệch xuống theo đường chân chữ. */
.rl-cong span { position: relative; }
.rl-cong span::before,
.rl-cong span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #000;
  border-radius: 1.5px;
  transform: translate(-50%, -50%);
}
.rl-cong span::before { width: 16px; height: 3px; }
.rl-cong span::after { width: 3px; height: 16px; }