/* VHunter Media — tông đỏ đậm / đen / trắng */
:root {
  --do: #b3121f;
  --do-dam: #7a0c15;
  --do-nhat: #fbe9ea;
  --den: #141414;
  --xam-dam: #3a3a3a;
  --xam: #6b6b6b;
  --vien: #d9d4d4;
  --nen: #f5f3f3;
  --trang: #ffffff;
  --xanh: #1f7a3a;
  --vang: #c98a00;
  --vang-nhat: #fff6dd;
  --bo-goc: 10px;
  --bong: 0 1px 3px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--den);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
a { color: var(--do); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
code { background: #eee; padding: 0 .3em; border-radius: 4px; font-size: .9em; word-break: break-all; }

/* ---- đầu trang */
.dau {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--den); color: var(--trang);
  border-bottom: 4px solid var(--do);
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--trang); text-decoration: none; }
.vh {
  display: inline-grid; place-items: center; width: 46px; height: 38px; border-radius: 8px;
  background: var(--do); font-weight: 800; letter-spacing: -.5px; font-size: 16px;
}
.ten-app { font-size: 1.15rem; }
.ten-app small { color: #bbb; font-size: .8rem; font-weight: 400; margin-left: 4px; }
.ten-app b { color: #ff5a63; }
.nhan-gia { background: var(--vang); color: #000; font-weight: 700; font-size: .75rem; padding: 2px 8px; border-radius: 99px; }
.menu { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.menu a { color: #eee; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.menu a:hover, .menu a.dang { background: #2a2a2a; color: #fff; }
.menu a[hidden] { display: none; }
.menu a.nut-moi { background: var(--do); color: #fff; }
.menu a.nut-moi:hover { background: #d0182a; }

.noi-dung { max-width: 1280px; margin: 0 auto; padding: 18px 16px 24px; outline: none; }
.chan-trang {
  text-align: center; color: #9a9393; font-size: .78rem; line-height: 1.4;
  padding: 14px 16px 70px; /* chừa chỗ cho thông báo nổi ở đáy */
}
.cho { color: var(--xam); }

/* ---- thẻ, nút, ô nhập */
.the {
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong); padding: 16px; margin-bottom: 16px;
}
.the.cong { border: 2px solid var(--vang); }
.the.loi { border: 2px solid var(--do); background: var(--do-nhat); }
.hang { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hang.giua { justify-content: space-between; }
.cot2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 720px) { .cot2 { grid-template-columns: 1fr; } }

button, .nut {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 9px 16px;
  border: 1px solid var(--xam-dam); background: var(--trang); color: var(--den);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px;
}
button:hover, .nut:hover { background: #f0eded; }
button.chinh, .nut.chinh { background: var(--do); border-color: var(--do); color: #fff; }
button.chinh:hover { background: var(--do-dam); }
button.den { background: var(--den); color: #fff; border-color: var(--den); }
button.nho { padding: 4px 10px; min-height: 32px; font-size: .9rem; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.chon { background: var(--den); color: #fff; }
label { font-weight: 600; display: block; margin-bottom: 4px; }
.nhap {
  width: 100%; font: inherit; padding: 9px 12px; border: 1px solid #bdb6b6; border-radius: 8px;
  background: #fff; color: var(--den); min-height: 42px;
}
.nhap:focus, button:focus-visible, .nut:focus-visible { outline: 3px solid #ff8a92; outline-offset: 1px; }
.goi-y { color: var(--xam); font-size: .9rem; margin-top: 4px; }
.truong { margin-bottom: 14px; }
.nhom-nhap { display: flex; gap: 8px; }
.nhom-nhap .nhap { flex: 1; min-width: 0; }

/* ---- nhãn trạng thái */
.tt { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.tt-dang_chay { background: var(--do); color: #fff; }
.tt-cho_duyet { background: var(--vang); color: #000; }
.tt-loi { background: var(--den); color: #ff6b74; }
.tt-xong { background: var(--xanh); color: #fff; }
.tt-dung { background: #d6d0d0; color: #000; }
.tt-khong_trang_thai, .tt-trong { background: #eee; color: #444; border: 1px dashed #999; }
.tt-chi-xem { background: #fff; color: #444; border: 1px solid #999; }

/* ---- danh sách dự án */
.ds-du-an { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.du-an-the { display: flex; flex-direction: column; gap: 8px; }
.du-an-the h3 { word-break: break-word; margin: 0; }
.du-an-the .phu { color: var(--xam); font-size: .92rem; }
.du-an-the .hang:last-child { margin-top: auto; }

/* ---- thanh 9 bước */
.buoc9 { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin: 6px 0 14px; }
.buoc {
  border-radius: 8px; padding: 8px 6px; text-align: center; font-size: .82rem; line-height: 1.2;
  background: #e7e3e3; color: #444; border: 2px solid transparent; min-width: 0;
}
.buoc b { display: block; font-size: 1.1rem; }
.buoc span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buoc.dat { background: var(--xanh); color: #fff; }
.buoc.bo_qua { background: #8d8d8d; color: #fff; }
.buoc.dang_chay { background: var(--do); color: #fff; animation: nhap-nhay 1.4s ease-in-out infinite; }
.buoc.cho_duyet { background: var(--vang); color: #000; }
.buoc.loi { background: var(--den); color: #ff6b74; }
.buoc.hien { border-color: var(--den); }
@keyframes nhap-nhay { 50% { opacity: .65; } }
@media (max-width: 720px) { .buoc9 { grid-template-columns: repeat(3, 1fr); } }

/* ---- tiến độ */
.thanh { height: 14px; background: #e6e0e0; border-radius: 99px; overflow: hidden; }
.thanh > i { display: block; height: 100%; background: var(--do); width: 0; transition: width .4s; }
.thanh.chay-mo > i { width: 35% !important; animation: chay-mo 1.2s linear infinite; }
@keyframes chay-mo { from { margin-left: -35%; } to { margin-left: 100%; } }
.log {
  background: var(--den); color: #ddd; font: 13px/1.45 Consolas, "Cascadia Mono", monospace;
  padding: 10px; border-radius: 8px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

/* ---- lưới ảnh */
.luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.luoi.lon { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.o-anh { background: #fff; border: 2px solid var(--vien); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.o-anh img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: #222; cursor: zoom-in; display: block; }
.o-anh.tep img { aspect-ratio: auto; max-height: 260px; object-fit: contain; }
.o-anh .chu { padding: 6px 8px; font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.o-anh .ten { font-weight: 600; word-break: break-all; }
.o-anh .ly { color: var(--xam); }
.o-anh.loai { border-color: var(--do); opacity: .78; }
.o-anh.loai img { filter: grayscale(.7); }
.o-anh.doi { box-shadow: 0 0 0 3px #ffb3b8; }
.o-anh.xem { border-color: var(--vang); }
.o-anh .nut-doi { display: flex; gap: 4px; }
.o-anh .nut-doi button { flex: 1; }
.nhan { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #eee; }
.nhan.khoa { background: #1d5fbf; color: #fff; }
.nhan.neo { background: #7a2bb3; color: #fff; }
.nhan.xem { background: var(--vang); color: #000; }
.nhan.loai { background: var(--do); color: #fff; }
.anh-lon { width: 100%; border-radius: 8px; cursor: zoom-in; background: #222; display: block; }

.loc-nut { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.tom-tat { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; }
.tom-tat .so { font-size: 1.4rem; }

/* nhóm (cổng 3) */
.nhom { border: 1px solid var(--vien); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.nhom.gop { border-style: dashed; background: #faf7f7; }

/* cổng 7 retouch: nền tối để đánh giá da; ảnh ghép trước|sau không cắt */
.the.cong.nen-toi { background: #1b1b1b; color: #eee; }
.the.cong.nen-toi .goi-y { color: #aaa; }
.the.cong.nen-toi .o-anh { background: #262626; border-color: #444; }
.the.cong.nen-toi .o-anh.loai { border-color: var(--do); }
.the.cong.nen-toi .o-anh .ly { color: #bbb; }
.the.cong.nen-toi button:not(.chinh):not(.chon) { background: #2c2c2c; color: #eee; border-color: #666; }
.the.cong.nen-toi button:not(.chinh):not(.chon):hover { background: #3a3a3a; }
.the.cong.nen-toi button.chon { background: #fff; color: #000; border-color: #fff; }
.the.cong.nen-toi .chan-duoi { background: #1b1b1b; }
.luoi.retouch { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.luoi.retouch img { aspect-ratio: auto; object-fit: contain; max-height: 420px; background: #000; }
@media (max-width: 560px) { .luoi.retouch { grid-template-columns: 1fr; } }
.cot2 > .cong-tac { grid-column: 1 / -1; }
.muc-retouch { border: 0; padding: 0; margin: 10px 0 0 28px; min-width: 0; }
.muc-retouch legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.muc-retouch[disabled] { opacity: .45; }
.chon-muc { display: inline-flex; border: 1px solid var(--xam-dam); border-radius: 8px; overflow: hidden; }
.chon-muc label { margin: 0; padding: 8px 18px; min-height: 40px; display: flex; align-items: center; cursor: pointer; font-weight: 600; background: #fff; }
.chon-muc label + label { border-left: 1px solid var(--xam-dam); }
.chon-muc label.chon { background: var(--den); color: #fff; }
.chon-muc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chon-muc label:focus-within { outline: 3px solid #ff8a92; outline-offset: -3px; }
.muc-retouch[disabled] .chon-muc label { cursor: not-allowed; }
.nhan-muc { background: #fff; color: #000; font-size: .82rem; padding: 2px 10px; border-radius: 99px; }
@media (max-width: 560px) { .muc-retouch { margin-left: 0; } .chon-muc { display: flex; } .chon-muc label { flex: 1; justify-content: center; } }
/* 1.8.2: chế độ gửi Zalo — nhãn dài, trên điện thoại xếp dọc */
@media (max-width: 560px) { #cd-zalo { flex-direction: column; } #cd-zalo label { justify-content: flex-start; }
  #cd-zalo label + label { border-left: 0; border-top: 1px solid var(--xam-dam); } }
.cong-tac label { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.cong-tac input[type=checkbox] { width: 20px; height: 20px; }

/* ---- góp ý chỉnh sửa (1.3.0) */
.tt-gop-y { background: #1d5fbf; color: #fff; font-size: .78rem; }
a.nut.co-gop-y { border-color: #1d5fbf; color: #1d5fbf; }
.gy-moi { background: #1d5fbf; color: #fff; }
.gy-dang_sua { background: var(--do); color: #fff; }
.gy-cho_duyet { background: var(--vang); color: #000; }
.gy-xong { background: var(--xanh); color: #fff; }
.gy-tu_choi { background: #d6d0d0; color: #000; }
.gy-gap { background: #fff; color: var(--do); border: 2px solid var(--do); }
.gop-y { border-top: 4px solid #1d5fbf; }
.nhan-truong { font-weight: 600; display: block; margin-bottom: 6px; }
.gy-form { border: 1px dashed #1d5fbf; border-radius: 8px; padding: 12px; margin: 10px 0 16px; background: #f7f9fd; }
.gy-form h3 { margin-top: 0; }
.gy-ca-bo { font-weight: 600; display: flex; gap: 8px; align-items: center; margin: 0; }
.gy-ca-bo input { width: 20px; height: 20px; }
.gy-luoi { margin-top: 8px; max-height: 520px; overflow: auto; padding: 2px; }
.gy-o { position: relative; cursor: pointer; }
.gy-o img { cursor: pointer; }
.gy-o.chon { border-color: #1d5fbf; box-shadow: 0 0 0 3px #9dbdf0; }
.gy-dau { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.45);
  border: 2px solid #fff; color: #fff; font-weight: 800; display: grid; place-items: center; }
.gy-o.chon .gy-dau { background: #1d5fbf; }
.gy-loai { display: flex; gap: 8px; flex-wrap: wrap; }
.gy-loai label { margin: 0; padding: 7px 14px; border: 1px solid var(--xam-dam); border-radius: 99px; background: #fff; cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.gy-loai label.chon { background: #1d5fbf; border-color: #1d5fbf; color: #fff; }
.gy-loai input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gy-loai label:focus-within { outline: 3px solid #9dbdf0; }
.gy-loai.nho-gon span { font-size: .8rem; padding: 1px 9px; border-radius: 99px; background: #e8eef9; color: #1d3f7a; font-weight: 600; }
.chon-muc label.gap.chon { background: var(--do); }
.gy-the { border: 1px solid var(--vien); border-left: 5px solid #1d5fbf; border-radius: 8px; padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.gy-the.gap { border-left-color: var(--do); }
.gy-the .phu { color: var(--xam); font-size: .92rem; }
.gy-mo-ta { margin: 0; white-space: pre-wrap; }
.gy-anh-nho { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gy-anh-nho img { width: 84px; height: 56px; object-fit: cover; border-radius: 6px; cursor: zoom-in; background: #222; }
.gy-tu-choi { background: var(--do-nhat); border: 1px solid var(--do); border-radius: 8px; padding: 8px 10px; }
.gy-lich-su ul { margin: 6px 0 0; padding-left: 18px; font-size: .9rem; }
.gy-lich-su summary, .gy-dong summary { font-size: .92rem; }
.gy-nguoi { margin: 6px 0; }
.gy-hang-doi { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 14px; }
@media (max-width: 560px) {
  .luoi.gy-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 60vh; gap: 6px; }
  .gy-o .chu .ten { font-size: .75rem; }
  .gy-hang-doi { grid-template-columns: 1fr; }
  .gy-nguoi .nhap { max-width: none !important; flex: 1 1 160px; }
}

/* ---- hạng mục + giao Drive (1.4.0) */
.hm, .gd { border-top: 1px solid var(--vien); margin-top: 14px; padding-top: 12px; }
.hm-thanh { position: sticky; top: 62px; z-index: 5; background: #fff; border: 1px solid var(--vien); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.hm-the { border: 1px solid var(--vien); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: #fff; }
.hm-the.chua-ro { border: 2px solid var(--vang); background: var(--vang-nhat); }
.hm-dau { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.hm-so { font-weight: 800; font-size: 1.05rem; min-width: 26px; color: var(--do-dam); }
.hm-ten { max-width: 240px; min-height: 36px; padding: 5px 10px; font-weight: 600; }
.hm-dem { color: var(--xam); font-size: .9rem; }
.hm-nut { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.hm-gop { width: auto; min-height: 32px; padding: 3px 6px; font-size: .9rem; }
.hm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.hm-anh { position: relative; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: #222; }
.hm-anh img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.hm-anh.chon { border-color: #1d5fbf; box-shadow: 0 0 0 2px #9dbdf0; }
.hm-anh.chon .gy-dau { background: #1d5fbf; }
.hm-anh .gy-dau { width: 22px; height: 22px; top: 4px; left: 4px; font-size: .8rem; }
.hm-phong { position: absolute; right: 4px; bottom: 4px; min-height: 0; padding: 0 6px; font-size: 1rem; line-height: 1.4;
  background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 6px; }
.hm-phong:hover { background: var(--do); }
.hm-them, .hm-luu { margin-top: 10px; }
.gd-tm { margin: 6px 0 10px; padding-left: 20px; }
.gd-web { margin-top: 26px; }
@media (max-width: 720px) { .gd-web { margin-top: 0; } }
.gd-tt { margin-top: 10px; }
.gd-tt .thanh { margin: 6px 0; }
@media (max-width: 560px) {
  .hm-thanh { top: 104px; }
  .hm-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .hm-ten { max-width: none; flex: 1 1 140px; }
  .hm-nut { margin-left: 0; }
  .hm-them .nhap, .hm-luu .nhap { max-width: none !important; flex: 1 1 160px; }
}

/* ---- chế độ tự động (1.5.0) */
.tt-tu-dong { background: #1d5fbf; color: #fff; }
.buoc .tu-duyet { display: block; font-size: .68rem; opacity: .9; font-style: italic; }
.chon-muc label.tat { opacity: .45; cursor: not-allowed; }
.look-td[hidden] { display: none; }
[hidden] { display: none !important; }
.td-hoi { border: 3px solid #1d5fbf; background: #f3f7fe; }
.td-hoi h2 { color: #123f84; }
.td-cb ul { margin: 6px 0; padding-left: 18px; }
.td-cb li { margin: 4px 0; }
.td-cb img { width: 72px; height: 48px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px; cursor: zoom-in; }
.td-tt { border-color: #1d5fbf; background: #f3f7fe; }
.td-tt.do { border-color: var(--do); background: var(--do-nhat); }
#dem-zalo { border-color: var(--vang); background: var(--vang-nhat); cursor: default; }
#dem-zalo[hidden] { display: none; }
@media (max-width: 560px) { #che-do { display: flex; } #che-do label { flex: 1; justify-content: center; text-align: center; padding: 8px 6px; } }

/* ---- nắn thẳng v2 / màu v2 (1.5.1) */
.o-anh.o-lon { grid-column: 1 / -1; border: 3px solid var(--vang); position: relative; }
.o-anh.o-lon img { aspect-ratio: auto; object-fit: contain; max-height: 72vh; background: #111; }
/* lưới soát thẳng: phủ lên ảnh, không chặn bấm (bấm ảnh vẫn mở xem lớn) */
.o-hinh { position: relative; }
.o-anh.o-lon { background: #111; }
/* khung ôm sát ảnh (kể cả ảnh dọc) để lưới khớp đúng mép ảnh */
.o-anh.o-lon .o-hinh { width: fit-content; max-width: 100%; margin: 0 auto; }
.o-anh.o-lon .o-hinh img { width: auto; max-width: 100%; }
.o-anh.o-lon .chu { background: #fff; }
.o-anh.o-lon { --luoi: rgba(255,255,255,.75); }
.o-anh.o-lon .o-hinh::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--luoi) 1px, transparent 1px),
    linear-gradient(to bottom, var(--luoi) 1px, transparent 1px);
  background-size: 8.333% 12.5%;
  mix-blend-mode: difference;
}
.nhan-o-lon { position: absolute; top: 8px; right: 8px; z-index: 2; font-size: .8rem; padding: 3px 10px; }
.co-phu { margin-left: 2px; }
.co-lech_xanh { background: #d7ecff; color: #0b4f8a; }
.co-da_vang { background: #fff1c2; color: #7a5a00; }
.co-duc { background: #e6e3e3; color: #333; }
.co-con_nghieng { background: #ffe0cc; color: #8a3a00; }

/* look */
.look { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.look-o { border: 3px solid var(--vien); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; }
.look-o.chon { border-color: var(--do); box-shadow: 0 0 0 3px #ffb3b8; }
.look-o img { width: 100%; display: block; background: #222; }
.look-o .chu { padding: 8px 10px; }

/* bảng */
.bang-cuon { overflow-x: auto; }
table.bang { border-collapse: collapse; width: 100%; font-size: .93rem; }
.bang th, .bang td { border-bottom: 1px solid var(--vien); padding: 7px 8px; text-align: left; vertical-align: middle; }
.bang th { background: #efebeb; }
.bang tr.chan { background: var(--do-nhat); }
.bang img { width: 110px; border-radius: 6px; cursor: zoom-in; display: block; }

.canh-bao { background: var(--vang-nhat); border: 1px solid var(--vang); padding: 10px 12px; border-radius: 8px; margin: 10px 0; }
.canh-bao.do { background: var(--do-nhat); border-color: var(--do); }
.canh-bao.bo-nho { border-width: 2px; border-left-width: 6px; font-size: .97rem; }
.canh-bao[hidden] { display: none; }
.chan-duoi {
  position: sticky; bottom: 0; background: var(--trang); border-top: 2px solid var(--vang);
  margin: 14px -16px -16px; padding: 12px 16px; border-radius: 0 0 var(--bo-goc) var(--bo-goc);
}
.chan-duoi .nhap { max-width: 260px; }
.ly-do-chan { color: var(--do); font-weight: 600; }

/* kiểm tra máy */
.kt-ok { color: var(--xanh); font-weight: 700; }
.kt-loi { color: var(--do); font-weight: 700; }
.kt-canh { color: var(--vang); font-weight: 700; }

/* báo cáo md */
.md table { border-collapse: collapse; margin: 8px 0; }
.md th, .md td { border: 1px solid var(--vien); padding: 4px 8px; }
.md blockquote { border-left: 4px solid var(--do); margin: 8px 0; padding: 4px 12px; color: var(--xam-dam); background: #faf7f7; }

/* ---- lightbox */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb-khung { max-width: 100vw; max-height: 100vh; overflow: auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lb-khung img { max-width: 96vw; max-height: 88vh; object-fit: contain; cursor: zoom-in; }
.lb-khung.that img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-khung.that { align-items: flex-start; justify-content: flex-start; }
.lb button { position: absolute; background: rgba(40,40,40,.85); color: #fff; border: 1px solid #555; font-size: 30px; line-height: 1; min-height: 0; padding: 8px 14px; z-index: 2; }
.lb button:hover { background: var(--do); }
.lb-dong { top: 10px; right: 10px; }
.lb-truoc { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-sau { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-chu { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 14px; color: #eee; background: rgba(0,0,0,.6); font-size: .95rem; z-index: 2; }
.lb-goi { color: #999; font-size: .82rem; margin-left: 8px; }

.thong-bao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(560px, calc(100vw - 32px)); }
.tb { background: var(--den); color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--bong); border-left: 6px solid var(--xanh); }
.tb.loi { border-left-color: var(--do); }

@media (max-width: 560px) {
  .ten-app { display: none; }
  .menu { margin-left: 0; width: 100%; }
  .menu { gap: 3px; }
  .menu a { flex: 1 1 auto; text-align: center; padding: 8px 6px; white-space: nowrap; font-size: .93rem; }
  h1 { font-size: 1.25rem; }
  .luoi { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .chan-duoi { padding: 8px 10px; }
  .chan-duoi .hang { gap: 6px; }
  .chan-duoi .nhap { max-width: none; flex: 1 1 130px; min-height: 38px; padding: 6px 10px; }
  .chan-duoi button { flex: 1 1 100%; min-height: 40px; }
}
/* 1.9.0: thêm mục "Máy" (máy chủ) -> 6 mục; điện thoại 375 px vẫn một dòng */
@media (max-width: 400px) { .menu { gap: 2px; } .menu a { padding: 8px 4px; } }

/* ---- hàng đợi, dự kiến, cảnh báo (1.6.1–1.6.2) */
.tt-xep_hang { background: #e7e3f5; color: #3b2a7a; }
.du-kien { color: var(--den); font-weight: 600; }
.du-kien-to { margin-top: 8px; font-size: 1.02rem; }
.hang-doi h2, .cb-the h2 { margin-top: 0; }
.hd-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hd-ds li { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 1px solid var(--vien); border-radius: 8px; }
.hd-ds li > div:first-of-type { flex: 1 1 auto; min-width: 0; }
.hd-ds li.hd-dang { border-color: var(--do); background: var(--do-nhat); }
.hd-so { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--den); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.hd-dang .hd-so { background: var(--do); }
.hd-nhuong { opacity: .8; border-style: dashed !important; }
.hd-nhuong .hd-so { background: var(--xam); }
.tt-tam_nhuong { background: #eee; color: var(--xam-dam); }
.hd-ds .phu { color: var(--xam); font-size: .9rem; }
.hd-nut { flex: 0 0 auto; }
.cb-ds { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.cb-ds .phu { color: var(--xam); font-size: .85rem; margin-left: 6px; }
.the.xep-hang { border: 2px solid #b9addf; }
.loi-nn { margin: 4px 0; }
.chay-luoi { margin: 8px 0; }
.chay-luoi figure { margin: 0; border-color: var(--do); }
.chay-luoi figcaption { font-size: .82rem; padding: 4px 6px; overflow-wrap: anywhere; }
.bang tr.chay td:nth-child(2) { color: var(--do); font-weight: 700; }
@media (max-width: 560px) {
  .hd-ds li { flex-wrap: wrap; }
  .hd-ds li > div:first-of-type { flex: 1 1 calc(100% - 40px); }
  .hd-nut { width: 100%; justify-content: flex-end; }
}

.ds-dau { margin: 6px 0 10px; }
.ds-dau h2 { margin: 0; font-size: 1.1rem; }
.cong-tac-nho { margin: 0; font-weight: 400; display: flex; gap: 6px; align-items: center; color: var(--xam-dam); }
.ban-moi { position: sticky; top: 0; z-index: 150; background: var(--vang-nhat); border-bottom: 2px solid var(--vang); padding: 8px 16px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ---- dùng từ xa / điện thoại (1.7.0) */
/* mở như ứng dụng trên iPhone (thanh trạng thái trong suốt): chừa chỗ tai thỏ / thanh dưới */
.dau { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.chan-trang { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.chan-duoi { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.tm-hop { margin-top: 8px; border: 1px solid var(--vien); border-radius: 8px; background: #fff; padding: 8px; max-height: 60vh; overflow-y: auto; }
.tm-nhom { font-weight: 700; margin: 6px 0 4px; color: var(--xam-dam); }
.tm-dong { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--nen); border-radius: 0; background: #fff; padding: 10px 6px; min-height: 44px; overflow-wrap: anywhere; font-weight: 400; }
.tm-dong:hover { background: var(--nen); }
.tm-dau { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; margin-bottom: 6px; }
.tm-nut { margin-bottom: 6px; }
.dang-nhap { max-width: 420px; margin: 24px auto; }
.kn-buoc li { margin-bottom: 8px; }
/* 1.9.5: duyệt điện thoại + màn Tóm tắt */
.dt-ma { font-size: 2.6rem; font-weight: 800; letter-spacing: .12em; text-align: center; margin: 14px 0; font-variant-numeric: tabular-nums; }
.dt-ds h3 { margin: 14px 0 6px; }
.dt-dong { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0;
  border-top: 1px solid var(--vien, #ddd); }
.dt-dong > div:first-child { flex: 1 1 180px; min-width: 0; }
.dt-dong.cho { background: rgba(194, 122, 16, .08); padding: 10px 8px; border-radius: 8px; }
.dt-o-ma { width: 150px; letter-spacing: .1em; }
a.dt-lien-ket { color: inherit; text-decoration: none; }

/* ---- chụp trực tiếp (1.8.0) */
.menu .ngan { display: none; }
@media (max-width: 560px) { .menu .dai { display: none; } .menu .ngan { display: inline; } }
.tt-so { margin: 10px 0; flex-wrap: wrap; }
.ftp-bang td:first-child { color: var(--xam); width: 40%; }
.ftp-bang b { font-size: 1.15rem; letter-spacing: .3px; overflow-wrap: anywhere; }
.mk-ftp { font-family: Consolas, "Cascadia Mono", monospace; }
.tm-nhan { font-family: Consolas, "Cascadia Mono", monospace; overflow-wrap: anywhere; user-select: all; }
pre.lenh { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--den); color: #eee; padding: 8px; border-radius: 6px; font-size: .85rem; user-select: all; }

/* ---- ảnh cần xem lại (1.6.5) */
.xl-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.xl-o { margin: 0; border: 2px solid var(--vien); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.xl-o img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: #222; cursor: zoom-in; }
.xl-trong { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: var(--nen); color: var(--xam); }
.xl-o figcaption { padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.xl-co small { color: var(--xam); }
.xl-q { font-size: .88rem; color: var(--xam-dam); }
.xl-nut button { flex: 1 1 auto; }
.xl-o.q-giu { border-color: var(--xanh); }
.xl-o.q-bo { border-color: var(--do); opacity: .7; }
.xl-o.q-bo img { filter: grayscale(.8); }
.xl-o.q-sua { border-color: var(--vang); }
.chon-muc.xl-loc { display: flex; flex-wrap: wrap; gap: 6px; border: 0; overflow: visible; }
.chon-muc.xl-loc label { border: 1px solid var(--xam-dam); border-radius: 99px; padding: 6px 14px; min-height: 36px; white-space: nowrap; flex: 0 0 auto; }
.chon-muc.xl-loc label + label { border-left: 1px solid var(--xam-dam); }
@media (max-width: 560px) { .xl-luoi { grid-template-columns: 1fr; } }

/* ---- ô chọn preset có ảnh mẫu (1.6.0) */
.pr-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 6px; }
.pr-the { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; margin: 0; font-weight: 400;
  border: 2px solid var(--vien); border-radius: 8px; background: #fff; cursor: pointer; }
.pr-the:hover { border-color: var(--xam); }
.pr-the.chon { border-color: var(--do); box-shadow: 0 0 0 2px var(--do-nhat); }
.pr-the.tat { opacity: .55; cursor: not-allowed; }
.pr-the > input { position: absolute; opacity: 0; pointer-events: none; }
.pr-the:focus-within { outline: 2px solid var(--den); outline-offset: 2px; }
.pr-ts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pr-ts.mot { grid-template-columns: 1fr; }
.pr-ts.mot img { aspect-ratio: 8 / 3; object-fit: contain; }
.pr-ts figure { margin: 0; position: relative; }
.pr-ts img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--nen); }
.pr-ts figcaption { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: .72rem; padding: 1px 6px; border-radius: 4px; }
.pr-ts.trong { display: flex; align-items: center; justify-content: center; aspect-ratio: 8 / 3; background: var(--nen); color: var(--xam); font-size: .85rem; border-radius: 4px; }
.pr-ten { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-phu { font-size: .88rem; color: var(--xam-dam); }
.pr-the .goi-y { margin-top: 0; font-size: .84rem; }
.pr-lon { align-self: flex-start; }
.tt-mac-dinh { background: var(--den); color: #fff; font-size: .72rem; }
@media (max-width: 560px) { .pr-luoi { grid-template-columns: 1fr; } }

/* 1.8.1: Photoshop tạm dừng chờ đóng tài liệu: khung lớn, nổi bật */
.ps-canh-bao { border: 3px solid var(--vang); background: var(--vang-nhat); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; animation: ps-nhay 2s ease-in-out infinite; }
.ps-canh-bao h2 { margin: 0 0 6px; font-size: 1.15rem; color: #6b4a00; }
.ps-canh-bao p { margin: 4px 0; }
@keyframes ps-nhay { 50% { box-shadow: 0 0 0 4px rgba(201,138,0,.25); } }
@media (prefers-reduced-motion: reduce) { .ps-canh-bao { animation: none; } }

/* ---- laptop cầu nối (1.9.0) */
.canh-bao.xanh { background: #e9f6ee; border-color: var(--xanh); }
.cn-viec h3 { margin: 0; }
.cn-dong { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 8px; }
.cn-dong > span:first-child { flex: 1 1 180px; }
/* buổi chụp trực tiếp trên laptop (1.9.4) */
.bc-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.bc-so > div { border: 1px solid var(--vien, #ddd); border-radius: 10px; padding: 10px 6px; text-align: center; }
.bc-so .so { display: block; font-size: 1.6rem; font-weight: 700; }
.bc-so span:last-child { font-size: .85rem; }
.bc-td { flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bc-td .bc-may { flex: 0 0 110px; }
.bc-td .bc-duong { flex: 1 1 200px; min-width: 0; }
.bc-duong { word-break: break-all; }
.bc-hd { margin: 6px 0 0; padding-left: 18px; }
/* 1.9.7: trả dần cho khách */
.bc-so.td-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bc-so.td-4 .so { font-size: 1.3rem; }
@media (max-width: 380px) { .bc-so.td-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 1.9.8: "Gửi Zalo tới: …" + Đổi trên thẻ buổi chụp */
.ng-buoi { margin-top: 10px; }
.ng-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.gl-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.gl-o { margin: 0; border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; background: var(--trang); }
.gl-o img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #222; }
.gl-o figcaption { padding: 8px; display: grid; gap: 6px; word-break: break-all; }
.gl-trong { aspect-ratio: 3 / 2; display: grid; place-items: center; color: #888; font-size: .85rem; }
.ng-sua { margin-top: 6px; padding: 10px; border: 1px solid var(--vien, #ddd); border-radius: 8px; }
.bc-hd li { margin: 3px 0; }
.cn-thanh { height: 8px; background: #eee; border-radius: 99px; overflow: hidden; margin: 4px 0 2px; }
.cn-thanh > span { display: block; height: 100%; background: var(--xanh); }
.van-tay { font-family: Consolas, monospace; letter-spacing: .03em; overflow-wrap: anywhere; }
/* ---- tab Văn phòng (1.9.1) */
.vp-khung { margin: -4px 0 0; }
.vp-mo-toan { margin: 0 0 6px; }
/* 1.9.9: 3D toàn màn hình (#/van-phong?chi-3d): ẩn đầu trang + menu, khung chiếm cả màn hình */
body.vp-toan { overflow: hidden; }
body.vp-toan > header, body.vp-toan .menu, body.vp-toan .dau, body.vp-toan nav { display: none !important; }
body.vp-toan .vp-khung iframe { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; border: 0; border-radius: 0; z-index: 50; }
.vp-thoat { position: fixed; bottom: 8px; right: 8px; z-index: 60; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff;
  font-size: .85rem; text-decoration: none; opacity: .25; transition: opacity .2s; }
.vp-thoat:hover, .vp-thoat:focus { opacity: 1; }
.vp-khung iframe { display: block; width: 100%; height: calc(100vh - 150px); min-height: 420px; border: 1px solid var(--vien); border-radius: 12px; background: #fff; }
@media (max-width: 560px) { .vp-khung iframe { height: calc(100dvh - 170px); min-height: 360px; } }@media (max-width: 400px) { .menu.nhieu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; } .menu.nhieu a { padding: 7px 2px; } }@media (max-width: 340px) { .menu.nhieu a { font-size: .82rem; padding: 7px 1px; } }