`. `top` âm tính theo CHIỀU CAO khối chứa (= chiều cao ô ảnh, 1005), `left` theo bề rộng (1010). */ .gd-back { position: absolute; left: 0.2475%; /* (60 - 57,5) / 1010 — mép trái `.gd-frame` ở 57,5 trong 1125 */ top: -23.9801%; /* (323 - 564) / 1005 */ width: 9.5050%; /* 96 / 1010 */ aspect-ratio: 1; display: block; z-index: 2; } .gd-back img { width: 100%; height: 100%; display: block; } /* Phản hồi cú chạm — chép `.result-media__expand:active span` của portal.css, không chế kiểu mới. */ .gd-back:active img { transform: scale(.9); } /* Vùng CHẠM tách khỏi kích thước NHÌN THẤY (32×32 ở khổ 375) — docs/CONVENTIONS.md mục "Tỉ lệ Figma vs sàn 44px". Không cha nào của `.gd-back` có `overflow:hidden` nên vùng này không bị cắt; `.gd-stage` có, nhưng nó là anh em chứ không phải cha. 48px chứ không đúng 44px: hộp hit-test kết thúc TRỪ 1px cuối (nửa mở, giống mọi hộp CSS khác) — QC 11/09 quét đúng bán kính 22px (= 44/2) quanh tâm và trúng cạnh phải/dưới đúng lúc hộp hết, nên rơi ra ngoài (P0-01). Nới thêm 4px dư mỗi phía để 44px luôn nằm THỰC SỰ bên trong, không nằm đúng biên. */ .gd-back::after { content: ''; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); } .gd-stage { position: relative; width: 100%; aspect-ratio: 1010 / 1005; /* ô ảnh đúng số PSD, không làm tròn về 1/1 */ container-type: inline-size; overflow: hidden; /* iOS: nhấn giữ không bật menu "Lưu ảnh" — cùng lý do `.result2-stage` (2026-10-07). */ -webkit-touch-callout: none; /* Vùng cắt ảnh = đúng `Rectangle 1082` của PSD (layer ảnh clip vào nó), KHÔNG phải cả ô 'ZONE ' 61..1071: hình chữ nhật 63..1058 × 564..1569, bo 88 ở cả 4 góc. Bản cũ `border-radius: 16px` trên cả ô 1010 để lộ ảnh ra ngoài khung viền ở 2 chỗ (đo PSD `shape gallery chi tiết`, alpha>128): (1) mực viền bên phải chỉ tới x=1068 mà ô ảnh tới 1071; (2) phần vát góc của viền bắt đầu cách góc ô 20–26 theo đường chéo, bo 16px (≈48 thiết kế) chỉ lùi 14 ⇒ 4 góc ảnh thò ra (user báo 15/09). Bo 88 lùi 25,8 và nằm gọn dưới mực ở cả 4 góc — đã dò từng hàng biên dạng góc TL/BR. inset: phải (1071-1058)/1010, trái (63-61)/1010. Bán kính % trong `round` quy theo hộp của chính phần tử nên tách 2 trục: 88/1010 ngang, 88/1005 dọc. Cùng số cho cả 4 PSD Căn cứ. */ clip-path: inset(0 1.2871% 0 0.1980% round 8.7129% / 8.7562%); } /* ── KHUNG 9:16 CHO VIDEO (acceptance 2026-09-21 QĐ-10, D1–D4) ───────────────────────────── Chỉ Video CÓ file. Ảnh và Nhạc giữ nguyên khung vuông 1010/1005 ở trên (D7). Khung viền: `gal-art-frame-{token}-video.webp` — khung vuông KÉO DÀI dọc bởi tools/figma-assets/build-gallery-video-frames.py: góc vát, khấc và cụm 3 chấm giữ nguyên pixel, chỉ hai dải cạnh trơn được kéo ⇒ hoạ tiết không méo (D2). Ảnh 1146×2200, ô 9:16 nằm ở x 72..1082 (như bản vuông), y 153..1948,6 ⇒ left/width GIỮ số cũ, chỉ `top` quy lại theo chiều cao mới: 153 / 1795,6. Bề rộng: như bản vuông, nhưng co lại khi màn thấp để CẢ khung nằm giữa top bar và nav đáy (D3) — sàn 70% viewport cho màn rất thấp (được cuộn). Ô cách top bar 12cqw thay vì 24cqw: bản vuông chừa 24cqw cho badge + nút Back, ở đây badge vẫn nhô 11,09% bề rộng khung như cũ (vẫn dưới top bar) còn nút Back GIỮ NGUYÊN vị trí trên màn (68px + 2,578cqw) — nó nằm lệch trái, không đụng badge. `cqw` ở đây là của `

