/* ============================================================================
   Magazine — giao diện trang Tạp chí (/tap-chi) và trang bài viết.
   [2026-08-20] BÓC RA TỪ <style> gõ thẳng trong GuestPost.aspx (675 dòng).
   Nằm trong trang thì không ai dùng lại được, và mỗi lần trang tự đặt số cho
   cấu kiện dùng chung (.cq-mem-card, .cq-qmark) là một chỗ lệch với module gốc.
   Nạp SAU community.css — đúng thứ tự cũ của thẻ <style>, để không đổi bên nào
   thắng bên nào.

   [2026-08-20] ĐÃ GỠ 47 trong 49 dấu !important. Chúng sinh ra khi khối
   này còn nằm trong <style> của trang và phải chống Site.css/Reponsive.css.
   Nay là file module nạp sau hai file đó nên không cần ép nữa — đã đo 39 điểm
   trên trang bài trước và sau khi gỡ: 42/44 điểm không đổi, 2 điểm còn lại
   phải giữ ép — lý do ghi ngay tại chỗ.
   ============================================================================ */
/* [2026-08-20] TRAN VIEN KHONG CON DUNG 100vw.
   Cach cu: width:100vw + margin-left:calc(50% - 50vw). 100vw KE CA thanh cuon,
   nen khoi luon tho ra ngoai khung nhin ~8px: trang nao cung co mot thanh cuon
   ngang thua, va moi khoi tran vien nam lech trai 7px so voi duong le chung.
   Nay chu web chot moi view chay het be ngang, nen khoi chi can an ra dung
   bang LE CHUNG cua khung cha — mot phep tru chinh xac, khong dinh thanh cuon. */

/* ⚠⚠ ĐỪNG THÊM "html { overflow-x: clip }" HAY "hidden" VÀO ĐÂY.
   Da thu ngay 2026-07-22 de chan 8px cuon ngang thua (do width:100vw
   tinh ca thanh cuon doc). Ket qua do duoc:
       co clip  -> thua ngang 0px, NHUNG thanh chuyen muc HET GHIM
                   (cuon 900px thi no troi len -770px)
       go clip  -> thanh ghim lai dung, thua ngang tro lai 8px
   Ly do: web nay lay BODY lam khung cuon (body co overflow-y:auto),
   dat overflow tren HTML lam hong co che do -> chet position:sticky.
   8px thua nay TRANG CHU CUNG CO SAN, khong phai loi rieng trang nay.
   Muon chua tan goc thi phai bo han ky thuat 100vw, khong phai
   them mot dong overflow. */

/* ===== Banner (dung chung component .cqb da co san o mobile-v2.css) =====
   [2026-07-22] Cho TRAN NGANG MAN HINH, giong het trang chu.
   Truoc day banner thut vao trong khoi noi dung 1300px -> chi rong
   1236px, nho hon banner trang chu (1440px).

   ⚠ Ky thuat tran vien phai dung DUNG bo ba nay, y het
     .wrap-banner-main trong home.css:   margin-left: calc(50% - 50vw)
     KHONG duoc them margin/padding hai ben nua - 100vw CONG them le
     la trang bi thua ra ben phai, cuon ngang duoc (loi L20 hoi truoc,
     xem _docs/BAO-LOI.md).
   ⚠ Bo goc phai ve 0. Da tran het man hinh ma con bo goc thi hai goc
     tren nhin nhu bi cat. Ban goc .cqb trong mobile-v2.css von la 0;
     chinh trang nay tu bo lai --cq-r-card. */
/* [2026-08-20] Banner tap chi DUNG CHUNG chieu cao voi ca web (Theme.css).
   Truoc day khoi nay tu dat 180/260/320 nen tap chi cao 320 trong khi trang
   chu 300 — hai banner cua cung mot web lech nhau 20px.
   ⚠ Va thieu margin-right: no chi tran ve ben trai, nen banner tap chi hep hon
   128px so voi banner trang chu (do duoc 1761 vs 1889). */
