/* ------------------------------------------------------------
   Font tự host. Không gọi Google Fonts lúc chạy: người dùng ở Việt Nam,
   file nằm sẵn trong public/fonts nên không phụ thuộc bên thứ ba.
   Chỉ lấy subset latin và vietnamese, đúng những trọng lượng đang dùng.
   Nguồn: @fontsource/be-vietnam-pro và @fontsource/ibm-plex-mono (OFL).
   ------------------------------------------------------------ */
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/ibm-plex-mono-vietnamese-400-normal.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/ibm-plex-mono-vietnamese-500-normal.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* ============================================================
   BỐNG AI — WEB SẢN XUẤT · hệ thống giao diện
   Nền sáng · chỉ dùng trên máy tính (tối thiểu 1280px) · chữ nhỏ vì mật độ nội dung cao
   ============================================================ */

:root{
  /* --- nền và đường kẻ --- */
  --nen:        #F6F7FB;
  --the:        #FFFFFF;
  --the-2:      #FBFCFE;
  --ke:         #E3E7EF;
  --ke-dam:     #CBD3E1;

  /* --- chữ --- */
  --chu:        #151A2D;
  --chu-2:      #4E5768;   /* WCAG AA: 7,0:1 trên nền trắng */
  --chu-mo:     #687184;   /* WCAG AA: 4,6:1 — bản cũ #8A93A6 chỉ đạt 3,1:1 */

  /* --- màu chính --- */
  --chinh:      #0EA5A5;
  --chinh-dam:  #0B7F7F;
  --chinh-nhat: #E6FAF8;

  /* --- vai: mỗi vai một màu và một nền nhạt, cố định toàn hệ thống --- */
  --bong:       #0D9488;  --bong-nen:   #CCFBF1;
  --hangnga:    #C2620A;  --hangnga-nen:#FEF0C7;
  --sach:       #4F46E5;  --sach-nen:   #E4E5FC;
  --phu:        #5B6577;  --phu-nen:    #EDF0F5;
  --sfx:        #DB5C14;  --sfx-nen:    #FFE9D6;
  --nhac:       #C8237C;  --nhac-nen:   #FCE0EF;
  --hinh:       #15A34A;  --hinh-nen:   #D6F5E1;
  --dung:       #8B34D9;  --dung-nen:   #F1E4FD;

  /* --- trạng thái --- */
  --chua:       #97A1B2;
  --chay:       #2563EB;
  --xong:       #15A34A;
  --canlam:     #C2620A;
  --hong:       #DC2626;
  --hong-nen:   #FEE7E7;
  --canh:       #B45309;
  --canh-nen:   #FEF3C7;

  /* --- nhóm kịch bản trên bản đồ --- */
  --cong-vao:   #E0A11B;
  --hoat-dong:  #0EA5A5;
  --he-thong:   #7D879C;
  --an-toan:    #E0574F;

  /* --- thang cỡ chữ: mỗi bậc đi kèm một line-height, dùng cả cặp.
         Đừng rắc số lẻ ra chỗ khác --- */
  --co-ma:      11.5px;   --cao-ma:     1.45;  /* chữ mã — IBM Plex Mono vẽ to hơn nên nhỏ hơn một bậc */
  --co-nho:     12px;     --cao-nho:    1.5;   /* ghi chú, nhãn phụ, chip */
  --co-thuong:  13.5px;   --cao-thuong: 1.55;  /* chữ nền */
  --co-vua:     15px;     --cao-vua:    1.4;   /* tiêu đề thẻ */
  --co-lon:     18px;     --cao-lon:    1.3;   /* tiêu đề trang */
  --co-so:      22px;     --cao-so:     1.15;  /* con số nổi bật */
  --co-vi:      10.5px;   /* dưới thang: nhãn nhỏ nằm trên canvas bản đồ */
  --cao-khit:   1.35;     /* chữ bị cắt dòng trong ô chật, như tên trên node */

  /* --- thang khoảng cách: padding, gap, margin đều lấy ở đây --- */
  --k1:  4px;
  --k2:  8px;
  --k3: 12px;
  --k4: 16px;
  --k5: 24px;
  --k6: 32px;

  /* --- bo góc: thẻ 10 · nút và ô nhập 8 · nút tí hon 6 · chip tròn --- */
  --bo:         10px;
  --bo-nho:     8px;
  --bo-be:      6px;
  --bo-tron:    999px;

  /* Bóng nhẹ, phẳng: --bong-do cho thẻ thường, --bong-noi cho lớp nổi lên trên */
  --bong-do:    0 1px 2px rgba(21,26,45,.05), 0 2px 6px rgba(21,26,45,.04);
  --bong-noi:   0 2px 6px rgba(21,26,45,.06), 0 10px 26px rgba(21,26,45,.10);

  /* Vòng focus dùng chung — hiện rõ trên cả nền trắng lẫn nút màu */
  --vong-focus: 0 0 0 3px rgba(14,165,165,.38);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--nen); color:var(--chu);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--co-thuong); line-height:var(--cao-thuong);
  -webkit-font-smoothing:antialiased;
  min-width:1280px;
}
/* Chữ mã chỉ có mặt chữ 400 và 500. Đừng khai 600 hay 700 cho .mono/.ma:
   không có mặt chữ tương ứng thì trình duyệt tự bôi đậm giả, nét chữ méo đi. */
