/* ================================================================ MediaView.css - BO XEM ANH DUNG CHUNG (module doc lap) Boc verbatim tu GuestPostIdeaDetail.aspx (cua so .popup-idea). Nap file nay o BAT KY trang nao render cua so xem anh 3 khu (anh | cot thumbnail | panel). Rule global (html,body, noscroll) van nam trong fragment. JS bo view: Content/Scripts/page.js. ================================================================ */ @media (min-width: 768px) { /* ---------- Lớp nền phía sau ---------- ⚠ PHẢI đủ tối (0.88). Cả 3 khu đều trong suốt nên chữ trắng của khu bình luận nằm thẳng trên lớp này. Để 0.62 như ban đầu thì trên trang nền SÁNG (trang chủ nền trắng) chữ trắng gần như không đọc được — đã thử và bị. Đây cũng là lý do không thể chỉnh độ tối theo cảm giác: phải tính cho trường hợp trang nền sáng nhất. */ .popup-idea { background: rgba(11, 22, 34, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ⚠ border-radius:0 — .dialog-box (khung ngoài cùng, phủ kín 1440x900) mang sẵn bo góc 10px của Site.css. Cửa sổ chạy hết chiều ngang nên 4 góc bo đó lộ ra ở 4 góc màn hình. */ .popup-idea .dialog-box { padding: 0 !important; border-radius: 0 !important; vertical-align: middle; } /* Hết chiều ngang, cao 80% màn hình. ⚠ Dùng 100% chứ KHÔNG dùng 100vw: khi trang nền còn thanh cuộn dọc thì 100vw rộng hơn vùng nhìn thấy ~7-17px -> sinh thanh cuộn ngang. Đây là lỗi đã dính 2 lần ở banner. */ .popup-idea .dialog-content { width: 100% !important; height: 80vh !important; min-height: 0 !important; max-height: 80vh; border-radius: 0; overflow: hidden; background: none; box-shadow: none; } .popup-idea .dialog-main { height: 100%; } /* ---------- Chia 3 khu: 2 : (0.25 + 0.75) = 2 : 1 ---------- */ .popup-idea .Window { display: grid; grid-template-columns: 2fr 0.25fr 0.75fr; height: 100%; min-height: 0 !important; background: none !important; } /* Ba khu vốn là position:absolute (Site.css). Phải gỡ về relative thì lưới mới xếp được chúng thành 3 cột. ⚠ min-width: 0 là BẮT BUỘC — đã dính lỗi này: lightSlider đặt bề rộng CỨNG cho dải ảnh (1100px × 14 ảnh). Ô lưới mặc định KHÔNG co nhỏ hơn nội dung bên trong, nên khu ảnh phình ra 188.280px, nuốt sạch hai khu kia (còn 25px và 1px). Đặt min-width:0 mới cho phép ô co lại đúng tỉ lệ. */ .popup-idea #listImageIdea, .popup-idea #cqCotAnh, .popup-idea #boxDetailIdea { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; max-width: none; height: 100%; min-height: 0; min-width: 0; box-shadow: none; } /* ---------- KHU 1: ảnh ---------- */ /* Nền TRONG SUỐT -> phần lót quanh ảnh chính là lớp nền phía sau, nên luôn trùng màu, không bao giờ lệch. overflow:hidden để phần dải ảnh thừa bị cắt gọn trong khung. */ .popup-idea #listImageIdea { background: none; overflow: hidden; } /* Dải ảnh nhỏ NẰM NGANG có sẵn của lightSlider: ẩn đi. Ta không xoá nó — vẫn giữ để dùng làm bộ điều khiển: bấm ảnh trong cột dọc sẽ chuyển tiếp cú bấm sang đây, nhờ vậy KHÔNG phải viết lại logic chuyển ảnh của lightSlider. */ .popup-idea .lSGallery { display: none !important; } .popup-idea .lSSlideOuter, .popup-idea .lSSlideWrapper { height: 100%; } /* ---------- KHU 2: cột ảnh nhỏ (dọc, 1 cột) ---------- */ .popup-idea #cqCotAnh { border-left: 1px solid rgba(255, 255, 255, 0.14); overflow-y: auto; overscroll-behavior: contain; /* lăn hết cột thì DỪNG, không lây ra trang */ padding: 12px; box-sizing: border-box; } .popup-idea #cqCotAnh::-webkit-scrollbar { width: 6px; } .popup-idea #cqCotAnh::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; } .popup-idea #cqCotAnh::-webkit-scrollbar-track { background: transparent; } /* Ảnh nhỏ giữ ĐÚNG TỈ LỆ GỐC (không ép vuông, không cắt). ⚠ KHÔNG bo góc — chủ web yêu cầu 2026-07-22. */ .popup-idea .cq-anh-nho { display: block; margin: 0 0 8px; border: 2px solid transparent; border-radius: 0; overflow: hidden; cursor: pointer; line-height: 0; background: rgba(255, 255, 255, 0.06); } .popup-idea .cq-anh-nho img { width: 100%; height: auto; display: block; } .popup-idea .cq-anh-nho.dang-xem { border-color: #5f8c3a; } /* ---------- KHU 1 khi là bài HỎI-ĐÁP: nền một màu + nội dung ---- Ảnh cũ (dương xỉ, bầu trời... có chữ in đè) vẫn nằm trong dữ liệu nhưng thôi không hiện: chúng không liên quan gì tới câu hỏi, mỗi bài một kiểu, nhìn rất tạp. */ .popup-idea #listImageIdea:has(.cq-khung-hoi) .lSSlideOuter, .popup-idea #listImageIdea:has(.cq-khung-hoi) #lightSlider { display: none !important; } .popup-idea .cq-khung-hoi { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 48px; overflow-y: auto; overscroll-behavior: contain; } .popup-idea .cq-khung-hoi__trong { width: 100%; max-width: 680px; } .popup-idea .cq-khung-hoi__ma { margin-bottom: 14px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; letter-spacing: .1em; } .popup-idea .cq-khung-hoi__hoi { margin: 0; color: #ffffff; font-size: 30px; font-weight: 700; line-height: 1.35; } .popup-idea .cq-khung-hoi__noidung { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.7; } /* ---------- KHU 2 khi là bài HỎI-ĐÁP: mã câu hỏi khác ---------- ⚠ Cột giữ NGUYÊN bề ngang như cột ảnh nhỏ bên bài ý tưởng (0.25fr ~ 120px) — vì vậy chỉ ghi MÃ câu hỏi, không ghi chữ. Tên đầy đủ nằm ở title, rê chuột vào là thấy. */ .popup-idea .cq-cot-trong { padding: 4px 2px; color: rgba(255,255,255,.40); font-size: 12px; line-height: 1.5; } .popup-idea .cq-cot-tieude { margin: 2px 2px 10px; color: rgba(255,255,255,.45); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .popup-idea .cq-cau-hoi { display: flex; align-items: center; justify-content: center; margin: 0 0 8px; padding: 14px 8px; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .15s ease, filter .15s ease; } .popup-idea .cq-cau-hoi:hover { filter: brightness(1.12); transform: translateY(-1px); } /* ---------- KHU 3: nội dung + bình luận ---------- */ /* Cùng nền trong suốt -> chữ phải SÁNG mới đọc được. */ .popup-idea #boxDetailIdea { border-left: 1px solid rgba(255, 255, 255, 0.14); background: none; color: #ffffff; } .popup-idea #boxDetailIdeaScroll { top: 0; bottom: 76px; padding: 0 0 8px; overscroll-behavior: contain; scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(255,255,255,.22) transparent; } .popup-idea #boxDetailIdeaScroll::-webkit-scrollbar { width: 6px; } .popup-idea #boxDetailIdeaScroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 99px; } .popup-idea #boxDetailIdeaScroll::-webkit-scrollbar-track { background: transparent; } .popup-idea #postByIdea { height: auto; min-height: 72px; padding: 18px 22px 16px; background: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } /* ⚠ Phải có "* " ở sau: tên tác giả nằm trong thẻ span LỒNG bên trong .name, thẻ đó có màu chữ tối riêng nên không tự kế thừa. */ .popup-idea #postByIdea .name, .popup-idea #postByIdea .name * { font-size: 20px; font-weight: 700; line-height: 1.35; color: #ffffff; } /* Avatar to lên cho khu tác giả có trọng lượng thị giác */ .popup-idea #postByIdea .name .img-cus img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } /* Dấu tick xác thực cạnh tên: giữ nhỏ, đừng to theo tên */ .popup-idea #postByIdea .name .name-cus img { width: 15px; height: 15px; } .popup-idea #postByIdea .time { margin-top: 3px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.45); } /* ---------- MÔ TẢ: KHÔNG cuộn riêng, dùng "Xem thêm" ---------- Site.css ép #descriptionIdea cao cứng 210px + overflow:auto -> sinh thanh cuộn nhỏ lọt thỏm giữa cột. Bỏ hẳn: khối cao theo nội dung, bài dài thì rút gọn và hiện "Xem thêm"; bấm vào giãn hết cỡ và ĐẨY hàng Thích / Lượt xem xuống. Cả cột cuộn chung một mạch (#boxDetailIdeaScroll) - giống Facebook. ⚠ KHÔNG viết JS mới. page.js (initDetailIdea) đã có sẵn: nếu .content cao > 190px -> thêm class "minimy" bấm .view-more-idea -> gỡ class "minimy" Ở đây chỉ cần cho class đó Ý NGHĨA bằng CSS. */ .popup-idea #descriptionIdea { height: auto !important; max-height: none !important; overflow: visible !important; padding: 20px 22px 12px; background: none; } .popup-idea #descriptionIdea .content { display: block; height: auto !important; max-height: none; overflow: visible; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; } /* Đang rút gọn: cắt ở ~7 dòng, mép dưới mờ dần cho biết còn nữa */ .popup-idea #descriptionIdea.minimy .content { max-height: 167px; /* 7 dòng x 14px x 1.7 */ overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } /* Chỉ hiện "Xem thêm" khi thật sự có phần bị cắt */ /* ⚠ VỆT TRẮNG: Site.css vẽ .view-more-idea::after là một dải GRADIENT TRẮNG cao 55px để làm mờ chữ — hợp với nền trắng của giao diện cũ, nhưng ở đây nền tối nên nó thành một mảng trắng chình ình đè lên chữ. Phải tắt hẳn. Phần làm mờ đã có rồi: mask-image ở .minimy .content phía trên. Đồng thời gỡ luôn kiểu neo tuyệt đối cao 55px của nó, nếu không nút "Xem thêm" sẽ văng ra khỏi khối mô tả. */ .popup-idea #descriptionIdea .view-more-idea::after { content: none !important; display: none !important; } .popup-idea #descriptionIdea .view-more-idea { position: static; width: auto; height: auto; line-height: 1.4; text-align: left; } /* Bài ngắn: không hiện gì. Bài dài: hiện "Xem thêm" (đang rút gọn) hoặc "Thu gọn" (đã mở - đánh dấu bằng data-mo="1"). */ .popup-idea #descriptionIdea .view-more-idea { display: none; } .popup-idea #descriptionIdea.minimy .view-more-idea, .popup-idea #descriptionIdea .view-more-idea[data-mo="1"] { display: inline-block; margin-top: 8px; cursor: pointer; } .popup-idea #descriptionIdea .view-more-idea span { color: #a9d47a; font-size: 13px; font-weight: 600; } /* ---------- BÁO CÁO: gom vào nút 3 chấm cạnh tên tác giả ---------- Trước đây phơi thành chữ "Báo cáo ▾" nằm chình ình - việc hiếm dùng mà chiếm chỗ hàng đầu. Nay thu về 1 nút 3 chấm, đúng thói quen Facebook/Pinterest và đồng bộ với card ngoài trang chủ. ⚠ Không đổi HTML: page.js bắt sự kiện theo ".report-menu .btn". */ .popup-idea #postByIdea { position: relative; padding-right: 58px; } .popup-idea #postByIdea .report-menu { position: absolute; right: 16px; top: 16px; } .popup-idea #postByIdea .report-menu .btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: rgba(255,255,255,.62); cursor: pointer; transition: background .15s ease, color .15s ease; } .popup-idea #postByIdea .report-menu .btn:hover { background: rgba(255,255,255,.10); color: #ffffff; } /* Giấu chữ "Báo cáo" + mũi tên, thay bằng 3 chấm */ .popup-idea #postByIdea .report-menu .btn > span, .popup-idea #postByIdea .report-menu .btn > i { display: none; } .popup-idea #postByIdea .report-menu .btn:before { content: "\f141"; /* ellipsis-h */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; line-height: 1; } /* Menu đổ xuống trên nền tối */ .popup-idea #postByIdea .report-menu ul { right: 0; left: auto; min-width: 208px; padding: 6px; background: #16222f; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 34px rgba(0,0,0,.42); } .popup-idea #postByIdea .report-menu ul a { display: block; padding: 9px 12px; color: rgba(255,255,255,.82); font-size: 13px; white-space: normal; } .popup-idea #postByIdea .report-menu ul a:hover { background: rgba(255,255,255,.09); color: #ffffff; } /* ---------- Bỏ 2 nút chia sẻ tròn ở hàng dưới ---------- Widget ShareThis đẻ ra nút Facebook + Pinterest xanh/đỏ chói, vừa trùng với nút Chia sẻ & Pinterest đã có trên hàng nút ảnh, vừa là thứ làm khu thông tin nhìn tạp nhất. Hàng này chỉ còn Thích và Lượt xem. */ .popup-idea #toolBarIdea .social-sharethis { display: none !important; } .popup-idea #toolBarIdea { margin: 0 22px 16px; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255,255,255,.72); } .popup-idea #toolBarIdea a, .popup-idea #toolBarIdea span { color: inherit; } /* ---------- NÚT THÍCH: chỉ còn trái tim, bỏ chữ ---------- Bỏ chữ mà vẫn phải cho người ta biết bấm được, dựa vào 3 thứ: 1. Trái tim — quy ước ai cũng hiểu; chưa thích thì tim xám, đã thích thì tim ĐỎ. 2. Nền tròn + đổi màu khi rê chuột -> thứ nhúc nhích là thứ bấm được. 3. title="Thích" -> rê 1 giây là hiện chữ cho ai chưa chắc. ⚠ Cái làm nút khó nhận ra KHÔNG phải do có chữ hay không, mà do Site.css cho nó chữ NGHIÊNG, xám, không nền — nhìn y hệt dòng chú thích bên cạnh. Phải trả về thẳng và cho nó nền. */ .popup-idea #toolBarIdea .like { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; border-radius: 50%; font-style: normal !important; background: rgba(255,255,255,.08); cursor: pointer; transition: background .15s ease, transform .15s ease; } .popup-idea #toolBarIdea .like:hover { background: rgba(255,255,255,.18); transform: scale(1.06); } /* Bỏ hẳn 2 nhãn chữ "Thích" / "Đã thích" */ .popup-idea #toolBarIdea .like .like-text, .popup-idea #toolBarIdea .like .unlike-text { display: none !important; } .popup-idea #toolBarIdea .like i { font-size: 18px; line-height: 1; color: rgba(255,255,255,.72); transition: color .15s ease; } /* Đã thích -> tim đỏ đặc */ .popup-idea #toolBarIdea .like.True { background: rgba(240,50,75,.16); } .popup-idea #toolBarIdea .like.True i { color: #f0324b; } /* Dấu "|" giữa tim và lượt xem: thừa khi nút đã có nền tròn */ .popup-idea #toolBarIdea .sep { display: none !important; } .popup-idea #toolBarIdea .view { margin-left: 14px; font-style: normal !important; color: rgba(255,255,255,.58); font-size: 13px; } /* ---------- Hàng "đã thích" xuống dưới, gọn lại ---------- #toolBarIdea vốn xếp mọi thứ trên MỘT hàng. Cho nó xuống dòng để: hàng trên = trái tim + lượt xem, hàng dưới = ai đã thích. Nội dung dòng dưới do đoạn JS cuối trang rút gọn lại. */ .popup-idea #toolBarIdea { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .popup-idea #toolBarIdea .like { order: 1; } .popup-idea #toolBarIdea .view { order: 2; } .popup-idea #toolBarIdea > div[style*="font-size"] { order: 3; flex: 0 0 100%; /* ép xuống hàng riêng */ margin-top: 10px; } .popup-idea #toolBarIdea > div[style*="font-size"] a { color: rgba(255,255,255,.55) !important; font-size: 12.5px !important; font-style: normal; line-height: 1.45; cursor: pointer; } .popup-idea #toolBarIdea > div[style*="font-size"] a:hover { color: #ffffff !important; } /* ============================================================== BÌNH LUẬN — kiểu bong bóng chat trên nền tối -------------------------------------------------------------- ⚠ BẪY ĐỘ ƯU TIÊN, đã dính: Site.css có #boxDetailIdea .comment-item { background: white } dùng ID (1,1,0) nên đè bẹp mọi luật kiểu ".popup-idea .comment-box *" (0,2,0). Kết quả: từng bình luận là một khối TRẮNG nằm chình ình trên nền tối. => Mọi luật ở dưới PHẢI có "#boxDetailIdea" thì mới thắng. ============================================================== */ .popup-idea #boxDetailIdea .comment-box { color: rgba(255,255,255,.78); } .popup-idea #boxDetailIdea .comment-box { padding: 4px 22px 8px; } .popup-idea #boxDetailIdea .comment-item { position: relative; background: transparent; padding: 0 0 0 44px; margin-bottom: 16px; } .popup-idea #boxDetailIdea .comment-item .cm-avt { position: absolute; left: 0; top: 0; margin: 0; } .popup-idea #boxDetailIdea .comment-item .cm-avt img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.10); } /* Tên + nội dung nằm chung một khối mờ. ⚠ Vuông, KHÔNG bo góc — đồng bộ với ảnh nhỏ và hàng nút đã bỏ bo góc. Bong bóng bo tròn kiểu chat trộn với phần còn lại vuông cạnh thì nhìn chỏi. */ .popup-idea #boxDetailIdea .comment-item .cm-content { display: block; background: rgba(255,255,255,.08); border-radius: 0; padding: 9px 13px; color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.55; } .popup-idea #boxDetailIdea .comment-item .cm-name { display: block; margin-bottom: 2px; color: #ffffff; font-weight: 700; font-size: 12.5px; } /* Hàng dưới: Trả lời · ngày */ .popup-idea #boxDetailIdea .comment-item .cm-action { display: flex; align-items: center; gap: 14px; margin: 6px 0 0 4px; color: rgba(255,255,255,.45); font-size: 11.5px; font-weight: 600; } .popup-idea #boxDetailIdea .comment-item .cm-action .clear { display: none; } .popup-idea #boxDetailIdea .comment-item .cm-action .cm-reply { color: rgba(255,255,255,.72); cursor: pointer; } .popup-idea #boxDetailIdea .comment-item .cm-action .cm-reply:hover { color: #ffffff; } /* Nút 3 chấm của từng bình luận: nằm góc phải, chỉ rõ khi rê vào */ .popup-idea #boxDetailIdea .comment-item .cm-button { position: absolute; right: 0; top: 2px; } .popup-idea #boxDetailIdea .comment-item .cm-button > a { color: rgba(255,255,255,.28); transition: color .15s ease; } .popup-idea #boxDetailIdea .comment-item:hover .cm-button > a { color: rgba(255,255,255,.72); } .popup-idea #boxDetailIdea .comment-item .cm-button ul { right: 0; background: #16222f; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 34px rgba(0,0,0,.42); } .popup-idea #boxDetailIdea .comment-item .cm-button ul a { color: rgba(255,255,255,.82); } .popup-idea #boxDetailIdea .comment-item .cm-button ul a:hover { background: rgba(255,255,255,.09); } /* Không có ảnh đính kèm thì đừng chừa chỗ trống */ .popup-idea #boxDetailIdea .cm-list-medias:empty { display: none; } /* Trả lời lồng: thụt vào + một vạch dọc mảnh cho thấy quan hệ */ .popup-idea #boxDetailIdea .comment-item .comment-list { margin: 10px 0 0; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.12); } /* Chưa có bình luận -> nói ra, đừng để trống trơn */ .popup-idea #boxDetailIdea .comment-box > .comment-list:empty { display: block; padding: 26px 0; text-align: center; color: rgba(255,255,255,.38); font-size: 13px; } .popup-idea #boxDetailIdea .comment-box > .comment-list:empty:after { content: "Chưa có bình luận — hãy là người đầu tiên"; } /* ---------- Dải "Đang trả lời ✕" ---------- page.js nay chỉ dựng MỘT ô nhập duy nhất; bấm "Trả lời" thì ô đó chuyển chế độ và dải này hiện lên ngay trên nó. Nhờ vậy không bao giờ còn cảnh 2 ô nhập cùng lúc. */ .popup-idea #boxDetailIdea .cm-dang-tra-loi { display: none; } /* ⚠ PHẢI neo tuyệt đối ngay TRÊN ô nhập. #boxDetailIdea xếp kiểu tuyệt đối: khu cuộn chiếm top:0→bottom:76px, ô nhập chiếm 76px đáy. Dải này ở luồng thường sẽ rơi lên ĐỈNH cột, đè tên tác giả — cách ô nhập mà nó đang giải thích cả một màn hình. */ .popup-idea #boxDetailIdea .cm-dang-tra-loi.hien { position: absolute; left: 0; right: 0; bottom: 76px; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 22px; background: #1c2b3a; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.72); font-size: 12.5px; } .popup-idea #boxDetailIdea .cm-dang-tra-loi .cm-ten { color: #ffffff; font-weight: 700; } .popup-idea #boxDetailIdea .cm-dang-tra-loi .cm-huy-tra-loi { margin-left: auto; padding: 2px 6px; color: rgba(255,255,255,.55); cursor: pointer; } .popup-idea #boxDetailIdea .cm-dang-tra-loi .cm-huy-tra-loi:hover { color: #ffffff; } /* Bỏ nút chèn ảnh trong ô soạn (chức năng đã tắt ở page.js) */ .popup-idea #boxDetailIdea .comment-input .toolbar .fa-camera, .popup-idea #boxDetailIdea .comment-input .list-file { display: none !important; } /* ---------- Icon mặt cười: neo sát mép phải ô nhập ---------- ⚠ Bộ soạn thảo đặt .toolbar theo TOẠ ĐỘ TUYỆT ĐỐI tính cho bố cục cũ (có nút máy ảnh đứng trước). Bỏ máy ảnh đi thì toạ độ đó thành sai: mặt cười đứng lửng giữa ô, chừa một mảng nền xám trống bên phải — nhìn như có thêm một cái ô thứ hai. Sửa: neo .toolbar vào chính ô nhập (.wrap-text), dán mép phải, căn giữa theo chiều dọc. */ .popup-idea #boxDetailIdea .comment-input .wrap-text { position: relative; padding-right: 38px; /* chừa chỗ cho mặt cười, chữ không chui xuống dưới */ } .popup-idea #boxDetailIdea .comment-input .toolbar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: auto; height: auto; margin: 0; padding: 0; } /* ⚠ !important là BẮT BUỘC ở đây: bộ soạn thảo tự tính rồi gán thẳng right:-66px; top:-30px cho .smile-icon (toạ độ của bố cục cũ). Không có !important thì luật này thua, mặt cười văng ra ngoài ô, đè lên nút "Đăng". */ .popup-idea #boxDetailIdea .comment-input .smile-icon { position: static !important; right: auto !important; top: auto !important; left: auto !important; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; } .popup-idea #boxDetailIdea .comment-input .smile-icon > a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: rgba(255,255,255,.45); font-size: 16px; line-height: 1; } .popup-idea #boxDetailIdea .comment-input .smile-icon > a:hover { color: #ffffff; } /* Khối rỗng còn sót của phần tải ảnh -> không chiếm chỗ nữa */ .popup-idea #boxDetailIdea .comment-input .contenteditor-upload { display: none !important; } /* "Xem thêm bình luận" */ .popup-idea #boxDetailIdea .show-more a { display: inline-block; padding: 6px 0; color: #a9d47a; font-size: 13px; font-weight: 600; cursor: pointer; } /* ---------- Ô nhập: xếp 1 hàng bằng flex ---------- ⚠ Gốc là display:block + nút "Đăng" float:right + avatar position:absolute. Nút float không ăn theo chiều cao của ô chữ nên nó bị đội lên trên, lệch hẳn so với khung nhập. Chuyển cả hàng sang flex + align-items:center thì avatar, ô chữ và nút tự cân giữa theo nhau. */ .popup-idea #boxDetailIdea > .comment-input { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 22px 18px; background: none; border-top: 1px solid rgba(255, 255, 255, 0.14); } .popup-idea #boxDetailIdea > .comment-input .ContentEditor, .popup-idea #boxDetailIdea > .comment-input .wrap-text { flex: 1 1 auto; min-width: 0; margin: 0; } /* ⚠ position:absolute + top:0 mới là thủ phạm làm nút "Đăng" đội lên (Site.css), KHÔNG phải float. Phần tử neo tuyệt đối bị lấy ra khỏi luồng nên align-items:center của flex không với tới được. Phải ép về static thì nó mới thành ô flex và tự cân giữa. */ .popup-idea #boxDetailIdea > .comment-input .btn-comment-send { position: static !important; float: none !important; flex: 0 0 auto; margin: 0; align-self: center; } /* Ô viết bình luận KHÔNG phải thẻ input — nó là div contenteditable (.ContentEditor) nằm trong .wrap-text. Nhắm vào input/textarea không ăn gì cả, ô vẫn trắng giữa nền tối. */ .popup-idea .comment-input .wrap-text, .popup-idea .comment-input .ContentEditor, .popup-idea #boxDetailIdea > .comment-input input, .popup-idea #boxDetailIdea > .comment-input textarea { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14); color: #ffffff; } /* Chữ gợi ý trong ô nhập */ .popup-idea .comment-input .ContentEditor:empty:before { color: rgba(255, 255, 255, 0.45); } /* Avatar: gỡ khỏi kiểu neo tuyệt đối để nằm trong hàng flex */ .popup-idea #boxDetailIdea > .comment-input .avt { position: static; flex: 0 0 32px; left: auto; top: auto; width: 32px; height: 32px; border: 0; box-shadow: none; } .popup-idea #boxDetailIdea > .comment-input .btn-comment-send { border-radius: 0 14px 14px 0; background: #5f8c3a; border-color: #5f8c3a; } .popup-idea #titleIdea { display: none; } /* Thanh tiêu đề CŨ của từng ảnh (div.title trong mỗi .item-media của lightSlider): dải tối chạy ngang đầu ảnh, hầu hết bài để trống nên chỉ còn là vệt bẩn. Ẩn đi. */ .popup-idea #lightSlider .item-media > .title { display: none !important; } } /* ================================================================== ĐIỆN THOẠI (< 768px) — 2026-07-22 ------------------------------------------------------------------ Trước đây toàn bộ giao diện mới nằm trong @media (min-width:768px) nên trên điện thoại rơi về bố cục gốc: ảnh chồng ảnh, cột ảnh dọc đổ tràn xuống hết trang, không thấy tác giả lẫn mô tả. Bố cục mới, xếp dọc: [thanh nút] hàng xám trên cùng, chứa 5 nút [ảnh] ảnh đang xem, KHÔNG chui lên dưới thanh nút [dải ảnh] ảnh nhỏ cuộn ngang [thông tin] tác giả, mô tả, thích, bình luận [ô nhập] ghim đáy ================================================================== */ @media (max-width: 767px) { .popup-idea { background: #0f1722; } .popup-idea .dialog-box { padding: 0 !important; border-radius: 0 !important; } .popup-idea .dialog-content { width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0; background: #0f1722; } .popup-idea .dialog-main { height: 100%; } /* Xếp DỌC, không phải lưới 3 cột như máy tính */ .popup-idea .Window { position: relative; display: block; min-height: 100vh !important; background: #0f1722 !important; } .popup-idea #listImageIdea, .popup-idea #cqCotAnh, .popup-idea #boxDetailIdea { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; min-height: 0; background: none; box-shadow: none; } /* ---------- Hàng nút: một dải xám trên cùng ---------- ⚠ Ảnh KHÔNG được chui lên dưới dải này (chủ web yêu cầu). Do đó #listImageIdea phải có padding-top đúng bằng chiều cao dải. */ #cqThanhNut { position: absolute; top: 0; left: 0; right: 0; height: 52px; padding: 0 8px; justify-content: flex-end; gap: 4px; background: #1b2531; border-bottom: 1px solid rgba(255,255,255,.08); } #cqThanhNut > a { width: 40px; height: 40px; font-size: 15px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #cqThanhNut > a:active { background: rgba(255,255,255,.12); } #cqThanhNut .cq-vach { height: 22px; } .popup-idea #listImageIdea { padding-top: 52px; /* chừa đúng chiều cao hàng nút */ overflow: hidden; } .popup-idea #titleIdea { display: none; } /* Ảnh đang xem: cao cố định theo màn hình, ảnh nằm trọn không cắt */ .popup-idea .lSSlideOuter, .popup-idea .lSSlideWrapper { height: auto; } .popup-idea #lightSlider li .item-media { height: 42vh; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } .popup-idea #lightSlider .item-media > .title { display: none !important; } /* Dải ảnh nhỏ có sẵn của lightSlider: cho cuộn NGANG một hàng */ .popup-idea .lSGallery { display: flex !important; flex-wrap: nowrap !important; width: auto !important; transform: none !important; gap: 5px; padding: 8px; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .popup-idea .lSGallery::-webkit-scrollbar { display: none; } .popup-idea .lSGallery li { flex: 0 0 auto; margin: 0 !important; opacity: .55; } .popup-idea .lSGallery li.active { opacity: 1; box-shadow: 0 0 0 2px #5f8c3a; } /* ⚠ Cột ảnh dọc là thứ dành riêng cho máy tính. Trên điện thoại nó đổ 12 tấm ảnh full khổ xuống hết trang - chính là mớ ảnh chồng ảnh đang thấy. Ẩn đi, đã có dải ngang ở trên thay thế. */ .popup-idea #cqCotAnh .cq-anh-nho, .popup-idea #cqCotAnh .cq-cot-tieude { display: none; } /* ---------- Khu thông tin ---------- */ .popup-idea #boxDetailIdea { color: #ffffff; } .popup-idea #boxDetailIdeaScroll { position: relative; top: auto; bottom: auto; height: auto !important; overflow: visible; padding: 0 0 84px; /* chừa chỗ cho ô nhập ghim đáy */ } .popup-idea #postByIdea { position: relative; height: auto; min-height: 0; padding: 14px 16px 12px 16px; background: none; border-bottom: 1px solid rgba(255,255,255,.12); } .popup-idea #postByIdea .name, .popup-idea #postByIdea .name * { font-size: 16px; font-weight: 700; color: #ffffff; } .popup-idea #postByIdea .name .img-cus img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .popup-idea #postByIdea .time { color: rgba(255,255,255,.45); font-size: 12px; } .popup-idea #postByIdea .report-menu { position: absolute; right: 10px; top: 14px; } .popup-idea #postByIdea .report-menu .btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: rgba(255,255,255,.55); } .popup-idea #postByIdea .report-menu .btn > span, .popup-idea #postByIdea .report-menu .btn > i { display: none; } .popup-idea #postByIdea .report-menu .btn:before { content: "\f141"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 16px; } .popup-idea #postByIdea .report-menu ul { right: 0; left: auto; background: #16222f; border: 1px solid rgba(255,255,255,.12); } .popup-idea #postByIdea .report-menu ul a { color: rgba(255,255,255,.82); } /* Mô tả: bỏ cuộn trong, dùng "Xem thêm" như bên máy tính */ .popup-idea #descriptionIdea { height: auto !important; max-height: none !important; overflow: visible !important; padding: 14px 16px 10px; background: none; } .popup-idea #descriptionIdea .content { height: auto !important; max-height: none; overflow: visible; color: rgba(255,255,255,.80); font-size: 14px; line-height: 1.65; } .popup-idea #descriptionIdea.minimy .content { max-height: 138px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .popup-idea #descriptionIdea .view-more-idea::after { content: none !important; display: none !important; } .popup-idea #descriptionIdea .view-more-idea { position: static; width: auto; height: auto; line-height: 1.4; text-align: left; display: none; } .popup-idea #descriptionIdea.minimy .view-more-idea, .popup-idea #descriptionIdea .view-more-idea[data-mo="1"] { display: inline-block; margin-top: 8px; } .popup-idea #descriptionIdea .view-more-idea span { color: #a9d47a; font-size: 13px; font-weight: 600; } /* Hàng thích / lượt xem */ .popup-idea #toolBarIdea { display: flex; align-items: center; flex-wrap: wrap; margin: 0 16px 12px; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72); } .popup-idea #toolBarIdea .social-sharethis { display: none !important; } .popup-idea #toolBarIdea .sep { display: none !important; } .popup-idea #toolBarIdea .like { order: 1; display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; border-radius: 50%; background: rgba(255,255,255,.08); font-style: normal !important; } .popup-idea #toolBarIdea .like .like-text, .popup-idea #toolBarIdea .like .unlike-text { display: none !important; } .popup-idea #toolBarIdea .like i { font-size: 18px; color: rgba(255,255,255,.72); } .popup-idea #toolBarIdea .like.True { background: rgba(240,50,75,.16); } .popup-idea #toolBarIdea .like.True i { color: #f0324b; } .popup-idea #toolBarIdea .view { order: 2; margin-left: 14px; font-style: normal !important; color: rgba(255,255,255,.58); font-size: 13px; } .popup-idea #toolBarIdea > div[style*="font-size"] { order: 3; flex: 0 0 100%; margin-top: 10px; } .popup-idea #toolBarIdea > div[style*="font-size"] a { color: rgba(255,255,255,.55) !important; font-size: 12.5px !important; font-style: normal; } /* ---------- Bình luận ---------- */ .popup-idea #boxDetailIdea .comment-box { padding: 4px 16px 8px; color: rgba(255,255,255,.78); } .popup-idea #boxDetailIdea .comment-item { position: relative; background: transparent; padding: 0 0 0 44px; margin-bottom: 16px; } .popup-idea #boxDetailIdea .comment-item .cm-avt { position: absolute; left: 0; top: 0; margin: 0; } .popup-idea #boxDetailIdea .comment-item .cm-avt img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .popup-idea #boxDetailIdea .comment-item .cm-content { display: block; background: rgba(255,255,255,.08); border-radius: 0; padding: 9px 13px; color: rgba(255,255,255,.82); font-size: 13.5px; line-height: 1.55; } .popup-idea #boxDetailIdea .comment-item .cm-name { display: block; margin-bottom: 2px; color: #fff; font-weight: 700; font-size: 12.5px; } .popup-idea #boxDetailIdea .comment-item .cm-action { display: flex; align-items: center; gap: 14px; margin: 6px 0 0 4px; color: rgba(255,255,255,.45); font-size: 11.5px; font-weight: 600; } .popup-idea #boxDetailIdea .comment-item .cm-action .clear { display: none; } .popup-idea #boxDetailIdea .comment-item .cm-action .cm-reply { color: rgba(255,255,255,.72); } .popup-idea #boxDetailIdea .comment-item .cm-button { position: absolute; right: 0; top: 2px; } .popup-idea #boxDetailIdea .comment-item .cm-button > a { color: rgba(255,255,255,.35); } .popup-idea #boxDetailIdea .comment-item .cm-button ul { right: 0; background: #16222f; border: 1px solid rgba(255,255,255,.12); } .popup-idea #boxDetailIdea .comment-item .cm-button ul a { color: rgba(255,255,255,.82); } .popup-idea #boxDetailIdea .cm-list-medias:empty { display: none; } .popup-idea #boxDetailIdea .comment-item .comment-list { margin: 10px 0 0; padding-left: 14px; border-left: 2px solid rgba(255,255,255,.12); } .popup-idea #boxDetailIdea .comment-box > .comment-list:empty { display: block; padding: 22px 0; text-align: center; color: rgba(255,255,255,.38); font-size: 13px; } .popup-idea #boxDetailIdea .comment-box > .comment-list:empty:after { content: "Chưa có bình luận — hãy là người đầu tiên"; } .popup-idea #boxDetailIdea .show-more a { color: #a9d47a; font-size: 13px; font-weight: 600; } /* ---------- Ô nhập ghim đáy ---------- */ .popup-idea #boxDetailIdea > .comment-input { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #1b2531; border-top: 1px solid rgba(255,255,255,.12); } .popup-idea #boxDetailIdea > .comment-input .avt { position: static; flex: 0 0 30px; width: 30px; height: 30px; margin: 0; border: 0; } .popup-idea #boxDetailIdea > .comment-input .ContentEditor, .popup-idea #boxDetailIdea > .comment-input .wrap-text { flex: 1 1 auto; min-width: 0; margin: 0; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14); color: #fff; } .popup-idea #boxDetailIdea .comment-input .wrap-text { position: relative; padding-right: 36px; } .popup-idea #boxDetailIdea .comment-input .toolbar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: auto; height: auto; margin: 0; padding: 0; } .popup-idea #boxDetailIdea .comment-input .smile-icon { position: static !important; right: auto !important; top: auto !important; left: auto !important; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; } .popup-idea #boxDetailIdea .comment-input .smile-icon > a { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: rgba(255,255,255,.45); font-size: 16px; } .popup-idea #boxDetailIdea .comment-input .toolbar .fa-camera, .popup-idea #boxDetailIdea .comment-input .contenteditor-upload, .popup-idea #boxDetailIdea .comment-input .list-file { display: none !important; } .popup-idea #boxDetailIdea > .comment-input .btn-comment-send { position: static !important; float: none !important; flex: 0 0 auto; margin: 0; background: #5f8c3a; border-color: #5f8c3a; border-radius: 0; } .popup-idea .comment-input .ContentEditor:empty:before { color: rgba(255,255,255,.45); } /* Dải "Đang trả lời ... ✕" nằm ngay trên ô nhập */ .popup-idea #boxDetailIdea .cm-dang-tra-loi { display: none; } .popup-idea #boxDetailIdea .cm-dang-tra-loi.hien { position: fixed; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom)); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: #16222f; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.72); font-size: 12.5px; } .popup-idea #boxDetailIdea .cm-dang-tra-loi .cm-ten { color: #fff; font-weight: 700; } .popup-idea #boxDetailIdea .cm-dang-tra-loi .cm-huy-tra-loi { margin-left: auto; color: rgba(255,255,255,.55); } /* ---------- Bài HỎI-ĐÁP trên điện thoại ---------- */ .popup-idea #listImageIdea:has(.cq-khung-hoi) .lSSlideOuter, .popup-idea #listImageIdea:has(.cq-khung-hoi) #lightSlider { display: none !important; } .popup-idea .cq-khung-hoi { display: block; width: 100%; height: auto; padding: 24px 18px 28px; } .popup-idea .cq-khung-hoi__ma { margin-bottom: 10px; font-size: 11px; } .popup-idea .cq-khung-hoi__hoi { font-size: 21px; line-height: 1.35; } .popup-idea .cq-khung-hoi__noidung { margin-top: 14px; padding-top: 14px; font-size: 14px; } /* Mã câu hỏi khác: cuộn NGANG thay vì cột dọc. ⚠ KHÔNG dùng flex cho cả khối: nhãn "CÂU HỎI KHÁC" sẽ bị kéo vào cùng hàng với các mã rồi bị chúng đè lên. Để nhãn là một dòng riêng, chỉ dải mã mới cuộn ngang. */ .popup-idea #cqCotAnh:has(.cq-cau-hoi) { display: block; padding: 10px 12px; white-space: nowrap; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.10); } .popup-idea #cqCotAnh:has(.cq-cau-hoi)::-webkit-scrollbar { display: none; } .popup-idea #cqCotAnh:has(.cq-cau-hoi) .cq-cot-tieude { display: block; position: sticky; left: 0; margin: 0 0 8px; font-size: 10px; } .popup-idea #cqCotAnh .cq-cau-hoi { display: inline-flex; margin: 0 6px 0 0; padding: 8px 14px; font-size: 13px; vertical-align: middle; } .popup-idea .cq-cot-trong { padding: 10px 14px; font-size: 12px; } } /* ================================================================== THANH NÚT — góc trên bên phải, ĐÈ LÊN ẢNH (2026-07-22) ------------------------------------------------------------------ Gom 5 nút vào #cqThanhNut, nằm TRONG #listImageIdea (khu ảnh) nên neo vào góc phải KHU ẢNH — đúng chỗ cũ, nút không lấn sang khu thông tin. ⚠ Xếp bằng flex, KHÔNG đặt tay right:16/74/132px như trước. Đặt tay từng nút là lý do thêm/bớt một nút là lệch cả hàng. ⚠ Thứ tự chủ web chốt: Chia sẻ · Pinterest · Trình chiếu · Phóng to · Đóng. ⚠ Nút X gốc của hộp thoại (.dialog-close) bị ẩn — nút ✖ trong hàng này thay thế nó. ⚠ KHÔNG bo góc nút (chủ web yêu cầu). ================================================================== */ .popup-idea .dialog-close { display: none !important; } #cqThanhNut { position: absolute; top: 16px; right: 16px; z-index: 40; display: flex; align-items: center; gap: 10px; } #cqThanhNut > a { position: static !important; /* đè position:absolute của Site.css */ display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; line-height: 1; font-size: 17px; text-align: center; border-radius: 0; background: rgba(15, 25, 35, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } /* glyphicon tự chèn icon bằng :before và có offset "top" riêng -> ép về static, nếu không icon lệch khỏi tâm nút. */ #cqThanhNut > a:before { position: static !important; top: 0 !important; line-height: 1 !important; } #cqThanhNut > a:hover { background: rgba(15, 25, 35, 0.85); transform: translateY(-1px); } /* Đang tự chạy thì nút sáng màu nhấn -> nhìn là biết đang bật */ #cqThanhNut .play-popupidea.glyphicon-pause { background: #5f8c3a; } /* Hai nút chia sẻ mang màu thương hiệu khi rê chuột */ #cqThanhNut .cq-nut-pin:hover { background: #e60023; } #cqThanhNut .cq-nut-share:hover { background: #5f8c3a; } /* Vạch ngăn mảnh giữa nhóm chia sẻ và nút đóng */ #cqThanhNut .cq-vach { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.22); } /* ====================================================================== MediaView.js overlay — mo bang JS (dung chung vo .popup-idea). Scope .mv-overlay de KHONG dung luong xem Y Tuong (dialog + lightSlider). ====================================================================== */ .mv-overlay { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(11,22,34,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mv-overlay.mv-mo { display: block; } .mv-overlay .Window { width: 100%; height: 100vh; } /* Khu anh: canh giua anh chinh */ .mv-overlay #listImageIdea { display: flex; align-items: center; justify-content: center; position: relative; } .mv-overlay .mv-anh-chinh { max-width: 100%; max-height: 100vh; object-fit: contain; } .mv-overlay .mv-mt { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 4; } .mv-overlay .mv-mt:hover { background: rgba(255,255,255,.26); } .mv-overlay .mv-truoc { left: 16px; } .mv-overlay .mv-sau { right: 16px; } .mv-overlay.mv-1anh .mv-mt { display: none; } .mv-overlay .mv-dem { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 13px; pointer-events: none; } /* Phong to: an cot + panel */ .mv-overlay.mv-full-anh #cqCotAnh, .mv-overlay.mv-full-anh #boxDetailIdea { display: none; } .mv-overlay.mv-full-anh .Window { grid-template-columns: 1fr !important; } /* Panel */ .mv-overlay #postByIdea .name { display: flex; align-items: center; gap: 10px; } .mv-overlay .mv-icon-loai { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; } .mv-overlay .mv-icon-loai svg { width: 22px; height: 22px; display: block; } .mv-overlay .mv-ten-phu { display: block; font-weight: 400; font-style: italic; opacity: .72; font-size: 13px; margin-top: 2px; } .mv-overlay .mv-binhluan { margin-top: 10px; } /* Dien thoai: xep doc */ @media (max-width: 767px) { .mv-overlay .Window { display: block; height: 100%; overflow-y: auto; } .mv-overlay #listImageIdea { height: 60vh; } .mv-overlay #cqCotAnh { display: flex; gap: 8px; overflow-x: auto; height: auto; } .mv-overlay #cqCotAnh .cq-anh-nho { width: 70px; flex: 0 0 70px; } }