/* ============================================================================
   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ỗ.
   ============================================================================ */
/* ⚠⚠ ĐỪ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:
         width: 100vw;  max-width: 100vw;  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. */
.mag-banner {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0;
}

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

@media (min-width: 768px) {
    .mag-banner .cqb {
        height: 260px;
    }
}

@media (min-width: 1280px) {
    .mag-banner .cqb {
        height: 320px;
    }
}

/* --- Them 2 mau rieng cho banner Tap chi (giong cach cqb--sgl/leaf/teal) --- */
.cqb--gold .cqb__bg {
    background: linear-gradient(135deg, #f5c518 0%, #e0ac00 100%);
}

.cqb--gold .cqb__glow {
    background: #fff08a;
}

.cqb--gold .cqb__veil {
    background-image: radial-gradient(rgba(20, 33, 46, .10) 1px, transparent 1px);
    opacity: .45;
}

.cqb--gold .cqb__t1 {
    color: #2a2205;
}

.cqb--gold .cqb__t3 {
    color: rgba(42, 34, 5, .6);
    font-weight: 600;
}

.cqb--navy .cqb__bg {
    background: linear-gradient(135deg, #1b2a38 0%, #33556b 100%);
}

.cqb--navy .cqb__glow {
    background: #5f87a3;
}

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

@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));
    }
}

.mag-card {
    display: block;
    position: relative;
}

/* ⚠⚠ 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 {
    position: relative;
    /* ⚠ Chua cho hop chu THO XUONG duoi day anh. Bo dong nay la hop chu
       tut len nam lot trong anh, mat han hieu ung.
       ⚠ So nay PHAI khop voi: cao hang chi so (22px) + dem day cua hop
         (6px) = 28px. Lech la hoac chi so doi len tren mep anh, hoac
         thua mot khoang trang duoi hop. */
    padding-bottom: 28px;
}

