/* ============================================================ Brand B · ReviewFilm Trang: controls/ReviewFeed.ascx (surface ReviewFilm duy nhất) Tinh thần: rạp chiếu tối — video là nhân vật chính, UI lùi hết về sau. Dark only. Glow đỏ CHỈ ở nút Play + nút active. STATE (class trên , JS bật/tắt — xem js/review.js): .is-playing đang phát → mọi overlay ẩn, còn progress bar .reading-open sheet/panel "Đọc nội dung" mở .comments-open sheet Bình luận mở .menu-open overlay hamburger mở .dropdown-open dropdown Danh mục mở ============================================================ */ /* QUY TẮC MÀU ĐỎ — --rp-red #E11D2E chỉ đạt 4.16:1 trên --rp-bg, KHÔNG bao giờ dùng làm màu chữ/glyph. Chữ và icon đỏ dùng --rp-red-hot #FF2A3C (5.18:1). --rp-red giữ cho mảng đặc: nút, thanh điểm, progress fill, vạch dọc 3px, bullet, viền. */ body.rp { background: var(--rp-bg); color: var(--rp-text); font-family: var(--rp-font); font-size: 14px; line-height: 1.6; } /* :where() → specificity 0, không đè rule màu của .rp-btn / .rp-chip / .rp-index… */ .rp :where(a) { color: var(--rp-red-hot); text-decoration: none; } .rp :where(a):hover { color: var(--rp-red-hot); } .rp :focus-visible { outline: 2px solid var(--rp-red-hot); outline-offset: 3px; } .rp ::selection { background: var(--rp-red); color: #fff; } /* ============ LOGO ============ */ .rp-logo { font-size: 15px; white-space: nowrap; } .rp-logo b { color: var(--rp-red-hot); font-weight: 800; letter-spacing: .15em; } .rp-logo i { color: var(--rp-text); font-weight: 300; font-style: normal; letter-spacing: .30em; } /* ============ HEADER ============ */ .rp-header { /* sticky, không relative — trang có section nội dung dưới feed nên header phải bám theo khi cuộn qua. Vẫn chiếm chỗ trong luồng nên calc(100dvh - var(--rp-header-h)) của feed giữ nguyên đúng. */ position: sticky; top: 0; z-index: 22; /* Nền ĐỤC bắt buộc — header sticky nằm trên ~1900px nội dung cuộn qua (section SEO dưới feed). Trong suốt thì chữ chạy xuyên qua logo và pill Danh mục. --rp-surface là token brief gán sẵn cho header. Lưu ý: header KHÔNG bao giờ đè lên video — nó chiếm chỗ trong luồng, player bắt đầu ngay dưới — nên không mất gì khi để đục. */ background: var(--rp-surface); flex: none; height: var(--rp-header-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: var(--rp-header-px); /* Không transition opacity — đây là property mang state (.is-playing), transition có thể không tick nên header sẽ đứng ở opacity 1. */ } .is-playing .rp-header { opacity: .35; } .menu-open .rp-header { opacity: 0; pointer-events: none; } .rp-header__tools { display: flex; align-items: center; gap: 8px; } .rp-pill { height: 44px; padding-inline: 14px; border-radius: var(--rp-r-pill); border: 1px solid var(--rp-border); color: var(--rp-text); font-size: 13px; white-space: nowrap; flex: none; display: flex; align-items: center; gap: 7px; } .rp-pill:hover { border-color: var(--rp-red); } .rp-pill__chev { font-size: 9px; color: var(--rp-muted); transition: transform .2s; } .dropdown-open .rp-pill__chev { transform: rotate(180deg); } .rp-iconbtn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rp-border); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-inline: 10px; } .rp-iconbtn:hover { border-color: var(--rp-red); } .rp-iconbtn i { height: 2px; border-radius: 2px; background: var(--rp-red); } /* ============ FEED · scroll-snap từng video ============ */ .rp-app { display: flex; flex-direction: column; } .rp-feed { flex: none; height: calc(100dvh - var(--rp-header-h)); overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rp-feed::-webkit-scrollbar { display: none; } .rp-slide { height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; padding: 6px 12px 0; scroll-margin-top: 0; } /* ============ PLAYER ============ */ .rp-player { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rp-border-soft); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--rp-surface); } .rp-stage { position: relative; flex: 1; min-height: 0; width: 100%; padding: 0; overflow: hidden; background: repeating-linear-gradient(135deg, #121214 0 12px, #17171A 12px 24px); } .rp-stage__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-inline: 34px; transition: opacity .3s; } /* Khi video sấn sàng thì ẩn placeholder. visibility phải đi kèm opacity — transition có thể không tick, khi đó visibility vẫn dọn placeholder đi để video hiện ra. */ .rp-stage.has-video .rp-stage__ph { opacity: 0; visibility: hidden; } .rp-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0A0A0B; } .rp-stage__ph .ph__label { color: #8A8A92; } /* 5.26:1 */ .rp-stage__ph .ph__label span { color: #808088; } /* 4.60:1 */ .rp-stage__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,6,7,.92) 4%, rgba(6,6,7,.35) 34%, rgba(6,6,7,0) 62%); } /* ---------- Nút Play: glow đỏ (1 trong 2 chỗ duy nhất) ---------- .rp-playbtn là ANH EM của .rp-stage, phủ lên nó — KHÔNG phải tổ tiên (ADR-019 (b)). Neo vào .rp-player, box trùng .rp-stage, đúng mẫu .rp-overlay đã dùng. Nằm TRƯỚC .rp-overlay / .rp-progress / .rp-fsbtn trong DOM nên ba thứ đó xếp lớp bên trên và ăn cú bấm trước. */ .rp-playbtn { position: absolute; inset: 0; padding: 0; } .rp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .25s; } .rp-play__disc { width: 98px; height: 98px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); box-shadow: var(--rp-glow), inset 0 0 22px rgba(225, 29, 46, .18); display: flex; align-items: center; justify-content: center; } .rp-play__disc::after { content: ""; width: 0; height: 0; margin-left: 7px; border-left: 26px solid #fff; border-block: 16px solid transparent; } .is-playing .rp-play { opacity: 0; visibility: hidden; } /* ---------- Overlay: tiêu đề + rail ---------- Neo vào .rp-player (box trùng .rp-stage) vì .rp-overlay là sibling của stage — tránh nested button. */ .rp-overlay { position: absolute; inset: 0; pointer-events: none; transition: opacity .25s; } .rp-rail__btn { pointer-events: auto; } .is-playing .rp-overlay, .reading-open .rp-overlay, .comments-open .rp-overlay { opacity: 0; visibility: hidden; } .rp-titleblock { position: absolute; left: 16px; right: 88px; bottom: 22px; } .rp-titleblock__main { display: flex; gap: 14px; } /* Signature element: vạch đỏ dọc neo mọi tiêu đề */ .rp-bar { flex: none; width: 3px; border-radius: 2px; background: var(--rp-red); } .rp-film { margin: 0; font-size: 27px; font-weight: 800; line-height: 1.16; letter-spacing: -.01em; } .rp-film__tag { font-size: 14px; color: #D6D6DA; margin-top: 10px; line-height: 1.5; } .rp-facts { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-left: 17px; font-size: 15px; } .rp-facts__star { color: var(--rp-red-hot); } .rp-facts__score { font-weight: 600; } .rp-facts__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .18); } .rp-facts__genre { color: var(--rp-muted); font-size: 13px; } .rp-rail { position: absolute; right: 14px; /* 186px ở khung 390×844 · tự co khi stage thấp hơn để rail không bị cắt */ bottom: min(186px, calc(100% - 280px)); display: flex; flex-direction: column; gap: 18px; align-items: center; } .rp-rail__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; } /* .rp-fsbtn (nút toàn màn hình, P4-T04) dùng CHUNG khai báo này thay vì chép lại rgba(20,20,22,.72) — một giá trị màu, một chỗ khai. Nó ghi đè width/height/ font-size ở khối riêng bên dưới, phần nền + viền + căn giữa thì kế thừa. */ .rp-rail__disc, .rp-fsbtn { width: 52px; height: 52px; border-radius: 50%; background: rgba(20, 20, 22, .72); border: 1px solid var(--rp-border); display: flex; align-items: center; justify-content: center; font-size: 19px; } .rp-rail__disc--like { color: var(--rp-red-hot); font-size: 21px; } .rp-rail__n { font-size: 12px; font-weight: 500; } /* ---------- Progress: chỉ hiện khi đang phát ---------- ANH EM của .rp-stage, không phải con của nút phát (ADR-019 (c)). Từ P4-T04 đây là ĐIỀU KHIỂN THẬT (role="slider"), không còn là trang trí. flex column có chủ đích: margin của .rp-progress__track là ÂM (xem dưới) và margin âm sẽ thu gọn với margin-top của .rp-progress__time trong ngữ cảnh block thường, đẩy hàng thời lượng lệch ~20px. visibility (không phải display) giữ nguyên từ B2, và nó cũng chính là thứ loại điều khiển đang ẩn khỏi thứ tự Tab — yêu cầu a11y, không phải tình cờ. */ .rp-progress { position: absolute; left: 16px; right: 16px; bottom: 20px; display: flex; flex-direction: column; visibility: hidden; } /* Không có