/* ══════════════════════════════════════════════════════════════════════════
   GEN UP · LỚP GIAO DIỆN DÙNG CHUNG  (option 2)
   ──────────────────────────────────────────────────────────────────────────
   MỘT nơi khai bảng màu, cỡ logo và chế độ sáng/tối cho TẤT CẢ các trang.

   Vì sao phải có file này: trước đây mỗi trang tự khai màu riêng, tự đặt cỡ
   logo riêng, và chỉ ba trang có nút sáng/tối. Đi từ trang này sang trang kia
   thấy logo nhảy cỡ, nền đổi sắc, bật chế độ sáng ở một trang thì trang sau
   vẫn tối — cảm giác như đang dùng ba sản phẩm khác nhau.

   CÁCH DÙNG: nhúng ngay TRƯỚC thẻ <style> của trang.
     <link rel="stylesheet" href="/assets/genup-ui.css">
   Trang nào đã có bảng màu riêng thì bảng đó vẫn thắng (nó nằm sau) — file
   này chỉ điền vào chỗ trống, không phá cái đang chạy tốt.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --gu-den:#08090C; --gu-den-2:#0F1216; --gu-den-3:#151920; --gu-side:#0B0D11;
  --gu-line:rgba(255,255,255,.085); --gu-line-2:rgba(255,255,255,.16);
  --gu-tx:#F2F6FA; --gu-tx-2:#CFD8E1; --gu-mut:#93A0AC;
  --gu-do:#DB1920; --gu-do-2:#F0333A;
  /* `--gu-tot` la bang goc rieng cua tep nay. Tro vao token nhan dien de khong thanh
     mot nguon mau thu hai; giu ma cu lam duong lui neu bo goc chua nap. */
  --gu-tot:var(--genup-blue-2, #4DA6FF); --gu-lam:#4DA6FF; --gu-vang:#F0B23A;
  --gu-logo:76px;

  /* ══════════════════════════════════════════════════════════════════════════════
     BÍ DANH KHÔNG TIỀN TỐ — thêm 26/08/2026
     ══════════════════════════════════════════════════════════════════════════════

     🔴 VÌ SAO PHẢI CÓ KHỐI NÀY.

     Rà toàn bộ `web/` ngày 26/08/2026: **76 chỗ** dùng biến màu KHÔNG được khai ở
     đâu cả. Tám trang — `goi-cuoc` · `growth` · `hieu-suat` · `video-mau` ·
     `xuong-noi-dung` · `ho-so-thuong-hieu` · `admin-key` · `creative-studio` —
     viết `var(--panel)` `var(--ink)` `var(--muted)` mà không trang nào khai chúng,
     và tệp này thì chỉ khai bộ `--gu-*` có tiền tố.

     CSS gặp biến không tồn tại thì BỎ QUA DÒNG ĐÓ và đi tiếp: không cảnh báo, không
     lỗi console. Nên các trang đó vẫn "chạy", chỉ là mất nền, mất viền, chữ rơi về
     màu mặc định. Không ai phát hiện suốt nhiều tháng vì nó không hỏng theo cách
     gây chú ý — chỉ trông rẻ tiền.

     Khai bí danh TRỎ VÀO `--gu-*` chứ không chép số: chép số là hai nguồn, và đổi
     màu ở một nơi thì nơi kia ở lại. Trỏ vào thì chế độ sáng/tối cũng theo luôn,
     miễn phí.

     ⚠️ Trang nào tự khai bộ này trong `<style>` của mình (`bang-dieu-khien.html`)
     thì bản của trang THẮNG — thẻ `<style>` đứng sau thẻ `<link>`. Đúng ý muốn:
     bí danh ở đây là lưới đỡ, không phải lệnh áp đặt. */
  --bg:var(--gu-den);
  --panel:var(--gu-den-2);
  --panel2:var(--gu-den-3);
  --card:var(--gu-den-2);
  --ink:var(--gu-tx);
  --text:var(--gu-tx-2);
  --muted:var(--gu-mut);
  --mut:var(--gu-mut);
  --line:var(--gu-line);
  --line2:var(--gu-line-2);
  --lam:var(--gu-lam);
  --red:var(--gu-do);
  --red-2:var(--gu-do-2);
  --do:var(--gu-do);
  --do-2:var(--gu-do-2);
  --den:var(--gu-den);
  --den-2:var(--gu-den-2);
  --den-3:var(--gu-den-3);
  --tx:var(--gu-tx);
  /* 🔴 DÒNG NÀY TẮC LẠI 06/09/2026: bản đổi tên hàng loạt đổi CẢ hai vế của
     `--green: var(--gu-xanh)` thành cùng một tên, ra `--status-success: var(--status-success)`.
     CSS coi biến tự trỏ vào chính nó là VÔ HIỆU và trả RỖNG — không lỗi, không cảnh
     báo, chỉ là mọi chỗ dùng `var(--status-success)` mất màu. Đo được trên 5 trang.
     Nay trỏ vào bảng gốc của chính tệp này, có đường lui là token nhận diện. */
  --status-success:var(--gu-tot, var(--genup-blue-2));
  --amber:var(--gu-vang);

  /* Các sắc phụ: nền rất nhạt của cùng một màu, dùng cho thẻ trạng thái. Khai bằng
     `color-mix` để chúng tự đổi theo nền sáng/tối thay vì đóng cứng một mã màu chỉ
     đúng ở nền tối. */
  --red-soft:color-mix(in srgb, var(--gu-do) 14%, var(--gu-den-2));
  --do-nhat:color-mix(in srgb, var(--gu-do) 14%, var(--gu-den-2));
  --status-success-nen:color-mix(in srgb, var(--status-success) 14%, var(--gu-den-2));
  --amber-soft:color-mix(in srgb, var(--gu-vang) 16%, var(--gu-den-2));
  --navy-soft:color-mix(in srgb, var(--gu-lam) 14%, var(--gu-den-2));

  --red-d:#B0141A;
  --navy:#1e2c5a;
  --navy-d:#141f42;
  --label:var(--gu-tx-2);
  --r:14px;                 /* bo góc chuẩn */
  --sh-sm:0 4px 14px rgba(0,0,0,.28);
}

/* Chế độ SÁNG.
   Không dùng `prefers-color-scheme` làm nguồn quyết định: khách bấm nút thì lựa
   chọn của khách phải thắng cài đặt máy, và phải giữ nguyên khi sang trang khác. */