code,.mono,.ma{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:var(--co-ma);letter-spacing:.01em}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;line-height:var(--cao-lon)}
h1{font-size:var(--co-lon)} h2{font-size:var(--co-vua)} h3{font-size:var(--co-thuong)}
a{color:var(--chinh-dam)}
a:focus-visible{outline:none;border-radius:var(--bo-be);box-shadow:var(--vong-focus)}

/* ---------------- thanh trên ---------------- */
.thanh{
  display:flex;align-items:center;gap:var(--k4);height:52px;padding:0 var(--k5);
  background:var(--the);border-bottom:1px solid var(--ke);position:sticky;top:0;z-index:30;
}
.hieu{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--co-vua);white-space:nowrap}
.hieu .cham{
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 36% 32%,#fff 0%,var(--chinh) 42%,var(--chinh-dam) 100%);
  box-shadow:0 0 0 3px var(--chinh-nhat);
}
.thanh nav{display:flex;gap:2px;margin-left:var(--k2)}
.thanh nav a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px var(--k3);border-radius:var(--bo-nho);color:var(--chu-2);
  text-decoration:none;font-weight:500;white-space:nowrap;
}
.thanh nav a:hover{background:var(--nen);color:var(--chu)}
.thanh nav a.dang{background:var(--chinh-nhat);color:var(--chinh-dam);font-weight:600}
.thanh nav a:focus-visible{outline:none;box-shadow:var(--vong-focus)}
.thanh .phai{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------------- khung ---------------- */
.trang{padding:var(--k5) var(--k5) 48px}
.trang.dau{padding-bottom:var(--k2)}   /* khối tiêu đề đứng ngay trên hàng thẻ tab */
.trang-hep{max-width:1120px;margin:0 auto}
.dau-trang{display:flex;align-items:flex-start;gap:var(--k4);margin-bottom:var(--k5)}
.dau-trang p{margin:var(--k1) 0 0;color:var(--chu-2);font-size:var(--co-nho);max-width:70ch}
.dau-trang .phai{margin-left:auto;display:flex;gap:8px}

/* ---------------- thẻ ---------------- */
.the{background:var(--the);border:1px solid var(--ke);border-radius:var(--bo);box-shadow:var(--bong-do)}
.the + .the{margin-top:var(--k4)}
.the > header{
  display:flex;align-items:center;gap:10px;padding:var(--k3) var(--k4);border-bottom:1px solid var(--ke);
}
.the > header h2{flex:1}
.the > header .ghi{color:var(--chu-mo);font-size:var(--co-nho);font-weight:400}
.the .than{padding:var(--k4)}
.the .than.khit{padding:0}

/* ---------------- nút ---------------- */
.nut{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 var(--k3);border-radius:var(--bo-nho);
  border:1px solid var(--ke-dam);background:var(--the);color:var(--chu);
  font-family:inherit;font-size:var(--co-thuong);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,box-shadow .14s;
}
.nut:hover{background:var(--the-2);border-color:var(--ke-dam);color:var(--chu)}
.nut:active{transform:translateY(.5px);background:var(--nen)}
.nut:focus-visible{outline:none;border-color:var(--chinh);box-shadow:var(--vong-focus)}
.nut:disabled{opacity:.45;cursor:not-allowed}
.nut:disabled:hover{background:var(--the);border-color:var(--ke-dam)}
.nut.chinh{background:var(--chinh);border-color:var(--chinh);color:#fff}
.nut.chinh:hover{background:var(--chinh-dam);border-color:var(--chinh-dam);color:#fff}
.nut.chinh:active{background:var(--chinh-dam)}
.nut.nguy{color:var(--hong);border-color:#F3C2C2}
.nut.nguy:hover{background:var(--hong-nen);border-color:#E9A9A9;color:var(--hong)}
.nut.nguy:active{background:#FBD9D9}
.nut.nho{height:26px;padding:0 9px;font-size:var(--co-nho)}
.nut.chi-icon{padding:0;width:32px;justify-content:center}

/* ---------------- ô nhập ---------------- */
label.o{display:block;margin-bottom:var(--k4)}
label.o > span{display:block;font-size:var(--co-nho);font-weight:500;color:var(--chu-2);margin-bottom:5px}
label.o > small{display:block;color:var(--chu-mo);font-size:var(--co-ma);margin-top:var(--k1);line-height:var(--cao-ma)}
input[type=text],input[type=password],select,textarea{
  width:100%;height:34px;padding:0 var(--k3);
  border:1px solid var(--ke-dam);border-radius:var(--bo-nho);
  background:var(--the);color:var(--chu);font-family:inherit;font-size:var(--co-thuong);
}
textarea{height:auto;padding:9px var(--k3);line-height:var(--cao-thuong);resize:vertical;min-height:76px}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat);
}
input:disabled,select:disabled,textarea:disabled{
  background:var(--the-2);color:var(--chu-mo);cursor:not-allowed;
}
input::placeholder,textarea::placeholder{color:var(--chu-mo)}
input.ma,textarea.ma{font-family:"IBM Plex Mono",monospace;font-size:var(--co-nho)}
.hang{display:flex;gap:var(--k3);align-items:flex-end}
.hang > *{flex:1}
.hang > .khong-gian{flex:0 0 auto}

/* ---------------- bảng ---------------- */
table.bang{width:100%;border-collapse:collapse;font-size:var(--co-thuong)}
.bang th{
  text-align:left;font-size:var(--co-ma);font-weight:600;color:var(--chu-2);letter-spacing:.02em;
  padding:9px var(--k3);border-bottom:1px solid var(--ke);background:var(--the-2);
  position:sticky;top:52px;z-index:2;
}
.bang td{padding:9px var(--k3);border-bottom:1px solid var(--ke);vertical-align:middle}
.bang tr:last-child td{border-bottom:none}
.bang tbody tr:hover{background:var(--the-2)}
.bang td.hep{width:1%;white-space:nowrap}

/* ---------------- nhãn vai ---------------- */
.vai{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px 2px 6px;border-radius:var(--bo-tron);
  font-size:var(--co-ma);font-weight:600;white-space:nowrap;
}
.vai[data-vai=bong]    {color:var(--bong);   background:var(--bong-nen)}
.vai[data-vai=hangnga] {color:var(--hangnga);background:var(--hangnga-nen)}
.vai[data-vai=sach]    {color:var(--sach);   background:var(--sach-nen)}
.vai[data-vai=phu]     {color:var(--phu);    background:var(--phu-nen)}
.vai[data-vai=sfx]     {color:var(--sfx);    background:var(--sfx-nen)}
.vai[data-vai=nhac]    {color:var(--nhac);   background:var(--nhac-nen)}
.vai[data-vai=hinh]    {color:var(--hinh);   background:var(--hinh-nen)}
.vai[data-vai=dung]    {color:var(--dung);   background:var(--dung-nen)}

/* ---------------- trạng thái ---------------- */
.tt{display:inline-flex;align-items:center;gap:5px;font-size:var(--co-nho);font-weight:500}
.tt::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tt[data-tt=chua] {color:var(--chua)}
.tt[data-tt=chay] {color:var(--chay)}
.tt[data-tt=xong] {color:var(--xong)}
.tt[data-tt=canlam]{color:var(--canlam)}
.tt[data-tt=hong] {color:var(--hong)}

.the-nho{
  display:inline-block;padding:1px 8px;border-radius:var(--bo-tron);
  border:1px solid var(--ke-dam);font-size:var(--co-ma);color:var(--chu-2);background:var(--the-2);
}

/* ---------------- thông báo ---------------- */
.bao{
  display:flex;gap:9px;padding:10px var(--k3);border-radius:var(--bo-nho);
  font-size:var(--co-nho);line-height:var(--cao-nho);margin-bottom:var(--k4);border:1px solid transparent;
}
.bao b{font-weight:600}
.bao[data-loai=loi]  {background:var(--hong-nen);border-color:#F6CDCD;color:#8E1B1B}
.bao[data-loai=canh] {background:var(--canh-nen);border-color:#F3DFA6;color:#7A4A06}
.bao[data-loai=ok]   {background:#D9F7E4;border-color:#A9E7C1;color:#12602F}
.bao[data-loai=tin]  {background:var(--chinh-nhat);border-color:#B9EBE5;color:#0A6B6B}

/* ---------------- thẻ tab ---------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--ke);padding:0 var(--k4);background:var(--the)}
.tabs button{
  appearance:none;border:none;background:none;font-family:inherit;font-size:var(--co-thuong);font-weight:500;
  color:var(--chu-2);padding:11px var(--k3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  border-radius:var(--bo-be) var(--bo-be) 0 0;
}
.tabs button:hover{color:var(--chu);background:var(--the-2)}
.tabs button:focus-visible{outline:none;box-shadow:var(--vong-focus)}
.tabs button.dang{color:var(--chinh-dam);border-bottom-color:var(--chinh);font-weight:600}

/* ---------------- màn đăng nhập ---------------- */
.cong{min-height:100vh;display:grid;place-items:center;padding:var(--k5)}
.cong .hop{width:376px;background:var(--the);border:1px solid var(--ke);border-radius:var(--bo);
  box-shadow:var(--bong-noi);padding:var(--k6)}
.cong .hieu{justify-content:center;margin-bottom:5px;font-size:var(--co-lon)}
.cong p.dan{text-align:center;color:var(--chu-2);font-size:var(--co-nho);margin:0 0 var(--k5)}

/* ---------------- chỗ trống ---------------- */
.trong{
  text-align:center;padding:52px var(--k5);color:var(--chu-mo);
  border:1px dashed var(--ke-dam);border-radius:var(--bo);background:var(--the-2);
}
.trong b{display:block;color:var(--chu);font-size:var(--co-vua);font-weight:600;margin-bottom:var(--k1)}

/* ---------------- lặt vặt ---------------- */
.mo{color:var(--chu-mo)}
.nho{font-size:var(--co-nho)}
.giua{display:flex;align-items:center;gap:var(--k2)}
.cuon{max-height:calc(100vh - 210px);overflow:auto}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#C9D0DD;border-radius:6px;border:3px solid var(--nen)}
::-webkit-scrollbar-thumb:hover{background:#AEB7C7}

/* ============================================================
   HỘP THOẠI — dùng chung, xem hopThoai() trong ui.js
   ============================================================ */
.lop{
  position:fixed;inset:0;z-index:60;padding:var(--k5);
  background:rgba(21,26,45,.34);display:grid;place-items:center;
}
.hop-thoai{
  width:424px;max-height:86vh;overflow:auto;
  background:var(--the);border-radius:var(--bo);box-shadow:var(--bong-noi);
}
.hop-thoai > header{padding:var(--k4) var(--k5);border-bottom:1px solid var(--ke)}
.hop-thoai > .than{padding:var(--k5)}
.hop-thoai > .than label.o:last-child{margin-bottom:0}
.hop-thoai > footer{
  display:flex;justify-content:flex-end;gap:8px;
  padding:var(--k3) var(--k5);border-top:1px solid var(--ke);
  background:var(--the-2);border-radius:0 0 var(--bo) var(--bo);
}

/* ============================================================
   BẢN ĐỒ KỊCH BẢN — B2, mục 6 thiết kế v2
   Ba cột: luồng mẫu · canvas · chi tiết
   ============================================================ */
.bando{
  height:calc(100vh - 52px);
  display:grid;grid-template-columns:236px 1fr 332px;
  overflow:hidden;
}
.bd-trai,.bd-phai{background:var(--the);overflow:auto}
.bd-trai{border-right:1px solid var(--ke)}
.bd-phai{border-left:1px solid var(--ke)}
.bd-giua{display:flex;flex-direction:column;min-width:0}

/* ---------------- thanh việc ---------------- */
.bd-thanh{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  height:46px;padding:0 var(--k4);background:var(--the);border-bottom:1px solid var(--ke);
}
.bd-vach{width:1px;height:20px;background:var(--ke)}
.bd-nhan-luu .tt{font-size:var(--co-ma)}
.bd-bao{padding:0 var(--k4)}
.bd-bao:empty{display:none}
.bd-bao .bao{margin:10px 0 0}
.bd-thanh-luong{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:var(--k2) var(--k4);font-size:var(--co-nho);
  background:var(--chinh-nhat);border-bottom:1px solid #B9EBE5;color:var(--chinh-dam);
}
.bd-thanh-luong[hidden]{display:none}

/* ---------------- canvas ---------------- */
.bd-khung{flex:1;position:relative;overflow:hidden;background:var(--nen);cursor:grab}
.bd-khung.keo{cursor:grabbing}
.bd-the-gioi{
  position:absolute;top:0;left:0;transform-origin:0 0;
  background-image:radial-gradient(var(--ke) 1px,transparent 1px);
  background-size:26px 26px;
}
.bd-lop-day{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.bd-lop-node{position:absolute;inset:0;pointer-events:none}

/* ---------------- node kịch bản ---------------- */
.bd-node{
  position:absolute;width:178px;height:66px;padding:8px 26px 8px 13px;
  background:var(--the);border:1px solid var(--ke);
  border-radius:var(--bo-nho);box-shadow:var(--bong-do);
  cursor:grab;pointer-events:auto;user-select:none;
  transition:box-shadow .14s,border-color .14s,opacity .14s;
}
/* vạch màu nhóm — vẽ riêng chứ không dùng border, để chọn node không nuốt mất màu */
.bd-node::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--mau,var(--hoat-dong));border-radius:var(--bo-nho) 0 0 var(--bo-nho);
}
.bd-node[data-nhom=cong-vao] {--mau:var(--cong-vao)}
.bd-node[data-nhom=hoat-dong]{--mau:var(--hoat-dong)}
.bd-node[data-nhom=he-thong] {--mau:var(--he-thong)}
.bd-node[data-nhom=an-toan]  {--mau:var(--an-toan)}
.bd-node:hover{border-color:var(--ke-dam);box-shadow:var(--bong-noi)}
.bd-node.dang{border-color:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat),var(--bong-do)}
.bd-node.dich{border-color:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat)}
.bd-node.keo{cursor:grabbing;box-shadow:var(--bong-noi);z-index:5}
.bd-node.sang{border-color:var(--chinh)}
.bd-node.mo-di{opacity:.24}
.bd-node.chon-duoc{cursor:pointer;border-color:var(--chinh)}

.bd-ma{font-weight:500;letter-spacing:.02em;margin-bottom:2px;color:var(--chu)}
.bd-ten{
  font-size:var(--co-nho);color:var(--chu-2);line-height:var(--cao-khit);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* chấm trạng thái kịch bản, góc dưới phải */
.bd-node::after{
  content:"";position:absolute;right:10px;bottom:9px;
  width:6px;height:6px;border-radius:50%;background:var(--chua);
}
.bd-node[data-tt=dangsoan]::after{background:var(--chay)}
.bd-node[data-tt=xong]::after    {background:var(--xong)}
.bd-node[data-tt=ngung]::after   {background:var(--ke-dam)}

.bd-cu{position:absolute;right:6px;top:6px;display:flex;gap:2px;opacity:0;transition:opacity .12s}
.bd-node:hover .bd-cu,.bd-node.dang .bd-cu{opacity:1}
.bd-nut{
  width:20px;height:20px;padding:0;border:none;border-radius:var(--bo-be);
  background:var(--nen);color:var(--chu-2);
  font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.bd-nut:hover{background:var(--ke);color:var(--chu)}
.bd-nut:focus-visible{outline:none;box-shadow:0 0 0 2px var(--chinh)}
.bd-nut.nho{width:18px;height:18px;background:none}

/* cổng kéo dây ở mép phải */
.bd-cong{
  position:absolute;right:-7px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--the);border:2px solid var(--ke-dam);cursor:crosshair;
}
.bd-node:hover .bd-cong,.bd-node.dang .bd-cong{border-color:var(--chinh);background:var(--chinh-nhat)}
.bd-cong:hover{border-color:var(--chinh-dam);background:var(--chinh);transform:translateY(-50%) scale(1.25)}

/* ---------------- dây nối ---------------- */
.bd-net{fill:none;stroke:var(--chu-2);stroke-width:1.8}
.bd-net.chua{stroke:var(--chu-mo);stroke-dasharray:5 4;stroke-width:1.6}
.bd-net.sang{stroke:var(--chinh);stroke-width:2.6}
.bd-net.dang{stroke:var(--chinh-dam);stroke-width:2.6}
.bd-net.mo-di{opacity:.16}
.bd-net.tam{stroke:var(--chinh);stroke-dasharray:5 4}
.bd-hit{fill:none;stroke:transparent;stroke-width:15;pointer-events:stroke;cursor:pointer}
.bd-nhan{
  font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:var(--co-vi);font-weight:500;
  fill:var(--chu-2);paint-order:stroke;stroke:var(--nen);stroke-width:3.5px;stroke-linejoin:round;
  pointer-events:none;user-select:none;
}
.bd-nhan.chua{fill:var(--chu-mo);font-weight:500}
.bd-nhan.mo-di{opacity:.18}
.bd-mui-thuong{fill:var(--chu-2)}
.bd-mui-chua  {fill:var(--chu-mo)}
.bd-mui-sang  {fill:var(--chinh)}

/* ---------------- hai cột bên ---------------- */
.bd-khoi{padding:var(--k4);border-bottom:1px solid var(--ke)}
.bd-khoi:last-child{border-bottom:none}
.bd-khoi h3{margin-bottom:var(--k2)}
.bd-khoi > p{margin:0 0 var(--k3);font-size:var(--co-nho);line-height:var(--cao-nho)}
.bd-khoi .bao{margin-bottom:0}
.bd-khoi label.o:last-of-type{margin-bottom:14px}

.bd-ds{display:flex;flex-direction:column;gap:1px;margin-bottom:10px}
.bd-muc{
  display:flex;align-items:center;gap:var(--k2);padding:6px var(--k2);
  border-radius:var(--bo-be);cursor:pointer;font-size:var(--co-nho);
}
.bd-muc:hover{background:var(--nen)}
.bd-muc.dang{background:var(--chinh-nhat);color:var(--chinh-dam);font-weight:600}
.bd-muc .bd-nut{opacity:0;flex:0 0 auto}
.bd-muc:hover .bd-nut{opacity:1}
.bd-tro{color:var(--chu-mo)}

.bd-chu-thich{display:flex;gap:9px;align-items:flex-start;margin-bottom:var(--k2);font-size:var(--co-nho)}
.bd-o-mau{width:11px;height:11px;border-radius:var(--bo-be);flex:0 0 auto;margin-top:3px}
.bd-hang-net{display:flex;align-items:center;gap:9px;font-size:var(--co-nho);color:var(--chu-2);margin-top:var(--k2)}
.bd-mau-net{width:26px;border-top:2px solid var(--chu-2);flex:0 0 auto}
.bd-mau-net.chua{border-top-style:dashed;border-color:var(--chu-mo)}
.bd-so{display:flex;gap:var(--k5);font-size:var(--co-nho);margin-bottom:10px;color:var(--chu-2)}
.bd-so b{color:var(--chu);font-size:var(--co-vua)}

.bd-dau-panel{display:flex;align-items:center;gap:var(--k2);margin-bottom:5px}
.bd-tach{height:1px;background:var(--ke);margin:var(--k4) 0}
.bd-huong{font-size:var(--co-nho);color:var(--chu-2);margin-bottom:var(--k2);line-height:var(--cao-nho)}
.bd-huong b{color:var(--chu);font-weight:600;margin-right:5px}
.bd-trong{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:40px}
.bd-trong[hidden]{display:none}
.bd-trong .trong{background:var(--the);max-width:420px}

/* ============================================================
   NHẬP KỊCH BẢN HÀNG LOẠT
   ============================================================ */
.tabs.khoi{margin:0 22px;border-radius:8px 8px 0 0}

.nhap-buoc{display:flex;gap:var(--k3);align-items:flex-start;padding:var(--k4) 0;border-bottom:1px solid var(--ke)}
.nhap-buoc:first-child{padding-top:0}
.nhap-buoc:last-child{border-bottom:none;padding-bottom:0}
.nhap-stt{
  flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--chinh-nhat);color:var(--chinh-dam);
  font-size:var(--co-nho);font-weight:600;display:grid;place-items:center;
}
.nhap-nguon-o{margin:8px 0}
.nhap-file{
  display:block;width:100%;padding:11px;font-family:inherit;font-size:var(--co-thuong);
  border:1px dashed var(--ke-dam);border-radius:var(--bo-nho);background:var(--the-2);
}
.nhap-file:focus-within{border-color:var(--chinh);box-shadow:var(--vong-focus)}
.nhap-nguon{margin-top:10px}
.nhap-nut{display:flex;flex-wrap:wrap;gap:var(--k2);margin-top:var(--k2)}
.nhap-bang{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:var(--k3)}
.nhap-hang{
  display:flex;gap:10px;align-items:flex-start;padding:10px;
  border:1px solid var(--ke);border-radius:var(--bo-nho);background:var(--the-2);
}
.nhap-so{min-width:24px;font-size:var(--co-so);font-weight:700;line-height:var(--cao-so)}
.nhap-ds{margin:6px 0 0;padding-left:18px}
.nhap-ds li{margin-bottom:3px}

/* ============================================================
   MÀN HẸP — người soạn chính thao tác trên điện thoại.
   Chỉ nới cho trang Tham số (nhất là mục Nhập kịch bản) dùng được bằng ngón tay.
   Bản đồ vẫn là trang máy tính: giữ nguyên bề ngang 1280px rồi cho cuộn ngang,
   không vẽ lại bố cục ba cột.
   ============================================================ */
@media (max-width:1279px){
  body{min-width:0}
  .bando{min-width:1280px}
  .thanh{padding:0 12px;gap:10px;overflow-x:auto}
  .thanh nav{margin-left:0}
  .thanh nav a{padding:6px 9px}
  .trang{padding:14px 12px 40px}
  .tabs.khoi{margin:0 12px}
  .tabs{overflow-x:auto;padding:0 8px}
  .tabs button{white-space:nowrap;padding:11px 10px}
  .hang{flex-wrap:wrap}
  .hang > *{flex:1 1 200px}
  .nut{height:38px}
  .nut.nho{height:30px}
  .nhap-bang{grid-template-columns:1fr 1fr}
  .nhap-nut .nut{flex:1 1 140px;justify-content:center}
}

/* ============================================================
   ICON — sprite Lucide ở /img/icon.svg, dựng bằng bieuTuong() trong ui.js.
   Nét vẽ đặt một chỗ duy nhất tại đây nên mọi icon dày mỏng như nhau;
   màu kế thừa currentColor nên icon tự ăn theo màu chữ chỗ đặt nó.
   ============================================================ */
.icon{
  flex:0 0 auto;vertical-align:-.18em;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.nut .icon{margin-right:-1px}

/* Bống không có biểu tượng Lucide nào hợp — dùng chấm màu thương hiệu kèm chữ đầu */
.vai-cham{
  display:inline-grid;place-items:center;
  width:14px;height:14px;border-radius:50%;
  background:currentColor;color:inherit;
  font-size:9px;font-weight:700;line-height:1;   /* số đo của chấm 14px, không lấy từ thang chữ */
}
.vai-cham::after{content:attr(data-chu);color:var(--the)}

/* ============================================================
   TRANG SOẠN KỊCH BẢN — B3
   Ba vùng: danh sách bước · bước đang chọn · panel chi tiết
   ============================================================ */
.soan{height:calc(100vh - 52px);display:flex;flex-direction:column;overflow:hidden}
.sn-thanh{
  display:flex;align-items:center;gap:var(--k3);flex:0 0 auto;
  height:48px;padding:0 var(--k4);background:var(--the);border-bottom:1px solid var(--ke);
}
.sn-ten{display:flex;align-items:baseline;gap:var(--k2);min-width:0}
.sn-ma{font-weight:500;color:var(--chu)}
.sn-bao{padding:0 var(--k4)}
.sn-bao:empty{display:none}
.sn-bao .bao{margin:var(--k3) 0 0}
.sn-than{flex:1;display:grid;grid-template-columns:230px 1fr 340px;overflow:hidden}
.sn-trai,.sn-phai{background:var(--the);overflow:auto}
.sn-trai{border-right:1px solid var(--ke)}
.sn-phai{border-left:1px solid var(--ke)}
.sn-giua{overflow:auto;padding:var(--k4);background:var(--nen)}
.sn-khoi{padding:var(--k4)}
.sn-khoi h3{margin-bottom:var(--k2)}
.sn-khoi > p{margin:0 0 var(--k3);font-size:var(--co-nho);line-height:var(--cao-nho)}
.sn-tach{height:1px;background:var(--ke);margin:var(--k4) 0}
.sn-nhan{font-size:var(--co-nho);font-weight:500;color:var(--chu-2);margin-bottom:6px}
.sn-dau-panel{display:flex;align-items:center;gap:var(--k2);margin-bottom:var(--k3)}

/* ---------------- cột trái: danh sách bước ---------------- */
.sn-ds-buoc{display:flex;flex-direction:column;gap:3px;margin-bottom:var(--k3)}
.sn-buoc{
  padding:7px var(--k2);border-radius:var(--bo-nho);cursor:pointer;
  border:1px solid transparent;background:var(--the-2);
}
.sn-buoc:hover{background:var(--nen)}
.sn-buoc.dang{background:var(--chinh-nhat);border-color:var(--chinh)}
.sn-buoc.keo{opacity:.4}
.sn-buoc.tren{border-top:2px solid var(--chinh)}
.sn-buoc-dau{display:flex;align-items:center;gap:6px}
.sn-buoc-ma{font-weight:500}
.sn-buoc-icon{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--chu-mo)}
.sn-buoc-ten{font-size:var(--co-nho);color:var(--chu-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-cham{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block;background:var(--phu)}
.sn-cham[data-vai=bong]{background:var(--bong)}
.sn-cham[data-vai=hangnga]{background:var(--hangnga)}
.sn-cham[data-vai=sach]{background:var(--sach)}
.sn-cham[data-vai=phu]{background:var(--phu)}
.sn-cham[data-vai=sfx]{background:var(--sfx)}
.sn-cham[data-vai=nhac]{background:var(--nhac)}
.sn-cham[data-vai=hinh]{background:var(--hinh)}
.sn-cham[data-vai=dung]{background:var(--dung)}

/* ---------------- cột giữa ---------------- */
.sn-giua-dau{display:flex;align-items:center;gap:var(--k2);margin-bottom:var(--k3)}
.sn-giua-dau > span:nth-child(2){font-weight:600}
.sn-giua-dau .nut{margin-left:auto}
.sn-hang{margin-bottom:var(--k3)}
.sn-hang > header{gap:var(--k2)}
.sn-ds-node{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.sn-node{
  padding:8px 10px;border:1px solid var(--ke);border-radius:var(--bo-nho);
  background:var(--the-2);cursor:pointer;
}
.sn-node:hover{border-color:var(--ke-dam)}
.sn-node.dang{border-color:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat)}
.sn-node.keo{opacity:.4}
.sn-node.tren{border-top:2px solid var(--chinh)}
.sn-node-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sn-node-ma{font-weight:500}
.sn-node-loi{font-size:var(--co-nho);color:var(--chu-2);line-height:var(--cao-nho);margin-top:4px}
.sn-nut-hang{display:flex;flex-wrap:wrap;gap:6px}

.sn-dung{margin-top:var(--k3)}
.sn-tick{display:flex;align-items:flex-start;gap:8px;font-size:var(--co-nho);
  line-height:var(--cao-nho);cursor:pointer;margin-bottom:6px}
.sn-tick input{width:auto;height:auto;margin-top:2px;flex:0 0 auto}
.sn-cuchi{display:flex;flex-wrap:wrap;gap:var(--k2) var(--k4)}
.sn-cuchi .sn-tick{margin-bottom:0}
.sn-lc{border:1px solid var(--ke);border-radius:var(--bo-nho);padding:var(--k3);margin-bottom:var(--k2);background:var(--the-2)}
.sn-lc-hang{display:flex;align-items:flex-end;gap:var(--k2)}
.sn-lc-gt{margin-top:var(--k2)}
.sn-khung-retry{margin-top:var(--k4);border-top:1px solid var(--ke);padding-top:var(--k3)}
.sn-retry{border:1px solid var(--ke);border-radius:var(--bo-nho);padding:var(--k3);margin:var(--k2) 0;background:var(--the-2)}

.sn-ds-nhanh{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.sn-nhanh{
  display:flex;align-items:center;gap:var(--k3);padding:8px 10px;cursor:pointer;
  border:1px solid var(--ke);border-radius:var(--bo-nho);background:var(--the-2);
  font-size:var(--co-nho);
}
.sn-nhanh:hover{border-color:var(--ke-dam)}
.sn-nhanh.dang{border-color:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat)}
.sn-nhanh.cuoi{background:var(--nen);border-style:dashed}
.sn-nhanh-dk{flex:1;min-width:0}
.sn-nhanh-dich{display:flex;align-items:center;gap:5px;color:var(--chu-2);flex:0 0 auto}

/* ---------------- ô lời thoại ---------------- */
.sn-loi-cu{margin-top:6px;padding:8px 10px;background:var(--the-2);
  border:1px solid var(--ke);border-radius:var(--bo-nho)}
.sn-xem{font-size:var(--co-nho);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.sn-anh{color:var(--sach);font-weight:600}
.sn-ipa{color:var(--nhac);font-family:"IBM Plex Mono",monospace;font-size:var(--co-ma)}

/* ---------------- bộ dựng điều kiện ---------------- */
.dk-nhom{border:1px solid var(--ke);border-radius:var(--bo-nho);padding:var(--k2);background:var(--the-2)}
.dk-nhom[data-loai=any]{border-left:3px solid var(--canh)}
.dk-nhom[data-loai=all]{border-left:3px solid var(--chinh)}
.dk-nhom[data-loai=not]{border-left:3px solid var(--hong)}
.dk-dau{display:flex;align-items:center;gap:var(--k2);margin-bottom:var(--k2)}
.dk-loai{width:auto;height:26px;font-size:var(--co-nho);padding:0 6px}
.dk-con{display:flex;flex-direction:column;gap:6px;padding-left:var(--k2);
  border-left:1px dashed var(--ke-dam);margin-left:4px}
.dk-them{display:flex;gap:6px;margin-top:var(--k2)}
.dk-dong{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.dk-o{flex:1 1 130px;min-width:0;display:flex;flex-direction:column;gap:4px}
.dk-phep{width:auto;flex:0 0 auto;height:30px;font-size:var(--co-nho);padding:0 6px}
.dk-ve{flex:1 1 110px;min-width:0}
.dk-dong input,.dk-dong select{height:30px;font-size:var(--co-nho)}
.dk-canh{flex:1 1 100%}
.dk-do{color:var(--hong);font-weight:500}
.dk-dong.co-tho{background:var(--canh-nen);border:1px solid #F3DFA6;border-radius:var(--bo-nho);padding:var(--k2)}
.dk-tho{flex:1 1 100%;font-size:var(--co-nho);line-height:var(--cao-nho);color:#7A4A06;margin-bottom:6px}

/* ============================================================
   AUDIO — B4
   ============================================================ */
.sn-doi-xem{display:flex;gap:2px}
.au-tt{display:flex;align-items:center;gap:var(--k3);margin-bottom:var(--k2)}
.au-uoc{
  display:flex;gap:var(--k4);align-items:center;flex-wrap:wrap;
  padding:var(--k2) var(--k3);margin-bottom:10px;font-size:var(--co-nho);
  background:var(--canh-nen);border:1px solid #F3DFA6;border-radius:var(--bo-nho);color:#7A4A06;
}
.au-ds{display:flex;flex-direction:column;gap:5px}
.au-ban{
  display:flex;align-items:center;gap:var(--k2);padding:7px 9px;
  border:1px solid var(--ke);border-radius:var(--bo-nho);background:var(--the-2);
}
.au-ban.dang{border-color:var(--chinh);background:var(--chinh-nhat)}

.sn-than.bang{display:block;overflow:auto;padding:var(--k4);background:var(--nen)}
.sn-bang-thanh{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;margin-bottom:var(--k3)}
.au-o-loi{min-height:0;height:auto;padding:6px 9px;font-size:var(--co-nho);line-height:var(--cao-nho)}
.au-hong{background:var(--hong-nen)}
.au-tien{display:flex;align-items:center;gap:var(--k2);min-width:150px}
.au-thanh{flex:1;height:6px;border-radius:var(--bo-tron);background:var(--ke);overflow:hidden;min-width:100px}
.au-thanh > div{height:100%;background:var(--chinh);transition:width .2s}

/* ============================================================
   KHO TÀI NGUYÊN — B5
   ============================================================ */
.kho-than{display:grid;grid-template-columns:1fr 320px;gap:0;align-items:start}
.kho-than.mot-cot{display:block}
.kho-trai{padding:var(--k4) var(--k5);min-width:0}
.kho-phai{background:var(--the);border-left:1px solid var(--ke);min-height:calc(100vh - 210px)}
.kho-bao{padding:0 var(--k5)}
.kho-bao:empty{display:none}
.kho-bao .bao{margin:var(--k3) 0 0}
.kho-thanh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--k2);margin-bottom:var(--k3)}
.kho-thanh input[type=text]{width:200px}
.kho-loi{max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--co-nho)}
.kho-loi-day{font-size:var(--co-nho);line-height:var(--cao-nho);margin-bottom:10px}
.kho-dung{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kho-ds-dung{display:flex;flex-direction:column;gap:3px}
.kho-muc{display:flex;gap:var(--k2);align-items:baseline;padding:5px 7px;border-radius:var(--bo-be);
  text-decoration:none;color:var(--chu)}
.kho-muc:hover{background:var(--nen)}
.bang tr.dang{background:var(--chinh-nhat)}
.kho-ns{display:flex;align-items:center;gap:var(--k3);margin-bottom:10px}
.kho-ns .au-thanh{flex:1}

/* ============================================================
   XƯỞNG HÌNH — B6
   ============================================================ */
.hn-buoc{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--ke)}
.hn-buoc:last-of-type{border-bottom:none}
.hn-prompt{padding:8px 10px;background:var(--the-2);border:1px solid var(--ke);
  border-radius:var(--bo-nho);margin:0 0 8px;word-break:break-word;line-height:var(--cao-nho)}
.hn-anh{display:block;width:100%;max-width:260px;border-radius:var(--bo-nho);
  border:1px solid var(--ke);margin:0 0 10px;background:var(--the-2)}

/* ============================================================
   BỘ LUẬT KIỂM TRA — B7
   ============================================================ */
.kiem-ds{display:flex;flex-direction:column;gap:3px;padding:var(--k2) 0}
.kiem-dong{
  display:flex;align-items:center;gap:var(--k3);padding:6px 9px;
  border-radius:var(--bo-be);text-decoration:none;color:var(--chu);
  font-size:var(--co-nho);line-height:var(--cao-nho);
}
.kiem-dong:hover{background:var(--nen)}
.kiem-dong .tt{flex:0 0 auto;min-width:64px}
/* node bản đồ có lỗi cứng */
.bd-node.co-loi{border-color:var(--hong)}
.bd-node.co-loi::before{background:var(--hong)}
.bd-node.co-loi::after{background:var(--hong);box-shadow:0 0 0 3px var(--hong-nen)}