/* Kieu chung cho trang quan ly. Lam theo dung tong mau trang chu gialam.top:
   nen xam nhat, the trang bo tron, vien trai day mau. */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f4f5f7; color: #1f2328;
  padding: 24px 18px;
}
.hop { width: 100%; max-width: 760px; margin: 0 auto; }
.hop-hep { max-width: 400px; }
.dau { text-align: center; margin-bottom: 22px; }
.dau h1 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.2px; }
.dau p { margin: 0; color: #767e87; font-size: 13.5px; }

.the {
  background: #fff; border: 1px solid #e4e7ea; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  border-left: 4px solid var(--mau, #e91e63);
}
.the h2 { margin: 0 0 10px; font-size: 15px; }

label { display: block; font-size: 13px; color: #4b5563; margin-bottom: 6px; }
input[type=password], input[type=text], input[type=search] {
  width: 100%; padding: 11px 13px; font-size: 15px;
  border: 1px solid #d5d9de; border-radius: 10px; background: #fff;
  font-family: inherit;
  /* iPhone tu ve o tim kiem kieu bo tron cua no, khac han cac o nhap khac
     trong trang. Tat di cho ca trang chi co MOT kieu o nhap. */
  -webkit-appearance: none; appearance: none;
}
input:focus { outline: 2px solid #e91e6355; border-color: #e91e63; }

/* O nhap mat khau co CON MAT ben trong: bam mot cai la hien chu dang go, bam lan nua
   thi giau lai. Go mat khau dai ma khong nhin thay gi thi go sai hoai. */
.o-mat-khau { position: relative; }
.o-mat-khau input { padding-right: 48px; }
.o-mat-khau .nut-xem-mk {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: none; color: #8a919b; box-shadow: none;
}
.o-mat-khau .nut-xem-mk:hover { background: #f1f3f5; color: #4b5563; }
.o-mat-khau .nut-xem-mk svg { width: 20px; height: 20px; }
/* Dang hien thi gach mot duong cheo qua con mat cho biet */
.o-mat-khau .nut-xem-mk.dang-hien { color: #e91e63; }
.o-mat-khau .nut-xem-mk.dang-hien::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 50%;
  height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px;
}

button {
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 10px; border: 0;
  background: #e91e63; color: #fff; cursor: pointer;
}
button:hover { background: #d81b60; }
button.phu { background: #eef0f2; color: #374151; }
button.phu:hover { background: #e3e6e9; }
button:disabled { opacity: .5; cursor: default; }

/* Bang nhieu cot tren dien thoai thi cho truot ngang RIENG trong khung cua no,
   khong de day ca trang lech sang phai. */
.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cuon-ngang th, .cuon-ngang td { white-space: nowrap; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #eef0f2; }
th { color: #767e87; font-weight: 600; font-size: 12.5px; }
td.so { font-variant-numeric: tabular-nums; color: #4b5563; }

/* Bang "Dang phat": ten nhom va ten bai duoc phep xuong dong, hai cot hep ben
   phai thi khong, de "3 bai" khong bi be lam doi. Nho vay bon cot vua het be
   ngang dien thoai, khong phai vuot ngang moi thay cot cuoi. */
.bang-phat th, .bang-phat td.so, .bang-phat td.muc { white-space: nowrap; }
.bang-phat td.so { text-align: right; }

/* ------------------------------------------------- danh sach nhom cua bot nhac
   Ban dau de kieu bang ba cot. Ten nhom dai bi be lam hai ba dong trong khi cot
   ngay thang lai nam gon mot dong, moi hang moi cao mot kieu, nhin rat roi (chu
   du an keu 02/09/2026). Nay moi nhom MOT THE rieng: ten to ben trai, o tich to
   ben phai, mot dong chu nho o duoi. Hang nao cung cao bang nhau. */
.the-nhom {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #e4e7ea; border-radius: 12px;
  padding: 11px 8px 11px 14px; margin-bottom: 9px; background: #fff;
}
.the-nhom .phan-ten { flex: 1; min-width: 0; }
.the-nhom .ten-nhom { font-weight: 700; font-size: 14.8px; word-break: break-word; }
.the-nhom .ghi-chu { margin: 3px 0 0; }
/* Vung bam rong 44 diem quanh o tich: ngon tay cai cham khong truot. */
.the-nhom .o-tich {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; cursor: pointer;
}
.the-nhom input[type="checkbox"] {
  width: 26px; height: 26px; margin: 0; accent-color: #0e9f6e; cursor: pointer;
}
/* O tim nhom: cai kinh lup nam ben trong o, chu go bat dau sau no */
.o-tim { position: relative; margin-bottom: 10px; }
.o-tim svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: #8a919b; pointer-events: none;
}
.o-tim input { padding-left: 39px; }

/* Hang nut viec cua tung nhom thue (the "Quan tri bot"). Nut thuong to qua,
   nam canh nhau nam cai la tran ra ngoai man dien thoai. */
.the-nhom .viec-nhom {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.the-nhom .viec-nhom button {
  padding: 7px 11px; font-size: 12.5px; border-radius: 8px;
}

/* Nhom dang bi tat: nen do that nhat, de soi ra giua mot danh sach dai */
.the-nhom.tat { background: #fef7f7; border-color: #f2d6d6; }

.nhan { display: inline-block; font-size: 11.5px; font-weight: 700;
        padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.nhan.tot  { color: #065f46; background: #d1fae5; }
.nhan.cho  { color: #92400e; background: #fef3c7; }
.nhan.xau  { color: #991b1b; background: #fee2e2; }

.ghi-chu { color: #767e87; font-size: 12.8px; margin-top: 8px; line-height: 1.55; }
.loi { color: #991b1b; background: #fee2e2; padding: 10px 12px;
       border-radius: 10px; font-size: 13.5px; margin-bottom: 12px; }


/* ---------------------------------------------------- hang cho duyet anh */
.luoi-duyet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
              gap: 13px; margin-top: 6px; }
.the-duyet { border: 1px solid #e4e7ea; border-radius: 12px; overflow: hidden; background: #fff; }
.the-duyet img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
                 background: #eef0f2; }
.the-duyet .tin { padding: 9px 10px; font-size: 12.3px; color: #4b5563; line-height: 1.45; }
.the-duyet .viec { display: flex; gap: 6px; padding: 0 10px 10px; }
.the-duyet .viec button { flex: 1; padding: 8px 6px; font-size: 13px; border-radius: 8px; }
.the-duyet .viec .chan { background: #fee2e2; color: #991b1b; }
.the-duyet .viec .chan:hover { background: #fecaca; }
.the-duyet.xong { opacity: .4; }


/* -------------------------------------------------- xu ly nguoi bi bao xau */
.the-nguoi-bao { border: 1px solid #e4e7ea; border-radius: 12px; padding: 13px 15px;
                 margin-bottom: 11px; background: #fff; }
.the-nguoi-bao .dong-dau { display: flex; align-items: baseline; gap: 9px;
                           flex-wrap: wrap; margin-bottom: 9px; }
.the-nguoi-bao .ten-bi { font-weight: 700; font-size: 15px; }
.the-nguoi-bao .cau { background: #f7f8f9; border-radius: 9px; padding: 8px 11px;
                      font-size: 13.2px; margin-bottom: 6px; line-height: 1.5;
                      display: flex; gap: 10px; align-items: flex-start; }
.the-nguoi-bao .cau span { flex: 1; word-break: break-word; }
/* Tam anh bi bao xau. Nguoi quan ly PHAI nhin thay duoc thu minh dang go, khong thi
   chi bam mo. Nguoi quan ly dang dang nhap nen may chu cho xem ca anh chua duyet. */
.the-nguoi-bao .cau .anh-bao { max-width: 140px; max-height: 140px; border-radius: 8px;
                               display: block; object-fit: cover; }
.the-nguoi-bao .cau button { background: none; border: 0; color: #b91c1c; font-size: 12px;
                             font-weight: 600; cursor: pointer; font-family: inherit;
                             padding: 2px 4px; white-space: nowrap; }
.the-nguoi-bao .cac-viec { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.the-nguoi-bao .cac-viec button { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.the-nguoi-bao .cac-viec .an-di { background: #fef3c7; color: #92400e; }
.the-nguoi-bao .cac-viec .khoa  { background: #fee2e2; color: #991b1b; }
.the-nguoi-bao.xong { opacity: .4; }
.nhat-ky { font-size: 12.8px; color: #4b5563; line-height: 1.7; }
.nhat-ky div + div { border-top: 1px solid #f2f4f6; padding-top: 5px; margin-top: 5px; }


/* ============================================================================
   TRANG QUAN LY KIEU LUOI NUT  (01/09/2026)

   Truoc day moi cum nam trong mot the xep DOC, nen trang dai lê thê, muon xem
   anh cho duyet phai keo qua nam sau cum khac. Nay: mot luoi nut, bam nut nao
   thi cua so cua cum do mo de len, dong lai la ve luoi.

   Quy tac giu:
   - Nut phai cao it nhat 44 diem, ngon tay cham khong truot sang nut ben.
   - Vong sang quanh nut khi di bang ban phim PHAI thay duoc.
   - May nao dat "bot chuyen dong" thi khong chay hieu ung nao.
   ========================================================================= */

.dau-trang {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.dau-trang h1 { margin: 0; font-size: 20px; letter-spacing: -.2px; }
.dau-trang p { margin: 3px 0 0; color: #5c646d; font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------------- luoi cac nut */
.luoi-cum {
  display: grid; gap: 11px;
  /* 220 diem: tren may tinh vua dung BA cot hai hang, khong bi hang cuoi tro tren
     mot cot le. Tren dien thoai co luat rieng o cuoi file: hai cot. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.nut-cum {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  min-height: 112px; padding: 15px 15px 14px;
  background: #fff; color: #1f2328;
  border: 1px solid #e4e7ea; border-left: 4px solid var(--mau, #e91e63);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05);
  text-align: left; font-family: inherit; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.nut-cum:hover {
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16,24,40,.09); border-color: #d3d8dd;
}
.nut-cum:active { transform: translateY(0); }
.nut-cum:focus-visible { outline: 3px solid #e91e6366; outline-offset: 2px; }
.nut-cum .hinh {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--mau, #e91e63) 12%, #fff);
  color: var(--mau, #e91e63); flex: none;
}
.nut-cum .hinh svg { width: 19px; height: 19px; }
.nut-cum .ten { font-size: 15px; font-weight: 700; line-height: 1.25; }
.nut-cum .phu-de {
  font-size: 12.5px; color: #5c646d; font-weight: 400; line-height: 1.45;
  margin-top: -4px;
}
/* Cham so viec dang cho, dinh goc phai tren. Co CA SO CA CHU trong nhan de doc
   man hinh cung doc duoc, khong chi dua vao mau do. */
.nut-cum .cham {
  position: absolute; top: 11px; right: 11px;
  min-width: 23px; height: 23px; padding: 0 7px; border-radius: 12px;
  background: #dc2626; color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 23px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.nut-cum .cham.an { display: none; }

/* --------------------------------------------------------------- cua so cum */
.cua {
  width: min(760px, calc(100vw - 24px));
  max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: 16px;
  background: #fff; color: #1f2328;
  box-shadow: 0 24px 60px rgba(16,24,40,.26);
  overflow: hidden;
}
.cua::backdrop { background: rgba(15,23,42,.45); }
.cua .cua-dau {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: #fff; border-bottom: 1px solid #eceff2;
}
.cua .cua-dau h2 { margin: 0; font-size: 16px; flex: 1; }
.cua .cua-dau .vach { width: 4px; height: 20px; border-radius: 3px;
                      background: var(--mau, #e91e63); flex: none; }
.cua .dong-cua {
  width: 44px; height: 44px; padding: 0; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #f1f3f5; color: #374151; border-radius: 11px;
}
.cua .dong-cua:hover { background: #e5e8eb; }
.cua .dong-cua svg { width: 17px; height: 17px; }
.cua .cua-than {
  padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  max-height: calc(min(86vh, 900px) - 69px);
}
/* Trong cua so khong con the vien mau nua, thay bang khoi co duong ke ngan cach */
.khoi + .khoi { margin-top: 18px; padding-top: 18px; border-top: 1px solid #eef0f2; }
/* Khoi dung ngay sau mot doan chu (khong phai sau khoi khac) cung phai co
   khoang tho, khong thi tieu de dinh sat vao doan tren, nhin ra mot cuc. */
p + .khoi, div + .khoi:first-of-type {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #eef0f2;
}
.khoi h3 { margin: 0 0 8px; font-size: 14.5px; }

@media (max-width: 560px) {
  /* Tren dien thoai cua so DINH DAY man hinh nhu tam keo len, khong lo lung giua
     man. Tay cam dien thoai o duoi nen nut dong va cac nut viec deu trong tam ngon
     tay cai. */
  .cua { width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 16px 16px 0 0;
         margin: auto auto 0; }
  .cua .cua-than { max-height: calc(92vh - 69px); }
  /* Cua so cua bot nhac thi keo len HET man hinh, khong con he ho thay trang o
     duoi. Do cao lay theo 100dvh chu khong 100vh: tren dien thoai thanh dia chi
     truot len truot xuong, lay 100vh thi day cua so bi thut ra ngoai mep man. */
  .cua.het-man {
    height: 100vh; height: 100dvh;
    max-height: 100vh; max-height: 100dvh;
    border-radius: 0; margin: 0;
  }
  /* Phai co [open]: khong thi cua so DANG DONG cung hien ra giua trang, vi
     display cua minh de len cai display:none san co cua trinh duyet. */
  .cua.het-man[open] { display: flex; flex-direction: column; }
  .cua.het-man[open] .cua-than {
    flex: 1; min-height: 0; max-height: none;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .luoi-cum { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .nut-cum { min-height: 104px; padding: 13px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nut-cum { transition: none; }
  .nut-cum:hover { transform: none; }
}


/* ---------------------------------------------------- thanh the tren cung
   Trang quan ly chua HAI BO viec khong lien quan gi nhau: Yappchat va bot quan
   tri Telegram. Tach bang the chu khong don chung mot luoi: gop chung thi bam
   nham hoai, va sau nay muon tach hai bo ra hai may chu cung de. */
.thanh-the {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: #eceef1; padding: 5px; border-radius: 13px;
}
.thanh-the button {
  flex: 1; min-height: 44px; padding: 10px 12px;
  background: none; color: #5c646d; font-size: 14.5px; font-weight: 700;
  border-radius: 9px; transition: background .16s ease, color .16s ease;
}
.thanh-the button:hover { background: #e2e5e9; color: #374151; }
.thanh-the button.dang-xem {
  background: #fff; color: #1f2328;
  box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.thanh-the button:focus-visible { outline: 3px solid #e91e6366; outline-offset: 1px; }
.luoi-cum.an { display: none; }

/* Ba the tren dien thoai: chu 14.5 lam "Bot nghe nhac" xuong hai dong, thanh
   the cao len va lech. Thu nho chu mot chut cho vua mot dong. */
@media (max-width: 560px) {
  .thanh-the { gap: 3px; padding: 4px; }
  .thanh-the button { font-size: 12.8px; padding: 10px 6px; }
}

.cho-lam {
  background: #fff; border: 1px dashed #d3d8dd; border-radius: 14px;
  padding: 26px 20px; text-align: center; color: #5c646d; font-size: 13.5px;
  line-height: 1.6;
}
.cho-lam b { color: #1f2328; display: block; font-size: 15px; margin-bottom: 5px; }

@media (prefers-reduced-motion: reduce) { .thanh-the button { transition: none; } }


/* Nut chon file: the <input type=file> that bi giau di, cai nhin thay la cai
   nhan boc ngoai. Lam vay vi nut chon file goc moi trinh duyet ve mot kieu,
   khong the cho giong cac nut khac duoc. */
.nut-gia {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 14px; border-radius: 9px;
  background: #eef0f2; color: #374151;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.nut-gia:hover { background: #e3e6e9; }
label.phu:focus-within .nut-gia { outline: 3px solid #e91e6366; outline-offset: 2px; }


/* Khoi "dang dung cai gi" dat NGAY TREN o nhap. Bat buoc phai co: o nhap bi mat
   luon de trong (co y), nen khong co khoi nay thi nhin vao tuong chua dan gi. */
.dang-dung {
  background: #f7f8f9; border: 1px solid #eceff2; border-radius: 11px;
  padding: 11px 13px; margin: 0 0 12px;
}
.dang-dung .dong { font-size: 13.5px; color: #4b5563; }
.dang-dung .dong + .dong { margin-top: 7px; }
.dang-dung .dong b { margin-left: 4px; }


/* Bieu tuong nho dat truoc tieu de trong cua so. Khong co no thi mo cua so ra
   chi thay mot khoi chu, nhin khong ra dau la dau. */
h3 .hinh-nho {
  width: 16px; height: 16px; vertical-align: -2px; margin-right: 7px;
  color: var(--mau, #e91e63);
}
/* O da khoa: nhin la biet khong go duoc, khong phai bam thu moi biet */
input:disabled {
  background: #f4f5f7; color: #8a919b; cursor: not-allowed;
  border-style: dashed;
}

/* Nut xoa: mau do nhat, KHONG dung mau hong cua nut chinh. Hai nut cung mau
   thi nguoi ta bam nham cai xoa. */
button.khoa { background: #fee2e2; color: #991b1b; }
button.khoa:hover { background: #fecaca; }


/* ------------------------------------------------------------- thanh keo
   Do to cua loa: keo bang tay de hon go so. Con so hien ngay ben canh, va chi
   gui len may chu khi tha tay ra (xem phan chay). */
.thanh-keo { display: flex; align-items: center; gap: 13px; }
.thanh-keo input[type=range] {
  flex: 1; min-width: 140px; height: 34px; padding: 0;
  -webkit-appearance: none; appearance: none; background: none; border: 0;
}
.thanh-keo input[type=range]::-webkit-slider-runnable-track {
  height: 7px; border-radius: 4px; background: #e4e7ea;
}
.thanh-keo input[type=range]::-moz-range-track {
  height: 7px; border-radius: 4px; background: #e4e7ea;
}
/* Nut keo to 26 diem: ngon tay cham trung, khong phai nham nhi */
.thanh-keo input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9.5px; border-radius: 50%;
  background: #e91e63; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16,24,40,.3); cursor: pointer;
}
.thanh-keo input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e91e63; border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(16,24,40,.3); cursor: pointer;
}
.thanh-keo input[type=range]:focus-visible { outline: 3px solid #e91e6366; outline-offset: 4px; }
.thanh-keo output {
  min-width: 52px; text-align: center; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #f1f3f5; border-radius: 9px; padding: 6px 0;
}
.thanh-keo-moc {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #8a919b; margin: 4px 2px 0;
}