:root[data-theme="light"]{
  --gu-den:#F4F6F9; --gu-den-2:#FFFFFF; --gu-den-3:#EEF2F6; --gu-side:#FFFFFF;
  --gu-line:rgba(10,20,30,.10); --gu-line-2:rgba(10,20,30,.18);
  --gu-tx:#0F1720; --gu-tx-2:#33414F; --gu-mut:#68788A;
}

/* ── Logo MỘT cỡ trên mọi trang ── */
.brand img, .gu-logo img, header .logo img{ height:var(--gu-logo); width:auto }

/* ── Nút đổi sáng/tối ──
   Đặt cố định góc dưới phải ở những trang chưa có chỗ cho nó trên thanh trên.
   Góc dưới phải vì đó là chỗ ít che nội dung nhất và tay đã quen tìm ở đó. */
.gu-nen{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--gu-den-2); color:var(--gu-tx);
  border:1px solid var(--gu-line-2);
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  transition:transform .16s, box-shadow .16s;
}
.gu-nen:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.45) }
.gu-nen svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
/* Hai hình trong một nút: hiện đúng cái ngược với chế độ đang dùng, vì nút này nói
   "bấm để sang chế độ kia" chứ không phải "đang ở chế độ này". */
.gu-nen .gu-toi{ display:block } .gu-nen .gu-sang{ display:none }
:root[data-theme="light"] .gu-nen .gu-toi{ display:none }
:root[data-theme="light"] .gu-nen .gu-sang{ display:block }

/* Trang nào đã có nút sáng/tối riêng trên thanh trên thì ẩn nút nổi này đi —
   hai nút cùng làm một việc trên một màn hình là thừa và gây phân vân. */
