:root{
  --nen:#f6f7f9; --the:#fff; --vien:#e3e6ea; --chu:#1c2024; --chu-nhat:#69707d;
  --chinh:#2563eb; --chinh-dam:#1d4ed8; --xanh:#0f9d58; --do:#d93025; --vang:#b45309;
  --bo-tron:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--chu);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--chinh);text-decoration:none}
a:hover{text-decoration:underline}

/* Sidebar trái cố định; main lùi vào đúng bề rộng của nó */
.ben{position:fixed;left:0;top:0;bottom:0;width:212px;background:var(--the);
  border-right:1px solid var(--vien);display:flex;flex-direction:column;padding:18px 12px;z-index:20}
.ben .hieu{font-weight:700;font-size:16px;padding:4px 10px 16px}
.ben nav{display:flex;flex-direction:column;gap:2px;flex:1}
.ben nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
  color:#3d434c;font-weight:500}
.ben nav a:hover{background:var(--nen);text-decoration:none}
.ben nav a.dang{background:#eaf1fe;color:var(--chinh-dam);font-weight:600}
.ben .bieu{width:17px;text-align:center;opacity:.75}
.ben .day{border-top:1px solid var(--vien);padding:12px 10px 2px;font-size:13px}
.ben .day .ten{font-weight:600}

main{padding:16px 28px 60px}
body.co-ben main{margin-left:212px}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px}
.dan{color:var(--chu-nhat);font-size:13.5px;margin:0 0 18px}

.the{background:var(--the);border:1px solid var(--vien);border-radius:var(--bo-tron);
  padding:18px;margin-bottom:18px}
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

