/* app.css — giao diện web bản 2 theo bản vẽ canvas 15/10/2026 (docs/thiet-ke-canvas/*.dc.html, 12 màn).
   Màu, khoảng cách, bo góc lấy từ style inline của các artboard thành biến ở :root. Font Be Vietnam Pro (Google Fonts),
   máy không có mạng thì dùng Segoe UI. Không thư viện. Trang chỉ có lớp CSS (CSP chặn style inline). */
:root {
  color-scheme: light;
  /* nền, mặt, chữ */
  --nen: #FBFBFD; --nen-2: #F5F6FA; --mat: #FFFFFF; --chu: #1B1F2A; --chu-2: #3A4150; --mo: #5B6270; --toi: #1F2430;
  /* viền */
  --vien: #E1E5EE; --vien-nhe: #E8EBF2; --vien-bang: #EEF0F5; --net-dut: #B8C0D4; --duong: #9AA3B5; --duong-nhat: #C9CFDB;
  /* màu chính (xanh dương) */
  --chinh: #2446C8; --chinh-dam: #1A338F; --chinh-nhat: #EEF2FF; --chinh-nhat-2: #E8EEFF; --chinh-vien: #C9D3F2; --chinh-chu: #1E3FA8;
  /* nền phụ */
  --cot: #F1F3F8; --xam: #F3F5F9; --xam-2: #F8F9FC; --xam-3: #EEF1F8;
  /* trạng thái (chip): xanh lá · cam · đỏ · tím · ngọc · hồng · vàng thẻ chủ */
  --xanh-nen: #E3F6EA; --xanh: #146A3A; --xanh-vien: #9ED39E;
  --cam-nen: #FFF1E3; --cam: #8A4B00; --cam-vien: #F0C58E;
  --do-nen: #FDE8E8; --do: #9B1C1C; --do-vien: #F5B5B5;
  --tim-nen: #EFEAFB; --tim: #3F2F7A; --tim-vien: #D9D0F3;
  --ngoc-nen: #E0F5F2; --ngoc: #0B6B5E;
  --hong-nen: #FDE7F0; --hong: #9B1C4E;
  --vang-nen: #FFFBEB; --vang-vien: #F0D58A; --vang: #B7791F; --vang-chu: #7A4E00; --vang-nhat: #FFF8EC; --vang-vien-2: #E5B96B;
  /* sơ đồ phòng ban */
  --ceo-nen: #FFF1EE; --ceo-vien: #E07A6A; --ceo: #B3382A; --kd-nen: #FBEFF5; --kd-vien: #C97DA6; --kd: #8E2A62;
  /* bo góc, bóng */
  --bo-the: 14px; --bo-o: 12px; --bo-nut: 10px; --bo-nho: 8px; --bo-chip: 6px;
  --bong: 0 6px 20px rgba(20, 24, 40, .06); --bong-nhe: 0 1px 2px rgba(20, 24, 40, .04); --bong-hop: 0 20px 60px rgba(20, 24, 40, .25);
  --font: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --rong-ben: 220px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--chu); font: 14px/1.45 var(--font); }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4 { font-size: 13px; }
p { margin: 0; }
a { color: var(--chinh); }
a:hover { color: var(--chinh-dam); }
code { font: 0.92em var(--mono); background: var(--xam); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #8DA2F0; outline-offset: 2px; }
[hidden] { display: none !important; }
.an { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mo { color: var(--mo); }
.nho { font-size: 12px; }
.dam { font-weight: 700; }

/* ---------- nút ---------- */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--mat); color: var(--chu); font: 600 13px/1.2 var(--font);
  cursor: pointer; text-decoration: none; white-space: nowrap; }
.nut:hover { border-color: var(--chinh-vien); background: var(--xam-2); color: var(--chu); }
.nut:disabled { opacity: .5; cursor: default; background: var(--mat); border-color: var(--vien); }
.nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #FFFFFF; }
.nut.chinh:hover { background: var(--chinh-dam); }
.nut.vien-xanh { border-color: var(--chinh-vien); }
.nut.nho { min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 9px; }
.nut.rat-nho { min-height: 30px; padding: 0 10px; font-size: 12px; border-radius: var(--bo-nho); }
.nut.nguy { background: var(--do); border-color: var(--do); color: #FFFFFF; }
.nut.nguy:hover { background: #7F1515; }
.nut.nguy-nhe { color: var(--do); border-color: var(--do-vien); }
.nut.nguy-nhe:hover { background: var(--do-nen); border-color: var(--do); }
.nut[aria-busy="true"], .dang-xu-ly { cursor: progress; }
.nut-chu { padding: 0; border: 0; background: none; font: 600 14px/1.4 var(--font); color: var(--chinh); text-align: left; cursor: pointer; }
.nut-chu:hover { text-decoration: underline; }

/* ---------- khung trang: thanh bên 220px (bản vẽ BoNao) ---------- */
.thuong-hieu { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.thuong-hieu b { font-size: 15px; }
.logo { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--chinh); }
.o-co-so { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--vien); border-radius: var(--bo-nut); font-size: 13px; line-height: 18px; }
.o-co-so span { color: var(--mo); font-size: 12px; }
.menu { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--bo-nut); color: var(--chu); text-decoration: none;
  font-size: 14px; line-height: 20px; }
.menu a:hover { background: var(--xam); color: var(--chu); }
.menu a[aria-current="page"] { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
.menu svg, .thanh-duoi svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu svg { display: none; }
.o-may { margin-top: auto; padding: 10px 12px; border-radius: var(--bo-nut); background: var(--xam); font-size: 12px; line-height: 17px; color: var(--chu-2); }
.o-may b { color: var(--xanh); }
.o-may b.do { color: var(--do); }
.o-may b.xam { color: var(--mo); }
.form-thoat { margin: 8px 0 0; padding: 0 2px; }
.form-thoat .nut { width: 100%; }
main { min-width: 0; padding: 18px 16px 96px; }
.man { display: flex; flex-direction: column; gap: 14px; max-width: 1400px; }
.dau-man { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tieu-de-man { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 360px; }
.tieu-de-man .mo { font-size: 13px; max-width: 820px; }
.than { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hang-nut { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }

/* thanh dưới (điện thoại) */
.thanh-duoi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--mat); border-top: 1px solid var(--vien); padding-bottom: env(safe-area-inset-bottom); }
.thanh-duoi a, .thanh-duoi button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px;
  padding: 0; border: 0; background: none; color: var(--mo); text-decoration: none; font: 600 11px var(--font); cursor: pointer; }
.thanh-duoi [aria-current="page"], .thanh-duoi [aria-expanded="true"] { color: var(--chinh); background: var(--chinh-nhat); }
.nen-menu { position: fixed; inset: 0; z-index: 40; background: rgba(20, 24, 40, .45); }

