/* ════════════════════════════════════════════════════════════════════════════
   VĂN PHÒNG SỐ — QUY CHUẨN GIAO DIỆN v2.3 (NV-QT-3 Phase 2B, 19/09/2026 — chép từ bản phác đã duyệt vp3.css)
   ⛔ Không đặt màu, cỡ chữ, khoảng cách, bo góc bằng số trần ở dưới phần TOKENS.
      Mọi giá trị lấy từ biến trong khối :root này. Xem quy-chuan-giao-dien.md.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── 1. MÀU NỀN TẢNG (cùng nhà với Hệ sinh thái số) ── */
  --nen:        #eef1f5;   /* Nền app — trùng --bg của tcntn */
  --be-mat:     #ffffff;   /* Bề mặt: thẻ, bảng, hộp thoại, thanh đầu */
  --be-mat-2:   #f7f8fa;   /* Bề mặt lõm: dòng rê chuột, nền sơ đồ, vùng phụ */
  --chu:        #1f2430;   /* Chữ chính — trùng tcntn */
  --chu-phu:    #5b6472;   /* Chữ phụ — đậm hơn #6b7280 của tcntn để đạt 5,3:1 trên nền */
  --vien:       #e2e5ea;   /* Viền mảnh — trùng tcntn */
  --vien-dam:   #c5ccd6;   /* Viền ô nhập, nút phụ */

  /* ── 2. MÀU NHẬN DIỆN: MẬN (mực tím) ── */
  --mau:        #8a2468;   /* Nút chính, mục menu đang chọn, liên kết, viền tập trung */
  --mau-dam:    #5e1a4a;   /* Rê chuột / bấm nút chính */
  --mau-nhat:   #f8e8f1;   /* Nền mục menu đang chọn, chip đang chọn */
  --mau-vien:   #e6c3d8;   /* Viền của vùng nền nhạt */
  --tap-trung:  0 0 0 3px rgba(138,36,104,.32);   /* vòng tập trung bàn phím */

  /* ── 3. MÀU TRẠNG THÁI — một trạng thái một màu, dùng ở nhãn, sơ đồ, Kanban ── */
  --tt-cho:        #854d0e; --tt-cho-nen:  #fef9c3; --tt-cho-dam:  #ca8a04;   /* Chờ xử lý */
  --tt-dang:       #1d4ed8; --tt-dang-nen: #dbeafe; --tt-dang-dam: #2563eb;   /* Đang xử lý */
  --tt-qua:        #b91c1c; --tt-qua-nen:  #fee2e2; --tt-qua-dam:  #dc2626;   /* Quá hạn */
  --tt-xong:       #15803d; --tt-xong-nen: #dcfce7; --tt-xong-dam: #16a34a;   /* Hoàn thành */
  --tt-tra:        #c2410c; --tt-tra-nen:  #ffedd5; --tt-tra-dam:  #ea580c;   /* Bị trả lại */
  --tt-tc:         #334155; --tt-tc-nen:   #e2e8f0; --tt-tc-dam:   #475569;   /* Từ chối */
  --tt-thu:        #0e7490; --tt-thu-nen:  #cffafe; --tt-thu-dam:  #0891b2;   /* Thử nghiệm */
  --tt-loi:        #6d28d9; --tt-loi-nen:  #ede9fe; --tt-loi-dam:  #7c3aed;   /* Tạm dừng – lỗi cấu hình */
  --tt-trung:      #4b5563; --tt-trung-nen:#f1f3f6;                           /* Trung tính: Nháp, Chưa tới lượt, Cũ, Sắp có */

  /* ── 4. CHỮ ── */
  --phong: 'Be Vietnam Pro', system-ui, sans-serif;
  --c12: 12px; --c13: 13px; --c14: 14px; --c16: 16px; --c20: 20px; --c24: 24px;
  --d-thuong: 400; --d-vua: 600; --d-dam: 700;
  --dong: 1.5; --dong-gon: 1.3;
  --doc: 60ch;               /* độ rộng tối đa khối chữ: ≈ 75–80 ký tự tiếng Việt */

  /* ── 5. KHOẢNG CÁCH (thang 4/8) ── */
  --k4: 4px; --k8: 8px; --k12: 12px; --k16: 16px; --k24: 24px; --k32: 32px;

  /* ── 6. BO GÓC THEO CẤP ── */
  --bo-nho: 6px;    /* ô nhập, nút, chip vuông, ô trong bảng */
  --bo-vua: 10px;   /* thẻ, bảng, khối sơ đồ, thanh công cụ */
  --bo-lon: 16px;   /* hộp thoại, tấm trượt từ dưới lên */
  --bo-tron: 999px; /* nhãn trạng thái, chip lọc, huy hiệu số */

  /* ── 7. BÓNG — chỉ cho lớp nổi ── */
  --bong-noi: 0 8px 24px rgba(15,23,42,.16);          /* menu thả, gợi ý, thông báo nổi */
  --bong-hop: 0 24px 64px rgba(15,23,42,.28);         /* hộp thoại */

  /* ── 8. KÍCH THƯỚC KHUNG ── */
  --menu-rong: 288px; --menu-thu: 64px; --dau-cao: 64px; --day-cao: 60px; --cham: 44px;
  --chuyen: .16s;

  /* ── 9. MÀU LOẠI KHỐI TRÊN SƠ ĐỒ — ⛔ dùng màu trạng thái, phân biệt bằng biểu tượng ── */
  --k-nguoi: var(--mau);     /* Tạo lập · Ký số · Duyệt · Xử lý */
  --k-luong: #475569;        /* Rẽ nhánh · Song song */
  --k-ket:   #1f2430;        /* Kết thúc */
}
@media (prefers-reduced-motion: reduce){ :root{ --chuyen: 0s; } *{ animation:none !important; scroll-behavior:auto !important; } }

/* ════════ NỀN ════════ */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--nen);font-family:var(--phong);color:var(--chu);font-size:var(--c14);line-height:var(--dong);-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
a{color:var(--mau)}
:focus-visible{outline:none;box-shadow:var(--tap-trung)}
.an{display:none !important}
.chi-dien-thoai{display:none}
.chu-phu{color:var(--chu-phu)}
.c12{font-size:var(--c12)} .c13{font-size:var(--c13)}
.chi-doc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ════════ KHUNG APP ════════ */
.app{display:grid;grid-template-columns:var(--menu-rong) minmax(0,1fr);grid-template-rows:var(--dau-cao) 1fr;min-height:100vh}
.app.thu{grid-template-columns:var(--menu-thu) minmax(0,1fr)}
.app > .dau{grid-column:1 / -1}
.app > .than{grid-column:2}

