/* Unicity Work OS. Theo DESIGN.md: chi dung var(--...), ma mau chi nam trong khoi :root nay. */
:root{
  color-scheme: light;
  --nen:#F5F5F7; --nen-the:#FFFFFF; --nen-tab:#E9E6EE;
  --chu:#1D1C21; --chu-phu:#55535C; --chu-mo:#4A4652; --chu-nhat:#77757E; --chu-tren-dam:#FFFFFF;
  --nut-dam:#2B1D3D; --chu-tren-nhan:#2B1D3D;
  --nhan:#DCCBF0; --nhan-dam:#CDB8EC; --nhan-vua:#9F84D3; --nhan-nhat:#EEE8F7;
  --nhan-chu:#6A4F96; --nhan-chu-dam:#4E3772;
  --tim-nen-icon:#F1EAF8; --tim-nen-nhe:#F7F5FA; --tim-avatar:#E7DDF5; --tim-hang:#FBFAFD;
  --xong-dam:#1D6B3A;  --xong-nhat:#E2F2E7;
  --dang-dam:#1F4F8F;  --dang-nhat:#DFE9F8;
  --thieu-dam:#8A4A0C; --thieu-nen:#FFF6EA; --thieu-nhat:#FCEBD3; --thieu-vien:#F2D3A8;
  --loi-dam:#8E2A1F;   --loi-nhat:#FBE4E1;
  --xong-thanh:#4F9A69; --xong-vien:#E6EFE8;
  --o-xong:#4F9A69; --o-dang:#7FA3D9; --o-thieu:#E3A458; --o-chua:#DAD7E0;
  --vien:#D6D3DC; --vien-nut:#8F8E97; --vien-tron:#C9C6D0; --vien-day:#E6E4EA; --vien-nhat:#EFEDF2; --ray:#ECE8F2;
  --bo:20px; --bo-nho:14px;
  --bong:0 1px 2px rgba(29,28,33,.06); --bong-noi:0 1px 2px rgba(29,28,33,.08);
  --bong-xac-nhan:0 4px 16px rgba(29,28,33,.18); --lop-phu:rgba(29,28,33,.45);
  --phong-chu:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --phong-ma:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --co-tieu-de:26px; --co-tieu-de-phu:19px; --co-chu:16px; --co-nho:13px; --dong:1.5;
  --rong-toi-da:640px; --rong-may-tinh:1280px; --le:20px; --khoang:16px; --cao-nut:48px; --cao-day:76px; --rong-ben:248px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--nen);color:var(--chu);font-family:var(--phong-chu);font-size:var(--co-chu);line-height:var(--dong);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
