/* Kiểu trình bày một trang nhật ký (dùng chung cho trang chính và trang từng mục) */
.loc-muc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.loc-muc button,.loc-muc a{font:inherit;font-size:14px;font-weight:600;border:1.5px solid var(--vien);background:var(--trang);color:var(--nau-dam);border-radius:999px;padding:7px 15px;cursor:pointer;text-decoration:none}
.loc-muc .chon{background:var(--nau);border-color:var(--nau);color:var(--trang)}
.bai{display:grid;grid-template-columns:96px 1fr;gap:18px;margin-bottom:26px}
.ngay-bai{background:var(--nau);color:var(--trang);border-radius:28px;padding:16px 8px;text-align:center;align-self:start;position:sticky;top:78px}
.ngay-bai b{display:block;font-size:38px;font-weight:800;line-height:1}
.ngay-bai span{display:block;font-size:13px;font-weight:600;margin-top:6px;line-height:1.35}
.bai .the{padding:26px}
.bai h3{font-size:22px;font-weight:800;line-height:1.3;margin:6px 0 8px;color:var(--nau-dam)}
.nhan-bai{display:flex;flex-wrap:wrap;gap:6px}
.nhan-bai a,.nhan-bai span{font-size:13px;font-weight:700;border-radius:999px;padding:3px 12px;text-decoration:none}
.nhan-bai a{background:var(--xanh);color:var(--nau-dam)}
.nhan-bai span{background:var(--go-sang);color:var(--nau-dam)}
.noi-dung p{color:var(--nau-dam);font-size:17px;margin-bottom:12px}
.noi-dung p:last-child{margin-bottom:0}
.anh-luoi{display:grid;gap:8px;margin-top:16px;grid-template-columns:repeat(2,1fr)}
.anh-luoi.mot{grid-template-columns:1fr}
.anh-luoi button{border:0;padding:0;background:var(--go-sang);border-radius:20px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3}
.anh-luoi.mot button{aspect-ratio:auto;max-height:560px;border-radius:28px}
.anh-luoi img{width:100%;height:100%;object-fit:cover}
.anh-luoi .them{position:relative}
.anh-luoi .them::after{content:attr(data-them);position:absolute;inset:0;background:rgba(59,36,20,.6);color:var(--trang);display:grid;place-items:center;font-size:28px;font-weight:800}
.video-bai{margin-top:16px;border-radius:28px;overflow:hidden;background:var(--nau-dam)}
.video-bai video{width:100%;max-height:600px}
.yt{position:relative;aspect-ratio:16/9}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.link-the{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border:1.5px solid var(--vien);border-radius:28px;text-decoration:none;background:var(--kem)}
.link-the:hover{border-color:var(--nau)}
.link-the i{width:40px;height:40px;border-radius:14px;background:var(--nau);flex:none;display:grid;place-items:center}
.link-the i svg{width:20px;height:20px;stroke:var(--trang)}
.link-the b{display:block;font-size:15px;color:var(--nau)}
.link-the span{display:block;font-size:13px;color:var(--chu-phu);word-break:break-all;line-height:1.4}
.chan-bai{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px dashed var(--vien);font-size:13px;color:var(--chu-phu)}
.chan-bai a{color:var(--nau);font-weight:700;text-decoration:none}
.trong{text-align:center;padding:32px 20px;border:2px dashed var(--go-vua);border-radius:28px;color:var(--chu-phu)}
.xem-them{display:flex;justify-content:center;margin-top:8px}

/* Danh sách bài gọn (trong từng mục ở trang chính) */
.bai-gon{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.bai-gon a{display:flex;flex-direction:column;text-decoration:none;color:var(--nau-dam);background:var(--trang);border:1px solid var(--vien);border-radius:28px;overflow:hidden}
.bai-gon a:hover{border-color:var(--nau)}
.bai-gon .hinh{aspect-ratio:16/10;background:var(--go-sang);display:grid;place-items:center;overflow:hidden}
.bai-gon .hinh img{width:100%;height:100%;object-fit:cover}
.bai-gon .hinh svg{width:44px;height:44px;stroke:var(--nau);fill:none;stroke-width:1.6}
.bai-gon .chu{padding:14px 18px 18px}
.bai-gon small{font-size:13px;font-weight:700;color:var(--xanh-dam)}
.bai-gon b{display:block;font-size:17px;line-height:1.35;margin-top:2px}
.dong-cuoi-muc{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.dong-cuoi-muc p{color:var(--chu-phu);font-size:15px}

/* Xem ảnh lớn */
.xem-anh{position:fixed;inset:0;z-index:50;background:rgba(59,36,20,.94);display:grid;place-items:center;padding:20px}
.xem-anh img{max-height:86vh;border-radius:16px}
.xem-anh button{position:absolute;background:var(--kem);color:var(--nau-dam);border:0;border-radius:999px;width:46px;height:46px;font-size:22px;font-weight:800;cursor:pointer;font-family:inherit}
.xem-anh .dong{top:16px;right:16px}
.xem-anh .truoc{left:12px;top:50%}
.xem-anh .sau{right:12px;top:50%}
.xem-anh .chu-anh{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:var(--trang);font-size:13px;padding:0 70px}
.xem-anh .chu-anh a{color:var(--trang)}

@media (max-width:960px){ .bai-gon{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .bai{grid-template-columns:1fr;gap:0}
  .ngay-bai{position:static;display:flex;align-items:baseline;gap:10px;border-radius:28px 28px 0 0;padding:12px 22px;text-align:left}
  .ngay-bai b{font-size:26px}
  .ngay-bai span{margin-top:0}
  .bai .the{border-radius:0 0 28px 28px;padding:20px}
  .bai h3{font-size:20px}
  .bai-gon{grid-template-columns:1fr}
}