/* Thanh menu trái */
.menu{background:var(--be-mat);border-right:1px solid var(--vien);display:flex;flex-direction:column;position:sticky;top:var(--dau-cao);height:calc(100vh - var(--dau-cao));overflow-y:auto}
.menu nav{padding:var(--k12) var(--k8);display:flex;flex-direction:column;gap:2px;flex:1}
.menu .nhom{font-size:var(--c12);font-weight:var(--d-vua);color:var(--chu-phu);padding:var(--k16) var(--k12) var(--k4)}
.menu .nhom:first-child{padding-top:var(--k4)}
.menu a{display:flex;align-items:center;gap:var(--k12);min-height:40px;padding:0 var(--k12);border-radius:var(--bo-nho);color:var(--chu);text-decoration:none;font-size:var(--c14);position:relative}
.menu a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu a i{font-size:20px;width:22px;text-align:center;color:var(--chu-phu);flex-shrink:0}
.menu a:hover{background:var(--be-mat-2)}
.menu a.on{background:var(--mau-nhat);color:var(--mau);font-weight:var(--d-vua)}
.menu a.on i{color:var(--mau)}
.menu a.on::before{content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--mau)}
.menu a .sap{margin-left:auto;font-size:11px;color:var(--chu-phu);background:var(--tt-trung-nen);border-radius:var(--bo-tron);padding:0 6px;font-weight:var(--d-thuong);white-space:nowrap;flex-shrink:0}
.menu a .so{margin-left:auto;font-size:var(--c12);font-weight:var(--d-dam);color:#fff;background:var(--mau);border-radius:var(--bo-tron);padding:0 7px;min-width:20px;text-align:center}
.menu .cuoi{border-top:1px solid var(--vien);padding:var(--k8)}
.menu .nut-thu{width:100%;justify-content:flex-start}
.app.thu .menu a span,.app.thu .menu a .sap,.app.thu .menu a .so,.app.thu .menu .nhom{display:none}
.app.thu .menu .nhom + a{margin-top:var(--k12)}
.app.thu .menu a{justify-content:center;padding:0}
.app.thu .menu .nut-thu span{display:none}
.app.thu .menu .nut-thu{justify-content:center}

/* Vùng chính */
.dau{height:var(--dau-cao);background:var(--be-mat);border-bottom:1px solid var(--vien);display:flex;align-items:center;gap:var(--k12);padding:0 var(--k24) 0 var(--k16);position:sticky;top:0;z-index:20}
/* Khối nhận diện — đồng bộ thanh đầu tcntn: logo tròn + dòng tên trường nhỏ + dòng tên app lớn.
   ⚠ NGOẠI LỆ CÓ CHỦ ĐÍCH về chữ in hoa: hai dòng này in hoa theo thể thức hành chính (tên cơ quan, tên hệ thống). */
.nhan-dien{display:flex;align-items:center;gap:var(--k12);text-decoration:none;color:inherit;min-width:0;flex-shrink:0}
.logo-truong{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;flex-shrink:0;box-shadow:0 0 0 1px var(--vien)}
.chu-nd{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.ten-truong{font-size:11px;font-weight:var(--d-vua);letter-spacing:.04em;text-transform:uppercase;color:var(--chu-phu);white-space:nowrap}
.ten-app{font-size:var(--c20);font-weight:var(--d-dam);letter-spacing:.03em;text-transform:uppercase;color:var(--mau);white-space:nowrap;margin-top:2px}
.dau .tim{flex:1;max-width:420px;margin-left:auto;position:relative}
.dau .tim i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--chu-phu);font-size:18px}
.dau .tim input{width:100%;height:36px;border:1px solid var(--vien);background:var(--be-mat-2);border-radius:var(--bo-nho);padding:0 var(--k12) 0 36px;font-size:var(--c14)}
.dau .tim input:focus{background:var(--be-mat);border-color:var(--mau);outline:none;box-shadow:var(--tap-trung)}
.nut-bt{width:40px;height:40px;border-radius:var(--bo-nho);border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--chu-phu);font-size:21px;position:relative;flex-shrink:0;text-decoration:none}
.nut-bt:hover{background:var(--be-mat-2);color:var(--chu)}
.nut-bt .cham-do{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--mau);border:2px solid var(--be-mat)}
.tai-khoan{display:flex;align-items:center;gap:var(--k8);padding:var(--k4) var(--k8) var(--k4) var(--k4);border-radius:var(--bo-tron);border:1px solid var(--vien);background:var(--be-mat);cursor:pointer}
.tai-khoan .anh{width:30px;height:30px;border-radius:50%;background:var(--mau-nhat);color:var(--mau);font-weight:var(--d-dam);font-size:var(--c12);display:flex;align-items:center;justify-content:center}
.tai-khoan b{font-size:var(--c13);font-weight:var(--d-vua);white-space:nowrap}
.than{padding:var(--k24);min-width:0}
.than.sat{padding:0}

/* Đầu trang nội dung (tiêu đề + nút "?" + nút chính) */
.tieu{margin-bottom:var(--k16)}
.dong-ten{display:flex;align-items:center;gap:var(--k8);margin-bottom:var(--k8)}
.dong-ten h1{font-size:var(--c20);font-weight:var(--d-dam);line-height:var(--dong-gon)}
.tieu .mo-ta{color:var(--chu-phu);font-size:var(--c13);max-width:var(--doc)}
.dong-ten .phai{margin-left:auto;display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap}

/* Thanh dưới (điện thoại) */
.day{display:none}

/* ════════ THÀNH PHẦN DÙNG CHUNG ════════ */
/* Nút: chính (mỗi màn chỉ 1) · phụ · nguy hiểm · chữ */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:var(--k8);min-height:38px;padding:0 var(--k16);border-radius:var(--bo-nho);
  border:1px solid var(--vien-dam);background:var(--be-mat);color:var(--chu);font-weight:var(--d-vua);font-size:var(--c14);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--chuyen)}