a{color:var(--nhan-chu-dam)}
h1,h2,h3,p{margin:0}
.so{font-family:var(--phong-ma);font-variant-numeric:tabular-nums}
.an-di{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Khung */
.man{max-width:var(--rong-toi-da);margin:0 auto;padding:0 12px calc(var(--cao-day) + 24px);display:flex;flex-direction:column;gap:12px}
.man.con{padding-bottom:120px}
.man.may-tinh{max-width:var(--rong-may-tinh);padding:0 32px 48px}
.dau-man{padding:14px 8px 4px;display:flex;align-items:center;gap:8px}
.dau-man .chu-nho{font-size:13px;color:var(--chu-phu)}
.dau-man h1{font-size:var(--co-tieu-de);font-weight:700;line-height:1.3}
.dau-con{height:52px;display:flex;align-items:center;gap:4px;padding:0}
.dau-con h1{font-size:17px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nut-lui{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--chu);border-radius:12px;cursor:pointer}
.logo-dau{display:flex;align-items:center;gap:8px;flex:1}
.logo-dau .o-logo{width:38px;height:38px;border-radius:11px;background:var(--tim-nen-icon);display:flex;align-items:center;justify-content:center}
.logo-dau img{width:30px;height:30px}
.logo-dau span{font-size:15px;font-weight:600}

/* The va dong */
.the{background:var(--nen-the);border-radius:var(--bo);box-shadow:var(--bong);padding:16px 18px}
.the.khong-dem{padding:0;overflow:hidden}
.the h2{font-size:var(--co-tieu-de-phu);font-weight:700;line-height:1.3}
.the h3,.nhan-nhom{font-size:14px;font-weight:600;color:var(--chu-phu)}
.dau-the{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.dong{display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 16px;text-decoration:none;color:var(--chu);border-top:1px solid var(--vien-nhat);background:none;width:100%;text-align:left;border-left:0;border-right:0;border-bottom:0;cursor:pointer}
.dong:first-child{border-top:0}
.dong .giua{flex:1;min-width:0}
.dong .ten{font-size:16px;font-weight:600}
.dong .phu{font-size:14px;color:var(--chu-phu)}
.dong .phai{font-family:var(--phong-ma);font-size:15px;font-weight:700;white-space:nowrap}
.vong{flex:none;width:34px;height:34px;border-radius:50%;background:var(--tim-nen-icon);color:var(--nhan-chu-dam);display:flex;align-items:center;justify-content:center}
.vong.dang{background:var(--dang-nhat);color:var(--dang-dam)}
.vong.thieu{background:var(--thieu-nen);color:var(--thieu-dam)}
.vong.loi{background:var(--loi-nhat);color:var(--loi-dam)}
.vong.xong{background:var(--xong-nhat);color:var(--xong-dam)}
.so-lon{font-family:var(--phong-ma);font-size:40px;font-weight:700;line-height:1.15}
.mo{opacity:.55;text-decoration:underline dashed var(--chu-phu) 2px}
.chu-phu{color:var(--chu-phu);font-size:14px}
.chu-nho{color:var(--chu-phu);font-size:13px}
.hang{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}

/* Nhan trang thai: luon co chu, khong chi mau */
.nhan{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.nhan.moi{border-color:var(--vien);color:var(--chu-phu)}
.nhan.khach_le{background:var(--xong-nhat);color:var(--xong-dam)}
.nhan.khach_than_thiet{background:var(--nhan);color:var(--chu-tren-nhan)}
.nhan.npp{background:var(--nut-dam);color:var(--chu-tren-dam)}
.nhan.thieu{background:var(--thieu-nen);color:var(--thieu-dam)}
.nhan.loi{background:var(--loi-nhat);color:var(--loi-dam)}
.nhan.dang{background:var(--dang-nhat);color:var(--dang-dam)}
.nhan.xong{background:var(--xong-nhat);color:var(--xong-dam)}
.nhan.chi-doc{background:var(--nen-tab);color:var(--chu-mo)}

/* Nut */
.nut-chinh,.nut-phu,.nut-tat{min-height:52px;border-radius:var(--bo-nho);font-size:16px;font-weight:700;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;width:100%}
.nut-chinh{background:var(--nhan);color:var(--chu-tren-nhan);border:1px solid var(--nhan-dam)}
.nut-phu{background:var(--nen-the);color:var(--chu);border:1px solid var(--vien-nut);font-weight:600}
.nut-chinh:disabled,.nut-tat{background:var(--o-chua);color:var(--chu-mo);border:1px solid var(--o-chua);cursor:not-allowed}
.nut-chu{background:none;border:0;color:var(--nhan-chu-dam);font-weight:700;min-height:44px;padding:0 4px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.cau-tat{font-size:14px;color:var(--chu-mo);text-align:center;margin-bottom:6px}
.nhom-chon{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;border:0;margin:0;padding:0}
.nhom-chon legend{padding:0 4px;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--chu-phu)}
.chon{min-height:48px;border-radius:var(--bo-nho);border:1px solid var(--vien-nut);background:var(--nen-the);color:var(--chu);font-size:15px;font-weight:600;cursor:pointer;padding:0 10px}
.chon[aria-pressed="true"]{background:var(--nut-dam);border-color:var(--nut-dam);color:var(--chu-tren-dam);font-weight:700}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--vien-nut);background:var(--nen-the);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--nut-dam);border-color:var(--nut-dam);color:var(--chu-tren-dam)}
.hang-chip{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 4px}
.nut-so{width:48px;height:48px;border-radius:12px;border:1px solid var(--vien-nut);background:var(--nen-the);font-size:20px;cursor:pointer;flex:none}

