:root{
  --ground:#F4F7F5; --surface:#fff; --surface-2:#EAEEEB; --surface-3:#DFE6E2;
  --ink:#141E1B; --ink-2:#465450; --ink-3:#6F7D79;
  --line:#D9E1DD; --line-2:#C3CFCA;
  --accent:#0E6B60; --accent-2:#0A544B; --accent-soft:#D7EAE6;
  --nv:#1F5C96; --nv-soft:#DCE8F4;
  --warn:#8A5A0B; --warn-soft:#F6E8CF;
  --ok:#2A6B43; --ok-soft:#D8E9DE;
  --alert:#9C3627; --alert-soft:#F6DDD8;
  --radius:10px; --shadow:0 1px 2px rgba(20,30,27,.06),0 8px 24px -12px rgba(20,30,27,.18);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --ground:#0E1512; --surface:#161F1C; --surface-2:#1D2825; --surface-3:#26332F;
  --ink:#E8EFEC; --ink-2:#A8B6B1; --ink-3:#7C8B86; --line:#26332F; --line-2:#36453F;
  --accent:#4FBFAF; --accent-2:#7FD4C7; --accent-soft:#12312D;
  --nv:#71AEE6; --nv-soft:#132434; --warn:#D6A44F; --warn-soft:#2E2414;
  --ok:#68B98A; --ok-soft:#132A1D; --alert:#E08573; --alert-soft:#2F1A16;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font:15px/1.55 "Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* ---- thanh trên ---- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1240px;margin:0 auto;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;margin-right:auto;min-width:0}
.brand b{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand span{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
.whoami{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);white-space:nowrap}
.tabs{display:flex;gap:2px;max-width:1240px;margin:0 auto;padding:0 8px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font-size:13.5px;font-weight:500;color:var(--ink-3);cursor:pointer;white-space:nowrap}
/* ⚠ flex:0 0 auto BẮT BUỘC (22/09/2026). Mặc định của flex là CO LẠI khi chật, và
   white-space:nowrap chỉ cấm xuống dòng chứ không cấm co. Thêm tab "Kho media" là
   thanh tab vượt bề ngang, mọi nút co lại rồi bị cắt cụt — nút "Lịch tuần" hẹp tới
   mức trình duyệt coi như không nhìn thấy, bấm không được. Giao diện vẫn trông bình
   thường, không lỗi nào. Nay các nút GIỮ NGUYÊN bề ngang và cả thanh cuộn ngang. */
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

.wrap{max-width:1240px;margin:0 auto;padding:16px 14px 64px}

/* ---- dải thống kê ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:9px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;position:relative;overflow:hidden;cursor:pointer;text-align:left;width:100%}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.stat.c1::before{background:var(--ink-3)} .stat.c2::before{background:var(--nv)}
.stat.c3::before{background:var(--accent)} .stat.c4::before{background:var(--ok)}
.stat.c5::before{background:var(--alert)} .stat.c6::before{background:var(--warn)}
/* c7 = đã đăng: dùng màu "xong" đậm hơn c4 (đã lên lịch) để phân biệt hai bước cuối. */
.stat.c7::before{background:var(--ok)}
.stat.c7 .n{color:var(--ok)}
.stat .n{font-size:22px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat .k{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.stat .w{font-size:11px;color:var(--ink-2);margin-top:3px}

/* ---- bộ lọc ---- */
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;min-height:34px}
.chip[aria-pressed=true]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.filters .sep{width:1px;height:20px;background:var(--line-2);margin:0 3px}
select.week{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 10px;font-size:12.5px;font-weight:600}

/* ---- bảng 2 cột ---- */
.board{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.board{grid-template-columns:1fr}}
.list{display:flex;flex-direction:column;gap:7px}
@media(min-width:901px){.list{max-height:calc(100vh - 260px);overflow-y:auto;padding-right:4px}}
.card{width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--radius);padding:10px 11px;cursor:pointer;display:grid;gap:5px}
.card[aria-current=true]{border-color:var(--accent);box-shadow:var(--shadow)}
.card.s-editor_approved{border-left-color:var(--nv)}
.card.s-owner_approved{border-left-color:var(--accent)}
.card.s-scheduled,.card.s-published{border-left-color:var(--ok)}
.card.s-changes_requested,.card.s-cancelled{border-left-color:var(--alert)}
.card-top{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);
          /* ⚠ PHẢI CHO XUỐNG DÒNG. Hàng này có bốn thứ (huy hiệu nguồn · mã bài · nhãn kênh ·
             giờ đăng) và ba trong bốn KHÔNG được cắt chữ. Không cho xuống dòng thì ở màn
             390px cả trang sinh thanh cuộn ngang — bộ kiểm thử bắt được đúng lỗi này ngày
             26/09 khi thêm huy hiệu "Đề xuất AI". Xuống dòng thì huy hiệu vẫn ở ĐẦU như đề
             bài yêu cầu, chỉ là nó tự tìm chỗ khi hàng hẹp. */
          flex-wrap:wrap;row-gap:4px}
.code{font-weight:700;font-size:11.5px;color:var(--ink);background:var(--surface-2);padding:1px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.when{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.card h3{font-size:13.5px;font-weight:600;line-height:1.35}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.tag.t-editor_approved{background:var(--nv-soft);color:var(--nv)}
.tag.t-owner_approved{background:var(--accent-soft);color:var(--accent-2)}
.tag.t-scheduled,.tag.t-published{background:var(--ok-soft);color:var(--ok)}
.tag.t-changes_requested,.tag.t-cancelled{background:var(--alert-soft);color:var(--alert)}
.tag.m-missing,.tag.m-rejected{background:var(--alert-soft);color:var(--alert)}
.tag.m-in_progress,.tag.m-submitted{background:var(--warn-soft);color:var(--warn)}
.tag.m-ready{background:var(--ok-soft);color:var(--ok)}
.tag.qua-han{background:var(--alert);color:#fff}

/* ---- chi tiết ---- */
.detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.d-head{padding:15px 17px 12px;border-bottom:1px solid var(--line)}
.d-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--ink-3);margin-bottom:8px}
.d-head h2{font-family:Lora,Georgia,serif;font-size:19px;font-weight:600;line-height:1.3}
.d-body{padding:15px 17px;font-family:Lora,Georgia,serif;font-size:15.5px;line-height:1.75;max-width:68ch;white-space:pre-wrap;word-break:break-word}
.d-sec{padding:14px 17px;border-top:1px solid var(--line)}
.d-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:0 0 8px;font-weight:700}
.note{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--ink-2)}
.rule{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.rule b{color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.btn{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;min-height:46px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.danger{color:var(--alert);border-color:var(--alert)}
.btn.small{padding:7px 12px;min-height:36px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent}
textarea,input[type=text],input[type=url],input[type=email],input[type=password],select{width:100%;border:1px solid var(--line-2);border-radius:9px;background:var(--ground);padding:11px 12px;font-size:14.5px;min-height:46px}
textarea{min-height:76px;resize:vertical;line-height:1.55}
label.ck{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);padding:9px 0;cursor:pointer;line-height:1.5}
label.ck input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent)}
.field{margin-bottom:10px}
.field label.lbl{display:block;font-size:12px;color:var(--ink-3);margin-bottom:4px;font-weight:600}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.mitem{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface-2)}
.mitem img{aspect-ratio:4/5;object-fit:cover;width:100%;cursor:zoom-in}
.mitem .mi{padding:7px 8px;font-size:11px;color:var(--ink-3);display:grid;gap:3px}
.mitem.rejected{opacity:.55;border-color:var(--alert)}

.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.log li{font-size:12.5px;color:var(--ink-2);display:flex;gap:9px;align-items:baseline}
.log time{color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums;font-size:11.5px;min-width:96px}
.cmt{border-left:2px solid var(--line-2);padding:4px 0 4px 11px;margin-bottom:9px;font-size:13.5px}
.cmt .who{font-size:11.5px;color:var(--ink-3);margin-bottom:2px}
.empty{padding:34px 18px;text-align:center;color:var(--ink-3);font-size:13.5px}

.banner{border-radius:9px;padding:11px 13px;font-size:13px;margin-bottom:12px;line-height:1.55}
.banner.warn{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.banner.err{background:var(--alert-soft);color:var(--alert);border:1px solid color-mix(in srgb,var(--alert) 35%,transparent)}
.banner.ok{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.banner.info{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}

/* ---- hộp thoại ---- */
dialog{border:0;border-radius:14px;padding:0;background:var(--surface);color:var(--ink);max-width:560px;width:calc(100% - 28px);box-shadow:0 20px 60px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(10,20,17,.55)}
.dlg-h{padding:16px 18px 10px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px}
.dlg-b{padding:15px 18px;max-height:min(66vh,560px);overflow:auto}
.dlg-f{padding:12px 18px 16px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line)}

/* ---- bảng ---- */
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.doc h2{font-family:Lora,Georgia,serif;font-size:20px;margin-bottom:6px}
.doc h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin:18px 0 8px;font-weight:700}
.doc p{color:var(--ink-2);margin:0 0 10px;max-width:74ch}
.scroll{overflow-x:auto}
/* Bảng "theo từng kênh" có 9 cột. Ép vừa 390px thì cột nào cũng bẹp và chữ vỡ dọc.
   Cho nó giữ bề rộng tối thiểu rồi cuộn ngang TRONG khung — cả trang không tràn. */
#tab-solieu .scroll table{min-width:720px}
#tab-solieu .scroll{border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:620px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;white-space:nowrap}
tbody tr:hover{background:var(--surface-2)}

/* ---- đăng nhập ---- */
.login-wrap{min-height:100svh;display:grid;place-items:center;padding:20px}
.login{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:26px 24px;width:100%;max-width:400px}
.login h1{font-size:19px;margin-bottom:4px}
.login p.sub{font-size:13px;color:var(--ink-3);margin:0 0 18px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:10px;font-size:13.5px;z-index:90;max-width:min(92vw,520px);box-shadow:var(--shadow);white-space:pre-line}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- điện thoại: xem chi tiết thì ẩn danh sách, đỡ phải cuộn qua 40 thẻ ---- */
.quay-lai{display:none}
@media(max-width:900px){
  body.dang-xem .list,body.dang-xem .stats,body.dang-xem .filters{display:none}
  body.dang-xem .quay-lai{display:inline-flex}
  .d-body{font-size:16px}
  .acts .btn{flex:1 1 auto;min-width:46%}
}
.d-top{padding:11px 14px 0}

/* ---- lịch tuần ---- */
.lich{width:100%;border-collapse:separate;border-spacing:0;min-width:920px;font-size:12.5px}
.lich th{position:sticky;top:0;background:var(--surface);z-index:2;padding:8px 6px;
  border-bottom:1px solid var(--line-2);text-align:center;white-space:nowrap}
