:root{
  /* Bảng màu lấy từ The Next Chapter: navy đậm, xám chữ, viền nhạt.
     KHÔNG dùng vàng ở đâu ngoài ảnh logo. */
  --navy:#13243f; --navy-dam:#0b1628; --navy-2:#1e3a63; --navy-nhat:#eef1f6;
  --chu:#1a1f2b; --mo:#6b7280; --vien:#e7e9ee; --nen:#f6f7f9; --trang:#fff;
  --m0:#0f7a52; --m0n:#e9f4ef; --m1:#8a6520; --m1n:#f5eee0;
  --m2:#b4531c; --m2n:#fae9de; --m3:#a82720; --m3n:#f9e4e2;
  --tim:#5b3f96; --tim-n:#f0ecf9;
  --r:14px; --bong:0 1px 2px rgba(19,36,63,.05),0 4px 16px rgba(19,36,63,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--chu);background:var(--nen);font-size:14px;line-height:1.5}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;color:var(--navy);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.mo{color:var(--mo)}
code{background:rgba(255,255,255,.2);padding:1px 5px;border-radius:4px}

/* ---------- nút & ô nhập ---------- */
.nut{border:1px solid transparent;border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:500;white-space:nowrap;transition:.2s}
.nut-chinh{background:var(--navy);color:#fff}
.nut-chinh:hover{background:var(--navy-2)}
.nut-mo{background:var(--trang);border-color:var(--vien);color:var(--navy)}
.nut-mo:hover{border-color:var(--navy)}
.nut-nho{padding:5px 12px;font-size:13px}
.nut-rong{width:100%;padding:11px}
input,select,textarea{border:1px solid var(--vien);border-radius:10px;padding:8px 10px;background:#fff;min-width:0;max-width:100%}
.hop input,.hop select,.hop textarea,.dn input{width:100%}
.hop input[type=radio],.hop input[type=checkbox]{width:auto;flex:0 0 auto}
.loc select{flex:0 1 auto;width:auto}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(30,58,99,.22);border-color:var(--navy)}
label{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:13px}
.chon-o{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--mo)}
.chon-o-duoi{align-self:end;padding-bottom:8px}
.loi{color:var(--m3);margin:0}