label{display:block;font-size:13px;font-weight:600;margin:0 0 5px;color:#3d434c}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--vien);
  border-radius:8px;font:inherit;background:#fff;color:var(--chu)}
input:focus,select:focus,textarea:focus{outline:2px solid #bfd3fb;border-color:var(--chinh)}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.hang{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.hang>div{flex:1;min-width:150px}
.gon{margin-bottom:12px}

button,.nut{display:inline-block;padding:9px 16px;border:1px solid var(--chinh);
  border-radius:8px;background:var(--chinh);color:#fff;font:inherit;font-weight:600;
  cursor:pointer;white-space:nowrap}
button:hover{background:var(--chinh-dam)}
.phu{background:#fff;color:var(--chu);border-color:var(--vien)}
.phu:hover{background:var(--nen)}
.nguy{background:#fff;color:var(--do);border-color:#f0c5c1}
.nguy:hover{background:#fdf0ef}
.nho{padding:5px 10px;font-size:13px}

/* Bảng bài viết có 9 cột mà cột phụ đã ăn hơn 400px, nên cho bảng một bề rộng tối thiểu
   rồi cuộn ngang trong khung .the — không thì cột Nội dung bị bóp còn hơn 100px. */
table{width:100%;border-collapse:collapse;font-size:14px}
/* Vừa một màn hình, không kéo ngang: bảng tự co, hai cột chữ chia nhau phần còn lại.
   Đừng đặt min-width cho bảng — cộng thêm menu 212px và cột phụ 212px là tràn ngay. */
table.bang-bai{table-layout:fixed}
table.bang-bai th:nth-child(1){width:88px}
table.bang-bai th:nth-child(2){width:34%}
table.bang-bai th:nth-child(3){width:auto}
table.bang-bai .so{width:62px}
table.bang-bai .ngay-lay{width:84px}
table.bang-bai th:last-child{width:52px}
table.bang-bai td,table.bang-bai th{padding:8px 7px}
table.bang-bai td.so{font-size:13px}
/* Kẻ dọc giữa các cột như Google Sheet — không có nó thì cột Nội dung giãn ra,
   nhìn như có kẽ hở lớn giữa chữ và cột kế bên. */
th,td{border-right:1px solid var(--vien)}
th:last-child,td:last-child{border-right:0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--vien);vertical-align:top}
/* Không dùng position:sticky cho th: bảng nằm trong .the có overflow:auto nên
   sticky bám theo khung đó, header đè lên hàng đầu tiên. */
th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--chu-nhat);
  font-weight:600;background:#fafbfc}
tbody tr:hover{background:#fafbfc}
td.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.nhan{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600}
.nhan.photo{background:#e8f0fe;color:#1a56db}
.nhan.reel{background:#fdeaf1;color:#b3277a}
.nhan.video{background:#f3e8fd;color:#7127b3}
.nhan.text{background:#eef0f2;color:#4a5058}
.nhan.share{background:#e6f5ec;color:#0b7a43}
.nhan.admin{background:#fef3c7;color:var(--vang)}
.nhan.user{background:#eef0f2;color:#4a5058}
.nhan.dang_chay{background:#fef3c7;color:var(--vang)}
.nhan.xong{background:#e6f5ec;color:var(--xanh)}
.nhan.loi{background:#fdecea;color:var(--do)}

.bao{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.bao.tot{background:#e6f5ec;border:1px solid #b7e0c6;color:#0b5c33}
.bao.xau{background:#fdecea;border:1px solid #f5c3bd;color:#8c1d16}

.rong{text-align:center;padding:44px 20px;color:var(--chu-nhat)}
.mo{color:var(--chu-nhat);font-size:12.5px}
.cat{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
details>summary{cursor:pointer;color:var(--chinh);font-size:13px;list-style:none}
details>summary::-webkit-details-marker{display:none}
details[open]>summary{margin-bottom:8px}
details .noi{white-space:pre-wrap;background:var(--nen);padding:12px;border-radius:8px;
  font-size:13.5px;max-height:340px;overflow:auto}

.giua{max-width:390px;margin:9vh auto}
.trang-so{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.trang-so a,.trang-so span{padding:7px 12px;border:1px solid var(--vien);border-radius:8px;
  background:#fff;font-size:13.5px}
.trang-so span.day{background:var(--chinh);color:#fff;border-color:var(--chinh)}
.o-so{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:4px}
.o-so b{display:block;font-size:20px;line-height:1.2}
.o-so span{font-size:12.5px;color:var(--chu-nhat)}

/* Sắp xếp bằng cách bấm tên cột */
th a{color:inherit;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
th a:hover{color:var(--chinh);text-decoration:none}
th.dang-xep{color:var(--chinh)}
th .mui{font-size:9px;opacity:.9}
th.so,td.so{text-align:right}
th.so a{justify-content:flex-end}


/* Thu gọn sidebar: chỉ còn dải hẹp với biểu tượng, nội dung giãn ra chiếm chỗ */
.dau-ben{display:flex;align-items:center;gap:6px;padding:4px 4px 16px 10px}
.dau-ben .hieu{flex:1;padding:0}
.nut-gon{padding:3px 9px;border:1px solid var(--vien);background:var(--the);
  color:var(--chu-nhat);border-radius:7px;font-size:13px;line-height:1.3;cursor:pointer}
.nut-gon:hover{background:var(--nen);color:var(--chu)}

body.ben-gon .ben{width:52px;padding:18px 7px}
body.ben-gon main{margin-left:52px}
body.ben-gon .ben .hieu,
body.ben-gon .ben nav a span:not(.bieu),
body.ben-gon .nhom-kenh,
body.ben-gon .ben .day .ten,
body.ben-gon .ben .day .mo{display:none}
body.ben-gon .ben nav a{justify-content:center;padding:10px 0}
body.ben-gon .dau-ben{padding:0 0 14px;justify-content:center}
body.ben-gon .nut-gon{transform:rotate(180deg)}
body.ben-gon .ben .day{padding:10px 0 2px;text-align:center}
body.ben-gon .ben .day::after{content:"⏻";font-size:13px;color:var(--chu-nhat)}


/* Cột phụ: một cột riêng giữa menu chính và nội dung, kiểu "Bộ lọc" bên app SanSan.
   Cố ý KHÔNG nhét vào menu chính — kênh là dữ liệu, menu là điều hướng. */
.cot-phu{position:fixed;left:212px;top:0;bottom:0;width:212px;overflow-y:auto;
  padding:22px 14px;background:var(--nen);border-right:1px solid var(--vien);z-index:15}
body.ben-gon .cot-phu{left:52px}
/* Phải đủ đặc hiệu để thắng "body.co-ben main" ở trên, kẻo nội dung chỉ lùi
   212px và bị cột phụ đè lên. */
body.co-ben main.co-cot-phu{margin-left:424px}
body.co-ben.ben-gon main.co-cot-phu{margin-left:264px}

.hop-loc{background:var(--the);border:1px solid var(--vien);border-radius:11px;padding:14px 12px}
.ten-hop{font-weight:700;font-size:15px;padding:0 4px 11px}
.tim-kenh{padding:7px 10px;font-size:13px;margin-bottom:10px}
.nhan-nhom{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#9aa1ac;padding:11px 5px 5px}

.dong-kenh{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;
  font-size:13.5px;color:#3d434c;font-weight:500}
.dong-kenh:hover{background:var(--nen);text-decoration:none;color:var(--chu)}
.dong-kenh.dang{background:#eaf1fe;color:var(--chinh-dam);font-weight:600;
  box-shadow:inset 2px 0 0 var(--chinh)}
.dong-kenh .ten{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dong-kenh .dem{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--chu-nhat);
  background:var(--nen);padding:2px 7px;border-radius:20px}
.dong-kenh.dang .dem{background:#dbe7fd;color:var(--chinh-dam)}
.dong-kenh.tat-ca{border-bottom:1px solid var(--vien);border-radius:8px 8px 0 0;margin-bottom:2px}
.ds-kenh{display:flex;flex-direction:column;gap:1px}
.ds-kenh .trong{font-size:12.5px;color:var(--chu-nhat);padding:6px 9px}

.ds-keo{display:flex;flex-direction:column;gap:2px}
.dong-keo{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  font-size:13px;font-weight:600;color:#92400e;background:#fffbeb}
.dong-keo:hover{text-decoration:none}
.dong-keo .cham{width:7px;height:7px;border-radius:50%;background:var(--vang);flex:none;
  animation:nhay 1.2s ease-in-out infinite}
@keyframes nhay{0%,100%{opacity:1}50%{opacity:.25}}
.tien-do{font-size:11.5px;color:#92400e;padding:2px 9px 6px;line-height:1.45}

.them-kenh{display:block;margin-top:12px;padding:8px 9px;border-radius:8px;font-size:13px;
  font-weight:600;color:var(--chinh);border:1px dashed var(--vien);text-align:center}
.them-kenh:hover{background:var(--nen);text-decoration:none;border-color:var(--chinh)}
.them-kenh.dang{background:#eaf1fe;border-style:solid;border-color:var(--chinh)}

/* Trang Cài đặt: cột phụ là các mục con, không có dòng đếm nào cũng vẫn thẳng hàng */
.cot-phu .dong-kenh .dem:empty{display:none}

@media (max-width:1100px){
  .cot-phu{position:static;width:auto;border-right:0;padding:14px 0 0}
  main.co-cot-phu,body.ben-gon main.co-cot-phu{margin-left:212px}
}

/* Lời thoại đã bóc và trạng thái đang bóc */
details.co-loi>summary{color:var(--xanh);font-weight:600}
.dang-boc{display:flex;align-items:center;gap:7px;margin-top:5px;padding:5px 9px;
  background:#fffbeb;border-radius:7px;font-size:12.5px;color:#92400e}
.dang-boc .cham{width:6px;height:6px;border-radius:50%;background:var(--vang);flex:none;
  animation:nhay 1.2s ease-in-out infinite}

/* Thẻ đầu trang: sát lên trên, không cần tiêu đề lớn cho mỗi tab */
.the.gon-dau{margin-top:0;padding-top:14px}
.the.gon-dau h2{margin-bottom:10px}

/* Nút đánh dấu đã dùng */
/* Nút đánh dấu đã dùng: một dấu tích, xám khi chưa dùng, xanh đậm khi đã dùng */
button.tich{width:28px;height:28px;padding:0;border-radius:50%;font-size:14px;line-height:1;
  background:#fff;border:1px solid var(--vien);color:#c3c8ce;font-weight:700;cursor:pointer}
button.tich:hover{border-color:var(--xanh);color:var(--xanh);background:#f2fbf5}
button.tich.xong{background:var(--xanh);border-color:var(--xanh);color:#fff}
button.tich.xong:hover{background:#0b7a43}
.luc-dung{font-size:10.5px;color:#0b7a43;padding:3px 0 0;line-height:1.25;white-space:nowrap}
.nut-sao{padding:2px 7px;font-size:11px;border:1px solid var(--vien);border-radius:6px;
  background:#fff;color:var(--chu-nhat);cursor:pointer}
.nut-sao:hover{background:var(--nen);color:var(--chu)}
/* Link bài gộp vào ô thời gian cho đỡ một cột */
.o-thoi-gian .hang-link{display:flex;align-items:center;gap:5px;margin-top:4px}
.o-thoi-gian .hang-link a{font-size:12px}
.hang-loi .nut-sao{padding:3px 8px;font-size:11.5px}

/* Ô lời thoại: cho xem 4 dòng đầu, muốn đọc hết thì mở ra */
.cat-loi{max-height:7.5em;overflow:hidden;
  font-size:13px;line-height:1.5;color:#3d434c;white-space:pre-line}

/* Hàng dưới ô lời thoại: link xem cả bài và nút copy nằm cùng dòng */
.hang-loi{display:flex;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap}
.hang-loi details{flex:none}

/* Chữ trong hai cột dài phải tự ngắt, không thì bảng fixed bị đẩy rộng ra */
table.bang-bai td{overflow-wrap:anywhere}

/* Man duoi 1560px: thu menu va cot phu lai, nhuong cho cho hai cot chu cua bang —
   muc tieu la xem het trong mot man, khong keo ngang. */
@media (min-width:1101px) and (max-width:1560px){
  .ben{width:178px;padding:16px 9px}
  .cot-phu{left:178px;width:186px;padding:18px 10px}
  body.co-ben main.co-cot-phu{margin-left:364px}
  body.co-ben.ben-gon main.co-cot-phu{margin-left:238px}
  main{padding:14px 16px 60px}
  table.bang-bai th:nth-child(2){width:28%}
  table.bang-bai .so{width:56px}
  table.bang-bai td,table.bang-bai th{padding:7px 5px}
  .hop-loc{padding:11px 9px}
}

/* Mot hang duy nhat cho bo loc + so lieu, phang hoan toan de danh cho cho bang */
.thanh-loc{background:var(--the);border-bottom:1px solid var(--vien);padding:9px 12px;
  margin:-14px -16px 0}
.thanh-loc .hang{gap:7px;align-items:center}
.thanh-loc select,.thanh-loc input{padding:6px 9px;font-size:13px;border-radius:6px}
.thanh-loc button,.thanh-loc .nut{padding:6px 13px;font-size:13px;border-radius:6px}
.so-lieu{margin-left:auto;font-size:13px;color:var(--chu-nhat);white-space:nowrap;
  display:flex;gap:5px;align-items:baseline}
.so-lieu b{font-size:15px;color:var(--chu)}

/* Phang: bo vien va bo goc cua the, giu ke bang de con doc duoc */
.khung-bang{background:var(--the);overflow:auto;margin:0 -16px}
.the{border-radius:0;border-left:0;border-right:0;margin-bottom:0;
  border-top:0;border-bottom:1px solid var(--vien)}
.hop-loc{border-radius:0;border-left:0;border-right:0;border-top:0}
.bao{border-radius:0;margin:0 -16px 8px}

/* Loi thoai gian ngay trong o. Truoc day dung <details> mo ra mot khoi rieng, nhung
   khoi do nam trong flex nen tran sang cac cot ben canh. */
.cat-loi.mo-het{max-height:none;overflow:visible}
button.lien{background:none;border:0;padding:0;color:var(--chinh);font:inherit;font-size:12px;
  font-weight:600;cursor:pointer}
button.lien:hover{text-decoration:underline}

/* Thu gon menu: chu trong muc menu phai nam trong <span class="chu"> moi an duoc.
   Truoc day chu la text tran nen quy tac an khong khop, thu gon xong chu van con
   va bi ep xuong dong. */
body.ben-gon .ben .chu{display:none}
body.ben-gon .ben{width:52px;padding:16px 6px}
body.ben-gon .cot-phu{left:52px}
body.ben-gon .ben nav a{justify-content:center;padding:10px 0}
@media (min-width:1101px) and (max-width:1560px){
  body.ben-gon .ben{width:48px}
  body.ben-gon .cot-phu{left:48px}
  body.co-ben.ben-gon main.co-cot-phu{margin-left:234px}
}

/* Lan chuot thi thanh loc va hang tieu de dinh tren dau.
   Khung bang KHONG duoc co overflow:auto, khong thi sticky bam theo khung thay vi
   theo trang — day la ly do lan truoc phai bo sticky. Bang da vua mot man nen bo duoc. */
.khung-bang{overflow:visible}
.thanh-loc{position:sticky;top:0;z-index:12}
table.bang-bai thead th{position:sticky;top:47px;z-index:11;background:#f4f6f8;
  box-shadow:inset 0 -1px 0 var(--vien)}
@media (min-width:1101px) and (max-width:1560px){
  table.bang-bai thead th{top:44px}
}

/* Nhan chu de trong bang kenh — bam vao la loc theo chu de do */
.nhan-cd{display:inline-block;padding:2px 9px;border-radius:20px;background:#eef2f7;
  color:#4a5058;font-size:12px;font-weight:600}
.nhan-cd:hover{background:#e0e7ef;color:var(--chinh);text-decoration:none}
/* Cot phu nhom theo chu de: nhan nhom nam giua danh sach nen can khoang tho */
.ds-kenh .nhan-nhom{padding:9px 5px 4px}
.ds-kenh .nhan-nhom:first-child{padding-top:2px}

/* ===== Kéo giãn cột phụ =====
   Bề rộng menu và cột phụ thành biến: JS chỉ ghi --w-phu, còn vị trí cột phụ, tay kéo
   và lề trái của main tự tính theo. Khối này PHẢI nằm cuối tệp và mang theo hai @media
   của riêng nó — mấy @media phía trên đặt cứng left/width/margin, viết trước là bị đè
   im lặng mà không báo lỗi gì. */
:root{--w-ben:212px;--w-phu-mac:212px}
body.ben-gon{--w-ben:52px}
.ben,body.ben-gon .ben{width:var(--w-ben)}
.cot-phu,body.ben-gon .cot-phu{left:var(--w-ben);width:var(--w-phu,var(--w-phu-mac))}
body.co-ben main{margin-left:var(--w-ben)}
body.co-ben main.co-cot-phu,
body.co-ben.ben-gon main.co-cot-phu{margin-left:calc(var(--w-ben) + var(--w-phu,var(--w-phu-mac)))}

/* Tay kéo: dải trong suốt đè lên mép phải cột phụ, rê vào mới hiện vạch xanh.
   position:fixed chứ không nằm trong .cot-phu — cột phụ có overflow-y:auto nên tay kéo
   đặt bên trong sẽ cuộn theo danh sách kênh và biến mất khi lăn xuống. */
.tay-keo{position:fixed;top:0;bottom:0;width:9px;z-index:18;cursor:col-resize;
  left:calc(var(--w-ben) + var(--w-phu,var(--w-phu-mac)) - 4px)}
.tay-keo::before{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;
  background:transparent;transition:background .12s}
.tay-keo:hover::before,body.dang-keo-cot .tay-keo::before{background:var(--chinh);width:2px}
body.dang-keo-cot{cursor:col-resize;-webkit-user-select:none;user-select:none}

@media (min-width:1101px) and (max-width:1560px){
  :root{--w-ben:178px;--w-phu-mac:186px}
  body.ben-gon{--w-ben:48px}
}
/* Màn hẹp: cột phụ xếp trên nội dung, không còn mép dọc nào để kéo */
@media (max-width:1100px){
  .cot-phu,body.ben-gon .cot-phu{position:static;width:auto;border-right:0;padding:14px 0 0}
  body.co-ben main.co-cot-phu,
  body.co-ben.ben-gon main.co-cot-phu{margin-left:var(--w-ben)}
  .tay-keo{display:none}
}

/* Kênh vừa thêm hoặc vừa sửa: nháy vàng 4 giây cho dễ thấy giữa danh sách dài.
   Dùng animation chứ không đặt background thường — "tbody tr:hover" đặc hiệu hơn
   nên rê chuột vào là mất màu; animation thì thắng mọi khai báo thường. */
@keyframes vua-doi{0%,55%{background:#fff3c4}100%{background:transparent}}
.vua-doi{animation:vua-doi 4s ease-out}

/* Hộp dán link bài lẻ: cụp lại cho khỏi chiếm chỗ của bảng, bung ra khi cần */
.hop-dan-link{background:var(--the);border-bottom:1px solid var(--vien);margin:-14px -16px 0;
  padding:9px 12px}
.hop-dan-link>summary{font-weight:600;font-size:13px}
.hop-dan-link .hang{margin-top:9px;align-items:flex-start}
.hop-dan-link textarea{font-size:13px;min-height:52px}
/* Có hộp dán link đứng trước thì thanh lọc bỏ lề âm, kẻo hai khối chồng lên nhau */
.hop-dan-link+.thanh-loc{margin-top:0}