.nut i{font-size:18px}
.nut:hover{background:var(--be-mat-2)}
.nut.chinh{background:var(--mau);border-color:var(--mau);color:#fff}
.nut.chinh:hover{background:var(--mau-dam);border-color:var(--mau-dam)}
.nut.nguy{color:var(--tt-qua);border-color:#f0b4b4}
.nut.nguy:hover{background:var(--tt-qua-nen)}
.nut.nguy.dac{background:var(--tt-qua);border-color:var(--tt-qua);color:#fff}
.nut.chu{border-color:transparent;background:transparent;color:var(--mau);padding:0 var(--k8)}
.nut.chu:hover{background:var(--mau-nhat)}
.nut.nho{min-height:32px;padding:0 var(--k12);font-size:var(--c13)}
.nut.nho i{font-size:16px}
.nut:disabled{opacity:.5;cursor:not-allowed}
.nut .dem{background:var(--tt-qua);color:#fff;border-radius:var(--bo-tron);font-size:var(--c12);padding:0 6px;line-height:18px}
.nut-hd{width:32px;height:32px;border-radius:50%;border:1px solid var(--vien-dam);background:var(--be-mat);color:var(--chu-phu);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.nut-hd:hover{color:var(--mau);border-color:var(--mau)}

/* Ô nhập */
.nhan-o{display:block;font-size:var(--c13);font-weight:var(--d-vua);margin:var(--k12) 0 var(--k4)}
.nhan-o .bat-buoc{color:var(--tt-qua)}
.o{width:100%;min-height:38px;padding:var(--k8) var(--k12);border:1px solid var(--vien-dam);border-radius:var(--bo-nho);background:var(--be-mat);font-size:var(--c14)}
.o:focus{outline:none;border-color:var(--mau);box-shadow:var(--tap-trung)}
.o.sai{border-color:var(--tt-qua)}
textarea.o{min-height:84px;resize:vertical;line-height:var(--dong)}
.goi-y-o{font-size:var(--c12);color:var(--chu-phu);margin-top:var(--k4)}
.loi-o{font-size:var(--c12);color:var(--tt-qua);margin-top:var(--k4);display:flex;gap:var(--k4);align-items:center}
.o-ngay{max-width:160px}
.o-co-bieu{position:relative}
.o-co-bieu i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--chu-phu);font-size:18px;pointer-events:none}
.o-co-bieu .o{padding-left:36px}

/* Ô gợi ý tìm không dấu (thay <select>) */
.goi-y{position:relative}
.goi-y .ds{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--be-mat);border:1px solid var(--vien);border-radius:var(--bo-vua);box-shadow:var(--bong-noi);z-index:30;max-height:260px;overflow:auto;padding:var(--k4)}
.goi-y .ds div{padding:var(--k8) var(--k12);border-radius:var(--bo-nho);cursor:pointer;font-size:var(--c14)}
.goi-y .ds div:hover,.goi-y .ds div.sang{background:var(--mau-nhat)}
.goi-y .ds small{display:block;color:var(--chu-phu);font-size:var(--c12)}
.goi-y .ds .trong{color:var(--chu-phu);cursor:default}
.the-ng{display:inline-flex;align-items:center;gap:var(--k4);background:var(--be-mat-2);border:1px solid var(--vien);border-radius:var(--bo-tron);padding:2px 2px 2px var(--k12);font-size:var(--c13);margin:0 var(--k4) var(--k4) 0}
.the-ng button{border:none;background:transparent;width:24px;height:24px;border-radius:50%;cursor:pointer;color:var(--chu-phu)}
.the-ng button:hover{background:var(--vien)}
.the-ng .stt{font-size:var(--c12);color:var(--chu-phu);font-weight:var(--d-vua)}

/* Chip lọc (chọn một) */
.chips{display:flex;gap:var(--k8);flex-wrap:wrap}
.chips button{white-space:nowrap;flex-shrink:0;min-height:32px;border:1px solid var(--vien-dam);background:var(--be-mat);border-radius:var(--bo-tron);padding:0 var(--k12);font-size:var(--c13);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chips button:hover{border-color:var(--mau)}
.chips button.on{background:var(--mau-nhat);border-color:var(--mau);color:var(--mau);font-weight:var(--d-vua)}
.chips button .sl{font-size:var(--c12);color:var(--chu-phu);font-weight:var(--d-thuong)}
.chips button.on .sl{color:var(--mau)}

/* Nhãn trạng thái */
.tt{display:inline-flex;align-items:center;gap:6px;border-radius:var(--bo-tron);padding:2px 10px 2px 8px;font-size:var(--c12);font-weight:var(--d-vua);white-space:nowrap;line-height:20px}
.tt::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.tt.cho{color:var(--tt-cho);background:var(--tt-cho-nen)} .tt.cho::before{background:var(--tt-cho-dam)}
.tt.dang{color:var(--tt-dang);background:var(--tt-dang-nen)}
.tt.qua{color:var(--tt-qua);background:var(--tt-qua-nen)}
.tt.xong{color:var(--tt-xong);background:var(--tt-xong-nen)}
.tt.tra{color:var(--tt-tra);background:var(--tt-tra-nen)}
.tt.tc{color:var(--tt-tc);background:var(--tt-tc-nen)}
.tt.thu{color:var(--tt-thu);background:var(--tt-thu-nen)}
.tt.loi{color:var(--tt-loi);background:var(--tt-loi-nen)}
.tt.trung{color:var(--tt-trung);background:var(--tt-trung-nen)}
.nguon{display:inline-flex;align-items:center;gap:6px;font-size:var(--c13);color:var(--chu)}
.nguon i{font-size:16px;color:var(--chu-phu)}
.ma{font-size:var(--c12);font-weight:var(--d-vua);color:var(--chu-phu);background:var(--be-mat-2);border:1px solid var(--vien);border-radius:var(--bo-nho);padding:0 6px}

/* Thẻ nội dung (dùng khi thật sự là một khối riêng, không cắt mọi thứ thành thẻ) */
.khoi{background:var(--be-mat);border:1px solid var(--vien);border-radius:var(--bo-vua)}
.khoi-dau{display:flex;align-items:center;gap:var(--k12);padding:var(--k12) var(--k16);border-bottom:1px solid var(--vien);flex-wrap:wrap}
.khoi-dau h2{font-size:var(--c16);font-weight:var(--d-dam)}

/* Bảng (máy tính) ⇄ danh sách thẻ gọn (điện thoại) */
.bang{width:100%;border-collapse:collapse;font-size:var(--c14)}
.bang th{text-align:left;font-size:var(--c12);font-weight:var(--d-vua);color:var(--chu-phu);padding:var(--k8) var(--k16);border-bottom:1px solid var(--vien);white-space:nowrap;background:var(--be-mat-2)}
.bang td{padding:var(--k12) var(--k16);border-bottom:1px solid var(--vien);vertical-align:middle}
.bang tr:last-child td{border-bottom:none}
.bang tbody tr{cursor:pointer}
.bang tbody tr:hover td{background:var(--be-mat-2)}
.bang .ten-qt{font-weight:var(--d-vua)}
.bang-bao{overflow-x:auto}
.hop-than p,.bao > div,.man-trong p,.tk-phai p{max-width:var(--doc)}
.bang .phu-dong{font-size:var(--c12);color:var(--chu-phu)}
.bang td.gon{white-space:nowrap}
.bang td.so{text-align:right;font-variant-numeric:tabular-nums}
.bang th.so{text-align:right}
.ds-the{display:none}
.dong-the{display:flex;gap:var(--k12);padding:var(--k12) var(--k16);border-bottom:1px solid var(--vien);background:var(--be-mat);cursor:pointer;min-height:var(--cham)}
.dong-the:last-child{border-bottom:none}
.dong-the .giua{flex:1;min-width:0}
.dong-the .ten-qt{font-weight:var(--d-vua);line-height:var(--dong-gon)}
.dong-the .hang-phu{display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap;margin-top:6px;font-size:var(--c12);color:var(--chu-phu)}
.dong-the > i{color:var(--chu-phu);align-self:center;font-size:20px}

/* Hộp báo trong màn */
.bao{display:flex;gap:var(--k12);align-items:flex-start;border-radius:var(--bo-vua);padding:var(--k12) var(--k16);font-size:var(--c13);line-height:var(--dong)}
.bao i{font-size:20px;flex-shrink:0;margin-top:1px}
.bao b{font-weight:var(--d-vua)}
.bao.thong-tin{background:var(--be-mat-2);border:1px solid var(--vien);color:var(--chu)}
.bao.thong-tin i{color:var(--chu-phu)}
.bao.canh-bao{background:var(--tt-cho-nen);color:var(--tt-cho)}
.bao.loi{background:var(--tt-qua-nen);color:var(--tt-qua)}
.bao.xong{background:var(--tt-xong-nen);color:var(--tt-xong)}
.bao.tam-dung{background:var(--tt-loi-nen);color:var(--tt-loi)}

/* Trạng thái màn: đang tải (khung xương) · rỗng · lỗi · không có quyền · sắp có */
.xuong{background:linear-gradient(90deg,var(--be-mat-2) 0,#e9ecf1 40%,var(--be-mat-2) 80%);background-size:300% 100%;animation:xuong 1.4s ease-in-out infinite;border-radius:var(--bo-nho)}
@keyframes xuong{0%{background-position:100% 0}100%{background-position:0 0}}
.xuong.dong{height:14px;margin:var(--k8) 0}
.man-trong{max-width:460px;margin:var(--k32) auto;text-align:center;padding:var(--k24) var(--k16)}
.man-trong .bieu{width:64px;height:64px;border-radius:50%;margin:0 auto var(--k16);display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--be-mat);border:1px solid var(--vien);color:var(--chu-phu)}
.man-trong h2{font-size:var(--c16);font-weight:var(--d-dam);margin-bottom:var(--k8)}
.man-trong p{color:var(--chu-phu);font-size:var(--c14);margin-bottom:var(--k16)}
.man-trong .ds-sap{text-align:left;background:var(--be-mat);border:1px solid var(--vien);border-radius:var(--bo-vua);padding:var(--k12) var(--k16);margin:0 0 var(--k16);font-size:var(--c13)}
.man-trong .ds-sap li{margin:var(--k4) 0}
.man-trong .ds-sap ul{margin:0;padding-left:var(--k16)}
.man-trong.quyen .bieu{color:var(--tt-tc)}
.man-trong.loi .bieu{color:var(--tt-qua)}

/* Hộp thoại xác nhận · tấm trượt */
.phu-mo{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:var(--k16);z-index:60}
.hop{background:var(--be-mat);border-radius:var(--bo-lon);width:100%;max-width:480px;box-shadow:var(--bong-hop);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.hop-dau{display:flex;gap:var(--k12);align-items:flex-start;padding:var(--k24) var(--k24) 0}
.hop-dau h2{font-size:var(--c16);font-weight:var(--d-dam);line-height:var(--dong-gon);flex:1}
.hop-than{padding:var(--k12) var(--k24) 0;overflow:auto;font-size:var(--c14)}
.hop-than p{margin-bottom:var(--k8)}
.hop-chan{display:flex;gap:var(--k8);justify-content:flex-end;padding:var(--k24);flex-wrap:wrap}
.hop.rong{max-width:640px}

/* Thông báo nổi */
.noi{position:fixed;left:50%;bottom:var(--k24);transform:translateX(-50%);background:var(--chu);color:#fff;border-radius:var(--bo-vua);padding:var(--k12) var(--k16);font-size:var(--c14);
  z-index:80;box-shadow:var(--bong-noi);display:flex;gap:var(--k8);align-items:center;max-width:min(520px,calc(100vw - 32px));transition:opacity var(--chuyen)}
.noi i{font-size:18px;color:#86efac}
.noi.loi i{color:#fca5a5}

/* Thanh lọc */
.thanh-loc{display:flex;flex-direction:column;gap:var(--k12);margin-bottom:var(--k16)}
.thanh-loc .hang{display:flex;gap:var(--k12);align-items:center;flex-wrap:wrap}
.thanh-loc .nhan-loc{font-size:var(--c12);color:var(--chu-phu);font-weight:var(--d-vua);min-width:72px}
.thanh-loc .o-co-bieu{flex:1;min-width:220px;max-width:360px}

/* Phân trang, chân khối */
.chan-khoi{display:flex;align-items:center;gap:var(--k12);padding:var(--k12) var(--k16);border-top:1px solid var(--vien);font-size:var(--c13);color:var(--chu-phu)}

/* ════════ THIẾT KẾ QUY TRÌNH ════════ */
.tk{display:flex;flex-direction:column;height:calc(100vh - var(--dau-cao))}
.tk-thanh{display:flex;align-items:center;gap:var(--k12);padding:var(--k8) var(--k16);background:var(--be-mat);border-bottom:1px solid var(--vien);flex-wrap:wrap;min-height:56px}
.tk-thanh .tt-qt{display:flex;flex-direction:column;min-width:0}
.tk-thanh .tt-qt b{font-size:var(--c16);font-weight:var(--d-dam);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.tk-thanh .tt-qt span{font-size:var(--c12);color:var(--chu-phu);display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap}
.tk-thanh .nuts{margin-left:auto;display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap}
.tk-thanh .vach{width:1px;height:24px;background:var(--vien)}
.tk-3{flex:1;display:grid;grid-template-columns:232px minmax(0,1fr) 360px;min-height:0}
.tk-trai,.tk-phai{background:var(--be-mat);overflow:auto;min-height:0}
.tk-trai{border-right:1px solid var(--vien);padding:var(--k16) var(--k12)}
.tk-phai{border-left:1px solid var(--vien);padding:var(--k16)}
.tk-trai h3,.tk-phai .muc > h3,#phaiDT .muc > h3{font-size:var(--c12);font-weight:var(--d-vua);color:var(--chu-phu);margin:0 var(--k4) var(--k8)}
.dang-chay .tk-trai{opacity:.45;pointer-events:none}
.kh-muc{display:flex;gap:var(--k8);align-items:center;border:1px solid var(--vien);border-radius:var(--bo-nho);padding:var(--k8);margin-bottom:6px;cursor:grab;background:var(--be-mat);touch-action:none;user-select:none}
.kh-muc:hover{border-color:var(--vien-dam);background:var(--be-mat-2)}
.kh-muc.cam{border-color:var(--mau);background:var(--mau-nhat)}
.kh-muc .bieu{width:30px;height:30px;border-radius:var(--bo-nho);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;color:#fff;background:var(--mau)}
.kh-muc > div{min-width:0}
.kh-muc b,.kh-muc small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kh-muc b{font-size:var(--c13);font-weight:var(--d-vua);line-height:var(--dong-gon)}
.kh-muc small{font-size:var(--c12);color:var(--chu-phu);line-height:var(--dong-gon)}
.mau-ds button{display:flex;width:100%;align-items:center;gap:var(--k8);border:1px dashed var(--vien-dam);background:transparent;border-radius:var(--bo-nho);padding:var(--k8);margin-bottom:6px;cursor:pointer;font-size:var(--c13);text-align:left}
.mau-ds button:hover{border-color:var(--mau);color:var(--mau)}
.tk-giua{position:relative;min-width:0;display:flex;flex-direction:column}
.tk-cam-bao{position:absolute;left:50%;top:var(--k12);transform:translateX(-50%);background:var(--chu);color:#fff;border-radius:var(--bo-tron);padding:6px var(--k16);font-size:var(--c13);z-index:8;box-shadow:var(--bong-noi);white-space:nowrap}
#phaiDT .muc,.tk-phai .muc{border-top:1px solid var(--vien);padding-top:var(--k16);margin-top:var(--k16)}
#phaiDT .muc:first-child,.tk-phai .muc:first-child{border-top:none;padding-top:0;margin-top:0}
#phaiDT .dau-khoi,.tk-phai .dau-khoi{display:flex;align-items:center;gap:var(--k8);margin-bottom:var(--k4)}
#phaiDT .dau-khoi .bieu,.tk-phai .dau-khoi .bieu{width:28px;height:28px;border-radius:var(--bo-nho);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px}
#phaiDT .dau-khoi h2,.tk-phai .dau-khoi h2{font-size:var(--c16);font-weight:var(--d-dam)}
#phaiDT .chips,.tk-phai .chips{margin:var(--k4) 0 var(--k8)}
#phaiDT .chips button,.tk-phai .chips button{min-height:30px;font-size:var(--c12)}
.bang-khoa{width:100%;border-collapse:collapse;font-size:var(--c13)}
.bang-khoa td{padding:6px 4px;vertical-align:top;border-bottom:1px solid var(--vien)}
.bang-khoa .o{min-height:34px;padding:6px var(--k8);font-size:var(--c13)}
.ngoai-pb{display:flex;gap:var(--k8);align-items:flex-start;font-size:var(--c12);color:var(--chu-phu);background:var(--be-mat-2);border-radius:var(--bo-nho);padding:var(--k8);margin:var(--k8) 0}
.ngoai-pb i{font-size:16px;margin-top:1px}
.trang-mau{position:relative;width:100%;aspect-ratio:210/297;background:#fff;border:1px solid var(--vien-dam);border-radius:4px;overflow:hidden;
  background-image:repeating-linear-gradient(#fff 0 14px,#eef1f5 14px 15px);background-size:84% 60%;background-position:8% 10%;background-repeat:no-repeat}
.trang-mau .oky{position:absolute;border:1.5px dashed var(--vien-dam);border-radius:3px;font-size:10px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--be-mat-2);cursor:pointer;padding:1px;line-height:1.15;color:var(--chu-phu)}
.trang-mau .oky.cua-toi{border:2px solid var(--mau);background:var(--mau-nhat);color:var(--mau);font-weight:var(--d-dam)}
.trang-mau .oky.khac{background:#f1f3f6;color:#9aa3af;border-style:solid;border-color:var(--vien)}
.dong-dich{display:flex;gap:var(--k8);align-items:flex-start;flex-wrap:wrap;font-size:var(--c13);margin-bottom:var(--k12)}
.dong-dich .den{flex:1;min-width:150px}
.kq{font-weight:var(--d-vua);border-radius:var(--bo-tron);padding:1px 10px;font-size:var(--c12);border:1.5px solid;white-space:nowrap}
.kq.tiep{border-color:var(--tt-xong-dam);color:var(--tt-xong)}.kq.bo_sung{border-color:var(--tt-tra-dam);color:var(--tt-tra)}.kq.tu_choi{border-color:var(--tt-tc-dam);color:var(--tt-tc)}
.ds-loi div{padding:var(--k8) var(--k12);border-radius:var(--bo-nho);margin-bottom:6px;font-size:var(--c13);cursor:pointer;display:flex;gap:var(--k8);line-height:var(--dong)}
.ds-loi .loi{background:var(--tt-qua-nen);color:var(--tt-qua)}.ds-loi .canh_bao{background:var(--tt-cho-nen);color:var(--tt-cho)}
.ds-loi i{font-size:18px;margin-top:1px}
.nhat-ky{font-size:var(--c13);padding-left:var(--k16);margin:var(--k8) 0 0;line-height:1.6;max-height:220px;overflow:auto}
.nhanh-the{border:1px solid var(--vien);border-radius:var(--bo-nho);padding:var(--k8);margin-bottom:var(--k8);background:var(--be-mat-2)}
.hang{display:flex;gap:var(--k8);align-items:center;flex-wrap:wrap}
.dt-bao{margin:var(--k12) var(--k12) 0}
.dt-sd{flex:1;margin:var(--k12);min-height:420px}

/* ── Sơ đồ (lõi so-do.js) — màu đường = màu trạng thái ── */
.sd-nen{position:relative;overflow:hidden;background:var(--be-mat-2);background-image:radial-gradient(#d5dae2 1px,transparent 1px);background-size:20px 20px;touch-action:none;user-select:none;cursor:grab;flex:1}
.sd-nen.dang-keo-nen{cursor:grabbing}
.sd-lop{position:absolute;left:0;top:0;transform-origin:0 0}
.sd-day{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sd-day .tiep{stroke:var(--tt-xong-dam);stroke-width:2;fill:none}
.sd-day .bosung{stroke:var(--tt-tra-dam);stroke-width:2;fill:none;stroke-dasharray:6 4}
.sd-day .tuchoi{stroke:var(--tt-tc-dam);stroke-width:2;fill:none}
.sd-day .md{opacity:0;transition:opacity var(--chuyen)}
.sd-day .md.noi-bat,.hien-md .sd-day .md{opacity:.4}
.sd-day .coc{opacity:.55}
.sd-day .coc-chu{font-size:11px;font-family:var(--phong)}
.sd-day .xam{stroke:#cbd5e1 !important}
.sd-day .da-qua{stroke-width:3}
.sd-day .tam{stroke:var(--mau);stroke-width:2;stroke-dasharray:4 3;fill:none}
.sd-khoi{position:absolute;background:var(--be-mat);border:1px solid var(--vien-dam);border-left:4px solid var(--mau,#64748b);border-radius:var(--bo-vua);padding:6px 10px 12px;cursor:pointer;overflow:visible}
.sd-khoi:hover{border-color:#aab3bf}
.sd-khoi.chon{box-shadow:0 0 0 3px rgba(138,36,104,.35)}
.sd-khoi .l{font-size:var(--c12);font-weight:var(--d-vua);color:var(--chu-phu);display:flex;align-items:center;gap:4px}
.sd-khoi .l i{font-size:14px;color:var(--mau)}
.sd-khoi .t{font-weight:var(--d-dam);font-size:var(--c13);line-height:var(--dong-gon);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sd-khoi .n{font-size:var(--c12);color:var(--chu-phu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sd-khoi .sla{position:absolute;right:8px;top:6px;font-size:11px;color:var(--chu-phu);display:flex;align-items:center;gap:2px}
.sd-khoi.k-ket_thuc{border:1px solid var(--k-ket);border-radius:var(--bo-tron);text-align:center;padding:6px 10px;background:var(--k-ket);color:#fff}
.sd-khoi.k-kt_tu_choi{border:1px solid var(--tt-tc-dam);border-radius:var(--bo-tron);text-align:center;padding:6px 10px;background:var(--tt-tc-nen);color:var(--tt-tc);cursor:default}
.sd-khoi.k-thieu{border:2px dashed var(--tt-qua-dam);background:var(--tt-qua-nen);color:var(--tt-qua);text-align:center;cursor:default;border-radius:var(--bo-tron)}
.sd-khoi.co-loi::after,.sd-khoi.co-cb::after{content:'!';position:absolute;right:-9px;top:-9px;width:20px;height:20px;border-radius:50%;color:#fff;font-weight:var(--d-dam);font-size:12px;display:flex;align-items:center;justify-content:center}
.sd-khoi.co-loi::after{background:var(--tt-qua-dam)} .sd-khoi.co-cb::after{background:var(--tt-cho-dam)}
.sd-cong{position:absolute;height:20px;border-radius:var(--bo-tron);font-size:11px;font-weight:var(--d-vua);display:flex;align-items:center;justify-content:center;border:1.5px solid;background:var(--be-mat);white-space:nowrap;z-index:3}
.sd-cong.c-tiep{border-color:var(--tt-xong-dam);color:var(--tt-xong);cursor:help}
.sd-cong.c-bo_sung{border-color:var(--tt-tra-dam);color:var(--tt-tra);cursor:crosshair}
.sd-cong.c-tu_choi{border-color:var(--tt-tc-dam);color:var(--tt-tc);cursor:crosshair}
.sd-cong.c-bo_sung.ro{background:var(--tt-tra-nen)}.sd-cong.c-tu_choi.ro{background:var(--tt-tc-nen)}
.chi-xem .sd-cong{cursor:default}
.sd-nhan{position:absolute;transform:translateX(-50%);background:var(--be-mat);border:1px solid var(--vien-dam);border-radius:var(--bo-tron);font-size:var(--c12);font-weight:var(--d-vua);padding:2px 10px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;cursor:pointer;color:var(--chu)}
.sd-nhan.cl{border-style:dashed;color:var(--chu-phu)}
.sd-gop{position:absolute;transform:translate(-50%,-50%);border-radius:var(--bo-tron);color:#fff;font-size:11px;font-weight:var(--d-vua);padding:2px 10px;white-space:nowrap}
.sd-gop.tron{width:12px;height:12px;padding:0}
.sd-chen{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1.5px solid var(--vien-dam);background:var(--be-mat);color:var(--chu-phu);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.6;z-index:4;padding:0}
.sd-chen:hover,.sd-chen.sang{opacity:1;border-color:var(--mau);color:#fff;background:var(--mau)}
.dang-cam .sd-chen,.dang-keo-khoi .sd-chen{opacity:1;border-color:var(--mau);color:var(--mau);box-shadow:0 0 0 4px rgba(138,36,104,.14)}
.dang-cam .sd-chen:hover,.dang-keo-khoi .sd-chen.sang{background:var(--mau);color:#fff}
.chi-xem .sd-chen{display:none}
.sd-bat-dau{position:absolute;transform:translate(-50%,-50%);background:var(--tt-trung-nen);color:var(--tt-trung);font-size:11px;font-weight:var(--d-vua);border-radius:var(--bo-tron);padding:2px 10px}
.sd-khoi.st-xong{border-color:var(--tt-xong-dam);background:var(--tt-xong-nen)}
.sd-khoi.st-dang{border-color:var(--tt-dang-dam);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.sd-khoi.st-chua{opacity:.55}
.sd-khoi.st-bo{opacity:.35;filter:grayscale(1)}
.sd-khoi.st-loi{border-color:var(--tt-loi-dam);box-shadow:0 0 0 4px rgba(124,58,237,.18)}
.sd-khoi .dau-st{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
.sd-khoi.st-xong .dau-st{background:var(--tt-xong-dam)} .sd-khoi.st-dang .dau-st{background:var(--tt-dang-dam)}
.sd-khoi .han{font-size:11px;font-weight:var(--d-vua);color:var(--tt-cho);margin-top:2px}
.sd-dieu{position:absolute;right:var(--k12);top:var(--k12);display:flex;flex-direction:column;gap:6px;z-index:6}
.sd-dieu button{width:36px;height:36px;border-radius:var(--bo-nho);border:1px solid var(--vien);background:var(--be-mat);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--chu)}
.sd-dieu .muc{height:auto;font-size:11px;color:var(--chu-phu);padding:2px 0}
.sd-chu-giai{position:absolute;left:var(--k12);bottom:var(--k12);background:rgba(255,255,255,.95);border:1px solid var(--vien);border-radius:var(--bo-nho);padding:6px var(--k12);font-size:var(--c12);display:flex;gap:var(--k12);flex-wrap:wrap;z-index:6;max-width:calc(100% - 24px)}
.sd-chu-giai span{display:inline-flex;align-items:center;gap:6px}
.bong-ma{position:fixed;z-index:100;pointer-events:none;background:var(--be-mat);border:2px solid var(--mau);border-radius:var(--bo-vua);padding:var(--k8) var(--k12);font-size:var(--c13);font-weight:var(--d-vua);box-shadow:var(--bong-noi);transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px}

/* ════════ BỐ CỤC THEO KHỔ ════════ */
/* 768–1199: menu thu thành cột biểu tượng */
@media (max-width:1199px){
  .app{grid-template-columns:var(--menu-thu) minmax(0,1fr)}
  .app .menu a span,.app .menu a .sap,.app .menu a .so,.app .menu .nhom,.app .menu .nut-thu{display:none}
  .app .menu .nhom + a{margin-top:var(--k12)}
  .app .menu a{justify-content:center;padding:0}
  .tai-khoan b{display:none}
  .tai-khoan{padding:var(--k4)}
  .tk-3{grid-template-columns:232px minmax(0,1fr) 320px}
  .rong-moi{display:none}
}
/* < 900: bảng chuyển thành danh sách thẻ gọn */
@media (max-width:899px){ .bang-bao{display:none} .ds-the{display:block} }
/* < 1024: màn Thiết kế chỉ xem + sửa thuộc tính — thanh công cụ một hàng */
@media (max-width:1023px){
  .tk-thanh{flex-wrap:nowrap}
  .tk-thanh .tt-qt{flex:1;min-width:0}
  .tk-thanh .tt-qt b{max-width:none}
  .tk-thanh .nuts{flex-shrink:0}
}
/* < 768: điện thoại — thanh dưới, không menu trái */
@media (max-width:767px){
  :root{--dau-cao:56px}
  .app,.app.thu{display:block}
  .menu{display:none}
  .dau{padding:0 var(--k8) 0 var(--k12);gap:var(--k4)}
  .dau .tim{display:none}
  .nhan-dien{flex:1;gap:var(--k8)}
  .logo-truong{width:36px;height:36px}
  .ten-truong{display:none}
  .ten-app{font-size:18px;margin-top:0}
  .dong-ten h1{font-size:18px}
  .than{padding:var(--k16) var(--k16) calc(var(--day-cao) + var(--k24))}
  .than.sat{padding:0 0 var(--day-cao)}
  /* Dựng quy trình chỉ trên máy tính ⇒ ẩn nút tạo trên điện thoại (không nút nổi che nội dung) */
  .chi-may-tinh{display:none !important}
  .chi-dien-thoai{display:block;color:var(--chu-phu);font-size:var(--c13)}
  .ds-the{margin-bottom:var(--k24)}
  .day{display:flex;position:fixed;left:0;right:0;bottom:0;height:var(--day-cao);background:var(--be-mat);border-top:1px solid var(--vien);z-index:30;padding-bottom:env(safe-area-inset-bottom,0)}
  .day a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--chu-phu);text-decoration:none;position:relative;min-width:0}
  .day a i{font-size:22px}
  .day a.on{color:var(--mau);font-weight:var(--d-vua)}
  .day a.on::before{content:'';position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--mau)}
  .sd-chu-giai{display:none}
  .tk-thanh .tt-qt span > span:last-child:not(.tt){display:none}
  .phu-mo{align-items:flex-end;padding:0}
  .hop{border-radius:var(--bo-lon) var(--bo-lon) 0 0;max-width:none;max-height:88vh}
  .hop-dau{padding:var(--k16) var(--k16) 0}
  .hop-than{padding:var(--k12) var(--k16) 0}
  .hop-chan{padding:var(--k16)}
  .hop-chan .nut{flex:1;min-height:var(--cham)}
  .nut{min-height:var(--cham)}
  .nut.nho{min-height:36px}
  .chips button,#phaiDT .chips button{min-height:36px}
  /* Vùng bấm ≥ 44 px: nút nhỏ giữ dáng, mở rộng vùng bấm bằng lớp vô hình */
  .chips button,.nut-bt,.nut-hd,.nut.nho,.the-ng button{position:relative}
  .chips button::after,.nut.nho::after{content:'';position:absolute;inset:-4px 0}
  .nut-bt::after,.nut-hd::after,.the-ng button::after{content:'';position:absolute;inset:-10px}
  .nut-hd{width:36px;height:36px}
  .tai-khoan{padding:4px}
  .tai-khoan .anh{width:34px;height:34px}
  .thanh-loc .o-co-bieu{max-width:none;min-width:0}
  .thanh-loc .nhan-loc{display:none}
  .thanh-loc .hang{display:block}
  .chips.cuon{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--k16));padding:4px var(--k16);scrollbar-width:none;flex:1 1 100%;min-width:0;max-width:calc(100% + 2 * var(--k16))}
  .noi{bottom:calc(var(--day-cao) + var(--k16))}
  .tk{height:calc(100vh - var(--dau-cao) - var(--day-cao))}
  /* Thanh công cụ Thiết kế trên điện thoại: hàng 1 quay lại + tên, hàng 2 thông tin, nút về cuối hàng */
  .tk-thanh{flex-wrap:wrap;gap:var(--k4) var(--k8);padding:var(--k8) var(--k12)}
  .tk-thanh .tt-qt{flex:1 1 calc(100% - 56px)}
  .tk-thanh .tt-qt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--c14)}
  .tk-thanh .tt-qt span{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  .tk-thanh .nuts{width:100%;justify-content:flex-end}
}

/* ════════ BỔ SUNG APP THẬT (Phase 2B) — chỉ dùng biến ở trên ════════ */
.chips button:disabled{cursor:default;opacity:.8}
.chips button:disabled:hover{border-color:var(--vien-dam)}
.chips button.on:disabled:hover{border-color:var(--mau)}
.nut .ti-loader-2{animation:quay 1s linear infinite}
@keyframes quay{to{transform:rotate(360deg)}}
body > .man-trong{margin-top:12vh}
.sd-khoi.k-ket_thuc.st-xong{background:var(--tt-xong-dam);border-color:var(--tt-xong-dam);color:#fff}

/* ════════ NÚT ☰ + NGĂN KÉO MENU (< 1024 px) — góp ý 19/09: điện thoại cần menu trái ════════
   Cùng danh sách mục với thanh bên máy tính; nút ☰ (bên trái logo) và "Thêm" ở thanh dưới mở CÙNG ngăn kéo.
   Đóng: nền mờ · nút đóng · Esc · chọn một mục. Giảm chuyển động: --chuyen = 0s (khối :root phía trên). */
.nut-menu,.nk-nen,.ngan-keo{display:none}
@media (max-width:1023px){
  .app,.app.thu{grid-template-columns:minmax(0,1fr)}
  .app > .than{grid-column:1}
  .app > .menu{display:none}
  .nut-menu{display:inline-flex;width:var(--cham);height:var(--cham);color:var(--chu);margin-left:calc(-1 * var(--k8))}
  .nk-nen{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:50;opacity:0;visibility:hidden;transition:opacity var(--chuyen),visibility 0s linear var(--chuyen)}
  .nk-nen.mo{opacity:1;visibility:visible;transition:opacity var(--chuyen)}
  .ngan-keo{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;width:min(var(--menu-rong),calc(100vw - 56px));background:var(--be-mat);z-index:55;
    box-shadow:var(--bong-hop);transform:translateX(-100%);visibility:hidden;transition:transform var(--chuyen),visibility 0s linear var(--chuyen)}
  .ngan-keo.mo{transform:none;visibility:visible;transition:transform var(--chuyen)}
  .nk-dau{display:flex;align-items:center;gap:var(--k8);padding:var(--k8) var(--k4) var(--k8) var(--k16);border-bottom:1px solid var(--vien);min-height:var(--dau-cao)}
  .nk-dau .nhan-dien{flex:1;min-width:0}
  .nk-dau .ten-truong.hien{display:block;white-space:normal;line-height:var(--dong-gon)}
  .nk-dau .ten-app{font-size:var(--c20)}
  .nk-dong{width:var(--cham);height:var(--cham)}
  .menu-nk{flex:1;overflow-y:auto;padding:var(--k8);display:flex;flex-direction:column;gap:2px}
  .menu-nk .nhom{font-size:var(--c12);font-weight:var(--d-vua);color:var(--chu-phu);padding:var(--k16) var(--k12) var(--k4)}
  .menu-nk .nhom:first-child{padding-top:var(--k4)}
  .menu-nk a,.nk-cuoi a{display:flex;align-items:center;gap:var(--k12);min-height:var(--cham);padding:0 var(--k12);border-radius:var(--bo-nho);color:var(--chu);text-decoration:none;font-size:var(--c14);position:relative}
  .menu-nk a span,.nk-cuoi a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-nk a i,.nk-cuoi a i{font-size:20px;width:22px;text-align:center;color:var(--chu-phu);flex-shrink:0}
  .menu-nk a:hover,.nk-cuoi a:hover{background:var(--be-mat-2)}
  .menu-nk a.on{background:var(--mau-nhat);color:var(--mau);font-weight:var(--d-vua)}
  .menu-nk a.on i{color:var(--mau)}
  .menu-nk a .sap{margin-left:auto;font-size:11px;color:var(--chu-phu);background:var(--tt-trung-nen);border-radius:var(--bo-tron);padding:0 6px;font-weight:var(--d-thuong);white-space:nowrap;flex-shrink:0}
  .menu-nk a .so{margin-left:auto;font-size:var(--c12);font-weight:var(--d-dam);color:#fff;background:var(--mau);border-radius:var(--bo-tron);padding:0 7px;min-width:20px;text-align:center}
  .nk-cuoi{border-top:1px solid var(--vien);padding:var(--k8) var(--k8) calc(var(--k8) + env(safe-area-inset-bottom,0))}
  body.khoa-cuon{overflow:hidden}
}
@media (max-width:767px){
  .nut-menu{margin-left:calc(-1 * var(--k4))}
  .nk-dau .ten-app{font-size:18px}
}