.mag-banner {
    margin-left: calc(-1 * var(--cq-gutter));
    margin-right: calc(-1 * var(--cq-gutter));
    padding: 0;
}

.mag-banner .cqb {
    border-radius: 0;
}

/* [DA BO 2026-07-22] Khoi .mag-stick.
   Truoc day thanh chuyen muc duoc boc trong mot hop rieng, tu ghim lay
   bang bien --cq-head-h. Nay thanh nay dung THANG co che ghim cua trang
   chu (luat .cq-home-nav trong home.css, ghim theo bien --cq-nav-top do
   home.js dat). Mot co che cho ca hai trang, thay vi hai co che gan
   giong nhau - vi hai co che gan giong nhau thi sua mot cai lech mot cai. */

/* ===== Tieu de trang + bo loc ===== */
.mag-title {
    display: flex;
    align-items: center;
    gap: var(--cq-3);
    padding: var(--cq-5) var(--cq-4) var(--cq-1);
}

.mag-title h1 {
    margin: 0;
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mag-filter {
    position: relative;
    margin-left: auto;
}

.mag-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid var(--cq-hairline-strong);
    border-radius: var(--cq-r-pill);
    background: var(--cq-surface);
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mag-filter__btn i {
    font-size: 10px;
    color: var(--cq-text-3);
}

.mag-filter__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 150px;
    border: 1px solid var(--cq-hairline-strong);
    border-radius: var(--cq-3);
    background: var(--cq-surface);
    box-shadow: 0 10px 26px rgba(18, 56, 91, .14);
    overflow: hidden;
}

.mag-filter.is-open .mag-filter__menu {
    display: block;
}

.mag-filter__menu a {
    display: block;
    padding: 12px 14px;
    border-top: 1px solid var(--cq-hairline);
    color: var(--cq-text);
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.mag-filter__menu a:first-child {
    border-top: 0;
}

.mag-filter__menu a.on {
    background: var(--cq-bg);
    color: var(--cq-accent);
}

/* ===== Hang dau luoi bai: ten trang ben trai | nut sap xep ben phai =====
   [2026-07-22] Truoc day khoi nay NEO TUYET DOI de len hang phan trang,
   vi hang do do JS cua DataList ve ra, khong chen thang vao duoc.
   Nay lua bai va phan trang deu tu dung bang C# nen dat dung thu tu la
   xong - bo neo tuyet doi, tra ve dong chay binh thuong. */
.mag-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cq-3);
    margin-bottom: var(--cq-3);
}

.mag-head h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: var(--cq-text);
}

/* ===== Phan trang: DUNG CHUNG /Content/Paging/Paging.css =====
   [2026-08-08] Toan bo CSS .mag-pg (nut, o nhap trang, tong so) da chuyen
   sang Paging.css; nut .mag-pg__btn an CHUNG luat pill voi .paging. Trang
   nay chi giu markup + JS o duoi, KHONG set so kich thuoc nao. */

/* ===== Feed 1 cot kieu anh mau, tren may tinh chuyen thanh luoi ===== */
.mag-feed {
    display: flex;
    flex-direction: column;
    gap: var(--cq-5);

    /* [2026-08-20] Đệm NGANG về 0: khung ngoài (.page-width) đã đặt lề chung rồi,
       thêm 16px ở đây là thẻ bài thụt vào trong đường mép chung 16px so với thanh
       đầu trang. Đệm dọc giữ nguyên. */
    padding: var(--cq-4) 0;
}

@media (min-width: 768px) {
    .mag-feed .datalist-content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cq-5);
    }
}

