/* Huonriz — lớp giao diện riêng cho blog nhật ký. Dùng chung biến màu của chung.css. */

/* ===== Trang danh sách ===== */
.loc{display:flex;gap:10px;flex-wrap:wrap;margin-block:28px 0}
.loc button{font:600 .88rem var(--f-than);color:var(--muc-nhat);background:var(--giay);
  border:1px solid var(--vien);border-radius:999px;padding:9px 18px;cursor:pointer;transition:.15s}
.loc button:hover{color:var(--muc);border-color:var(--muc-nhat)}
.loc button[aria-pressed="true"]{background:var(--muc);border-color:var(--muc);color:var(--nen)}
.loc .dem{opacity:.7;font-weight:500}

.noi-bat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--giay);border:1px solid var(--vien);border-radius:20px;overflow:hidden;margin-top:34px}
.noi-bat .anh{margin:0;height:100%}
.noi-bat .anh img{width:100%;height:100%;min-height:260px;object-fit:cover}
.noi-bat .chu{padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0}
.noi-bat h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:10px 0 12px}
.noi-bat h2 a{text-decoration:none}
.noi-bat h2 a:hover{color:var(--dat)}
.noi-bat p{color:var(--muc-nhat)}
.noi-bat .chan-bai{margin-top:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--muc-nhat)}
@media (max-width:780px){.noi-bat{grid-template-columns:1fr}
  .noi-bat .chu{padding:24px}.noi-bat .anh img{min-height:200px;aspect-ratio:16/9}}

.thang{margin-top:clamp(40px,5vw,64px)}
.thang>h3{font:600 .78rem/1 var(--f-than);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muc-nhat);padding-bottom:12px;border-bottom:1px solid var(--vien);margin-bottom:22px}
.the .anh{margin:-24px -24px 6px;border-radius:15px 15px 0 0;overflow:hidden}
.the .anh img{width:100%;aspect-ratio:16/9;object-fit:cover}
.the .ngay{color:var(--muc-nhat)}
.the a.loai-lien{text-decoration:none}
.the a.loai-lien:hover{text-decoration:underline}
.trong-loc{display:none;margin-top:30px;color:var(--muc-nhat)}

/* ===== Trang bài ===== */
.bai{max-width:700px;margin-inline:auto}
.bai-dau{padding-block:clamp(36px,5vw,64px) 24px}
.bai-dau h1{font-size:clamp(2.1rem,4.8vw,3.3rem);margin-top:14px}
.bai-dau .nhan{margin-top:12px;line-height:1.5}
.bai-dau .sapo{margin-top:18px;font-size:1.15rem;color:var(--muc-nhat)}
.duong{font-size:.84rem;color:var(--muc-nhat);padding-top:22px}
.duong a{color:var(--muc-nhat);text-decoration:none}
.duong a:hover{color:var(--dat)}
.meta{margin-top:20px;display:flex;gap:12px;align-items:center;font-size:.86rem;color:var(--muc-nhat)}
.meta img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.anh-bai{margin:0 auto;max-width:980px;border-radius:20px;overflow:hidden}
.anh-bai img{width:100%;aspect-ratio:16/8;object-fit:cover}
.anh-bai figcaption{max-width:700px;margin:10px auto 0;font-size:.82rem;color:var(--muc-nhat)}
.so-lieu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:36px}
.so-lieu div{background:var(--giay);border:1px solid var(--vien);border-radius:14px;padding:18px 20px}
.so-lieu b{display:block;font:600 2rem/1.1 var(--f-hien);color:var(--dat);font-variant-numeric:tabular-nums}
.so-lieu span{font-size:.9rem;color:var(--muc-nhat)}
@media (max-width:520px){.so-lieu{grid-template-columns:1fr}}
.than{font-size:1.08rem;line-height:1.85}
.than p+p{margin-top:1.1em}
.than h2{font-size:1.6rem;margin:2em 0 .6em}
.than ul{margin:1.1em 0;padding-left:1.2em}
.than li+li{margin-top:.5em}
.than a{color:var(--dat);font-weight:500}
.than blockquote{margin:1.6em 0;padding-left:20px;border-left:2px solid var(--dat);
  font:italic 500 1.3rem/1.5 var(--f-hien)}
.ket{margin-top:44px;padding:24px;border-radius:16px;background:var(--kem);font-size:.95rem;color:var(--muc-nhat)}
.ket a{color:var(--dat);font-weight:600}

.chuyen-bai{max-width:700px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chuyen-bai a{display:block;background:var(--giay);border:1px solid var(--vien);border-radius:14px;
  padding:16px 20px;text-decoration:none;transition:.2s}
.chuyen-bai a:hover{border-color:var(--muc-nhat);transform:translateY(-2px)}
.chuyen-bai span{font:600 .72rem/1 var(--f-than);letter-spacing:.12em;text-transform:uppercase;color:var(--muc-nhat)}
.chuyen-bai b{display:block;margin-top:8px;font:600 1.02rem/1.35 var(--f-hien)}
.chuyen-bai .sau{text-align:right}
@media (max-width:620px){.chuyen-bai{grid-template-columns:1fr}.chuyen-bai .sau{text-align:left}}