body:has(#doiNen) .gu-nen{ display:none }

/* ── Icon ba lối vào phụ: mỗi cái một màu đã quen mắt ── */
.hmuc.h-video svg{ stroke:#FF3D3D } .hmuc.h-video svg [fill]{ fill:#FF3D3D }
.hmuc.h-tin   svg{ stroke:var(--gu-lam) }
.hmuc.h-hotro svg{ stroke:var(--status-success) }

/* ── Chế độ sáng: kéo các trang CHƯA có bảng màu riêng theo cùng ──
   Chỉ áp cho trang có gắn dấu `gu-tu-dong`. Áp bừa cho mọi trang thì những trang
   đã tự lo màu sẽ bị đè và vỡ. */
:root[data-theme="light"] body.gu-tu-dong{ background:var(--gu-den); color:var(--gu-tx) }
:root[data-theme="light"] body.gu-tu-dong a{ color:inherit }

/* ══ NỀN SÁNG Ở TRANG TRONG: CHỈ KHU GIỮA SÁNG ══
   Chủ chốt: thanh trên và cạnh trái GIỮ ĐEN, chỉ vùng làm việc ở giữa chuyển trắng.

   Vì sao hợp lý: cạnh trái và thanh trên là "khung xe" — chúng giống nhau ở mọi màn hình
   và không phải thứ khách đọc. Để chúng tối thì khung đứng yên, và mắt tự dồn vào vùng
   trắng ở giữa, nơi có nội dung thật. Cho cả trang trắng thì khung và ruột hoà làm một,
   không còn ranh giới, nhìn loãng hẳn. */
:root[data-theme="light"] aside,
:root[data-theme="light"] header,
:root[data-theme="light"] .top{
  background:#0B0D11 !important; border-color:rgba(255,255,255,.085) !important;
}
:root[data-theme="light"] aside *,
:root[data-theme="light"] header *,
:root[data-theme="light"] .top *{ color:#CFD8E1 }
:root[data-theme="light"] aside .mi.on,
:root[data-theme="light"] aside .mi:hover,
:root[data-theme="light"] aside .nh-dau:hover{ background:rgba(255,255,255,.06) }
:root[data-theme="light"] aside .mi.on *{ color:#fff }
:root[data-theme="light"] .side-foot{ background:rgba(255,255,255,.04) !important }
:root[data-theme="light"] .side-foot b{ color:#fff }
:root[data-theme="light"] .nang-cap{ background:rgba(219,25,32,.10) !important }
:root[data-theme="light"] .nang-cap .nc-dau{ color:#fff }
:root[data-theme="light"] .hmuc{ background:rgba(255,255,255,.05) !important }
:root[data-theme="light"] .hmuc:hover{ background:rgba(255,255,255,.10) !important }
/* Nút bấm trên thanh trên giữ màu gốc của nó — ép xám thì nút Kích hoạt mất hẳn màu đỏ. */
:root[data-theme="light"] header button[id],
:root[data-theme="light"] header .hlogin,
:root[data-theme="light"] header .hsignup,
:root[data-theme="light"] header .btn{ color:inherit }

/* Khu giữa — chỗ DUY NHẤT chuyển sáng. */
:root[data-theme="light"] main,
:root[data-theme="light"] .wrap,
:root[data-theme="light"] body{ background:#F4F6F9; color:#0F1720 }
:root[data-theme="light"] main .tin.may{ background:#fff; border:1px solid rgba(10,20,30,.10) }
:root[data-theme="light"] main .chat-o,
:root[data-theme="light"] main .cong-bang,
:root[data-theme="light"] main .pub-nen,
:root[data-theme="light"] main .tien{ background:#fff; border-color:rgba(10,20,30,.10) }
:root[data-theme="light"] main .pub-dong,
:root[data-theme="light"] main .pub-in{ background:#EDF1F6; border-color:rgba(10,20,30,.10); color:#33414F }
/* SÁU TAB ỨNG DỤNG ở trang trong giữ nền xanh than đen chữ trắng ở CẢ HAI nền — y hệt sáu
   nút chính ngoài trang chủ. Cùng một việc (chọn ứng dụng) thì phải cùng một hình hài; để
   nó nhạt theo nền sáng là chỗ khách bấm nhiều nhất lại chìm nhất. */
:root[data-theme="light"] main .tabs button{ background:#0E1B2E; color:#fff;
  border-color:rgba(255,255,255,.12) }
:root[data-theme="light"] main .tabs button:hover{ background:#16283F }
:root[data-theme="light"] main .tabs button.on{ background:#16345E; color:#fff }
:root[data-theme="light"] main .chat-trong,
:root[data-theme="light"] main .ghi{ color:#68788A }
:root[data-theme="light"] .wrap:has(#chatDs) > .chat-khu{
  background:linear-gradient(transparent,#F4F6F9 26%) }

/* ── Rê chuột trên nền ĐEN: sáng lên tông #1A1A1A ──
   Lớp trắng mờ 5% trên nền #08090C gần như không nhích lên chút nào — rê chuột vào mà
   không thấy gì đổi thì khách không biết cái đó bấm được. Tông #1A1A1A đủ tách khỏi nền
   để mắt bắt được, mà vẫn nằm trong dải tối, không loé. */
/* KHÔNG đụng tới `.c2:hover` và `.bang:hover` — hai cái đó đã có viền gradient xanh-đỏ
   chạy vòng quanh, và luật này nằm SAU nên đặt `background` vào là ĐÈ CHẾT hiệu ứng đó.
   Đúng lỗi vừa gây ra: chủ báo "viền màu chạy quanh nút tự nhiên mất tiêu". */
/* `.tabs button:hover` cũng KHÔNG được vào đây — sáu nút đó nằm trong nhóm viền gradient
   chạy, đặt `background` vào là đè chết y như đã làm với thẻ ứng dụng. Danh sách dưới đây
   chỉ gồm những thứ KHÔNG có hiệu ứng viền: cạnh trái, ba lối vào phụ, nút phụ. */
:root:not([data-theme="light"]) .mi:hover,
:root:not([data-theme="light"]) .nh-dau:hover,
:root:not([data-theme="light"]) .hmuc:hover,
:root:not([data-theme="light"]) .cb:hover,
:root:not([data-theme="light"]) .che-do button:hover,
:root:not([data-theme="light"]) .chon button:hover,
:root:not([data-theme="light"]) .pub-dau:hover,
:root:not([data-theme="light"]) .nut.phu:hover,
:root:not([data-theme="light"]) .ibtn:hover{ background:#1A1A1A }

/* ══ CHỮ VÀ LOGO ĐỒNG NHẤT TỪ NGOÀI VÀO TRONG ══
   Đo lại 04/08: logo đang là 64px ở trang bìa, 52px ở trang trong, 46px ở bảng điều khiển,
   38px ở xưởng. Đi từ trang này sang trang kia thấy logo NHẢY CỠ — cảm giác như bốn sản
   phẩm ghép lại, dù chữ và màu đã giống nhau.

   Một cỡ cho MỘT VỊ TRÍ:
     · logo đầu cột trái  →  52px   (chỗ này rộng, logo là mỏ neo thương hiệu)
     · logo trên thanh ngang → 40px (thanh chỉ cao ~65px, để to hơn là chật) */
/* Cỡ logo: khai DUY NHẤT ở đây cho mọi trang, mọi vị trí.
   Logo là thứ đầu tiên mắt chạm tới — nhỏ hơn mức này thì nó thành một nhãn phụ nằm
   cạnh menu, không còn là thương hiệu. */
.brand img, .gu-logo img, header .logo img{ height:var(--gu-logo) !important; width:auto !important }
.top img{ height:56px !important; width:auto !important }
/* Màn hình hẹp: cạnh trái nằm ngang thành một dải trên cùng, logo 76px chiếm gần hết
   chiều cao dải đó. Hạ xuống 56px cho vừa, vẫn to hơn hẳn bản cũ. */
@media(max-width:1080px){
  .brand img, .gu-logo img, header .logo img{ height:56px !important }
}
.brand{ display:flex; align-items:center }

/* Chữ: một bộ phông duy nhất cho mọi trang. Trang nào khai thiếu thì lấy ở đây, khai rồi
   thì trùng khớp — không trang nào rơi về phông hệ thống. */
:root{ --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Arial,sans-serif }
body, button, input, textarea, select{ font-family:var(--sans) }

/* ══ VIỀN CHẠY MẢNH HƠN NỮA ══
   1px là mức mỏng nhất CSS vẽ được trên màn thường. Muốn mảnh hơn thì phải đi hai đường:

   · Màn nét cao (Retina, 2x trở lên) vẽ được nửa điểm ảnh — hạ xuống 0.5px, đường chỉ còn
     một nửa bề dày mà vẫn sắc.
   · Trên mọi màn: hạ ĐỘ CHÓI của dải màu. Mắt đọc "dày" không chỉ theo bề rộng mà cả theo
     độ sáng — một đường 1px rực chói trông dày hơn hẳn một đường 1px dịu. Đây mới là chỗ
     quyết định cảm giác "mảnh và sang". */
.c2,.bang,.tabs button,.kn-the,.tv-o,.tt-duan,.tabs .tab-ra,.tabs .tab-ud{
  border-width:1px !important;
}
@media (min-resolution:2dppx){
  .c2,.bang,.tabs button,.kn-the,.tv-o,.tt-duan,.tabs .tab-ra,.tabs .tab-ud{ border-width:.5px !important }
}
/* Dải màu dịu lại: bớt số chặng và hạ độ bão hoà. Dải cũ nhảy qua sáu màu rực nên đường
   viền lấp lánh như đèn nháy; ba chặng dịu thì nó lướt mượt như một vệt sáng. */
.c2:hover,.bang:hover,.tabs button:hover,.kn-the:hover,.tv-o:hover,.tt-duan:hover{
  filter:saturate(.82) brightness(.94);
}

/* ══ PHÔNG TIÊU ĐỀ: MẢNH VÀ CAO ══
   Đổi `--hoa` từ Anton sang Oswald. Cùng dáng cao–hẹp nhưng nét mảnh hơn nhiều.
   Weight 400 thay vì 700+: ở cỡ tiêu đề, nét 400 của một phông hẹp đã đủ chắc; thêm đậm
   chỉ làm chữ bí lại — đúng cái chủ gọi là "mập, tròn, kém sang". */
:root{ --hoa:"Oswald","Anton","Plus Jakarta Sans",Impact,system-ui,sans-serif }
.c2t,.bt,#tenKhu,.hero .to,h1{
  font-family:var(--hoa) !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
}
.c2t,.bt{ line-height:1.0 !important }
.hero .to{ font-weight:400 !important; letter-spacing:.015em !important }
#tenKhu{ font-weight:400 !important; letter-spacing:.03em !important }
/* Chữ nhấn trong tiêu đề đậm hơn MỘT bậc, không hai — nhảy quá xa thì hai nửa dòng tiêu đề
   trông như hai phông khác nhau. */
.hero .to em,#tenKhu em,#tenKhu b{ font-weight:500 !important }

/* ══ NÚT KẾT NỐI DỮ LIỆU — dựng lại cho gọn ══
   Ba lỗi trong ảnh chủ gửi:
     · Quầng sáng 4px quanh vòng tròn hiện thành một VÒNG XÁM DÀY, nhìn như hai vòng lồng
       nhau — bỏ hẳn, chỉ giữ viền xanh mảnh.
     · Dấu + đặt lệch -7px nên bay hẳn ra ngoài, rời khỏi vòng tròn. Kéo sát mép.
     · Hai dòng chữ căn giữa nên lệch nhau; căn TRÁI thì mép chữ thẳng hàng. */
/* Khối cũ ở đây đã gỡ — xem khối "MỘT HÌNH SVG DUY NHẤT" bên dưới. */

/* ══════════════════════════════════════════════════════════════════════════
   RÀ LẠI 04/08 — GOM MỌI LUẬT VỀ LỚP CHUNG
   Nhiều thứ chủ yêu cầu tôi chỉ áp cho hai trang chính, còn hơn chục trang
   khác vẫn theo kiểu cũ. Sửa từng trang thì lần sau lại sót; đưa hết vào đây
   thì mọi trang — kể cả trang thêm sau này — đều nhận.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① NỀN LIỀN MỘT KHỐI, không ngăn viền khúc khúc.
   Mỗi phần tự vẽ một đường kẻ ở đáy; xếp chồng lên nhau thành nhiều vệt xám cắt ngang
   màn hình, nhìn ra ngay là ghép từ nhiều mảnh. */
:root:not([data-theme="light"]) header,
:root:not([data-theme="light"]) .hero,
:root:not([data-theme="light"]) footer,
:root:not([data-theme="light"]) .chan2,
:root:not([data-theme="light"]) .mini{ border-top:0 !important; border-bottom:0 !important }
:root:not([data-theme="light"]) aside{ border-right:0 !important }

/* ② Cạnh trái nhạt hơn nền chính một bậc — chênh sắc phân khu, không cần kẻ viền. */
:root:not([data-theme="light"]) aside{ background:#12151A }

/* ③ Phông tiêu đề MẢNH VÀ CAO trên mọi trang. */
h1,h2,.bt,.c2t,.banner-brand .bt,#tenKhu,.hero .to{
  font-family:"Oswald","Plus Jakarta Sans",system-ui,sans-serif !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
}
h1 em,h2 em,.bt em,#tenKhu em,#tenKhu b,.hero .to em{ font-weight:500 !important; font-style:normal }

/* ④ Rê chuột trên nền tối sáng lên #1A1A1A — trừ những thứ có viền gradient chạy. */
:root:not([data-theme="light"]) .mi:hover,
:root:not([data-theme="light"]) .hmuc:hover,
:root:not([data-theme="light"]) .nut.phu:hover,
:root:not([data-theme="light"]) .ibtn:hover,
:root:not([data-theme="light"]) .pane .card:hover{ background:#1A1A1A }

/* ⑤ Icon Hỗ trợ trắng xám, không xanh lá (xanh lá chỉ mang nghĩa "đang chạy"). */
.hmuc.h-hotro svg{ stroke:#C6CFDA }

/* ⑥ `[hidden]` phải THẮNG mọi luật display — nếu không, phần tử được bảo ẩn vẫn hiện. */
[hidden]{ display:none !important }

/* ══ DẤU + TRÊN NÚT KẾT NỐI DỮ LIỆU ══
   Trước dùng thẻ chữ `<b>+</b>` đặt tuyệt đối. Ký tự "+" của mỗi phông có chiều cao và
   khoảng đệm khác nhau, nên nó lệch tâm và trông méo — mà lệch bao nhiêu thì tuỳ máy khách
   đang dùng phông nào, sửa bằng cách đẩy toạ độ là sửa hoài không xong.

   Nay vẽ bằng SVG: hai nét thẳng dài bằng nhau, cắt nhau ở đúng tâm. Hình học cố định,
   không phông nào ảnh hưởng được. */
.chat-noi .ic .cong,.pub-noi .ic .cong{
  position:absolute; top:-6px; left:-6px;
  width:18px; height:18px; border-radius:50%;
  background:#2f6bff; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--gu-den,#08090C);
  font-style:normal;
}
.chat-noi .ic .cong svg,.pub-noi .ic .cong svg{
  width:11px; height:11px; display:block;
}
/* Thẻ <b> cũ nếu còn sót ở đâu thì giấu đi, đừng để hai dấu + chồng nhau. */
.chat-noi .ic > b,.pub-noi .ic > b{ display:none }

/* ══ VIỀN GRADIENT CHẠY — khai ở ĐÂY để mọi trang đều dùng được ══
   Trước đây `@property --goc` và `@keyframes vienChay` chỉ khai trong trang chủ và trang
   ứng dụng. Trang nào khác muốn dùng hiệu ứng ấy thì viền im lìm — cùng một sản phẩm mà
   trang này có, trang kia không. Khai lại ở trang nào đó cũng vô hại (cùng giá trị), nhưng
   khai một nơi thì không trang nào bị bỏ quên. */
@property --goc { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes vienChay { to { --goc: 360deg; } }

/* ══ MENU TÀI KHOẢN sổ xuống từ icon người dùng ══ */
.tk-boc{position:relative;display:inline-flex}
/* Nền XÁM ĐEN chứ không đen tuyền: thanh trên và cả trang đều tối, hộp đen tuyền nằm trên
   đó gần như dính liền nền — mắt phải dò mới thấy ranh giới hộp.
   Đẩy sang trái 10px cho hộp không dán sát mép phải cửa sổ. */
.tk-hop{position:absolute;top:calc(100% + 10px);right:10px;width:min(280px,88vw);z-index:80;
  background:#1A1F27;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:5px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);display:none}
.tk-hop.mo{display:block}
.tk-dau{padding:10px 10px 3px}
.tk-dau b{display:block;color:#fff;font-size:14px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tk-dau span{display:block;color:#93A0AC;font-size:12px;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tk-goi{margin:6px 10px 7px;padding:6px 9px;border-radius:9px;background:rgba(77,166,255,.12);
  color:#8FC4FF;font-size:11.5px;font-weight:700}
.tk-muc{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:10px;
  background:none;color:#CFD8E1;font:inherit;font-size:13.5px;text-decoration:none;cursor:pointer}
.tk-muc:hover{background:#1A1A1A;color:#fff}
.tk-vach{height:1px;background:rgba(255,255,255,.10);margin:5px 6px}
.tk-ra{color:#F0333A}
.tk-ra:hover{background:rgba(219,25,32,.14);color:#FF6B70}


/* Khối dưới đây CHÉP TỪ trang-chu.html sang, để mọi trang dùng vỏ chung cũng có.
   Vì sao phải chuyển: vỏ chung DỰNG sẵn hộp chia sẻ trên thanh trên, nhưng CSS của nó
   lại chỉ nằm trong hai trang chính. Trang nào khác mở lên là hộp bung ra không kiểu
   dáng, chữ và ô nhập đổ tràn đè lên thanh trên — đúng cảnh trang Chia sẻ ngày 04/08.
   Quy tắc rút ra: cái gì vỏ chung DỰNG thì CSS của nó phải nằm ở tệp dùng chung. */
/* ══ HỘP CHIA SẺ NHANH trên thanh trên ══
   Nút này trước đây là một đường dẫn: bấm là rời trang đang làm để sang trang cộng tác
   viên. Nhưng thứ khách cần lúc bấm chỉ là CÁI LINK — lấy xong quay lại. Bắt rời trang cho
   một việc dài hai giây thì lần sau không ai bấm nữa. */
.cs-boc{position:relative;display:inline-flex}
.cs-hop{position:absolute;top:calc(100% + 10px);right:0;width:min(340px,88vw);z-index:80;
  background:var(--den-2,#0F1216);border-radius:16px;padding:16px;display:none;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.cs-hop.mo{display:block}
.cs-hop h4{margin:0 0 4px;font-size:13.5px;font-weight:700}
.cs-hop p{margin:0 0 12px;font-size:12px;color:var(--mut,#93A0AC);line-height:1.55}
.cs-o{display:flex;gap:8px;margin-bottom:12px}
.cs-o input{flex:1;min-width:0;background:#171B22;border:0;border-radius:10px;padding:10px 12px;
  color:var(--tx,#F2F6FA);font:600 12px ui-monospace,Menlo,monospace;outline:none}
.cs-o button{flex:none;border:0;border-radius:10px;padding:10px 14px;background:#2f6bff;color:#fff;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.cs-o button:hover{background:#2559d8}
.cs-ds{display:flex;gap:8px;flex-wrap:wrap}
.cs-ds a,.cs-ds button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;
  border-radius:999px;background:#171B22;color:var(--tx-2,#CFD8E1);font:inherit;font-size:12px;
  text-decoration:none;cursor:pointer}
.cs-ds a:hover,.cs-ds button:hover{background:#1A1A1A;color:var(--tx,#fff)}
.cs-xem{display:block;margin-top:12px;font-size:12px;color:var(--mut,#93A0AC);text-decoration:none}
.cs-xem:hover{color:var(--tx,#fff)}
:root[data-theme="light"] .cs-hop{background:#fff}
:root[data-theme="light"] .cs-o input,
:root[data-theme="light"] .cs-ds a,
:root[data-theme="light"] .cs-ds button{background:#EDF1F6}


/* ══════════ NỀN SÁNG: LẬT NỐT NHỮNG MẢNG TỐI CÒN SÓT TRONG KHU GIỮA ══════════
   Khu giữa chuyển sáng, nhưng mọi khối dựng sau này (Hồ sơ, Gói cước, Thư viện, Hỗ trợ,
   Dự án, Kết nối, chatbot…) đều khai nền tối bằng mã màu cứng. Kết quả trên nền sáng:
   thẻ đen giữa trang trắng, và tệ hơn — chữ tối trên nền tối, đọc không ra.

   Gom một chỗ theo BA BẬC đúng như bản tối:
     nền trang  →  thẻ (trắng)  →  ô nhỏ trong thẻ (xám nhạt)
   Sửa từng chỗ khi phát hiện thì lần sau thêm khối mới lại quên một chỗ nữa. */

/* Bậc 2 — THẺ: trắng. */
:root[data-theme="light"] main .hs-hop,
:root[data-theme="light"] main .ht-hop,
:root[data-theme="light"] main .ht-bot,
:root[data-theme="light"] main .ht-the,
:root[data-theme="light"] main .tv-o,
:root[data-theme="light"] main .da-o,
:root[data-theme="light"] main .gc-the,
:root[data-theme="light"] main .kn-the,
:root[data-theme="light"] main .kn-nha,
:root[data-theme="light"] main .hc-tin{ background:#fff !important; color:#0F1720 }

/* Bậc 1b — KHUNG BAO quanh nhóm thẻ: xám rất nhạt, để thẻ trắng nổi lên. */
:root[data-theme="light"] main .kn-luoi,
:root[data-theme="light"] main .kn-hop,
:root[data-theme="light"] main .gc-nay,
:root[data-theme="light"] main .gc-kh,
:root[data-theme="light"] main .gc-gat,
:root[data-theme="light"] main .tv-tab button,
:root[data-theme="light"] main .da-loc,
:root[data-theme="light"] main .tv-luoi,
:root[data-theme="light"] main .ht-luoi,
:root[data-theme="light"] main .da-them-nua{ background:#E9EDF3 !important; color:#0F1720 }

/* Bậc 3 — Ô NHỎ trong thẻ: xám nhạt, chữ tối. */
:root[data-theme="light"] main .hs-in,
:root[data-theme="light"] main .ht-in,
:root[data-theme="light"] main .gc-o input,
:root[data-theme="light"] main .hb-o,
:root[data-theme="light"] main .hb-goi button,
:root[data-theme="light"] main .hb-tin.may,
:root[data-theme="light"] main .hb-sdt input,
:root[data-theme="light"] main .cs-o input,
:root[data-theme="light"] main .hs-nut.phu{ background:#EDF1F6 !important; color:#0F1720 !important }

/* Chữ phụ trong khu giữa: xám ĐẬM. Xám nhạt của bản tối nằm trên nền trắng chỉ còn ~2:1. */
:root[data-theme="light"] main .hs-mo,
:root[data-theme="light"] main .gc-y,
:root[data-theme="light"] main .tv-o p,
:root[data-theme="light"] main .kn-the span,
:root[data-theme="light"] main .ht-the span,
:root[data-theme="light"] main .hb-tin.may{ color:#4A5566 }

/* Tiêu đề khu: chữ trắng trên nền trắng là lỗi nặng nhất — mất hẳn tên màn đang đứng. */
:root[data-theme="light"] main #tenKhu,
:root[data-theme="light"] main .tt-app,
:root[data-theme="light"] main .gc-dau h2,
:root[data-theme="light"] main .kn h2,
:root[data-theme="light"] main .ht-h2,
:root[data-theme="light"] main h2,
:root[data-theme="light"] main h3{ color:#0F1720 }

/* ══ TIN CỦA KHÁCH: XANH NHẠT, NÉP PHẢI, ÔM VỪA CHỮ ══  (đổi 07/08/2026)
   Trước đây chỗ này ghim nền xanh đậm #12233f chữ trắng, kèm ghi chú "mảng tương phản có
   chủ ý". Chủ xem lại và bác: "lời thoại người dùng màu xanh đậm nhìn ghê quá và kéo dài
   quá, chỉ nên nằm bên phải", kèm ảnh Gemini làm mẫu.
   Chủ đúng: câu của khách là câu họ VỪA GÕ XONG, đâu cần đọc lại. Thứ cần đọc là câu trả
   lời. Tô một mảng đậm cho câu của khách là bắt mắt dừng ở chỗ ít giá trị nhất màn hình.

   ĐỔI Ở ĐÂY, tệp dùng chung — không đổi trong từng trang. Luật này có `main` nên độ mạnh
   cao hơn mọi luật khai trong trang, cộng `!important`: sửa ở trang là vô ích, và đó đúng
   là cái bẫy vừa mất một vòng để tìm ra. Một chỗ khai, mọi khung chat cùng đổi — kể cả
   bong bóng bên Hộp thư (`.hb-tin`). */
:root[data-theme="light"] main .hb-tin.toi,
:root[data-theme="light"] main .tin.toi{ background:#E9F0FA !important; color:#16202E !important }

/* Nền tối: cùng sắc xanh nhưng là lớp sáng mờ trên nền đêm, chữ sáng trở lại. Bê nguyên
   #E9F0FA sang nền tối thì bong bóng trắng loá giữa màn hình đen. */
:root:not([data-theme="light"]) .hb-tin.toi,
:root:not([data-theme="light"]) .tin.toi{ background:rgba(125,175,255,.16); color:#EAF2FF }

/* Hình dáng bong bóng — dùng chung cho mọi khung chat, không theo nền sáng/tối.
   `width:fit-content` mới là thứ làm khối co đúng bằng chữ. Chỉ đặt `max-width` là chưa
   đủ: đó là TRẦN chứ không phải bề rộng thật, khối vẫn giãn hết trần vì nó chiếm cả dòng.
   Góc dưới-phải vuốt nhỏ để bong bóng "chỉ" về phía người nói. */
.hb-tin.toi, .tin.toi{
  width:fit-content; max-width:min(76%, 520px);
  margin-left:auto; margin-right:0; border:0;
  border-radius:18px 18px 5px 18px; padding:11px 16px;
}
/* Câu của AI KHÔNG có bong bóng: chữ trơn chạy hết bề ngang. Câu trả lời thường dài và có
   bảng, gạch đầu dòng, khối mã — nhét vào bong bóng là bó hẹp lại, đọc mệt. */
.tin.may{ width:auto; max-width:100%; margin-left:0; margin-right:0 }


/* ══ PHÂN KHU BẰNG MẢNG MÀU, KHÔNG BẰNG NÉT KẺ ══
   Chủ chốt, nhắc lại nhiều lần: "chỉ phân bằng mảng màu, không có viền".
   Bỏ nét kẻ giữa cạnh trái và khu giữa thì phải bù lại bằng chênh sáng, không thì hai vùng
   dính làm một. Cạnh trái sáng hơn nền trang một bậc là đủ — mắt đọc ra ranh giới mà không
   cần một nét nào. */
:root:not([data-theme="light"]) aside,
:root:not([data-theme="light"]) .app>aside{ background:#0C1015 }
aside, .app>aside, header, .app>main>header{ border-right-width:0 !important; border-bottom-width:0 !important }


/* ══ RÊ CHUỘT: SÁU NÚT CHỨC NĂNG NHÍCH LÊN GIỐNG THẺ LỚN ══
   Chủ chốt: "khi rê chuột nó động nhấp lên nhấp xuống giống các hình lớn chính".
   Khai ở tệp DÙNG CHUNG nên sáu nút ngoài trang bìa và sáu tab trong trang ứng dụng động
   y hệt nhau — cùng một việc thì phải cùng một phản hồi.

   CHỈ đặt `transform`, tuyệt đối không đặt `background` ở đây: mấy nút này đang có viền
   gradient chạy dựng bằng hai lớp background-clip, đặt background vào là ĐÈ CHẾT hiệu ứng
   đó. Đã làm hỏng đúng kiểu này hai lần rồi. */
.chip, .tabs button, .tabs .tab-ra,.tabs .tab-ud{
  transition: transform .16s cubic-bezier(.2,.7,.3,1), background .15s, color .15s;
}
.chip:hover, .tabs button:hover, .tabs .tab-ra:hover,.tabs .tab-ud:hover{ transform: translateY(-3px) }
/* Bấm xuống thì nút lún lại một chút — đó là nửa còn lại của cảm giác "nhấp lên nhấp xuống". */
.chip:active, .tabs button:active, .tabs .tab-ra:active,.tabs .tab-ud:active{ transform: translateY(-1px) }
@media (prefers-reduced-motion: reduce){
  .chip:hover, .tabs button:hover, .tabs .tab-ra:hover,.tabs .tab-ud:hover,
  .chip:active, .tabs button:active, .tabs .tab-ra:active,.tabs .tab-ud:active{ transform: none }
}


/* Trang cũ nạp thêm genup-app.css, trong đó khối .brand có đệm nhỏ và một đường kẻ dưới —
   logo 76px bị bó lại và cắt mất phần trên. Nói lại cho đúng vỏ chung: */
.app > aside .brand{ padding:22px 20px 18px !important; border-bottom:0 !important;
  background:transparent !important; overflow:visible }
.app > aside .brand img{ max-height:none !important }


/* ══ NÚT TRONG HỘP THOẠI ĐỘNG GIỐNG HỆT NÚT NGOÀI TRANG ══
   Chủ chốt: "chỉnh luôn vào trong hộp thoại cũng đồng bộ".
   Hộp thoại là phần khách bấm nhiều nhất khi làm việc thật (nhập kết nối, lưu cài đặt).
   Nút ngoài trang nhích lên khi rê, nút trong hộp thoại đứng im — cùng một sản phẩm mà
   hai nơi phản hồi khác nhau thì cái nào cũng thấy sai sai.

   Vẫn giữ đúng luật cũ: CHỈ đặt `transform`, không đặt `background`. Nhiều nút trong hộp
   thoại có nền riêng (đỏ, xanh đêm, trắng); đặt nền ở đây là xoá sạch màu của chúng. */
.hop-nut, .hop-o button, .gc-o button, .gc-the, .hs-nut, .goi-sau,
.cs-o button, .cs-ds a, .cs-ds button, .hb-goi button, .hb-o button, .hb-sdt button,
.tk-muc, .hc-x, .btn{
  transition: transform .16s cubic-bezier(.2,.7,.3,1), background .15s, color .15s;
}
.hop-nut:hover, .hop-o button:hover, .gc-o button:hover, .hs-nut:hover, .goi-sau:hover,
.cs-o button:hover, .cs-ds a:hover, .cs-ds button:hover, .hb-goi button:hover,
.hb-o button:hover, .hb-sdt button:hover, .btn:hover{ transform: translateY(-2px) }
.hop-nut:active, .hop-o button:active, .gc-o button:active, .hs-nut:active,
.cs-o button:active, .hb-o button:active, .hb-sdt button:active, .btn:active{
  transform: translateY(0);
}
/* Thẻ gói trong hộp Gói cước cũng là thứ bấm được — cho nó nhích như thẻ lớn. */
.gc-the:hover{ transform: translateY(-3px) }
@media (prefers-reduced-motion: reduce){
  .hop-nut:hover, .hop-o button:hover, .gc-o button:hover, .hs-nut:hover, .goi-sau:hover,
  .cs-o button:hover, .cs-ds a:hover, .cs-ds button:hover, .hb-goi button:hover,
  .hb-o button:hover, .hb-sdt button:hover, .btn:hover, .gc-the:hover{ transform: none }
}


/* ══════════ NÚT KẾT NỐI DỮ LIỆU — DỰNG LẠI ĐÚNG BẢN VẼ CHỦ GỬI ══════════
   Bản vẽ: một vòng tròn XANH ĐÊM đặc, hai mũi tên trắng ở giữa, quanh nó một VÒNG XÁM
   dày vừa phải, và dấu + xanh nhỏ nhô ra ở góc trên trái. Chữ "Kết nối / Dữ liệu" hai
   dòng nằm bên phải, căn trái.

   Bản trước dùng viền xanh mảnh — trên nền đen nó chìm, trên nền trắng thì vòng tròn
   xanh đêm dính vào nền xám nhạt. Vòng xám bao ngoài giải quyết cả hai: nó tách vòng
   tròn khỏi nền ở BẤT KỲ nền nào, vì nó nằm giữa hai độ sáng. */
/* ══════════════════════════════════════════════════════════════════════════════
   NÚT "KẾT NỐI DỮ LIỆU" — MỘT HÌNH SVG DUY NHẤT, đúng hai bản mẫu chủ gửi 05/08

   Trước đây nút này được ghép bằng CSS: một khối vuông bo tròn + `box-shadow` giả làm vòng
   xám + một thẻ <i> giả làm dấu cộng. Ghép kiểu đó thì mỗi nơi khai một cỡ, và trong tệp này
   có tới BA khối cùng khai nó — nên sửa chỗ này thì chỗ kia vẫn cũ, và tôi đã sửa hụt nhiều lần.

   Nay vẽ thẳng bằng SVG: vòng xám, tròn xanh đêm, hai mũi tên, dấu cộng đều nằm trong MỘT
   hình. Hình vẽ ra sao thì mọi nơi giống hệt nhau, không còn gì để lệch.

   Nền đen và nền trắng chỉ khác đúng MỘT thứ — độ đậm của vòng xám. Vòng ấy nằm giữa hai độ
   sáng nên tách được vòng tròn khỏi nền ở cả hai bên; trên nền trắng thì nhạt bớt, không thì
   nó thành một vòng chì đậm giữa trang trắng.
   ══════════════════════════════════════════════════════════════════════════════ */
.gu-noi-ic{ width:46px; height:46px; flex:none; display:block; overflow:visible }
/* Màu đo THẲNG TỪ ẢNH chủ gửi 06/08 — không tự chọn màu gần giống.
   Vòng xám là thứ tách vòng tròn khỏi nền ở CẢ nền đen lẫn nền trắng, vì nó nằm giữa hai
   độ sáng; trên nền trắng thì nhạt bớt, không thì thành một vòng chì đậm giữa trang trắng. */
.gu-noi-vong{ fill:none; stroke:#9C9EA3; stroke-width:27 }      /* vòng xám — nền ĐEN   */
.gu-noi-tron{ fill:#0A2240 }                                     /* tròn xanh đêm        */
.gu-noi-ten { fill:#fff; stroke:none }                           /* hai mũi tên trắng    */
/* Dấu cộng nằm HẲN NGOÀI vòng, phía trên-trái — đúng ảnh. Nét vuông đầu, không bo tròn. */
.gu-noi-cong{ fill:none; stroke:#2F80ED; stroke-width:15; stroke-linecap:butt }
:root[data-theme="light"] .gu-noi-vong{ stroke:#D2D4D7 }         /* vòng xám — nền TRẮNG */

.chat-noi .ic, .pub-noi .ic{
  width:46px !important; height:46px !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  overflow:visible !important; display:grid; place-items:center;
  transition:transform .15s;
}
.chat-noi:hover .ic, .pub-noi button:hover .ic{ transform:translateY(-2px) }
.chat-noi:hover .gu-noi-vong, .pub-noi button:hover .gu-noi-vong{ stroke:#B4BAC1 }
:root[data-theme="light"] main .chat-noi:hover .gu-noi-vong,
:root[data-theme="light"] main .pub-noi button:hover .gu-noi-vong{ stroke:#AEB4BB }

/* Chữ: nền tối thì sáng, nền sáng thì tối — chứ không cố định một màu rồi chìm một bên. */
.chat-noi .ch, .pub-noi .ch{
  text-align:left; line-height:1.25 !important; font-size:12.5px !important;
  font-weight:600; white-space:nowrap; color:var(--tx-2,#CFD8E1);
}
:root[data-theme="light"] main .chat-noi .ch,
:root[data-theme="light"] main .pub-noi .ch{ color:#33414F }
.chat-noi, .pub-noi{ gap:13px !important; align-items:center }

/* ══════════ NÚT TRÊN TỪNG DÒNG KÊNH — CÙNG MỘT CHIỀU CAO, CÙNG MỘT LUẬT MÀU ══════════
   Ba lỗi nhìn thấy trong ảnh: nút "Nối ngay" mang màu xám của trạng thái CHẾT, nút "Đăng
   ngay" đỏ nhạt như bị mờ, và các ô cao thấp lệch nhau nên cả dòng gãy. */
.pub-dong .pub-in,
.pub-dong .pub-tt,
.pub-dong .pub-ngay,
.pub-dong .pub-ic{ height:46px !important; box-sizing:border-box }
.pub-dong .pub-in,
.pub-dong .pub-tt,
.pub-dong .pub-ngay{ padding-top:0 !important; padding-bottom:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center }
.pub-dong .pub-in{ justify-content:flex-start }

/* CHƯA NỐI là việc PHẢI làm trước tiên → nút đỏ, chữ trắng, ở cả hai nền.
   Xám là màu của thứ đã tắt; tô xám lên việc cần làm là dạy khách bỏ qua nó. */
/* Nút "Kết nối" ở TỪNG DÒNG đã gỡ hẳn — bày mười cái nút cho mười dòng là bắt bấm mười lần
   cho một việc đã xong từ lần đầu. Cấp quyền nay làm MỘT LẦN cho cả nền tảng (.pub-quyen).
   Chỗ này giờ chỉ còn NHÃN trạng thái: không bấm được, và không cần bấm. */
.pub-tt.cho{ background:rgba(127,127,127,.14) !important; color:var(--mut) !important;
  cursor:default !important; font-weight:600 !important; font-size:12.5px !important }
/* ĐÃ NỐI là trạng thái, không phải việc → xanh đêm trầm, không tranh chỗ với nút đỏ. */
.pub-tt.noi{ background:#12233F !important; color:#fff !important }
:root[data-theme="light"] main .pub-tt.noi{ background:#1E3A66 !important }

/* "Đăng ngay" khi chưa nối được thì phải nhìn ra là TẮT — xám hẳn, không phải đỏ nhạt.
   Đỏ nhạt trông như nút hỏng, khách vẫn bấm rồi không hiểu vì sao không có gì xảy ra. */
.pub-ngay:disabled{ background:#3A4048 !important; color:#8A94A0 !important; cursor:not-allowed }
:root[data-theme="light"] main .pub-ngay:disabled{ background:#DDE2E8 !important; color:#8A94A0 !important }
.pub-ngay:not(:disabled):hover{ background:var(--do-2,#F0333A) !important }

/* Nút "!" kiểm tra kết nối: vuông cùng cỡ, không viền, nền theo tông ô nhập. */
.pub-dong .pub-ic{ border:0 !important; background:rgba(127,127,127,.16) !important;
  color:var(--tx-2,#CFD8E1) !important; font-weight:800 }
.pub-dong .pub-ic:hover{ background:rgba(127,127,127,.28) !important }
:root[data-theme="light"] main .pub-dong .pub-ic{ background:#E4E9F0 !important; color:#33414F !important }

/* Hai chấm trạng thái xếp giữa theo chiều cao dòng. */
.pub-dong .pub-cham{ align-self:center }


/* ══ NÚT CHẠY / DỪNG trên từng dòng kênh ══
   Xanh = đang mời chạy, Đỏ = đang chạy và mời dừng. Đọc màu là biết đang ở trạng thái nào,
   không phải nhớ mình đã đặt lịch hay chưa. */
.pub-ngay{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.pub-ngay svg{width:16px;height:16px;fill:currentColor;stroke:none;flex:none}
.pub-ngay.chay{background:#1F5FBF !important;color:#fff !important}
.pub-ngay.chay:hover:not(:disabled){background:#1A56C4 !important}
.pub-ngay.dung{background:var(--do,#DB1920) !important;color:#fff !important}
.pub-ngay.dung:hover:not(:disabled){background:var(--do-2,#F0333A) !important}

/* ══ MENU ⋮ của một dòng kênh ══ */
.pub-ben{position:relative}
.kenh-menu{position:absolute;top:100%;right:0;z-index:60;min-width:170px;padding:5px;
  background:#1A1F27;border:1px solid rgba(255,255,255,.14);border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.kenh-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;
  border-radius:9px;background:none;color:#CFD8E1;font:inherit;font-size:13.5px;cursor:pointer}
.kenh-menu button:hover:not(:disabled){background:#242A34;color:#fff}
.kenh-menu button:disabled{opacity:.38;cursor:not-allowed}
.kenh-menu i{display:block;height:1px;background:rgba(255,255,255,.12);margin:5px 6px}
.kenh-menu .xoa{color:#F0333A}
.kenh-menu .xoa:hover{background:rgba(219,25,32,.14);color:#FF6B70}
:root[data-theme="light"] main .kenh-menu{background:#fff;border-color:rgba(0,0,0,.12)}
:root[data-theme="light"] main .kenh-menu button{color:#33414F}
:root[data-theme="light"] main .kenh-menu button:hover:not(:disabled){background:#EDF1F6;color:#0b0d11}

/* ══ THANH CÔNG CỤ TRÁI của khu làm việc ══
   Ba nút đứng cạnh nhau ở góc trên trái vùng nội dung: quay lại · tới · tập trung.
   Trước đây nút Tập trung nằm lẻ loi tận góc phải, còn quay lại thì không có — khách phải
   dùng nút Back của trình duyệt và rơi hẳn ra khỏi ứng dụng. */
.cong-cu-trai{display:flex;align-items:center;gap:6px;padding:10px 0 0 var(--gut,34px)}
.cong-cu-trai button{width:38px;height:38px;border:0;border-radius:10px;cursor:pointer;
  background:rgba(127,127,127,.14);color:var(--tx-2,#CFD8E1);display:grid;place-items:center;
  transition:transform .16s,background .15s,color .15s}
.cong-cu-trai button:hover{transform:translateY(-2px);background:#1A1A1A;color:#fff}
.cong-cu-trai button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cong-cu-trai .vach{width:1px;height:20px;background:rgba(127,127,127,.3);margin:0 4px}
:root[data-theme="light"] main .cong-cu-trai button{background:#E9EDF3;color:#33414F}
:root[data-theme="light"] main .cong-cu-trai button:hover{background:#DDE3EB;color:#0b0d11}

/* ══════════ THANH CUỘN: MỘT VỆT MẢNH, KHÔNG ĐÓNG KHUNG ══════════
   Mặc định của Windows vẽ thanh cuộn có RÃNH nền xám + hai nút mũi tên, thành ra cạnh trái
   trông như bị kẻ thêm một cái khung dọc — đúng chỗ chủ chê "bị đóng khung xấu lắm". Bỏ rãnh
   đi, chỉ để lại một vệt mảnh nổi trên nền, và chỉ đậm lên khi rê chuột. */
*{ scrollbar-width:thin; scrollbar-color:rgba(150,160,172,.34) transparent }
::-webkit-scrollbar{ width:7px; height:7px }
::-webkit-scrollbar-track{ background:transparent; border:0; box-shadow:none }
::-webkit-scrollbar-thumb{ background:rgba(150,160,172,.34); border-radius:999px; border:0 }
::-webkit-scrollbar-thumb:hover{ background:rgba(150,160,172,.60) }
::-webkit-scrollbar-corner,
::-webkit-scrollbar-button{ background:transparent; display:none; width:0; height:0 }