:root{
  --nen:#12171f; --tam:#1a212b; --noi:#212a36; --vien:#2b3644;
  --chu:#e3e8ef; --mo:#8b97a8; --nhat:#5f6b7c;
  --nhan:#37b0c9; --nhan-mo:#1e5866;
  --chua:#6b7684; --dang:#d9a441; --xong:#4fb477; --loi:#d9605a;
  --r:6px;
}
@media (prefers-color-scheme: light){
  :root{ --nen:#f4f6f9; --tam:#fff; --noi:#eef1f6; --vien:#d6dce6;
         --chu:#1a2029; --mo:#5b6674; --nhat:#8c96a4; --nhan-mo:#cdeaf1; }
}
:root[data-theme="dark"]{ --nen:#12171f; --tam:#1a212b; --noi:#212a36; --vien:#2b3644;
  --chu:#e3e8ef; --mo:#8b97a8; --nhat:#5f6b7c; --nhan-mo:#1e5866; }
:root[data-theme="light"]{ --nen:#f4f6f9; --tam:#fff; --noi:#eef1f6; --vien:#d6dce6;
  --chu:#1a2029; --mo:#5b6674; --nhat:#8c96a4; --nhan-mo:#cdeaf1; }

*{box-sizing:border-box}

/* `hidden` phải THẮNG mọi khai báo display khác.
 *
 * Thuộc tính `hidden` chỉ đặt `display:none` qua bảng kiểu mặc định của trình duyệt, nên bất
 * kỳ `display` nào viết trong `style=` hay trong lớp CSS cũng đè lên nó. Hộp "đổi mật khẩu"
 * có `display:grid` nội tuyến, thế là nó hiện ngay từ lúc mở trang và bấm Huỷ không tắt —
 * `hidden=true` có được đặt, chỉ là không có tác dụng gì.
 *
 * Một dòng ở đây chặn cả họ lỗi đó cho mọi thẻ về sau. */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--nen);color:var(--chu);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-variant-numeric:tabular-nums}

/* ── thanh trên ── */
.top{display:flex;align-items:center;gap:14px;padding:9px 14px;
  border-bottom:1px solid var(--vien);background:var(--noi)}
.logo{font:700 13px/1 ui-monospace,monospace;letter-spacing:.04em}
.logo a{color:var(--nhat);text-decoration:none;font-weight:400;margin-left:10px}
.logo a:hover{color:var(--nhan)}
.ws{display:flex;gap:2px;background:var(--nen);border-radius:var(--r);padding:2px}
.ws button{font:600 12px/1 inherit;padding:6px 12px;border:0;border-radius:4px;
  cursor:pointer;background:transparent;color:var(--mo)}
.ws button[aria-selected="true"]{background:var(--nhan-mo);color:var(--chu)}
.me{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mo)}
.av{width:22px;height:22px;border-radius:50%;background:var(--nhan-mo);color:var(--chu);
  display:grid;place-items:center;font:700 10px/1 ui-monospace,monospace;text-transform:uppercase}
.me button{background:none;border:0;color:var(--nhat);cursor:pointer;font:12px inherit;padding:0}
.me button:hover{color:var(--loi)}

button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,
a:focus-visible{outline:2px solid var(--nhan);outline-offset:2px}

/* ── bố cục ── */
.than{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 41px)}

/* ── ĐIỆN THOẠI: một thẻ mỗi lần, vuốt để sang bài ────────────────────────
 * Danh sách dọc trên màn hẹp buộc người dùng vuốt qua hàng chục bài chỉ để mở một bài. Ở
 * đây việc luôn là "xem bài này rồi sang bài kế", nên bỏ hẳn danh sách: giữ thanh lọc trên
 * cùng, phần còn lại là MỘT thẻ. Vuốt trái sang bài sau, vuốt phải về bài trước.
 */
@media(max-width:840px){
  .than{grid-template-columns:1fr;height:auto}
  .ds{border:0;overflow:visible;position:sticky;top:0;z-index:3}
  .ds .ngay,.ds .bai,.ds .trong{display:none}   /* bỏ danh sách, giữ mỗi thanh lọc */
  .ph{border:0;padding:12px 15px 90px;touch-action:pan-y}
  .dieu-huong{display:flex !important}
  .top{gap:9px;padding:8px 11px}
  .logo{font-size:12px} .logo a{display:none}
  .ws button{padding:6px 9px;font-size:11px}
  .me{font-size:11px;gap:7px} .me #ten{display:none}
  .tieu h1{font-size:17px}
  .nut{padding:11px 16px}                        /* ngón tay cần vùng bấm rộng hơn con trỏ */
  .luu{position:fixed;left:0;right:0;bottom:0;margin:0;padding:9px 14px;background:var(--noi);
       border-top:1px solid var(--vien);z-index:4}
  .luu .nut{flex:1;justify-content:center}
  .luu .bao{display:none}
}

/* Thanh điều hướng thẻ — chỉ trên máy hẹp. Có mũi tên bấm được bên cạnh cử chỉ vuốt: vuốt
 * nhanh hơn nhưng không phải ai cũng đoán ra là vuốt được, và một tính năng ẩn thì bằng
 * không có. */
.dieu-huong{display:none;align-items:center;gap:10px;margin-bottom:10px}
.dieu-huong button{background:var(--tam);border:1px solid var(--vien);border-radius:var(--r);
  color:var(--chu);font:15px/1 inherit;padding:8px 14px;cursor:pointer}
.dieu-huong button[disabled]{opacity:.35}
.dieu-huong .vi-tri{flex:1;text-align:center;font:12px/1 ui-monospace,monospace;color:var(--nhat)}

