/* === MAU-CHU — trang Journal cua khach (luat design-website, chot MAU-CHU-MOT-NOI) ===
   Mau chung (nen, chu, reu, vien, anh tam) lay tu trang-chu.css bang var() — KHONG chep ma mau sang day.
   O day chi: mau dai "BAN XEM TRUOC" (chi man quan tri thay) + co chu rieng cua trang bai. Ngoai khoi nay CAM #hex / rgb(). */
:root{
 --j-xem-nen:#f3d36b; --j-xem-chu:#2b3125;   /* dai vang xem truoc */
 --j-co-h1:clamp(30px,22px + 2vw,46px);
 --j-co-the:clamp(19px,17px + .5vw,23px);
 --j-co-sapo:clamp(17px,16.5px + .125vw,18px);
 --j-co-than:clamp(16px,15.5px + .125vw,17px);
 --j-co-h2:clamp(22px,19px + .75vw,28px);
 --j-co-h3:clamp(18px,16px + .6vw,21px); /* Muc nho: nho hon h2, lon hon chu than */
 --j-co-nho:15px;
}
/* === HET MAU-CHU === */

[data-j]:empty{display:none}
.j-trang{padding:clamp(24px,18px + 1.5vw,40px) 0 clamp(40px,30px + 2.5vw,64px)}
.j-tieu-de{font:400 var(--j-co-h1)/1.15 var(--chu-tieu-de);color:var(--chinh);margin:0 0 18px;overflow-wrap:anywhere}

/* thanh danh muc: bay san, xuong dong khi hep (KHONG-GIAU-SAU-BAM, khong cuon ngang) */
.j-muc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.j-muc a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--vien-dam);color:var(--chu);font-size:var(--j-co-nho);text-decoration:none}
.j-muc a[aria-current]{background:var(--chinh);color:var(--tren-reu);box-shadow:none}

.j-luoi{display:grid;gap:32px 24px}
@media (min-width:700px){.j-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.j-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.j-trong{grid-column:1 / -1;color:var(--nhat);margin:0 0 12px}
.j-the{display:flex;flex-direction:column;gap:12px;min-width:0}
.j-the-anh{display:block;aspect-ratio:16 / 10;border-radius:4px;overflow:hidden;background:linear-gradient(160deg,var(--anh-a),var(--anh-b))}
.j-the-anh img{width:100%;height:100%;object-fit:cover;display:block}
.j-the-chu{display:flex;flex-direction:column;gap:8px;min-width:0}
.j-the-meta{font-size:var(--co-nhan);color:var(--nhat);margin:0;letter-spacing:.04em}
.j-the-ten{font:400 var(--j-co-the)/1.3 var(--chu-tieu-de);margin:0;overflow-wrap:anywhere}
.j-the-ten a{color:var(--chu);text-decoration:none}
.j-the-sapo{color:var(--nhat);margin:0;overflow-wrap:anywhere}
.j-phan-trang{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:40px;color:var(--nhat);font-size:var(--j-co-nho)}

/* mot bai */
.j-bai{max-width:760px}
.j-meta{font-size:var(--co-nhan);color:var(--nhat);margin:0 0 12px;letter-spacing:.04em}
.j-meta a{color:var(--chinh)}
.j-sapo{font-size:var(--j-co-sapo);line-height:1.6;color:var(--nhat);margin:0 0 24px;overflow-wrap:anywhere}
.j-bia{margin:0 0 32px;border-radius:6px;overflow:hidden;aspect-ratio:16 / 9;background:linear-gradient(160deg,var(--anh-a),var(--anh-b))}
.j-bia img{width:100%;height:100%;object-fit:cover;display:block}
.j-than{font-size:var(--j-co-than);line-height:1.75;overflow-wrap:anywhere}
.j-than>*+*{margin-top:1em}
.j-than h2{font-size:var(--j-co-h2);margin-top:1.6em;overflow-wrap:anywhere}
.j-than h3{font:700 var(--j-co-h3)/1.35 var(--chu-than);margin-top:1.4em;overflow-wrap:anywhere}
.j-than ul{padding-left:1.4em}
.j-than li+li{margin-top:.4em}
.j-than a{color:var(--chinh);text-decoration:underline;text-underline-offset:3px}
.j-anh{margin:1.6em 0 0}
.j-anh img{width:100%;height:auto;display:block;border-radius:4px}
.j-anh figcaption{font-size:var(--co-nhan);color:var(--nhat);margin-top:8px}
.j-video video{width:100%;max-height:80vh;display:block;border-radius:4px;background:var(--reu-dam)}
.j-video-link .nut{text-decoration:none}
.j-lui{margin-top:40px}
.j-xem-truoc{margin:0;padding:10px 16px;background:var(--j-xem-nen);color:var(--j-xem-chu);font:500 15px/1.4 var(--chu-than);text-align:center;letter-spacing:.06em}