.lich th.hnay{background:var(--accent-soft);color:var(--accent-2)}
.lich td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  vertical-align:top;padding:5px;min-width:112px;height:58px}
.lich td.hnay{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.lich td.kcol{position:sticky;left:0;background:var(--surface);z-index:1;min-width:150px;
  border-right:2px solid var(--line-2);padding:8px 9px}
.lich td.kcol b{font-size:12.5px;display:block;line-height:1.3}
.lich td.kcol span{font-size:11px;color:var(--ink-3)}
.lo{display:block;width:100%;text-align:left;border:1px solid transparent;border-left:3px solid;
  border-radius:6px;padding:4px 6px;margin-bottom:4px;cursor:pointer;background:var(--surface-2);
  font-size:11.5px;line-height:1.35}
.lo:hover{filter:brightness(.97)}
.lo b{font-variant-numeric:tabular-nums;font-weight:700}
.lo .t{display:block;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo.s-chuaxong{border-left-color:var(--alert);background:var(--alert-soft);color:var(--alert)}
.lo.s-chosep{border-left-color:var(--nv);background:var(--nv-soft);color:var(--nv)}
.lo.s-daduyet{border-left-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}
.lo.s-dalenlich{border-left-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.lo.s-huy{border-left-color:var(--line-2);opacity:.5;text-decoration:line-through}
.lo.trung{border-color:var(--alert);box-shadow:0 0 0 2px var(--alert-soft)}
.chuthich{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 14px;font-size:12.5px;color:var(--ink-2)}
.chuthich i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ---- Việc hôm nay: danh sách dạng thẻ, bấm cả thẻ để mở bài ----
   Cố ý KHÔNG dùng bảng: trên điện thoại bảng tràn ngang, cột hạn nộp và nút mở bài
   rơi ra ngoài màn hình. Nhân sự làm việc bằng điện thoại là chính. */
.viec-ds{display:flex;flex-direction:column;gap:8px;margin-top:10px}
/* ⚠ Mặc định là KHỐI DỌC, không phải hàng ngang.
   Trước đây mặc định là `flex` (hàng ngang) rồi đi vá riêng từng tab bằng
   `#tab-order .viec-the{display:block}`. Cái bẫy: tab nào dùng lại .viec-the về sau
   mà quên vá thì tự động nhận hàng ngang — tiêu đề bài bị ép thành cột 3 ký tự và
   nút bị đẩy ra ngoài màn hình. Đã xảy ra thật ở tab Số liệu (18/09).
   Nay đảo lại: an toàn là mặc định, hàng ngang phải TỰ KHAI ở nơi cần. */
.viec-the{display:block;width:100%;text-align:left;padding:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;color:inherit;
  font-family:inherit;font-size:inherit}
.viec-the:hover{border-color:var(--accent)}
.viec-the.xong{opacity:.62}
.viec-the.tre{border-left:3px solid var(--alert)}
.viec-dau{font-size:17px;line-height:1.2;flex:0 0 auto}
.viec-than{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.viec-dong1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.viec-gio{font-size:12px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.viec-tieude{display:block;font-size:13.5px;line-height:1.45}
.viec-phu{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* ===== NHÃN KÊNH (17/09/2026) =====
   Mã kênh là mỏ neo: luôn hiện, luôn bấm được, luôn cùng một hình dạng ở mọi màn hình.
   Bấm vào là mở trang thật của kênh — người đi đăng bài luôn cần mở trang đó. */
.kenh-ma{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:11.5px;
  letter-spacing:.02em;padding:2px 7px;border-radius:5px;white-space:nowrap;text-decoration:none;
  background:var(--accent-soft);color:var(--accent-2);border:1px solid transparent}
a.kenh-ma:hover{border-color:var(--accent);text-decoration:none}
.kenh-ma.trong{background:var(--surface-2);color:var(--ink-2);border-style:dashed;border-color:var(--line-2)}
.kenh-mo{font-size:9px;opacity:.65}
/* PHẢI là inline-block: max-width KHÔNG có tác dụng trên phần tử inline thường,
   nên để inline thì tên kênh dài 40 ký tự cứ thế trải ra và đẩy vỡ hàng. */
.kenh-ten{display:inline-block;font-size:11.5px;color:var(--ink-2);margin-left:5px;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
@media (max-width:560px){.kenh-ten{max-width:118px}}

/* ===== CHIP TUYẾN NỘI DUNG ===== */
.tuyen-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tuyen-chip.m-xam{background:var(--surface-2);color:var(--ink-2)}
.tuyen-chip.m-cam{background:var(--warn-soft);color:var(--warn)}
.tuyen-chip.m-do{background:var(--alert-soft);color:var(--alert)}
.tuyen-chip.m-xanh{background:var(--nv-soft);color:var(--nv)}
.tuyen-chip.m-tim{background:var(--accent-soft);color:var(--accent-2)}
.tuyen-chip.chua{background:transparent;color:var(--ink-3);border:1px dashed var(--line-2);font-weight:400}

/* ===== TAB ĐẶT HÀNG ===== */
.dem{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-2);vertical-align:middle;margin-left:6px}
.phu-nho{font-size:12.5px;color:var(--ink-3);margin:2px 0 10px}
.viec-the.gap{border-left:3px solid var(--alert)}
.viec-the h4{margin:6px 0 4px;font-size:14.5px;line-height:1.4;font-weight:600}
.viec-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.viec-brief{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--surface-2);border-radius:7px;padding:8px 10px;white-space:pre-wrap}
.viec-nut{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
/* Chỉ tab Việc hôm nay mới xếp hàng ngang (dấu đầu dòng + thân). Mọi nơi khác
   dùng mặc định khối dọc ở trên. */
#tab-viec .viec-the{display:flex;gap:10px}

/* Ô chọn trong hàng bộ lọc phải co theo nội dung. Quy tắc chung `select{width:100%}`
   ở phần biểu mẫu đè lên nó và làm mỗi ô chiếm trọn một hàng. */
select.week{width:auto;min-height:0;max-width:260px}
/* Ô chọn phạm vi ở tab Số liệu mang chuỗi dài hơn ("Chỉ Tuần 38 · 14/09 – 20/09/2026").
   Giữ 260px thì cụt mất năm — người đọc không biết đang xem số của năm nào. */
#slPhamVi{max-width:340px}

/* Gạch phân cách giữa các nhóm bộ lọc: ở màn hẹp nó trôi ra một mình, thành vệt lạ. */
@media (max-width:560px){.filters .sep{display:none}}

/* Thẻ bài là lưới (grid). Ô lưới mặc định KHÔNG co dưới kích thước nội dung nhỏ nhất,
   nên một dòng dài (tên kênh 35 ký tự) làm nội dung tràn khỏi thẻ — thấy rõ trên điện thoại.
   minmax(0,1fr) là cách nói "ô này được phép hẹp hơn nội dung của nó". */
.card{grid-template-columns:minmax(0,1fr)}
.card-top{min-width:0}
/* Trong thẻ bài, tên kênh NHƯỜNG chỗ cho giờ đăng: giờ đăng là thứ không được cắt.
   max-width thôi chưa đủ — phần tử flex không co dưới nội dung nếu thiếu min-width:0. */
.card-top .kenh-ten{flex:0 1 auto;min-width:0}
.card-top .kenh-ma,.card-top .when{flex:0 0 auto}

/* ===== CHIP BỘ PHẬN ĐẶT ===== */
.bp-chip{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;
  white-space:nowrap;background:var(--nv-soft);color:var(--nv)}

/* ===== KHỐI PHÂN LOẠI TRONG CHI TIẾT BÀI ===== */
.pl-hang{display:flex;gap:10px;flex-wrap:wrap}
.pl-hang .field{flex:1 1 180px;min-width:0;margin-bottom:8px}
#oPhanLoai select{min-height:42px;padding:9px 11px;font-size:14px}

/* ===== QUẢN LÝ TUYẾN & BỘ PHẬN ===== */
.ql-doi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin-top:10px}
.ql-doi tr.tat{opacity:.5}
#qlPhanLoai summary{padding:10px 0}

/* Nút thêm bài: là hành động TẠO, nên nổi hơn các chip lọc bên cạnh nó. */
.chip-them{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip-them:hover{background:var(--accent-2)}

/* Ô nhập mã: chữ gõ vào tự thành hoa, nhưng KHÔNG viết hoa dòng gợi ý —
   "tự đặt" hoá thành "TỰ ĐẠT" đọc ra một nghĩa khác hẳn. */
.o-ma{text-transform:uppercase}
.o-ma::placeholder{text-transform:none}

/* ===== PHỄU SỐ LIỆU ===== */
.pheu{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.pheu-buoc{position:relative;background:var(--surface-2);border-radius:8px;overflow:hidden;min-height:46px}
.pheu-thanh{position:absolute;inset:0 auto 0 0;background:var(--accent-soft);border-right:2px solid var(--accent)}
.pheu-thanh.nx{background:var(--nv-soft);border-right-color:var(--nv)}
.pheu-chu{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;font-size:13.5px}
.pheu-chu b{font-size:17px;font-variant-numeric:tabular-nums;min-width:44px}
.pheu-ty{margin-left:auto;font-size:12px;color:var(--ink-2)}
.pheu-ty .rot{color:var(--alert);font-weight:600}
/* "Chưa đo được" phải TRÔNG khác hẳn một con số — nếu nó trông giống 0% thì cả công sức
   phân biệt hai thứ đó ở phía máy chủ trở nên vô nghĩa ngay tại điểm người ta đọc. */
.chua-do{font-style:italic;color:var(--ink-3);font-weight:400;font-size:12px}
#tab-solieu .stat{cursor:default}
#tab-solieu .stat .n{font-size:19px}


/* ===== TAB CHỜ ĐĂNG (19/09/2026) ===== */
.tag.v-cho {background:var(--surface-2);color:var(--ink-2)}
.tag.v-chay{background:var(--accent-soft);color:var(--accent-2)}
.tag.v-xong{background:var(--nv-soft);color:var(--nv)}
.tag.v-loi {background:var(--alert-soft);color:var(--alert)}
.tag.v-tay {background:var(--warn-soft);color:var(--warn)}

/* Hàng chọn bài ở tab Chờ đăng, và hàng bộ lọc ở Lịch tuần (19/09/2026) */
.hang-chon{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px;
  padding:10px 12px;background:var(--surface-2);border-radius:10px}
.hang-loc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.o-chon{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13.5px}
.o-chon input{width:17px;height:17px;min-height:0;margin:0;cursor:pointer;accent-color:var(--accent)}

/* Con số bấm được trong phễu (19/09/2026) */
.bam-duoc{cursor:pointer;position:relative}
.bam-duoc:hover{outline:2px solid var(--accent);outline-offset:1px;border-radius:8px}
.bam-duoc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bam-rot{cursor:pointer;text-decoration:underline dotted}
.bam-rot:hover{text-decoration:underline}
a.bam-so{color:var(--accent-2);font-weight:700;text-decoration:underline dotted}
a.bam-so:hover{text-decoration:underline}
.boc-ds{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow-y:auto}
.boc-dong{padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:var(--surface)}
.boc-dong:hover{border-color:var(--accent);background:var(--accent-soft)}
.boc-td{font-size:14px;font-weight:600;margin:4px 0 2px;line-height:1.4}

/* Nút "+" thêm bài ngay trong ô lịch (21/09/2026).
   Mờ khi không rê chuột để không cạnh tranh thị giác với các thẻ bài — ô lịch dày đặc
   rồi, thêm 91 nút đậm nữa thì bảng thành nhiễu. Trên cảm ứng không có hover nên luôn
   hiện ở mức nhạt: thà hơi thừa còn hơn có nút mà không ai biết là bấm được. */
.lich td { position: relative; }
.lo-them {
  display: block; width: 100%; margin-top: 4px;
  border: 1px dashed var(--line); border-radius: 7px; background: transparent;
  color: var(--ink-3); font: 600 15px/1.1 inherit; padding: 5px 0; cursor: pointer;
  opacity: .35; transition: opacity .12s, border-color .12s, color .12s;
}
.lich td:hover .lo-them, .lo-them:focus-visible { opacity: 1; }
.lo-them:hover, .lo-them:focus-visible { border-color: var(--accent); color: var(--accent); border-style: solid; }
@media (hover: none) { .lo-them { opacity: .6; } }

/* Ô nội dung sửa thẳng tại chỗ */
.d-body-sua { white-space: pre-wrap; }
.d-body-sua:focus { background: var(--nen-2, transparent); }

/* ---- Nút Tải về / Chép link ngay dưới mỗi ảnh (21/09/2026) ---- */
.mi-nut { display: flex; gap: 6px; padding: 6px 8px 0; }
.mi-n {
  flex: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  color: var(--ink-2); font: 500 11px/1 inherit; padding: 5px 0; cursor: pointer;
}
.mi-n:hover, .mi-n:focus-visible { border-color: var(--accent, var(--ink-2)); color: var(--ink); }

/* ---- Đèn lồng xem ảnh toàn màn hình ----
   position:fixed + inset:0 chứ không dùng <dialog>: <dialog> trên Safari iOS cũ không
   khoá được cuộn nền, và màn hình Sếp hay mở là điện thoại. */
body.khoa-cuon { overflow: hidden; }
.den-long {
  position: fixed; inset: 0; z-index: 9000; background: rgba(8,9,12,.93);
  display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center; gap: 4px; padding: 10px;
}
.den-long .dl-khung {
  grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center;
  max-width: 100%; width: 100%; max-height: calc(100vh - 110px);
}
.den-long .dl-anh {
  max-width: 100%; max-height: calc(100vh - 110px);
  object-fit: contain; border-radius: 8px; background: #000;
}
/* Video cần CHIỀU RỘNG thật thì thanh điều khiển mới bấm được; ảnh thì co theo nội dung. */
.den-long video.dl-anh { width: 100%; }
.den-long button { background: transparent; border: 0; color: #fff; cursor: pointer; }
.den-long .dl-lui, .den-long .dl-toi {
  grid-row: 1; font-size: 40px; line-height: 1; width: 48px; height: 72px;
  border-radius: 10px; opacity: .7;
}
.den-long .dl-lui { grid-column: 1; } .den-long .dl-toi { grid-column: 3; }
.den-long .dl-lui:hover, .den-long .dl-toi:hover { opacity: 1; background: rgba(255,255,255,.12); }
.den-long .dl-dong {
  position: absolute; top: 10px; right: 12px; font-size: 22px; width: 40px; height: 40px;
  border-radius: 10px; opacity: .8;
}
.den-long .dl-dong:hover { opacity: 1; background: rgba(255,255,255,.14); }
.den-long .dl-chan {
  grid-column: 1 / -1; grid-row: 2; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; justify-content: center; color: #e8eaf0; font-size: 12.5px; padding: 6px 4px;
}
.den-long .dl-chan .btn { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.den-long .dl-chan .btn:hover { background: rgba(255,255,255,.26); }
.den-long .dl-ten { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.den-long .dl-dem { color: #9aa1ae; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .den-long { grid-template-columns: 40px 1fr 40px; }
  .den-long .dl-lui, .den-long .dl-toi { font-size: 30px; width: 36px; }
  .den-long .dl-ten { max-width: 100%; }
}

/* ===================================================================== *
 * VIDEO TRONG LƯỚI MEDIA (22/09/2026)
 * Ô xem trước, KHÔNG có nút điều khiển — bấm vào là mở đèn lồng xem to.
 * Để controls ngay trong ô rộng 130px thì trên điện thoại ngón tay luôn chạm nhầm.
 * ===================================================================== */
.mitem { position: relative; }
.mitem video { aspect-ratio: 4/5; object-fit: cover; width: 100%; display: block; cursor: zoom-in; background: #000; }
.mi-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 17px; padding-left: 3px;
  pointer-events: auto; cursor: zoom-in; border: 0;
}

/* ===================================================================== *
 * ĐIỆN THOẠI TRƯỚC (22/09/2026)
 *
 * Bàn duyệt là thứ Sếp mở trên điện thoại nhiều hơn trên máy tính: duyệt bài là việc
 * làm lúc di chuyển, giữa hai ca. Ba chỗ đau nhất đã sửa ở đây:
 *   1. 11 thẻ điều hướng nằm trên đỉnh màn hình — xa ngón cái nhất, lại hay bị cuộn mất.
 *      Đưa xuống ĐÁY, cố định, luôn thấy. Ngón cái với tới mà không đổi tay.
 *   2. Nút "Duyệt" / "Yêu cầu sửa" nằm CUỐI bài — bài dài 600 chữ thì phải cuộn hết mới
 *      bấm được, mỗi bài một lần. Dính xuống đáy khung chi tiết.
 *   3. Ô nhập dưới 16px làm Safari tự phóng to trang mỗi lần chạm vào — và không thu lại.
 * ===================================================================== */
@media (max-width: 900px) {

  /* ---- 1. Thanh điều hướng xuống đáy ---- */
  /* ⚠ PHẢI BỎ backdrop-filter Ở .top, KHÔNG CHỈ BỎ position:sticky.
     Một phần tử có backdrop-filter (hoặc filter, transform, will-change) trở thành KHUNG
     THAM CHIẾU cho mọi con mang position:fixed — nghĩa là .tabs khai "fixed; bottom:0"
     nhưng lại dính vào đáy của .top ở tận đỉnh màn hình, không phải đáy màn hình.
     Phép thử ngày 22/09/2026 bắt được: thanh nằm ở toạ độ 102 trong màn cao 844.
     Nguyên lý: "fixed" KHÔNG phải lúc nào cũng tính theo màn hình — kiểm bằng toạ độ thật,
     đừng tin vào việc đã khai đúng thuộc tính. */
  .top { position: static; backdrop-filter: none; }
  /* Đầu trang GỌN LẠI CÒN MỘT HÀNG. Bản cũ cuộn xuống ba hàng trên màn 390px — tên
     thương hiệu, nhãn tuần, rồi tên người dùng — ngốn gần một phần tư màn hình trước khi
     thấy chữ đầu tiên của bài. Trên điện thoại, mỗi hàng ở đầu trang là một hàng bài viết
     bị đẩy khuất. Thứ thật sự cần thấy chỉ là: đang ở tuần nào, và nút thoát. */
  .top-in { padding: 7px 12px; flex-wrap: nowrap; gap: 8px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
  .whoami { flex: 0 0 auto; gap: 6px; }
  /* Tên người dùng là thứ Sếp biết rồi — bỏ đi, giữ cái nhãn vai vì nó quyết định thấy
     được nút nào. */
  .whoami #tenNguoiDung { display: none; }

  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: color-mix(in srgb, var(--ground) 96%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); border-bottom: 0;
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    gap: 0; justify-content: flex-start;
    box-shadow: 0 -2px 12px -6px rgba(0,0,0,.4);
  }
  .tabs button {
    border-bottom: 0; border-radius: 10px; padding: 9px 12px;
    font-size: 12.5px; min-height: 44px;     /* 44px là ngưỡng chạm tối thiểu của iOS */
  }
  .tabs button[aria-selected=true] {
    background: var(--accent-soft); color: var(--accent-2); border-bottom: 0;
  }
  /* Chừa chỗ cho thanh dưới, cộng vùng an toàn của máy có thanh gạt dưới màn hình. */
  .wrap { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }

  /* Nút nổi "＋ Ý tưởng" ở khổ điện thoại: xem khối .fab ở cuối tệp — quy tắc phải đặt
     SAU định nghĩa gốc của .fab thì mới thắng (xem lời giải thích ở đó). */

  /* ---- 2. Nút duyệt dính đáy khung chi tiết ---- */
  .detail .d-sec.acts-wrap {
    position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 20;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line-2);
    margin: 0 -1px -1px; padding: 10px 14px calc(10px);
  }
  .acts .btn { flex: 1 1 auto; min-width: 46%; min-height: 48px; }

  /* ---- 3. Không để Safari tự phóng to ---- */
  /* !important ở đây là CÓ LÝ DO, không phải lười: Safari trên iOS tự phóng to trang mỗi
     khi chạm vào ô nhập có cỡ chữ dưới 16px, và KHÔNG tự thu lại — Sếp phải chụm tay thu
     nhỏ sau mỗi lần gõ. Đây là hành vi cứng của hệ điều hành, không phải lựa chọn thẩm mỹ,
     nên nó phải thắng mọi quy tắc riêng của từng thành phần (select.week, #oPhanLoai
     select…). Bỏ !important ra là phép thử "mọi ô nhập ≥ 16px" đỏ ngay. */
  input, select, textarea { font-size: 16px !important; }

  /* ---- Vùng chạm đủ lớn ---- */
  .chip { min-height: 40px; padding: 8px 14px; }
  .btn.small { min-height: 40px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
  .stat { padding: 9px 10px; }
  .stat .n { font-size: 19px; }

  /* ---- Ảnh/video to hơn: 130px trên màn 360px chỉ vừa 2 cột chật ---- */
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

  /* ---- Bảng rộng: giữ cột đầu đứng yên khi cuộn ngang ---- */
  .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lich { min-width: 720px; }
  .lich th:first-child, .lich td:first-child {
    position: sticky; left: 0; z-index: 3; background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .lich thead th:first-child { z-index: 4; }
}

/* Máy rất nhỏ (360px trở xuống): bỏ hẳn chữ thương hiệu, nhường chỗ cho vai và nút Thoát. */
@media (max-width: 380px) {
  .brand b { display: none; }
  .tabs button { padding: 9px 10px; font-size: 12px; }
}

/* Khối giải thích gấp được — mở sẵn trên máy tính, gấp lại trên điện thoại. */
.giai-thich > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding: 8px 0; list-style-position: inside;
}
.giai-thich > summary:hover { color: var(--ink); }
.giai-thich[open] > summary { margin-bottom: 4px; }

@media (max-width: 900px) {
  /* Cột tên kênh chiếm gần nửa bề ngang màn hình, chỉ còn chỗ cho một ngày rưỡi.
     ⚠ Đặt max-width lên ô bảng KHÔNG có tác dụng ở chế độ dàn tự động (table-layout:auto):
     trình duyệt lấy bề rộng theo nội dung dài nhất và bỏ qua mọi gợi ý. Phải chuyển sang
     dàn CỐ ĐỊNH thì width mới được tôn trọng — đây là chỗ dễ sửa nhầm rồi tưởng đã xong. */
  .lich { table-layout: fixed; min-width: 760px; }
  .lich .kcol, .lich th:first-child { width: 118px; }
  .lich td, .lich th { overflow-wrap: anywhere; }
  .lich .kcol b { font-size: 12px; line-height: 1.25; display: block; }
  .lich .kcol span { font-size: 10.5px; }
  .giai-thich > summary { padding: 10px 0; min-height: 40px; }
}

/* =====================================================================
 * CHUÔNG BÁO ĐƠN ĐẶT BÀI (22/09/2026)
 * ===================================================================== */
/* Huy hiệu trên thẻ điều hướng. Số đơn CHƯA AI NHẬN — không tắt được bằng cách nhìn. */
.tabs button { position: relative; }
.tabs button .hh {
  display: inline-block; margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--warn); color: #1b1405;
  font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums; vertical-align: middle;
}
.tabs button .hh.nguy { background: var(--alert); color: #fff; }

/* Dải báo ở đầu trang. KHÔNG có nút tắt — xem phần giải thích trong app.js. */
.dai-chuong {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid var(--warn);
}
.dai-chuong.nguy { background: var(--alert-soft); border-color: var(--alert); }
.dai-chuong .dc-so {
  flex: 0 0 auto; min-width: 38px; height: 38px; border-radius: 10px;
  background: var(--warn); color: #1b1405; display: grid; place-items: center;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dai-chuong.nguy .dc-so { background: var(--alert); color: #fff; }
.dai-chuong .dc-chu { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dai-chuong .dc-chu b { font-size: 13.5px; }
.dai-chuong .dc-chu span {
  font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dai-chuong .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  /* Trên điện thoại dải nằm ngay dưới đầu trang, là thứ đầu tiên đập vào mắt sau khi mở app. */
  .dai-chuong { gap: 10px; padding: 10px 12px; }
  .dai-chuong .dc-chu b { font-size: 13px; }
  .dai-chuong .btn { min-height: 40px; }
  /* Dòng phụ chứa HẠN — thứ quyết định có phải làm ngay hay không. Cắt cụt bằng dấu ba
     chấm trên màn hẹp là cắt mất đúng phần đó, nên cho xuống hàng, tối đa hai dòng. */
  .dai-chuong .dc-chu span {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
}

/* ---- Ô thống kê BẤM ĐƯỢC (22/09/2026) ----
   Một con số trên màn hình mà bấm vào không ra gì thì người dùng vẫn cứ bấm — rồi tưởng
   máy đơ. Nếu đã bấm được thì phải TRÔNG như bấm được, và ô rỗng phải trông như không. */
.stat-nut { font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--line);
            background: var(--surface); transition: transform .08s ease, box-shadow .12s ease; }
.stat-nut:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.stat-nut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-nut[disabled] { cursor: default; opacity: .55; }
.stat-nut.dang-loc { box-shadow: inset 0 0 0 2px var(--accent); }
.stat-nut.dang-loc .k::after { content: ' · đang lọc'; font-weight: 700; color: var(--accent); }

/* ---- Kho media ---- */
.kho-luoi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kho-the { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface);
           display: flex; flex-direction: column; }
.kho-anh { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #0001; display: block; cursor: pointer; }
.kho-than { padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.kho-ten { font-weight: 600; word-break: break-word; }
.kho-bai { color: var(--ink-3); }
.kho-nut { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.kho-vid { position: relative; }
.kho-vid::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center;
                  font-size: 30px; color: #fff; text-shadow: 0 1px 6px #000a; pointer-events: none; }
@media (max-width: 900px) { .kho-luoi { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

/* ---- Mở rộng khung nội dung (Sếp 24/09/2026, việc 2) ---- */
.d-thanh-noidung{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 17px 0}
.lop-mo-rong{position:fixed;inset:0;z-index:9998;background:var(--nen,var(--surface));
  display:flex;flex-direction:column;overflow:hidden}
.lop-mo-rong .lmr-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line-2);background:var(--surface);
  position:sticky;top:0;z-index:1}
.lop-mo-rong .lmr-ten{font-size:14px;font-weight:700;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lop-mo-rong .lmr-than{flex:1 1 auto;overflow:auto;padding:0}
/* Mở rộng thì bỏ trần 68ch và cho chữ to hơn — đây là lý do duy nhất người ta bấm nút này. */
.d-body.dang-mo-rong{max-width:none;font-size:17px;line-height:1.8;padding:18px 22px;
  min-height:100%}
.d-body.dang-mo-rong textarea{min-height:70vh !important}
body.khoa-cuon{overflow:hidden}
@media (max-width:560px){
  .d-body.dang-mo-rong{font-size:16.5px;padding:14px 15px}
  .lop-mo-rong .lmr-dau{padding:10px 12px}
}

/* ---- Liên kết "mở bài" trong Chờ đăng và trên dải chuông (Sếp 24/09/2026) ---- */
a.mo-bai{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line-2)}
a.mo-bai:hover,a.mo-bai:focus-visible{border-bottom-style:solid;color:var(--ink)}
.dai-chuong a.btn.mo-bai{display:inline-flex;align-items:center;text-decoration:none;
  border-bottom:1px solid var(--line-2)}

/* ---- Đối chiếu Chờ đăng với Bàn duyệt (Sếp 24/09/2026, việc 6) ---- */
.doi-chieu{border:1px solid var(--line-2);border-radius:10px;margin:0 0 12px;background:var(--surface-2)}
.doi-chieu>summary{cursor:pointer;padding:10px 13px;font-size:13px;list-style:none}
.doi-chieu>summary::-webkit-details-marker{display:none}
.doi-chieu>summary::before{content:"▸ ";color:var(--ink-3)}
.doi-chieu[open]>summary::before{content:"▾ "}
.doi-chieu .dc-than{padding:0 13px 12px;font-size:13px;line-height:1.6}
.dc-bang{border-collapse:collapse;font-size:13px}
.dc-bang td{padding:3px 12px 3px 0}
.dc-bang td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.dc-bang .dc-tong td{border-top:1px solid var(--line-2);padding-top:6px}

/* ---- Chọn khoảng thời gian ở tab Số liệu (Sếp 24/09/2026, việc 5) ---- */
.sl-khoang{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.sl-khoang input[type=date]{border:1px solid var(--line-2);border-radius:8px;padding:8px 9px;
  font:inherit;font-size:13px;background:var(--surface);color:inherit;min-height:40px}
@media (max-width:560px){.sl-khoang{width:100%}.sl-khoang input[type=date]{flex:1 1 auto;min-width:0}}

/* ---- Đơn đặt hàng thu gọn (Sếp 24/09/2026, việc 4) ---- */
details.don-the{padding:0}
details.don-the>summary{cursor:pointer;list-style:none;padding:11px 13px;display:block}
details.don-the>summary::-webkit-details-marker{display:none}
details.don-the>summary::after{content:"▸ mở chi tiết";float:right;font-size:11.5px;
  color:var(--ink-3);font-weight:600;margin-left:8px}
details.don-the[open]>summary::after{content:"▾ thu lại"}
details.don-the>summary:hover{background:var(--surface-2)}
details.don-the>summary h4{margin:5px 0 4px}
details.don-the .don-chitiet{padding:0 13px 12px;border-top:1px dashed var(--line-2);margin-top:2px;padding-top:10px}
.tag.chua-giao{background:var(--surface-2);color:var(--ink-3);border:1px dashed var(--line-2)}
.tag.giao-roi{font-weight:700}

/* ===== v1.19.0 — SẮP THEO NGƯỜI ĐĂNG NHẬP & GIAO HÀNG LOẠT (Sếp 24/09/2026) ===== */
.nhom-giao{margin:14px 0 18px}
.nhom-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px;
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.nhom-dau h4{margin:0;font-size:14px}
.nhom-dau .phu-nho{flex:1;min-width:120px}
.nhom-dau button{flex:0 0 auto}
/* Việc của mình nổi lên bằng MÀU, không chỉ bằng thứ tự: người mở tab ra giữa chừng
   danh sách phải nhận ra ngay đâu là phần của mình mà không cần cuộn lên đọc tiêu đề. */
.nhom-cua-toi .viec-the{border-left:3px solid var(--accent)}
.nhom-chua-giao .viec-the{border-left:3px solid var(--warn)}
.nhom-nguoi-khac{opacity:.78}
.nhom-nguoi-khac:hover{opacity:1}

.o-chon{display:inline-flex;align-items:center;padding:2px 4px;cursor:pointer}
.o-chon input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}

.thanh-hangloat{position:sticky;bottom:12px;z-index:30;margin:14px auto 0;width:fit-content;
  display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(0,0,0,.18);font-size:13px}
.thanh-hangloat[hidden]{display:none}
.ds-hong{margin:6px 0 8px;padding-left:20px}
.ds-hong li{margin:3px 0}

/* ===== v1.20.0 — BẢNG SỐ LIỆU BÀN DUYỆT: MỘT HÀNG, GỌN CHO ĐIỆN THOẠI (Sếp 24/09/2026) =====
 * Bản đầu tách hai khối có nhãn dài: đúng về nghĩa nhưng 9 ô × 4 dòng chữ tràn xuống hai
 * hàng, trên điện thoại ăn gần hết màn hình. Nay một hàng, ô hai dòng, giải thích rút còn
 * một dòng; phần nghĩa chuyển sang vạch ngăn + màu nền + title.
 *
 * ⚠ KHOANH VÙNG TRONG #dungThongKe. Lớp .stats/.stat còn dùng ở bốn màn hình khác (Việc
 * hôm nay, hàng đợi đăng, kho media…) với bố cục lưới ba dòng. Sửa thẳng vào .stats là
 * sửa bốn màn hình mà Sếp không hề yêu cầu — và sẽ không ai phát hiện cho tới lúc mở
 * đúng màn hình đó. Đổi luật chung để phục vụ một chỗ là cách làm hỏng lan. */
/* ⚠ CHÍNH #dungThongKe ĐÃ MANG SẴN LỚP .stats trong index.html, nên nó tự là một lưới
   grid. Không đặt lại display ở đây thì dòng giải thích và hàng ô trở thành HAI Ô CỦA
   LƯỚI, nằm CẠNH nhau chứ không phải chồng lên nhau — dòng chữ bị bóp thành một cột hẹp
   cao 73px ngay bên trái các ô. Phép thử đo chiều cao suýt cho qua vì tổng chiều cao vẫn
   nhỏ; chỉ phép thử "dòng giải thích đúng một dòng" mới lộ ra.
   Bài học: khi khoanh vùng CSS theo id, phải kiểm cả CÁC LỚP MÀ CHÍNH CÁI ID ẤY ĐANG MANG. */
#dungThongKe{display:block}
#dungThongKe .sl-goi{font-size:11px;color:var(--ink-3);margin:0 0 6px;line-height:1.35;
  /* Không để nó nuốt hai dòng trên điện thoại: quá dài thì cắt ba chấm, chạm giữ để đọc đủ. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* MỘT HÀNG. Máy tính: 9 ô chia đều. Điện thoại: cuộn ngang bằng ngón tay — vẫn MỘT hàng,
   không tụt xuống hàng thứ hai làm vỡ bố cục. */
/* ô KHÔNG co lại (flex:0 0 auto): cho co thì trên điện thoại hàng tự bóp cho vừa, chữ bị
   cắt cụt mà vẫn không cuộn được — tệ hơn hẳn cuộn ngang. justify khi thừa chỗ thì giãn đều. */
#dungThongKe .stats{display:flex;gap:6px;margin-bottom:12px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
#dungThongKe .stats::-webkit-scrollbar{height:4px}
#dungThongKe .stats::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
/* SỐ VÀ NHÃN CÙNG MỘT DÒNG ([stated] Sếp 24/09/2026): mỗi ô chỉ còn cao bằng một dòng
   chữ, và con số nằm sát ngay chữ giải nghĩa nó. baseline chứ không center — số 19px và
   chữ 11px canh giữa thì chân chữ lệch nhau, nhìn ra ngay là ẩu. */
#dungThongKe .stat{flex:0 0 auto;width:auto;min-width:0;scroll-snap-align:start;
  display:flex;align-items:baseline;gap:4px;white-space:nowrap;padding:6px 10px 7px 11px}
#dungThongKe .stat .n{font-size:20px;line-height:1.1}
/* Số của tháng nằm CÙNG DÒNG với số của tuần — nhỏ, mờ, có dấu / để đọc ra ngay là
   "trong tổng". Xuống dòng riêng thì mỗi ô dày thêm một dòng, nhân 9 ô là mất một hàng. */
#dungThongKe .stat .th{font-size:10.5px;font-weight:500;color:var(--ink-3)}
#dungThongKe .stat .k{font-size:11.5px;color:var(--ink-2);margin-top:0;line-height:1.2;
  text-transform:none;letter-spacing:0}
/* Vạch ngăn hai trục đo — thay cho hai nhãn dài của bản trước. */
#dungThongKe .sl-vach{flex:0 0 1px;align-self:stretch;background:var(--line-2);margin:2px 4px}
/* Nhóm ảnh khác nền để mắt tự tách nhóm, không cần đọc chữ mới biết. */
#dungThongKe .stat[data-truc=anh]{background:var(--surface-2)}
#dungThongKe .stat.dang{box-shadow:inset 0 0 0 2px var(--accent)}
#dungThongKe .stat.dang .k{color:var(--accent);font-weight:700}
@media (max-width:640px){
  #dungThongKe .stat{padding:5px 8px 6px 9px}
  #dungThongKe .stat .n{font-size:18px}
  #dungThongKe .stat .k{font-size:11px}
  #dungThongKe .sl-goi{font-size:10.5px}
}
/* ===== Ô "TRỄ HẠN" GỘP: tổng + hai nhóm con, cả ba đều bấm được (Sếp 24/09/2026) =====
 * ⚠ Không lồng <button> trong <button> (HTML không cho, và trình đọc màn hình sẽ loạn).
 * Ô ngoài là <div role=group>, ba nhãn bên trong mới là nút. */
#dungThongKe .stat.tre-o{cursor:default;gap:0;padding:6px 9px 7px 11px}
#dungThongKe .tre-c{background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  display:flex;align-items:baseline;gap:4px;padding:1px 5px;border-radius:6px;white-space:nowrap}
#dungThongKe .tre-c:hover{background:var(--line)}
#dungThongKe .tre-c .n{font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
#dungThongKe .tre-c .k{font-size:11.5px;color:var(--ink-2)}
/* Hai nhóm con nhỏ hơn hẳn số tổng — nhìn là biết cái nào là số chính, cái nào là chi tiết. */
#dungThongKe .tre-c.nho .n{font-size:14px;color:var(--ink-2)}
#dungThongKe .tre-c.nho .k{font-size:10.5px;color:var(--ink-3)}
#dungThongKe .tre-c.dang{background:var(--accent-soft)}
#dungThongKe .tre-c.dang .k{color:var(--accent);font-weight:700}
#dungThongKe .tre-v{width:1px;align-self:stretch;background:var(--line);margin:3px 5px 3px 3px}
@media (max-width:640px){
  #dungThongKe .tre-c.nho .n{font-size:13px}
}

/* ===== TAB TIẾN ĐỘ (FR-18/20/21, 25/09/2026) =====
   Bảng nhiều cột trên màn hình hẹp: cho cuộn NGANG trong một khung riêng, không để nó
   đẩy cả trang rộng ra. Bài học 24/09 — một bảng làm vỡ bố cục trang thì người ta không
   đọc được cả những phần đúng bên cạnh. */
.td-thanh { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 6px; }
.td-thanh .sp { flex:1 1 auto; }
.td-ky { display:inline-flex; border:1px solid var(--vien,#d8ded6); border-radius:8px; overflow:hidden; }
.td-kb { border:0; background:#fff; padding:6px 14px; cursor:pointer; font:inherit; color:inherit; }
.td-kb + .td-kb { border-left:1px solid var(--vien,#d8ded6); }
.td-kb.dang { background:#1f6f52; color:#fff; font-weight:600; }
.td-troi { font-size:12px; color:#5d6b60; }

.td-bang-boc { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--vien,#d8ded6);
               border-radius:10px; background:#fff; }
.td-bang { border-collapse:collapse; width:100%; font-size:13px; white-space:nowrap; }
.td-bang th, .td-bang td { padding:7px 10px; text-align:right; border-bottom:1px solid #eef1ec; }
.td-bang th:nth-child(1), .td-bang th:nth-child(2),
.td-bang td:nth-child(1), .td-bang td:nth-child(2) { text-align:left; }
.td-bang thead th { background:#f6f8f5; font-weight:600; position:sticky; top:0; z-index:1; }
.td-bang tbody tr[data-kenh] { cursor:pointer; }
.td-bang tbody tr[data-kenh]:hover { background:#f4f8f4; }
.td-nhom td { background:#eef3ee; border-top:2px solid #dbe4db; }
.td-ma { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:#41604f; }
.td-ten { max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.td-nho { font-size:11px; color:#75806f; font-weight:400; }
.td-nguon { font-size:11px; color:#8a7a3c; margin-left:3px; }
.td-chuaco { color:#9aa398; }
.td-thieu { color:#a4442c; font-size:11px; margin-left:4px; }

/* DẢI MỐC BẮT ĐẦU ĐO. Dùng BIẾN màu của bảng màu, không gõ mã màu cứng: mã cứng thì chế độ
   tối đọc không nổi, và đúng cái dải cần đọc nhất lại là cái mờ nhất. (Bài học 27/09: 15 biến
   không tồn tại bị bỏ qua trong im lặng.) */
.td-moc { margin:10px 0 12px; padding:10px 12px; border-radius:8px; font-size:13px;
          line-height:1.5; border:1px solid var(--line-2); background:var(--surface-2);
          color:var(--ink-2); }
.td-moc b { color:var(--ink); }
.td-moc-truoc    { background:var(--alert-soft); border-color:var(--alert); }
.td-moc-mot_phan { background:var(--warn-soft);  border-color:var(--warn); }
.td-ket-do { color:#a4442c; font-weight:600; }

/* Đèn phải KÈM CHỮ, không chỉ dựa vào màu — đề bài 19.3, và cũng là điều kiện để người
   mù màu đọc được. Màu chỉ là lớp nhấn thứ hai. */
.den { display:inline-block; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:600; }
.den-xanh { background:#e3f3e8; color:#1f6f52; }
.den-vang { background:#fdf3d8; color:#8a6d14; }
.den-do   { background:#fbe6e0; color:#a4442c; }
.den-khong-co-chi-tieu { background:#eef0ec; color:#7a847a; }

@media (max-width:640px) {
  .td-bang th, .td-bang td { padding:6px 7px; font-size:12px; }
  .td-ten { max-width:120px; }
}

/* Ô "Kế hoạch" là số NỀN để so, không phải bộ lọc bấm được.
   Phải trông khác cái nút — một ô trông bấm được mà không phản ứng là cách nhanh nhất
   để người dùng kết luận màn hình hỏng. */
.stat.stat-tinh { cursor:default; background:#f4f6f3; border-style:dashed; }
.stat.stat-tinh:hover { background:#f4f6f3; }

/* ===== DẢI NHẮC VIỆC (FR-20, 25/09/2026) =====
   Không có nút "đã đọc" — lời nhắc biến mất khi việc xong, không phải khi người ta nhìn nó. */
.nhac-khoi { border:1px solid #e6dfc8; background:#fffdf5; border-radius:10px;
             padding:10px 12px; margin:12px 0 14px; }
.nhac-dau { font-size:12px; font-weight:600; color:#6b6446; margin-bottom:6px; }
.nhac-do-so { color:#a4442c; }
.nhac-d { display:flex; align-items:flex-start; gap:8px; padding:5px 0;
          border-top:1px solid #f0ead6; }
.nhac-d:first-of-type { border-top:0; }
.nhac-cham { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:0 0 auto; }
.nhac-do   .nhac-cham { background:#c4553a; }
.nhac-vang .nhac-cham { background:#d9a520; }
.nhac-tin  .nhac-cham { background:#8a9a8c; }
.nhac-noi { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.nhac-noi b { font-size:13px; font-weight:600; }
.nhac-ct { font-size:12px; color:#6f7a6f; }
.nhac-di { flex:0 0 auto; align-self:center; }
@media (max-width:640px) {
  .nhac-d { flex-wrap:wrap; }
  .nhac-di { margin-left:16px; }
}

/* ===== THẺ KPI THÁNG (FR-21, 25/09/2026) ===== */
.kpi-khoi { margin-top:18px; }
.kpi-dau { font-size:13px; font-weight:600; margin-bottom:6px; overflow:hidden; }
.kpi-bang td, .kpi-bang th { text-align:right; }
.kpi-bang td:first-child, .kpi-bang th:first-child { text-align:left; }
.kpi-ten { cursor:help; border-bottom:1px dotted #c9d2c6; }
.kpi-dv { font-size:11px; color:#75806f; margin-left:1px; }
.kpi-mau { font-size:11px; color:#9aa398; margin-left:5px; }
.kpi-chuado { color:#9aa398; }
.kpi-mui { font-size:11px; margin-left:5px; font-weight:600; }
.kpi-len { color:#1f6f52; }
.kpi-xuong { color:#a4442c; }
.kpi-deu { color:#8a938a; }

/* ===== KHỐI ĐIỆN THOẠI (app + thông báo), 25/09/2026 ===== */
.dt-khoi { border:1px solid var(--vien,#d8ded6); border-radius:10px; padding:10px 12px;
           margin:16px 0 4px; background:#fbfcfa; }
.dt-dau { font-size:12px; font-weight:600; color:#4b5a4e; margin-bottom:6px; }
.dt-ds { margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.dt-m { display:flex; align-items:center; gap:8px; font-size:12px;
        padding:4px 0; border-top:1px solid #eef1ec; }
.dt-m span:first-child { font-weight:600; }
.dt-m .td-nho { flex:1 1 auto; }

/* Huy hiệu không được làm hàng rộng ra: nó giữ nguyên kích thước và để hàng xuống dòng
   quanh nó. `flex:0 0 auto` nói rõ điều đó thay vì để trình duyệt đoán. */
.card-top .hh{flex:0 0 auto}

/* ===== HUY HIỆU NGUỒN GỐC BÀI (đề bài v3.1 FR-22.5) =====
   Ba nhãn phải PHÂN BIỆT ĐƯỢC BẰNG MẮT ở khoảng cách một cánh tay, vì nhân viên vuốt qua
   hàng chục thẻ trên điện thoại. Nên chúng khác nhau cả màu nền lẫn màu chữ, không chỉ khác
   sắc độ — sắc độ là thứ đầu tiên biến mất ngoài nắng và trên màn hình cũ. */
.hh{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700;
    line-height:1.5;letter-spacing:.2px;white-space:nowrap;margin-right:6px}
/* Đề xuất CHƯA quyết — màu gọi hành động, vì đây là thứ đang chờ người bấm. */
.hh-dx{background:#fdf0d5;color:#8a4b00;border:1px solid #f0c987}
/* Đã nhận — nhạt đi hẳn: việc đã xong thì không cần gọi ai nữa. */
.hh-dx-nhan{background:#e8f4ea;color:#2b6136;border:1px solid #b9dcc2;font-weight:600}
/* Đặt hàng — màu khác hệ hẳn, vì nó là loại việc khác (có nghĩa vụ, không được huỷ lặng lẽ). */
.hh-order{background:#eaeffb;color:#2b4a8a;border:1px solid #c2d0ee}
/* Từ ý tưởng — nhãn KỂ NGUỒN GỐC, không gọi ai làm gì, nên để nhạt: tím viền mảnh. */
.hh-ytuong{background:#f3eefc;color:#553a8b;border:1px solid #d6c8f0;font-weight:600}
/* Chờ trợ lý viết — đây là nhãn NÓI BÀI CÒN RỖNG. Phải nổi hơn nhãn nguồn gốc, vì một bài
   rỗng nằm trong lịch là một chỗ trống sắp đến hạn, không phải một ghi chú lịch sử. */
.hh-choviet{background:#fff4e5;color:#8a4b00;border:1px solid #f3cf9e}
@media (prefers-color-scheme: dark){
  .hh-dx{background:#3a2c0f;color:#f0c987;border-color:#6b5320}
  .hh-dx-nhan{background:#16301c;color:#a8d4b4;border-color:#2f5c3b}
  .hh-order{background:#182241;color:#b6c8ee;border-color:#32467a}
  .hh-ytuong{background:#271d3a;color:#cdb8f0;border-color:#4b3a72}
  .hh-choviet{background:#3a2a12;color:#f3cf9e;border-color:#6b4f24}
}
/* Danh sách lý do huỷ trong hộp thoại: mỗi dòng là một vùng bấm đủ lớn cho ngón cái.
   44px là ngưỡng tối thiểu để bấm không trượt — dưới ngưỡng đó người dùng bấm hai lần. */
.lyDoDs .ck{display:flex;align-items:center;gap:9px;min-height:44px;padding:4px 8px;
            border:1px solid var(--line);border-radius:8px;margin-bottom:6px;cursor:pointer}
.lyDoDs .ck:hover{background:var(--surface-2)}

/* ---- MÀN DUYỆT ẢNH TUẦN (FR-23.4) ----
   Ảnh phải hiện ĐÚNG KHUNG NỀN TẢNG và ĐẦY MÀN: đó là điều kiện làm cú vuốt phải hợp lệ
   thay cho hai ô xác nhận. Nên khung ảnh dùng `aspect-ratio` đặt từ JS theo kênh, và
   `object-fit:contain` — KHÔNG `cover`. `cover` cắt bớt ảnh để lấp khung, tức Sếp sẽ duyệt
   một ảnh KHÁC với ảnh lên sóng. Ảnh nào không đúng tỷ lệ thì phải THẤY viền trống. */
.da-the{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.da-dau{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:13.5px;color:var(--ink-2)}
.da-tieude{font-family:Lora,Georgia,serif;font-size:18px;line-height:1.35;margin:6px 0 2px}
.da-than{margin-bottom:6px}
.da-nhan b{color:var(--warn)}
.phu-nho.gap{color:var(--alert);font-weight:600}
.da-anh-khung{position:relative;width:100%;max-width:520px;margin:10px auto;background:var(--surface-3);
  border:1px solid var(--line-2);border-radius:9px;overflow:hidden;touch-action:pan-y}
.da-anh-khung img{width:100%;height:100%;object-fit:contain;display:block}
.da-dang-tai{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;font-size:13px;color:var(--ink-3);background:var(--surface-3)}
.da-cam-ket{border-top:1px solid var(--line);margin-top:10px;font-weight:600;color:var(--ink)}
.da-nut{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.da-nut .btn{flex:1 1 auto;min-width:120px}
.da-dieu-huong{display:flex;justify-content:flex-end;margin-top:12px}

/* ---- BA KHỐI VIỆC THEO MỨC ƯU TIÊN (tab Việc hôm nay) ----
   Màu chỉ để PHÂN BIỆT khối, không để gây lo: khối đỏ là "mất hẳn nếu không làm hôm nay",
   nên nó cần nổi hơn hai khối kia — nhưng cả trang đỏ thì không còn gì nổi. */
.uv-tomtat{font-size:13.5px;color:var(--ink-2);margin:2px 0 14px;line-height:1.6}
.uv-do{color:var(--alert)}
.uv-khoi{border:1px solid var(--line);border-radius:var(--radius);padding:13px;margin-bottom:14px;background:var(--surface)}
.uv-khoi.uv-do{border-color:color-mix(in srgb,var(--alert) 40%,transparent);background:var(--alert-soft)}
.uv-khoi.uv-vang{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-soft)}
.uv-khoi.uv-xam{background:var(--surface-2)}
.uv-dau{font-weight:700;font-size:14.5px;line-height:1.45;cursor:default}
details.uv-khoi>summary.uv-dau{cursor:pointer;list-style:revert}
.uv-phu{display:block;font-weight:400;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.uv-ds{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.uv-the{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 11px}
/* Việc trên kênh của chính Sếp: một vạch bên trái, không phải một màu nền thứ tư. */
.uv-the.uv-canhan{border-left:3px solid var(--accent)}
.uv-dong1{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;row-gap:4px;font-size:13px}
.uv-gio{margin-left:auto;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.uv-gio.gap{color:var(--alert);font-weight:700}
.uv-tieude{font-size:14.5px;line-height:1.4;margin:5px 0 3px}
.uv-visao{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.uv-nut{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.tag.m-canhan{background:var(--accent-soft);color:var(--accent-2)}

/* Ô "Đã huỷ" — cùng khuôn với ô Trễ hạn, nhưng màu XÁM, cố ý.
   Huỷ không phải việc phải làm gấp; nó là việc phải GIẢI TRÌNH. Tô đỏ là xếp nó ngang hàng
   với bài sắp lỡ buổi lên sóng, và rồi cả dải lại thành một biển đỏ không còn gì nổi. */
.stat.c9.huy-o{background:var(--surface-2);border-color:var(--line-2)}
.stat.c9.huy-o .n{color:var(--ink-2)}

/* ===========================================================================
   NÚT NỔI "GHI Ý TƯỞNG" — hiện trên MỌI tab ([stated] Sếp chốt 27/09/2026)

   Ý tưởng đến lúc đang làm việc khác. Nút phải ở chỗ tay đang đặt, không nằm sau một
   lần chuyển tab — cái gì tốn một bước đi tìm thì phần lớn sẽ không được làm.

   Đặt ở GÓC PHẢI DƯỚI và chừa chỗ cho vùng an toàn của iPhone (safe-area), vì đây là app
   Sếp cài trên điện thoại: nút nằm đè lên thanh vuốt của iOS là nút bấm trượt.
   =========================================================================== */
.fab{
  position:fixed; z-index:40;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border:0; border-radius:999px;
  background:var(--accent); color:#fff;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  cursor:pointer;
}
.fab:hover{filter:brightness(1.06)}
.fab:active{transform:translateY(1px)}
.fab span[aria-hidden]{font-size:19px;line-height:1}
/* Màn hẹp: bỏ chữ, còn dấu cộng — chiếm ít chỗ mà vẫn bấm được bằng ngón cái. */
@media (max-width:560px){ .fab-chu{display:none} .fab{padding:14px} }

/* ---- NÚT NỔI PHẢI NẰM TRÊN THANH TAB ĐÁY (sự cố 27/09/2026) ----
 * Sếp chụp màn hình: trên điện thoại nút nổi bị thanh tab dưới đáy che mất một nửa.
 * Ba thứ sai cùng lúc, thiếu một là vẫn hỏng:
 *   · VỊ TRÍ — thanh tab cao ~52px + vùng an toàn, mà nút nổi đứng ở bottom:16px, tức
 *     nằm TRONG vùng thanh tab.
 *   · LỚP — .tabs có z-index 50, nút nổi có 40, nên dù nhô lên vẫn bị vẽ đè.
 *   · CHỖ ĐẶT QUY TẮC — bản vá đầu em đặt khối này bên trong @media(max-width:900px) ở
 *     giữa tệp, mà định nghĩa gốc .fab lại nằm DƯỚI đó. @media KHÔNG làm tăng độ ưu tiên;
 *     hai quy tắc cùng độ ưu tiên thì cái ĐỨNG SAU thắng. Quy tắc mới thua im lặng, trình
 *     duyệt không báo gì, và phép thử vẫn đỏ y như trước khi vá.
 *
 * NGUYÊN LÝ 1: một phần tử position:fixed không tự biết có ai đang chiếm chỗ đó. Hễ thêm
 * một thanh cố định là phải rà lại MỌI phần tử cố định khác — cả toạ độ lẫn lớp.
 * NGUYÊN LÝ 2: trong CSS, @media chỉ là điều kiện BẬT/TẮT, không phải nấc ưu tiên. Quy tắc
 * ghi đè phải đứng SAU quy tắc bị ghi đè trong cùng tệp, nếu không tăng độ ưu tiên.
 */
@media (max-width:900px){
  .fab{
    bottom: calc(64px + env(safe-area-inset-bottom));   /* 52px thanh tab + 12px hở */
    z-index: 55;                                        /* trên .tabs (z-index 50) */
  }
  /* Đang mở CHI TIẾT một bài trên điện thoại thì ẩn nút nổi: ở màn đó khung "Duyệt · Yêu
     cầu sửa" dính đáy (.acts-wrap, bottom 64px) chiếm hết bề ngang — để nút nổi ở đó là nó
     đè lên đúng hai nút quan trọng nhất của app. Cùng lý do màn này đã ẩn .list, .stats,
     .filters: chi tiết bài trên điện thoại là màn ĐỌC VÀ QUYẾT. Bấm "Quay lại" là có ngay. */
  body.dang-xem .fab{ display:none; }
}
/* In ra giấy thì không có nút nào cả. */
@media print{ .fab{display:none} }

/* Dòng giải thích nhỏ dưới một ô nhập. Dùng trong form ghi ý tưởng (27/09/2026):
   hai ô ngày và ô giao việc đều cần một câu nói rõ nó dùng để làm gì, nếu không người
   điền sẽ tự đoán — và hai người đoán hai kiểu thì cột dữ liệu mất nghĩa. */
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.45;margin-top:5px}

/* ---- ẢNH CHƯA ĐẠT CHUẨN KÊNH · NHÃN DUYỆT NGOẠI LỆ  (27/09/2026) ----
 * Hai khối này cố tình KHÁC MÀU NHAU và khác mọi cảnh báo khác trên thẻ ảnh:
 *   · đỏ  = đang vướng, chưa đi tiếp được;
 *   · tím = đã đi tiếp bằng một quyết định của người, và dấu đó ở lại vĩnh viễn.
 * Nếu để cùng màu vàng như cảnh báo thường thì nhìn lướt không phân biệt được "ảnh đang
 * kẹt" với "ảnh đã được người ký duyệt bỏ qua luật" — hai chuyện khác hẳn nhau về trách nhiệm.
 */
.mitem .chuan-thieu{
  margin-top:5px;padding:5px 7px;border-radius:6px;line-height:1.45;
  background:var(--alert-soft);color:var(--alert);
  border:1px solid color-mix(in srgb,var(--alert) 32%,transparent);
}
.mitem .ngoai-le-nhan{
  margin-top:5px;padding:5px 7px;border-radius:6px;line-height:1.45;
  background:var(--nv-soft);color:var(--nv);font-weight:600;
  border:1px solid color-mix(in srgb,var(--nv) 32%,transparent);
}
.mitem .ngoai-le-nhan div{font-weight:400;margin-top:2px;color:var(--ink-2)}

/* ⚠ TÊN BIẾN MÀU: dùng --line / --surface / --ink-3 / --accent.
 * KHÔNG có --vien, --nen-o, --phu, --chinh. Ngày 28/09/2026 phát hiện 9 chỗ trong tệp này đang
 * dùng ba cái tên không tồn tại (.kho-the, .stat-nut, .kho-bai và mấy chỗ nữa) — CSS gặp biến
 * không khai thì BỎ LUÔN dòng đó và không báo gì, nên các thẻ đó bao lâu nay không có viền,
 * không có nền, chữ phụ không xám. Trông "gần đúng" nên không ai báo lỗi.
 * NGUYÊN LÝ: một cái tên viết sai mà hệ thống im lặng bỏ qua thì sẽ sống rất lâu — chỗ nào im
 * lặng hỏng được thì phải có người đi đối chiếu, vì nó không tự kêu.
 */
/* ---------------------------------------------------------------------------
 * KHO ẢNH CÔNG TY — lưới chọn ảnh trong hộp thoại (28/09/2026)
 * Chọn ảnh thì phải NHÌN được ảnh: ô tích nằm ĐÈ lên góc ảnh, không đứng riêng một cột, để
 * vùng bấm và tấm ảnh là CÙNG MỘT chỗ — trên điện thoại một ô tích 14px cạnh ảnh là bấm trượt.
 * --------------------------------------------------------------------------- */
.kac-luoi { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
            max-height: 46vh; overflow-y: auto; padding: 2px; margin-bottom: 12px; }
.kac-chon { position: relative; display: block; border: 2px solid var(--line); border-radius: 8px;
            overflow: hidden; cursor: pointer; background: var(--surface); }
.kac-chon img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #0001; }
.kac-chon input { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; margin: 0;
                  accent-color: var(--accent); z-index: 2; }
.kac-chon:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.kac-chon-chu { display: block; font-size: 11px; line-height: 1.35; padding: 4px 5px;
                color: var(--ink-2); max-height: 3.3em; overflow: hidden; }
/* Ngăn "Đã quá hạn" — nhãn TRUNG TÍNH, cố ý không đỏ: bài không bị huỷ, nó đang chờ.
   Tô đỏ một thứ còn cứu được là dạy người dùng rằng đỏ không có nghĩa gì. */
.hh-treo{background:#eceff1;color:#455a64;border:1px solid #cfd8dc;font-weight:600}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){
  .hh-treo{background:#22292c;color:#a8b6b1;border-color:#36453f}
}}

/* Ô ảnh kho riêng CHƯA CÓ bản thu nhỏ. Không để trống trơn: một ô trống trông y hệt một ô
   đang tải, và người dùng sẽ đợi một thứ không bao giờ tới. */
.kho-anh-trong { display: grid; place-items: center; text-align: center; font-size: 12px;
  color: var(--ink-3); background: var(--surface-2, #0000000a); cursor: default; padding: 8px; }

/* Ô CHỌN TỆP CÓ ĐỘ RỘNG NỘI TẠI (nút "Choose files" + chỗ cho tên tệp) và KHÔNG tự co theo
   khung cha. Trên màn 390px nó đẩy cả trang cuộn ngang — bắt được ở phép thử bố cục điện
   thoại, tab "Kho ảnh riêng" lệch +5px. Kẹp lại ở MỘT chỗ cho mọi ô chọn tệp, chứ không vá
   riêng ô vừa gặp: ô nào cũng có tật này, chỉ khác là chúng đang nằm trong khung rộng hơn. */
.field input[type=file] { width: 100%; max-width: 100%; box-sizing: border-box; }

/* CHUỖI BƯỚC TRÊN MỘT HÀNG VIỆC ([stated] Sếp 29/09/2026). Hai việc liền nhau trên cùng một
   bài phải đọc được là MỘT hành trình, không phải hai dòng rời. */
.uv-buoc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 5px 0 2px; }
.uv-b { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--ink-2); background: var(--surface); }
.uv-b-tudong { border-style: dashed; color: var(--ink-3); }
.uv-mui { font-size: 11px; color: var(--ink-3); }

/* Khung "Đích đến & SEO" — kênh Website (v1.61.0, đề bài #20) */
.rs-ds{margin:8px 0;padding-left:18px;display:grid;gap:4px;font-size:12.5px}
.rs-ds .rs-do b{color:var(--alert)}
.rs-ds .rs-vang b{color:var(--warn)}
.rs-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 12px;margin-top:8px}
.rs-luoi .lbl{display:grid;gap:4px}
.rs-luoi input,.rs-luoi select,.rs-luoi textarea{width:100%}

/* ---- Công cụ soạn thảo + sửa ảnh (v1.66.0, public/cong-cu-soan.js) ---- */
.ccs-thanh{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:5px 6px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface-2)}
.ccs-thanh button,.ccs-thanh select{min-width:30px;height:28px;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;cursor:pointer}
.ccs-thanh button:hover{border-color:var(--accent)}
.ccs-thanh select{max-width:130px}
.ccs-vach{width:1px;height:20px;background:var(--line-2);margin:0 3px}
.ccs-goi{color:var(--ink-3);cursor:help;font-size:13px;margin-left:2px}
.ccs-ghichu{font-size:11.5px;color:var(--ink-3);margin-left:6px}
.ccs-bang{position:absolute;top:100%;left:0;z-index:40;width:min(360px,92vw);max-height:260px;overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow)}
.ccs-bang button{border:0;background:transparent;font-size:20px;width:34px;height:34px;padding:0}
.ccs-bang button:hover{background:var(--surface-2)}
.ccs-ten{font-size:11px;color:var(--ink-3);margin:4px 2px 2px}
.ccs-ds-tep{margin-top:6px}
.ccs-tep{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--line);font-size:13px}
.ccs-tep>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.ccs-sua-anh{border:0;border-radius:12px;padding:14px;background:var(--surface);color:var(--ink);max-width:min(940px,96vw);box-shadow:var(--shadow)}
dialog.ccs-sua-anh::backdrop{background:rgba(0,0,0,.6)}
.ccs-sa-cong{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:8px 0;font-size:13px}
.ccs-sa-cong button{padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.ccs-sa-cong button.dang{background:var(--accent);color:#fff;border-color:var(--accent)}
.ccs-sa-cong button.ccs-goiy{border-color:var(--accent)}
.ccs-sa-khung{display:flex;justify-content:center;background:#111;border-radius:8px;padding:8px}
.ccs-sa-khung canvas{max-width:100%;touch-action:none;cursor:move}
.ccs-sa-chan{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

/* =====================================================================
 * MẬT ĐỘ GỌN (v1.68.0 — Sếp 06/10/2026: "khoảng trắng quá nhiều… loại bỏ các khoảng trắng, khoảng trống thừa tối đa")
 * Đặt CUỐI tệp để đè đúng giá trị cũ — không sửa rải rác 40 chỗ (mỗi chỗ sửa là một chỗ có thể lệch).
 * ===================================================================== */
.top-in{padding:6px 12px;gap:8px}
.brand b{font-size:14px}
.tabs button{padding:8px 10px;font-size:13px}
.wrap{padding:10px 12px 56px}
.stats{gap:6px;margin-bottom:8px}
.stat{padding:6px 10px}
.stat .n{font-size:19px}
.filters{gap:5px;margin-bottom:8px}
.chip{padding:4px 10px;min-height:30px}
select.week{padding:4px 8px}
.board{gap:12px}
.list{gap:5px}
@media(min-width:901px){.list{max-height:calc(100vh - 210px)}}
.card{padding:7px 9px;gap:3px}
.d-head{padding:10px 14px 8px}
.d-meta{gap:6px;margin-bottom:4px}
.d-head h2{font-size:17.5px}
.d-body{padding:10px 14px;max-width:none}          /* nội dung phủ HẾT bề ngang khung */
.d-sec{padding:10px 14px}
.d-sec h4{margin:0 0 6px}
.doc{padding:12px 14px;margin-bottom:10px}
.doc h2{font-size:18px;margin-bottom:4px}
.doc h3{margin:12px 0 6px}
.viec-the{padding:9px 10px}

/* CẢNH BÁO trong khung bài: tối đa ~3 dòng, phần còn lại cuộn trong chính ô đó (Sếp: "2 hoặc 3 dòng đỏ là cùng"). */
.d-canh-bao{padding:0 14px;margin-top:8px}
#chiTiet .banner,.lop-mo-rong .banner{padding:6px 10px;font-size:12.5px;line-height:1.45;margin-bottom:6px;
  max-height:calc(1.45em * 3 + 12px);overflow-y:auto;overscroll-behavior:contain}
#chiTiet .banner ul{margin:2px 0 0;padding-left:18px}

/* KHUNG NỘI DUNG: không còn dòng "Nội dung bài" riêng; nút Mở rộng nằm TRONG khung. */
.d-thanh-noidung{display:none}
.d-nhan-nd{padding:6px 14px 0;font-size:11.5px;color:var(--ink-3)}
.d-khung-sua{padding:0;white-space:normal}         /* white-space thường: hết dòng trống "ma" giữa các thẻ */
.d-khung-sua textarea{display:block;width:100%;border:0;background:transparent;font:inherit;color:inherit;
  padding:10px 14px;resize:vertical;outline:none;min-height:160px;white-space:pre-wrap;overflow:hidden}
.d-khung-sua .ccs-thanh{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 8px}
.d-khung-sua #oNoiDungThanh{padding:6px 12px !important}
.nut-mo-rong{font:600 12px/1.2 "Be Vietnam Pro",system-ui,sans-serif;white-space:nowrap;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft);color:var(--accent-2);
  border-radius:999px;padding:4px 10px}
.nut-mo-rong:hover{background:var(--accent);color:#fff}
.ccs-thanh .nut-mo-rong.trong-thanh{margin-left:auto;height:28px}
.d-khung-xem .nut-mo-rong{float:right;margin:0 0 4px 10px}
.dang-mo-rong .nut-mo-rong{display:none}             /* đang mở to: lớp phủ đã có nút Đóng */
.ccs-thanh button,.ccs-thanh select{height:28px}

@media(max-width:560px){
  .top-in{padding:5px 10px}
  .wrap{padding:8px 8px 64px}
  .d-head{padding:8px 10px 6px}
  .d-head h2{font-size:16.5px}
  .d-body,.d-khung-sua textarea{padding:8px 10px}
  .d-sec{padding:8px 10px}
  .d-canh-bao{padding:0 10px}
  .doc{padding:10px;border-radius:8px}
  .doc h2{font-size:16.5px}
  .viec-the{padding:8px}
  .viec-the h4{font-size:13.5px}
  .ccs-thanh{gap:2px}
  .ccs-thanh button{min-width:26px;padding:0 5px}
  .ccs-thanh select{max-width:96px}
}

/* NẰM TRONG CỔNG GIÁM ĐỐC (iframe): cổng đã hiện tên tài khoản và nút thoát — bỏ hàng tiêu đề + tài khoản của
   Bàn duyệt để không lặp lại và trả diện tích cho nội dung (Sếp 06/10/2026). */
html.trong-khung .top-in{display:none}
html.trong-khung .wrap{padding-top:6px}
.d-dong-nho{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 14px;border-top:1px solid var(--line);font-size:12px}
.d-dong-nho:empty,.d-dong-nho:not(:has(*)){display:none}
.d-dong-nho .btn.small{padding:3px 9px;min-height:0;font-size:12px}
.d-khung-sua textarea{min-height:120px}
@media(max-width:560px){.d-dong-nho{padding:5px 10px}}
/* Điện thoại, đang xem MỘT bài: ẩn cả dải số liệu + dòng giải thích (một quy tắc sau trong tệp đặt .stats thành
   flex nên quy tắc ẩn cũ bị đè) — trả toàn bộ màn hình cho bài đang xem. */
@media(max-width:900px){
  body.dang-xem #dungThongKe{display:none !important}
  .quay-lai{padding:4px 10px !important;min-height:0 !important;font-size:12.5px}
  .d-top{padding:8px 10px 0}
}
/* Thanh công cụ soạn: phông giao diện (không theo phông nội dung bài), MỘT hàng — điện thoại thì cuộn ngang. */
.ccs-thanh{font:13px/1 "Be Vietnam Pro",system-ui,sans-serif}
.ccs-thanh select{font-size:12.5px}
@media(max-width:560px){
  .ccs-thanh{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ccs-thanh::-webkit-scrollbar{display:none}
  .ccs-thanh>*{flex:0 0 auto}
  .ccs-bang{position:fixed;left:8px;right:8px;top:auto;bottom:70px;width:auto}
  .d-dong-nho .btn.small{min-height:30px !important;padding:3px 10px !important}
}
/* Nút Mở rộng luôn thấy được: ghim mép phải thanh công cụ khi thanh cuộn ngang trên điện thoại. */
.ccs-thanh .nut-mo-rong.trong-thanh{position:sticky;right:0;box-shadow:-8px 0 8px var(--surface-2)}
/* Khối chân bài / caption: phông giao diện cỡ vừa — là phần tham chiếu, không phải chỗ đọc bài. */
#oChanBai .d-body,#oCaption .d-body{font-size:13.5px;line-height:1.5;padding:8px 10px}
#oChanBai h4,#oCaption h4{margin-bottom:4px}
@media(max-width:560px){.ccs-thanh .nut-mo-rong.trong-thanh{order:-1;position:static;box-shadow:none;margin:0 4px 0 0}}

/* ===== ĐƠN MEDIA CHO ADS (v1.69.0) — lưới tài sản + màn Sếp duyệt gói ===== */
.ma-tom{font-size:13px;margin:8px 0}
.ma-luoi-o{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:6px 0 8px}
.ma-o{border:1px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ma-o-dau{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:13px}
.ma-o-dau b{word-break:break-all}
.ma-anh{width:100%;max-height:180px;object-fit:contain;background:#000;border-radius:6px}
.ma-o .banner{margin:0;padding:6px 8px;font-size:12.5px}
.ma-tha{display:block;border:2px dashed var(--line);border-radius:8px;padding:12px 8px;text-align:center;font-size:13px;cursor:pointer;color:var(--ink-3)}
.ma-tha.dang-keo{border-color:var(--accent);color:var(--accent)}
.ma-thanh{display:none;height:6px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:6px}
.ma-thanh i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
body.mg-mo{overflow:hidden}
.mg-man{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.mg-khung{background:var(--surface);color:inherit;width:min(560px,100vw);height:min(100dvh,920px);display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
.mg-dau{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.mg-dau .sep{flex:1}
.mg-phat{flex:1 1 auto;min-height:0;max-height:58%;background:#000;display:flex;align-items:center;justify-content:center}
.mg-phat video,.mg-phat img{max-width:100%;max-height:100%;object-fit:contain}
.mg-chu{flex:1 0 auto;max-height:42%;overflow:auto;padding:8px 12px}
.mg-caption{white-space:pre-wrap;font-size:14.5px;line-height:1.5;margin-top:4px}
.mg-nut{display:flex;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.mg-nut .mg-to{flex:1;font-size:16px;padding:12px}
@media (max-width:600px){.mg-khung{border-radius:0;height:100dvh}.ma-luoi-o{grid-template-columns:1fr}}

/* ===== Ấn phẩm cho Ads trên màn chi tiết bài (v1.71.0) ===== */
.an-pham{margin-top:8px;padding:8px 10px;border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--surface-2)}
.an-pham-dau{font-size:13.5px}.an-pham-ds{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.an-pham .viec-nut{margin-top:6px}

/* ---- TAB Ý TƯỞNG CHIA NHÓM (v1.73.0) ---- */
details.yt-nhom>summary.uv-dau .yt-dem{color:var(--ink-3);font-weight:600}
.yt-bai{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:3px 0}
.yt-bai .btn.ghost{padding-left:4px}
.btn.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--ink)}

/* ---- ĐỢT 2–3 (v1.75.0): bàn Việc của tôi + khối Xử lý ngay ---- */
.vct{margin-bottom:18px}
.vct-phu{font-size:12px;color:var(--ink-3)}
.vct-bang td{vertical-align:top;font-size:12.5px}
.vct-lydo{max-width:320px;color:var(--ink-2)}
.vct-link{max-width:170px;font-size:12px;padding:5px 7px}
.vct-loat{margin:8px 0}
.hh-viec{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:var(--alert);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.xl-khoi{margin-bottom:14px;line-height:1.55}
.xl-dau{font-weight:800;font-size:14.5px;margin-bottom:4px}
.xl-loi{margin-top:4px;font-size:12.5px}
.xl-anh,.xl-gio,.xl-bo,.xl-link{margin-top:10px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--alert) 35%,transparent)}
.xl-chon{display:block;margin:4px 0;font-size:13px}
.xl-link input{max-width:300px}
/* IT #37 (v1.78.0): thẻ tài sản đơn media — bước tiếp theo + đăng tay */
.ma-buoc{margin:6px 0;padding:6px 9px;font-size:13px}
.ma-dangtay{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.ma-dangtay .ma-cap{width:100%;font-size:12px}
.ma-dangtay .ma-linkdt{flex:1 1 220px;min-width:0}
/* v1.82.0 — tab Thông báo */
.tb-hai{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}
@media (max-width:760px){.tb-hai{grid-template-columns:1fr}}
.tb-bang{width:100%;min-width:0;border-collapse:collapse;font-size:13px}
.tb-bang th,.tb-bang td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tb-bang thead th{position:sticky;top:0;background:var(--bg,#fff)}
.tb-tat td{color:var(--ink-3)}
.tb-bang td:last-child,.tb-bang td:nth-child(2){white-space:nowrap}
.tb-cai{border:1px solid var(--line);border-radius:10px;padding:12px}
.tb-tin{white-space:pre-wrap;font-size:12px;background:var(--bg-2,#f6f6f6);padding:10px;border-radius:8px}

/* v1.110.0: tab nguồn ảnh trong hộp Nộp ảnh — ẩn hẳn phần của tab khác (lớp hiển thị riêng không được thắng [hidden]) */
[data-oknop][hidden] { display: none !important; }
.tab-nop [aria-selected="true"] { outline: 2px solid var(--accent, #2a6b43); }

/* ===== 6 NHÓM TAB (CG-261111-01, 1.115.0) =====
   Hàng trên: 6 nhóm. Hàng dưới (.tabs): tab con của nhóm đang mở; nhóm chỉ một tab con thì ẩn hàng dưới.
   .ngoai-nhom tách riêng khỏi [hidden] — [hidden] là quyền theo vai, .ngoai-nhom chỉ là đang ở nhóm khác. */
.nhom{display:flex;gap:2px;max-width:1240px;margin:0 auto;padding:0 8px;overflow-x:auto;scrollbar-width:none}
.nhom::-webkit-scrollbar{display:none}
.nhom button{flex:0 0 auto;position:relative;background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font-size:14px;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.nhom button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.nhom button.co-tin::after{content:attr(data-tin);display:inline-block;margin-left:5px;min-width:16px;padding:0 5px;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-size:11px;line-height:16px;text-align:center}
.nhom button.tin-nguy::after{background:var(--alert);color:#fff}
.tabs{border-top:1px solid var(--line)}
.tabs button{font-size:12.5px}
.tabs button.ngoai-nhom,.tabs.mot-tab{display:none}
@media (max-width: 900px) {
  /* Điện thoại: thanh NHÓM dính đáy (6 nút vừa 390px); tab con lên đầu trang, cuộn ngang. */
  .nhom{position:fixed;left:0;right:0;bottom:0;z-index:50;background:color-mix(in srgb,var(--ground) 96%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:0;justify-content:space-between;box-shadow:0 -2px 12px -6px rgba(0,0,0,.4)}
  .nhom button{flex:1 1 0;min-width:0;border-bottom:0;border-radius:10px;padding:6px 2px;font-size:11.5px;min-height:44px;white-space:normal;line-height:1.15}
  .nhom button[aria-selected=true]{background:var(--accent-soft);color:var(--accent-2)}
  .nhom button.co-tin::after{position:absolute;top:0;right:0;margin:0;font-size:10px;line-height:14px;min-width:14px;padding:0 4px}
  .nhom button.co-tin{padding-top:12px}
  .tabs{position:static;box-shadow:none;backdrop-filter:none;border-top:1px solid var(--line);padding:2px 6px;background:none}
  .tabs button{min-height:38px;padding:6px 10px}
}