/* Ra hiệu bài đã đổi. Không có phản hồi này thì vuốt xong nội dung thay đột ngột, người dùng
 * không chắc mình vừa sang bài mới hay trang tự nhảy. */
@keyframes truot-trai{from{transform:translateX(26px);opacity:.3}to{transform:none;opacity:1}}
@keyframes truot-phai{from{transform:translateX(-26px);opacity:.3}to{transform:none;opacity:1}}
.ph.sang-sau{animation:truot-trai .16s ease-out}
.ph.sang-truoc{animation:truot-phai .16s ease-out}
@media(prefers-reduced-motion:reduce){.ph.sang-sau,.ph.sang-truoc{animation:none}}
  font:600 13px inherit;padding:0 0 10px;cursor:pointer}

.ds{border-right:1px solid var(--vien);overflow-y:auto;background:var(--tam)}
.loc{padding:8px 12px;border-bottom:1px solid var(--vien);background:var(--noi);
  display:flex;gap:6px;position:sticky;top:0;z-index:2}
.loc select{flex:1;min-width:0;background:var(--nen);border:1px solid var(--vien);
  border-radius:var(--r);color:var(--chu);font:12px/1 inherit;padding:6px 7px}
.ngay{position:sticky;top:41px;background:var(--noi);border-bottom:1px solid var(--vien);
  padding:6px 12px;font:600 11px/1 ui-monospace,monospace;letter-spacing:.08em;
  color:var(--mo);z-index:1}
.ngay span{float:right;color:var(--nhat);font-weight:400}
.bai{display:flex;gap:9px;padding:10px 12px;border:0;border-bottom:1px solid var(--vien);
  cursor:pointer;width:100%;text-align:left;background:none;color:inherit;font:inherit}
.bai:hover{background:var(--noi)}
.bai[aria-current="true"]{background:var(--noi);box-shadow:inset 3px 0 0 var(--nhan)}
.cham{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:var(--chua)}
.cham.dang{background:var(--dang)} .cham.xong{background:var(--xong)}
.bai .t{font-size:13px;line-height:1.45;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.bai .m{font:11px/1.6 ui-monospace,monospace;color:var(--nhat);margin-top:3px}

/* ── màn review ── */
.ph{padding:18px 22px 40px;overflow-y:auto}
.tieu{display:flex;align-items:flex-start;gap:10px}
.tieu h1{margin:0;font-size:19px;line-height:1.35;flex:1;text-wrap:balance}
.mo-lk{flex:0 0 auto;font:600 12px/1 inherit;padding:7px 12px;border:1px solid var(--vien);
  border-radius:var(--r);background:var(--tam);color:var(--chu);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.mo-lk:hover{border-color:var(--nhan);color:var(--nhan)}
.lk{font:11px/1.6 ui-monospace,monospace;color:var(--nhat);word-break:break-all;margin-top:4px}

.nh{font:600 10px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nhat);margin:22px 0 8px}
.hop{border:1px solid var(--vien);border-radius:var(--r);padding:13px 15px;background:var(--tam)}
.hop p{font-size:14px;margin:0 0 10px}
.hop p:last-child{margin:0}
.hop .ct{color:var(--mo);font-size:13px}

.chon{display:flex;gap:8px;margin:13px 0 8px}
.nut{font:600 13px/1 inherit;padding:9px 18px;border:1px solid var(--vien);
  border-radius:var(--r);background:var(--tam);color:var(--chu);cursor:pointer}
.nut:hover{border-color:var(--nhan)}
.nut[aria-pressed="true"].dat{background:var(--xong);border-color:var(--xong);color:#06251a}
.nut[aria-pressed="true"].chua{background:var(--loi);border-color:var(--loi);color:#2a0806}
.nut.ok{background:var(--nhan);border-color:var(--nhan);color:#04222a}
.nut[disabled]{opacity:.5;cursor:default}
textarea{width:100%;background:var(--tam);border:1px solid var(--vien);border-radius:var(--r);
  color:var(--chu);font:13px/1.6 inherit;padding:9px 11px;resize:vertical}

.cmt-ds{border:1px solid var(--vien);border-radius:var(--r);background:var(--tam);overflow:hidden}
.cmt-ds ol{margin:0;padding:0}
.cmt-ds li{list-style:none;padding:8px 13px;font-size:13.5px;display:flex;gap:10px;
  border-bottom:1px solid var(--vien)}
.cmt-ds li:last-child{border-bottom:0}
.stt{font:11px/1.7 ui-monospace,monospace;color:var(--nhat);flex:0 0 22px}
.rep{padding-left:34px;color:var(--mo)}

.luu{display:flex;gap:8px;margin-top:18px;align-items:center;flex-wrap:wrap}
.luu .bao{font-size:12px;color:var(--nhat);margin-left:auto}

/* ── đăng nhập ── */
.dn{max-width:340px;margin:14vh auto;padding:24px}
.dn h1{font-size:20px;margin:0 0 4px}
.dn p{color:var(--mo);font-size:13px;margin:0 0 18px}
.dn input{width:100%;background:var(--tam);border:1px solid var(--vien);border-radius:var(--r);
  color:var(--chu);font:14px inherit;padding:10px 12px;margin-bottom:9px}
.dn .nut{width:100%;justify-content:center;padding:11px}
.loi-dn{color:var(--loi);font-size:13px;margin-top:10px;min-height:20px}

.trong{padding:60px 24px;text-align:center;color:var(--nhat);font-size:14px}