/* O nhap */
.o-nhap{height:48px;border-radius:var(--bo-nho);border:1px solid var(--vien);background:var(--nen-the);padding:0 14px;font-size:16px;width:100%}
.o-nhap:focus{outline:3px solid var(--nhan-nhat);border-color:var(--nhan-vua)}
.o-nhap.thieu{border:2px solid var(--o-thieu);background:var(--thieu-nen)}
.o-nhap[aria-invalid="true"]{border:2px solid var(--loi-dam)}
label.nhan-o{font-weight:600;font-size:15px}
.hop-loi{padding:10px 12px;border-radius:12px;background:var(--loi-nhat);color:var(--loi-dam);font-size:14px;font-weight:600}
.dong-thieu{border:2px solid var(--o-thieu);background:var(--thieu-nen);border-radius:12px;padding:6px 8px}
.chu-cam{color:var(--thieu-dam);font-size:13px;font-weight:600}

/* Thanh day dinh (nut chinh trong tam ngon cai) */
.thanh-day{position:fixed;left:0;right:0;bottom:0;background:var(--nen-the);border-top:1px solid var(--vien-day);padding:10px 12px 16px;z-index:5}
.thanh-day>div{max-width:var(--rong-toi-da);margin:0 auto}
.dong-tong{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;font-family:var(--phong-ma);font-size:15px;font-weight:700;margin-bottom:8px}

/* Thanh duoi */
.thanh-duoi{position:fixed;left:0;right:0;bottom:0;height:var(--cao-day);background:var(--nen-the);border-top:1px solid var(--vien-day);z-index:5}
.thanh-duoi>div{max-width:var(--rong-toi-da);margin:0 auto;height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 8px 12px}
.thanh-duoi a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--chu-phu);font-size:12px;font-weight:500}
.thanh-duoi a span{width:56px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.thanh-duoi a[aria-current="page"]{color:var(--chu-tren-nhan);font-weight:700}
.thanh-duoi a[aria-current="page"] span{background:var(--tim-avatar)}

/* Dong xac nhan */
.xac-nhan{position:fixed;left:12px;right:12px;bottom:calc(var(--cao-day) + 12px);max-width:calc(var(--rong-toi-da) - 24px);margin:0 auto;background:var(--nut-dam);color:var(--chu-tren-dam);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--bong-xac-nhan);z-index:20;font-size:15px}
.xac-nhan .nut-chu{color:var(--nhan)}
body:has(.thanh-day) .xac-nhan{bottom:160px}
.xac-nhan.that-bai{background:var(--loi-nhat);color:var(--loi-dam);border:1px solid var(--loi-dam)}
.xac-nhan.that-bai .nut-chu{color:var(--loi-dam)}

/* Tam truot tu duoi */
.lop-phu{position:fixed;inset:0;background:var(--lop-phu);z-index:30;display:flex;align-items:flex-end;justify-content:center}
.tam-truot{background:var(--nen-the);border-radius:20px 20px 0 0;width:100%;max-width:var(--rong-toi-da);padding:10px 16px 24px;display:flex;flex-direction:column;gap:12px;max-height:90vh;overflow:auto}
.tam-truot .thanh-keo{width:40px;height:5px;border-radius:3px;background:var(--o-chua);margin:0 auto}

/* Trang thai trong, dang tai */
.trong{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 16px}
.trong .vong-lon{width:60px;height:60px;border-radius:50%;background:var(--tim-nen-icon);color:var(--nhan-chu-dam);display:flex;align-items:center;justify-content:center}
.trong .vong-lon.xong{background:var(--xong-nhat);color:var(--xong-dam)}
.trong h2{font-size:20px;font-weight:700}
.trong p{font-size:15px;color:var(--chu-mo)}
.khung-xam{background:var(--nen-tab);border-radius:10px}
.khung-xam.nhe{background:var(--tim-nen-nhe)}