.mag-card__media {
    display: block;
    position: relative;
    /* Bo 3 goc: tren trai, tren phai, duoi phai. Goc DUOI TRAI de vuong -
       dung cho hop chu nho ra. */
    border-radius: var(--cq-r-card) var(--cq-r-card) var(--cq-r-card) 0;
    aspect-ratio: 16 / 9;
    background: var(--cq-placeholder);
    overflow: hidden;
    text-decoration: 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. */
.mag-card__who {
    display: inline-flex;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    align-items: center;
    gap: var(--cq-2);
    max-width: calc(100% - 24px);
    text-decoration: none;
}

/* 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__ad {
    display: inline-flex;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    align-items: center;
    height: 30px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.mag-card__avt {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e8edf1;
}

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

.mag-card__name {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* ⚠ Khong co nen phia sau -> phai co bong do, neu khong gap anh
       sang la ten chim mat. Web co 465 bai, anh sang toi du kieu. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.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. */
.mag-card__date {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 20px;
    color: var(--cq-text-3, #9aa7b4);
    font-family: 'Montserrat', sans-serif;
    /* Nam cung hang chi so nen phai nho theo, khong thi no chenh ech ra */
    font-size: 10px;
}

/* Nut ba cham: neo o goc duoi phai the, NGOAI the <a> cua anh.
   ⚠ Khong duoc dat trong .mag-card__media - khoi do co overflow:hidden
     nen menu xo xuong se bi cat cut. */
/* Nut ba cham nam NGOAI hop chu, o goc duoi cung ben phai the, ngang
   hang voi dong luot xem / ngay trong hop.
   Cho nay la nen trang (ben phai phan hop tho xuong) nen dung chu xam. */
.mag-card__more {
    position: absolute;
    right: 6px;
    bottom: 7px;
    z-index: 4;
    padding: 2px 5px;
    color: var(--cq-text-3, #9aa7b4);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.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 ===== */
.mag-card__cap {
    display: block;
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    /* width co dinh (khong phai max-width) - de nen tieu de MOI THE deu
       rong bang nhau, khong co dan theo do dai ten bai.
       74% lay tu ban thu HTML: hep hon 86% nen anh lo ra nhieu hon,
       ma van du cho hai dong ten bai. */
    /* ⚠⚠ HOP CHU NEO GOC DUOI TRAI, RONG 85%, VA THO XUONG DUOI DAY ANH.
       Day la hinh dang chu web ve tay: the bai KHONG phai hinh chu nhat -
       no la anh, cong them hop trang nho ra o goc duoi trai.
         - rong 85% (khong phai 100%) -> day anh ben phai hop van lo ra
         - card co padding-bottom 22px -> hop tut xuong duoi day anh
       ⚠ Vi tho ra ngoai nen hop nay PHAI nam ngoai .mag-card__media
         (khoi do co overflow:hidden, de trong la bi cat cut). */
    left: 0;
    right: auto;
    width: 85%;
    /* ⚠ Dem DAY chi 6px - cat bot khoang trong thua duoi hang chi so.
       Doi so nay thi phai doi padding-bottom cua .mag-card cho khop. */
    padding: 14px 16px 6px;
    /* Nen trang hoi mo de thoang thay anh ben duoi. */
    background: rgba(255, 255, 255, .88);
    /* CHI bo goc TREN PHAI - do la goc duy nhat nho vao giua anh.
       Ba goc kia ap mep ngoai cua the nen de vuong. Phan bo goc cua
       ca the nam o ANH, khong phai o hop nay. */
    border-radius: 0 var(--cq-r-card) 0 0;
    text-decoration: none;
}

.mag-card__title {
    /* ⚠ CHIEU CAO CO DINH, khong phai min-height.
       Ten bai dai ngan khac nhau -> neu de tu co dan thi moi the mot
       chieu cao, hang luoi so le. 2 dong x 1.3 x 14px = 36.4px.
       Cat dung 2 dong bang -webkit-line-clamp. */
    height: 42px;
    margin: 0;
    /* ⚠ CHU DINH DAY khung ten, khong dinh dinh.
       Khung ten cao co dinh 42px (cho 2 dong) de moi the bang nhau.
       Ten chi co 1 dong ma de chu dinh tren thi ho ra ~21px truoc hang
       icon -> the do nhin lech han so voi cac the ten 2 dong.
       Cho dinh day thi DONG CUOI luon cach icon dung 12px, du ten 1
       hay 2 dong. Phan du ra doi len tren, la khoang trang lanh. */
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

/* Lop trong moi la cho cat 2 dong - the ngoai da dung cho viec canh day. */
.mag-card__title span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--cq-text, #14212e);
    font-family: 'Montserrat', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
}

.mag-card__stats {
    display: flex;
    align-items: center;
    /* Hang chi so co nho lai mot nua so voi ten bai - no la thong tin
       phu, khong duoc canh ten bai.
       ⚠ CHU DEN, KHONG LAM MO. Da co mot lan tu y lam mo xam (#9aa7b4)
         - chu web bao sai. Nho lai thi duoc, nhat di thi khong. */
    gap: var(--cq-2);
    /* ⚠ CAN THEO ICON, khong phai theo hop dong chu.
       Do that: khoang tren icon 14px / duoi icon 12px -> lech 2px.
       Nguyen nhan: chu ten bai co 2px dem VO HINH duoi dong cuoi (nua
       phan le cua line-height), nen dat margin 8px thi hop trong deu
       ma mat van thay tren rong hon. Ha 8 -> 6 de bu dung 2px do. */
    margin-top: 6px;
    color: var(--cq-text, #14212e);
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
}

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

.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ự) ===== */
.mag-detail { display: flex; align-items: flex-start; gap: 28px; }
.mag-detail > .page-right { flex: 1 1 auto; 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 { flex: 0 0 300px; width: 300px; }
.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 .item-3 { width:100%; float:none; margin:0 0 14px; padding:0; background:none; border:0; border-radius:0; }
.mag-aside__related .wrap-link-cus .item-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 { flex-direction: column; } .mag-detail__aside { flex-basis:auto; 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 .item-3 { margin: 0 0 22px; }
.mag-detail .mag-aside__related .item-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 .item-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 .item-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 .item-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 .item-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 .item-3 a.name { height: auto; }
.mag-detail .mag-aside__related .item-3 a.name:hover { color: var(--cq-green); }
.mag-detail .mag-aside__related .item-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 .item-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 .item-3 .news-item { position: relative; }
.mag-detail .mag-aside__related .item-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 .item-3 .desc-line > * { pointer-events: auto; }
.mag-detail .mag-aside__related .item-3 .desc-line > * { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; float: none; }
.mag-detail .mag-aside__related .item-3 .desc-line a { color: #fff; text-decoration: none; }
.mag-detail .mag-aside__related .item-3 .desc-line a:hover { color: #bff0e2; }
.mag-detail .mag-aside__related .item-3 .desc-line .cq-ico,
.mag-detail .mag-aside__related .item-3 .desc-line .cq-ic { width: 16px; height: 16px; }
.mag-detail .mag-aside__related .item-3 .desc-line .view i { font-style: normal; }
.mag-detail .mag-aside__related .item-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 .item-3 .desc-line .view,
.mag-detail .mag-aside__related .item-3 .desc-line .comments,
.mag-detail .mag-aside__related .item-3 .desc-line .share-box,
.mag-detail .mag-aside__related .item-3 .desc-line .share-box a,
.mag-detail .mag-aside__related .item-3 .desc-line .cq-ic { stroke: currentColor; }
.mag-detail .mag-aside__related .item-3 .desc-line .like.like.cq-qmark .cq-ring-base,
.mag-detail .mag-aside__related .item-3 .desc-line .like.like.cq-qmark .cq-ring-outline { stroke: #fff; }
.mag-detail .mag-aside__related .item-3 .like.cq-qmark .cq-ring-base,
.mag-detail .mag-aside__related .item-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); }