@media (max-width: 899px) {
  .ben { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(300px, 86vw); display: flex; flex-direction: column; gap: 6px;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); background: var(--mat); box-shadow: var(--bong-hop); overflow-y: auto;
    transform: translateX(-105%); transition: transform .2s ease; visibility: hidden; }
  body.menu-mo .ben { transform: none; visibility: visible; }
  body.menu-mo { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .ben { transition: none; } }
}
@media (min-width: 900px) {
  .khung { display: grid; grid-template-columns: var(--rong-ben) minmax(0, 1fr); min-height: 100vh; }
  .ben { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 20px 14px;
    background: var(--mat); border-right: 1px solid var(--vien-nhe); }
  .thanh-duoi, .nen-menu { display: none !important; }
  main { padding: 24px 32px 40px; }
}

/* ---------- 4 trạng thái chung ---------- */
.dang-tai { display: flex; flex-direction: column; gap: 10px; }
.xuong { background: linear-gradient(90deg, #ECEFF4, #F6F7FA, #ECEFF4); background-size: 200% 100%; border-radius: var(--bo-nut);
  animation: song 1.3s linear infinite; }
@keyframes song { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .xuong { animation: none; } }
.xuong-lich { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.xuong-lich .xuong { height: 72px; }
.xuong-cot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xuong-cot .xuong { height: 220px; border-radius: var(--bo-the); }
.xuong-bang, .xuong-cay { display: flex; flex-direction: column; gap: 8px; }
.xuong-bang .xuong { height: 44px; }
.xuong-cay .xuong { height: 30px; max-width: 360px; }
.xuong-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.xuong-the .xuong { height: 170px; border-radius: var(--bo-the); }
.xuong-do-thi { display: flex; flex-direction: column; gap: 14px; }
.xuong-do-thi .xuong { height: 320px; border-radius: var(--bo-the); }
.xuong-do-thi .xuong:last-child { height: 72px; max-width: 460px; align-self: center; width: 100%; }
.xuong-so-do { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.xuong-so-do .xuong { height: 200px; border-radius: var(--bo-o); }
.hop-loi { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px; background: var(--do-nen);
  border: 1px solid var(--do-vien); border-radius: var(--bo-the); color: #5A1010; }
.hop-loi.nho { padding: 12px 14px; gap: 6px; }
.loi-dau { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.loi-dau b { color: var(--do); font-size: 15px; }
.ma-loi { font: 600 12px var(--mono); color: var(--do); }
.cach-sua { color: #3A2A2A; }
.hop-trong { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 20px; background: var(--mat);
  border: 1px dashed var(--net-dut); border-radius: var(--bo-the); }
.hop-trong ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.hop-trong.nho { padding: 14px 16px; }
.canh-bao { padding: 10px 14px; background: var(--vang-nen); border: 1px solid var(--vang-vien); border-radius: var(--bo-o); color: var(--vang-chu); font-size: 13px; }
.canh-bao ul { margin: 4px 0 0; padding-left: 18px; }
.canh-bao.nho { padding: 8px 12px; font-size: 12px; }
.ghi-chu { font-size: 12px; color: var(--mo); }
.hop-xanh { padding: 12px 14px; background: #E8F6EE; border: 1px solid #A9DDBF; border-radius: var(--bo-o); color: #0F4D2A; }
.hop-ket-qua { display: flex; flex-direction: column; gap: 8px; }
.hop-su-that { padding: 10px 14px; background: var(--chinh-nhat-2); border: 1px solid var(--chinh-vien); border-radius: var(--bo-o); font-size: 12px; line-height: 17px; color: var(--chu); }
.hop-net-dut { padding: 12px 16px; background: var(--mat); border: 1px dashed var(--net-dut); border-radius: var(--bo-the); font-size: 13px; color: var(--chu-2); }
.chu-script { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.the-bao { position: fixed; left: 50%; bottom: 76px; z-index: 60; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px; background: var(--xanh); color: #FFFFFF; border-radius: var(--bo-o); box-shadow: 0 10px 30px rgba(20, 24, 40, .25);
  font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
@media (min-width: 900px) { .the-bao { bottom: 24px; } }

/* ---------- thẻ, nhãn ---------- */
.the { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); }
.the.nho { padding: 12px 14px; gap: 6px; }
.the.net-dut { border-style: dashed; border-color: var(--net-dut); }
.the.noi { border: 2px solid var(--chinh); background: var(--chinh-nhat-2); }
.the-dau-dong { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.the-dau-dong b { font-size: 14px; }
.the h2 { font-size: 15px; }
.luoi-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.luoi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.luoi-ben { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .luoi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .luoi-ben { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .luoi-2, .luoi-3 { grid-template-columns: minmax(0, 1fr); } }
.nhan-ds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nhan, .nhan-tt, .tag, .chip-tt { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 20px;
  background: var(--xam); color: var(--chu-2); white-space: nowrap; }
.nhan.mau { background: #FFF3C4; color: #6B4B00; }
.nhan.do, .chip-tt.do { background: var(--do-nen); color: var(--do); }
.nhan.con, .chip-tt.xanh { background: var(--xanh-nen); color: var(--xanh); }
.chip-tt.cam { background: var(--cam-nen); color: var(--cam); }
.chip-tt.xam { background: var(--xam-3); color: var(--chu-2); }
.chip-tt.lam { background: var(--chinh-nhat-2); color: var(--chinh-chu); }
.chip-tt.tim { background: var(--tim-nen); color: var(--tim); }
.chip-tt.toi { background: var(--toi); color: #FFFFFF; }
.cham-tt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--duong); }
.cham-tt.xanh { background: #1F8F3F; } .cham-tt.do { background: #D64545; } .cham-tt.xam { background: var(--duong); }
.chu-xanh { color: var(--xanh); font-weight: 600; } .chu-do { color: var(--do); font-weight: 600; } .chu-cam { color: var(--cam); font-weight: 600; }
.tt-nhap { background: var(--xam-3); color: var(--chu-2); }
.tt-kiem-dinh { background: var(--tim-nen); color: var(--tim); }
.tt-cho-duyet { background: #FFE8CC; color: #7A3E00; }
.tt-da-duyet { background: #E3EAFF; color: var(--chinh-chu); }
.tt-da-len-lich { background: var(--chinh); color: #FFFFFF; }
.tt-da-dang { background: #DDF3E5; color: var(--xanh); }
.tt-da-do { background: var(--xanh); color: #FFFFFF; }
.tt-tu-choi { background: #FDE0E0; color: var(--do); }
.tt-het-han { background: #F1F1F3; color: #6B7280; text-decoration: line-through; }
.tt-la { background: var(--xam); color: var(--chu-2); outline: 1px dashed var(--duong); }
.chu-giai { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chu-giai li { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip-loc { display: flex; flex-wrap: wrap; gap: 6px; }
.nut-tag { min-height: 32px; padding: 0 11px; border: 1px solid var(--vien); border-radius: 999px; background: var(--mat);
  font: 600 12px var(--font); color: var(--chu); cursor: pointer; }
.nut-tag:hover { border-color: var(--chinh-vien); }
.nut-tag[aria-pressed="true"] { background: var(--chinh); border-color: var(--chinh); color: #FFFFFF; }
.doan-tab { display: inline-flex; border: 1px solid var(--vien); border-radius: 999px; overflow: hidden; background: var(--mat); }
.doan-tab a, .doan-tab button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 0; background: none; color: var(--chu);
  font: 12px var(--font); text-decoration: none; cursor: pointer; }
.doan-tab [aria-current="page"], .doan-tab [aria-pressed="true"] { background: var(--chinh); color: #FFFFFF; font-weight: 600; }
.doan-tab .cam[aria-pressed="true"] { background: var(--cam-nen); color: var(--cam); }

/* ---------- lịch tháng ---------- */
.thanh-thang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ten-thang { min-width: 140px; text-align: center; font-size: 17px; }
.luoi-thang { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.thu { font-size: 12px; font-weight: 600; color: var(--mo); text-align: center; padding: 2px 0; }
.o-ngay { position: relative; min-height: 104px; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 6px; background: var(--mat);
  border: 1px solid var(--vien); border-radius: var(--bo-nut); }
.o-rong { background: transparent; border: 1px dashed var(--vien-nhe); }
.so-ngay { font-size: 12px; font-weight: 600; color: var(--mo); }
.hom-nay { border-color: var(--chinh); box-shadow: inset 0 0 0 1px var(--chinh); }
.hom-nay .so-ngay { color: var(--chinh); }
.chip { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%; min-height: 24px;
  padding: 3px 6px; border: 0; border-radius: var(--bo-chip); text-align: left; font: 600 11px/1.35 var(--font); overflow: hidden;
  overflow-wrap: anywhere; cursor: pointer; }
.chip:hover { filter: brightness(0.95); }
.chip .gio { font-variant-numeric: tabular-nums; }
.o-ngay .them { font-size: 11px; color: var(--mo); }
.cham-ds { display: none; }
.ds-thang { display: flex; flex-direction: column; gap: 8px; }
.ds-thang h4 { margin-top: 6px; color: var(--mo); font-size: 12px; }
.ds-bai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dong-bai { width: 100%; display: grid; grid-template-columns: 52px auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  min-height: 48px; padding: 8px 12px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-o); text-align: left;
  font: inherit; color: inherit; cursor: pointer; }
.dong-bai:hover { border-color: var(--chinh-vien); background: var(--xam-2); }
.dong-bai .gio { font-weight: 600; font-variant-numeric: tabular-nums; }
.dong-bai .nhan-tt { justify-self: start; }
.dong-bai .ten { font-weight: 600; overflow-wrap: anywhere; }
.dong-bai .phu { font-size: 12px; color: var(--mo); white-space: nowrap; }
@media (max-width: 640px) {
  .o-ngay { min-height: 50px; padding: 4px; border-radius: var(--bo-nho); }
  .o-ngay .chip, .o-ngay .them { display: none; }
  .cham-ds { display: flex; flex-wrap: wrap; gap: 3px; }
  .cham { width: 9px; height: 9px; border-radius: 50%; }
  .cham.tt-nhap { background: #8A93A6; } .cham.tt-kiem-dinh { background: #8A4FD6; } .cham.tt-cho-duyet { background: #D9741C; }
  .cham.tt-da-duyet { background: #5B7FEF; } .cham.tt-da-len-lich { background: var(--chinh); } .cham.tt-da-dang { background: #2FA05A; }
  .cham.tt-da-do { background: var(--xanh); } .cham.tt-tu-choi { background: #D64545; } .cham.tt-het-han { background: #C4C8D0; }
  .cham.tt-la { background: #4A5568; outline: 0; }
  .ten-thang { min-width: 0; flex: 1 1 100%; order: -1; text-align: left; }
  .dong-bai { grid-template-columns: auto minmax(0, 1fr); }
  .dong-bai .ten { grid-column: 1 / -1; }
}

/* ---------- Kế hoạch: Kanban (bản vẽ KeHoach) ---------- */
.dong-ngay { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mo); }
.dong-ngay b { color: var(--chu); }
.bang-viec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.cot-viec { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--cot); border-radius: var(--bo-the); min-width: 0; }
.cot-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 2px 4px; }
.cot-dau h2 { font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.cot-dau .dem { font-size: 12px; color: var(--mo); font-weight: 600; }
.cot-dau .mo { font-size: 11px; text-align: right; }
.cot-trong { padding: 14px 8px; text-align: center; color: var(--mo); font-size: 12px; border: 1px dashed var(--duong-nhat); border-radius: var(--bo-nut); }
.the-viec { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--mat); border: 1px solid var(--vien);
  border-left: 4px solid var(--chinh); border-radius: var(--bo-nut); }
.the-viec.chu-lam { background: var(--vang-nen); border-color: var(--vang-vien); border-left-color: var(--vang); }
.the-viec.da-xong { background: var(--mat); border-color: var(--vien); border-left-color: var(--duong); color: var(--mo); }
.the-dau { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.the-dau .ma { font: 600 11px var(--mono); color: var(--mo); }
.the-ten { font-weight: 600; overflow-wrap: anywhere; color: var(--chu); }
.the-meta { font-size: 11px; color: var(--mo); overflow-wrap: anywhere; }
.cham-pb { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--duong); }
.pb-nghien-cuu { background: #0E9F8A; } .pb-chien-luoc { background: #4A5568; } .pb-marketing { background: #D9741C; }
.pb-studio { background: #D63E7A; } .pb-xuat-ban { background: var(--chinh); } .pb-sale-cskh { background: #2F5BEA; }
.pb-van-hanh { background: #1F8F3F; } .pb-tai-chinh { background: var(--vang); } .pb-thu-ky { background: #8A4FD6; }
.pb-kiem-dinh { background: var(--do); } .pb-chu { background: var(--chu); }
.the-hanh-dong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--vien); }
.chon-cot { min-height: 34px; max-width: 100%; padding: 0 6px; border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--mat);
  font: 600 12px var(--font); color: var(--chu); }
.hoi-xoa { font-size: 12px; font-weight: 600; color: var(--do); }
@media (min-width: 900px) {   /* máy tính: hàng nút trên thẻ gọn một dòng như bản vẽ; điện thoại giữ nút cao 40px dễ chạm */
  .the-hanh-dong .nut.nho, .the-hanh-dong .nut.rat-nho { min-height: 30px; padding: 0 9px; font-size: 12px; border-radius: var(--bo-nho); }
  .the-hanh-dong .chon-cot { min-height: 30px; max-width: 112px; font-size: 12px; }
}
.the-viec[draggable="true"], .chip[draggable="true"], .dong-bai[draggable="true"] { cursor: grab; }
.dang-keo { opacity: .45; }
.cot-viec.keo-vao, .o-ngay.keo-vao { outline: 3px dashed var(--chinh); outline-offset: -3px; background: var(--chinh-nhat); }
.the-viec.dang-xu-ly, .bang-viec.dang-xu-ly { opacity: .6; }
.luoi-tuan-noi-dung { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; font-size: 12px; }
.o-tuan-nd { padding: 8px 10px; background: var(--xam-2); border-radius: var(--bo-nut); display: flex; flex-direction: column; gap: 2px; }
.o-tuan-nd.dang-chay { background: var(--chinh-nhat); border: 1px solid var(--chinh-vien); }
.o-tuan-nd ul { margin: 2px 0 0; padding-left: 16px; color: var(--mo); }
@media (max-width: 900px) {
  .bang-viec { grid-template-columns: repeat(4, minmax(78vw, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .cot-viec { scroll-snap-align: start; }
  .xuong-cot { grid-template-columns: minmax(0, 1fr); }
}
/* Kế hoạch: tuần */
.luoi-tuan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
.ngay-tuan { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 140px; padding: 8px; background: var(--cot); border-radius: var(--bo-o); }
.ngay-tuan.hom-nay { background: var(--chinh-nhat); box-shadow: inset 0 0 0 1px var(--chinh-vien); }
.ngay-tuan h3 { font-size: 12px; color: var(--mo); }
.ngay-tuan.hom-nay h3 { color: var(--chinh); }
.muc-tuan { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 6px 8px; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--mat);
  font: 12px/1.35 var(--font); color: var(--chu); text-align: left; overflow-wrap: anywhere; }
button.muc-tuan { cursor: pointer; }
button.muc-tuan:hover { border-color: var(--chinh-vien); }
.muc-tuan.chu-lam { background: var(--vang-nen); border-color: var(--vang-vien); }
.muc-tuan .the-meta { font-size: 11px; }
@media (max-width: 900px) { .luoi-tuan { grid-template-columns: minmax(0, 1fr); } .ngay-tuan { min-height: 0; } }

/* ---------- Khách (CRM) ---------- */
.loc-khach { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.loc-khach input[type="search"] { flex: 0 1 280px; width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut);
  font: 14px var(--font); background: var(--mat); color: var(--chu); }
.nhan-o { font-size: 12px; font-weight: 600; }
.crm-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.crm-ben { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.crm-ben .ho-so { max-height: calc(100vh - 120px); overflow: auto; }
.crm-ben .ho-so h2 { font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 1179px) { .crm-luoi { grid-template-columns: minmax(0, 1fr); } .crm-ben { display: none; } }
.khung-bang { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); overflow: hidden; }
.chan-bang { padding: 10px 14px; border-top: 1px solid var(--vien-nhe); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mo); }
.bang-khach { width: 100%; border-collapse: collapse; font-size: 13px; }
.bang-khach th { text-align: left; font-size: 12px; color: var(--mo); background: var(--xam); padding: 9px 12px; font-weight: 600; }
.bang-khach td { padding: 11px 12px; border-top: 1px solid var(--vien-bang); vertical-align: top; overflow-wrap: anywhere; }
.bang-khach td .tag { margin: 0 4px 4px 0; }
.dong-khach { position: relative; }
.dong-khach:hover, .dong-khach.dang-chon { background: var(--xam-2); }
.dong-khach .nut-chu::after { content: ''; position: absolute; inset: 0; }
.dong-khach .phu { display: block; font-size: 12px; color: var(--mo); font-weight: 400; }
.tag-dang-cham-soc { background: var(--cam-nen); color: var(--cam); } .tag-da-dat-lich { background: var(--tim-nen); color: var(--tim); }
.tag-da-den { background: var(--ngoc-nen); color: var(--ngoc); } .tag-da-mua-goi { background: var(--xanh-nen); color: var(--xanh); }
.tag-khach-cu { background: var(--chinh-nhat-2); color: var(--chinh-chu); } .tag-ngu { background: var(--xam-3); color: var(--chu-2); }
.tag-khong-lam-phien { background: var(--do-nen); color: var(--do); }
@media (max-width: 700px) {
  .bang-khach thead { display: none; }
  .bang-khach, .bang-khach tbody, .bang-khach tr, .bang-khach td { display: block; width: 100%; }
  .bang-khach tr { padding: 10px 14px; border-top: 1px solid var(--vien-bang); }
  .bang-khach tr:first-child { border-top: 0; }
  .bang-khach td { border: 0; padding: 2px 0; }
  .bang-khach td[data-cot]:not(:first-child)::before { content: attr(data-cot) ': '; color: var(--mo); font-size: 12px; }
}

/* ---------- Bộ não: đồ thị (bản vẽ BoNao) + cây ---------- */
.do-thi-khung { position: relative; padding: 4px 0 0; }   /* bản vẽ: đồ thị nằm thẳng trên nền trang, không khung */
.do-thi { display: block; width: 100%; height: auto; overflow: visible; }
.do-thi .duong-noi { stroke: var(--duong-nhat); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.do-thi .nhom-ngan { cursor: pointer; outline: none; }
.do-thi .nhom-ngan:focus-visible .vong-chon, .do-thi .nhom-ngan:hover .vong-chon { stroke: var(--chinh); stroke-width: 2; }
.do-thi .nhom-ngan.dang-chon .vong-chon { stroke: var(--chinh); stroke-width: 2.5; }
.do-thi .vong-chon { fill: transparent; stroke: transparent; }
.do-thi .ten-ngan { font: 700 13px var(--font); letter-spacing: .06em; fill: var(--chu); text-anchor: middle; }
.do-thi .phu-ngan { font: 12px var(--font); fill: var(--mo); text-anchor: middle; }
.do-thi .ten-tam { font: 600 13px var(--font); fill: var(--chinh); text-anchor: middle; }
.dai-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(520px, 100%); margin: 0 auto; background: var(--mat);
  border: 1px solid var(--vien); border-radius: var(--bo-the); box-shadow: var(--bong); overflow: hidden; }
.dai-so button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 72px; padding: 6px; border: 0;
  border-right: 1px solid var(--vien-nhe); background: none; font: inherit; color: var(--chu); cursor: pointer; }
.dai-so button:last-child { border-right: 0; }
.dai-so button:hover, .dai-so button[aria-pressed="true"] { background: var(--chinh-nhat); }
.dai-so b { font-size: 22px; }
.dai-so span { font-size: 11px; letter-spacing: .1em; color: var(--mo); text-align: center; }
.ghi-nap { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 17px; color: var(--mo); }
.ghi-nap b { color: var(--chu); }
.luoi-ngan { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.o-ngan { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--mat); border: 1px solid var(--vien); border-top: 4px solid var(--mau-ngan, var(--chinh));
  border-radius: var(--bo-o); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.o-ngan:hover { border-color: var(--chinh-vien); }
.o-ngan[aria-pressed="true"] { background: var(--chinh-nhat); border-color: var(--chinh); }
.o-ngan b { font-size: 14px; }
.ds-trang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ds-trang li { border-top: 1px solid var(--vien-bang); }
.ds-trang li:first-child { border-top: 0; }
.dong-trang { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--chu); cursor: pointer; }
.dong-trang:hover { background: var(--xam-2); }
.dong-trang .ten { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dong-trang .chip-tt { flex: none; }
.nao { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cay, .xem-tep { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); min-width: 0; }
.cay { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.cay h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mo); padding: 4px 6px; }
.cay ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.cay > ul { padding-left: 0; }
.cay summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 8px 6px; border-radius: var(--bo-nho); cursor: pointer; min-height: 40px; list-style: none; }
.cay summary::before { content: '›'; display: inline-block; width: 12px; color: var(--mo); transition: transform .15s; }
.cay details[open] > summary::before { transform: rotate(90deg); }
.cay summary::-webkit-details-marker { display: none; }
.cay summary:hover { background: var(--xam); }
.ten-nhanh { font-weight: 600; }
.cay summary .dem { margin-left: auto; font-size: 12px; color: var(--mo); }
.cay .trong { padding: 4px 8px 8px 26px; font-size: 12px; }
.tep { display: block; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--bo-nho); background: none; text-align: left;
  font: inherit; font-size: 13px; color: var(--chinh); cursor: pointer; overflow-wrap: anywhere; }
.tep:hover { background: var(--chinh-nhat); }
.tep.dang-mo { background: var(--chinh-nhat); font-weight: 600; }
.tep .mo { font-weight: 400; font-size: 12px; }
.tep.khong-xem { color: var(--mo); cursor: default; }
.tep.khong-xem:hover { background: none; }
.xem-tep { padding: 16px 18px; min-height: 260px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 12px; }
.xem-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.duong-dan { font: 600 13px var(--mono); overflow-wrap: anywhere; }
.goi-y { padding: 20px 0; }
@media (max-width: 900px) {
  .nao { grid-template-columns: minmax(0, 1fr); }
  .nao:not(.dang-xem) .xem-tep { display: none; }
  .nao.dang-xem .cay { display: none; }
}
@media (max-width: 640px) {
  .do-thi .ten-ngan { font-size: 22px; } .do-thi .phu-ngan { display: none; } .do-thi .ten-tam { font-size: 22px; }
}

/* ---------- Phòng ban (bản vẽ PhongBanLon) ---------- */
.so-do { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.o-chu { align-self: center; width: min(520px, 100%); padding: 10px 16px; background: var(--toi); color: #FFFFFF; border-radius: var(--bo-o); text-align: center; font-size: 12px; line-height: 17px; }
.o-chu b { font-size: 15px; letter-spacing: .04em; }
.o-chu .so-chu { display: block; margin-top: 4px; color: #C9D3F2; }
.noi-doc { align-self: center; width: 2px; height: 26px; background: var(--duong); }
.hang-tham-muu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
.o-tham-muu { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--bo-o); font-size: 12px; line-height: 17px; }
.o-tham-muu b.ten { font-size: 15px; }
.o-tham-muu.thu-ky { background: var(--vang-nhat); border: 1px solid var(--vang-vien-2); }
.o-tham-muu.ceo { background: var(--ceo-nen); border: 1px solid var(--ceo-vien); text-align: center; align-items: center; }
.o-tham-muu.ceo b.ten { font-size: 16px; }
.o-tham-muu.kiem-dinh { background: var(--kd-nen); border: 1px solid var(--kd-vien); }
.huy-hieu { align-self: flex-start; display: inline-block; padding: 1px 8px; border-radius: var(--bo-chip); color: #FFFFFF; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.ceo .huy-hieu { align-self: center; }
.huy-hieu.tm { background: var(--vang); } .huy-hieu.dp { background: var(--ceo); } .huy-hieu.kd { background: var(--kd); }
.thanh-ngang { height: 2px; background: var(--duong); margin: 24px 6% 0; position: relative; }
/* 8 phòng ban: một hàng 8 ô khi đủ rộng (bản vẽ), 4 + 4 trên máy tính thường, 2 cột trên điện thoại */
.luoi-phong { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .luoi-phong { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .luoi-phong { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 420px) { .luoi-phong { grid-template-columns: minmax(0, 1fr); } }
.o-phong { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 12px; background: var(--mat); border: 1px solid var(--vien); border-top: 4px solid var(--chinh);
  border-radius: var(--bo-o); font-size: 12px; line-height: 17px; }
.o-phong b.ten { font-size: 14px; }
.viec-chuan { display: block; padding: 3px 8px; border-radius: var(--bo-chip); background: var(--tim-nen); color: var(--tim); }
.khoi-phong { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--vien); }
.khoi-phong h3 { font-size: 11px; letter-spacing: .06em; color: var(--mo); text-transform: uppercase; }
.khoi-phong ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.chon-muc { display: flex; flex-direction: column; gap: 4px; }
.chon-muc select { min-height: 34px; padding: 0 6px; border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--mat); font: 600 12px var(--font); color: var(--chu); }
.chu-giai-pb { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; color: var(--chu-2); }
.chu-giai-pb i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.i-nguoi { background: var(--toi); } .i-dp { background: var(--ceo); } .i-tm { background: var(--vang); } .i-pb { background: var(--chinh); } .i-skill { background: var(--tim-vien); }
.hop-nguyen-tac { padding: 14px 18px; background: var(--mat); border: 1px solid var(--vien); border-left: 4px solid var(--vang); border-radius: var(--bo-o); font-size: 13px; line-height: 19px; color: var(--chu-2); }
@media (max-width: 900px) { .hang-tham-muu { grid-template-columns: minmax(0, 1fr); gap: 10px; } .o-tham-muu.ceo { order: -1; } .thanh-ngang { display: none; } }

/* ---------- Khảo sát (bản vẽ KhaoSat) ---------- */
.ks-luoi { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ks-luoi { grid-template-columns: minmax(0, 1fr); } }
.ks-nhom { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; font-size: 12px; }
.thanh-tien { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--xam-3); overflow: hidden; }
.thanh-tien i { display: block; height: 100%; background: var(--chinh); border-radius: 999px; }
progress.tien-do { width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--xam-3); appearance: none; }
progress.tien-do::-webkit-progress-bar { background: var(--xam-3); border-radius: 999px; }
progress.tien-do::-webkit-progress-value { background: var(--chinh); border-radius: 999px; }
progress.tien-do::-moz-progress-bar { background: var(--chinh); border-radius: 999px; }
.khung-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--xam); border: 1px solid var(--vien); border-radius: var(--bo-the); }
.bong-bot { align-self: flex-start; max-width: 92%; padding: 8px 11px; background: var(--mat); border: 1px solid var(--vien-nhe); border-radius: 12px 12px 12px 4px; }
.bong-chu { align-self: flex-end; max-width: 92%; padding: 8px 11px; background: #DCE7FF; border-radius: 12px 12px 4px 12px; overflow-wrap: anywhere; }
.ks-cau { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--vien-bang); }
.ks-cau:first-of-type { border-top: 0; }
.ks-cau .hoi { font-size: 13px; }
.ks-cau .tra { font-size: 13px; color: var(--chu-2); overflow-wrap: anywhere; }
.buoc { padding: 10px 12px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-o); font-size: 12px; line-height: 17px; }
details.mo-rong { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); }
details.mo-rong > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
details.mo-rong > summary::-webkit-details-marker { display: none; }
details.mo-rong > summary::after { content: '▾'; color: var(--mo); }
details.mo-rong[open] > summary::after { content: '▴'; }
details.mo-rong > .noi-dung-mo { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 17px; }
details.mo-rong.xanh-nhat { background: var(--chinh-nhat-2); border-color: var(--chinh-vien); }

/* ---------- Kết nối (bản vẽ KetNoi) ---------- */
.luoi-ket-noi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; font-size: 12px; line-height: 17px; }
@media (max-width: 1100px) { .luoi-ket-noi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .luoi-ket-noi { grid-template-columns: minmax(0, 1fr); } }
.the-ket-noi { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); min-width: 0; }
.the-ket-noi.do { border-color: var(--do-vien); }
.the-ket-noi.xanh { border-color: var(--xanh-vien); }
.dau-ket-noi { display: flex; align-items: center; gap: 10px; }
.bieu-tuong { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px; color: #FFFFFF; font-weight: 700; font-size: 13px; }
.bt-telegram { background: #2AABEE; } .bt-facebook { background: #1877F2; } .bt-zalo-oa { background: #0B5ED7; } .bt-soi-da { background: #8A4FD6; }
.bt-cong { background: #0E9F8A; } .bt-drive { background: #34A853; } .bt-them { background: #4A5568; }
.dau-ket-noi b { font-size: 14px; }
.chan-ket-noi { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cach-noi { padding: 8px 10px; background: var(--do-nen); border-radius: var(--bo-nho); color: #5A1010; white-space: pre-wrap; overflow-wrap: anywhere; }
.ket-qua-kiem { padding: 8px 10px; background: var(--xam-2); border-radius: var(--bo-nho); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--chu-2); max-height: 220px; overflow: auto; }

/* ---------- Hộp thư (bản vẽ HopThu): 3 cột ---------- */
.ht-luoi { display: grid; grid-template-columns: 300px minmax(0, 1fr) 250px; gap: 14px; align-items: start; font-size: 13px; line-height: 18px; }
.ht-ds, .ht-giua { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); overflow: hidden; min-width: 0; }
.ht-ds .chip-loc { padding: 10px 12px; border-bottom: 1px solid var(--vien-nhe); }
.ht-ds ul { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.dong-ht-ds { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--vien-bang); background: none;
  text-align: left; font: inherit; color: var(--chu); cursor: pointer; }
.dong-ht-ds:hover, .dong-ht-ds[aria-current="true"] { background: var(--xam-2); }
.dong-ht-ds .hang { display: flex; justify-content: space-between; gap: 8px; }
.dong-ht-ds .gio { font-size: 11px; color: var(--mo); white-space: nowrap; }
.dong-ht-ds .cuoi { color: var(--mo); overflow-wrap: anywhere; }
.ht-giua { display: flex; flex-direction: column; }
.ht-giua-dau { padding: 10px 14px; border-bottom: 1px solid var(--vien-nhe); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ht-giua-than { padding: 14px; background: var(--xam-2); display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; }
.ht-giua-chan { padding: 10px 14px; border-top: 1px solid var(--vien-nhe); }
.ht-ben { display: flex; flex-direction: column; gap: 10px; }
.nut-quay-lai { display: none; }
@media (max-width: 1250px) { .ht-luoi { grid-template-columns: 280px minmax(0, 1fr); } .ht-ben { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ht-luoi { grid-template-columns: minmax(0, 1fr); }
  .ht-ben { grid-template-columns: minmax(0, 1fr); }
  .ht-luoi:not(.dang-xem) .ht-giua, .ht-luoi:not(.dang-xem) .ht-ben { display: none; }
  .ht-luoi.dang-xem .ht-ds { display: none; }
  .nut-quay-lai { display: inline-flex; }
  .ht-giua-than { max-height: none; }
}
.hoi-thoai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dong-ht { padding: 8px 12px; border-radius: 12px; background: var(--xam); max-width: 92%; }
.dong-ht.khach { align-self: flex-start; background: var(--mat); border: 1px solid var(--vien-nhe); border-radius: 12px 12px 12px 4px; }
.dong-ht.bot { align-self: flex-end; background: var(--chinh-nhat); border: 1px dashed #9DB0F0; border-radius: 12px 12px 4px 12px; }
.dong-ht.chu { align-self: flex-end; background: var(--cam-nen); border-radius: 12px 12px 4px 12px; }
.dong-ht.he-thong { align-self: center; background: transparent; color: var(--mo); font-size: 12px; max-width: 100%; }
.dong-ht .ai-ht { font-size: 11px; font-weight: 600; margin-right: 6px; }
.dong-ht p { margin-top: 2px; overflow-wrap: anywhere; }
.khung-soan-ht { margin-top: 0; }
.goi-y-ht { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.nut-goi-y { text-align: left; padding: 8px 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--mat); font: 13px/1.45 var(--font); color: var(--chu); cursor: pointer; }
.nut-goi-y:hover { border-color: var(--chinh-vien); background: var(--xam-2); }

/* ---------- Studio (bản vẽ Studio) ---------- */
.mau-o { display: flex; gap: 6px; }
.mau-o span { flex: 1; height: 54px; border-radius: var(--bo-nho); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; text-align: center; }
.mau-o .net-dut { border: 1px dashed var(--net-dut); color: var(--mo); background: var(--xam-2); }
.the-bai-anh { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--vien-nhe); border-radius: var(--bo-nut); background: var(--mat); min-width: 0; }
.ds-anh { display: flex; gap: 8px; flex-wrap: wrap; }
.nut-anh { padding: 0; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--xam); cursor: zoom-in; overflow: hidden; }
.nut-anh img { display: block; height: 120px; width: auto; max-width: 160px; object-fit: cover; }
.anh-lon { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--bo-nho); }
.o-prompt { width: 100%; min-height: 140px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut); font: 13px/1.5 var(--font); background: var(--xam-2); color: var(--chu); resize: vertical; }
.xem-truoc-anh { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; width: 180px; padding: 16px 14px; border-radius: 12px;
  color: #FFFFFF; overflow: hidden; }
.xem-truoc-anh .ten-cs { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.xem-truoc-anh .tieu { font-size: 18px; line-height: 1.15; font-weight: 800; }
.xem-truoc-anh .so { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #2a1026; }
.xem-truoc-anh .cta { font-size: 10px; padding-top: 8px; border-top: 2px solid; opacity: .95; }

/* ---------- Kênh đăng (bản vẽ KenhDang) ---------- */
.luoi-kenh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .luoi-kenh { grid-template-columns: minmax(0, 1fr); } }
.cot-kenh { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--cot); border-radius: var(--bo-the); min-width: 0; }
.the-dang { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-nut); min-width: 0; }
.bon-buoc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .bon-buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bon-buoc { grid-template-columns: minmax(0, 1fr); } }
.bang-kenh-khung { overflow-x: auto; }
.bang-kenh { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; line-height: 17px; background: var(--mat); }
.bang-kenh th { background: var(--xam-3); color: var(--chu-2); text-align: left; padding: 9px 12px; font-weight: 600; }
.bang-kenh td { padding: 10px 12px; border-top: 1px solid var(--vien); vertical-align: top; color: var(--chu-2); }
.bang-kenh td:first-child { font-weight: 600; color: var(--chu); }

/* ---------- Báo cáo & bảng điểm / Vòng học (bản vẽ VongHoc) ---------- */
.vong { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; }
@media (max-width: 900px) { .vong { grid-template-columns: minmax(0, 1fr); } }
.buoc-vong { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the);
  box-shadow: var(--bong-nhe); font-size: 12px; line-height: 17px; }
.buoc-vong b.ten { font-size: 14px; }
.buoc-vong .muc { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--xanh); letter-spacing: .02em; }
.buoc-vong .muc.lam { color: var(--chinh-chu); } .buoc-vong .muc.cam { color: var(--cam); }
.buoc-vong .so-that { color: var(--chu); font-weight: 600; }
.bo-nho-3 { grid-column: 1 / -1; justify-self: center; width: min(420px, 100%); padding: 12px 16px; background: var(--chinh-nhat-2); border: 1px solid var(--chinh-vien);
  border-radius: var(--bo-the); text-align: center; font-size: 12px; }
.quy-tac { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--vien-bang); }
.quy-tac:first-child { border-top: 0; }
.quy-tac.thu-hoi { opacity: .65; }
.quy-tac .dong-quy-tac { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.dong-nhat-ky { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); gap: 2px 8px; align-items: baseline; font-size: 12px; padding: 4px 0; border-top: 1px solid var(--vien-bang); }
.dong-nhat-ky:first-child { border-top: 0; }
.dong-nhat-ky .gio { color: var(--mo); font-variant-numeric: tabular-nums; }
.dong-nhat-ky .moTa { overflow-wrap: anywhere; color: var(--chu-2); }
.ds-cuon { max-height: 360px; overflow-y: auto; }

/* ---------- Gói ngành (bản vẽ GoiNganh) ---------- */
.chip-lop { display: inline-block; padding: 3px 9px; border-radius: var(--bo-chip); background: var(--cot); font-size: 12px; }
.chip-lop.trang { background: var(--mat); border: 1px solid var(--chinh-vien); }
button.chip-lop { font: 12px var(--font); color: var(--chinh); cursor: pointer; }
button.chip-lop:hover { background: var(--chinh-nhat); }
.luoi-nganh { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.o-nganh { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--mat); border: 1px solid var(--chinh-vien); border-radius: var(--bo-o); }

/* ---------- Giao diện & cài đặt ---------- */
.o-mau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.o-mau input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--mat); cursor: pointer; }
.ba-cach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .ba-cach { grid-template-columns: minmax(0, 1fr); } }
.ba-cach .the.chon { border: 2px solid var(--chinh); }
.hop-vang { padding: 10px 12px; background: var(--vang-nhat); border: 1px solid var(--vang-vien-2); border-radius: var(--bo-nut); color: var(--chu-2); }
.hop-xanh-la { padding: 10px 12px; background: var(--xanh-nen); border: 1px solid var(--xanh-vien); border-radius: var(--bo-nut); }

/* ---------- đọc markdown / chữ thô ---------- */
.md { display: flex; flex-direction: column; gap: 10px; overflow-wrap: anywhere; }
.md h3, .md h4, .md h5, .md h6 { margin-top: 6px; }
.md ul, .md ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.md li.lui { margin-left: 18px; }
.md blockquote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--chinh-vien); color: var(--chu-2); background: var(--xam-2); display: flex; flex-direction: column; gap: 6px; }
.md hr { border: 0; border-top: 1px solid var(--vien); margin: 4px 0; width: 100%; }
.md .lien-nao { color: var(--tim); background: var(--tim-nen); border-radius: 4px; padding: 0 4px; }
.cuon-ngang { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: 13px; }
.md th, .md td { border: 1px solid var(--vien); padding: 6px 10px; text-align: left; vertical-align: top; overflow-wrap: normal; }
.md th { background: var(--xam); }
.chu-tho { margin: 0; padding: 12px; background: var(--xam); border-radius: var(--bo-nut); font: 12px/1.5 var(--mono); white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 70vh; overflow: auto; }
.thong-tin { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.thong-tin dt { color: var(--mo); }
.thong-tin dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .thong-tin { grid-template-columns: minmax(0, 1fr); gap: 0; } .thong-tin dd { margin-bottom: 8px; } }
.lich-su { margin: 0; padding-left: 20px; font-size: 12px; color: var(--chu-2); display: flex; flex-direction: column; gap: 2px; }

/* ---------- hộp xem chi tiết ---------- */
dialog#hop { padding: 0; border: 0; border-radius: 16px; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 48px);
  color: var(--chu); background: var(--mat); box-shadow: var(--bong-hop); }
dialog#hop::backdrop { background: rgba(20, 24, 40, .45); }
.hop-khung { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.hop-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--vien-nhe); }
.hop-dau h2 { overflow-wrap: anywhere; }
.hop-than { padding: 16px 18px 22px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 640px) {
  dialog#hop { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .hop-khung { height: 100%; max-height: 100dvh; }
}

/* ---------- form, ô nhập ---------- */
.khung-hanh-dong { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--xam-2); border: 1px solid var(--vien); border-radius: var(--bo-o); }
.khung-hanh-dong h3 { font-size: 13px; }
.o-form:empty, .o-loi:empty, #kq-khach:empty, #kq-hopthu:empty, .kq:empty { display: none; }
.form-nho { display: flex; flex-direction: column; gap: 8px; }
.form-nho > .nut { align-self: flex-start; }
.form-nho label, .form-nho legend { font-size: 12px; font-weight: 600; }
.o-nhap { width: 100%; max-width: 420px; min-height: 40px; padding: 0 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut);
  font: 14px var(--font); background: var(--mat); color: var(--chu); }
select.o-nhap { padding-right: 8px; }
.o-nhap.nho { width: auto; min-height: 34px; font-size: 13px; }
.o-soan { width: 100%; min-height: 160px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--mat);
  color: var(--chu); font: 14px/1.5 var(--font); resize: vertical; }
.o-soan.vua { min-height: 72px; }
.o-soan.cao { min-height: 50vh; font: 13px/1.5 var(--mono); }
.luoi-o { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.luoi-o > div { display: flex; flex-direction: column; gap: 4px; }
.chon-giu { margin: 0; padding: 8px 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut); display: flex; flex-direction: column; gap: 4px; }
.dong-chon { display: flex; align-items: center; gap: 6px; min-height: 34px; font-weight: 400 !important; font-size: 13px !important; cursor: pointer; }
.dong-chon input { width: 18px; height: 18px; margin: 0; }
.ds-nho { margin: 0; padding-left: 20px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.khung-tag { display: flex; flex-direction: column; gap: 8px; }
.tag-co-nut { display: inline-flex; align-items: center; gap: 2px; padding-right: 2px; }
.bo-tag { width: 28px; height: 28px; margin: -4px -2px -4px 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font: 700 16px/1 var(--font); cursor: pointer; }
.bo-tag:hover { background: rgba(0, 0, 0, .08); }
@media (max-width: 640px) {
  body { font-size: 15px; }
  .o-nhap, .o-soan, .loc-khach input[type="search"], .o-prompt { font-size: 16px; }
  .nut { min-height: 44px; }
  .nut.nho, .nut.rat-nho { min-height: 40px; }
}

/* ---------- trang đăng nhập / chưa đặt mật khẩu ---------- */
.trang-vao { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.the-vao { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: var(--mat);
  border: 1px solid var(--vien); border-radius: 16px; box-shadow: 0 10px 30px rgba(20, 24, 40, .06); }
.the-vao .thuong-hieu { padding: 0; }
.the-vao .thuong-hieu > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.the-vao .thuong-hieu small { color: var(--mo); font-size: 12px; }
.form-vao { display: flex; flex-direction: column; gap: 8px; }
.form-vao label { font-weight: 600; font-size: 14px; }
.form-vao input { min-height: 46px; padding: 0 12px; border: 1px solid var(--vien); border-radius: var(--bo-nut); font: 16px var(--font); }
.form-vao .nut { min-height: 46px; margin-top: 4px; }
.bao-loi { padding: 10px 12px; background: var(--do-nen); border: 1px solid var(--do-vien); border-radius: var(--bo-nut); color: var(--do); font-weight: 600; }
.cac-buoc { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Prompt & Quy trình (thêm 16/10/2026, docs/de-xuat-quan-tri-prompt.md mục 3; màu theo biến của 12 màn) ---------- */
.xuong-pr { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 14px 16px; }
.xuong-pr .xuong { height: 64px; border-radius: var(--bo-the); }
.xuong-pr .xuong:first-child { grid-row: span 5; height: auto; min-height: 420px; }
.pr-luoi { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-cay { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 10px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); }
.pr-cay h2 { display: flex; justify-content: space-between; padding: 10px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mo); }
.pr-cay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-muc { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0 10px; align-items: center; width: 100%; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: var(--bo-nho); background: none; text-align: left; font: 13px/1.35 var(--font); color: var(--chu); cursor: pointer; }
.pr-muc:hover { background: var(--xam); }
.pr-muc[aria-current="true"] { background: var(--chinh-nhat); color: var(--chinh); }
.pr-muc .ten { font-weight: 600; overflow-wrap: anywhere; }
.pr-muc .phu { grid-column: 2; font-size: 11px; color: var(--mo); overflow-wrap: anywhere; }
.pr-cham { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--duong); }
.pr-cham.co-so { background: var(--chinh); }
.pr-cham.ngoai { background: transparent; box-shadow: inset 0 0 0 2px var(--chinh); }
.pr-chu-giai { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 8px 2px; margin-top: 6px; border-top: 1px dashed var(--vien); font-size: 11px; color: var(--mo); }
.pr-chu-giai .pr-cham { margin-left: 4px; }
.pr-giua { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pr-tang-khung { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr-dau-muc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pr-dau-muc .tieu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-dau-muc h2 { font-size: 17px; }
.pr-tang { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-the); }
.pr-tang > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.pr-tang > summary::-webkit-details-marker { display: none; }
.pr-tang > summary b::before { content: '▸ '; color: var(--mo); }
.pr-tang[open] > summary b::before { content: '▾ '; }
.pr-tang-1 { border-left: 4px solid var(--duong); }
.pr-tang-2 { border-left: 4px solid #1F8F3F; }
.pr-tang-3 { border: 2px solid var(--chinh); background: var(--chinh-nhat-2); }
.pr-chu { max-height: 360px; font-size: 12px; }
.pr-o-soan { min-height: 240px; }
.pr-o-chon { align-items: start; }
.pr-o-chon .chon-giu { min-width: 0; }
.pr-canh { display: flex; flex-direction: column; gap: 6px; }
.pr-canh:empty { display: none; }
.hop-xanh.nho { padding: 8px 12px; font-size: 13px; }
.pr-so-sanh { margin-top: 2px; }
.pr-cot-thu { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-o); }
.pr-ds-ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-ds-ls li { border-top: 1px solid var(--vien-bang); padding: 8px 0; }
.pr-ds-ls li:first-child { border-top: 0; }
.pr-dong-ls { display: flex; flex-direction: column; gap: 6px; }
.pr-dong-ls .the-dau-dong span { overflow-wrap: anywhere; }
.pr-hieu-luc { gap: 10px; }
.pr-chon-hl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pr-chon-hl label { font-size: 12px; font-weight: 600; }
.pr-chon-hl .o-nhap { width: 100%; max-width: none; }
.pr-hl-than { display: flex; flex-direction: column; gap: 8px; }
.pr-doan { padding: 8px 12px; background: var(--mat); border: 1px solid var(--vien); border-left: 4px solid var(--duong); border-radius: var(--bo-nut); min-width: 0; }
.pr-doan > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; min-height: 32px; }
.pr-doan > summary::-webkit-details-marker { display: none; }
.pr-doan[open] > summary { margin-bottom: 6px; }
.pr-doan .pr-tep { flex: 1 1 160px; min-width: 0; font: 600 12px var(--mono); overflow-wrap: anywhere; color: var(--chu-2); }
.pr-doan-loi { border-left-color: var(--duong); }
.pr-doan-nganh { border-left-color: #1F8F3F; }
.pr-doan-co-so { border-left-color: var(--chinh); }
.pr-doan-hoc { border-left-color: var(--vang); }
.pr-nhan-loi { background: var(--xam-3); color: var(--chu-2); }
.pr-nhan-nganh { background: var(--xanh-nen); color: var(--xanh); }
.pr-nhan-co-so { background: var(--chinh-nhat-2); color: var(--chinh-chu); }
.pr-nhan-hoc { background: var(--vang-nen); color: var(--vang-chu); box-shadow: inset 0 0 0 1px var(--vang-vien); }
.pr-nhan-khac { background: var(--xam); color: var(--chu-2); outline: 1px dashed var(--duong); }
.pr-canh-cam ul { margin: 4px 0 0; }
@media (max-width: 899px) {
  .xuong-pr { grid-template-columns: minmax(0, 1fr); }
  .xuong-pr .xuong:first-child { grid-row: auto; min-height: 300px; }
  .pr-luoi { grid-template-columns: minmax(0, 1fr); }
  .pr-cay { position: static; max-height: none; }
  .pr-luoi:not(.dang-xem) .pr-giua { display: none; }
  .pr-luoi.dang-xem .pr-cay { display: none; }
}
/* Bản thử trên hosting (WEB_BAN_THU): dải vàng đầu trang */
.dai-ban-thu { margin: 0; padding: 7px 16px; background: var(--vang-nen); border-bottom: 1px solid var(--vang-vien); color: var(--vang-chu); font-size: 12px; line-height: 17px; text-align: center; }