vẫn còn và vẫn bấm được, chỉ là vô hình.
CỐ Ý vá hẹp ở đây thay vì sửa luật toàn cục: gỡ luật kia là đổi giao diện cả
trang. Phạm vi `.nd-body .news-content` = đúng phần HTML do trình soạn thảo
sinh ra trong thân bài tin, không chạm gì khác. */
.nd-body .news-content a {
color: var(--nd-blue);
text-decoration: underline;
/* Chữ Việt có nhiều dấu dưới (ạ, ợ, ụ); gạch chân sát quá sẽ dính vào dấu. */
text-underline-offset: 3px;
}
.nd-body .news-content a:hover {
text-decoration-thickness: 2px;
}
/* Link bọc quanh ảnh thì KHÔNG gạch chân — đường gạch sẽ cắt ngang mép ảnh. */
.nd-body .news-content a:has(> img),
.nd-body .news-content a:has(> figure) {
text-decoration: none;
}
/* ── Paragraphs ── */
.nd-body__para {
font-family: var(--nd-font);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--nd-grey-text);
margin: 0;
}
.nd-body__para + .nd-body__para {
margin-top: var(--nd-block-gap);
}
.nd-body__para strong {
font-weight: 600;
color: var(--nd-grey-text);
}
.nd-body__para em {
font-style: italic;
color: var(--nd-grey-text);
}
.nd-body__link {
color: var(--nd-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.nd-body__link:hover {
opacity: 0.8;
}
/* ── Figure (image + caption) ── */
.nd-figure {
margin: var(--nd-block-gap) 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.nd-figure + .nd-body__para,
.nd-body__para + .nd-figure,
.nd-figure + .nd-figure {
margin-top: var(--nd-block-gap);
}
.nd-figure__img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.nd-figure__caption {
font-family: var(--nd-font-serif);
font-size: 14px;
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: var(--nd-caption);
}
/* ── Source box ── */
.nd-source {
margin-top: var(--nd-block-gap);
background: var(--nd-grey-100);
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.nd-source__title {
font-family: var(--nd-font);
font-size: 18px;
font-weight: 500;
line-height: 1.35;
color: #000;
margin: 0;
}
.nd-source__text {
font-family: var(--nd-font);
font-size: 16px;
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: var(--nd-grey-text);
margin: 0;
}
/* ─────────────────────────────────────────────────────
RESPONSIVE — TABLET & MOBILE (≤ 1023 px)
───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
/* Inner container side padding */
.nd-hero__inner,
.nd-body__inner {
padding: 0 var(--nd-side-px-mb);
}
/* Article col: full width */
.nd-hero__col,
.nd-body__col {
max-width: 100%;
}
/* Hero */
.nd-hero {
padding-top: 48px;
}
.nd-hero__title {
font-size: 32px;
line-height: 1.2;
margin-bottom: 24px;
}
.nd-hero__subtitle {
font-size: 16px;
margin-bottom: 16px;
}
/* Meta row: single-line, 40px tall */
.nd-hero__meta {
align-items: center;
gap: 16px;
min-height: 40px;
}
/* Date: hide label, show only value */
.nd-hero__date-group {
flex-direction: row;
align-items: center;
gap: 0;
}
.nd-hero__date-label {
display: none;
}
.nd-hero__date-value {
font-size: 16px;
}
/* Views: xuống một hàng ngang nhưng GIỮ nhãn.
Khác với date group ở trên — ẩn nhãn ở đó vẫn đọc được vì giá trị là một ngày tháng,
còn lượt xem mà bỏ nhãn thì chỉ còn một con số không rõ nghĩa gì. */
.nd-hero__views-group {
flex-direction: row;
align-items: center;
gap: 4px;
}
.nd-hero__views-label,
.nd-hero__views-value {
font-size: 14px;
}
/* Share: hide label + icons, show mobile button */
.nd-hero__share {
flex-direction: row;
align-items: center;
gap: 0;
}
.nd-hero__share-label,
.nd-hero__share-icons {
display: none;
}
.nd-hero__share-btn-mb {
display: flex;
}
/* Divider */
.nd-hero__divider {
margin-top: 24px;
}
/* Body */
.nd-body {
padding: 24px 0 48px;
}
/* Block gaps */
.nd-body__para + .nd-body__para {
margin-top: var(--nd-block-gap-mb);
}
.nd-figure {
margin-top: var(--nd-block-gap-mb);
}
.nd-figure + .nd-body__para,
.nd-body__para + .nd-figure,
.nd-figure + .nd-figure {
margin-top: var(--nd-block-gap-mb);
}
.nd-source {
margin-top: var(--nd-block-gap-mb);
gap: 16px;
}
.nd-source__title {
font-size: 16px;
}
}
/* ─────────────────────────────────────────────────────
COPY-LINK TOAST FEEDBACK
───────────────────────────────────────────────────── */
.nd-copy-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(16px);
background: #333;
color: #fff;
font-family: var(--nd-font);
font-size: 14px;
padding: 10px 20px;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 9999;
white-space: nowrap;
}
.nd-copy-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ─────────────────────────────────────────────────────
STICKY TITLE BAR
– appears below the fixed header on mobile and desktop
when the article title scrolls out of view
───────────────────────────────────────────────────── */
.nd-sticky-title {
display: none;
}
.nd-sticky-title__content {
max-width: calc(var(--nd-inner-max) + var(--nd-side-px) * 2);
padding: 10px;
}
@media (min-width: 768px) {
.nd-sticky-title__content {
padding-left: calc(var(--nd-side-px) + 89px + 16px);
}
}
.nd-sticky-title__back-btn {
align-items: center;
justify-content: center;
background: var(--nd-blue);
transition: background 0.2s ease;
padding: 10px 16px;
position: absolute;
left: var(--nd-side-px);
top: 50%;
transform: translateY(-50%);
width: 89px;
height: 56px;
}
.nd-sticky-title__text {
font-family: var(--nd-font);
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: var(--nd-blue);
text-transform: uppercase;
pointer-events: none;
}
@media (max-width: 1023px) {
.nd-sticky-title {
display: block;
position: fixed;
top: var(--mp-nav-h);
left: 0;
right: 0;
z-index: 890; /* below header (900) */
background: #fff;
border-bottom: 1px solid var(--nd-grey-300);
font-family: var(--nd-font);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--nd-blue);
text-transform: uppercase;
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.nd-sticky-title.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
@media (min-width: 1024px) {
.nd-sticky-title {
display: block;
position: fixed;
top: calc(var(--mp-topbar-h));
left: 0;
right: 0;
z-index: 890;
background: #fff;
border-bottom: 1px solid var(--nd-grey-300);
font-family: var(--nd-font);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--nd-blue);
text-transform: uppercase;
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
padding: 0;
}
.nd-sticky-title.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
/* ─────────────────────────────────────────────────────
RELATED NEWS SECTION
───────────────────────────────────────────────────── */
.nd-related {
background: var(--nd-grey-100);
padding: 80px 0;
}
/*
* Inner container uses CSS grid-template-areas so the
* single "Xem tất cả" button can live in the header row
* on desktop, yet reflow below the card grid on mobile.
*/
.nd-related__inner {
max-width: calc(var(--nd-inner-max) + var(--nd-side-px) * 2);
margin: 0 auto;
padding: 0 var(--nd-side-px);
display: grid;
grid-template-areas:
"title btn"
"grid grid";
grid-template-columns: 1fr auto;
row-gap: 24px;
align-items: center;
}
/* ── Section title ── */
.nd-related__header {
grid-area: title;
align-self: center;
}
.nd-related__title {
font-family: var(--nd-font);
font-size: 32px;
font-weight: 600;
line-height: 1.2;
color: #000;
margin: 0;
}
/* ── "Xem tất cả tin tức" button ── */
.nd-related__view-all {
grid-area: btn;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
height: 56px;
background: var(--nd-blue);
color: #fff;
font-family: var(--nd-font);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
text-transform: uppercase;
transition: background 0.3s ease, color 0.3s ease;
}
.nd-related__view-all:hover,
.nd-related__view-all:focus {
background: #ffffff;
color: var(--nd-blue);
}
/* Arrow container – two-icon slide animation */
.nd-related__arrow {
display: inline-flex;
align-items: center;
width: 24px;
height: 24px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
.nd-related__arrow-icon {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 16px;
transform: translate(-50%, -50%) rotate(-45deg);
transition: transform 0.3s ease, stroke 0.3s ease;
flex-shrink: 0;
}
.nd-related__arrow-icon--2 {
transform: translate(calc(-50% - 19px), calc(-50% + 19px)) rotate(-45deg);
}
.nd-related__view-all:hover .nd-related__arrow-icon:not(.nd-related__arrow-icon--2) {
transform: translate(calc(-50% + 19px), calc(-50% - 19px)) rotate(-45deg);
stroke: var(--nd-blue);
}
.nd-related__view-all:hover .nd-related__arrow-icon--2 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.nd-related__view-all:hover .nd-related__arrow-icon--2 path {
stroke: var(--nd-blue);
}
/* ── 3-column card grid ── */
.nd-related__grid {
grid-area: grid;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* ── Individual card ── */
.nd-related-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.nd-related-card__img-wrap {
position: relative;
width: 100%;
aspect-ratio: 427 / 327;
overflow: hidden;
flex-shrink: 0;
}
.nd-related-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Dark overlay — fades in on hover (desktop) */
.nd-related-card__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
z-index: 1;
pointer-events: none;
transition: opacity 0.35s ease;
}
.nd-related-card__desc {
position: absolute;
right: 0;
bottom: 12px;
left: 0;
padding: 20px;
font-family: var(--nd-font);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #fff;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 100%);
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
max-height: calc(2 * 2.2em);
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.35s ease, transform 0.35s ease;
pointer-events: none;
z-index: 2;
}
/* Centered blue arrow — hidden by default, fades in on hover (desktop) */
.nd-related-card__arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background: var(--nd-blue);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.35s ease;
z-index: 3;
}
.nd-related-card .nd-related-card__arrow svg {
transform: rotate(-45deg);
}
@media (min-width: 1024px) {
.nd-related-card:hover .nd-related-card__overlay {
opacity: 1;
}
.nd-related-card:hover .nd-related-card__desc,
.nd-related-card:focus-visible .nd-related-card__desc,
.nd-related-card:focus-within .nd-related-card__desc {
opacity: 1;
transform: translateY(0);
}
.nd-related-card:hover .nd-related-card__arrow {
opacity: 1;
}
}
/* Card body */
.nd-related-card__body {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 24px;
flex: 1;
}
/* Meta row: tag (left) + date (right) */
.nd-related-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.nd-related-card__tag {
font-family: var(--nd-font);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--nd-blue);
}
.nd-related-card__date {
font-family: var(--nd-font);
font-size: 12px;
font-weight: 300;
line-height: 1.5;
color: var(--nd-grey-dark);
white-space: nowrap;
}
.nd-related-card__title {
font-family: var(--nd-font);
font-size: 16px;
font-weight: 500;
line-height: 1.4;
color: var(--nd-grey-dark);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
.nd-related-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 16px;
}
.nd-related-card__views {
font-family: var(--nd-font);
font-size: 12px;
font-weight: 300;
line-height: 1.5;
color: var(--nd-grey-dark);
white-space: nowrap;
}
/* ─────────────────────────────────────────────────────
RELATED NEWS – MOBILE / TABLET (≤ 1023 px)
───────────────────────────────────────────────────── */
@media (max-width: 1023px) {
.nd-related {
padding: 48px 0;
}
/* Reorder: title → card list → view-all button */
.nd-related__inner {
padding: 0 var(--nd-side-px-mb);
grid-template-areas:
"title"
"grid"
"btn";
grid-template-columns: 1fr;
row-gap: 0;
}
/* Header: title with border-bottom, 24 px breathing room below */
.nd-related__header {
padding-bottom: 24px;
border-bottom: 1px solid var(--nd-grey-300);
margin-bottom: 24px;
}
.nd-related__title {
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
/* Button: left-aligned, below the grid */
.nd-related__view-all {
justify-self: start;
margin-top: 32px;
height: auto;
padding: 12px 16px;
gap: 8px;
}
/* Grid: single-column list */
.nd-related__grid {
grid-template-columns: 1fr;
gap: 0;
}
/* Card: horizontal layout – image left (196 px), title right */
.nd-related-card {
flex-direction: row;
align-items: flex-start;
gap: 16px;
padding-bottom: 16px;
}
/* Divider between items */
.nd-related-card:not(:last-child) {
border-bottom: 1px solid var(--nd-grey-300);
margin-bottom: 16px;
}
.nd-related-card__img-wrap {
width: 196px;
flex-shrink: 0;
aspect-ratio: 196 / 147;
}
.nd-related-card__desc {
display: none;
}
/* Hide decorative arrow overlay on mobile */
.nd-related-card__arrow {
display: none;
}
/* Body: side-by-side with image, no top padding */
.nd-related-card__body {
padding-top: 0;
gap: 0;
flex: 1;
}
/* Hide tag / date on mobile (horizontal layout shows title only) */
.nd-related-card__meta {
display: none;
}
}
/* Căn đề 2 bên cho nội dung bài viết */
.news-content {
text-align: justify;
}
/* Hình ảnh trong bài viết cách top/bottom 10px */
.news-content img {
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
/* Chú thích hình ảnh căn giữa:
- img + p : đứng ngay sau ![]()
(nhập liệu tay, không có inline style)
- p[style*="text-align: center"] :
có sẵn inline style căn giữa
- figcaption : thẻ caption chuẩn HTML5
*/
.news-content img + p,
.news-content p[style*="text-align: center"],
.news-content figcaption {
text-align: center !important;
margin-bottom:10px;
}
/* Kiểu chữ của chú thích ảnh (#108).
Trước đây chỉ căn giữa, nên chú thích hiện CÙNG cỡ và CÙNG màu với chữ thân bài — người đọc
không phân biệt được đâu là chú thích, đâu là nội dung.
Bộ giá trị dưới đây lấy đúng từ .nd-figure__caption (dòng 341) — bộ style đã được thiết kế
cho chú thích nhưng chưa từng dùng được, vì class .nd-figure chỉ có trong bản dựng tĩnh còn
HTML do TinyMCE sinh ra là ![]()
.
Giữ nguyên căn giữa: đó là cách các bài hiện có đang hiển thị, đổi sang căn trái là thay đổi
thị giác trên toàn bộ tin tức đã đăng — nếu muốn đổi thì đổi có chủ đích, không lẫn vào đây. */
.news-content figcaption {
font-family: var(--nd-font-serif);
font-size: 14px;
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: var(--nd-caption);
}
/* do TinyMCE sinh ra không có class nào, nên nhận margin mặc định của Bootstrap
(figure{margin:0 0 1rem}). Đặt lại để khoảng cách ảnh–chú thích khớp với .nd-figure. */
.news-content figure {
margin: 0 0 10px;
}
.news-content figure img {
margin-bottom: 6px;
}