` (container), `.gd-frame` không khai container. */ .gd-frame--video { width: max(70%, min(89.7778%, calc((100svh - 68px - 12cqw - var(--nuvi-nav-clearance, 0px) - 4px) * 0.5625))); margin-top: calc(68px + 12cqw); } .gd-frame--video .gd-frame__img { top: -8.5208%; /* −153 / 1795,6 */ } .gd-frame--video .gd-zone-badge { top: -6.2375%; /* −112 / 1795,6 — cùng khoảng nhô như bản vuông (−112/1005) */ } .gd-frame--video .gd-back { top: -9.4220cqw; /* (2,578 − 12) cqw: giữ đúng chỗ trên màn như bản vuông */ } .gd-stage--video { aspect-ratio: 9 / 16; /* Cùng vùng cắt với bản vuông; bán kính dọc quy theo chiều cao mới: 88 / 1795,6. */ clip-path: inset(0 1.2871% 0 0.1980% round 8.7129% / 4.9009%); } .gd-stage--video[data-fit="contain"] .gd-bg__media { object-fit: contain; /* video ngang cũ (E10): hiện trọn, không lớp chữ */ } /* ── Nền: ảnh/video tác phẩm tràn viền ──────────────────────────────────────────────── */ .gd-bg { position: absolute; inset: 0; overflow: hidden; /* Nền lót khi ảnh chưa tải xong, hỏng, hoặc không có (Nhạc) — không để lộ mảng trắng. */ background: linear-gradient(180deg, #4A2A63 0%, #37206A 45%, #46296F 100%); display: flex; align-items: center; justify-content: center; } .gd-bg__media { display: block; width: 100%; height: 100%; object-fit: cover; /* giữ tỉ lệ, cắt giữa — kho có cả ảnh 1:1, 9:16 và 3:4 */ object-position: center; } /* `.gd-bg__audio-label` ("Tác phẩm âm thanh" trên nền tím) ĐÃ GỠ 2026-09-18 — tác phẩm Nhạc nay có nền hoạt cảnh của Căn cứ + lớp chữ `.ra-*` dùng chung với /Result (acceptance 2026-09-18). */ /* ══ TRÌNH PHÁT (lô 2026-09-20) ═══════════════════════════════════════════════════════════ Acceptance docs/acceptance/2026-09-20-gallery-video-audio.md — QĐ-1, B1–B6, C1–C3. ⚠️ GIẢ ĐỊNH CỦA DEV, y như `.result2-play` bên portal.css: bộ design vẽ trang này như một TẤM POSTER TĨNH, không có nút phát nào. Cỡ nút lấy nguyên từ asset designer đã vẽ (result-btn-play.png) và từ khuôn `.result2-play`; vị trí thì do dev đặt và cần design duyệt. Ba phương án vị trí đã dựng thử và chụp ảnh đối chiếu ở ~/Desktop/gallery-av-ux-review. */ .gd-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 22cqw chứ không phải 16cqw của `.result2-play`: ô ở đây nhỏ hơn ô bên /Result (khung viền ăn mất mép), nên cùng một số cqw ra một nút nhỏ hơn về mặt px thật. 22 là số cho ra đường kính NHÌN THẤY xấp xỉ bằng nhau ở hai trang. Sàn 44px là luật chạm (B1) — ở 320px thì 22cqw chỉ còn ~63px nên sàn chưa chạm tới, nhưng nó phải có mặt cho khổ hẹp hơn nữa. */ width: 22cqw; min-width: 44px; aspect-ratio: 1; background: none; border: 0; padding: 0; cursor: pointer; /* Trên khung viền (`.gd-frame__img`, không có z-index nhưng đứng SAU trong DOM nên vẽ đè). Nút phải nằm trên nó, nếu không quầng sáng của viền phủ lên nút. */ z-index: 3; transition: opacity 0.22s ease; } .gd-play img { width: 100%; height: 100%; display: block; } /* Phản hồi cú chạm — chép `.gd-back:active img`, không chế kiểu mới. */ .gd-play:active img { transform: scale(0.92); } /* Đang phát thì nút BIẾN MẤT khỏi cả mắt lẫn tay (B3). `pointer-events:none` là phần bắt buộc: chỉ để opacity 0 thì còn một nút vô hình 22cqw nằm giữa tác phẩm, nuốt mọi cú chạm vào đó. */ .gd-stage[data-playing="true"] .gd-play { opacity: 0; pointer-events: none; } /* Lớp chữ mờ đi khi đang phát — B3/C2. Dùng chung cho `.gd-type` (Ảnh/Video) và `.ra-overlay` (Nhạc): hai khối khác nhau, cùng một luật, nên một class chứ không hai. `visibility` KHÔNG đổi theo: chữ vẫn là nội dung thật của trang, trình đọc màn hình phải đọc được nó kể cả lúc mắt không thấy. */ .gd-fade { transition: opacity 0.5s ease; } .gd-stage[data-playing="true"] .gd-fade { opacity: 0; } @media (prefers-reduced-motion: reduce) { .gd-play, .gd-fade, .gd-bar { transition: none; } } /* Thanh tiến trình. Video: neo ĐÁY ô, trong mép trong của khung viền. Nhạc: `.gd-bar--below`. Màu phần đã phát = token Căn cứ (B1). Hex dự phòng = đúng giá trị @theme của Styles/portal.css: Tailwind chỉ xuất biến `--color-zone-*` khi có class dùng nó, và file này không được quét. */ .gd-bar { --gd-bar-zone: var(--color-zone-sieu-anh-hung, #2F6BFF); position: absolute; left: 8cqw; right: 8cqw; bottom: 5cqw; z-index: 3; display: flex; align-items: center; gap: 2.6cqw; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .gd-bar--mong-mo { --gd-bar-zone: var(--color-zone-mong-mo, #E5308A); } .gd-bar--tham-hiem { --gd-bar-zone: var(--color-zone-tham-hiem, #21C17A); } .gd-bar--sang-tao { --gd-bar-zone: var(--color-zone-sang-tao, #8B5CF6); } /* Nhạc (QĐ-4, 2026-09-22): thanh ra NGOÀI khung vuông, ngay dưới — lớp chữ hiện suốt bài chiếm dải đáy khung (khối ý tưởng 74–97%), để thanh trong khung là đè chữ. Nằm SAU `.gd-frame` trong luồng chứ không trong nó: `top:%` của `.gd-frame__img`/badge/Back quy theo CHIỀU CAO `.gd-frame`, thêm một hàng vào đó là cả khung viền trượt. Cùng bề rộng/căn giữa với `.gd-frame`. Chỗ đứng giữ sẵn cả khi thanh còn ẩn (opacity) — hiện ra không xô dải "Ý tưởng khác". */ .gd-bar--below { position: relative; left: auto; right: auto; bottom: auto; width: 89.7778%; max-width: 646px; height: max(7cqw, 44px); margin: max(10px, 2.6cqw) auto 0; } /* Hiện từ cú chạm phát đầu tiên và ở lại cho tới khi bài về đầu — xem getter `started`. */ .gd-bar[data-shown="true"] { opacity: 1; pointer-events: auto; } /* Bố cục B của Video nằm SÁT MÉP khung (QĐ-5 mới, 21/09) — riêng trang này có hai thứ chiếm đúng hai mép đó mà /Result và video.mp4 không có, nên Gallery lệch khỏi bộ số chung ở ĐÚNG hai chỗ (user chốt 21/09, D5b): · mép dưới: `.gd-bar` — cột box neo đáy ngay TRÊN thanh. Chiều cao thanh = nút dừng max(7cqw, 44px); khe = DescGap 2.2222cqw. `height:auto` trả quyền cho cặp top/bottom. · mép trên: `.gd-zone-badge` thò vào khung 43/1080 — header hạ thêm 30px (2.7778cqw) so với PersistentHeaderShift −41.5741cqw, logo về y 70 thay vì 40. */ .gd-stage .rv-descs { height: auto; bottom: calc(5cqw + max(7cqw, 44px) + 2.2222cqw); } .gd-stage .rv-head { transform: translateY(-38.7963cqw); } .gd-bar__toggle { flex: none; width: 7cqw; min-width: 44px; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; /* Sàn chạm 44px làm nút to hơn hẳn phần nhìn thấy — dồn về giữa bằng padding trong chứ không phóng to icon. Cùng cách `.gd-back` tách vùng chạm khỏi kích thước nhìn thấy. */ display: flex; align-items: center; justify-content: center; } .gd-bar__toggle svg { width: 7cqw; min-width: 18px; height: auto; aspect-ratio: 1; display: block; fill: #ffffff; /* Icon trắng nằm trên chính tác phẩm — nền có thể trắng. Bóng đổ là thứ giữ nó đọc được, KHÔNG phải màu (không có màu nào an toàn trên mọi tấm tranh). */ filter: drop-shadow(0 0.3cqw 0.8cqw rgba(0, 0, 0, 0.75)); } /* ── Thanh KẸO (acceptance 2026-09-22 QĐ-5, concept C user chốt; mockup ~/Desktop/audio-overlay-progress-bar-review/concepts/zoom-C.png) ───────────────────────── Ống bo tròn viền trắng 2px, lòng trắng mờ; phần đã phát đổ màu Căn cứ có sọc chéo (chỉ trôi khi đang phát); viên tròn trắng ở mép phải phần đã phát. `.gd-bar__track` là VÙNG CHẠM của thanh trượt (S4: cao ≥ 44px, `role=slider`), `.gd-bar__rail` là phần NHÌN THẤY. Tách hai lớp vì ống mảnh 14px mà làm vùng chạm là bé chạm hụt. Padding ngang 12px để viên kẹo ở hai đầu vẫn có đủ 44px vùng chạm quanh tâm (cộng khe `gap`). `touch-action:none` (S3): kéo ngang trên thanh không cuộn trang; vuốt ngoài thanh vẫn cuộn. Vị trí chạm quy theo hộp của `.gd-bar__rail` (xem seekFracAt) — fill và viên kẹo cùng tính % theo padding box của rail nên mép phải fill trùng tâm viên kẹo. */ .gd-bar__track { flex: 1; min-width: 0; position: relative; align-self: stretch; min-height: 44px; display: flex; align-items: center; padding: 0 12px; touch-action: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } .gd-bar__rail { position: relative; flex: 1; height: max(14px, 3.6cqw); border: 2px solid #ffffff; border-radius: 99px; /* Lòng TỐI, không phải trắng 25% như mockup C — user chốt 22/09 sau khi prototype đo ra lòng trắng chỉ đạt 1,05–2,3:1 với phần đã phát (B5 đòi ≥ 3:1) và gần như vô hình trên tranh Video sáng. Mực NuVi 85%: đạt ≥ 3:1 với cả 4 màu Căn cứ trên nền trắng tuyệt đối; 72% đã rớt. */ background: rgba(11, 6, 32, 0.85); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .gd-bar__track:focus-visible .gd-bar__rail { box-shadow: 0 0 0 3px var(--gd-bar-zone), 0 1px 4px rgba(0, 0, 0, 0.45); } .gd-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.28) 0 5px, transparent 5px 10px), var(--gd-bar-zone); background-size: 14px 14px, auto; } .gd-bar[data-playing="true"] .gd-bar__fill { animation: gd-bar-stripes 1s linear infinite; } @keyframes gd-bar-stripes { to { background-position: 14px 0, 0 0; } } .gd-bar__knob { position: absolute; top: 50%; left: 0; width: max(18px, 4.8cqw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff 0 40%, #f1ecff 70%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--gd-bar-zone); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .gd-bar__fill { animation: none; } } /* Chip tối sau đồng hồ (user chốt 22/09): chữ trắng + bóng đổ chỉ đạt 1,1:1 trên tranh Video nền trắng — B5 đòi ≥ 4,5:1 trên pixel nền thật, và nền thật của chữ giờ là chip. */ .gd-bar__time { flex: none; min-width: 11cqw; white-space: nowrap; padding: 2px 7px; border-radius: 99px; background: rgba(11, 6, 32, 0.62); text-align: right; color: #ffffff; font-family: var(--font-sans); font-size: max(11px, 3.2cqw); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); } /* Khung NHẠC trong Gallery — CÙNG phép co mà mọi khối `.gd-*` dưới đây dùng (× 0,96024, dịch 1,4851 / 2,1782cqw) để template nằm lọt trong viền trang trí `.gd-frame__img`. Không co thì logo NuVi góc phải trên bị viền cắt mất một phần chữ (chụp thấy 18/09). Làm bằng cách biến `.ra-overlay` thành CONTAINER rộng đúng 96,024% và đặt đúng chỗ, chứ không viết lại bộ số: mọi `cqw` của `.ra-*` bên trong tự tính theo hộp này, nên số trong portal.css (= hằng `SharePosterLayoutAudio`) vẫn là nguồn duy nhất — viết bộ thứ hai là thêm một bản chép tay phải giữ khớp, đúng thứ partial `_AudioFrameText` sinh ra để tránh. */ .gd-stage .ra-overlay { inset: auto; left: 1.4851cqw; top: 2.1782cqw; width: 96.024cqw; aspect-ratio: 1 / 1; container-type: inline-size; } /* ── Khối TYPE: chữ viền trắng, góc trái trên — PORT `.result2-type` ────────────────── */ /* Lề trái/phải của khối chữ và logo LỆCH KHỎI `.result2-*` của /Result từ 11/09, có chủ ý. Bản port dùng lề của /Result — trang đó không có khung viền nên chữ sát mép vẫn đọc được. Ở đây khung viền của bộ design mới đè lên mép ô ảnh: đo trên ảnh chụp thật, chữ "T" của "Tác Phẩm Của:" bị viền ăn mất nửa và logo "NuVi" mất hẳn chữ "i" cuối. Số mới đo thẳng trên poster thiết kế (node 498:42, 1011x1005): chữ bắt đầu ở 3,57% bề rộng, logo nằm trong 78,71%–94,29%. Khi /Result nhận bộ design có khung viền thì port ngược lại. */ .gd-type { position: absolute; left: 4.3496cqw; /* 2.9831 × 0,96024 + 1,4851 */ top: 5.6033cqw; /* 3.5669 × 0,96024 + 2,1782 */ width: 35.1448cqw; /* 36.6 × 0,96024 — lô 2026-09-16, cột trái ≤ 40% */ height: 24.7498cqw; /* 25.7746 × 0,96024 */ /* Quầng TRẮNG — PORT nguyên portal.css `.result2-type` (2026-09-10), xem chú thích ở đó. */ filter: drop-shadow(0 0 0.9335cqw rgba(255, 255, 255, 0.79)); container-type: inline-size; pointer-events: none; } .gd-type > * { position: absolute; margin: 0; color: var(--r2-type); font-family: var(--font-tektur); letter-spacing: -0.05em; white-space: nowrap; } .gd-type__byline, .gd-type__name, .gd-type__title { -webkit-text-stroke-width: 1.5179cqw; /* = .result2-type__* — 6px trên TYPE 36.6% (16/09) */ -webkit-text-stroke-color: #ffffff; paint-order: stroke fill; } .gd-type__age span { -webkit-text-stroke-width: 4.4659cqw; -webkit-text-stroke-color: #ffffff; paint-order: stroke fill; } .gd-type__byline { left: 0.7281cqw; top: 0cqw; font-weight: 500; font-size: 7.7711cqw; line-height: 7.7711cqw; } .gd-type__name { left: 0.6959cqw; top: 9.6260cqw; font-weight: 700; /* `--name-fit` do SERVER tính, cùng con số với `.result2-type__name` và ảnh poster (lô 2026-09-16, B4) — thay bậc `--s1..s4` theo số ký tự. KHÔNG có sàn 11px (khác mục 2 ở đầu file) — user chốt 16/09 "giữ đủ tên, không bị cắt" thắng sàn đọc được: có sàn thì ở khổ ~390 tên ≥ ~20 ký tự chạm sàn rồi bị "…". Trùng /Result, vốn không có sàn. `gallery.mjs` G5 miễn trừ node này. */ font-size: calc(13.4559cqw * var(--name-fit, 1)); line-height: calc(13.4559cqw * var(--name-fit, 1)); max-width: 48.5498cqw; /* chặn bởi mép trái chip tuổi, không phải mép khung */ overflow: hidden; text-overflow: ellipsis; } .gd-type__title { left: 0cqw; top: 23.0885cqw; width: calc(100cqw - 0.05em); /* = .result2-type__title — xem chú thích ở portal.css (16/09) */ font-weight: 700; /* IN HOA — user chốt 2026-09-09. `text-transform` chứ không ToUpper ở server: dữ liệu gốc trong Creation.Title phải giữ nguyên chữ bé đặt (A11-4), đây chỉ là cách hiển thị. Bản poster (SharePosterComposer.V2) in hoa bằng ToUpperInvariant để ra đúng cùng chuỗi. */ text-transform: uppercase; /* CO CHO VỪA 2 DÒNG — hệ số do `fitTitleText()` đo trên trình duyệt rồi ghi vào `--title-fit`, y hệt `.result2-type__title` bên /Result (QC 09/09 P0-01). */ font-size: calc(15.18cqw * var(--title-fit, 1)); /* = .result2-type__title, lô 2026-09-16 */ line-height: calc(18.216cqw * var(--title-fit, 1)); color: var(--r2-title); white-space: normal; /* CHẶN TRÀN NGANG cho chuỗi liền không khoảng trắng — `.result2-type__title` có dòng này từ đầu, bản Gallery thì thiếu. Thiếu nó thì một từ dài không ngắt được: khối chỉ cao 1 dòng nên phép đo "vừa 2 dòng" nói VỪA, không co gì cả, và chữ tràn ngang khỏi 100.1728cqw. */ overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* LƯỚI DỰ PHÒNG khi JS chưa đo xong — bậc thô theo độ dài, đặt `--title-fit` chứ không đặt `font-size` để hệ số đo thật (inline style) vẫn thắng. Xem chú thích dài ở `.result2-type__title--s*` trong NuVi.Portal/Styles/portal.css. */ .gd-type__title--s1 { --title-fit: 0.86; } /* ≥ 18 ký tự */ .gd-type__title--s2 { --title-fit: 0.74; } /* ≥ 24 ký tự */ .gd-type__title--s3 { --title-fit: 0.62; } /* ≥ 30 ký tự */ .gd-type__age { left: 52.2457cqw; top: 13.3306cqw; width: 33.9882cqw; height: 9.4903cqw; container-type: inline-size; } .gd-type__age img { position: absolute; left: 0; top: 0; width: 22.8615cqw; aspect-ratio: 1; display: block; } .gd-type__age span { position: absolute; left: 26.2939cqw; top: 0; font-family: var(--font-tektur); font-weight: 600; font-size: max(11px, 25.1557cqw); /* sàn 11px — xem chú thích ở .gd-type__name */ line-height: max(11px, 25.1557cqw); letter-spacing: -0.05em; color: var(--r2-type); white-space: nowrap; } /* Tuổi xuống hàng riêng / không có tuổi — PORT nguyên `.result2-type--age-row` (lô 2026-09-16). Đặt SAU các luật gốc để đọc theo thứ tự cascade. */ .gd-type--age-row .gd-type__name, .gd-type--no-age .gd-type__name { max-width: 99.3041cqw; } .gd-type--age-row .gd-type__age { left: 0.6959cqw; top: 23.5cqw; } .gd-type--age-row .gd-type__title { top: 33.9903cqw; } /* ── Logo NuVi — PORT `.result2-logo` ────────────────────────────────────────────────── */ .gd-logo { position: absolute; left: 78.7487cqw; /* 80.4630 × 0,96024 + 1,4851 */ top: 4.8456cqw; /* 2.7778 × 0,96024 + 2,1782 */ width: 15.8262cqw; /* 16.4815 × 0,96024 */ display: block; pointer-events: none; } /* Bóng logo — PORT `.result2-logo-shadow` (portal.css, đọc chú thích ở đó), mọi độ dài bóng nhân cùng hệ số 0,96024 với logo. `.gd-stage` có clip-path + container-type ⇒ là stacking context CHỨA `.gd-bg`, nên multiply thấy ảnh nền. top = 4,8456 + 0,7407 × 0,96024 = 5,5569cqw; cao = 5,3704 × 0,96024 = 5,1569cqw. */ .gd-logo-shadow { position: absolute; left: calc(78.7487cqw - var(--r2-logo-shadow-spread) * 0.96024); top: calc(5.5569cqw - var(--r2-logo-shadow-spread) * 0.96024); width: calc(15.8262cqw + 2 * var(--r2-logo-shadow-spread) * 0.96024); height: calc(5.1569cqw + 2 * var(--r2-logo-shadow-spread) * 0.96024); filter: blur(calc(var(--r2-logo-shadow-blur) * 0.96024)); opacity: var(--r2-logo-shadow-a); mix-blend-mode: multiply; pointer-events: none; } /* Ruột (`.logo-shadow::before`) nằm ở portal.css — layout nạp cả hai file. Ở đây chỉ khai độ giãn đã nhân hệ số của khung Gallery. */ .gd-logo-shadow { --logo-shadow-s: calc(var(--r2-logo-shadow-spread) * 0.96024); } /* ── Chữ ý tưởng: ruột tím, viền TRẮNG — PORT nguyên portal.css ─────────────────────── */ .gd-idea__text, .gd-info__text, .gd-idea__name, .gd-info__name { font-family: var(--font-tektur); font-weight: 500; letter-spacing: -0.05em; color: var(--r2-idea); -webkit-text-stroke-color: #ffffff; paint-order: stroke fill; /* Quầng TRẮNG (PSD `OuterGlow`), không phải bóng đổ có màu — PORT nguyên portal.css 2026-09-10, xem chú thích ở đó. */ text-shadow: 0 0 var(--r2-idea-glow-blur) rgb(255 255 255 / var(--r2-idea-glow-a)); margin: 0; } .gd-idea__text, .gd-idea__name, .gd-info__name { color: var(--r2-idea-name); } .gd-idea__text, .gd-idea__name { -webkit-text-stroke-width: 0.9218cqw; } .gd-info__text, .gd-info__name { -webkit-text-stroke-width: 1.3183cqw; } .gd-idea__name, .gd-info__name { font-weight: 700; display: block; overflow-wrap: break-word; /* cùng lý do CHẶN TRÀN như .gd-idea__text/.gd-info__text */ } .gd-idea__text, .gd-info__text { display: -webkit-box; /* 3 -> 7, khớp SharePosterLayoutV2.IdeaTextMaxLines. Từ 2026-09-09 clamp chỉ là LƯỚI CUỐI, việc trình bày do fitIdeaText() lo — xem chú thích cùng tên trong portal.css. */ -webkit-line-clamp: var(--idea-lines, 7); -webkit-box-orient: vertical; overflow: hidden; /* co được trong flex column của __body — xem chú thích ở đó */ /* QC 2026-09-11 P0-01: clamp chạm sàn --idea-fit vẫn có thể cắt giữa từ (câu quá dài để fitIdeaText() nhét vừa ngân sách) — không có dấu hiệu còn chữ, đọc như lỗi hiển thị. */ text-overflow: ellipsis; /* ⚠️ THIẾU cho tới 2026-09-18 — `.result2-idea__text`/`.result2-info__text` của portal.css có dòng này từ lô 09/09, bản port sang Gallery thì rơi mất. Hệ quả đo được 18/09 trên prototype: một chuỗi liền không khoảng trắng (dán nhầm URL, hoặc từ ghép dài) tràn NGANG khỏi cột chữ tới 35px ở vw 320 — chữ trắng đè lên tranh, đúng lớp lỗi mà `.gd-idea__pill span` đã phải vá hôm 10/09. `-webkit-line-clamp` không cứu được vì khối chỉ cao 1 dòng nên phép đo "vừa ngân sách" nói VỪA và vòng co chữ không chạy. */ overflow-wrap: break-word; } /* ── Không có ảnh gốc: khối ý tưởng RỘNG — PORT `.result2-idea` ─────────────────────── */ .gd-idea { position: absolute; left: 4.6859cqw; /* 3.3333 × 0,96024 + 1,4851 */ /* ── NEO ĐÁY, CÓ SÀN (2026-09-15) — PORT `.result2-idea` ── ⚠️ ĐỪNG viết ngoặc nhọn đóng trong chú thích của file này: bộ tách khối CSS của SharePosterLayoutGuardTests cắt luật tại ngoặc đóng ĐẦU TIÊN, nên một cặp ngoặc nằm trong comment làm nó đọc nhầm sang nửa khối và test đỏ với thông báo rất khó lần ra. Bản 11/09 dùng `top` + `height` CỨNG, cộng neo đáy 0 và dồn-về-cuối trên khối con `__body`. Cơ chế đó chặn được tràn thật, nhưng trả giá ở hai chỗ, đo được 15/09: cùng câu 150 ký tự nó chỉ hiện 2/7 dòng ở vw 320 và 3/6 ở 375–402 (NUỐT mất câu), và với câu ngắn thì chữ tựa đáy hộp cứng nên hở tới 7,28cqw dưới pill. Nay khối cao theo nội dung, tựa đáy, mọc LÊN khi dài — vừa không tràn vừa không nuốt, và chữ bám ngay dưới pill ở mọi độ dài. Đáy giữ nguyên 94.7345cqw. ⚠️ `.gd-stage` khai tỉ lệ khung 1010/1005 nên mép đáy sân khấu ở 100 × 1005/1010 = 99.5050cqw, KHÔNG phải 100 — xem `.gd-stack`. */ bottom: 4.7706cqw; /* 99.5050 − 94.7345 */ min-height: 21.0719cqw; /* 94.7345 − 73.6625 — giữ đỉnh ở 73.6625cqw khi câu ngắn */ /* NGÂN SÁCH, không phải cơ chế xén — `fitIdeaText()` đọc biến này để tính SỐ DÒNG nhét vừa, rồi giao cho `-webkit-line-clamp`. Khai bằng biến CSS chứ KHÔNG bằng max-height là có lý do: max-height chặn chiều cao HỘP trong khi chữ vẫn vẽ ra ngoài, tức hộp báo một đằng mực nằm một nẻo — và mọi gate đo theo rect của hộp sẽ mù đúng chỗ đó. Không có max-height thì hộp luôn cao đúng bằng nội dung, rect không bao giờ nói dối. Lưới cuối khi JS không chạy là `-webkit-line-clamp` mặc định 7, cắt theo DÒNG. */ --idea-cap: 57.6216cqw; /* 60.2757 -> 44.0 (2026-09-09): mọi thông tin về NỬA TRÁI khung — team Cloud Ace giữ nửa phải. Trang này PORT template của /Result nên phải đi cùng bộ số với `.result2-idea` trong portal.css và SharePosterLayoutV2.IdeaWidth; lệch một bên là cùng một tác phẩm hiện khác nhau ở hai trang. */ width: 34.8567cqw; /* 36.3 × 0,96024 — lô 2026-09-16 (trước: 44.0) */ container-type: inline-size; pointer-events: none; } .gd-idea__pill { display: block; position: relative; width: 52.5364cqw; aspect-ratio: 342 / 57; container-type: inline-size; } .gd-idea__pill img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .gd-idea__pill span { position: absolute; left: 7.7245cqw; /* `right` + `overflow` THÊM 2026-09-10: bản cũ chỉ có `left`, nên span (absolute, nowrap) là hộp shrink-to-fit và chữ bị sàn 10px giữ lại đã TRÀN 25,2px ra ngoài ảnh pill, đè chữ trắng lên tranh — đo trên 8/8 token dev. `/Result` giấu được lỗi này vì có sẵn hai thứ đó nên nó CẮT thay vì tràn; cùng một gốc rễ, hai triệu chứng. Nay soi gương `.result2-idea__pill span`. */ right: 7.7245cqw; top: 3.5909cqw; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-tektur); font-weight: 700; /* Sàn 10px đã gỡ — xem chú thích ở `.result2-idea__pill span` trong Styles/portal.css. */ font-size: calc(7.6830cqw * var(--pill-fit, 1)); line-height: calc(7.6830cqw * var(--pill-fit, 1)); letter-spacing: -0.05em; text-transform: uppercase; color: #ffffff; white-space: nowrap; } .gd-idea__body { /* `absolute` + `bottom: 0` + `flex-end` (bản 11/09) -> trong luồng, top-align (15/09): khối cha nay cao theo nội dung nên con absolute không còn đóng góp chiều cao, và `flex-end` chính là thứ tạo lỗ 7,28cqw dưới pill khi câu ngắn. Xem chú thích ở `.gd-idea`. `margin-top` = 12.3168 − 8.7561 (chiều cao pill) = 3.5607, giữ nguyên toạ độ Figma. */ position: relative; margin-left: 0.0473cqw; margin-top: 3.5607cqw; width: 99.7368cqw; /* = .result2-idea__body, lô 2026-09-16 */ } .gd-idea__text, .gd-idea__name { /* --idea-fit: hệ số co do fitIdeaText() đặt trên khối cha, mặc định 1. ⚠️ 2026-09-18 — `var(--idea-fit)` chuyển RA NGOÀI `max()`. Bản cũ để nó bên trong (`max(11px, calc(5.2635cqw * fit))`), và điều đó làm vòng co chữ VÔ HIỆU trên mọi khổ điện thoại: `.gd-idea` chỉ rộng 34.8567cqw của sân khấu và tự khai `container-type`, nên 5.2635cqw của con ra ~6,2px ở khổ 375 — sàn 11px luôn thắng, dò `--idea-fit` từ 1.0 xuống 0.55 không đổi nổi một pixel. Đo 18/09 trên prototype: font = 11,00px ở CẢ 9 bề rộng 320–500, với MỌI giá trị `--idea-fit`. Tức cơ chế co chữ chưa từng chạy, và câu dài chỉ còn đường bị `-webkit-line-clamp` cắt — đúng "…" mà team Cloud Ace báo trên iPhone SE. Nay sàn 11px là cỡ GỐC (trước khi co), hệ số co nhân lên cả nó, và SÀN TUYỆT ĐỐI là 8px. 8px không phải số tròn cho đẹp. Ca chật nhất là Template 1 ở vw 320 — cỡ chữ LỚN NHẤT mà câu ở ĐÚNG trần 150 ký tự (LiveSessionLimits.PromptSummaryMaxLength) còn nằm trọn ngân sách `--idea-cap` đo được ở đó là 9,08px với câu thường và 8,34px với câu VIẾT HOA toàn bộ (Tektur hoa rộng hơn thường ~9%). Sàn phải nằm dưới con số nhỏ hơn, nên 8 chứ không phải 9. Sàn này CHỈ cắn ở ca biên: đo 18/09, câu 150 ký tự thường vẫn ra 11,00px ở Template 2 và 10,64px ở Template 1 tại khổ 375 — vòng co chỉ hạ khi thật sự cần. User chốt 18/09: đủ nội dung thắng sàn đọc được, cùng hướng với `.gd-type__name` đã bỏ sàn 11px hôm 16/09. */ font-size: max(8px, calc(max(11px, 5.2635cqw) * var(--idea-fit, 1))); line-height: max(9.6px, calc(max(13.2px, 6.3162cqw) * var(--idea-fit, 1))); } /* "Xem thêm" nằm NGANG HÀNG pill, bên phải nó — dải trống duy nhất của khối này (pill rộng 52.5364cqw trong khối 100cqw). Xuống dòng là nhãn cao gấp đôi, đè dòng đầu. */ .gd-idea, .gd-info { pointer-events: none; } /* ── Có ảnh gốc: ô phác thảo (pill) + khối ý tưởng HẸP — PORT `.result2-sketch`/`.result2-info` */ /* Cụm neo ĐÁY — port `.result2-stack` (2026-09-15). Trước đó `.gd-sketch` đứng cứng ở 38.6672cqw còn chữ ý tưởng đã tựa đáy sẵn, nên khoảng giữa hai khối phình/co theo độ dài câu. ⚠️ CỐ Ý KHÔNG đặt `container-type`: `cqw` của con phải tiếp tục quy theo khung `.gd-stage`. */ .gd-stack { position: absolute; left: 0; width: 100cqw; /* ⚠️ KHÔNG phải `100 − 94.7345`. `.gd-stage` khai `aspect-ratio: 1010 / 1005` (:611) — nó KHÔNG vuông như `.result2-stage`, nên mép đáy sân khấu nằm ở `100 × 1005/1010 = 99.5050cqw`, không phải 100cqw. Trừ từ 100 đẩy cả cụm lên 0,495cqw ≈ 2px so với đáy của `.gd-idea`, và lệch ĐỀU ở mọi bề rộng nên nhìn bằng mắt không ra. Đo trên prototype 15/09, 6 bề rộng. 99.5050 − 94.7345 (đáy `.gd-idea`, = top 73.6625 + height 21.0719) = 4.7706. */ bottom: 4.7706cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.9205cqw; /* SharePosterLayoutV2.SketchInfoGap 2.0 × 0,96024 */ pointer-events: none; } .gd-sketch { position: relative; /* XẾP DỌC với .gd-info từ 2026-09-09 — port đúng thay đổi của `.result2-sketch`. ⚠️ 2026-09-15: 4.6859 -> 1.7718 — port việc căn lề theo MỰC thay vì theo hộp, xem chú thích dài ở `.result2-sketch` trong portal.css. */ margin-left: 1.7718cqw; /* SharePosterLayoutV2.SketchLeft 0.2986 × 0,96024 + 1,4851 */ width: 24.9662cqw; /* 26.0 × 0,96024 */ aspect-ratio: 1; container-type: inline-size; pointer-events: none; } .gd-sketch__photo { position: absolute; left: 11.5753cqw; top: 14.1956cqw; /* = SketchPillTop + SketchPillHeight — ảnh đứng DƯỚI pill, không đè */ width: 84.2707cqw; height: 80.2579cqw; /* đáy giữ nguyên 94.4535cqw như trước khi tách pill */ object-fit: contain; display: block; background-color: #ffffff; /* nền trắng lộ ra quanh ảnh khi contain hụt khung — theo design gốc */ /* Màu và độ mờ theo Căn cứ — ba Căn cứ mới dùng mực đậm nên phải mờ hơn cùng một hình dạng bóng, xem `ZonePosterPalette.SketchShadowOpacity`. */ box-shadow: 0 8px 21.5px color-mix(in srgb, var(--r2-sketch-shadow) calc(var(--r2-sketch-shadow-a) * 100%), transparent); } .gd-sketch__pill { display: block; position: absolute; left: 11.6719cqw; top: 0.3155cqw; width: 84.2271cqw; aspect-ratio: 267 / 44; container-type: inline-size; } .gd-sketch__pill img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .gd-sketch__pill span { position: absolute; left: 7.4963cqw; right: 7.4963cqw; /* CHẶN TRÀN — cùng lý do như `.gd-idea__pill span` (tràn 29,3px) */ top: 3.5086cqw; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-tektur); font-weight: 700; font-size: calc(7.6985cqw * var(--pill-fit, 1)); line-height: calc(7.6985cqw * var(--pill-fit, 1)); letter-spacing: -0.05em; text-transform: uppercase; color: #ffffff; white-space: nowrap; } .gd-info { position: relative; /* 2026-09-09: xuống DƯỚI ô phác thảo và về cột trái — port `.result2-info`. 2026-09-15: mép đáy chuyển lên `.gd-stack` (cả cụm cùng treo từ đáy), nên khối này thôi khai `top`/`height` cố định và cao theo nội dung như `.result2-info`. max-height chặn khối trèo lên đội ô phác thảo vào khối TYPE. */ margin-left: 4.6859cqw; /* 3.3333 × 0,96024 + 1,4851 */ width: 34.8567cqw; /* 36.3 × 0,96024 — lô 2026-09-16 (trước: 44.0) */ /* NGÂN SÁCH, không phải cơ chế xén — `fitIdeaText()` đọc biến này để tính SỐ DÒNG nhét vừa, rồi giao cho `-webkit-line-clamp`. Khai bằng biến CSS chứ KHÔNG bằng max-height là có lý do: max-height chặn chiều cao HỘP trong khi chữ vẫn vẽ ra ngoài, tức hộp báo một đằng mực nằm một nẻo — và mọi gate đo theo rect của hộp sẽ mù đúng chỗ đó. Không có max-height thì hộp luôn cao đúng bằng nội dung, rect không bao giờ nói dối. Lưới cuối khi JS không chạy là `-webkit-line-clamp` mặc định 7, cắt theo DÒNG. */ --idea-cap: 30.2764cqw; /* ⚠️ GIỮ BỐN DÒNG DƯỚI. Chúng là thứ khiến phần chữ dôi dư tràn LÊN rồi bị xén, thay vì đẩy dòng tên bé XUỐNG dưới đáy khung. Bộ số cũ có được điều đó "miễn phí" nhờ hộp cao CỐ ĐỊNH: thẻ chữ là flex item trong hộp định chiều nên bị co, `-webkit-line-clamp` nuốt phần thừa, và tên luôn ghim ở đáy. Lô 15/09 đổi hộp sang cao-theo-nội-dung để cả cụm tựa đáy được — mất luôn cơ chế đó, và đo được trên prototype: ở vw 320 tên bé tụt 6,49cqw xuống dưới đáy thiết kế rồi bị `overflow: hidden` của sân khấu cắt (bản Gallery tràn thật 5px). Đó chính là P1-01 của QC 07/09 tái phát. `justify-content: flex-end` + `overflow: hidden` trả lại cơ chế cũ mà không phải bỏ cụm neo đáy. Ở bề rộng ≥ 390 nội dung vào lọt trần nên bốn dòng này không làm gì cả — chúng chỉ là lưới cho dải hẹp. */ /* ⚠️ Cắt theo DÒNG, không cắt theo PIXEL — xem chú thích cùng tên ở `.result2-info` trong portal.css. Tóm tắt: overflow ẩn cắt theo pixel nên nó chặt ngang thân chữ ở vw 320 (còn 4,15px trên hộp em 11,8px), mà phép kiểm tràn khung không bắt được. Nay `fitIdeaText()` tính số dòng vừa khung rồi đặt `--idea-lines`, clamp đọc biến đó, nên mọi phép cắt rơi đúng ranh giới dòng. Mục G16 của gallery.mjs canh đúng điều này. */ container-type: inline-size; pointer-events: none; } .gd-info__body { position: relative; width: 99.7367cqw; /* = .result2-info__body, lô 2026-09-16 */ /* `min-height: 0` + flex column: để THẺ CHỮ co được trong hộp đã chạm trần, cho `line-clamp` cắt gọn theo dòng thay vì hộp xén ngang thân chữ. Không có nó thì flex item giữ nguyên chiều cao nội dung và phép co ở trên thành vô nghĩa. */ } .gd-info__text, .gd-info__name { /* Xem chú thích --idea-fit (và sàn 8px của lô 18/09) ở .gd-idea__text. */ font-size: max(8px, calc(max(11px, 5.2660cqw) * var(--idea-fit, 1))); line-height: max(9.6px, calc(max(13.2px, 6.3191cqw) * var(--idea-fit, 1))); } /* Nhãn "Xem thêm" và vùng chạm của nó đã GỠ 2026-09-09 cùng bản /Result — câu ý tưởng nay co nhỏ cho vừa khung thay vì bị cắt (fitIdeaText trong Views/Gallery/Detail.cshtml). */ /* ── Lớp đọc toàn văn ý tưởng — PORT `.result-idea-modal` nguyên khối (portal.css:1931+). Fixed theo viewport, px tuyệt đối — không phụ thuộc cqw của .gd-stage nên copy thẳng, không quy đổi lại. */ .gd-idea-modal { position: fixed; inset: 0; z-index: 95; background: rgba(6, 2, 20, .94); display: none; align-items: center; justify-content: center; padding: 6vmin; } .gd-idea-modal[data-open="true"] { display: flex; } .gd-idea-modal__panel { position: relative; width: min(92vw, 560px); max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 20px 22px; border-radius: 18px; background: #2A1364; border: 2px solid #8C4BED; box-shadow: 0 0 24px rgba(140, 75, 237, .45); } .gd-idea-modal__title { display: block; margin-bottom: 12px; padding-right: 44px; color: #C9A6FF; font-family: var(--font-tektur); font-weight: 600; font-size: 16px; line-height: 1.2; } .gd-idea-modal__text { margin: 0; color: #faf3fd; font-family: var(--font-tektur); font-weight: 700; font-size: 17px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word; } .gd-idea-modal__close { position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } /* Nút Chia sẻ ĐÃ GỠ 2026-09-11 (user chốt): bộ design mới không vẽ nó ở trang chi tiết. Đường đi tới trang chia sẻ vẫn còn — /Result/{token} — chỉ là không vào từ đây nữa. Kéo theo: mục E6 của docs/qc/2026-09-08-gallery-detail-result-style.md và phần đo nút này trong case G4 của tools/ui-check/regression/gallery.mjs đều phải sửa, không phải để đỏ. */ /* ---------- ý tưởng khác cùng zone ---------- */ .gd-related { width: 91.6444%; /* 1031 / 1125 — nhóm 'box phụ' của PSD, không phải 1065 */ /* Hở từ mép dưới ô ảnh tới chữ tiêu đề: PSD cho mực viền dưới kết thúc ở y=1574 và mực chữ bắt đầu ở y=1647 ⇒ 73px thiết kế = 24,3px CSS ở khổ 375. Bản trước để 1.4cqw ⇒ đo được 3,9px, tiêu đề gần như dính vào khung. */ margin: 6.4178cqw auto 0; /* (1641,2 - 1569) / 11,25 */ } /* Figma cho tiêu đề cao 38px ⇒ 10.8px ở bề rộng 320px — dưới sàn 11px. */ .gd-related__heading { /* (1718 - 1690,8) / 11,25 = 2.4178cqw ra đúng khoảng cách HỘP DÒNG ↔ mép trên 3 ô, nhưng QC 11/09 đo bằng MỰC (không phải hộp) thấy hở dư ~3px ở cả 4 viewport: line-height:1.2 nhỏ hơn leading tự nhiên của font Tektur nên mực chữ tràn XUỐNG dưới mép hộp dòng thay vì thụt vào, cộng với 13/444 lề trong sẵn có của khung 3 ô — hai khoản này không có trong số Figma. Trừ lùi đúng phần dư đo được (~3px @375) để mực-tới-mực khớp tiêu chí C3, không phải hộp-tới-hộp. */ margin: 0 0 1.6231cqw; /* 2.4178cqw − phần dư đo bằng mực, xem docs/qc/2026-09-11-gallery-detail-spacing-back-folder.md P0-02 */ padding-left: 1.4549%; /* (62 - 47) / 1031 */ color: #ffffff; font-family: var(--font-tektur); font-size: max(11px, 3.378cqw); /* 38 / 1125 */ line-height: 1.2; font-weight: 700; } .gd-related__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.0970%; /* 1 / 1031 — PSD xếp ba ô cách nhau đúng 1px thiết kế */ } .gd-rel { position: relative; display: block; aspect-ratio: 343 / 444; container-type: inline-size; text-decoration: none; } /* Khung ô liên quan có RUỘT ĐẶC màu (giống khung ảnh tác phẩm, khác khung thẻ ở trang lưới vốn đã được khoét trong suốt). Nên ảnh phải nằm TRÊN khung, không nằm dưới — để khung ở z-index cao hơn là nó bịt kín ảnh, và ba ô hiện ra ba khung xanh rỗng. Ảnh chụp bắt được. */ .gd-rel__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Ảnh = `Rectangle 1080` của PSD (layer ảnh clip vào nó), trong khung 343x444 ở gốc (43, 1718): path 87,35..343,65 × 1827,26..2122,55 ⇒ 44,35..300,65 × 109,26..404,55, bo 11, stroke 3px CĂN GIỮA path, tô gradient dọc 3 điểm màu theo Căn cứ. Bản trước (15/09) đặt ảnh sát mép trong viền sáng của asset (22..323 × 90..427) — to hơn thiết kế và đè lên phần vát 2 góc đáy khung, nên 2 góc dưới ảnh thò ra ngoài khung (user báo 15/09). Thiết kế chừa một dải ruột khung màu đặc quanh ảnh. Hộp này là MÉP NGOÀI của stroke (path ± 1,5): 42,85..302,15 × 107,76..406,05. Stroke vẽ bằng `border` trong suốt + nền gradient `border-box`: con absolute `inset:0` bám padding box (bên trong border) và `overflow:hidden` cắt theo bán kính TRONG = 12,5 − 3 = 9,5, nên ảnh tự rơi đúng vào mép trong stroke — không cần phần tử phụ. */ .gd-rel__media { position: absolute; left: 12.4927%; /* 42,85 / 343 */ right: 11.9096%; /* (343 - 302,15) / 343 */ top: 24.2703%; /* 107,76 / 444 */ bottom: 8.5473%; /* (444 - 406,05) / 444 */ z-index: 1; display: block; overflow: hidden; border: 0.8746cqw solid transparent; /* 3 / 343 */ border-radius: 3.6443cqw; /* (11 + 1,5) / 343 */ background: linear-gradient(#0b1740, #0b1740) padding-box, linear-gradient(to top, var(--gd-rel-stroke-a), var(--gd-rel-stroke-b) 50%, var(--gd-rel-stroke-c)) border-box; } /* Màu stroke ô liên quan — `strokeStyleContent` của `Rectangle 1080` trong từng PSD "Chi tiết tác phẩm" (Angl 90 ⇒ điểm 0 ở ĐÁY). Mặc định = Siêu Anh Hùng, cùng luật rơi về Căn cứ mặc định của `themeToken` trong Detail.cshtml. */ .gd-related { --gd-rel-stroke-a: #63a3ff; --gd-rel-stroke-b: #b6dcff; --gd-rel-stroke-c: #72beff; } .gd-related--mong-mo { --gd-rel-stroke-a: #ff63bb; --gd-rel-stroke-b: #ffc6ea; --gd-rel-stroke-c: #ff63bb; } .gd-related--sang-tao { --gd-rel-stroke-a: #b763ff; --gd-rel-stroke-b: #ead3ff; --gd-rel-stroke-c: #b763ff; } .gd-related--tham-hiem { --gd-rel-stroke-a: #7dff63; --gd-rel-stroke-b: #d3ffda; --gd-rel-stroke-c: #7dff63; } /* absolute vì cùng lý do với .gd-art__img: chữ dự phòng đứng trước trong DOM và đã định vị, nên ảnh nằm trong luồng sẽ bị chính nó vẽ đè. */ /* Chip loại hình của ô liên quan (lô 2026-09-20, acceptance D2). Cùng ngôn ngữ với `.gal-card__type` của lưới, nhưng KHÔNG dùng chung khai báo: ô này có `border-radius` riêng (không có vát góc như thẻ lưới) nên hai số neo góc khác hẳn, và cqw ở đây quy theo hộp `.gd-rel` 343 chứ không theo thẻ 514. Gộp lại thành một class là ép hai hộp khác nhau dùng chung một bộ toạ độ — đúng cái bẫy mà `.gd-type` đã phải tách khỏi `.result2-type`. */ .gd-rel__type { position: absolute; left: 4.4cqw; top: 3.8cqw; z-index: 2; display: inline-flex; align-items: center; padding: 0.8cqw 2.2cqw; border-radius: 99px; background: rgba(10, 16, 44, 0.82); border: 1px solid rgba(160, 190, 255, 0.32); color: #e8efff; font-family: var(--font-sans); /* Sàn 11px của G5. Ô liên quan hẹp hơn thẻ lưới nhiều nên sàn là thứ quyết định ở mọi khổ máy thật — con số cqw chỉ có tác dụng trên màn rất rộng. */ font-size: max(11px, 3.2cqw); font-weight: 600; line-height: 1.25; white-space: nowrap; pointer-events: none; } .gd-rel__media img, .gd-rel__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gd-rel__msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 6cqw; color: #cbd8ff; font-family: var(--font-sans); font-size: max(11px, 6cqw); line-height: 1.3; text-align: center; } /* Figma cho chữ cao 23px ⇒ 6.5px ở bề rộng 320px — dưới sàn ở CẢ BA bề rộng đo. */ /* Icon folder + tên xếp thành MỘT HÀNG NEO TRÁI, không canh giữa. PSD (ô 343 rộng): icon ở x=50, chữ ở x=92 — ba ô của bộ design có tên dài 205/186/205px mà icon vẫn đứng nguyên ở 50/50/53, tức khối này neo trái chứ không canh giữa (canh giữa thì ô giữa phải lệch sang phải ~10px). */ .gd-rel__title { position: absolute; left: 14.5773%; /* 50 / 343 */ right: 5.83%; /* (343 - 323) / 343 — mép trong khung, như .gd-rel__media */ top: 11%; /* 61.5 / 444 */ z-index: 2; display: flex; align-items: center; gap: 2.6239cqw; /* 9 / 343 — chữ rơi đúng 14.5773 + 9.6210 + 2.6239 = 26.8222% */ color: #ffffff; font-family: var(--font-tektur); font-size: max(11px, 6.706cqw); /* 23 / 343 */ line-height: 1.2; overflow: hidden; } /* `aspect-ratio` chứ không phải `height`: tên dài làm co cột chữ, icon PHẢI giữ nguyên tỉ lệ 33:25 chứ không bị bóp — `flex: 0 0 auto` chặn cả việc flexbox rút bề rộng của nó. */ .gd-rel__folder { flex: 0 0 auto; width: 9.6210cqw; /* 33 / 343 */ aspect-ratio: 33 / 25; display: block; } /* `min-width: 0` là bắt buộc: mặc định `min-width:auto` của flex item khiến chữ nowrap ĐẨY RỘNG ô thay vì bị cắt, và ellipsis không bao giờ hiện. */ .gd-rel__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }