/* Giao dien khu QUAN TRI.
 *
 * Trang tra cuu (style.css) thiet ke cho DIEN THOAI cua phu huynh: chu to,
 * moi thu mot cot, nut chiem tron chieu ngang - bam bang ngon tay cho de.
 * Khu quan tri thi nguoc lai: dung tren MAN HINH MAY TINH, can nhin duoc
 * nhieu truong cung luc, thao tac bang chuot. Dung chung mot bo CSS nen truoc
 * day no vua thua vua dai.
 *
 * File nay nap SAU style.css va chi cho cac trang quan ly, de dieu chinh lai:
 *   - co chu goc nho hon (may tinh 16px thay vi 20px)
 *   - khung rong hon, bieu mau xep ngang
 *   - nut vua be, xep thanh hang
 *   - danh sach dung BANG thay vi the xep doc
 * Van dung chung bang mau voi trang tra cuu de hai ben nhin ra mot he.
 */

/* Co chu goc cua khu quan tri: 16px o MOI khổ man hinh.
   Trang tra cuu dung 17-20px cho phu huynh doc tren dien thoai; cong cu quan
   tri thi can nhin duoc nhieu du lieu mot luc nen giu 16px. */
html:has(body.quantri) { font-size: 16px; }
body.quantri { font-size: 1rem; }

body.quantri {
    --le-qt: 1.25rem;
    --vien-dam: #CBD5E1;
    --xam-nen: #F1F5F9;
}

/* ---------- Thanh tieu de + dieu huong ---------- */
body.quantri header.top { padding: 0.7rem var(--le-qt); }
body.quantri header.top .truong { font-size: 1.05rem; }
body.quantri header.top .nam { font-size: 0.8rem; }

body.quantri nav.thanh { padding: 0 var(--le-qt); gap: 0.25rem; }
body.quantri nav.thanh a {
    flex: 0 0 auto; text-align: left; padding: 0.65rem 1rem; font-size: 0.9rem;
}

body.quantri main { max-width: 72rem; padding: 1.4rem var(--le-qt) 3rem; }

/* ---------- Tieu de trang ---------- */
body.quantri h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
body.quantri h2 {
    font-size: 1.05rem; margin: 1.75rem 0 0.7rem;
    display: flex; align-items: baseline; gap: 0.5rem;
}
body.quantri h2 .dem {
    font-size: 0.8rem; font-weight: 600; color: var(--chu-mo);
    background: var(--xam-nen); border-radius: 999px; padding: 1px 9px;
}
body.quantri .phude { font-size: 0.9rem; margin-bottom: 1.1rem; }

/* ---------- The ---------- */
body.quantri .the { padding: 1.1rem 1.15rem; margin-bottom: 1rem; border-radius: 10px; }
body.quantri .the > .ten-khoi {
    font-size: 0.78rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--chu-mo); margin-bottom: 0.75rem;
    padding-bottom: 0.6rem; border-bottom: 1px solid var(--vien);
}
body.quantri .thong-tin { font-size: 0.9rem; line-height: 1.7; }

