/* ================================================================
   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 ---------- */
            /* ⓘ NGUỒN CHUẨN DUY NHẤT cho kích thước khung MediaView.
               Cả trang Ý Tưởng (.popup-idea trong dialog) LẪN overlay JS
               (.mv-overlay) đều dùng chung khung .Window này -> sửa 1 chỗ
               ăn cả 2, KHÔNG còn 2 nhánh height rời nhau (từng lệch 100vh). */
            .popup-idea .Window {
                display: grid;
                grid-template-columns: 2fr 0.25fr 0.75fr;
                height: 80vh;
                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: var(--cq-green);
            }

            /* ---------- 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;
            }

            /* [2026-08-18] Bo anh TAP CHI trong viewer: nut "Doc bai viet" +
               card NHAN VAT DUOC NHAC (kho wiki) duoi noi dung — skin toi. */
            /* Nhan nho "Tap chi" dung TRUOC tieu de trong noi dung.
               Nhan -> /tap-chi; tieu de (.cq-mv-ten) -> ve dung bai viet. */
            .popup-idea #descriptionIdea .cq-mv-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--cq-green); border-radius: 999px; padding: 2px 9px; margin-right: 8px; vertical-align: 2px; text-decoration: none; }
            .popup-idea #descriptionIdea .cq-mv-tag:hover { filter: brightness(1.15); color: #fff; }
            .popup-idea #descriptionIdea .cq-mv-ten { color: inherit; text-decoration: none; }
            .popup-idea #descriptionIdea .cq-mv-ten:hover { text-decoration: underline; color: #fff; }
            .popup-idea #descriptionIdea .cq-mv-docbai { margin-top: 10px; }
            .popup-idea #descriptionIdea .cq-mv-docbai a { color: var(--cq-green); font-weight: 700; font-size: 13.5px; text-decoration: none; }
            .popup-idea #descriptionIdea .cq-mv-docbai a:hover { text-decoration: underline; }
            .popup-idea #descriptionIdea .cq-mv-nv { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
            .popup-idea #descriptionIdea .cq-mv-nv__lb { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 2px; }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card:hover { border-color: rgba(255,255,255,.28); box-shadow: none; transform: none; }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card__ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; overflow: hidden; }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card__ava img { width: 100%; height: 100% !important; object-fit: cover; display: block; }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card__name { color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
            .popup-idea #descriptionIdea .cq-mv-nv .cq-mem-card__role { color: rgba(255,255,255,.55); font-size: 11.5px; font-weight: 500; }

            /* Đ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, var(--cq-dark) 72%, transparent 100%);
                mask-image: linear-gradient(180deg, var(--cq-dark) 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: var(--cq-green);
                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: var(--cq-dark);
                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;
            }

            /* (ShareThis markup deleted site-wide 2026-08-18 - no hide rule needed) */
            .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; }

            /* [2026-08-18] Toan bo skin BINH LUAN cua viewer da don ve
               /Content/Comment/Comment.css (muc "VIEWER DARK") - 1 bo duy nhat. */

            .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: var(--cq-dark); }

            .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: var(--cq-dark);
            }

            .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: var(--cq-dark) !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: var(--cq-dark);
                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 var(--cq-green); }

            /* ⚠ 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: var(--cq-dark);
                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, var(--cq-dark) 70%, transparent 100%);
                mask-image: linear-gradient(180deg, var(--cq-dark) 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: var(--cq-green); 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 .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;
            }

            /* [2026-08-18] Skin binh luan mobile cua viewer -> Comment.css (muc "VIEWER DARK"). */

            /* ---------- 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: var(--cq-green); }

        /* 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: var(--cq-green); }

        /* 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); }
/* Overlay KHONG co wrapper .dialog-content (chi co o dialog Y Tuong) nen
   phai TU can giua khung 80vh vao giua man hinh. Chieu cao 80vh KHONG dat
   o day nua -> ke thua tu .popup-idea .Window (nguon chuan duy nhat).
   .Window la flex-item nen can width:100% de trai het be ngang. */
.mv-overlay.mv-mo { display: flex; align-items: center; justify-content: center; animation: mvFadeIn .18s ease; }
/* Mở lên: fade mượt thay vì bật đột ngột (pop). */
@keyframes mvFadeIn { from { opacity: 0; } to { opacity: 1; } }
.mv-overlay .Window { width: 100%; }

/* Khu anh: canh giua anh chinh (cao theo o luoi = 80vh, khong ghi so cung) */
.mv-overlay #listImageIdea { display: flex; align-items: center; justify-content: center; position: relative; }
.mv-overlay .mv-anh-chinh { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter .35s ease; }
/* Blur-up: đang hiện bản NHỎ (chờ bản nét) -> làm mờ giấu vỡ hạt; nét về thì bỏ mờ. */
.mv-overlay .mv-anh-chinh.mv-mo-nho { filter: blur(12px); }
/* DESKTOP: KHÓA CỨNG khung ảnh -> mọi ảnh chiếm ĐÚNG một khung như nhau,
   không tự co giãn khi bấm tới/lui = hết giật.
   Gốc lỗi: #listImageIdea không có chiều cao chốt trên desktop (60vh chỉ cho
   mobile) nên height:100% của ảnh không tính được -> ảnh co theo nội dung.
   Fix: chốt chiều cao khung = 100% ô lưới (.Window cao 80vh) + ảnh lấp đầy
   khung, object-fit:contain letterbox. (Mobile để sau: giữ nguyên rule gốc.) */
@media (min-width: 768px) {
    /* Khóa chiều cao ảnh bằng vh (không phụ thuộc chuỗi chiều cao của khung cha,
       vốn bị grid làm sập 0px). Mọi ảnh = cùng 80vh, object-fit:contain letterbox
       -> khung ổn định, không phình/co khi chuyển ảnh = hết giật.
       ⚠ PHẢI có !important: Site.css có luật toàn cục `img { height:auto !important }`
       ép mọi ảnh về auto -> không có !important thì luật này thua, ảnh co giãn lại. */
    .mv-overlay .mv-anh-chinh { width: 100%; height: 80vh !important; max-width: 100%; max-height: 80vh; 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(15,25,35,.55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 4; box-shadow: 0 4px 14px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mv-overlay .mv-mt:hover { background: rgba(15,25,35,.85); }
/* SVG trong thanh nut hien o CA 2 noi (overlay + dialog Y Tuong) -> global */
#cqThanhNut > a svg { display: block; }
.mv-overlay .mv-truoc { left: 16px; } .mv-overlay .mv-sau { right: 16px; }
.mv-overlay.mv-1anh .mv-mt, .mv-overlay.mv-1anh .mv-play { display: none; }
.mv-overlay .mv-play.dang-chieu { background: var(--cq-green); }
.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; }
/* Author photo variant (idea posts): fill the same chip as a round avatar.
   ⚠ height needs !important - Site.css has a global img{height:auto !important}. */
.mv-overlay .mv-icon-loai img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 50%; 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; }
}