@media (min-width: 1100px) {
    .mag-feed .datalist-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* [2026-08-20] BON COT o man rong. Tren 1904 con 1648 sau le chung, chia 4 khe
   24 -> moi the 394, anh 16:9 cao 222 — con rong rai. Tren 1440 moi the 278. */
@media (min-width: 1500px) {
    .mag-feed .datalist-content {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ⚠⚠ GIU NGUYEN CACH DUNG CU: ANH LA CA CAI THE.
   Ten bai + chi so nam DE LEN anh trong mot hop o goc duoi phai;
   avatar + ten tac gia noi o goc tren trai.

   [2026-07-22] Da co mot lan doi thanh ba tang xep doc (anh / hang tac
   gia / hop ten) roi phai tra lai. Chu web chi yeu cau DOI MAU hop ten
   sang nen trang chu den, KHONG yeu cau doi bo cuc.
   ⚠ Dung tu y doi bo cuc the bai. Chi doi dung thu duoc yeu cau. */
/* ⚠ Tat do bong cua he CU.
   The bai va khoi luoi deu con mang class "guest-item" tu he 7 nam
   truoc; class do co "box-shadow: 1px 1px 3px #dcdcdc". Truoc day the
   luon kin nen khong ai thay. Nay hop chu tho ra ngoai, de ho mot dai
   o goc duoi phai -> bong do vien theo hinh chu nhat cua the, nhin
   nhu mot cai vien la lung.
   ⚠ Da do that bang elementsFromPoint dung tai dai ho do moi tim ra -
     khong phai border, khong phai background. */
.mag-card,
.mag-feed {
    box-shadow: none;
}


.mag-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Vien thuoc TRANG o goc tren trai anh: avatar + ten tac gia ===== */
/* Khong co nen phia sau ten nguoi viet - anh dai dien tron nam thang
   tren anh bai, ten chu trang co bong do de doc duoc tren anh sang. */

/* Nhan "Duoc tai tro" - THAY CHO avatar + ten tac gia o bai duoc ghim.
   Dat cung vi tri, cung kieu chu trang co bong do nhu ten tac gia,
   chi khac la chu hoa nho va gian chu de nhin ra ngay day la nhan. */


.mag-card__who:hover .mag-card__name { text-decoration: underline; }

/* Thang/nam: day sang phai trong hop chu.
   Chua 20px ben phai vi nut ba cham nam ngoai hop, gan mep the. */

/* [2026-08-20] The he cu cua nut ba cham DA GO khoi day (neo tuyet doi vao
   goc duoi phai the). The moi cho no dung trong hang chan nhu mot muc binh
   thuong, nen khong con can neo. Luat moi nam cuoi file cung cac luat khac
   cua hang chan. Van giu nguyen mot dieu: nut PHAI o ngoai .mag-card__media,
   vi khoi anh co overflow:hidden se cat cut menu xo xuong. */

.mag-card__more:hover { color: var(--cq-text, #14212e); }

.mag-card__menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 12;
    min-width: 132px;
    padding: 4px 0;
    border: 1px solid var(--cq-hairline, rgba(18, 56, 91, .1));
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(16, 42, 67, .14);
}

.mag-card__more.is-open .mag-card__menu { display: block; }

.mag-card__menu a {
    display: flex;
    align-items: center;
    gap: var(--cq-2);
    padding: var(--cq-2) var(--cq-3);
    color: var(--cq-text, #14212e);
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.mag-card__menu a:hover { background: #f2f5f7; }
.mag-card__menu a i { width: 13px; color: var(--cq-text-2, #6b7a89); }

/* ===== Hop ten bai: DE LEN ANH o goc duoi phai (nhu cu),
         nhung NEN TRANG CHU DEN thay cho nen den mo cu ===== */


/* Lop trong moi la cho cat 2 dong - the ngoai da dung cho viec canh day. */


.mag-card__stats .like {
    display: inline-flex;
    align-items: center;
    gap: var(--cq-1);
    cursor: pointer;
}

.mag-card__stats .like.True,
.mag-card__stats .like.True .fa-heart {
    color: #ff5470;
}

/* Ca the la mot khoi trang lien mach, co vien toc va bong nhe */
/* [DA BO 2026-07-22] Nen trang + do bong cho ca the.
   Do la cua ban "ba tang xep doc" da bi tra lai. The bai la ANH, khong
   phai mot the giay trang - dat nen trang cho ca the thi hien ra vien
   trang thua o duoi khi anh khong lap kin. */
    
/* ===== [2026-08-08] BÀI VIẾT DETAIL: bỏ cột trái, nội dung RỘNG + cột PHẢI (tác giả + bài tương tự) ===== */
/* [2026-08-20] BAI VIET CHIA LAM 4 PHAN: 3 phan noi dung, 1 phan cot "Bai viet
   tuong tu" (chu web chot).
   Truoc day cot phai khoa cung 300px, nen man cang rong thi ty le cang lech:
   tren 1889 no chi con 1/5 be ngang. Dung ty le thi bo cuc giu nguyen nhip o
   moi kho man. */
.mag-detail { display: grid; grid-template-columns: 3fr 1fr; align-items: start; gap: 28px; }
.mag-detail > .page-right { min-width: 0; width: auto; float: none; margin: 0; }
/* [2026-08-20] Các luật chỉnh .cq-mem-card cho bối cảnh tạp chí đã dời về
   Cqv2/components/community.css — card đó là của module cộng đồng.

   [2026-08-11] BỎ sticky: sidebar (tác giả + bài tương tự) cao HƠN màn hình
   -> position:sticky ghim ở top rồi cắt phần dưới, cuộn không tới = lỗi cuộn.
   Cho nó chảy tự nhiên theo trang. */
.mag-detail__aside { min-width: 0; }
.mag-aside__box { background: #fff; border: 1px solid #e6ecf2; border-radius: 14px; padding: 16px 16px 6px; margin-bottom: 20px; }
/* Khu "Bài viết tương tự": BỎ khung viền — hiển thẳng ra (giữ tiêu đề). */
.mag-detail .mag-aside__related { background: none; border: 0; border-radius: 0; padding: 0; }
/* Nhãn nhỏ in hoa, dùng cho cả khối bên cạnh bài lẫn dải ảnh cuối bài.
   [2026-08-20] Trước là hai luật chép y nhau ở hai đoạn cách nhau 140 dòng. */
.mag-aside__label,
.mag-aside__author .post-by-detail { margin:0; }
.mag-aside__related .title-box { display:none; }
.mag-aside__related .wrap-link-cus { display:block; margin:0; }
/* [2026-08-11] Mỗi card tạp chí: KHUNG NỀN TRẮNG, GÓC VUÔNG. Ẩn nhãn chuyên mục. */
.mag-aside__related .wrap-link-cus .cq-col-3 { width:100%; float:none; margin:0 0 14px; padding:0; background:none; border:0; border-radius:0; }
.mag-aside__related .wrap-link-cus .cq-col-3 img { width:100%; height:auto; border-radius:0; }
.mag-detail .mag-aside__related .link-cate { display:none; }
/* Lớp trong .news-item có box-shadow xám -> tạo cái hộp mờ. Bỏ luôn. */
.mag-detail .mag-aside__related .news-item { box-shadow: none; }
/* GIỮ viền bên trong (.desc-line + ul) — đây là KHUNG chủ web muốn. */
@media (max-width: 991px) { .mag-detail { grid-template-columns: minmax(0, 1fr); } .mag-detail__aside { width:100%; position:static; } }
    
/* [2026-08-08] Tên bài: BỎ overlay cũ (position:absolute đè lên ảnh bìa đã gỡ) → tiêu đề thường, chữ đậm, DƯỚI thanh lọc. */
.mag-detail .box-title { position: static; }
.mag-detail .box-title-name { position: static; top: auto; left: auto; margin: 12px 0 6px; padding: 0; background: none; }
/* [2026-08-18] Tiêu đề TO kiểu mooool (44px), hàng TAGS nhỏ nằm trên. */
.mag-detail .box-title-name-large { color: #14212e; font-family: 'Montserrat', sans-serif; font-size: 44px; font-weight: 800; line-height: 1.18; letter-spacing: -.01em; margin-top: 6px; }
.mag-detail .box-title-name .like-post,
.mag-detail .box-title-name a { color: #12836a; }
.mag-detail .mag-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.mag-detail .mag-tags a, .mag-detail .mag-tags .mag-tag { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600; color: #7a8794; text-decoration: none; }
.mag-detail .mag-tags a:hover, .mag-detail .mag-tags .mag-tag:hover { color: #12836a; }
.mag-detail .box-date, .mag-detail .box-date span { color: #7a8794; }
@media (max-width: 640px) { .mag-detail .box-title-name-large { font-size: 26px; } }

/* [2026-08-18] Khối "đang lọc theo tag" + card wiki đầu kết quả (trang listing). */
.mag-tagloc { margin: 4px 0 18px; }
.mag-tagloc__bio { max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--cq-text); margin: 10px 2px 8px; }
.mag-tagloc__ai { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--cq-green); padding: 7px 14px; border-radius: 999px; text-decoration: none; margin-bottom: 6px; }
.mag-tagloc__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--cq-muted); border-top: 1px solid var(--cq-border); margin-top: 10px; padding-top: 10px; }
.mag-tagloc__bar b { color: var(--cq-green); }
.mag-tagloc__bo { font-size: 12.5px; font-weight: 700; color: var(--cq-muted); text-decoration: none; }
.mag-tagloc__bo:hover { color: #c0392b; }

/* [2026-08-18] Carousel "Bài viết liên quan" cuối trang lọc (pattern cq-lienquan). */
.mag-lq-head { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; color: var(--cq-navy); margin: 28px 0 12px; }
.mag-lq { position: relative; }
.mag-lq__track { display: flex; gap: var(--cq-4); overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 4px 2px; scrollbar-width: none; }
.mag-lq__track::-webkit-scrollbar { display: none; }
.mag-lq__card { flex: 0 0 260px; display: block; text-decoration: none; }
.mag-lq__img { display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 10px; background: var(--cq-light); }
.mag-lq__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.mag-lq__card:hover .mag-lq__img img { transform: scale(1.05); }
.mag-lq__title { display: block; margin-top: var(--cq-2); font-size: 13.5px; font-weight: 700; color: var(--cq-dark); line-height: 1.35; }
.mag-lq__nut { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 36px; height: 36px;
    border: 1px solid var(--cq-border); border-radius: 50%; background: #fff; color: var(--cq-text);
    cursor: pointer; font-size: 14px; line-height: 1; box-shadow: 0 4px 12px rgba(20,32,40,.10); }
.mag-lq__nut:hover { color: var(--cq-green); border-color: var(--cq-green); }
.mag-lq__prev { left: -14px; }
.mag-lq__next { right: -14px; }
@media (max-width: 640px) { .mag-lq__card { flex-basis: 210px; } .mag-lq__prev { left: -6px; } .mag-lq__next { right: -6px; } }
    
/* [2026-08-11] Ô "Tác giả" giờ dựng bằng .cq-mem-card (JS + community.css chung).
   Các fix cũ cho markup .box-mem-post-by ĐÃ BỎ — chúng ép avatar 44px, làm hỏng
   card mới (card nằm trong .box-mem-post-by). Card tự lo style qua .cq-mem-card.
   ⚠ CHỈ GIỮ 1 dòng: reset position của .post-by-detail. Widget gốc (Site.css) để nó
   position:absolute -> không reset thì card bị đẩy ra khỏi ô, ô trống. */
/* Site.css cho .post-by-detail padding-left:120px (chừa chỗ avatar absolute
   của widget cũ) -> bó card còn 180px. Gỡ để card fill hết bề ngang. */
.mag-detail .mag-aside__author .post-by-detail { position: static; padding: 0; }
/* [2026-08-18] Ô "Tác giả": card NẰM NGANG (avatar trái · tên phải), khác
   card thành viên (dọc). Chỉ đè trong .mag-aside__author, không đụng card
   dùng chung ở /thanh-vien. */
/* Ô tác giả không còn khung .mag-aside__box -> tự lo khoảng cách dưới. */
.mag-detail .mag-aside__author { margin-bottom: 20px; }
/* [2026-08-18] Card người trong CỘT ASIDE (ô Tác giả + Nhân vật được nhắc
   đến): CÙNG MỘT KIỂU card ngang pill (avatar 48 trái · tên + vai trò phải).
   Dùng thẳng .cq-mem-card — không bản sao .nv-chip nữa. Card /thanh-vien
   (dọc) không bị đụng vì scope trong .mag-detail__aside. */
/* Tên 1 DÒNG, dài quá thì cắt "…" (không xuống dòng). */
.mag-detail .mag-aside__mentioned { margin-bottom: 20px; }
.nv-chips { display: flex; flex-direction: column; gap: var(--cq-2); }
/* [2026-08-18] Card bài tương tự LÀM LẠI cùng ngôn ngữ carousel .mag-lq:
   thumbnail bo góc + zoom nhẹ khi hover, avatar nhỏ tròn cạnh tiêu đề đậm,
   hàng lượt xem/chia sẻ thu nhỏ mờ (GIỮ đủ thành phần, chỉ chỉnh dáng). */
.mag-detail .mag-aside__related .cq-col-3 { margin: 0 0 22px; }
.mag-detail .mag-aside__related .cq-col-3 a.img { display: block; overflow: hidden; border-radius: 12px; background: var(--cq-light); }
/* height PHẢI giữ !important: Site.css và Reponsive.css đều khai
   img { height: auto !important } cho MỌI ảnh toàn site. Bỏ ra thì ảnh
   cao theo tỉ lệ thật (đo được 166.7px thay vì 160px). Gốc rễ nằm ở hai
   file đời cũ đó, sửa được thì hai dấu ép cuối cùng ở đây cũng rụng. */
.mag-detail .mag-aside__related .cq-col-3 a.img img { width: 100%; height: 160px !important; object-fit: cover; border-radius: 0; display: block; transition: transform .3s ease; }
.mag-detail .mag-aside__related .cq-col-3:hover a.img img { transform: scale(1.05); }
/* font-size:0 o the bao -> giet cac NUT TRANG (text node) giua avatar va
   tieu de: chung tao 1 dong rong ~20px lam hang so lieu roi khoi card. */
.mag-detail .mag-aside__related .cq-col-3 a.name { display: flex; align-items: flex-start; gap: var(--cq-2); margin: 10px 0 2px; padding: 0; color: var(--cq-navy); font-weight: 700; font-size: 0; line-height: 1.4; text-decoration: none; }
.mag-detail .mag-aside__related .cq-col-3 a.name .sub-2-row { font-size: 14px; }
/* Site.css ep .guest-item .name { height:60px } -> chua 2 dong chu 39px,
   du ~20px rong lam hang so lieu tach roi khoi card. Tra ve cao tu nhien. */
.mag-detail .mag-aside__related .cq-col-3 a.name { height: auto; }
.mag-detail .mag-aside__related .cq-col-3 a.name:hover { color: var(--cq-green); }
.mag-detail .mag-aside__related .cq-col-3 img.cus-img { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; object-fit: cover; float: none; margin: 1px 0 0; position: static; }
.mag-detail .mag-aside__related .cq-col-3 .sub-2-row { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Hang so lieu: luot xem · chia se · binh luan · danh dau.
   Cac icon deu 16px, cung mau chu mo, can giua theo 1 duong. */
/* Hang so lieu DE LEN DAY ANH: nam trong 160px cua thumbnail, co lop toi
   mo de chu trang doc duoc. Anh cao 160px -> hang cao 40px o day. */
.mag-detail .mag-aside__related .cq-col-3 .news-item { position: relative; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line { position: absolute; top: 120px; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; gap: 14px; height: 40px; margin: 0; padding: 0 12px; border: 0;
    font-size: 12px; line-height: 1; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
    border-radius: 0 0 12px 12px; pointer-events: none; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line > * { pointer-events: auto; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line > * { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; float: none; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line a { color: #fff; text-decoration: none; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line a:hover { color: #bff0e2; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line .cq-ico,
.mag-detail .mag-aside__related .cq-col-3 .desc-line .cq-ic { width: 16px; height: 16px; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line .view i { font-style: normal; }
.mag-detail .mag-aside__related .cq-col-3 .share-box { position: relative; opacity: .95; }
/* Nut danh dau: bo NEN PILL TRANG (nen trang chi de noi tren anh) va dua ve
   dung co icon cua hang. Vong tron mau chu mo, so DUNG SAT vong. */
/* Chu + icon tren nen anh: TAT CA ve trang. Cac the con (.view, .comments,
   .like) co mau rieng tu Site.css/bookmark.css nen phai ep tung cai. */
.mag-detail .mag-aside__related .cq-col-3 .desc-line .view,
.mag-detail .mag-aside__related .cq-col-3 .desc-line .comments,
.mag-detail .mag-aside__related .cq-col-3 .desc-line .share-box,
.mag-detail .mag-aside__related .cq-col-3 .desc-line .share-box a,
.mag-detail .mag-aside__related .cq-col-3 .desc-line .cq-ic { stroke: currentColor; }
.mag-detail .mag-aside__related .cq-col-3 .desc-line .like.like.cq-qmark .cq-ring-base,
.mag-detail .mag-aside__related .cq-col-3 .desc-line .like.like.cq-qmark .cq-ring-outline { stroke: #fff; }
.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark .cq-ring-base,
.mag-detail .mag-aside__related .cq-col-3 .like.cq-qmark .cq-ring-outline { stroke: currentColor; }
/* Hàng lượt xem + chia sẻ: giữ, thu nhỏ, đẩy sang mờ (thẳng hàng với chữ tiêu đề). */
    
/* [2026-08-08] Ảnh trong thân bài full chiều ngang khung bài viết */
/* [2026-08-18] Bo góc ảnh thân bài theo TOKEN chuẩn --cq-r-card (24px desktop /
   16px mobile, Theme.css tự đổi) — thay 8px cũ. */
/* [2026-08-20] Bỏ được !important ở đây vì đã dọn tận gốc: 4630 thẻ ảnh trong
   451 bài/cây từng mang style="height:...; width:..." gõ thẳng, nay đã bóc hai
   thuộc tính đó khỏi dữ liệu; và trình soạn thảo cũng đã bị chặn không ghi thêm
   (config.disallowedContent trong ckeditor/config.js). */
.mag-detail .content-detail img { display: block; width: 100%; height: auto; max-width: 100%; margin: 18px auto; border-radius: var(--cq-r-card); }
.mag-detail .content-detail iframe { width: 100%; }
.mag-detail .content-detail figure { width: 100%; margin: 18px 0; }
/* Dải ảnh cuối bài (mở overlay MediaView) */
.mag-gallery { margin: 24px 0 8px; }
.mag-gallery__row { display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: var(--cq-2); }
.mag-gallery__cell { display:block; position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; cursor:pointer; background:#eef2f5; }
/* height needs: Site.css has a global `img { height:auto }`,
   which collapsed the not-yet-loaded img to 0px tall - and a zero-area
   loading="lazy" img never intersects the viewport, so cells stayed empty. */
/* Cùng lý do: không ép thì ảnh trong dải cuối bài cao 0px và biến mất. */
.mag-gallery__cell img { position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; display:block; transition:transform .25s ease; }
.mag-gallery__cell:hover img { transform:scale(1.05); }

/* ==========================================================================
   [2026-08-20] KHUNG "Bai viet tuong tu" — cot doc trong bai.

   Cung MOT the (.mag-card) voi luoi ngoai trang tong; o day chi khac cach xep:
   mot cot doc thay vi luoi ngang. Kich thuoc the do khung quyet dinh, the
   khong tu dat so nao — nho vay hai noi khong the lech nhau.
   ========================================================================== */
.mag-rel {
    display: flex;
    flex-direction: column;
    gap: var(--cq-4);
}

.mag-rel .mag-card {
    width: 100%;
}

/* ==========================================================================
   THE BAI VIET (.mag-card) — DIEN MAO 2026-08-20

   Chu web dua mot the tap chi lam mau va chot huong: hop chu TOI om lay goc
   duoi trai cua anh. Ban truoc do la hop TRANG, rong co dinh 85%, lai tho han
   xuong duoi day anh — do duoc: the rong 417, anh 417, hop chu 355, tuc hut
   63px o mep phai, con nut ba cham thi roi han ra ngoai hop, treo lo lung.
   Mat doc ra mot cai nhan dan lech chu khong doc ra mot cai the.

   Ba quyet dinh cua ban nay:
     1. Hop chu AP SAT hai mep (trai + duoi) cua anh, va RONG THEO CHU
        (max 80%) — khong phai mot phan tram co dinh. Het bac thang.
     2. Nen TOI, chu trang. Anh nguoi dung dang thi sang toi bat ky, chu
        trang tren nen toi luon doc duoc; chu den tren nen trang mo thi khong.
     3. Goc VUONG. Cai lam ban cu trong cu khong phai goc vuong ma la bo cuc;
        anh mau cung vuong goc va van rat "tap chi". Bo tron deu la ngon ngu
        cua ung dung — no noi "bam vao toi" — nen o day khong dung.

   Diem nhan duy nhat: dong CHUYEN MUC nho in hoa tren ten bai.
   ========================================================================== */
.mag-card {
    display: block;
    position: relative;
}

.mag-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--cq-light);
    text-decoration: none;
}

.mag-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hop chu: om goc duoi trai cua anh. */
.mag-card__cap {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    /* Rong theo chu, khong theo phan tram: ten ngan thi hop ngan, va anh ben
       phai lo ra nhieu hon — do la nhip cua trang tap chi. Chan tren bang max
       de ten dai khong nuot het be ngang anh. */
    /* CO THEO CHU, chan tren bang max.
       Chi dat max-width thoi thi chua du: hop la khoi, ma khoi thi an het be
       ngang cho phep -> do duoc ca 12 the deu dung 80%, khong the nao ngan hon.
       fit-content moi cho ten ngan lam hop ngan lai, va do chinh la nhip cua
       trang tap chi: moi the lo ra mot manh anh khac nhau. */
    width: fit-content;
    max-width: 78%;
    padding: 12px 16px 14px;
    background: rgba(26, 38, 50, .92);
    text-decoration: none;
}

.mag-card__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .62);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.mag-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

/* Hang chan: ngoai anh, tren nen trang. MOT duong le duy nhat — moi thu trong
   hang deu thang cot voi mep anh, ke ca nut ba cham o dau ben kia. */
.mag-card__foot {
    display: flex;
    align-items: center;
    gap: var(--cq-2);
    padding: 10px 0 0;
    color: var(--cq-text-2, #6b7a89);
    font-size: 12px;
}

.mag-card__who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cq-text-2, #6b7a89);
    text-decoration: none;
}

.mag-card__avt img {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.mag-card__name {
    font-size: 12px;
    font-weight: 600;
}

.mag-card__stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Day ngay + nut ba cham ve sat mep phai cua anh. */
    margin-left: auto;
    font-size: 12px;
}

.mag-card__stats > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.mag-card__stats i { font-size: 12px; }

.mag-card__date {
    font-size: 12px;
    white-space: nowrap;
}

.mag-card__more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--cq-text-3, #9fadba);
    cursor: pointer;
}