/* Thanh chia, tien do */
.thanh-chia{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--o-chua)}
.thanh-chia .a{background:var(--o-xong)}
.thanh-chia .b{background:var(--o-dang)}
.chu-giai{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--chu-phu);margin-top:6px}
.cham{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle}
.cham.a{background:var(--o-xong)}
.cham.b{background:var(--o-dang)}

/* Bang (may tinh) */
.hop-bang{overflow-x:auto;background:var(--nen-the);border-radius:var(--bo);box-shadow:var(--bong)}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font-size:13px;color:var(--chu-phu);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--vien-day);white-space:nowrap}
td{padding:6px 12px;border-bottom:1px solid var(--vien-nhat);vertical-align:middle}
td.so,th.so{text-align:right}
td .o-nhap{height:40px;max-width:150px;text-align:right;font-family:var(--phong-ma)}
.bang-cam{padding:12px 16px;border-radius:var(--bo-nho);background:var(--thieu-nen);color:var(--thieu-dam);font-weight:600;border:1px solid var(--thieu-vien)}
.luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.buoc{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--chu-phu)}
.buoc b{color:var(--chu)}
.chan-trang{font-size:13px;color:var(--chu-phu);text-align:center;padding:8px 12px}
@media (min-width:768px){.man.con{padding-bottom:140px}}

/* ===== PC (D97): thanh ben trai thay thanh duoi, noi dung rong ra, man tong hop chia hai cot ===== */
.thanh-ben,.chi-pc{display:none}
@media (min-width:1024px){
  .thanh-duoi,.chi-dien-thoai{display:none}
  .chi-pc{display:block}
  #app.co-ben{padding-left:var(--rong-ben)}
  .thanh-ben{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;bottom:0;left:0;width:var(--rong-ben);background:var(--nen-the);border-right:1px solid var(--vien-day);padding:18px 12px 12px;overflow-y:auto;z-index:6}
  .thanh-ben .logo-ben{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;font-size:17px;font-weight:700;color:var(--chu);text-decoration:none}
  .thanh-ben .o-logo{width:36px;height:36px;border-radius:11px;background:var(--tim-nen-icon);display:flex;align-items:center;justify-content:center}
  .thanh-ben .o-logo img{width:28px;height:28px}
  .thanh-ben a.muc{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--chu-mo);font-size:15px;font-weight:500;text-decoration:none}
  .thanh-ben a.muc:hover{background:var(--tim-nen-nhe);color:var(--chu)}
  .thanh-ben a.muc[aria-current="page"]{background:var(--tim-avatar);color:var(--chu-tren-nhan);font-weight:700}
  .thanh-ben a:focus-visible,.thanh-ben button:focus-visible{outline:3px solid var(--nhan-vua);outline-offset:2px}
  .thanh-ben .nhan-nhom{padding:18px 12px 6px}
  .thanh-ben .chan-ben{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--vien-day);display:flex;align-items:center;justify-content:space-between;gap:8px}

  .man{max-width:880px;padding:12px 40px 48px}
  .man.con{padding-bottom:140px}
  .man.may-tinh{max-width:var(--rong-may-tinh)}
  .man.luoi-pc{max-width:1200px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  .man.luoi-pc>.dau-man,.man.luoi-pc>.dau-con,.man.luoi-pc>p,.man.luoi-pc>.ca-hang,.man.luoi-pc>.trong{grid-column:1/-1}
  .dau-man h1{font-size:30px}

  #app.co-ben .thanh-day{left:var(--rong-ben)}
  body:has(#app.co-ben) .xac-nhan{left:calc(var(--rong-ben) + 24px);bottom:24px}
  body:has(#app.co-ben .thanh-day) .xac-nhan{bottom:120px}
  .lop-phu{align-items:center}
  .tam-truot{max-width:560px;border-radius:20px;max-height:85vh}
  .tam-truot .thanh-keo{display:none}
  .dong:hover{background:var(--tim-hang)}
}
@media (min-width:1440px){
  .man.luoi-pc{max-width:1320px}
}