/* ---------- Bieu mau: xep NGANG thay vi doc ---------- */
body.quantri .hang-o {
    display: grid; gap: 0.85rem 1rem; align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
body.quantri .o label { margin-top: 0; }
body.quantri label { font-size: 0.82rem; margin: 0 0 0.3rem; color: var(--chu-mo); }

body.quantri input[type=text], body.quantri input[type=password],
body.quantri input[type=file], body.quantri select {
    padding: 0 0.65rem; border-radius: 7px; border-color: var(--vien-dam);
}
body.quantri input[type=file] { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
body.quantri input:focus, body.quantri select:focus {
    outline: 2px solid var(--xanh-nhat); outline-offset: -1px; border-color: var(--xanh-nhat);
}

/* MOI O DIEU KHIEN DUNG CHUNG MOT CHIEU CAO.
   Truoc day nut phu 35px, nut chinh 36px, lien ket 37px, o nhap 38px - dung
   canh nhau trong mot hang la thay ro so le. Nguyen nhan: co chu khac nhau va
   line-height cua the <a> thua ke tu body (1.5) trong khi <button> la 'normal'.
   Ghim chieu cao + line-height + co chu ve mot moi thi khong con lech. */
body.quantri button.chinh, body.quantri .nut-chinh,
body.quantri button.phu, body.quantri a.phu,
body.quantri input[type=text], body.quantri input[type=password],
body.quantri select {
    min-height: 2.25rem; line-height: 1.2; font-size: 0.9rem;
}

/* Nut: vua be, KHONG chiem tron chieu ngang, xep thanh hang */
body.quantri button.chinh, body.quantri .nut-chinh,
body.quantri button.phu, body.quantri a.phu {
    width: auto; display: inline-flex; align-items: center; justify-content: center;
    gap: 0.35rem; margin: 0; white-space: nowrap;
}
body.quantri button.chinh, body.quantri .nut-chinh {
    padding: 0 1.1rem; border-radius: 7px;
}
body.quantri button.phu, body.quantri a.phu {
    padding: 0 0.85rem; border-radius: 7px;
    border: 1px solid var(--vien-dam); background: var(--the);
    color: var(--chu); font-family: inherit; cursor: pointer;
    text-decoration: none;
}
body.quantri button.phu:hover, body.quantri a.phu:hover {
    border-color: var(--xanh-nhat); color: var(--xanh-nhat);
}
body.quantri button.chinh:hover { background: var(--xanh); }
body.quantri .nguy:hover { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }

/* ---------- Trang dang nhap: can giua, khung hep ---------- */
/* Khung HEP: trang dang nhap, trang goc hoi ma truong, trang bao loi.
   Day la nhung trang NGUOI NGOAI cung gap (phu huynh vao nham dia chi) nen
   nut chinh van chiem tron chieu ngang cho de bam bang ngon tay. */
body.quantri main.hep { max-width: 26rem; padding-top: 2.5rem; }
body.quantri main.hep .the { padding: 1.3rem; }
body.quantri main.hep button.chinh, body.quantri main.hep .nut-chinh {
    width: 100%; margin-top: 1rem; min-height: 2.75rem; font-size: 1rem;
}
body.quantri main.hep input[type=text], body.quantri main.hep input[type=password] {
    min-height: 2.75rem; font-size: 1rem;
}

body.quantri .hang-nut {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-top: 0.9rem;
}
body.quantri .hang-nut.sat { margin-top: 0; }
body.quantri .day-ra { margin-left: auto; }

/* ---------- Bang danh sach ---------- */
body.quantri table.ds {
    width: 100%; border-collapse: collapse; background: var(--the);
    border: 1px solid var(--vien); border-radius: 10px; overflow: hidden;
    box-shadow: var(--bk); font-size: 0.88rem;
}
body.quantri table.ds th {
    text-align: left; font-size: 0.74rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--chu-mo); font-weight: 700;
    padding: 0.6rem 0.8rem; background: var(--xam-nen);
    border-bottom: 1px solid var(--vien);
}
body.quantri table.ds td {
    padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--vien);
    vertical-align: middle;
}
body.quantri table.ds tr:last-child td { border-bottom: none; }
body.quantri table.ds tbody tr:hover { background: #FAFBFC; }
body.quantri table.ds td.phai { text-align: right; white-space: nowrap; }
body.quantri table.ds .ten-chinh { font-weight: 600; color: var(--chu); }
body.quantri table.ds .phu-nho {
    display: block; font-size: 0.78rem; color: var(--chu-mo); margin-top: 2px;
}
body.quantri code {
    background: var(--xam-nen); padding: 1px 6px; border-radius: 5px;
    font-size: 0.85em; font-family: "Cascadia Mono", Consolas, monospace;
    /* Ma ban quyen co dau gach ngang - khong cho ngat dong giua ma, doc rat kho */
    white-space: nowrap;
}
body.quantri table.ds td.thao-tac { white-space: nowrap; width: 1%; }
body.quantri table.ds td.thao-tac input[type=text] { width: 8.5rem; }
body.quantri table.ds .hang-nut { flex-wrap: nowrap; }

/* ---------- Huy hieu trang thai ---------- */
body.quantri .hh {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
body.quantri .hh.ok   { background: var(--xanh-ok); color: #15803D; }
body.quantri .hh.tat  { background: var(--do);      color: #B91C1C; }
body.quantri .hh.cho  { background: var(--vang);    color: #92400E; }
body.quantri .hh.mo   { background: var(--xam-nen); color: var(--chu-mo); }

/* ---------- Bo cuc hai cot cho trang chi tiet ---------- */
body.quantri .hai-cot {
    display: grid; gap: 1rem; align-items: start;
    grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
    body.quantri .hai-cot { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

/* ---------- Khong co gi ---------- */
body.quantri .trong {
    text-align: center; padding: 2.25rem 1rem; color: var(--chu-mo);
    background: var(--the); border: 1px dashed var(--vien-dam); border-radius: 10px;
}

/* ---------- Duong dan quay lai ---------- */
body.quantri .quay-lai {
    display: inline-block; margin-top: 1.5rem; font-size: 0.9rem; font-weight: 600;
}

/* Tren dien thoai: bang doi thanh the xep doc cho de doc */
@media (max-width: 45rem) {
    body.quantri table.ds, body.quantri table.ds tbody,
    body.quantri table.ds tr, body.quantri table.ds td { display: block; width: 100%; }
    body.quantri table.ds thead { display: none; }
    body.quantri table.ds tr {
        border-bottom: 1px solid var(--vien); padding: 0.9rem 0.8rem;
    }
    body.quantri table.ds td { border: none; padding: 0.18rem 0; }
    body.quantri table.ds td.phai { text-align: left; margin-top: 0.6rem; white-space: normal; }
    body.quantri table.ds td[data-nhan]::before {
        content: attr(data-nhan) ": "; font-size: 0.76rem; color: var(--chu-mo);
        text-transform: uppercase; letter-spacing: .04em;
    }
    body.quantri button.chinh, body.quantri button.phu { flex: 1 0 auto; }
}

/* ---------- O chep dia chi trang ----------
   Dat SAU @media vi trong do co luat 'button.phu { flex: 1 0 auto }' - nut chep
   ma gian ra theo luat do thi o dia chi bi bop lai con vai ky tu. Dung
   'button.phu' o day cho du manh de thang luat kia o moi khổ man hinh. */
body.quantri .o-chep {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem;
}
body.quantri .o-chep input[type=text] {
    flex: 1 1 9rem; min-width: 0; font-size: 0.82rem;
    background: var(--xam-nen); color: var(--chu-mo);
}
body.quantri .o-chep button.phu { flex: 0 0 auto; }
body.quantri button.phu.da-chep {
    border-color: #15803D; color: #15803D; background: var(--xanh-ok);
}