/* ---------- đăng nhập ---------- */
.dn{min-height:100vh;display:grid;place-items:center;padding:16px;
  background:radial-gradient(1100px 560px at 18% -12%,#2c4a7d 0,transparent 60%),linear-gradient(162deg,var(--navy-2) 0,var(--navy-dam) 100%)}
.dn-the{background:#fff;border-radius:18px;padding:36px 32px;width:100%;max-width:400px;text-align:center;box-shadow:0 22px 54px rgba(11,22,40,.3);border:1px solid var(--vien)}
.dn-logo{width:92px;height:92px}
.dn h1{font-size:22px;margin-top:14px}
.dn-phu{color:var(--mo);margin:4px 0 22px}
.dn form{display:grid;gap:14px;text-align:left}

/* ---------- đầu trang ---------- */
.dau{background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:5}
.dau-trong{max-width:1320px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.thuong-hieu{display:flex;align-items:center;gap:10px}
.thuong-hieu img{width:40px;height:40px}
.thuong-hieu b{display:block;font-size:18px;font-weight:700;letter-spacing:.1em;color:#fff;line-height:1.15;white-space:nowrap}
.thuong-hieu span{font-size:12px;opacity:.7;font-weight:300;white-space:nowrap}
.tab{display:flex;gap:2px;margin-left:6px;min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
.tab::-webkit-scrollbar{display:none}
.tab button{background:none;border:0;color:rgba(255,255,255,.72);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:500;font-size:13.5px;white-space:nowrap;transition:.2s}
.tab button:hover{color:#fff;background:rgba(255,255,255,.09)}
.tab button.dang-chon{color:#fff;background:rgba(255,255,255,.15)}
.tab i{font-style:normal;background:var(--m3);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;margin-left:4px}
.tab i:empty{display:none}
.tai-khoan{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;flex:0 0 auto}
#ten-nguoi-dung{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.tai-khoan > .nut,.tai-khoan .nut-chuong{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.o-tb .nut{background:#fff;color:var(--navy);border-color:var(--vien)}
.bang-demo{background:var(--navy-nhat);color:var(--navy-2);text-align:center;padding:6px 16px;font-size:13px;border-bottom:1px solid var(--vien)}
.bang-demo code{background:rgba(0,0,0,.06)}

/* ---------- thân ---------- */
.than{max-width:1320px;margin:0 auto;padding:24px 20px 48px}
.tieu-de-trang{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.tieu-de-trang h2{font-size:22px}
.tieu-de-trang p{margin:2px 0 0}
.nhom-nut{display:flex;gap:8px;flex-wrap:wrap}

.the-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.the{background:#fff;border-radius:var(--r);padding:14px 16px;box-shadow:var(--bong);border-left:4px solid var(--navy);cursor:default}
.the[data-loc]{cursor:pointer}
.the[data-loc]:hover{box-shadow:0 8px 24px rgba(19,36,63,.14)}
.the b{display:block;font-size:28px;font-weight:700;line-height:1.1;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.the span{color:var(--mo);font-size:13px}
.the.m3{border-left-color:var(--m3)} .the.m3 b{color:var(--m3)}
.the.m2{border-left-color:var(--m2)} .the.m2 b{color:var(--m2)}
.the.vang{border-left-color:var(--navy-2)}

.loc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.loc input[type=search]{flex:1 1 260px}

.bang-khung{background:#fff;border-radius:var(--r);box-shadow:var(--bong);overflow-x:auto;overflow-y:hidden}
.bang{width:100%;border-collapse:collapse}
.bang th{background:var(--navy-nhat);color:var(--navy);text-align:left;font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:10px;white-space:nowrap}
.bang td{padding:11px 10px;border-top:1px solid var(--vien);vertical-align:top}
.bang tr.m3 td:first-child{box-shadow:inset 4px 0 0 var(--m3)}
.bang tr.m2 td:first-child{box-shadow:inset 4px 0 0 var(--m2)}
.bang tr.da-xu-ly{opacity:.6}
.bang tbody tr:hover{background:var(--nen)}
.kh-ten{font-weight:500;color:var(--navy)}
.nho{font-size:12px;color:var(--mo)}
.moi-nhat{color:var(--m2);font-weight:500}
.tieu-de-thu{font-weight:500}
.nut-chep-td{border:0;background:none;padding:2px 4px;margin-left:2px;border-radius:6px;color:var(--mo);cursor:pointer;vertical-align:-2px;line-height:0}
.nut-chep-td:hover{background:var(--navy-nhat);color:var(--navy)}
.nut-chep-td.da-chep{color:var(--m0);background:var(--m0n)}
.tk-chu{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;resize:none;padding:10px;border:1px solid var(--vien);border-radius:10px;background:var(--nen)}
.trich{font-size:12.5px;color:var(--mo);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:420px}
.gio{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hanh-dong{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
/* Cụm nút cuối dòng: màn rộng thì nằm một hàng, màn hẹp thì tự xuống dòng
   thay vì tràn ra ngoài khung và bị cắt mất nút cuối (lỗi 18/09). */
@media (min-width:1220px){.hanh-dong{min-width:max-content}}
#bang-cho thead th:nth-child(3),#bang-xl thead th:nth-child(3){width:42%}
.bang td:last-child{width:1%}

.muc{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.muc-0{background:var(--m0n);color:var(--m0)} .muc-1{background:var(--m1n);color:var(--m1)}
.muc-2{background:var(--m2n);color:var(--m2)} .muc-3{background:var(--m3);color:#fff}
.tt{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.tt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mo)}
.tt-da_doc_chua_tl{color:var(--m3);font-weight:600} .tt-da_doc_chua_tl::before{background:var(--m3)}
.tt-chua_doc{color:var(--navy-2)} .tt-chua_doc::before{background:var(--navy-2);box-shadow:0 0 0 3px rgba(30,58,99,.15)}
.tt-da_xu_ly{color:var(--m0)} .tt-da_xu_ly::before{background:var(--m0)}

.the-kh{display:inline-block;background:var(--navy-nhat);color:var(--navy);border-radius:6px;padding:1px 7px;margin:2px 3px 2px 0;font-size:12px}
.the-kh.mien{background:var(--nen);color:var(--mo);border:1px solid var(--vien)}

.trong{text-align:center;padding:48px 16px;display:grid;gap:6px;color:var(--mo)}
.trong b{color:var(--navy);font-size:16px}
.trong-dau{width:52px;height:52px;margin:0 auto 6px;border-radius:50%;background:var(--m0n);color:var(--m0);display:grid;place-items:center;font-size:26px}
.chu-thich{font-size:12px;color:var(--mo);margin:10px 2px 0}

.bieu-do{background:#fff;border-radius:var(--r);box-shadow:var(--bong);padding:14px 16px;margin-bottom:18px}
.bieu-do h4{margin:0 0 8px;font-size:13px;color:var(--navy)}
.bieu-do svg{width:100%;height:auto;display:block}

/* ---------- hộp thoại ---------- */
.hop{border:0;border-radius:16px;padding:0;width:min(560px,calc(100vw - 32px));max-width:calc(100vw - 32px);box-shadow:0 24px 64px rgba(0,0,0,.3);overflow:hidden}
.hop::backdrop{background:rgba(11,22,40,.45)}
.hop form{padding:22px 24px;display:grid;gap:12px;max-width:100%;max-height:88vh;overflow-x:hidden;overflow-y:auto}
.hop h3{font-size:18px}
.hop p{margin:0}
.hop-nut{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.chon-dong{flex-direction:row;align-items:flex-start;gap:10px;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;font-weight:400;cursor:pointer}
.chon-dong:has(input:checked){border-color:var(--navy);background:var(--navy-nhat)}
.chon-dong input{margin-top:4px}
.chon-dong small{color:var(--mo)}
.luoi-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.chon-tt{display:grid;gap:8px}
.chon-tt .chon-dong{margin:0}

.thong-bao{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 20px;border-radius:999px;box-shadow:0 8px 28px rgba(11,22,40,.28);z-index:2000}

/* ================= WORKSPACE ================= */
.loi-chao{margin-bottom:20px}
.loi-chao h2{font-size:28px;font-weight:900;letter-spacing:-.03em}
.loi-chao p{margin:2px 0 0}
.module{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.mod{background:#fff;border-radius:16px;box-shadow:var(--bong);padding:22px;border:0;border-top:4px solid var(--navy);cursor:pointer;transition:.15s;text-align:left;width:100%;font:inherit;color:inherit}
.mod:hover{box-shadow:0 12px 32px rgba(19,36,63,.14)}
.mod.vang{border-top-color:var(--navy-2)}
.mod-dau{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.mod-bieu{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:var(--navy-nhat);color:var(--navy);flex:0 0 auto}
.mod.vang .mod-bieu{background:var(--navy-nhat);color:var(--navy-2)}
.mod h3{font-size:18px}
.mod p{margin:0;color:var(--mo);font-size:13px}
.mod-so{display:flex;gap:22px;margin-top:16px;padding-top:14px;border-top:1px solid var(--vien);flex-wrap:wrap}
.mod-so div b{display:block;font-size:24px;color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.mod-so div span{font-size:12px;color:var(--mo)}
.mod-so div.xau b{color:var(--m3)}
.mod-so div.tot b{color:var(--m0)}

.tab-phu{background:#fff;border-radius:999px;padding:4px;box-shadow:var(--bong);margin:0 0 16px;display:inline-flex;gap:2px;flex-wrap:wrap}
.tab-phu button{color:var(--mo);background:none;border:0;padding:8px 16px;border-radius:999px;cursor:pointer;font-weight:500;transition:.2s}
.tab-phu button:hover{color:var(--navy);background:var(--navy-nhat)}
.tab-phu button.dang-chon{color:#fff;background:var(--navy)}
.tab-phu i{font-style:normal;background:var(--vien);color:var(--mo);border-radius:10px;padding:0 7px;font-size:12px;margin-left:5px}
.tab-phu button.dang-chon i{background:rgba(255,255,255,.25);color:#fff}
.tab-phu i:empty{display:none}

.viec-ds{display:grid;gap:10px}
.viec{background:#fff;border-radius:var(--r);box-shadow:var(--bong);padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:10px 16px;border-left:4px solid var(--vien)}
.viec.uu-3{border-left-color:var(--m3)} .viec.uu-2{border-left-color:var(--m2)}
.viec.uu-1{border-left-color:var(--navy)} .viec.uu-0{border-left-color:var(--mo)}
.viec.dong{opacity:.62}
.viec-td{font-weight:500;color:var(--navy);font-size:15px;margin:0 0 3px;cursor:pointer}
.viec-td:hover{text-decoration:underline}
.viec.dong .viec-td{text-decoration:line-through}
.viec-mo{color:var(--mo);font-size:13px;margin:0 0 8px;max-width:72ch;white-space:pre-wrap}
.viec-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--mo)}
.viec-phai{display:flex;flex-direction:column;align-items:flex-end;gap:8px;justify-content:space-between;text-align:right}
.viec-nut{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.nhan{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.uu-n3{background:var(--m3);color:#fff} .uu-n2{background:var(--m2n);color:var(--m2)}
.uu-n1{background:var(--navy-nhat);color:var(--navy-2)} .uu-n0{background:var(--vien);color:var(--mo)}
/* Trạng thái CÔNG VIỆC: nhãn đặc nền màu, chữ trắng đậm — nhìn lướt là phân biệt được
   (góp ý nhân viên 21/09/2026: bản chấm tròn + chữ màu cũ quá nhạt).
   Mới = xanh lá · Đang làm = xanh dương · Chờ khách = cam · Chờ cơ quan = tím ·
   Xong = xám đậm có dấu ✓ · Huỷ = xám nhạt gạch ngang. */
.tt-moi,.tt-dang,.tt-cho,.tt-cho_cq,.tt-xong,.tt-huy{padding:3px 10px 3px 9px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.35;color:#fff;letter-spacing:.01em}
.tt-moi::before,.tt-dang::before,.tt-cho::before,.tt-cho_cq::before{width:7px;height:7px;background:#fff;box-shadow:none;opacity:.9}
.tt-moi{background:#15803d}
.tt-dang{background:#1d4ed8}
.tt-cho{background:#c2410c}
.tt-cho_cq{background:#7e22ce}
.tt-xong{background:#334155}
.tt-xong::before{content:"✓";width:auto;height:auto;background:none;border-radius:0;font-size:12px;line-height:1}
.tt-huy{background:#e5e7eb;color:#4b5563;text-decoration:line-through}
.tt-huy::before{background:#9ca3af}
/* Hộp "Đổi trạng thái": tên mỗi lựa chọn mang đúng nhãn màu sẽ hiện trên thẻ */
.chon-tt b.tt{margin-bottom:3px}
.han{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.han.tre{color:var(--m3)} .han.gap{color:var(--m2)} .han.ok{color:var(--mo)}
.ng{display:inline-flex;align-items:center;gap:6px}
.av{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:0 0 auto}
.tep{display:inline-flex;align-items:center;gap:4px;background:var(--nen);border:1px solid var(--vien);border-radius:6px;padding:2px 8px;font-size:12px;color:var(--chu);text-decoration:none;cursor:pointer}
.tep:hover{border-color:var(--navy)}
.tep.tren-drive{background:#f2f8f4;border-color:#cfe6d8}

.kh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.kh-the{background:#fff;border-radius:var(--r);box-shadow:var(--bong);padding:14px 16px;cursor:pointer;text-align:left;width:100%;border:1px solid transparent;transition:.15s;font:inherit;color:inherit}
.kh-the:hover{border-color:var(--navy);box-shadow:0 8px 24px rgba(19,36,63,.13)}
.kh-the b{display:block;color:var(--navy);font-size:15px;font-weight:500}
.kh-the small{color:var(--mo);font-size:12px;display:block;margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-the .dem{display:flex;gap:14px;font-size:12.5px;color:var(--mo)}
.kh-the .dem i{font-style:normal;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}

.nk{position:relative;padding-left:26px;margin-top:6px}
.nk::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--vien)}
.nk-muc{position:relative;padding:0 0 18px}
.nk-muc::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--m0);border:2px solid #fff}
.nk-muc.da-huy::before{background:var(--mo)}
.nk-muc.nk-xong::before{background:var(--m0)}
.nk-muc.nk-dang::before{background:var(--navy-2)}
.nk-muc.nk-canh::before{background:var(--m2)}
.nk-muc.nk-huy::before{background:var(--mo)}
.nk-muc[data-cv-xem]:hover .nk-td,.nk-muc[data-vd-xem]:hover .nk-td{text-decoration:underline}
#nk-loc{margin:2px 0 12px}
.nk-ngay{font-size:12px;color:var(--mo)}
.nk-td{font-weight:500;color:var(--navy)}
.nk-dau{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.nk-dau p{margin:2px 0 0;font-size:13px}
.nk-muc-de{margin-top:8px;font-size:14px}
.hop-rong{width:min(760px,calc(100vw - 24px))}
.hop .noi{padding:22px 24px;display:grid;gap:12px;max-height:82vh;overflow:auto}

.uu-chon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.uu-chon label{border:1px solid var(--vien);border-radius:10px;padding:8px 4px;align-items:center;gap:2px;cursor:pointer;text-align:center;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uu-chon label:has(input:checked){border-color:var(--navy);background:var(--navy-nhat)}
.uu-chon input{position:absolute;opacity:0;width:0;height:0}
.uu-chon .cham{width:10px;height:10px;border-radius:50%;margin-bottom:2px}
.cham-3{background:var(--m3)} .cham-2{background:var(--m2)}
.cham-1{background:var(--navy)} .cham-0{background:var(--mo)}

/* Ô "Cần hoàn thành trong" — chọn thời lượng, hạn chót tự tính theo giờ làm việc */
.trong-bao{display:grid;gap:10px}
.trong-nhanh{display:flex;flex-wrap:wrap;gap:8px}
.trong-nhanh button{border:1px solid var(--vien);background:var(--trang);border-radius:999px;
  padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;transition:.15s;white-space:nowrap}
.trong-nhanh button:hover{border-color:var(--navy)}
.trong-nhanh button.chon{border-color:var(--navy);background:var(--navy);color:#fff;font-weight:600}
.trong-tu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--mo)}
.trong-tu input{width:72px}
.trong-tu select{width:auto;min-width:78px}
.trong-tu .lien{border:0;background:none;padding:0;margin-left:auto;font:inherit;font-size:13px;
  color:var(--navy);text-decoration:underline;cursor:pointer}
.trong-ngay{font-size:13px}
.tha{border:2px dashed var(--vien);border-radius:12px;padding:18px;text-align:center;color:var(--mo);cursor:pointer;transition:.15s;background:var(--nen)}
.tha.keo{border-color:var(--navy);background:var(--navy-nhat);color:var(--navy)}
.tha b{display:block;color:var(--navy);font-weight:500;margin-bottom:2px}
.tha small{font-size:11.5px}
.ds-tep{display:grid;gap:6px}
.ds-tep div{display:flex;align-items:center;gap:8px;background:var(--nen);border:1px solid var(--vien);border-radius:8px;padding:6px 10px;font-size:13px}
.ds-tep button{margin-left:auto;border:0;background:none;color:var(--mo);cursor:pointer;font-size:16px;line-height:1}

/* ================= LỊCH ================= */
.luoi-3{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.chon-nhieu{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--vien);border-radius:10px;padding:8px;background:var(--nen);max-height:132px;overflow:auto}
.chon-nhieu label{flex-direction:row;align-items:center;gap:6px;font-weight:400;font-size:13px;
  background:#fff;border:1px solid var(--vien);border-radius:999px;padding:4px 11px;cursor:pointer;white-space:nowrap}
.chon-nhieu label:has(input:checked){border-color:var(--navy);background:var(--navy-nhat);color:var(--navy);font-weight:500}
.chon-nhieu input{width:auto;margin:0}
.chon-nhieu .trong-nho{color:var(--mo);font-size:12.5px;padding:2px 4px}

.lich-dau{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lich-dieu-huong{display:flex;align-items:center;gap:8px}
.lich-dieu-huong b{font-size:18px;color:var(--navy);letter-spacing:-.02em;min-width:150px;text-align:center}
.lich-chu-giai{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px;color:var(--mo);margin-bottom:10px}
.cham-sk{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.sk-hop_kh{background:var(--navy)} .sk-training{background:var(--tim)}
.sk-khac{background:#0f766e} .sk-nghi{background:var(--m2)}
.sk-cho{background:repeating-linear-gradient(45deg,var(--mo),var(--mo) 2px,#fff 2px,#fff 4px);border:1px solid var(--mo)}

.lich{background:#fff;border-radius:var(--r);box-shadow:var(--bong);overflow:hidden;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--vien)}
.lich-thu{background:var(--navy-nhat);color:var(--navy);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;text-align:center}
.lich-o{min-height:104px;border-right:1px solid var(--vien);border-bottom:1px solid var(--vien);
  padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;background:#fff;text-align:left;font:inherit;color:inherit;border-left:0;border-top:0}
.lich-o:nth-child(7n){border-right:0}
.lich-o:hover{background:var(--nen)}
.lich-o.ngoai{background:#fafbfc;color:var(--mo)}
.lich-o.cuoi-tuan{background:#fcfcfd}
.lich-o.le{background:#fdf1ec}
.lich-ngay{font-size:12.5px;font-weight:500;color:var(--navy);align-self:flex-start}
.lich-o.ngoai .lich-ngay{color:var(--mo);font-weight:400}
.lich-o.hom-nay .lich-ngay{background:var(--navy);color:#fff;border-radius:999px;min-width:22px;height:22px;
  display:grid;place-items:center;padding:0 5px}
.lich-le{font-size:11px;color:var(--m2)}
.sk-chip{display:block;width:100%;text-align:left;font:inherit;border:0;border-left:3px solid var(--navy-2);
  background:var(--navy-nhat);color:var(--navy);border-radius:4px;padding:2px 6px;font-size:11.5px;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sk-chip:hover{filter:brightness(.97)}
.sk-chip.l-training{border-left-color:var(--tim);background:var(--tim-n);color:#432d70}
.sk-chip.l-khac{border-left-color:#0f766e;background:#e9f5f3;color:#0b5750}
.sk-chip.l-nghi{border-left-color:var(--m2);background:var(--m2n);color:#8a3d10}
.sk-chip.cho{border-style:dashed;border-left-style:dashed;opacity:.85;background:#f4f5f8;color:var(--mo);border-left-color:var(--mo)}
.sk-chip .gio{font-weight:700;font-size:11px}
.lich-them{font-size:11px;color:var(--mo);padding-left:4px}

.hop-duyet{background:var(--navy-nhat);border:1px solid #d7deea;border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.hop-duyet h4{font-size:14px;color:var(--navy);margin:0 0 8px}
.duyet-dong{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--vien);border-radius:8px;padding:8px 12px;margin-bottom:6px;font-size:13px}
.duyet-dong:last-child{margin-bottom:0}
.sk-ct-dong{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--vien);font-size:13.5px}
.sk-ct-dong b{min-width:120px;color:var(--navy);font-weight:500}
.sk-ct-dong:last-child{border-bottom:0}

.ds-buoi{display:grid;gap:8px}
.buoi-dong{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 30px;gap:6px;align-items:center;
  background:var(--nen);border:1px solid var(--vien);border-radius:10px;padding:8px}
.buoi-dong .b-bo{border:0;background:none;color:var(--mo);cursor:pointer;font-size:18px;line-height:1;padding:0}
.buoi-dong .b-bo:hover{color:var(--m3)}
.buoi-dong .b-gio{grid-column:1/-1;display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--mo)}
.buoi-dong .b-gio input{flex:1 1 0}
.ds-buoi .trong-nho{color:var(--mo);font-size:12.5px}


/* ================= THẢO LUẬN · BÌNH LUẬN · THÔNG BÁO ================= */
.ket-noi{font-size:11.5px;color:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.ket-noi::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4)}
.ket-noi.song::before{background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}

.chuong-boc{position:relative}
.nut-chuong{position:relative;padding:7px 12px;line-height:1}
.nut-chuong i{font-style:normal;position:absolute;top:-5px;right:-4px;background:var(--m3);color:#fff;
  border-radius:999px;padding:0 5px;font-size:11px;font-weight:700;min-width:17px;text-align:center}
.nut-chuong i:empty{display:none}
.o-tb{position:absolute;right:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 24px));background:#fff;
  color:var(--chu);border:1px solid var(--vien);border-radius:14px;box-shadow:0 18px 44px rgba(11,22,40,.22);
  z-index:30;overflow:hidden;max-height:70vh;display:flex;flex-direction:column}
.o-tb-dau{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--vien);background:var(--nen)}
.o-tb-dau b{color:var(--navy)}
/* Ô bật/tắt thông báo trên màn hình máy tính */
.tb-cai{padding:10px 14px;border-bottom:1px solid var(--vien);background:var(--nen);display:grid;gap:6px}
.tb-cai:empty{display:none}
.tb-cai .chon-o{font-size:13px;gap:8px;margin:0}
.tb-cai .nho{margin:2px 0 0;line-height:1.45}
.tb-cai .nut{justify-self:start;margin-top:4px}
.o-tb > div:last-child{overflow-y:auto}
.tb-dong{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--vien);
  padding:11px 14px;cursor:pointer;font:inherit;color:inherit}
.tb-dong:last-child{border-bottom:0}
.tb-dong:hover{background:var(--nen)}
.tb-dong.moi{background:var(--navy-nhat)}
.tb-dong.moi:hover{background:#e6ebf4}
.tb-dong b{display:block;color:var(--navy);font-weight:500;font-size:13.5px;margin:2px 0}
.tb-dong small{display:block;font-size:12px;color:var(--mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-loai{display:inline-block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--navy-2);background:var(--navy-nhat);border-radius:999px;padding:1px 8px;font-weight:500}
.cham-moi{font-style:normal;background:var(--m3);color:#fff;border-radius:999px;padding:0 6px;
  font-size:11px;font-weight:700;margin-left:5px}

.tl-khung{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:14px;align-items:start}
.tl-cot{background:#fff;border-radius:var(--r);box-shadow:var(--bong);padding:10px;display:grid;gap:8px;
  max-height:72vh;overflow:auto}
.tl-muc{display:grid;gap:2px;text-align:left;width:100%;background:none;border:1px solid transparent;
  border-radius:10px;padding:9px 11px;cursor:pointer;font:inherit;color:inherit}
.tl-muc:hover{background:var(--nen)}
.tl-muc.dang-chon{background:var(--navy-nhat);border-color:#d7deea}
.tl-muc b{color:var(--navy);font-weight:500;font-size:13.5px}
.tl-muc small{font-size:12px;color:var(--mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tl-chat{background:#fff;border-radius:var(--r);box-shadow:var(--bong);display:flex;flex-direction:column;
  min-height:420px;max-height:72vh;overflow:hidden}
.tl-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--vien);flex-wrap:wrap}
.tl-dau b{color:var(--navy);font-size:15px}

.tin-ds{flex:1 1 auto;overflow-y:auto;padding:14px 16px;display:grid;gap:12px;align-content:start;background:var(--nen)}
.tin-ngay{text-align:center;font-size:11.5px;color:var(--mo)}
.tin-ngay span{background:#fff;border:1px solid var(--vien);border-radius:999px;padding:2px 12px}
.tin{display:flex;gap:9px;align-items:flex-start}
.tin.toi{flex-direction:row-reverse}
.tin-boc{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:8px 12px;max-width:min(560px,78%)}
.tin.toi .tin-boc{background:var(--navy-nhat);border-color:#d7deea}
.tin-dau{font-size:12px;color:var(--navy-2);font-weight:500;margin-bottom:2px;min-height:17px}
.tin-noi{white-space:pre-wrap;word-break:break-word;font-size:13.5px}
.nhac{color:var(--navy-2);background:var(--navy-nhat);border-radius:4px;padding:0 3px;font-weight:500}

.soan{position:relative;display:flex;gap:8px;align-items:flex-end;padding:11px 14px;border-top:1px solid var(--vien);background:#fff}
.soan-giua{flex:1 1 auto;display:grid;gap:6px;min-width:0}
.soan textarea{width:100%;resize:vertical;min-height:40px;max-height:160px}
.kem-thanh{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.kem-nut{border:1px solid var(--vien);background:#fff;border-radius:999px;width:36px;height:36px;
  cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;transition:.15s}
.kem-nut:hover{border-color:var(--navy);background:var(--navy-nhat)}
.kem-cho{display:flex;flex-wrap:wrap;gap:6px}
.kem-cho div{display:inline-flex;align-items:center;gap:6px;background:var(--nen);border:1px solid var(--vien);
  border-radius:999px;padding:3px 6px 3px 11px;font-size:12px;max-width:100%}
.kem-cho div button{border:0;background:none;color:var(--mo);cursor:pointer;font-size:15px;line-height:1;padding:0 3px}
.kem-cho div button:hover{color:var(--m3)}
.tin-anh{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tin-anh img{max-width:220px;max-height:200px;border-radius:8px;border:1px solid var(--vien);cursor:zoom-in;display:block}
.tin-tep{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tin-tep .tep{border:1px solid var(--vien);background:var(--nen)}
.viec-chip{display:inline-flex;align-items:center;gap:5px;margin-top:6px;border:1px solid #d7deea;
  background:var(--navy-nhat);color:var(--navy);border-radius:999px;padding:3px 11px;font:inherit;
  font-size:12px;font-weight:500;cursor:pointer;max-width:100%;text-align:left}
.viec-chip:hover{border-color:var(--navy)}
.dv-ds{display:grid;gap:8px;max-height:44vh;overflow:auto;padding-right:4px}
.dv-dong{display:grid;grid-template-columns:22px minmax(0,1fr) 150px 92px;gap:10px;align-items:start;
  border:1px solid var(--vien);border-radius:10px;padding:9px 11px}
.dv-dong.chon{border-color:var(--navy);background:var(--navy-nhat)}
.dv-dong b{font-weight:500;font-size:13.5px;color:var(--navy);display:block}
.dv-dong small{color:var(--mo);font-size:12px}
.dv-dong input[type=number],.dv-dong .dv-phi{width:100%;text-align:right;font-variant-numeric:tabular-nums}
.dv-dong .mien{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mo);white-space:nowrap}
.dv-dong .mien input{width:auto;flex:0 0 auto}
@media (max-width:760px){.dv-dong{grid-template-columns:22px minmax(0,1fr);gap:6px}
  .dv-dong input[type=number],.dv-dong .dv-phi,.dv-dong .mien{grid-column:2}}
.goi-y{position:absolute;bottom:calc(100% + 4px);left:14px;background:#fff;border:1px solid var(--vien);
  border-radius:12px;box-shadow:0 14px 34px rgba(11,22,40,.18);overflow:hidden;z-index:4;min-width:230px}
.goi-y-dong{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;
  padding:8px 12px;cursor:pointer;font:inherit;color:inherit;font-size:13px}
.goi-y-dong:hover{background:var(--navy-nhat)}

.nut-xoa{color:var(--m3)}
.nut-xoa:hover{border-color:var(--m3);background:var(--m3n)}
.tin-xoa{border:0;background:none;color:var(--mo);cursor:pointer;font-size:15px;line-height:1;
  padding:0 2px;margin-left:6px;opacity:0;transition:.15s}
.tin:hover .tin-xoa{opacity:.65}
.tin-xoa:hover{opacity:1;color:var(--m3)}
.tin-dau{display:flex;align-items:center;gap:2px}
.nhan-nut{border:1px solid var(--vien);background:#fff;color:var(--mo);cursor:pointer;font:inherit;
  font-size:12px;font-weight:500;padding:2px 10px}
.nhan-nut:hover{border-color:var(--navy);color:var(--navy)}
.trong-nho{color:var(--mo);font-size:12.5px;padding:4px 2px}
.ct-nhan{margin:4px 0 0;font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
#hop-viec-ct .tin-ds{border:1px solid var(--vien);border-radius:12px;min-height:180px;max-height:42vh}
#hop-viec-ct .soan{border:1px solid var(--vien);border-radius:12px;border-top:1px solid var(--vien);padding:10px}

@media (max-width:1560px){.tab button{padding:8px 10px;font-size:13px}}
@media (max-width:1260px){.ket-noi{display:none}}
@media (max-width:1400px){.thuong-hieu span{display:none}}
@media (max-width:900px){
  .tl-khung{grid-template-columns:1fr}
  .tl-cot{max-height:none}
  .tin-boc{max-width:86%}
  .ket-noi{display:none}
  .o-tb{position:fixed;right:12px;left:12px;top:64px;width:auto}
}


/* ================= THẺ VẤN ĐỀ ================= */
.dem-do{font-style:normal;background:var(--m3);color:#fff;border-radius:999px;padding:0 9px;
  font-size:13px;font-weight:700;vertical-align:middle;margin-left:6px}
.dem-do:empty{display:none}
.tt-vd-moi{color:var(--m2)} .tt-vd-moi::before{background:var(--m2);box-shadow:0 0 0 3px rgba(180,83,28,.15)}
.tt-vd-da_xac_nhan{color:var(--navy-2)} .tt-vd-da_xac_nhan::before{background:var(--navy-2)}
.tt-vd-cho_duyet_pa{color:var(--tim)} .tt-vd-cho_duyet_pa::before{background:var(--tim)}
.tt-vd-dang_xu_ly{color:var(--m1)} .tt-vd-dang_xu_ly::before{background:var(--m1)}
.tt-vd-xong{color:var(--m0)} .tt-vd-xong::before{background:var(--m0)}
.tt-vd-khong_phai,.tt-vd-huy{color:var(--mo)} .tt-vd-khong_phai::before,.tt-vd-huy::before{background:var(--mo)}

.vd-buoc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 4px}
.buoc{border:1px solid var(--vien);border-radius:10px;padding:8px 10px;background:var(--nen);position:relative}
.buoc b{display:block;font-size:12.5px;font-weight:500;color:var(--mo)}
.buoc small{display:block;font-size:11.5px;color:var(--mo);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buoc.xong{background:var(--m0n);border-color:#c7e3d5}
.buoc.xong b{color:var(--m0)}
.buoc.xong b::before{content:"✓ "}
.buoc.bo{background:var(--m3n);border-color:#eec9c6}
.buoc.bo b{color:var(--m3)}
.buoc.bo b::before{content:"✕ "}

.pa-xem{border:1px solid var(--vien);border-radius:12px;padding:12px 14px;background:var(--nen)}
/* Ô đính kèm dùng chung (tệp · ảnh · link) trong thẻ vấn đề */
.kem-bao{display:grid;gap:8px;margin-top:10px}
.kem-bao .kem-tha{padding:12px;font-size:13px}
.kem-bao .kem-tha b{font-size:13.5px}
.kem-bao .nhom-nut{justify-content:flex-start}
.kem-ds{display:grid;gap:6px}
.kem-ds div{display:flex;align-items:center;gap:8px;background:var(--nen);border:1px solid var(--vien);
  border-radius:8px;padding:6px 10px;font-size:13px}
.kem-ds button{margin-left:auto;border:0;background:none;color:var(--mo);cursor:pointer;font-size:16px;line-height:1}
.kem-ds button:hover{color:var(--m3)}
a.tep{text-decoration:none;color:var(--navy)}
.pa-noi{margin-top:8px;background:#fff;border:1px solid var(--vien);border-radius:10px;padding:12px 14px;
  font-size:14px;line-height:1.65;max-height:320px;overflow:auto}
.pa-noi p{margin:0 0 8px} .pa-noi ul,.pa-noi ol{margin:0 0 8px;padding-left:22px}

.soan-dd{border:1px solid var(--vien);border-radius:10px;overflow:hidden}
.dd-thanh{display:flex;gap:2px;padding:5px 6px;background:var(--nen);border-bottom:1px solid var(--vien);flex-wrap:wrap}
.dd-thanh button{border:1px solid transparent;background:none;border-radius:7px;min-width:30px;height:28px;
  cursor:pointer;font-size:13px;color:var(--chu);line-height:1}
.dd-thanh button:hover{background:#fff;border-color:var(--vien)}
.dd-o{min-height:150px;max-height:340px;overflow:auto;padding:12px 14px;background:#fff;
  font-size:14px;line-height:1.65;outline:none}
.dd-o:focus{box-shadow:inset 0 0 0 2px rgba(30,58,99,.18)}
.dd-o p{margin:0 0 8px} .dd-o ul,.dd-o ol{margin:0 0 8px;padding-left:22px}
.dd-o:empty::before{content:"Gõ nội dung ở đây… bôi đen rồi bấm B để in đậm";color:var(--mo)}

.vd-yk{display:grid;gap:10px;margin-bottom:10px;max-height:34vh;overflow:auto}
.yk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px}
.yk > div{flex:1 1 auto;min-width:0}
.yk-xac_nhan .av,.yk-duyet_pa .av,.yk-xong .av{background:var(--m0)}
.yk-bac .av,.yk-huy .av{background:var(--m3)}
.yk-tra_lai_pa .av{background:var(--m2)}
@media (max-width:760px){.vd-buoc{grid-template-columns:1fr 1fr}}

/* ---------- điện thoại ---------- */
@media (max-width:900px){
  .dau-trong{flex-wrap:wrap;gap:8px;padding:8px 16px}
  .tab{order:3;width:100%;margin:0;overflow-x:auto}
  .thuong-hieu span{display:none}
  .than{padding:16px 16px 40px}
  .bang thead{display:none}
  .bang,.bang tbody,.bang tr,.bang td{display:block;width:100%}
  .bang tr{border-top:1px solid var(--vien);padding:10px 12px}
  .bang td{border:0;padding:3px 0}
  .bang tr.m3,.bang tr.m2{box-shadow:inset 4px 0 0 var(--m3)}
  .bang tr.m2{box-shadow:inset 4px 0 0 var(--m2)}
  .bang tr td:first-child{box-shadow:none!important}
  .hanh-dong{justify-content:flex-start;padding-top:6px!important}
  .trich{max-width:none}
  .luoi-2{grid-template-columns:1fr}
  .loc select{flex:1 1 45%}
  .viec{grid-template-columns:1fr}
  .viec-phai{align-items:flex-start;flex-direction:row;flex-wrap:wrap;text-align:left}
  .viec-nut{justify-content:flex-start}
  .uu-chon{grid-template-columns:1fr 1fr}
  .loi-chao h2{font-size:24px}
  .tab-phu{width:100%;overflow-x:auto}
  .luoi-3{grid-template-columns:1fr}
  .lich{font-size:11px}
  .lich-o{min-height:74px;padding:3px}
  .lich-thu{padding:6px 2px;font-size:10px}
  .sk-chip{padding:1px 4px;font-size:10px}
  .lich-dieu-huong b{min-width:110px;font-size:15px}
  .buoi-dong{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 26px}
  .sk-ct-dong{flex-direction:column;gap:2px}
  .sk-ct-dong b{min-width:0}
}
@media print{
  .dau,.loc,.nhom-nut,.bang-demo,#tab-cho,#tab-khach,.hanh-dong{display:none!important}
  #tab-bao-cao{display:block!important}
  body{background:#fff}
  .the,.bang-khung,.bieu-do{box-shadow:none;border:1px solid var(--vien)}
}

/* Dòng trạng thái sao lưu trong tab Người dùng */
.sao-luu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;
  border:1px solid var(--vien);border-left-width:4px;border-radius:10px;padding:10px 14px;
  margin-bottom:12px;background:var(--nen)}
.sao-luu:empty{display:none}
.sao-luu.ok{border-left-color:#1a7f4b} .sao-luu.cu{border-left-color:var(--m2)}
.sao-luu.hong{border-left-color:var(--m3)}
.sao-luu b{color:var(--navy)}
.sao-luu a{color:var(--navy)}

/* Việc tạo từ email: dòng báo gắn thư trong hộp giao việc */
.cv-email{background:var(--navy-nhat);border:1px solid var(--vien);border-radius:8px;padding:8px 12px;font-size:13px;margin:-4px 0 10px;line-height:1.5}
.cv-email a{color:var(--navy);font-weight:600}
.cv-email small{display:block;color:var(--mo);font-size:12px}

/* ================= BIỂU MẪU (bieu-mau.js) ================= */
.bm-dau{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.bm-dau input[type=search]{flex:1 1 280px;max-width:460px}
.bm-quyen{margin:0 0 14px}
.bm-nhom{margin-bottom:22px}
.bm-nhom-dau{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.bm-nhom-dau h3{font-size:16px}
.bm-nhom-dau p{margin:2px 0 0;font-size:13px}
.bm-dem{display:inline-block;min-width:22px;text-align:center;background:var(--navy-nhat);color:var(--navy);border-radius:999px;font-size:12px;font-weight:500;padding:1px 7px;vertical-align:2px}
.bm-trong{background:#fff;border:1px dashed var(--vien);border-radius:var(--r);padding:14px 16px}
.bm-bang td{vertical-align:middle}
.bm-ten{display:flex;gap:10px;align-items:center}
.bm-ten b{font-weight:500;color:var(--navy)}
.bm-loai{flex:0 0 auto;display:grid;place-items:center;width:34px;height:40px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;background:#6b7280}
.bm-w{background:#2b579a}.bm-x{background:#217346}.bm-p{background:#b3261e}.bm-pp{background:#c4502b}
.bm-gc{font-size:13px;white-space:pre-line}
.bm-ngay{white-space:nowrap;font-size:13px}
.bm-bang{table-layout:fixed}
.bm-bang th:nth-child(1){width:31%}.bm-bang th:nth-child(2){width:23%}
.bm-bang th:nth-child(3){width:13%}.bm-bang th:nth-child(4){width:33%}
.bm-bang td{overflow-wrap:anywhere}
.bm-bang td:last-child{width:auto}
.bm-nut{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.bm-nut .nut{white-space:nowrap}
.bm-moi{font-size:11px;vertical-align:1px}
.bm-tai-ds{display:grid;gap:8px}
.bm-tai-dong{display:flex;gap:10px;align-items:flex-start;background:var(--nen);border:1px solid var(--vien);border-radius:10px;padding:10px}
.bm-tai-o{flex:1;display:grid;gap:6px;min-width:0}
.bm-tai-o small{font-size:11.5px}
.bm-bo{border:0;background:none;color:var(--mo);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
.bm-ls{display:grid;gap:8px}
.bm-ls-dong{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;background:#fff}
.bm-ls-dong.dang-dung{border-color:var(--navy);background:var(--navy-nhat)}
.bm-ls-so{flex:0 0 64px;font-weight:600;color:var(--navy)}
.bm-ls-so small{display:block;font-weight:400;font-size:11px;color:var(--m0)}
.bm-ls-giua{flex:1;min-width:0;word-break:break-word}
.bm-ls-gc{margin-top:4px;font-size:13px;white-space:pre-line}
@media (max-width:760px){
  .bm-bang{table-layout:auto}
  .bm-bang thead{display:none}
  .bm-bang tr{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--vien)}
  .bm-bang td{border:0;padding:2px 12px}
  .bm-gc{max-width:none}
  .bm-nut{justify-content:flex-start;flex-wrap:wrap}
}

/* Thẻ thông báo nổi trong trang (nhac.js) — góc trên bên phải, dưới thanh điều hướng */
.tb-noi{position:fixed;top:78px;right:18px;z-index:60;display:grid;gap:10px;width:min(360px,calc(100vw - 24px))}
.tb-noi-the{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--vien);border-left:4px solid var(--navy);border-radius:12px;padding:12px 12px 12px 14px;box-shadow:0 12px 32px rgba(11,22,40,.22);cursor:pointer;animation:tbVao .25s ease-out;transition:opacity .25s,transform .25s}
.tb-noi-the.di{opacity:0;transform:translateX(24px)}
.tb-noi-the img{width:28px;height:28px;border-radius:6px;flex:0 0 auto}
.tb-noi-the div{flex:1;min-width:0;display:grid;gap:2px}
.tb-noi-the b{color:var(--navy);font-size:14px;line-height:1.35}
.tb-noi-the span{color:var(--mo);font-size:12.5px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tb-noi-the button{border:0;background:none;color:var(--mo);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
@keyframes tbVao{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* Hồ sơ khách · khối Giấy tờ pháp lý */
.dem-gt:not(:empty){font-style:normal;display:inline-block;min-width:20px;text-align:center;background:var(--navy-nhat);color:var(--navy);border-radius:999px;font-size:11.5px;padding:0 6px;margin-left:4px;vertical-align:1px}
.loai-tep{color:var(--navy);font-weight:600}

/* Hộp giao việc: gợi ý @tên hiện DƯỚI ô mô tả; ô chọn chuỗi email */
.mo-boc{position:relative}
.goi-y.goi-y-duoi{bottom:auto;top:calc(100% + 4px);z-index:5}
.cv-thread-hang{display:flex;gap:8px;align-items:center}
.cv-thread-hang select{flex:1;min-width:0}
/* Chi tiết việc: tệp đính kèm lúc tạo việc */
.ct-tep{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ct-tep .nhan-tep{font-size:12px;color:var(--mo);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}

/* ---------- ô soạn có định dạng (soan.js) — 22/09/2026 ---------- */
.o-nhan{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:13px}
.soan-dinh-dang{border:1px solid var(--vien);border-radius:10px;background:#fff;font-weight:400;display:block}
.soan-dinh-dang:focus-within{outline:2px solid rgba(30,58,99,.22);border-color:var(--navy)}
.soan-thanh{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--vien);background:var(--nen);border-radius:10px 10px 0 0}
.soan-thanh>button,.soan-mau>button{min-width:30px;height:28px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--navy);font-size:14px;padding:0 6px}
.soan-thanh>button:hover,.soan-mau>button:hover{background:var(--navy-nhat)}
.soan-a{border-bottom:3px solid #b3261e;line-height:1;font-weight:700}
.soan-hl{background:#fff59d;padding:0 3px;border-radius:3px;font-weight:700}
.soan-mau{position:relative;display:inline-flex}
.soan-bang{position:absolute;top:calc(100% + 4px);left:0;z-index:20;display:flex;gap:6px;padding:8px;background:#fff;border:1px solid var(--vien);border-radius:10px;box-shadow:var(--bong)}
.soan-bang button{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.soan-bang button.bo{background:#fff;font-size:11px;color:var(--mo)}
.soan-goi-y-anh{margin-left:auto;font-size:11px;color:var(--mo);padding-right:4px}
.soan-o{min-height:84px;max-height:42vh;overflow:auto;padding:9px 11px;outline:none;line-height:1.55;font-size:14px;white-space:normal;word-break:break-word}
.soan-o:empty::before{content:attr(data-goi-y);color:#9aa0ab;pointer-events:none}
.soan-o img,.van-ban img{max-width:100%;max-height:360px;border-radius:8px;border:1px solid var(--vien);display:block;margin:6px 0;cursor:zoom-in}
.soan-o ul,.van-ban ul{margin:4px 0;padding-left:22px}
.van-ban{white-space:normal;word-break:break-word}
.van-ban p,.van-ban div{margin:0}
@media (max-width:560px){.soan-goi-y-anh{display:none}}

/* ---------- việc riêng tư ---------- */
.o-rieng-tu{flex-direction:row;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--vien);border-radius:12px;background:var(--nen);cursor:pointer}
.o-rieng-tu input{margin-top:3px}
.o-rieng-tu span{display:flex;flex-direction:column;gap:2px}
.o-rieng-tu small{font-weight:400}
.hop.rieng-tu .o-rieng-tu{border-color:var(--tim);background:var(--tim-n)}
.chon-nhieu.khoa{opacity:.45;pointer-events:none}
.rieng-tu-nhan{font-size:12px}

/* ---------- dán link Drive ---------- */
.cv-link-drive{margin-top:2px}
.cv-link-drive .lien{border:0;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--navy-2);text-decoration:underline;cursor:pointer}
#cv-o-link{display:grid;grid-template-columns:2fr 1.4fr auto;gap:6px;margin-top:6px}
@media (max-width:560px){#cv-o-link{grid-template-columns:1fr}}

/* ---------- tải tệp lớn lên Drive (tai-drive.js) ---------- */
.tai-lon{position:fixed;right:16px;bottom:84px;z-index:1000;display:grid;gap:8px;width:min(340px,calc(100vw - 32px))}
.tai-lon-dong{background:#fff;border:1px solid var(--vien);border-radius:12px;padding:10px 12px;box-shadow:var(--bong)}
.tai-lon-ten{font-weight:500;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tai-lon-thanh{height:6px;background:var(--navy-nhat);border-radius:99px;margin:6px 0 4px;overflow:hidden}
.tai-lon-thanh i{display:block;height:100%;width:0;background:var(--navy);transition:width .2s}
.tai-lon-dong.xong .tai-lon-thanh i{background:var(--m0);width:100%}
.tai-lon-dong.hong{border-color:var(--m3)}
.tai-lon-dong.hong .tai-lon-so{color:var(--m3)}

/* ---------- hồ sơ khách: một trang cuộn dọc (22/09/2026) ---------- */
#hop-kh-hs{width:min(860px,calc(100vw - 24px))}
#hop-kh-hs .noi{display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow:hidden}
.hs-muc-luc{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:8px;border-bottom:1px solid var(--vien)}
.hs-muc-luc a{font-size:12px;padding:3px 9px;border:1px solid var(--vien);border-radius:99px;color:var(--navy);text-decoration:none;background:#fff;white-space:nowrap}
.hs-muc-luc a:hover{border-color:var(--navy);background:var(--navy-nhat)}
.hs-muc-luc i{font-style:normal;color:var(--mo)}
.hs-cuon{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;gap:4px;padding-right:6px;scroll-padding-top:6px}
.hs-muc{display:grid;gap:10px;padding:14px 0 16px;border-bottom:1px dashed var(--vien)}
.hs-muc:last-child{border-bottom:0}
.hs-tieu{margin:0;font-size:14px;color:var(--navy);font-weight:700}
.hs-tieu small{font-weight:400}
.hs-tieu-nho{margin:4px 0 0;font-size:12.5px;color:var(--navy);font-weight:500}
#hs-dv-ds{max-height:none;overflow:visible}
.hs-dong-ds{margin:0;padding-left:20px;display:grid;gap:4px}
.hs-dong-ds li::marker{color:var(--navy-2)}
.hs-dong-ds input{width:100%;padding:6px 9px}
.hs-tick{display:flex;flex-wrap:wrap;gap:6px}
.hs-chip{border:1px solid var(--vien);border-radius:99px;padding:5px 11px;background:#fff;color:var(--chu);cursor:pointer;font-size:13px}
.hs-chip.chon{border-color:var(--navy);background:var(--navy-nhat);color:var(--navy);font-weight:500}
.hs-bo{border:0;background:none;color:var(--mo);cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 4px}
.hs-bc{display:grid;gap:6px}
.hs-bc-dong{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 22px;gap:8px;align-items:center;padding:4px 8px;border-radius:8px}
.hs-bc-dong.chon{background:var(--navy-nhat)}
.hs-bc-dong .chon-o{color:var(--chu)}
.hs-bc-dong .bc-han{padding:5px 9px}
.hs-bc-dong .bc-han:disabled{background:transparent;border-style:dashed}
.hs-them-dong{display:flex;gap:6px}
.hs-them-dong input{flex:1}
.ds-tep .cho-gt .gt-ten,.ds-tep .gt-ten{flex:1;padding:4px 8px;min-width:0}
.ten-tep-o{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:600px){.hs-bc-dong{grid-template-columns:1fr 22px}.hs-bc-dong .bc-han{grid-column:1}}
@media (max-width:600px){.hs-muc-luc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.hs-muc-luc::-webkit-scrollbar{display:none}}

/* Trạng thái "Theo dõi" (23/09/2026) — còn trông chừng, không hạn chót */
.tt-theo_doi{padding:3px 10px 3px 9px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.35;color:#fff;letter-spacing:.01em;background:#0e7490}
.tt-theo_doi::before{width:7px;height:7px;background:#fff;box-shadow:none;opacity:.9}
.khong-han{display:inline-block;background:#e0f2fe;color:#0e7490;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
/* Nhóm theo trạng thái */
.nhom-tt{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.nhom-tt:first-child{margin-top:2px}
.nhom-tt .so{color:var(--mo);font-size:12.5px}
.nhom-tt .vach{flex:1;height:1px;background:var(--vien)}
/* Dòng "đã giao cho ..." trong bảng theo dõi thư */
.giao-cho{color:var(--m0);margin-top:2px}
.giao-cho b{color:inherit}
/* Nút thao tác trong hộp chi tiết việc / thư */
.ct-hanh-dong{justify-content:flex-start;margin:2px 0 4px}
.ct-hanh-dong:empty{display:none}

/* "Đã thực hiện · chờ chốt" (23/09/2026) — người nhận báo xong, chờ người giao chốt */
.tt-da_lam{padding:3px 10px 3px 9px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.35;color:#fff;letter-spacing:.01em;background:#a16207}
.tt-da_lam::before{width:7px;height:7px;background:#fff;box-shadow:none;opacity:.9}
.cho-chot{display:inline-block;background:#fef3c7;color:#854d0e;border:1px solid #fde68a;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600}
.cho-chot-nhan{background:#fef3c7;color:#854d0e}

/* ---- 29/09/2026: giao việc theo từng lượt thư · chuyển tiếp · nhắc việc ---- */
.giao-cho .giao-lai{border:0;background:none;padding:0 0 0 4px;font:inherit;font-size:12.5px;
  color:var(--navy-2);text-decoration:underline;cursor:pointer}
.giao-cho .giao-lai:hover{color:var(--navy)}
.luot-truoc{color:var(--mo);margin-top:2px;font-style:italic}
.nhac-bi{background:var(--m3n);color:var(--m3);border:1px solid #f1c3bf;font-weight:600}
.nhac-da{background:var(--m1n);color:var(--m1)}
.nut-nhac{border-color:#f1c9a9;color:var(--m2)}
.nut-nhac:hover{border-color:var(--m2)}
.nut-nhac[disabled]{opacity:.55;cursor:wait}

/* ---------- ONBOARD KHÁCH HÀNG MỚI (30_onboard.sql) ---------- */
.ob-khung{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r);box-shadow:var(--bong);padding:18px 20px 12px;margin-bottom:26px}
.ob-khung .tieu-de-trang{margin-bottom:12px}
.ob-khung .tieu-de-trang h2{font-size:18px}
.ob-khung .tieu-de-trang p{max-width:760px}
.ob-khung .bang-khung{box-shadow:none}
.muc.ob-da-gui{background:var(--m0n);color:var(--m0)}
.ob-link-o{display:flex;gap:8px;align-items:center}
.ob-link-o input{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.hs-nhan{font-size:12.5px;color:var(--mo);font-weight:500}
.hs-o-nhan{display:grid;gap:6px}
.ob-bang{background:var(--navy-nhat);border:1px solid #d7deea;border-radius:10px;padding:8px 12px;font-size:13px;color:var(--navy)}
.ob-bang.can-xem{background:var(--m1n);border-color:#ead9b8;color:var(--m1)}
.ob-bang a{color:inherit;font-weight:600}
.ob-note{font-weight:400;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--m1n);border:1px solid #ead9b8;border-radius:8px;padding:6px 10px;font-size:12.5px;color:#5c4415;margin-top:2px}
.ob-note q{font-weight:600;quotes:'"' '"'}
.ob-note-nut{display:flex;gap:6px;flex:none}
.ob-note.xong{background:var(--m0n);border-color:#bfe0d1;color:var(--m0)}
.muc.ob-khoa{background:var(--nen);color:var(--mo)}

/* ===================== ONBOARD · MẪU CÂU HỎI (ob-mau.js) — 02/10/2026 ===================== */
.ob-nut-dau{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ob-chua-dich{color:var(--m1);font-weight:500}
.hop-mau{width:min(980px,calc(100vw - 24px))}
.hop-mau{overflow:clip}
/* overflow:clip (không phải hidden): hidden vẫn bị trình duyệt cuộn ngầm khi focus một ô ở dưới,
   làm thanh nút Lưu trôi đè lên nội dung */
.hop-mau .noi{display:flex;flex-direction:column;gap:10px;max-height:92vh;overflow:hidden;overflow:clip}
.mau-dau{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mau-chon{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mau-chon select{min-width:260px;max-width:100%}
/* fieldset KHÔNG làm khung cuộn được ổn định trên Chrome → cuộn ở div bọc ngoài */
.mau-cuon{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px}
.mau-fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:10px;align-content:start}
.hop-mau .hop-nut{flex:none;background:#fff;border-top:1px solid var(--vien);padding-top:10px;margin-top:0;flex-wrap:wrap;align-items:center}
.mau-fs:disabled .ml-dich{display:none}
.mau-pb{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mau-pb select{width:auto;max-width:100%;font-size:12.5px;padding:4px 8px}
.mau-tt{color:var(--m1);font-size:12.5px;font-weight:500}
.bang-tb-loi{background:var(--m3n);border:1px solid #efc3bf;color:var(--m3);border-radius:10px;padding:8px 12px;font-size:13px}
.bang-tb-loi ul{margin:4px 0 0;padding-left:18px}
.mau-than{display:grid;gap:12px;align-content:start;padding:2px 0}
.mau-than textarea{min-height:0}
.mp{background:var(--nen);border:1px solid var(--vien);border-top:4px solid var(--navy);border-radius:12px;padding:12px;display:grid;gap:8px}
.mp-dau{display:flex;gap:8px;align-items:flex-start}
.mp-dau .ml{flex:1;min-width:0}
.mp-dau .ml input{font-weight:600;color:var(--navy)}
.mp-so{width:56px!important;flex:none;text-align:center;font-weight:700}
.mq-ds{display:grid;gap:6px}
.mq{background:#fff;border:1px solid var(--vien);border-radius:10px;overflow:hidden}
.mq.mo{border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(30,58,99,.08)}
.mq-gon{display:flex;gap:8px;align-items:center;padding:8px 10px;cursor:pointer;flex-wrap:wrap}
.mq-gon:hover{background:var(--navy-nhat)}
.mq-so{background:var(--navy-nhat);color:var(--navy);border-radius:6px;min-width:24px;text-align:center;font-size:12px;font-weight:600;padding:1px 4px}
.mq-chu{flex:1 1 260px;min-width:0;color:var(--chu)}
.mq-chu .bb{color:var(--m3)}
.mq-kieu{font-size:11.5px;border:1px solid var(--vien);border-radius:99px;padding:1px 8px;color:var(--mo);white-space:nowrap}
.mq-o{font-size:11.5px;border-radius:99px;padding:1px 8px;background:var(--navy-nhat);color:var(--navy);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mq-o.dv{background:var(--m1n);color:var(--m1)}
.mq-o.mo{background:transparent;color:var(--mo)}
.mq-nut{display:inline-flex;gap:2px;flex:none}
.mq-nut button{border:1px solid transparent;background:none;border-radius:6px;cursor:pointer;color:var(--mo);padding:2px 6px;font-size:13px;line-height:1.2}
.mq-nut button:hover{border-color:var(--vien);background:#fff;color:var(--navy)}
.mq-sua{border-top:1px dashed var(--vien);padding:10px 12px 12px;display:grid;gap:10px}
.mq-hang{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.mq-hang>label{flex:1 1 200px;min-width:0}
.mq-hang>label.rong{flex:2 1 320px}
.mq-hang>label.chon-o{flex:0 0 auto;padding-bottom:8px}
.mq-lc{display:grid;gap:6px}
.mq-lc-dong{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.mq-lc-dong .ml{flex:1 1 280px;min-width:0}
.mq-lc-dong .chon-o{font-size:12px;padding-top:7px}
.mq-dau{color:var(--mo);padding-top:7px;width:14px;text-align:center}
.mq-ma{margin:0}
.mq-ma code{font-size:11.5px;background:var(--nen);padding:0 4px;border-radius:4px}
.ml{display:grid;gap:4px;min-width:0}
.ml-nhan{font-size:12px;color:var(--mo);font-weight:500}
.ml-dong{display:flex;gap:6px;align-items:flex-start}
.ml-dong>input,.ml-dong>textarea{flex:1;min-width:0}
.ml-nut{flex:none;border:1px solid var(--vien);background:#fff;border-radius:8px;padding:6px 8px;font-size:12px;color:var(--mo);cursor:pointer;white-space:nowrap}
.ml-nut.du{color:var(--m0);border-color:#bfe0d1}
.ml-nut:hover{border-color:var(--navy)}
.ml-dich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px 8px;background:var(--nen);border-radius:8px}
.hop .ml-dich label,.ml-dich label{display:flex;flex-direction:row;gap:6px;align-items:center;font-size:12px;color:var(--mo);font-weight:400}
.ml-dich label>span{width:40px;flex:none}
.ml-dich input,.ml-dich textarea{flex:1;min-width:0}
.chi-xem [data-sua],.chi-xem [data-them-cau],.chi-xem [data-them-phan]{display:none!important}
.mau-xem-nn{width:auto!important;font-size:13px;padding:6px 8px}
@media (max-width:700px){
  .ml-dich{grid-template-columns:1fr}
  .mau-chon select{min-width:0;flex:1 1 100%}
  .hop-mau .hop-nut{flex-wrap:wrap}
  .mq-gon{gap:6px}
}
.mau-than input,.mau-than textarea,.mau-than select,.mau-fs>.luoi-2 input{color:var(--chu)}
.hop-mau .nut:disabled{opacity:.45;cursor:default}

/* ================= ĐỘ GẤP · ĐỘ QUAN TRỌNG GÁN TAY (05/10/2026) ================= */
.gap-tay.g3{background:#fde4e1;color:#a82720;border:1px solid #f3b8b1}
.gap-tay.g2{background:#fdecdf;color:#b4531c;border:1px solid #f2c9a8}
.gap-tay.g1{background:#f2f4f7;color:var(--mo);border:1px solid var(--vien);font-weight:500}
.qt-tay.q3{background:#ece4fb;color:#4c2f8f;border:1px solid #cdbcf0}
.qt-tay.q2{background:var(--tim-n);color:var(--tim);border:1px solid #ddd2f3}
.qt-tay.q1{background:#f2f4f7;color:var(--mo);border:1px solid var(--vien);font-weight:500}
.ct-gqt{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:10px 0 2px;padding:8px 12px;
  background:var(--nen);border:1px solid var(--vien);border-radius:12px}
.gqt-hang{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.gqt-nhan{font-size:12px;font-weight:600;color:var(--navy-2);margin-right:2px}
.gqt-chip{border:1px solid var(--vien);background:#fff;color:var(--mo);border-radius:999px;padding:3px 10px;
  font-size:12px;cursor:pointer;transition:.15s}
.gqt-chip:hover{border-color:var(--navy)}
.gqt-chip:disabled{opacity:.6;cursor:wait}
.gqt-chip.g3.chon{background:#fde4e1;color:#a82720;border-color:#e58a80;font-weight:600}
.gqt-chip.g2.chon{background:#fdecdf;color:#b4531c;border-color:#e8a674;font-weight:600}
.gqt-chip.q3.chon{background:#ece4fb;color:#4c2f8f;border-color:#a98ce0;font-weight:600}
.gqt-chip.q2.chon{background:var(--tim-n);color:var(--tim);border-color:#bba6e6;font-weight:600}
.gqt-chip.g1.chon,.gqt-chip.q1.chon{background:#eef0f3;color:var(--chu);border-color:#b8bec9;font-weight:600}
.gqt-goi-y{font-size:11.5px;color:var(--mo);margin-left:auto}

/* ================= CẢM XÚC TRÊN BÌNH LUẬN (05/10/2026) ================= */
.cx-hang{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px;min-height:22px}
.tin.toi .cx-hang{justify-content:flex-end}
.cx-chip{border:1px solid var(--vien);background:#fff;border-radius:999px;padding:0 7px;height:22px;font-size:13px;
  line-height:20px;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.cx-chip b{font-size:11.5px;font-weight:600;color:var(--navy-2)}
.cx-chip.toi{background:#fdecef;border-color:#f3b4c0}
.cx-chip:hover{border-color:var(--navy)}
.cx-nut{border:0;background:none;color:var(--mo);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:6px;
  opacity:0;transition:opacity .15s}
.cx-nut small{font-size:10px;margin-left:1px}
.cx-tim{color:#d14b66;font-size:15px}
.tin:hover .cx-nut,.cx-hang:focus-within .cx-nut{opacity:.8}
.cx-nut:hover{opacity:1!important;background:var(--nen)}
@media (hover:none){.cx-nut{opacity:.55}}
.cx-bang{position:absolute;bottom:26px;left:0;z-index:5;display:flex;gap:2px;padding:4px 6px;background:#fff;
  border:1px solid var(--vien);border-radius:999px;box-shadow:0 6px 20px rgba(19,36,63,.16)}
.tin.toi .cx-bang{left:auto;right:0}
.cx-bang button{border:0;background:none;font-size:19px;line-height:1;padding:3px 4px;cursor:pointer;border-radius:8px;transition:transform .12s}
.cx-bang button:hover{transform:scale(1.25);background:var(--nen)}

/* ================= GHI CHÚ DÁN (sticky note, 05/10/2026) ================= */
.gc-nut{position:fixed;right:20px;bottom:20px;z-index:58;width:50px;height:50px;border-radius:50%;border:1px solid #e9d97a;
  background:#fff4a3;box-shadow:0 6px 22px rgba(19,36,63,.22);cursor:pointer;font-size:22px;display:grid;place-items:center;transition:transform .15s}
.gc-nut:hover{transform:translateY(-2px)}
.gc-nut i{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--navy);
  color:#fff;font-size:11px;font-style:normal;font-weight:700;line-height:19px;text-align:center}
.gc-nut i:empty{display:none}
.gc-bang{position:fixed;right:20px;bottom:80px;z-index:59;width:min(320px,calc(100vw - 32px));max-height:min(460px,calc(100vh - 110px));
  display:flex;flex-direction:column;gap:10px;padding:14px;background:#fff;border:1px solid var(--vien);border-radius:16px;
  box-shadow:0 14px 40px rgba(19,36,63,.2)}
.gc-bang-dau b{display:block;color:var(--navy);font-size:15px}
.gc-bang-dau small{color:var(--mo);font-size:12px}
.gc-moi{align-self:flex-start}
.gc-ds{overflow:auto;display:grid;gap:6px;min-height:0}
.gc-muc{display:grid;grid-template-columns:14px 1fr;gap:2px 8px;text-align:left;border:1px solid var(--vien);background:#fff;
  border-radius:10px;padding:7px 10px;cursor:pointer}
.gc-muc:hover{border-color:var(--navy)}
.gc-muc .gc-cham{grid-row:span 2;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.12);margin-top:3px}
.gc-trich{font-size:13px;color:var(--chu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-muc small{font-size:11px;color:var(--mo)}
.gc-muc.da-cat{opacity:.7}
.gc-trong{margin:0;color:var(--mo);font-size:13px}
.gc-bang-cuoi{display:flex;justify-content:space-between;border-top:1px solid var(--vien);padding-top:8px}
.gc{position:fixed;display:flex;flex-direction:column;min-width:180px;min-height:120px;max-width:calc(100vw - 8px);
  border-radius:6px;border:1px solid rgba(0,0,0,.1);box-shadow:0 10px 28px rgba(19,36,63,.22),0 2px 6px rgba(19,36,63,.1);
  resize:both;overflow:hidden;font-size:14px;color:#1f2937}
.gc.thu-gon{resize:none;min-height:0;height:auto}
.gc.thu-gon .gc-cc,.gc.thu-gon .gc-noi{display:none}
.gc.dang-keo{opacity:.92;box-shadow:0 18px 40px rgba(19,36,63,.3)}
.gc-dau{display:flex;align-items:center;gap:2px;padding:3px 4px 3px 8px;cursor:grab;background:rgba(0,0,0,.05);
  user-select:none;touch-action:none;min-height:30px}
.gc.dang-keo .gc-dau{cursor:grabbing}
.gc-keo{color:rgba(0,0,0,.35);font-size:14px;letter-spacing:-1px}
.gc-tieu{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:4px}
.gc-n{border:0;background:none;cursor:pointer;width:26px;height:24px;border-radius:6px;font-size:13px;color:rgba(0,0,0,.55);line-height:1}
.gc-n:hover{background:rgba(0,0,0,.08);color:#000}
.gc-cc{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:2px 4px;border-bottom:1px solid rgba(0,0,0,.07)}
.gc-cc button{border:0;background:none;cursor:pointer;min-width:24px;height:24px;padding:0 4px;border-radius:5px;font-size:13px;color:#333;line-height:1}
.gc-cc button:hover{background:rgba(0,0,0,.08)}
.gc-cc small{font-size:9px}
.gc-a{color:#b3261e;font-weight:700;text-decoration:underline}
.gc-hl{background:#fff176;padding:0 2px;border-radius:2px}
.gc-vach{width:1px;height:16px;background:rgba(0,0,0,.12);margin:0 3px}
.gc-dau .gc-xoa{font-size:12px;opacity:.7}
.gc-dau .gc-xoa:hover{opacity:1;background:#f9e4e2}
.gc-noi{flex:1;overflow:auto;padding:8px 12px 12px;outline:none;line-height:1.45;word-break:break-word;cursor:text}
.gc-noi:empty::before{content:attr(data-placeholder);color:rgba(0,0,0,.35)}
.gc-noi ul,.gc-noi ol{margin:2px 0;padding-left:20px}
.gc-pop{position:absolute;z-index:3;display:flex;gap:4px;padding:6px;background:#fff;border:1px solid var(--vien);border-radius:10px;
  box-shadow:0 8px 24px rgba(19,36,63,.2)}
.gc-pop[data-loai="co"]{flex-direction:column;gap:0;padding:4px}
.gc-co{border:0;background:none;text-align:left;padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;line-height:1.2}
.gc-co:hover{background:var(--nen)}
.gc-o-mau{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.15);cursor:pointer;font-weight:700;font-size:14px;
  background:#fff;padding:0;line-height:22px}
.gc-o-mau:hover{transform:scale(1.12)}
.gc-o-mau.bo{color:var(--mo)}
@media (max-width:640px){
  .gc-nut{right:14px;bottom:14px;width:46px;height:46px}
  .gc-bang{right:14px;bottom:70px}
}
@media print{.gc,.gc-nut,.gc-bang{display:none!important}}

/* 07/10/2026 — hộp Đặt lịch chia hai phần (lịch họp / ngày nghỉ) */
fieldset.phan{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
fieldset.phan[hidden]{display:none}

/* 07/10/2026 — mục 10 hồ sơ khách: khung tổng tiền dịch vụ */
.hs-tong{margin-top:12px;border:1px solid var(--navy);background:var(--navy-nhat);border-radius:10px;padding:10px 14px}
.hs-tong .tong-dong{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--navy)}
.hs-tong .tong-dong span{font-weight:500;font-size:14px}
.hs-tong .tong-dong b{font-size:18px;font-variant-numeric:tabular-nums}
.hs-tong .tong-phu{font-size:12px;color:var(--mo);margin-top:2px}
.hs-tong .tong-tach{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--navy-2);margin-top:6px;padding-top:6px;border-top:1px dashed #c9d2e0}
.hs-tong .tong-tach b{font-variant-numeric:tabular-nums}
.buoi-dong .tx-phi{text-align:right;font-variant-numeric:tabular-nums}

/* 07/10/2026 — ô chọn có tìm kiếm (chon-tim.js) */
select.ct-an{display:none!important}
.ct-boc{position:relative;min-width:0}
.ct-boc .ct-o{width:100%;padding-right:30px}
.ct-boc .ct-mui{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--mo);font-size:12px;cursor:pointer;user-select:none}
.ct-boc.dang-mo .ct-mui{transform:translateY(-50%) rotate(180deg)}
.ct-boc.khoa .ct-mui{opacity:.4;pointer-events:none}
.ct-ds{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--vien);
  border-radius:10px;box-shadow:0 14px 34px rgba(11,22,40,.18);max-height:280px;overflow-y:auto;padding:4px}
.ct-dong{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 10px;border-radius:7px;
  cursor:pointer;font-size:13.5px;font-weight:400;color:var(--chu,#1b2433)}
.ct-dong small{color:var(--mo);font-size:11.5px;white-space:nowrap}
.ct-dong.dang{background:var(--navy-nhat)}
.ct-dong.da-chon span{font-weight:600;color:var(--navy)}
.ct-trong{padding:10px;color:var(--mo);font-size:12.5px}

/* 07/10/2026 — nút × xoá dịch vụ khỏi danh mục (chỉ admin) */
.dv-dong.co-xoa{grid-template-columns:22px minmax(0,1fr) 150px 92px 26px}
.dv-xoa{border:0;background:none;color:var(--mo);cursor:pointer;font-size:19px;line-height:1;padding:4px 0 0;align-self:start}
.dv-xoa:hover{color:#b3261e}
.dv-dong small i{color:#8a5a00}
@media (max-width:760px){
  .dv-dong.co-xoa{grid-template-columns:22px minmax(0,1fr) 26px}
  .dv-dong.co-xoa .dv-xoa{grid-column:3;grid-row:1}
  .dv-dong.co-xoa .dv-phi,.dv-dong.co-xoa .mien{grid-column:2}}

/* =====================================================================
   14/10/2026 — BỐ CỤC THANH BÊN TRÁI (kiểu Happy Panda)
   ===================================================================== */
:root{--ben-rong:248px}
#ung-dung{min-height:100vh}
.ben{position:fixed;top:0;left:0;bottom:0;width:var(--ben-rong);background:#fff;border-right:1px solid var(--vien);
  display:flex;flex-direction:column;z-index:40}
.ben .thuong-hieu{padding:16px 18px 14px;border-bottom:1px solid var(--vien)}
.ben .thuong-hieu img{width:42px;height:42px}
.ben .thuong-hieu b{color:var(--navy);font-size:17px;letter-spacing:.08em}
.ben .thuong-hieu span{color:var(--mo);opacity:1;display:block}
.ben-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.ben-nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;
  border-radius:10px;padding:9px 12px;color:var(--chu);font-size:14.5px;font-weight:400;cursor:pointer;transition:background .15s}
.ben-nav button svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--mo)}
.ben-nav button span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ben-nav button:hover{background:var(--nen)}
.ben-nav button.dang-chon{background:var(--navy-nhat);color:var(--navy);font-weight:500}
.ben-nav button.dang-chon svg{color:var(--navy)}
.ben-nav i{font-style:normal;background:var(--m3);color:#fff;border-radius:10px;padding:0 7px;font-size:12px;font-weight:500;line-height:18px}
.ben-nav i:empty{display:none}
.ben-nhom{margin:6px 0;padding:6px 0;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.ben-nhom-ten{display:flex;align-items:center;gap:8px;padding:6px 12px 4px;font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mo)}
.ben-nhom button{padding-left:16px}
.ben-chan{padding:12px 18px;border-top:1px solid var(--vien);font-size:13px;color:var(--mo)}
.ben-chan .ket-noi{display:inline-flex!important}
.khung-phai{margin-left:var(--ben-rong);min-width:0}

/* thanh trên: trắng, chỉ còn chuông + tài khoản */
.dau{background:#fff;color:var(--chu);border-bottom:1px solid var(--vien)}
.dau-trong{max-width:none;padding:10px 24px;min-height:64px}
.dau-ten{display:none;font-size:17px;margin:0}
.nut-menu{display:none;background:none;border:1px solid var(--vien);border-radius:10px;width:40px;height:40px;
  align-items:center;justify-content:center;cursor:pointer;color:var(--navy)}
.nut-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tai-khoan > .nut,.tai-khoan .nut-chuong{background:#fff;color:var(--navy);border-color:var(--vien)}
.av-dau{width:34px;height:34px;border-radius:50%;background:var(--navy-nhat);color:var(--navy);display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 34px}
.av-dau:empty{display:none}
#ten-nguoi-dung{color:var(--navy);font-weight:500}
.than{max-width:1320px;margin:0;padding:24px 28px 48px}
.bang-demo{text-align:left;padding-left:28px}

/* màn hình nhỏ: thanh bên thành ngăn kéo, mở bằng nút ☰ */
@media (max-width:900px){
  .ben{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(11,22,40,.25)}
  body.menu-mo .ben{transform:none}
  .ben-mo{position:fixed;inset:0;background:rgba(11,22,40,.35);z-index:35}
  .khung-phai{margin-left:0}
  .nut-menu{display:inline-flex}
  .dau-ten{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dau-trong{padding:10px 16px;gap:10px}
  #ten-nguoi-dung{display:none}
  .than{padding:18px 16px 40px}
}

/* ---------- ô số liệu bấm được ---------- */
.the-bam{text-align:left;font:inherit;border-top:0;border-right:0;border-bottom:0;cursor:pointer;transition:transform .12s,box-shadow .12s}
.the-bam:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(19,36,63,.06),0 8px 22px rgba(19,36,63,.1)}
.the-bam.dang-chon{outline:2px solid var(--navy);outline-offset:-2px;background:var(--navy-nhat)}
.the-bam.m3.dang-chon{outline-color:var(--m3);background:var(--m3n)}
.the-bam.m2.dang-chon{outline-color:var(--m2);background:var(--m2n)}
.the-bam.m1.dang-chon{outline-color:var(--m1);background:var(--m1n)}
.the-bam.m0.dang-chon{outline-color:var(--m0);background:var(--m0n)}
.the.m0 b{color:var(--m0)} .the.m0{border-left-color:var(--m0)}
.the.m1 b{color:var(--m1)} .the.m1{border-left-color:var(--m1)}

/* ---------- thẻ việc: mô tả tối đa 3 dòng, tiêu đề tối đa 2 dòng ---------- */
.viec > div:first-child{min-width:0}
.viec-td{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.viec-mo{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;margin-bottom:2px}
.viec-mo.mo-rong{display:block;-webkit-line-clamp:unset;overflow:visible}
.xem-them{background:none;border:0;padding:0;margin:0 0 8px;color:var(--navy-2);font-size:12.5px;font-weight:500;cursor:pointer}
.xem-them:hover{text-decoration:underline}
.viec-mo + .xem-them[hidden]{display:none!important}
.viec-mo:has(+ .xem-them[hidden]){margin-bottom:8px}
.cung-lam-nhan{background:var(--tim-n);color:var(--tim);border-radius:999px;padding:1px 9px;font-weight:500}

/* ---------- thông báo: chưa đọc nổi hẳn lên ---------- */
.o-tb{width:min(420px,calc(100vw - 24px))}
.o-tb-dau .nhom-nut{display:flex;gap:6px}
.tb-dem-chua{font-style:normal;font-weight:500;font-size:12px;color:var(--m3);margin-left:6px}
.tb-dem-chua:empty{display:none}
.nut-banh-rang{position:relative;font-size:15px;line-height:1;padding:5px 9px}
.nut-banh-rang.dang-chon{background:var(--navy-nhat)}
.nut-banh-rang.can-bat::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;
  background:var(--m2);border:2px solid #fff}
.tb-cai{max-height:45vh;overflow-y:auto}
.tb-dong{position:relative;border-left:4px solid transparent}
.tb-dong.moi{background:#e8effa;border-left-color:var(--navy-2);padding-left:26px}
.tb-dong.moi:hover{background:#dce6f6}
.tb-dong.moi b{font-weight:700;color:var(--navy-dam)}
.tb-dong.moi small{color:#3d4656}
.tb-cham{position:absolute;left:10px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--m3)}
.tb-chua{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#fff;
  background:var(--m3);border-radius:999px;padding:1px 7px;text-transform:uppercase}
.tb-dong.da-doc{background:#fff}
.tb-dong.da-doc b{color:var(--mo);font-weight:400}
.tb-dong.da-doc .tb-loai{background:var(--nen);color:var(--mo)}
.ben-chan .ket-noi{color:var(--mo);font-size:12.5px}
.ben-chan .ket-noi::before{background:#c5cad3}
.ben-chan .ket-noi.song::before{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
@media (max-width:900px){
  .ben{visibility:hidden;transition:transform .2s,visibility 0s .2s}
  body.menu-mo .ben{visibility:visible;transition:transform .2s}
}

/* =====================================================================
   14/10/2026 — HỒ SƠ KHÁCH: CHẾ ĐỘ XEM (chỉ hiện ô đã điền) / CHẾ ĐỘ SỬA
   ===================================================================== */
.hs-theo-doi{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 10px;font-size:12.5px;color:var(--mo)}
.hs-theo-doi span + span::before{content:"·";margin-right:14px;color:var(--vien)}
.hs-theo-doi:empty{display:none}
.che-do-xem .an-xem{display:none!important}
/* những thứ chỉ dùng khi sửa */
.che-do-xem .tha,.che-do-xem .hs-them-dong,.che-do-xem #hs-them-dv,.che-do-xem .hs-cuon .chu-thich,
.che-do-xem .hs-bo,.che-do-xem .dv-xoa,.che-do-xem .b-bo,.che-do-xem [data-xoa-tep],.che-do-xem [data-sua-ten],
.che-do-xem [data-bo-gt-moi],.che-do-xem [data-bo-tep-moi],.che-do-xem .ob-note-nut,.che-do-xem .soan-thanh,
.che-do-xem #hs-mhd > .luoi-2,.che-do-xem .hs-cuon .trong-nho{display:none!important}
/* ô khoá trông như chữ đọc, không như ô nhập */
.che-do-xem .hs-cuon input:not([type=checkbox]),.che-do-xem .hs-cuon textarea,.che-do-xem .hs-cuon select{
  border-color:transparent;background:var(--nen);color:var(--chu);cursor:text;box-shadow:none;resize:none;opacity:1}
.che-do-xem .hs-cuon select{appearance:none;-webkit-appearance:none;background-image:none;cursor:default}
.che-do-xem .hs-cuon input:focus,.che-do-xem .hs-cuon textarea:focus{outline:none}
.che-do-xem .hs-cuon textarea{overflow:hidden}
.che-do-xem .hs-chip input,.che-do-xem .hs-bc-dong input[type=checkbox]{display:none}
.che-do-xem .dv-tick{visibility:hidden}
.che-do-xem .hs-chip{cursor:default}
.che-do-xem .mien:has(input:not(:checked)){display:none}
.che-do-xem .mien input{display:none}
.che-do-xem .soan-o{border-color:transparent;background:var(--nen);min-height:0}
.che-do-xem .dv-dong,.che-do-xem .hs-bc-dong{cursor:default}
#hs-trong{margin:30px 0}

/* =====================================================================
   14/10/2026 — Ô TÌM CHUNG trên thanh trên
   ===================================================================== */
.tim-chung{position:relative;flex:1;max-width:620px;display:flex;align-items:center}
.tim-chung .tc-kinh{position:absolute;left:14px;width:18px;height:18px;fill:none;stroke:var(--mo);stroke-width:2;stroke-linecap:round;pointer-events:none}
#tc-o{width:100%;height:42px;border:1px solid var(--vien);background:var(--nen);border-radius:12px;padding:0 70px 0 42px;font-size:14px;outline:none;transition:.15s}
#tc-o:focus{background:#fff;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(30,58,99,.12)}
#tc-o::-webkit-search-cancel-button{display:none}
.tc-phim{position:absolute;right:10px;font:500 11px/1 inherit;color:var(--mo);border:1px solid var(--vien);border-radius:6px;padding:4px 6px;background:#fff;pointer-events:none}
#tc-o:focus ~ .tc-phim{display:none}
.tc-mo{display:none;background:none;border:1px solid var(--vien);border-radius:10px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;color:var(--navy)}
.tc-mo svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tc-ds{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--vien);border-radius:14px;
  box-shadow:0 18px 44px rgba(11,22,40,.18);max-height:min(70vh,560px);overflow-y:auto;z-index:45;padding:6px}
.tc-nhom{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mo);padding:10px 10px 4px}
.tc-dong{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit;color:inherit}
.tc-dong b{display:block;font-weight:500;color:var(--navy);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-dong small{display:block;font-size:12px;color:var(--mo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-dong mark{background:#fdf0c4;color:inherit;border-radius:3px;padding:0 1px}
.tc-dong:hover,.tc-dong.chon{background:var(--navy-nhat)}
.tc-dong-cu b{color:var(--mo);text-decoration:line-through}
.tc-them-viec b,.tc-gmail b{color:var(--navy-2);font-weight:500}
.tc-trong{margin:10px;color:var(--mo);font-size:13px}
@media (max-width:900px){
  .tim-chung{flex:0 0 auto}
  .tc-mo{display:inline-flex}
  .tim-chung .tc-kinh,#tc-o,.tc-phim{display:none}
  body.tim-mo .dau-ten{display:none}
  body.tim-mo .tim-chung{flex:1}
  body.tim-mo .tc-mo{display:none}
  body.tim-mo .tim-chung .tc-kinh,body.tim-mo #tc-o{display:block}
  .tc-ds{position:fixed;left:12px;right:12px;top:66px}
}