.mag-banner {
    margin-left: calc(-1 * var(--cq-gutter));
    margin-right: calc(-1 * var(--cq-gutter));
    padding: 0;
}

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

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

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

.mag-feed {
    display: flex;
    flex-direction: column;
    gap: var(--cq-5);

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

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

.mag-card,
.mag-feed {
    box-shadow: none;
}

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

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

.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;
}

.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; }
.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; }
.mag-detail .mag-aside__related { background: none; border: 0; border-radius: 0; padding: 0; }
.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; }
.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; }
.mag-detail .mag-aside__related .news-item { box-shadow: none; }
@media (max-width: 991px) { .mag-detail { grid-template-columns: minmax(0, 1fr); } .mag-detail__aside { width:100%; position:static; } }
    
.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; }
.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: var(--cq-green); }
.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: var(--cq-green); }
.mag-detail .box-date, .mag-detail .box-date span { color: #7a8794; }
@media (max-width: 640px) { .mag-detail .box-title-name-large { font-size: 26px; } }

.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; }

.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; } }
    
.mag-detail .mag-aside__author .post-by-detail { position: static; padding: 0; }
.mag-detail .mag-aside__author { margin-bottom: 20px; }
.mag-detail .mag-aside__mentioned { margin-bottom: 20px; }
.nv-chips { display: flex; flex-direction: column; gap: var(--cq-2); }
.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); }
.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); }
.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; }
.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; }
.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; }
.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; }
    
.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.mag-blend img { opacity: 0; transition: opacity .5s ease; }
.mag-detail .content-detail.mag-blend img.mag-img-in { opacity: 1; }
.mag-detail .content-detail iframe { width: 100%; }
.mag-detail .content-detail figure { width: 100%; margin: 18px 0; }
.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; }
.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); }

.mag-rel {
    display: flex;
    flex-direction: column;
    gap: var(--cq-4);
}

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

.mag-card {
    display: block;
    position: relative;
    --cq-mark-inset: var(--cq-2);
}

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

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

.mag-card__cap {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    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;
}

.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__name {
    font-size: 12px;
    font-weight: 600;
}

.mag-card__stats {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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;
}