/* Trang quan tri - giao dien tieng Viet, don gian cho nguoi khong ranh may tinh */
*,*::before,*::after{box-sizing:border-box}
/* Bat buoc: phan tu co thuoc tinh hidden thi phai an, du CSS co dat display */
[hidden]{display:none !important}

:root{
  --chinh:#0f6fc5;--chu:#16202b;--nhat:#61717f;--vien:#e3e9f0;--nen:#f5f7fa;--trang:#fff;
  --xanh:#12794a;--do:#c0392b;--goc:12px;
}
body{margin:0;font-family:"Be Vietnam Pro",system-ui,sans-serif;background:var(--nen);color:var(--chu);font-size:15.5px;line-height:1.6}
h1,h2,h3{margin:0 0 .5rem;line-height:1.3}
input,textarea,select,button{font:inherit}

.nut{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:9px;border:1px solid transparent;cursor:pointer;font-weight:600;font-size:.94rem;text-decoration:none;transition:.15s}
.nut-chinh{background:var(--chinh);color:#fff}
.nut-chinh:hover{filter:brightness(1.08)}
.nut-vien{border-color:var(--vien);background:var(--trang);color:var(--chu)}
.nut-vien:hover{border-color:var(--chinh);color:var(--chinh)}
.nut-nhat{background:transparent;color:var(--nhat)}
.nut-nhat:hover{color:var(--do)}
.nut-nho{padding:.35rem .75rem;font-size:.85rem;border-radius:7px}
.nut-do{color:var(--do);border-color:#f0d0cc;background:#fff}
.nut-do:hover{background:#fdeceb}
.nut:disabled{opacity:.55;cursor:not-allowed}

/* dang nhap */
.man-dang-nhap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.hop-dang-nhap{background:var(--trang);padding:2.5rem;border-radius:16px;box-shadow:0 12px 40px rgba(16,32,52,.1);width:min(400px,100%);display:grid;gap:1rem}
.hop-dang-nhap h1{font-size:1.4rem;margin:0}
.mo-ta{color:var(--nhat);margin:0;font-size:.94rem}
label{display:grid;gap:.35rem;font-weight:500;font-size:.9rem}
input[type=text],input[type=password],input[type=url],textarea,input[type=color]{
  width:100%;padding:.62rem .8rem;border:1px solid var(--vien);border-radius:9px;background:var(--trang);font-size:.98rem;font-weight:400
}
textarea{resize:vertical;min-height:90px;line-height:1.55}
input:focus,textarea:focus{outline:2px solid rgba(15,111,197,.3);border-color:var(--chinh)}
input[type=color]{height:44px;padding:.2rem;cursor:pointer}
.bao-loi{background:#fdeceb;color:var(--do);padding:.6rem .85rem;border-radius:9px;font-size:.9rem}

/* khung chinh */
.thanh-tren{position:sticky;top:0;z-index:30;background:var(--trang);border-bottom:1px solid var(--vien);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.4rem;flex-wrap:wrap}
.thanh-trai{display:flex;align-items:center;gap:.9rem}
.trang-thai{font-size:.86rem;color:var(--nhat)}
.trang-thai.chua-luu{color:#a86a00;font-weight:600}
.trang-thai.da-luu{color:var(--xanh);font-weight:600}
.thanh-phai{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

.than{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;padding:1.6rem;align-items:start;max-width:1500px;margin-inline:auto}
.menu-trai{position:sticky;top:85px;display:grid;gap:.3rem;background:var(--trang);border:1px solid var(--vien);border-radius:var(--goc);padding:.7rem}
.muc-menu{text-align:left;background:none;border:0;padding:.7rem .85rem;border-radius:9px;cursor:pointer;color:var(--chu);font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.muc-menu:hover{background:var(--nen)}
.muc-menu.dang-chon{background:rgba(15,111,197,.1);color:var(--chinh);font-weight:600}
.dem{background:var(--chinh);color:#fff;border-radius:999px;padding:0 .5rem;font-size:.78rem;font-weight:600}
.dem:empty{display:none}
.menu-ghi-chu{font-size:.83rem;color:var(--nhat);padding:.9rem .85rem 0;border-top:1px solid var(--vien);margin-top:.5rem}

/* the noi dung */
.hop{background:var(--trang);border:1px solid var(--vien);border-radius:var(--goc);padding:1.4rem;margin-bottom:1.1rem}
.hop > h2{font-size:1.1rem;margin-bottom:.2rem}
.hop-mota{color:var(--nhat);font-size:.9rem;margin:0 0 1.2rem}
.luoi-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.o-truong{margin-bottom:1rem}
.o-truong:last-child{margin-bottom:0}
.goi-y{font-size:.83rem;color:var(--nhat);font-weight:400;margin-top:.25rem}

/* danh sach khu vuc */
.khu-vuc{background:var(--trang);border:1px solid var(--vien);border-radius:var(--goc);margin-bottom:.8rem;overflow:hidden}
.khu-vuc.dang-keo{opacity:.4}
.khu-vuc.tat{background:#fafbfc}
.khu-dau{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;cursor:pointer}
.tay-keo{cursor:grab;color:#b6c1cc;font-size:1.15rem;user-select:none;padding:0 .2rem}
.khu-ten{font-weight:600;flex:1;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.nhan-loai{font-size:.78rem;color:var(--nhat);font-weight:400;background:var(--nen);padding:.1rem .5rem;border-radius:6px}
.khu-vuc.tat .khu-ten{color:#9aa7b3}
.cong-tac{position:relative;width:44px;height:25px;flex-shrink:0}
.cong-tac input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cong-tac span{position:absolute;inset:0;background:#cfd8e0;border-radius:999px;transition:.2s;pointer-events:none}
.cong-tac span::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.cong-tac input:checked + span{background:var(--xanh)}
.cong-tac input:checked + span::after{transform:translateX(19px)}
.mui-ten{color:var(--nhat);transition:.2s;font-size:.8rem}
.khu-vuc.mo .mui-ten{transform:rotate(180deg)}
.khu-than{padding:0 1.1rem 1.3rem;border-top:1px solid var(--vien);padding-top:1.2rem}

/* muc lap lai */
.muc-lap{border:1px solid var(--vien);border-radius:10px;padding:1rem;margin-bottom:.7rem;background:#fcfdfe;position:relative}
.muc-dau{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem;gap:.5rem}
.muc-so{font-size:.83rem;color:var(--nhat);font-weight:600}
.muc-nut{display:flex;gap:.3rem}
.nut-icon{background:var(--trang);border:1px solid var(--vien);width:28px;height:28px;border-radius:7px;cursor:pointer;color:var(--nhat);display:grid;place-items:center;font-size:.85rem}
.nut-icon:hover{border-color:var(--chinh);color:var(--chinh)}
.nut-icon.xoa:hover{border-color:var(--do);color:var(--do)}

/* anh */
.o-anh-chon{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.xem-anh{width:110px;height:78px;border-radius:9px;object-fit:cover;border:1px solid var(--vien);background:var(--nen)}
.xem-anh.trong{display:grid;place-items:center;color:#b6c1cc;font-size:.8rem;text-align:center}
.luoi-anh-nho{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem;margin-top:1.2rem}
.o-anh-nho{position:relative;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--nen)}
.o-anh-nho img{width:100%;height:100px;object-fit:cover;display:block}
.o-anh-nho:hover{border-color:var(--chinh)}
.o-anh-nho .xoa-anh{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:.8rem}
.o-anh-nho .co-kb{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;padding:.15rem .4rem}
.thu-vien-anh{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.7rem;margin-top:.6rem}
.thu-vien-anh .o{position:relative}
.thu-vien-anh img{width:100%;height:88px;object-fit:cover;border-radius:9px;border:1px solid var(--vien)}

/* hop chon anh */
.lop-phu{position:fixed;inset:0;background:rgba(10,20,32,.55);display:grid;place-items:center;padding:1.5rem;z-index:100}
.hop-noi{background:var(--trang);border-radius:16px;width:min(880px,100%);max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.hop-dau{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.4rem;border-bottom:1px solid var(--vien)}
.hop-dau h2{margin:0;font-size:1.1rem}
.nut-dong{background:none;border:0;font-size:1.2rem;cursor:pointer;color:var(--nhat)}
.hop-than{padding:1.4rem;overflow:auto}
.nut-tai{cursor:pointer}

/* lien he */
.bang{width:100%;border-collapse:collapse;background:var(--trang);font-size:.94rem}
.bang th,.bang td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--vien);vertical-align:top}
.bang th{background:var(--nen);font-size:.86rem;color:var(--nhat);font-weight:600}
.trong-rong{color:var(--nhat);text-align:center;padding:2.5rem 1rem}

/* thong bao */
.thong-bao{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:#16202b;color:#fff;padding:.75rem 1.4rem;border-radius:10px;z-index:200;font-size:.93rem;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.thong-bao.loi{background:var(--do)}

@media (max-width:900px){
  .than{grid-template-columns:1fr;padding:1rem}
  .menu-trai{position:static;display:flex;overflow-x:auto;gap:.3rem}
  .menu-ghi-chu{display:none}
  .luoi-2{grid-template-columns:1fr}
}

/* chon bieu tuong */
.luoi-bt{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.5rem;margin-top:.2rem}
.o-bt{
  aspect-ratio:1;display:grid;place-items:center;background:var(--trang);border:1.5px solid var(--vien);
  border-radius:11px;cursor:pointer;color:var(--nhat);padding:0;
}
.o-bt:hover{border-color:var(--chinh);color:var(--chinh)}
.o-bt.dang-chon{border-color:var(--chinh);background:rgba(15,111,197,.1);color:var(--chinh)}
.o-bt svg,.bt-chon{width:24px;height:24px}

/* nhan ban thu trong trang quan ly */
.the-han{
  display:inline-block;vertical-align:middle;background:#fff4e0;color:#95601a;
  font-size:.75rem;font-weight:600;padding:.15rem .6rem;border-radius:999px;margin-left:.4rem;
}
.the-han.sap-het{background:#fdeceb;color:#b3332a}

/* huong dan tung buoc trong trang quan ly */
.huong-dan{background:var(--nen);border:1px solid var(--vien);border-radius:10px;padding:1rem 1.15rem;margin-bottom:1rem;font-size:.93rem}
.huong-dan ol{margin:.5rem 0 0;padding-left:1.2rem;display:grid;gap:.45rem}
.huong-dan code{background:#fff;border:1px solid var(--vien);padding:.1rem .4rem;border-radius:5px}

/* so khach hang */
.day-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin:1rem 0 1.2rem}
.o-so{background:var(--nen);border:1px solid var(--vien);border-radius:11px;padding:.8rem .9rem;text-align:center}
.o-so b{display:block;font-size:1.5rem;line-height:1.2;color:var(--chu)}
.o-so span{font-size:.8rem;color:var(--nhat)}
.o-so.can-chu-y{background:#fff4e0;border-color:#f0d9b0}
.o-so.can-chu-y b{color:#95601a}
.o-so.xong{background:#e9f7ef;border-color:#bfe5cd}
.o-so.xong b{color:var(--xanh)}
.bang-khach td{vertical-align:middle}
.bang-khach select,.bang-khach input{padding:.4rem .55rem;border:1px solid var(--vien);border-radius:8px;font-size:.88rem;background:#fff;width:100%}
.bang-khach .o-ghichu{min-width:150px}
.bang-khach tr.tt-da-chot{background:#f4fbf6}
.bang-khach tr.tt-bo{opacity:.55}
.bang-khach a{text-decoration:none}

/* khach den tu dau */
.day-nguon{display:flex;flex-wrap:wrap;gap:.45rem;margin:-.4rem 0 1.1rem}
.the-nguon{background:var(--nen);border:1px solid var(--vien);border-radius:999px;
  padding:.3rem .8rem;font-size:.85rem;color:var(--nhat)}
.the-nguon b{color:var(--chinh);margin-right:.25rem}

/* thanh toan */
.tt-gia{display:flex;align-items:baseline;gap:.6rem;margin:.2rem 0 1rem}
.tt-gia b{font-size:2rem;color:var(--chinh);line-height:1}
.tt-gia span{color:var(--nhat)}
.danh-sach-gom{margin:0 0 1rem;padding-left:1.1rem;display:grid;gap:.4rem;color:var(--chu);font-size:.95rem}
.tt-luoi{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:start}
.tt-qr{text-align:center;display:grid;gap:.5rem}
.tt-qr img{width:210px;height:210px;object-fit:contain;border:1px solid var(--vien);border-radius:12px;background:#fff;padding:.5rem}
.tt-qr span{font-size:.83rem;color:var(--nhat)}
.tt-dong{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px dashed var(--vien)}
.tt-dong span{color:var(--nhat);font-size:.9rem}
.tt-dong b{text-align:right}
.tt-dong.noi-dung b code{background:#fff4e0;padding:.2rem .5rem;border-radius:6px;font-size:1rem}
@media (max-width:700px){ .tt-luoi{grid-template-columns:1fr} .tt-qr img{width:100%;max-width:260px;margin:0 auto} }

/* nhom tab danh rieng cho chu dich vu */
.menu-chu{border-top:1px solid var(--vien);margin-top:.5rem;padding-top:.5rem}
.menu-nhan{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--nhat);
  padding:.35rem .85rem .3rem;font-weight:600}