/* ============================================================
   SOẠN GIÁO ÁN 5512 — kiểu dáng (chép từ Nhà trọ của tôi 30/10/2026, màu nhấn chàm #4F46E5). Điện thoại trước, PC co giãn.
   Phần riêng cho giáo án ở cuối tệp.
   ============================================================ */
:root{
  --nhan:#4f46e5; --nhan-dam:#4338ca; --nhan-nhat:#e0e7ff; --nhan-nhat-2:#c7d2fe;
  --nen:#fff8ec; --be-mat:#ffffff; --be-mat-2:#fdf3e1; --vien:#f1e2c6; --vien-dam:#e3cfa6;
  --chu:#1f2937; --chu-2:#4b5563; --chu-3:#8b7f6b;
  --xanh-la:#16a34a; --do:#dc2626; --vang:#f59e0b; --tim:#7c3aed; --cam:#f97316;
  --bong-1:0 2px 10px rgba(120,90,30,.08); --bong-2:0 10px 30px rgba(120,90,30,.14);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--nen);color:var(--chu);font-size:16px;line-height:1.5;min-height:100vh;
  background-image:radial-gradient(circle at 12% 8%,#fff3d6 0,transparent 32%),radial-gradient(circle at 90% 20%,#e0f2fe 0,transparent 30%)}
a{color:var(--nhan-dam);text-decoration:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
img{max-width:100%}
[hidden]{display:none !important}

/* ---- thanh trên ---- */
.thanh{position:sticky;top:0;z-index:20;background:rgba(255,248,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--vien);
  display:flex;align-items:center;gap:10px;padding:8px 14px;height:58px}
.thanh .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--chu);letter-spacing:-.2px}
.thanh .logo img{width:36px;height:36px;border-radius:10px}
.thanh .logo small{display:block;font-size:11px;font-weight:600;color:var(--chu-3);line-height:1}
.thanh .giua{flex:1}
.thanh .nguoi{display:flex;align-items:center;gap:8px}
.avt{width:36px;height:36px;border-radius:50%;background:var(--nhan-nhat);color:var(--nhan-dam);display:grid;place-items:center;font-weight:800;overflow:hidden;border:2px solid #fff;box-shadow:var(--bong-1)}
.avt img{width:100%;height:100%;object-fit:cover}
.menu{position:absolute;right:12px;top:60px;background:#fff;border:1px solid var(--vien);border-radius:14px;box-shadow:var(--bong-2);min-width:230px;padding:6px;z-index:30}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:none;border-radius:10px;color:var(--chu);text-align:left;font-size:15px}
.menu a:hover,.menu button:hover{background:var(--nhan-nhat)}
.menu .ten{padding:8px 12px 4px;font-weight:700}
.menu .mail{padding:0 12px 8px;font-size:12.5px;color:var(--chu-3);border-bottom:1px solid var(--vien);margin-bottom:4px;word-break:break-all}

/* ---- khung nội dung ---- */
main{max-width:860px;margin:0 auto;padding:16px 16px 90px}
.the{background:var(--be-mat);border:1px solid var(--vien);border-radius:18px;padding:18px;box-shadow:var(--bong-1)}
.the+.the{margin-top:14px}
h1{font-size:30px;line-height:1.15;margin:0 0 10px;letter-spacing:-.3px}
h2{font-size:21px;margin:0 0 10px}
h3{font-size:17px;margin:0 0 8px}
p{margin:0 0 10px}
.mo{color:var(--chu-3);font-size:14px}
.nho{font-size:13.5px;color:var(--chu-2)}

/* ---- nút ---- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--vien-dam);background:#fff;color:var(--chu);
  border-radius:999px;padding:10px 18px;font-weight:700;font-size:15px;min-height:44px;transition:transform .08s,box-shadow .15s}
.nut:active{transform:scale(.97)}
.nut:disabled{opacity:.5;cursor:default}
.nut.chinh{background:var(--nhan);border-color:var(--nhan);color:#fff;box-shadow:0 6px 18px rgba(79,70,229,.35)}
.nut.chinh:hover{background:var(--nhan-dam)}
.nut.nhat{background:var(--nhan-nhat);border-color:var(--nhan-nhat-2);color:var(--nhan-dam)}
.nut.to{font-size:18px;padding:14px 26px;min-height:54px}
.nut.nho{font-size:13.5px;padding:6px 12px;min-height:34px}
.nut.cam{background:var(--cam);border-color:var(--cam);color:#fff}
.nut.do{color:var(--do);border-color:#fecaca;background:#fff5f5}
.hang-nut{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ---- chip trạng thái ---- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:700;background:var(--be-mat-2);color:var(--chu-2)}
.chip.dang_soan{background:#fef3c7;color:#92400e}
.chip.cho_ve{background:#ede9fe;color:#5b21b6}
.chip.xong{background:#dcfce7;color:#166534}
.chip.loi{background:#fee2e2;color:#991b1b}
.chip.moi{background:#fef3c7;color:#92400e}.chip.dang_in{background:#dbeafe;color:#1e40af}.chip.da_gui{background:#dcfce7;color:#166534}.chip.huy{background:#f3f4f6;color:#4b5563}

/* ---- ô nhập ---- */
.o{display:block;margin-bottom:14px}
.o label{display:block;font-weight:700;margin-bottom:5px;font-size:15px}
.o label small{font-weight:500;color:var(--chu-3)}
.o input,.o select,.o textarea{width:100%;border:1.5px solid var(--vien-dam);border-radius:12px;padding:11px 13px;font-size:16px;background:#fff;color:var(--chu);outline:none}
.o input:focus,.o select:focus,.o textarea:focus{border-color:var(--nhan);box-shadow:0 0 0 3px var(--nhan-nhat)}
.o textarea{min-height:76px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips button{border:1px solid var(--vien-dam);background:#fff;border-radius:999px;padding:5px 11px;font-size:13.5px;color:var(--chu-2)}
.chips button.on{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan-dam);font-weight:700}
.hai-cot{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.hai-cot{grid-template-columns:1fr}}
.loi-nho{color:var(--do);font-size:13.5px}

/* ---- trang chủ ---- */
.hero{text-align:center;padding:26px 10px 10px}
.hero .ten-lon{font-size:40px;font-weight:900;line-height:1.08;margin:6px 0 8px;letter-spacing:-.6px}
.hero .ten-lon b{color:var(--nhan)}
.hero p{font-size:17px;color:var(--chu-2);max-width:560px;margin:0 auto 18px}
.buoc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.buoc .b{background:#fff;border:1px solid var(--vien);border-radius:16px;padding:14px;text-align:center}
.buoc .b .so{width:40px;height:40px;border-radius:50%;background:var(--nhan);color:#fff;font-weight:900;display:grid;place-items:center;margin:0 auto 8px;font-size:18px}
.buoc .b b{display:block;margin-bottom:3px}
@media (max-width:600px){.buoc{grid-template-columns:1fr}}
.luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
@media (max-width:480px){.luoi{grid-template-columns:repeat(2,1fr);gap:10px}}
.the-truyen{background:#fff;border:1px solid var(--vien);border-radius:16px;overflow:hidden;box-shadow:var(--bong-1);display:flex;flex-direction:column;color:var(--chu);transition:transform .12s}
.the-truyen:hover{transform:translateY(-2px);box-shadow:var(--bong-2)}
.the-truyen .bia{aspect-ratio:1/1;background:var(--be-mat-2);display:grid;place-items:center;font-size:52px;overflow:hidden}
.the-truyen .bia img{width:100%;height:100%;object-fit:cover}
.the-truyen .than{padding:10px 12px 12px}
.the-truyen .than b{display:block;font-size:15px;line-height:1.3;margin-bottom:4px}
.trong{text-align:center;padding:30px 10px;color:var(--chu-3)}
.trong .bieu{font-size:54px;margin-bottom:6px}

/* ---- đang làm (chờ) ---- */
.tien-trinh{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.tien-trinh .m{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--be-mat-2);color:var(--chu-3)}
.tien-trinh .m.xong{background:#dcfce7;color:#166534}
.tien-trinh .m.dang{background:#fef3c7;color:#92400e}
.tien-trinh .m .ic{font-size:22px;width:30px;text-align:center}
@keyframes quay{to{transform:rotate(360deg)}}
.quay{display:inline-block;animation:quay 1.2s linear infinite}

/* ---- đọc truyện ---- */
.sach{max-width:620px;margin:0 auto}
.sach .trang{background:#fff;border:1px solid var(--vien);border-radius:22px;box-shadow:var(--bong-2);overflow:hidden}
.sach .hinh{aspect-ratio:1/1;background:var(--be-mat-2);display:grid;place-items:center;position:relative}
.sach .hinh img{width:100%;height:100%;object-fit:cover;display:block}
.sach .hinh .cho{font-size:60px;opacity:.5}
.sach .chu{padding:18px 22px 22px;font-size:22px;line-height:1.55;text-align:center;min-height:120px;font-weight:600}
.sach .chu.bia-ten{font-size:28px;font-weight:900;line-height:1.2}
.sach .chu .cau.dang{background:#fef3c7;border-radius:6px}
.sach .so-trang{text-align:center;font-size:13px;color:var(--chu-3);padding:0 0 12px}
.lat{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 6px}
.lat .cham{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.lat .cham i{width:8px;height:8px;border-radius:50%;background:var(--vien-dam);display:block}
.lat .cham i.on{background:var(--nhan);transform:scale(1.3)}
.lat button{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--vien-dam);background:#fff;font-size:24px;font-weight:900;color:var(--nhan-dam)}
.lat button:disabled{opacity:.35}
.cong-cu{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.cong-cu .nut{justify-content:flex-start}
@media (min-width:600px){.cong-cu{grid-template-columns:repeat(3,1fr)}}
.ke-thanh{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--vien);border-radius:14px;padding:8px 12px;margin-top:10px}
.ke-thanh .tt{flex:1;font-size:13.5px;color:var(--chu-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- hộp phủ (đăng nhập, xác nhận) ---- */
.lop{position:fixed;inset:0;background:rgba(40,30,10,.45);z-index:50;display:grid;place-items:center;padding:16px}
.hop{background:#fff;border-radius:20px;padding:22px;max-width:420px;width:100%;box-shadow:var(--bong-2);text-align:center}
.hop h3{font-size:20px;margin-bottom:6px}
.hop .dong{position:absolute;right:14px;top:10px;border:none;background:none;font-size:26px;color:var(--chu-3)}
#nutGoogle{display:flex;justify-content:center;min-height:44px;margin:14px 0 6px}

/* ---- bảng đơn / danh sách ---- */
.ds{display:flex;flex-direction:column;gap:10px}
.hang{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#fff;border:1px solid var(--vien);border-radius:14px}
.hang .anh-nho{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--be-mat-2);flex:none}
.hang .than{flex:1;min-width:0}
.hang .than b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- toast ---- */
#ga-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:11px 18px;border-radius:999px;
  font-size:14.5px;opacity:0;pointer-events:none;transition:.2s;z-index:99;max-width:92vw;text-align:center}
#ga-toast.hien{opacity:1;transform:translateX(-50%) translateY(0)}
#ga-toast.loi{background:var(--do)}

/* ---- chân trang ---- */
footer{text-align:center;color:var(--chu-3);font-size:12.5px;padding:10px 16px 24px}

/* ================= TRANG QUẢN TRỊ ================= */
.tab{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}
.tab button{border:1.5px solid var(--vien-dam);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;color:var(--chu-2)}
.tab button.on{background:var(--nhan);border-color:var(--nhan);color:#fff}
.tab button .dem{background:rgba(0,0,0,.12);border-radius:999px;padding:0 7px;margin-left:4px;font-size:12px}
.ad-truyen{background:#fff;border:1px solid var(--vien);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--bong-1)}
.ad-truyen .dau{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:8px}
.ad-truyen .dau b{font-size:17px}
.ad-truyen .thong-tin{font-size:13.5px;color:var(--chu-2);background:var(--be-mat-2);border-radius:10px;padding:8px 10px;margin:6px 0 10px}
.o-anh{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin:10px 0}
.o-anh .o1{position:relative;border:2px dashed var(--vien-dam);border-radius:12px;aspect-ratio:1/1;background:var(--be-mat-2);display:grid;place-items:center;overflow:hidden;cursor:pointer;text-align:center;font-size:13px;color:var(--chu-3)}
.o-anh .o1.co{border-style:solid;border-color:var(--xanh-la)}
.o-anh .o1 img{width:100%;height:100%;object-fit:cover}
.o-anh .o1 .nhan{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.55);color:#fff;border-radius:8px;padding:1px 7px;font-size:12px;font-weight:700}
.o-anh .o1 .xoa{position:absolute;right:4px;top:4px;background:rgba(220,38,38,.9);color:#fff;border:none;border-radius:8px;width:24px;height:24px;font-size:14px;line-height:1}
.o-anh .o1.keo{background:var(--nhan-nhat);border-color:var(--nhan)}
.o-anh .o1 .ve-lai{position:absolute;right:4px;bottom:4px;background:rgba(255,255,255,.92);border:1px solid var(--vien-dam);border-radius:8px;width:28px;height:26px;font-size:14px;line-height:1}
.o-anh .o1 .ve-lai.cho{background:#fef3c7;border-color:var(--vang)}
.loi-ve{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.gap{border:1px solid var(--vien);border-radius:12px;padding:8px 12px;margin-top:8px;background:#fff}
.gap summary{cursor:pointer;font-weight:700;color:var(--chu-2)}
.chu-truyen{font-size:14px;color:var(--chu-2)}
.chu-truyen .tr{padding:6px 0;border-bottom:1px dashed var(--vien)}
.chu-truyen .tr b{color:var(--nhan-dam)}
textarea.dan{width:100%;min-height:120px;border:1.5px solid var(--vien-dam);border-radius:12px;padding:10px;font-size:13px;font-family:ui-monospace,Menlo,Consolas,monospace}
.don{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.don .d1{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.don select{border:1.5px solid var(--vien-dam);border-radius:10px;padding:6px 8px}

/* ================= NHÀ TRỌ: bảng, thẻ phòng, phiếu in ================= */
.the-nha{display:block;background:#fff;border:1px solid var(--vien);border-radius:18px;padding:16px;box-shadow:var(--bong-1);color:var(--chu);margin-bottom:12px}
.the-nha b{font-size:18px}
.the-nha .so{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;font-size:14px;color:var(--chu-2)}
.luoi-phong{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:480px){.luoi-phong{grid-template-columns:repeat(2,1fr)}}
.phong{background:#fff;border:1.5px solid var(--vien);border-radius:14px;padding:12px;cursor:pointer;position:relative;min-height:104px}
.phong.trong{border-style:dashed;background:#fafaf5}
.phong.no{border-color:#fca5a5;background:#fff7f7}
.phong .ten{font-size:18px;font-weight:800}
.phong .gia{font-size:12.5px;color:var(--chu-3)}
.phong .kh{font-size:13.5px;margin-top:6px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phong .tt{position:absolute;right:8px;top:8px;font-size:11px;font-weight:700;border-radius:999px;padding:2px 7px;background:var(--be-mat-2);color:var(--chu-2)}
.phong.thue .tt{background:#dcfce7;color:#166534}.phong.no .tt{background:#fee2e2;color:#991b1b}
table.bang{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:12px;overflow:hidden}
table.bang th,table.bang td{padding:8px 8px;border-bottom:1px solid var(--vien);text-align:left;vertical-align:middle}
table.bang th{background:var(--be-mat-2);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--chu-2)}
table.bang td.so,table.bang th.so{text-align:right;white-space:nowrap}
table.bang input{width:90px;border:1.5px solid var(--vien-dam);border-radius:8px;padding:6px 8px;font-size:15px;text-align:right}
table.bang input.rong{width:150px;text-align:left}
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tong{font-size:18px;font-weight:800;color:var(--nhan-dam)}
.thang-chon{display:flex;align-items:center;gap:8px;margin:8px 0 12px}
.thang-chon b{font-size:17px;min-width:120px;text-align:center}
.thang-chon button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--vien-dam);background:#fff;font-weight:900}
.phieu{background:#fff;border:1px solid var(--vien);border-radius:16px;padding:20px;max-width:560px;margin:0 auto}
.phieu h2{text-align:center;margin:0 0 4px}
.phieu .d{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--vien)}
.phieu .d.t{border-bottom:none;font-size:19px;font-weight:900;color:var(--nhan-dam);margin-top:4px}
.phieu .qr{text-align:center;margin:14px 0 6px}
.phieu .qr img{width:230px;max-width:80%;border:1px solid var(--vien);border-radius:12px}
.van-ban{background:#fff;border:1px solid var(--vien);border-radius:16px;padding:28px 32px;max-width:800px;margin:0 auto;font-size:15px;line-height:1.7}
.van-ban h2{text-align:center;font-size:20px;margin:0 0 2px}
.van-ban .tam{text-align:center;color:var(--chu-2);margin-bottom:16px}
.van-ban h3{font-size:15.5px;margin:14px 0 4px}
.van-ban .ky{display:flex;justify-content:space-around;margin-top:30px;text-align:center}
.van-ban .ky div{min-width:200px}
.van-ban .ky i{display:block;font-size:12.5px;color:var(--chu-3);margin-bottom:60px}
.van-ban .o-ky{display:inline-block;min-width:160px;border-bottom:1px dotted var(--chu-3)}
.cot-thong-ke{display:flex;align-items:flex-end;gap:6px;height:120px;padding:8px 0}
.cot-thong-ke .c{flex:1;background:var(--nhan-nhat-2);border-radius:6px 6px 0 0;position:relative;min-width:18px}
.cot-thong-ke .c i{position:absolute;left:0;right:0;bottom:0;background:var(--nhan);border-radius:6px 6px 0 0}
.cot-thong-ke .c span{position:absolute;left:0;right:0;top:100%;font-size:10px;text-align:center;color:var(--chu-3);padding-top:3px}
.loai-phi{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.loai-phi input{flex:1;border:1.5px solid var(--vien-dam);border-radius:10px;padding:8px 10px}
.loai-phi select{border:1.5px solid var(--vien-dam);border-radius:10px;padding:8px}
@media print{
  .thanh,footer,.khong-in,#ga-toast{display:none !important}
  body{background:#fff !important}
  main{padding:0;max-width:none}
  .phieu,.van-ban{border:none;box-shadow:none;max-width:none;padding:0}
}

/* ============ SOẠN GIÁO ÁN — phần riêng (30/10/2026) ============ */
.ga-hang{color:var(--chu)}
.ga-hang:hover{border-color:var(--nhan-nhat-2);box-shadow:var(--bong-1)}
.ga-bieu{width:46px;height:46px;border-radius:12px;background:var(--nhan-nhat);display:grid;place-items:center;font-size:24px;flex:none}
.ga-ten{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-van-ban{font-family:"Times New Roman",Times,serif;font-size:17px;line-height:1.55}
.ga-van-ban h3{font-family:var(--font);font-size:17px;color:var(--nhan-dam);margin:18px 0 6px;letter-spacing:.2px}
.ga-van-ban h3:first-child{margin-top:0}
.ga-van-ban h4{font-family:var(--font);font-size:15.5px;margin:12px 0 4px}
.ga-van-ban ul,.ga-van-ban ol{margin:0 0 8px;padding-left:22px}
.ga-van-ban p{margin:0 0 6px}
.ga-hd{border-top:1px dashed var(--vien-dam);padding-top:10px;margin-top:12px}
.ga-bang{width:100%;border-collapse:collapse;margin:4px 0 6px;font-size:16px}
.ga-bang th{width:30%;text-align:left;vertical-align:top;background:var(--nhan-nhat);color:var(--nhan-dam);font-family:var(--font);font-size:13.5px;padding:8px;border:1px solid var(--nhan-nhat-2)}
.ga-bang td{vertical-align:top;padding:8px;border:1px solid var(--vien)}
.ga-phieu{border:1.5px solid var(--vien-dam);border-radius:12px;padding:10px 12px;margin:8px 0;background:#fffdf8}
.ga-dap-an{font-size:15px;color:var(--chu-2);margin:2px 0 6px}
@media (max-width:560px){.ga-bang th{width:38%}.ga-van-ban{font-size:16px}}