/* ═══════════════════════════════════════════════════════════════
   GITA 365 · v7.0 — HỆ SINH THÁI GIA ĐÌNH THỊNH VƯỢNG
   Hệ thiết kế "TRƯỜNG NĂNG LƯỢNG"
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ══════════ NỀN SÁNG — mặc định từ v7.6 ══════════
     Bảng màu học đường: nền giấy ấm, chữ mực đậm, điểm nhấn vàng GITA.
     Bản nền tối vẫn giữ nguyên ở khối [data-nen="toi"] bên dưới — bấm
     nút Sáng/Tối trên thanh trên để đổi, lựa chọn nhớ theo máy. */
  --bg-0:#F3F7FC;      --bg-1:#FFFFFF;     --bg-2:#E8EEF8;
  --surface:#FFFFFF;
  --surface-2:#F4F0FB;
  --line:#E2DBF0;
  --line-2:#CFC5E6;

  /* Sáu lớp phủ theo vai trò — đảo được giữa hai nền */
  --phu-1:rgba(28,20,64,.030);  --phu-2:rgba(28,20,64,.048);
  --phu-3:rgba(28,20,64,.070);  --phu-4:rgba(28,20,64,.095);
  --phu-5:rgba(28,20,64,.135);  --phu-6:rgba(28,20,64,.20);

  /* Chữ — kiểm trên nền #F6F3FC: ink 14,9:1 · ink-2 8,2:1 · ink-3 5,4:1 · ink-4 4,6:1 */
  /* Kiểm trên ba nền hay gặp (giấy trắng · nền trang · nền chìm):
     thấp nhất là --ink-4 đạt 4,97:1 — vượt chuẩn AA 4,5. */
  /* Thang mực bốn bậc phải GIẢM DẦN ĐỀU. Tới bản 9.25 bậc cuối lật
     ngược: ink-4 (#665E88, 5,44:1) TỐI hơn ink-3 (#6B6390, 5,02:1),
     nên lớp chữ lặng nhất lại nổi hơn lớp trên nó. Bốn bậc mà chỉ ba
     bậc phân biệt được, và hai bậc thì đảo chỗ — đó là lý do trang
     đọc ra phẳng lì dù mỗi thẻ đều có ba tầng chữ.
     Sửa bằng cách làm ink-3 ĐẬM hơn, không phải làm ink-4 nhạt hơn:
     nhạt ink-4 thì nó tụt xuống 3,98:1 trên nền trang, dưới ngưỡng
     4,5 — đổi một lỗi nhìn thấy lấy một lỗi không nhìn thấy. */
  --ink:#172234;  --ink-2:#3C4C64;  --ink-3:#4A5A73;  --ink-4:#56657D;
  --chu-tren-mau:#fff;   /* chữ đặt lên một màu đặc của bảng phân loại (biểu đồ) */
  --chu-tren-anh:#fff;   /* chữ đặt lên ẢNH (kèm bóng chữ) — ảnh không đổi theo nền nên token này không đổi */

  /* ══ MÀU THƯƠNG HIỆU — lấy từ logo chuẩn GITA ══
     Logo có ba nét: xanh ngoài đậm, xanh trong sáng, và một nét đỏ; kèm
     năm ngôi sao — bốn xanh, một đỏ. Phần nhận diện chỉ dùng ba màu đó. */
  /* Ba màu lấy THẲNG từ tệp logo gốc bằng cách đếm điểm ảnh, không ước lượng:
     #185AB4 nét ngoài và chữ GITA · #2A72C6 nét trong · #F61824 nét đỏ. */
  --gita:#2A72C6;        /* xanh GITA — nét trong của logo, nút và viền */
  --gita-sang:#5C9BE0;   /* xanh sáng — chuyển sắc, trạng thái nhẹ */
  --gita-sau:#185AB4;    /* xanh sâu — nét ngoài và chữ GITA trong logo */
  --gita-ink:#14509E;    /* chữ xanh trên nền sáng — 7,86:1 */
  --gita-do:#F61824;     /* đỏ GITA — nét đỏ và ngôi sao đỏ, đúng mã logo */
  --gita-do-ink:#BE0E16; /* chữ đỏ trên nền sáng — 6,43:1 */

  --gita-mo-1:rgba(42,114,198,.07);   --gita-mo-2:rgba(42,114,198,.14);
  --gita-mo-3:rgba(42,114,198,.22);   --gita-vien-1:rgba(42,114,198,.34);
  --gita-vien-2:rgba(42,114,198,.50); --gita-day:rgba(42,114,198,.90);

  /* Tên cũ giữ lại để mã sẵn có không gãy — đều trỏ về màu GITA */
  --gold:var(--gita);  --gold-2:var(--gita-sang);  --gold-ink:var(--gita-ink);
  --ember:var(--gita-do);  --rose:var(--gita-do);

  /* Năm tầng — đậm lại một nấc để đọc rõ trên giấy */
  /* Năm tầng đi từ XANH GITA tới ĐỎ GITA — đúng hai màu của logo.
     Chặng đầu là màu nét xanh, đích đến là màu ngôi sao đỏ. */
  --t1:#185AB4;  --t2:#5140B4;  --t3:#0B6675;  --t4:#0B7350;  --t5:#BE0E16;
  --g:#185AB4;  --i:#5140B4;  --t:#0B7350;  --a:#BE0E16;

  --ok:#036B4D; --warn:#8A4A08; --alert:#9A2E07; --bad:#B91C1C;

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --left-w:288px; --right-w:326px; --top-h:66px; --hnav-h:0px;
  /* ── VÙNG AN TOÀN CỦA MÁY CÓ TAI THỎ ──
     index.html khai viewport-fit=cover VÀ apple-mobile-web-app-status-bar-style
     là black-translucent. Hai dòng ấy nói với máy: "trang tự lo phần dưới
     tai thỏ và phần dưới vạch về nhà". Nhưng tới bản 9.99.51 không chỗ
     nào trong tệp kiểu này đọc env(safe-area-inset-*) — nghĩa là đã nhận
     việc mà không làm. Trên iPhone, thanh trên chui xuống dưới tai thỏ và
     đáy trang nằm dưới vạch về nhà.
     Bốn biến này gom một chỗ để không phải rải env() khắp tệp, và để máy
     nào không có tai thỏ thì cả bốn bằng 0 — không đổi gì cả. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  /* Chiều cao THẬT của thanh trên, kể cả phần chui dưới tai thỏ. Mọi chỗ
     neo vào đáy thanh trên phải dùng biến này chứ không dùng --top-h. */
  --top-tong:calc(var(--top-h) + var(--sat));
  --nen-mo:rgba(38,28,76,.34);        /* lớp mờ sau hộp thoại */
  --nen-hop:linear-gradient(165deg,#FFFFFF,#F7F4FC);  /* nền hộp thoại và ô lệnh */
  --nen-thanh:rgba(255,255,255,.86);  /* thanh trên */
  --nen-ben:linear-gradient(180deg,#FFFFFF,#F7F4FC);  /* thanh trái và la bàn phải */
  --man-che:rgba(246,243,252,.88);   /* màn che nội dung chưa cấp phép */
  --nen-noi:rgba(255,255,255,.97);   /* nền hộp thông báo nổi lên trên */
  --shadow:0 18px 44px -22px rgba(40,28,90,.28);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
}

/* ══════════ NỀN TỐI — giữ nguyên hệ "trường năng lượng" ══════════ */
:root[data-nen="toi"]{
  --bg-0:#182942;      --bg-1:#1E3352;     --bg-2:#284166;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.22);
  --phu-1:rgba(255,255,255,.035); --phu-2:rgba(255,255,255,.055);
  --phu-3:rgba(255,255,255,.08);  --phu-4:rgba(255,255,255,.11);
  --phu-5:rgba(255,255,255,.16);  --phu-6:rgba(255,255,255,.24);
  --ink:#EFF3FA;  --ink-2:#C8D3E2;  --ink-3:#A1B0C5;  --ink-4:#94A2B5;
  --chu-tren-mau:#0B1424;
  --gita:#4A8FE0;        --gita-sang:#8FBEF2;   --gita-sau:#2A72C6;
  --gita-ink:#7FB0F0;    --gita-do:#FF5A5F;     --gita-do-ink:#FF8A8E;
  --gita-mo-1:rgba(122,168,235,.10);  --gita-mo-2:rgba(122,168,235,.18);
  --gita-mo-3:rgba(122,168,235,.26);  --gita-vien-1:rgba(122,168,235,.38);
  --gita-vien-2:rgba(122,168,235,.55);--gita-day:rgba(122,168,235,.92);
  --gold:var(--gita);  --gold-2:var(--gita-sang);  --gold-ink:var(--gita-ink);
  --ember:var(--gita-do);  --rose:var(--gita-do);
  --t1:#5B9BE8;  --t2:#8B7DF0;  --t3:#2FA8BE;  --t4:#26B37F;  --t5:#FF5A5F;
  --g:#5B9BE8;  --i:#8B7DF0;  --t:#26B37F;  --a:#FF5A5F;
  --ok:#34D399; --warn:#FBBF24; --alert:#FB923C; --bad:#F87171;
  --nen-mo:rgba(4,3,10,.78);
  --nen-hop:linear-gradient(165deg,rgba(22,18,42,.98),rgba(11,9,24,.99));
  --nen-thanh:rgba(9,7,20,.72);
  --nen-ben:linear-gradient(180deg,rgba(12,9,26,.86),rgba(8,6,18,.94));
  --man-che:rgba(7,5,16,.78);
  --nen-noi:rgba(18,14,36,.96);
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* ── CHẶN TRÌNH DUYỆT TỰ THỔI CHỮ TO ──
   Trên điện thoại, khi bố cục dựng rộng hơn màn (chế độ "Toàn cảnh"
   dựng ở 1280px), Chromium và Safari tự phóng cỡ chữ lên cho dễ đọc.
   Nghe thì tử tế, nhưng nó phóng KHÔNG ĐỀU: tiêu đề nở ra gấp đôi còn
   ô bảng thì không, nên cả bố cục vỡ và chữ bị cắt ngang. Đo được ở
   bản 9.99.51 ngay lần thử đầu chế độ Toàn cảnh.
   Đặt 100% chứ không đặt `none`: `none` khoá luôn cả phép phóng chữ
   của người dùng, mà phóng chữ là thứ người mắt kém cần nhất. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font); color:var(--ink);
  /* Nền web cao cấp hơn (9.99.152): một quầng sáng thương hiệu rất nhạt ở
     đỉnh + chuyển nhẹ xuống nền — trên #aura (trường năng lượng) đã có.
     Dùng token, cố định khi cuộn để nền không "trôi" theo trang. */
  background:
    radial-gradient(120% 70% at 50% -8%, var(--gita-mo-1), transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 34%);
  background-attachment:fixed; background-color:var(--bg-0);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--gita-vien-1)}

/* ── Thanh cuộn mảnh ── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--phu-4);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--gita-vien-1);background-clip:padding-box}

/* ═══════════ TRƯỜNG NĂNG LƯỢNG (nền động) ═══════════ */
#aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#aura b{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.13}
:root[data-nen="toi"] #aura b{opacity:.34}
#aura b:nth-child(1){width:58vw;height:58vw;left:-16vw;top:-20vw;background:radial-gradient(circle,var(--gita),transparent 70%);animation:drift1 26s ease-in-out infinite}
#aura b:nth-child(2){width:52vw;height:52vw;right:-14vw;top:-8vw;background:radial-gradient(circle,var(--gita-sang),transparent 70%);animation:drift2 32s ease-in-out infinite}
#aura b:nth-child(3){width:46vw;height:46vw;left:26vw;bottom:-24vw;background:radial-gradient(circle,var(--gita-sau),transparent 70%);animation:drift3 29s ease-in-out infinite}
#aura b:nth-child(4){width:34vw;height:34vw;right:8vw;bottom:-14vw;background:radial-gradient(circle,var(--gita-do),transparent 70%);animation:drift1 36s ease-in-out infinite reverse}
/* Lớp phủ dịu của trường năng lượng. Trên nền giấy phải là màn SÁNG,
   nếu để nguyên màu đen cũ thì cả trang tối đen dù nền đã sáng. */
#aura i{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 0%,transparent 45%,rgba(255,255,255,.72) 100%),
  linear-gradient(180deg,rgba(255,255,255,.34),rgba(246,243,252,.70));}
:root[data-nen="toi"] #aura i{background:
  radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(7,5,16,.85) 100%),
  linear-gradient(180deg,rgba(7,5,16,.30),rgba(7,5,16,.72));}
#grid{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--phu-1) 1px,transparent 1px),
                   linear-gradient(90deg,var(--phu-1) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 30%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%,#000 30%,transparent 100%)}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,5vw) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,6vw) scale(1.1)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-6vw) scale(1.16)}}

/* Hạt sáng */
.spark{position:fixed;width:3px;height:3px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px 2px var(--gita-day);z-index:1;pointer-events:none;
  animation:rise linear infinite;opacity:0}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.85}88%{opacity:.5}100%{transform:translateY(-102vh);opacity:0}}

/* ═══════════ KÍCH THƯỚC BIỂU TƯỢNG ═══════════ */
svg{width:1.15em;height:1.15em;flex:none;display:block}
.w-3{width:12px!important}.h-3{height:12px!important}
.w-4{width:16px!important}.h-4{height:16px!important}
.w-5{width:20px!important}.h-5{height:20px!important}
.w-8{width:32px!important}.h-8{height:32px!important}
.w-9{width:36px!important}.h-9{height:36px!important}
.ring svg{width:100%!important;height:100%!important}

/* ═══════════ TIỆN ÍCH ═══════════ */
.hide{display:none!important}
.grow{flex:1}
.row{display:flex;align-items:center;gap:10px}
.row-t{display:flex;gap:12px}
.wrap{flex-wrap:wrap}
.center{text-align:center}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.tiny{font-size:12.5px}
.sm{font-size:14.5px}
.b{font-weight:700}
.up{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:700}
.serif{font-family:var(--serif)}
.grad-text{background:linear-gradient(96deg,var(--gita-sau),var(--gita) 42%,var(--gita-do));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stack{display:flex;flex-direction:column;gap:6px}
.mt{margin-top:14px}.mt2{margin-top:26px}.mb{margin-bottom:14px}

/* ═══════════ NÚT ═══════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:99px;font-weight:600;font-size:14.5px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  transition:.22s cubic-bezier(.2,.8,.3,1);white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--gita-vien-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.pri{background:linear-gradient(96deg,var(--gold),#FFC964 55%,var(--ember));
  color:#22160A;border-color:transparent;font-weight:700;
  box-shadow:0 12px 34px -12px var(--gita-day)}
.btn.pri:hover{box-shadow:0 18px 44px -12px var(--gita-day);filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.sm{padding:7px 14px;font-size:12.5px}
.btn.blk{width:100%}
.inp{width:100%;background:var(--phu-2);border:1px solid var(--line);border-radius:13px;
  padding:11px 15px;font-size:14.5px;outline:none;color:var(--ink)}
.inp:focus{border-color:var(--gita-vien-2)}
.inp.blk{display:block;margin-bottom:8px}
.btn.off{opacity:.42;filter:saturate(.35);pointer-events:none}
.btn svg{width:17px;height:17px;flex:none}

/* ═══════════ THẺ ═══════════ */
.card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;backdrop-filter:blur(18px);
  box-shadow:var(--noi-1);
  transition:.26s cubic-bezier(.2,.8,.3,1);overflow:hidden}
.card:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,var(--phu-3),transparent 42%);opacity:.9}
/* chiều sâu khi rê: token --noi-2 (theo nền sáng/tối), thay mã đen gõ tay */
.card.lift:hover{transform:translateY(-4px);border-color:var(--line-2);
  box-shadow:var(--noi-2)}
.card.glow{box-shadow:0 0 0 1px var(--gita-mo-2),0 30px 70px -34px var(--gita-vien-2)}
.card > *{position:relative}
.pad-sm{padding:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.g-auto-lg{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

/* ═══════════ CHIP / HUY HIỆU ═══════════ */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.on{background:var(--gita-mo-2);border-color:var(--gita-vien-2);color:var(--gold-ink)}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor;
  box-shadow:0 0 9px 1px currentColor}
.pill{display:inline-block;padding:3px 9px;border-radius:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}

/* ═══════════ THANH TIẾN TRÌNH ═══════════ */
.bar{height:7px;border-radius:99px;background:var(--phu-4);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--ember));
  transition:width .8s cubic-bezier(.2,.9,.25,1);box-shadow:0 0 14px var(--gita-vien-2)}
.bar.thin{height:4px}

/* ═══════════ BỐ CỤC KHUNG ═══════════ */
/* 100dvh chứ không 100vh: trên điện thoại thanh địa chỉ của trình duyệt
   thu vào rồi lại thò ra, và 100vh luôn tính theo lúc nó ĐÃ thu — nên
   đáy trang bị cắt đúng bằng chiều cao thanh ấy. Giữ dòng 100vh phía
   trước làm bản lùi cho trình duyệt cũ chưa hiểu dvh. */
#app{position:relative;z-index:2;min-height:100vh;min-height:100dvh}
.shell{display:grid;grid-template-columns:var(--left-w) minmax(0,1fr) var(--right-w);
  min-height:100vh;min-height:100dvh;padding-top:calc(var(--top-tong) + var(--hnav-h));
  padding-left:var(--sal);padding-right:var(--sar)}
/* Thanh ngang các phần chính (9.99.152) — cố định ngay dưới thanh trên;
   chỉ khổ ≥861px (điện thoại đã có ☰ + thanh dưới, --hnav-h giữ 0). */
#hnav{display:none}
.shell.no-right{grid-template-columns:var(--left-w) minmax(0,1fr)}
.shell.no-left{grid-template-columns:minmax(0,1fr) var(--right-w)}
.shell.no-left.no-right{grid-template-columns:minmax(0,1fr)}

/* ── Thanh trên ── */
#top{position:fixed;top:0;left:0;right:0;height:var(--top-tong);z-index:60;
  padding-top:var(--sat);
  display:flex;align-items:center;gap:14px;
  padding:var(--sat) calc(18px + var(--sar)) 0 calc(18px + var(--sal));
  background:var(--nen-thanh);backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  overflow:hidden;box-shadow:0 8px 22px -10px var(--gita-day);flex:none;
  border:1px solid var(--gita-vien-1);background:#FFFFFF}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo-gita{width:100%;height:auto;display:block}
.dau-gita{width:100%;height:100%;object-fit:contain;display:block}
.brand .nm{font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1.15}
.brand .sub{font-size:10.5px;color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}

.tbtn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);transition:.2s;position:relative}
.tbtn:hover{color:var(--gold-ink);border-color:var(--gita-vien-2);background:var(--surface-2)}
.tbtn svg{width:19px;height:19px}
.tbtn .bdg{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:99px;
  background:var(--ember);color:#241005;font-size:10.5px;font-weight:800;display:grid;place-items:center;padding:0 4px}

#search{flex:1;max-width:430px;display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;
  border-radius:99px;border:1px solid var(--line);background:var(--phu-2);
  color:var(--ink-3);font-size:14.5px;transition:.2s}
#search:hover{border-color:var(--gita-vien-1);color:var(--ink-2)}
#search svg{width:16px;height:16px;flex:none}
#search kbd{margin-left:auto;font-size:10.5px;padding:2px 6px;border-radius:6px;
  border:1px solid var(--line-2);background:var(--surface);font-family:var(--font)}

.who{display:flex;align-items:center;gap:10px;padding:5px 6px 5px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);transition:.2s;flex:none}
.who:hover{border-color:var(--gita-vien-2);background:var(--surface-2)}
.who .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:12.5px;color:#1A1006;flex:none}
.who .tx{text-align:right;line-height:1.2}
.who .tx b{font-size:12.5px;display:block}
.who .tx span{font-size:10.5px;color:var(--ink-3)}

/* ── Thanh tab TRÁI: 5 nhóm chính ── */
#left{position:fixed;top:var(--top-tong);bottom:0;left:0;width:var(--left-w);z-index:50;
  padding-bottom:var(--sab);padding-left:var(--sal);
  display:flex;flex-direction:column;
  background:var(--nen-ben);
  backdrop-filter:blur(20px);border-right:1px solid var(--line)}
#left .scroll{flex:1;overflow-y:auto;padding:14px 12px 20px}
.nav-eyebrow{padding:6px 10px 12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);font-weight:700}
.grp{margin-bottom:8px;border-radius:var(--r);overflow:hidden;border:1px solid transparent;transition:.24s}
.grp.open{background:var(--phu-1);border-color:var(--line)}
.grp-h{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:var(--r);
  transition:.2s;text-align:left}
.grp-h:hover{background:var(--phu-2)}
.grp-h .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);transition:.24s}
.grp-h .ic svg{width:18px;height:18px}
.grp.open .grp-h .ic{transform:scale(1.04)}
.grp-h .tx{flex:1;min-width:0}
.grp-h .tx b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-h .tx span{display:block;font-size:10.5px;color:var(--ink-4);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.grp-h .no{font-size:10.5px;font-weight:800;color:var(--ink-4);letter-spacing:.1em}
.grp-h .cv{width:14px;height:14px;color:var(--ink-4);transition:.28s;flex:none}
.grp.open .grp-h .cv{transform:rotate(90deg);color:var(--gold-ink)}
.grp-b{display:none;padding:2px 8px 10px 12px}
.grp.open .grp-b{display:block;animation:slideDown .28s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.nav-i{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:11px;
  font-size:12.5px;color:var(--ink-2);transition:.18s;text-align:left;position:relative;margin-bottom:2px}
.nav-i:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:0;border-radius:9px;background:var(--gold);transition:.24s}
.nav-i:hover{background:var(--phu-2);color:var(--ink)}
.nav-i.on{background:linear-gradient(90deg,var(--gita-mo-2),var(--gita-mo-1));
  color:var(--gold-ink);font-weight:600}
.nav-i.on:before{height:20px}
.nav-i svg{width:15px;height:15px;flex:none;opacity:.75}
.nav-i.on svg{opacity:1}
.nav-i .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-i .n{font-size:10.5px;padding:1px 6px;border-radius:6px;background:var(--phu-3);
  color:var(--ink-3);font-weight:700;flex:none}

#left .foot{padding:12px;border-top:1px solid var(--line);background:var(--phu-2)}

/* ── Thanh tab PHẢI: La bàn văn hoá ── */
#right{position:fixed;top:var(--top-tong);bottom:0;right:0;width:var(--right-w);z-index:50;
  padding-bottom:var(--sab);padding-right:var(--sar);
  display:flex;flex-direction:column;
  background:var(--nen-ben);
  backdrop-filter:blur(20px);border-left:1px solid var(--line)}
.rt{display:flex;gap:3px;padding:10px 10px 8px;border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none}
.rt::-webkit-scrollbar{display:none}
.rt button{padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-3);transition:.18s;white-space:nowrap}
.rt button:hover{color:var(--ink);background:var(--phu-3)}
.rt button.on{background:var(--gita-mo-2);color:var(--gold-ink)}
#right .scroll{flex:1;overflow-y:auto;padding:16px 14px 26px}

.creed{border-left:2px solid var(--gita-vien-2);padding:2px 0 2px 13px;margin:14px 0}
.creed p{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--gold-ink);font-style:italic}
.creed cite{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-4);font-style:normal}
.rblock{margin-bottom:22px}
.rblock > h4{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
  font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.rblock > h4:after{content:'';flex:1;height:1px;background:var(--line)}
.rule{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--phu-3)}
.rule:last-child{border:0}
.rule .n{width:20px;height:20px;border-radius:6px;background:var(--gita-mo-2);color:var(--gold-ink);
  font-size:10.5px;font-weight:800;display:grid;place-items:center;flex:none;margin-top:2px}
.rule .tx b{display:block;font-size:12.5px;margin-bottom:2px}
.rule .tx p{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.val{padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  margin-bottom:9px;box-shadow:0 2px 8px var(--phu-2);transition:.2s}
.val:hover{border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--noi-1)}
.val .hd{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.val .hd .k{font-size:10.5px;font-weight:900;letter-spacing:.1em;padding:2px 6px;border-radius:5px}
.val .hd b{font-size:14.5px}
.val p{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.val .do{margin-top:7px;font-size:12.5px;color:var(--ok);display:flex;gap:6px}
.val .dont{margin-top:3px;font-size:12.5px;color:var(--bad);opacity:.85;display:flex;gap:6px}

/* ── Vùng nội dung ── */
main{grid-column:2;padding:26px 30px calc(90px + var(--sab));min-width:0}
.shell.no-left main{grid-column:1}
/* Chỉ TRƯỢT + mờ, KHÔNG scale: scale co mọi kích thước con ~1,4% trong
   nửa giây đầu, và do-khung-man đo vùng chạm giữa lúc ấy có thể thấy một
   ô 32px tụt còn 31,5. Cảm giác "đi vào màn" đủ mạnh bằng trượt dọc. */
.view{animation:viewIn .5s cubic-bezier(.22,.61,.36,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── Đầu trang ── */
.ph{margin-bottom:26px}
.ph .eyebrow{display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;color:var(--ink-4);margin-bottom:10px}
.ph h1{font-size:33px;line-height:1.14;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.ph .lead{font-size:16px;color:var(--ink-2);max-width:78ch;line-height:1.68}

/* ── Ô số ── */
.stat{padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);position:relative;overflow:hidden;transition:.24s}
.stat:hover{border-color:var(--line-2);transform:translateY(-2px)}
.stat .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.stat .v{font-size:33px;font-weight:800;letter-spacing:-.02em;margin:5px 0 2px;line-height:1}
.stat .d{font-size:12.5px;color:var(--ink-3)}
.stat .fx{position:absolute;right:-18px;top:-18px;width:78px;height:78px;border-radius:50%;
  filter:blur(26px);opacity:.5}

/* ── Bảng ── */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;padding:10px 12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);font-weight:800;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--phu-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:.16s}
.tbl tbody tr:hover{background:var(--phu-2)}
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--noi-1)}

/* ── Dòng thời gian ── */
.tl{position:relative;padding-left:34px}
.tl:before{content:'';position:absolute;left:12px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--t1),var(--t2),var(--t3),var(--t4),var(--t5))}
.tl-i{position:relative;margin-bottom:20px}
.tl-i:before{content:'';position:absolute;left:-27px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--bg-0);border:2px solid currentColor;box-shadow:0 0 12px currentColor}

/* ── Bản đồ khoang ── */
.flow{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.kh{position:relative;padding:18px 16px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);transition:.3s cubic-bezier(.2,.8,.3,1);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;min-height:196px}
.kh:hover{transform:translateY(-6px)}
.kh.on{border-color:currentColor}
.kh .no{font-size:10.5px;font-weight:900;letter-spacing:.16em;opacity:.75}
.kh h2{font-size:14.5px;font-weight:800;margin:7px 0 8px;line-height:1.22;letter-spacing:-.01em}
.kh .q{font-size:12.5px;color:var(--ink-3);font-style:italic;line-height:1.5;flex:1}
.kh .mt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.kh .mt-tags span{font-size:10.5px;padding:2px 6px;border-radius:6px;background:var(--phu-3);color:var(--ink-3)}
.kh .beam{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 0%,currentColor,transparent 70%);
  opacity:.13;pointer-events:none}

/* ── Chín vai ── */
.vai{padding:15px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  transition:.24s;position:relative;overflow:hidden}
.vai:hover{transform:translateY(-3px);border-color:var(--line-2)}
.vai .id{font-size:10.5px;font-weight:900;letter-spacing:.14em;color:var(--ink-4)}
.vai h2{font-size:14.5px;font-weight:800;margin:5px 0 6px;letter-spacing:.01em}
.vai .q{font-size:12.5px;color:var(--gold-ink);font-style:italic;line-height:1.45;margin-bottom:8px}
.vai p{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.vai .own{margin-top:10px;padding-top:9px;border-top:1px dashed var(--phu-4);
  font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}

/* ── Trước / Sau ── */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.ba .side{padding:16px;border-radius:var(--r);border:1px solid var(--line)}
.ba .side.from{background:rgba(248,113,113,.055);border-color:rgba(248,113,113,.22)}
.ba .side.to{background:rgba(52,211,153,.06);border-color:rgba(52,211,153,.26)}
.ba .side .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.ba .side.from .k{color:var(--bad)}
.ba .side.to .k{color:var(--ok)}
.ba .side p{font-size:14.5px;line-height:1.6}
.ba .ar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--gold),var(--ember));color:#1A1006}
.ba .ar svg{width:17px;height:17px}

/* ── Ô mở khoá ── */
.locked{position:relative}
.locked .veil{position:absolute;inset:0;border-radius:inherit;display:grid;place-items:center;
  background:var(--man-che);backdrop-filter:blur(4px);z-index:3;text-align:center;padding:20px}

/* ── Hộp trích ── */
.quote{padding:20px 24px;border-radius:var(--r-lg);border:1px solid var(--gita-mo-3);
  background:linear-gradient(120deg,var(--gita-mo-1),rgba(139,92,246,.06));position:relative}
.quote:before{content:'"';position:absolute;left:12px;top:-14px;font-family:var(--serif);
  font-size:74px;color:var(--gita-mo-3);line-height:1}
.quote p{font-family:var(--serif);font-size:18px;line-height:1.55;font-style:italic;color:var(--gold-ink)}
.quote cite{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-3);font-style:normal}

/* ── Danh sách kiểm ── */
.ck{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);margin-bottom:8px;transition:.2s;
  cursor:pointer;text-align:left;width:100%}
.ck:hover{border-color:var(--line-2);background:var(--surface-2)}
.ck .bx{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;margin-top:1px;transition:.2s}
.ck .bx svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:.2s}
.ck.done .bx{background:linear-gradient(135deg,var(--ok),#10B981);border-color:transparent;color:#04241A}
.ck.done .bx svg{opacity:1;transform:none}
.ck.done .tx b{text-decoration:line-through;opacity:.55}
.ck .tx{flex:1;min-width:0}
.ck .tx b{font-size:14.5px;font-weight:600;display:block}
.ck .tx span{font-size:12.5px;color:var(--ink-3)}

/* ── Vòng tròn tiến trình ── */
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .tx{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ring .tx b{font-size:21px;font-weight:800}
.ring .tx span{font-size:10.5px;color:var(--ink-4);letter-spacing:.1em;text-transform:uppercase}

/* ═══════════ CỔNG VÀO ═══════════ */
#gate{position:relative;z-index:2;min-height:100vh;min-height:100dvh;
  padding:var(--sat) var(--sar) var(--sab) var(--sal);
  display:flex;flex-direction:column}
/* flex-wrap:wrap — KHÔNG phải trang trí, đây là chỗ đã đẩy CẢ TRANG
   cuộn ngang ở màn CHƯA ĐĂNG NHẬP. Trên màn 390px thanh này ôm: dấu
   thương hiệu 203px + hai nút ngôn ngữ 80px + chip số bản 84px = 367px
   nội dung, cộng 60px lề = 427px trong một màn 390px. Flex mặc định là
   `nowrap`, nên nó không xuống dòng — nó đẩy.

   Đúng bài học CLAUDE.md đã ghi cho `.row` ("flex không tự xuống dòng"),
   nhưng `.gate-top` là một hàng flex KHÁC và chưa bao giờ được áp. Và
   nó lọt qua mọi bộ đo suốt mười một tháng vì `do-khung-man.js` đăng
   nhập TRƯỚC rồi mới đo — nên màn đầu tiên người lạ nhìn thấy là màn
   duy nhất chưa ai đo. */
.gate-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:22px 30px}
.gate-body{flex:1;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;
  align-items:center;padding:10px 60px 60px;max-width:1440px;margin:0 auto;width:100%}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:99px;
  border:1px solid var(--gita-vien-1);background:var(--gita-mo-1);color:var(--gold-ink);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.03em;margin-bottom:20px}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:600}
.hero .lead{font-size:16px;line-height:1.72;color:var(--ink-2);max-width:56ch;margin-bottom:26px}
/* Dải bốn con số ở Cổng vào đã gỡ ở v7.6 theo yêu cầu — luật CSS xoá theo. */

/* `.btn` nền khai `white-space:nowrap` — đúng cho nút trong bảng và
   thanh công cụ, sai cho nút ở cổng vào: nhãn "Chưa có tài khoản — xem
   trước GITA 365 làm gì" dài 417px và không chịu xuống dòng. Nới ĐÚNG
   ở cổng vào, không nới `.btn` toàn cục: nới toàn cục thì mọi nút trong
   mọi bảng của cả kho có thể vỡ hai dòng, và đó là đổi một lỗi nhìn
   thấy lấy một trăm chỗ chưa ai nhìn. */
.gate-body .btn{white-space:normal;overflow-wrap:anywhere}

/* Cửa trước — một trang năm chặng thay ba ngăn (src/cua-truoc.js).
   Cột đọc 820px: dài hơn thì mắt lạc dòng; các lưới đều minmax(0,1fr)
   vì `1fr` trần không co dưới bề rộng chữ và đẩy cả trang cuộn ngang. */
.ct-trang{max-width:820px;width:100%;min-width:0;box-sizing:border-box;margin:0 auto;padding:18px 18px 60px;display:flex;flex-direction:column;gap:16px}
.ct-trang .btn{white-space:normal;overflow-wrap:anywhere}
.ct-chang{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:3;padding:8px 0;background:var(--bg-0)}
.ct-mo{display:flex;flex-direction:column;gap:14px;border-color:var(--gita-vien-2);background:var(--gita-mo-1)}
.ct-h1{font-size:26px;line-height:1.3;font-weight:800;text-wrap:balance;margin:0}
.ct-dau{display:flex;flex-direction:column;gap:6px;margin-top:22px;scroll-margin-top:72px}
.ct-ben{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.ct-ben svg{flex:none;margin-top:3px;color:var(--gold-ink)}
.ct-h{font-size:21px;line-height:1.35;font-weight:800;text-wrap:balance;margin:0}
.ct-guong{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px}
.ct-o{text-align:left;font:inherit;font-size:14.5px;line-height:1.6;padding:12px 14px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);background:var(--phu-1);color:var(--ink);cursor:pointer;min-height:44px}
.ct-o.on{border-color:var(--gita-vien-2);background:var(--gita-mo-2)}
.ct-o:focus-visible{outline:2px solid var(--gita-vien-2);outline-offset:2px}
.ct-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.ct-tra{display:flex;flex-direction:column;gap:8px}
.ct-tra[hidden]{display:none}
.ct-viec-nay{border-left:3px solid var(--gita-vien-2);background:var(--gita-mo-1);border-radius:var(--r-sm);padding:10px 12px}
.ct-viec-nay .up{color:var(--gold-ink);margin-bottom:4px}
.ct-ba-toi{display:grid;gap:10px}
.ct-toi{display:flex;gap:12px;align-items:flex-start;text-align:left;font:inherit;color:var(--ink);padding:12px 14px;
  border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--phu-1);cursor:pointer;min-height:44px}
.ct-toi.on{border-color:var(--gita-vien-2);background:var(--gita-mo-2)}
.ct-toi:focus-visible{outline:2px solid var(--gita-vien-2);outline-offset:2px}
.ct-dau-tich{flex:none;width:28px;height:28px;border-radius:99px;border:1px solid var(--gita-vien-2);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;color:var(--gold-ink)}
.ct-tang{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:10px}
.ct-tg{border:1px solid var(--line-2);border-top:3px solid;border-radius:var(--r-lg);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.ct-buoc{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.ct-buoc li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ct-mo-rong summary{cursor:pointer;min-height:32px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ct-cuoi{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:22px;border-color:var(--gita-vien-2);background:var(--gita-mo-1)}
/* Kim chỉ nam ở đầu mọi màn khách (src/kim-chi-nam.js). Mặc định một dòng;
   mở ra mới thấy ba ô. Lưới minmax(0,1fr) để không đẩy trang cuộn ngang. */
.kcn{border:1px solid var(--gita-vien-2);background:var(--gita-mo-1);border-radius:var(--r-lg);margin:0 0 14px}
.kcn-dong{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 14px;min-height:40px;cursor:pointer;list-style:none;font-size:14.5px}
.kcn-dong::-webkit-details-marker{display:none}
.kcn-dong svg{color:var(--gold-ink);flex:none}
.kcn-dong:focus-visible{outline:2px solid var(--gita-vien-2);outline-offset:2px}
.kcn-chip{font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:99px;border:1px solid var(--gita-vien-2);color:var(--gold-ink)}
.kcn-phu{font-size:12.5px;color:var(--ink-2)}
.kcn-ben{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;padding:4px 14px 14px}
.kcn-o{display:flex;flex-direction:column;gap:6px;min-width:0}
.kcn-o .up{color:var(--gold-ink)}
.kcn-tang{display:flex;gap:4px}
.kcn-tang span{flex:1;height:6px;border-radius:99px;background:var(--line-2)}
.kcn-tang span.on{background:var(--gita-vien-2)}
@media(max-width:600px){.ct-h1{font-size:21px}.ct-h{font-size:18px}
  .ct-chang{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;min-width:0}.ct-chang .chip{flex:none}}

.gate-card{padding:28px;border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:linear-gradient(165deg,var(--phu-3),var(--phu-1));
  backdrop-filter:blur(24px);box-shadow:var(--shadow)}
.gate-card h3{font-size:18px;font-weight:800;margin-bottom:4px}
.gate-card .hint{font-size:12.5px;color:var(--ink-3);margin-bottom:18px}
/* Danh sách vai ở Cổng vào đã gỡ ở v7.6 — thay bằng tranh nhà mình,
   tầm nhìn và bản đồ năm chặng. Luật CSS của nó cũng xoá theo để không
   ai vô tình dựng lại. Đăng nhập nay bằng email + mật khẩu, hoặc mở
   bảng tài khoản xếp theo ba tầng quyền. */

/* ═══════════ MODAL ═══════════ */
#modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
#modal.on{display:flex}
#modal .bd{position:absolute;inset:0;background:var(--nen-mo);backdrop-filter:blur(8px);animation:fade .2s}
#modal .bx{position:relative;width:min(760px,100%);max-height:86vh;overflow-y:auto;
  border-radius:var(--r-xl);border:1px solid var(--line-2);
  background:var(--nen-hop);
  box-shadow:var(--shadow);padding:28px;animation:pop .32s cubic-bezier(.2,.9,.3,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.mx{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-3);transition:.2s}
.mx:hover{color:var(--ink);background:var(--surface-2)}

/* ═══════════ TOAST ═══════════ */
#toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,26px);z-index:300;
  padding:12px 22px;border-radius:99px;font-size:14.5px;font-weight:600;opacity:0;
  border:1px solid var(--line-2);background:var(--nen-noi);backdrop-filter:blur(14px);
  box-shadow:var(--shadow);transition:.32s cubic-bezier(.2,.9,.3,1);pointer-events:none;
  display:flex;align-items:center;gap:9px;width:max-content;max-width:min(90vw,520px)}
/* `width:max-content` — KHÔNG phải trang trí. Thiếu nó thì `max-width`
   ở trên KHÔNG BAO GIỜ được dùng tới: một thẻ `position:fixed` khai
   `left:50%` mà không khai `right` thì bề rộng khả dụng của nó chỉ còn
   NỬA MÀN — 195px trên máy 390px — và `transform:translateX(-50%)` chỉ
   dời chỗ nhìn thấy, không đổi bề rộng bố cục.

   Hậu quả đo được ở 9.99.80: câu báo lỗi bốn dòng ra hộp 195×143px, mà
   `border-radius:99px` trên một hộp cao 143px thì kẹp về 71px — tức là
   một hình BẦU DỤC, và góc chữ rơi ra ngoài hình. Vá xong: 351×73px,
   bán kính tự kẹp về 36px, đúng hình viên thuốc mà thiết kế muốn.

   Bo góc GIỮ NGUYÊN 99px. Hạ xuống 24px thì hộp báo một dòng — thứ hay
   gặp nhất — mất hình viên thuốc, tức là đổi một lỗi hiếm lấy một chỗ
   xấu thường xuyên. Sửa bề rộng là sửa NGUYÊN NHÂN; đổi bo góc chỉ là
   che triệu chứng. */
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.ok{border-color:rgba(52,211,153,.5)}
#toast.err{border-color:rgba(248,113,113,.5)}

/* ═══════════ HỘP LỆNH (⌘K) ═══════════ */
#cmd{position:fixed;inset:0;z-index:250;display:none;padding-top:12vh;justify-content:center}
#cmd.on{display:flex}
#cmd .bd{position:absolute;inset:0;background:var(--nen-mo);backdrop-filter:blur(8px)}
#cmd .bx{position:relative;width:min(660px,92vw);height:fit-content;max-height:70vh;display:flex;
  flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:var(--nen-hop);box-shadow:var(--shadow);
  overflow:hidden;animation:pop .26s cubic-bezier(.2,.9,.3,1)}
#cmd input{width:100%;padding:18px 22px;background:none;border:0;outline:0;font-size:16px;
  border-bottom:1px solid var(--line)}
#cmd input::placeholder{color:var(--ink-4)}
#cmd .res{overflow-y:auto;padding:8px}
#cmd .res button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 13px;
  border-radius:11px;text-align:left;transition:.14s}
#cmd .res button:hover,#cmd .res button.sel{background:var(--gita-mo-2)}
#cmd .res button svg{width:16px;height:16px;color:var(--ink-3);flex:none}
#cmd .res button .tx b{display:block;font-size:14.5px}
#cmd .res button .tx span{font-size:12.5px;color:var(--ink-4)}
#cmd .res .gh{padding:9px 13px 5px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);font-weight:800}

/* ═══════════ ĐÁP ỨNG ═══════════ */
.mobonly{display:none}
@media(max-width:1420px){
  :root{--right-w:300px;--left-w:268px}
}
@media(max-width:1180px){
  .shell{grid-template-columns:var(--left-w) minmax(0,1fr)}
  #right{transform:translateX(100%);transition:.3s cubic-bezier(.2,.8,.3,1);box-shadow:var(--shadow);width:326px}
  #right.open{transform:none}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* minmax(0,1fr) chứ KHÔNG phải 1fr. Một ô lưới mặc định mang
     `min-width:auto`, nghĩa là rãnh KHÔNG BAO GIỜ co xuống dưới
     min-content của nội dung. Đo thật ở 390px: rãnh giải ra 417px
     trong một hộp rộng 330px, và thứ đẩy nó là một cái nút nhãn dài.
     `1fr` đọc như "co giãn tự do" mà thực ra là "không nhỏ hơn nội
     dung" — đó là chỗ bẫy. */
  .gate-body{grid-template-columns:minmax(0,1fr);gap:34px;padding:10px 30px 50px}
}
/* ══════ MÀN HÔM NAY · NHÀ MÌNH (9.99.75) ══════

   Mọi cỡ chữ dưới đây lấy từ THANG CHÍN BẬC đã có (10,5 · 12,5 · 14,5 ·
   16 · 18 · 21 · 26 · 33 · 74). Bản đầu tôi gõ 24px và 14px cho "vừa
   mắt" — bộ rà soát bắt ngay, và đúng: bản 9.25 từng có hai mươi sáu
   bậc, nghĩa là không có thang nào cả, mỗi mảnh giao diện tự nghĩ ra
   cỡ của mình. Thêm một bậc vì nó vừa mắt ở ĐÚNG MỘT chỗ là cách cái
   thang tan ra.

   L12 · ĐƯỜNG THOÁT CÙNG KÍCH CỠ. Hai nút dùng CHUNG một lớp `.nm-nut`
   và chỉ khác nhau ở màu. Đặt hai lớp riêng rồi cố cho chúng bằng nhau
   là để dành sẵn một chỗ lệch: người sửa CSS sau đổi một lớp mà quên
   lớp kia, nút thoát nhỏ đi, và không ai thấy — mà "cùng kích cỡ" mới
   là luật, không phải "có nút thoát". Một nút thoát nhỏ hơn nút tiếp
   tục là một lời mời đi tiếp đội lốt một lựa chọn.

   Nên mọi thứ quyết kích cỡ — padding, cỡ chữ, độ đậm, bo góc, và
   flex — nằm ở ĐÚNG MỘT chỗ dưới đây. */
.nm-hang{gap:10px;margin-top:14px}
.nm-nut{
  flex:1 1 0;
  min-height:48px;
  padding:13px 16px;
  font-size:16px;
  font-weight:600;
  border-radius:10px;
  border:1.5px solid var(--vien);
  cursor:pointer;
  line-height:1.3;
}
.nm-xong{background:var(--nhan);color:#fff;border-color:var(--nhan)}
.nm-thoat{background:transparent;color:var(--ink-2)}

.nm-viec{padding:22px 20px}
.nm-nhan{margin:0;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.nm-lon{margin:6px 0 0;font-size:21px;line-height:1.3}
.nm-lon-nho{margin:0;font-size:18px;line-height:1.45}
.nm-lydo{width:100%;margin-top:12px;padding:10px;border:1px solid var(--vien);
  border-radius:8px;background:var(--bg-0);color:var(--ink);resize:vertical}
.nm-note{margin-top:8px}

/* Nút Bão nhỏ hơn HẲN việc lớn về thị giác — nó không phải việc của
   tối nay, nó là một lối ra luôn có mặt. Nhưng vẫn đủ 44px để bấm
   trúng bằng ngón cái. */
.nm-bao{margin-top:26px}
.nm-bao-nut{
  min-height:44px;padding:10px 16px;font-size:14.5px;border-radius:9px;
  border:1px solid var(--vien);background:transparent;color:var(--ink-2);cursor:pointer;
}

@media(max-width:860px){
  /* ── PHẢI KỂ ĐỦ BỐN DẠNG, KHÔNG CHỈ `.shell` ──
     Dòng này trước chỉ có `.shell`, và nó THUA ba dòng ở trên vì
     `.shell.no-right` nặng hơn `.shell` — kể cả khi nằm trong @media.
     Hậu quả đo được ở bản 9.99.50: trên màn 420px, lúc cột phải đóng,
     vùng nội dung chỉ rộng 268px thay vì 388px, và 152px còn lại là
     một cột trống dành cho cột trái vốn đã trượt ra ngoài màn.
     Lỗi này có từ trước, ở MỌI màn chứ không riêng màn trợ lý — không
     ai thấy vì bộ rà soát chạy ở khổ màn để bàn. */
  .shell,.shell.no-left,.shell.no-right,.shell.no-left.no-right{
    grid-template-columns:minmax(0,1fr)}
  main{grid-column:1;padding:20px 16px calc(80px + var(--sab))}
  #left{transform:translateX(-100%);transition:.3s cubic-bezier(.2,.8,.3,1);box-shadow:var(--shadow);width:280px}
  #left.open{transform:none}
  .mobonly{display:inline-flex}
  .deskonly{display:none!important}
  #search{display:none}
  .g2,.g3,.g4,.g5,.g-auto-lg{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr)}
  .ph h1{font-size:26px}
  .ba{grid-template-columns:1fr;gap:10px}
  .ba .ar{transform:rotate(90deg);margin:0 auto}
  #scrim{position:fixed;inset:0;background:var(--nen-mo);backdrop-filter:blur(3px);z-index:45;display:none}
  #scrim.on{display:block}
}
@media(max-width:600px){
  /* Trên điện thoại, mọi khối có bề ngang tối thiểu đều xuống dòng trọn vẹn */
  .card [style*="min-width:2"], .card [style*="min-width:1"]{min-width:100%!important}
  /* ── HÀNG NGANG PHẢI XUỐNG DÒNG ĐƯỢC ──
     `.row` là flex, mà flex mặc định KHÔNG xuống dòng. Trên màn 390px,
     một hàng hai nút nhãn dài cần 539px trong một cột rộng 358px — nó
     không co lại, nó đẩy CẢ TRANG cuộn ngang. Đo được ở màn tai-chinh-qt
     bản 9.99.50: trang rộng 555px trên màn 390px.
     Tràn ngang là lỗi nặng nhất trên điện thoại, và cũng là lỗi không ai
     báo: người ta vuốt dọc, trang trượt ngang, và họ tưởng mình vuốt sai.
     Ở khổ này thì xuống dòng luôn đúng hơn là tràn. */
  .row{flex-wrap:wrap}
  .ring{width:78px;height:78px}
  .ph h1{font-size:26px}
  .quote p{font-size:16px}
  .stat .v{font-size:26px}
  .tbl th,.tbl td{padding:9px 10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  #left,#right,#top,#aura,#grid,.spark{display:none!important}
  .shell{grid-template-columns:1fr;padding-top:0}
  main{grid-column:1;padding:0}
  body{background:#fff;color:#111}
}

/* ═══════════ ĐÓNG DẤU CHÌM THEO NGƯỜI XEM ═══════════ */
#wm{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);align-content:space-around;opacity:.045}
#wm span{font-size:14.5px;font-weight:700;letter-spacing:.08em;color:#fff;
  transform:rotate(-24deg);white-space:nowrap;text-align:center;user-select:none}
@media print{#wm{opacity:.16}}


/* ═══════════ TẦM NHÌN VÀ BẢN ĐỒ Ở CỔNG VÀO ═══════════ */
.tn-khoi{display:flex;flex-direction:column;gap:13px}
.tn-nhan{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.14em;color:var(--gold-ink);text-transform:uppercase}
.tn-nhan svg{width:15px;height:15px;flex:none}
.tn-tieu{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;margin:0;text-wrap:balance}
.tn-lon{font-size:14.5px;line-height:1.72;color:var(--ink-2);margin:0}
.tn-nho{font-size:12.5px;line-height:1.65;color:var(--ink-3);margin:0;font-style:italic}
.tn-bando{border:1px solid var(--line);border-radius:var(--r);padding:13px 11px 9px;
  background:linear-gradient(160deg,var(--gita-mo-1),rgba(139,92,246,.05));overflow:hidden}
.tn-bd-nhan{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--ink-4);
  text-transform:uppercase;margin-bottom:9px}
/* Luật svg toàn cục ở đầu tệp ép mọi biểu tượng về 1.15em — bản đồ phải thoát ra */
.tn-bando svg{width:100%!important;height:auto!important;flex:initial;display:block}
.tn-sm{padding:12px 14px;border-radius:var(--r-sm);
  background:var(--gita-mo-1);border-left:2px solid var(--gold)}
@media(max-width:600px){
  .tn-tieu{font-size:21px}
  .tn-lon{font-size:14.5px}
}

/* ═══════════ DẢI PHẠM VI TRÊN THANH TRÁI ═══════════ */
.pv-dai{margin:0 10px 12px;padding:11px 13px;border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--pv) 34%, transparent);
  background:linear-gradient(140deg,color-mix(in srgb, var(--pv) 15%, transparent),var(--phu-1))}
.pv-vai{display:flex;align-items:center;gap:7px;font-size:14.5px}
.pv-vai svg{color:var(--pv);flex:none}
.pv-vai b{font-weight:800;letter-spacing:-.01em}
.pv-bac{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-3);text-transform:uppercase}
.pv-so{margin-top:5px;font-size:12.5px;color:var(--ink-3)}
.pv-so b{color:var(--ink);font-weight:800}
.pv-khoa{color:var(--ink-4)}

/* .nav-khoa và .nav-i.lock đã gỡ ở v9.3.
   Cột trái từng gấp mọi mục ngoài phạm vi vào một khối "N mục ngoài phạm
   vi vai này" — mở ra là thấy đủ tên. Đo được: phụ huynh 86 tên, học
   viên 93, cộng tác viên 98, chuyên gia tư vấn 37. Trong đó có "220 phác
   đồ × 5 tầng", "1.000 kịch bản chuyên môn", "Kho báu vật", "Xương sống
   phương pháp", "Hệ quản trị tài chính", "Mật mã kín trên tài liệu".

   Nghĩa là cột trái đang phát toàn bộ danh mục màn hình của hệ thống cho
   mọi tài khoản. Nay mục ngoài phạm vi không dựng ra nữa — không có thẻ
   nào để mà tô kiểu. Số đếm vẫn còn ở dải phạm vi và ở màn "Phạm vi của
   tôi", nhưng chỉ là SỐ, không kèm tên. */

/* ═══════════ BẢNG PHÂN QUYỀN ═══════════ */
.pq-chugiai{display:flex;flex-wrap:wrap;gap:8px 20px;margin:2px 0 16px;font-size:12.5px;color:var(--ink-3)}
.pq-chugiai span{display:inline-flex;align-items:center;gap:7px}
.pq-ic{display:grid;place-items:center;width:19px;height:19px;border-radius:7px;flex:none;
  border:1px solid var(--line-2)}
.pq-ic svg{width:11px;height:11px}
.pq-ic.bac{background:rgba(16,185,129,.20);border-color:rgba(16,185,129,.5);color:#34D399}
.pq-ic.cho{background:var(--gita-mo-3);border-color:var(--gita-vien-2);color:var(--gold-ink)}
.pq-ic.cam{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.5);color:#F87171}
.pq-ic.khong{background:var(--phu-2)}
.pq-ten{display:flex;flex-direction:column;gap:2px;min-width:190px}
.pq-o{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  border:1px solid var(--line-2);background:var(--phu-2);transition:.16s}
.pq-o svg{width:12px;height:12px}
.pq-o.bac{background:rgba(16,185,129,.20);border-color:rgba(16,185,129,.5);color:#34D399}
.pq-o.cho{background:var(--gita-mo-3);border-color:var(--gita-vien-2);color:var(--gold-ink)}
.pq-o.cam{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.5);color:#F87171}
.pq-o:not(.cung):hover{transform:scale(1.14);border-color:var(--gold-ink)}
.pq-o.cung{opacity:.4;cursor:not-allowed}

/* ═══════════ PHẠM VI CỦA TÔI ═══════════ */
.pv-lo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:6px}
.pv-th{padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.pv-th b{display:block;font-size:33px;font-weight:800;letter-spacing:-.03em;color:var(--gold-ink)}
.pv-th span{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--ink-4)}
.pv-tang{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.pv-t{padding:13px 15px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.pv-t.mo{border-color:color-mix(in srgb, var(--tc) 55%, transparent);
  background:linear-gradient(150deg,color-mix(in srgb, var(--tc) 16%, transparent),var(--phu-1))}
.pv-t.ke{border-color:var(--gita-vien-2);background:var(--gita-mo-1)}
.pv-t.chua{opacity:.55}
.pv-t-h{display:flex;align-items:baseline;gap:8px}
.pv-t-h b{font-size:16px;font-weight:800;color:var(--tc)}
.pv-t-h span{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--ink-2)}
.pv-t-tt{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:12.5px;color:var(--ink-3)}
.pv-t-m{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--ink-4)}
.pv-mo{display:flex;flex-direction:column;gap:14px}
.pv-nh-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.pv-nh-h span{margin-left:auto;font-size:12.5px;font-weight:700}
.pv-nh-b{display:flex;flex-wrap:wrap;gap:7px}
.pv-i{padding:6px 12px;border-radius:99px;border:1px solid var(--line);
  background:var(--phu-2);font-size:12.5px;color:var(--ink-2);transition:.16s}
.pv-i:hover{border-color:var(--gold-ink);color:var(--ink);background:var(--gita-mo-1)}

/* ═══════════ Ô NHẬP CHUNG ═══════════ */
.dk-dy{display:flex;gap:9px;align-items:flex-start;margin:4px 0 12px;cursor:pointer}
.dk-dy input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--gold-ink)}

/* Bảng phân quyền có 15 cột vai — nén ô lại để đủ mười lăm vị trí trong
   một màn 1280px, khỏi phải kéo ngang mới thấy phụ huynh và cộng tác viên. */
.pq-bang .tbl th{padding:9px 3px;font-size:10.5px;letter-spacing:.02em;text-align:center;white-space:nowrap}
.pq-bang .tbl th:first-child{text-align:left;padding-left:12px}
.pq-bang .tbl td{padding:6px 3px;text-align:center}
.pq-bang .tbl td:first-child{text-align:left;padding-left:12px}
.pq-bang .pq-ten{min-width:0}
.pq-bang .pq-ten b{font-size:12.5px;line-height:1.3}
.pq-bang .pq-ten span{font-size:10.5px}
.pq-o{width:21px;height:21px;border-radius:6px}
.pq-bang .pq-ten{max-width:172px}

/* ═══════════ QUẢN TRỊ TRANG ═══════════ */
.ct-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:13px}
.ct-luoi label{display:block;margin-bottom:5px}
select.inp{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:34px}
select.inp option{background:var(--bg-1);color:var(--ink)}
.ktk-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:6px}
.ktk-o{padding:15px 17px;border-radius:var(--r);border:1px solid color-mix(in srgb, var(--kc) 42%, transparent);
  background:linear-gradient(155deg,color-mix(in srgb, var(--kc) 12%, transparent),var(--phu-1))}
.ktk-h{display:flex;align-items:center;gap:8px;color:var(--kc);margin-bottom:8px}
.ktk-h b{font-size:12.5px;font-weight:800;letter-spacing:.1em}
.ktk-o p{font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.ktk-ai{margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--ink-4);text-transform:uppercase}

/* ═══════════ SỬA NỘI DUNG HIỂN THỊ ═══════════ */
.nd-nhom{margin-bottom:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.nd-nhom-h{display:flex;align-items:center;gap:9px;padding:10px 15px;font-size:12.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  background:var(--phu-2);border-bottom:1px solid var(--line)}
.nd-nhom-h span{margin-left:auto;color:var(--ink-4)}
.nd-hang{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;align-items:center;
  padding:10px 15px;border-bottom:1px solid var(--phu-2)}
.nd-hang:last-child{border-bottom:none}
.nd-hang.sua{background:var(--gita-mo-1)}
.nd-goc p{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-top:3px}
.nd-o{font-size:12.5px}
.nd-hang.sua .nd-o{border-color:var(--gita-vien-2);color:var(--gold-ink)}
@media(max-width:760px){ .nd-hang{grid-template-columns:1fr;gap:7px} }

/* Bảng tài khoản xếp theo ba tầng quyền */
.tk-khoi{margin:20px 0 9px;padding:11px 14px;border-radius:var(--r-sm);
  border-left:3px solid var(--kc);background:color-mix(in srgb, var(--kc) 9%, transparent)}
.tk-h{display:flex;align-items:baseline;gap:10px}
.tk-h b{font-size:12.5px;font-weight:800;letter-spacing:.11em;color:var(--kc)}
.tk-h span{margin-left:auto;font-size:10.5px;color:var(--ink-4)}
.tk-mo{margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* ═══════════ BỘ NHẬN DIỆN THƯƠNG HIỆU ═══════════ */
.nd-logo{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:26px 24px;
  border-radius:var(--r-lg);border:1px solid var(--line);background:#FFFFFF}
.nd-logo-o{flex:1;min-width:260px;max-width:420px}
.nd-logo-p{flex:none;width:96px}
.nd-dau{width:68px;height:68px;margin:0 auto;border-radius:18px;overflow:hidden;
  border:1px solid var(--gita-vien-1);box-shadow:0 10px 24px -12px var(--gita-day)}
.nd-dau img{width:100%;height:100%;object-fit:contain;display:block}
.nd-mau{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.nd-o{display:flex;gap:13px;padding:13px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.nd-o-mau{width:52px;height:52px;border-radius:13px;flex:none;background:var(--mc);
  box-shadow:0 8px 20px -10px var(--mc)}
.nd-o-tx{min-width:0}
.nd-o-tx b{display:block;font-size:14.5px}
.nd-o-tx span{display:block;font-size:12.5px;color:var(--ink-3)}
.nd-o-tx p{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.nd-tang{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.nd-t{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface)}
.nd-t-o{width:24px;height:24px;border-radius:8px;flex:none;background:var(--mc)}
.nd-t b{font-size:12.5px;display:block;line-height:1.3}
.nd-t>div{min-width:0}
.nd-t span{display:block;font-size:10.5px;color:var(--ink-4);margin-top:2px}
.nd-cham{display:inline-block;width:13px;height:13px;border-radius:5px;background:var(--mc);
  vertical-align:-2px;margin-right:7px}

/* Câu Tầm nhìn GITA 365 — đặt nguyên văn, không cắt, không diễn giải lại */
.tn-tam-nhin{font-family:var(--serif);font-size:18px;line-height:1.52;font-weight:500;
  color:var(--ink);margin:0;text-wrap:pretty;
  padding-left:15px;border-left:3px solid var(--gita)}
@media(max-width:600px){ .tn-tam-nhin{font-size:18px;padding-left:12px} }

/* ═══════════ THƯ VIỆN & MINH CHỨNG ═══════════ */
.tl-the{padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);margin-bottom:12px}
.tl-the-h{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.tl-the-h b{font-size:14.5px;line-height:1.35}
.tl-chuan-o{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--phu-1);
  border:1px solid var(--line)}
.tl-ghi{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.tl-ghi-d{padding:8px 11px;border-radius:var(--r-sm);background:var(--gita-mo-1);
  border-left:2px solid var(--gita);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
input[type=file].inp{padding:9px 12px;font-size:12.5px;cursor:pointer}
input[type=file].inp::file-selector-button{margin-right:11px;padding:6px 13px;border-radius:9px;
  border:1px solid var(--gita-vien-1);background:var(--gita-mo-2);color:var(--gita-ink);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
textarea.inp{resize:vertical;min-height:70px;line-height:1.6}

/* Cặp nói thế này — không nói thế kia */
.lt-cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.lt-o{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.lt-khong,.lt-nen{display:flex;gap:9px;padding:11px 13px;font-size:12.5px;line-height:1.6}
.lt-khong{color:var(--ink-4);background:var(--phu-1);border-bottom:1px solid var(--line)}
.lt-khong svg{color:var(--gita-do-ink);flex:none;margin-top:3px}
.lt-nen{color:var(--ink-2)}
.lt-nen svg{color:var(--ok);flex:none;margin-top:3px}

/* ═══════════ TÀI LIỆU GỐC HỌC VIỆN ═══════════ */
.tlg-dan{display:flex;flex-direction:column;gap:2px;max-height:420px;overflow-y:auto;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.tlg-m{font-size:12.5px;line-height:1.55;padding:3px 0}
.tlg-m.c1{font-weight:800;color:var(--gita-ink);margin-top:8px}
.tlg-m.c2{color:var(--ink-3);padding-left:16px;font-size:12.5px}
.tlg-b{margin-bottom:18px}
.tlg-b-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12.5px;color:var(--ink-3)}
.tlg-b-h b{font-weight:700;color:var(--ink-2);flex:1;min-width:0}
.tlg-b-h span{color:var(--ink-4)}
.tlg-b .tbl td{vertical-align:top;max-width:340px}

/* ═══════════ SẮP XẾP THƯ MỤC ═══════════ */
.sx-nhom{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.sx-h{display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:color-mix(in srgb, var(--nc) 10%, transparent);border-bottom:1px solid var(--line)}
.sx-ic{color:var(--nc);flex:none}
.sx-tx{flex:1;min-width:0}
.sx-tx b{display:block;font-size:12.5px;font-weight:800;letter-spacing:.05em}
.sx-tx span{font-size:12.5px;color:var(--ink-4)}
.sx-nut{display:flex;gap:5px;flex:none}
.sx-b{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--phu-1);display:grid;place-items:center;font-size:14.5px;color:var(--ink-3);transition:.15s}
.sx-b:hover{border-color:var(--gita);color:var(--gita-ink);background:var(--gita-mo-1)}
.sx-b.xoa:hover{border-color:var(--gita-do);color:var(--gita-do-ink)}
.sx-b.tr{border-color:transparent;background:none;pointer-events:none}
.sx-ds{padding:6px 10px 10px}
.sx-m{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--phu-1)}
.sx-m:last-child{border-bottom:none}
.sx-m-ic{color:var(--ink-4);flex:none}
.sx-m-t{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-sel{flex:none;width:190px;padding:5px 26px 5px 9px;font-size:12.5px;background-position:calc(100% - 13px) 52%,calc(100% - 9px) 52%}
@media(max-width:820px){ .sx-sel{display:none} .sx-m-t{white-space:normal} }

/* ═══════════ TRỢ LÝ GITA ═══════════ */
.ai-hop{padding:0;overflow:hidden}
.ai-khung{min-height:220px;max-height:min(52vh,520px);overflow-y:auto;padding:18px 20px;
  display:flex;flex-direction:column;gap:18px}
.ai-trong{text-align:center;color:var(--ink-4);padding:40px 20px}
.ai-trong svg{opacity:.4;margin-bottom:10px}
.ai-trong p{font-size:14.5px}
.ai-luot{display:flex;flex-direction:column;gap:10px}
.ai-hoi{align-self:flex-end;max-width:80%;padding:10px 16px;border-radius:18px 18px 5px 18px;
  background:var(--gita);color:#fff;font-size:14.5px;line-height:1.6}
.ai-dap{max-width:94%}
.ai-nhip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gita-ink);
  background:var(--gita-mo-2);padding:4px 10px;border-radius:99px;margin-bottom:8px}
.ai-loi{font-size:14.5px;line-height:1.72;color:var(--ink);margin-bottom:12px}
.ai-khan{display:flex;gap:12px;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--gita-do);background:color-mix(in srgb, var(--gita-do) 9%, transparent)}
.ai-khan svg{color:var(--gita-do-ink);flex:none;margin-top:2px}
.ai-khan b{display:block;font-size:14.5px;color:var(--gita-do-ink);margin-bottom:5px}
.ai-khan p{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.ai-chuaco{display:flex;gap:9px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--phu-1);border:1px solid var(--line);font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.ai-chuaco svg{color:var(--ink-4);flex:none;margin-top:2px}
.ai-nguon-nhan{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:8px}
.ai-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}
.ai-n{text-align:left;padding:11px 13px;border-radius:var(--r-sm);border:1px solid var(--line);
  border-left:3px solid var(--nc);background:var(--surface);transition:.16s;width:100%}
.ai-n:hover{border-color:var(--nc);background:var(--phu-1);transform:translateY(-1px)}
.ai-n-h{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.ai-n-loai{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--nc)}
.ai-n-ma{font-size:10.5px;color:var(--ink-4);margin-left:auto}
.ai-n b{display:block;font-size:12.5px;line-height:1.4;margin-bottom:3px}
.ai-n p{font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.ai-n-muc{display:block;margin-top:5px;font-size:10.5px;color:var(--ink-4)}
.ai-chot{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--ink-4);font-style:italic}
/* ── BỐN NHỊP DẪN MỘT VIỆC (9.48) ──
   Đứng trước danh sách tư liệu nên nó phải NẶNG hơn: viền trái đậm, nền
   khác, số nhịp to. Người đang mệt phải nhìn ra ngay đâu là việc làm tối
   nay và đâu là tư liệu đọc thêm. */
.ai-viec{margin:4px 0 14px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--phu-1);border:1px solid var(--line);border-left:3px solid var(--gita)}
.ai-viec-h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:11px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.ai-viec-h b{font-size:14.5px;line-height:1.35}
.ai-viec-bd{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin-left:auto}
.ai-viec-n{display:flex;gap:11px;padding:8px 0}
.ai-viec-n+.ai-viec-n{border-top:1px solid var(--gita-vien-2)}
.ai-viec-no{flex:none;width:21px;height:21px;border-radius:99px;background:var(--gita);
  color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.ai-viec-n b{display:block;font-size:12.5px;line-height:1.4;margin-bottom:2px}
.ai-viec-n p{font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ai-viec-n.thieu .ai-viec-no{background:var(--phu-2);color:var(--ink-4)}
.ai-viec-thieu{color:var(--ink-4);font-style:italic}
.ai-viec-chan{display:flex;gap:6px;align-items:center;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--gita-vien-2);font-size:10.5px;color:var(--ink-4)}
.ai-viec-cho{display:flex;gap:11px;align-items:flex-start;border-left-color:var(--ink-4)}
.ai-viec-cho svg{color:var(--ink-4);flex:none;margin-top:2px}
.ai-viec-cho b{display:block;font-size:12.5px;margin-bottom:3px}
.ai-viec-cho p{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
/* Nói ra cái KHÔNG đưa: giữ lại vì vượt tầng, và kho chưa khai tầng. */
.ai-tang-giu{display:flex;gap:7px;align-items:flex-start;margin-top:11px;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--phu-1);border:1px dashed var(--line);
  font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.ai-tang-giu svg{color:var(--ink-4);flex:none;margin-top:3px}
.ai-tang-chua{margin-top:7px;line-height:1.55}
/* ── CHUỖI KỊCH BẢN: NĂM VÒNG (9.49) ──
   Đứng đầu câu trả lời nên nó phải là thứ NẶNG NHẤT trên khối: nền đậm
   hơn, viền trái dày. Câu hỏi của vòng in to bằng cỡ đọc chính, vì đó là
   thứ duy nhất người ta cần trả lời ngay. */
.kb-vong{margin:0 0 14px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gita-2)}
.kb-vong-h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.kb-vong-no{flex:none;padding:2px 8px;border-radius:99px;background:var(--gita-2);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em}
.kb-vong-h b{font-size:12.5px;line-height:1.4}
.kb-vong-th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-4);margin-left:auto}
.kb-khuc{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-bottom:6px}
.kb-thieu{color:var(--ink-4);font-style:italic}
.kb-doctu{margin-bottom:11px;line-height:1.55}
.kb-hoi{font-size:16px;line-height:1.6;font-weight:700;color:var(--ink);
  margin:12px 0 10px;padding-top:11px;border-top:1px solid var(--gita-vien-2)}
.kb-goiy{display:flex;flex-wrap:wrap;gap:7px}
.kb-chip{padding:8px 14px;border-radius:99px;border:1px solid var(--line);
  background:var(--phu-1);font-size:12.5px;line-height:1.3;transition:.16s}
.kb-chip:hover{border-color:var(--gita-2);background:var(--surface);transform:translateY(-1px)}
.kb-quaylai{display:flex;gap:6px;align-items:flex-start;margin-top:11px;line-height:1.6}
.kb-quaylai svg{flex:none;margin-top:3px}
/* Mời vượt tầng — nói CÓ, không mở tên. Nhạt hơn khối vòng có chủ ý:
   nó là chỗ đi tiếp, không phải việc của tối nay. */
.kb-moi{display:flex;gap:11px;align-items:flex-start;margin:0 0 14px;padding:13px 15px;
  border-radius:var(--r-sm);background:var(--phu-1);border:1px dashed var(--line)}
.kb-moi svg{color:var(--ink-4);flex:none;margin-top:3px}
.kb-moi b{display:block;font-size:12.5px;margin-bottom:4px}
.kb-moi p{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-bottom:5px}
.kb-moi-duoc{color:var(--ink-2)}
.kb-moi-gia{font-weight:700;color:var(--ink-2)}
/* Giọng: câu mở và bắt nhịp đứng trước khối vòng, nhẹ hơn nó có chủ ý —
   đây là lời dẫn, không phải nội dung. */
.gn-mo{font-size:16px;line-height:1.65;color:var(--ink);margin-bottom:8px}
.gn-nhip{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:11px;
  font-size:12.5px;color:var(--ink-4)}
.gn-nhip svg{flex:none}
.gn-that{padding:11px 14px;border-radius:var(--r-sm);background:var(--phu-1);
  border:1px solid var(--line);margin-bottom:12px}
.gn-ps{margin-bottom:13px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--phu-1);border-left:3px solid var(--ink-4)}
.gn-ps-nguoi{border-left-color:#BE0E16}
.gn-ps-loai{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4)}
.gn-ps-ranh{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:5px 0 7px}
/* Nghiệp vụ theo vai — chỉ người trong nghề thấy khối này. */
.kb-nv{margin:0 0 14px;padding:13px 15px;border-radius:var(--r-sm);
  background:var(--phu-1);border:1px solid var(--line);border-left:3px solid #5140B4}
.kb-nv-h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:7px}
.kb-nv-vai{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#5140B4}
.kb-nv-h b{font-size:12.5px;line-height:1.4}
.kb-nv-lam{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-bottom:9px}
.kb-nv-muc{padding:8px 0;border-top:1px solid var(--gita-vien-2)}
.kb-nv-tr{display:block;font-size:10.5px;color:var(--ink-4);margin-bottom:3px}
.kb-nv-muc p{font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.ai-go{display:flex;gap:9px;padding:14px 20px;border-top:1px solid var(--line);background:var(--phu-1)}
.ai-go input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:12px 20px;font-size:14.5px;outline:none;color:var(--ink)}
.ai-go input:focus{border-color:var(--gita)}
@media(max-width:600px){ .ai-ds{grid-template-columns:1fr} .ai-hoi{max-width:92%} }

/* ═══════════ KHOÁ SAO CHÉP CHO TÀI KHOẢN KHÁCH HÀNG ═══════════
   Bôi đen là cửa gốc: trợ lý đọc màn hình, lệnh sao chép bằng giọng nói và
   mọi thao tác chép bằng chuột đều phải bôi đen được văn bản trước. Đóng
   cửa này là đóng cả ba đường. Ô để gõ vẫn mở, nếu không thì khách không
   đăng ký, không viết nhật ký, không hỏi trợ lý được. */
body.khoa-chep{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;          /* tắt menu giữ-lâu trên điện thoại */
  -webkit-tap-highlight-color:transparent;
}
body.khoa-chep input,
body.khoa-chep textarea,
body.khoa-chep select,
body.khoa-chep [contenteditable="true"],
body.khoa-chep .cho-chep{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
body.khoa-chep ::selection{background:transparent}
body.khoa-chep ::-moz-selection{background:transparent}
body.khoa-chep input::selection,
body.khoa-chep textarea::selection{background:var(--gita-mo-3)}
body.khoa-chep img{-webkit-user-drag:none; user-drag:none; pointer-events:none}

/* ── Chặn in ở tầng bản in ──
   Chặn Ctrl+P chỉ bịt được phím tắt. Trình đơn của trình duyệt (⋮ ▸ In) và
   lệnh in của hệ điều hành không đi qua bàn phím, nên bộ nghe phím không
   với tới. Tầng này thì với tới: khi trình duyệt dựng bản in, toàn bộ nội
   dung bị ẩn và chỉ còn lại một trang báo. Ai bấm in ra giấy hay in ra PDF
   đều nhận đúng trang ấy. */
@media print{
  body.khoa-chep #app,
  body.khoa-chep #shell,
  body.khoa-chep #top,
  body.khoa-chep #left,
  body.khoa-chep #right,
  body.khoa-chep #main,
  body.khoa-chep #wm,
  body.khoa-chep #modal,
  body.khoa-chep #toast{ display:none !important }

  body.khoa-chep::after{
    content:'GITA 365 — Nội dung này không được phép in.\A '
            'Hồ sơ của gia đình đọc trực tiếp trên ứng dụng. '
            'Cần bản mang về, xin liên hệ Tư vấn hoặc Coach của nhà mình.\A '
            'Học viện GITA · 08.5555.4688';
    display:block; white-space:pre-line; text-align:center;
    padding:80px 40px; font-size:16px; line-height:2; color:#185AB4;
  }
}

/* ═══════════ THANH NHẮC ═══════════
   Nằm trên đầu vùng nội dung, mọi màn đều thấy khi có việc trễ nhịp.
   Cố ý không làm nó nhấp nháy hay đỏ chói: nhắc chứ không doạ. */
.nhac-thanh{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:11px 16px;margin-bottom:16px;border-radius:var(--r);
  background:var(--gita-mo-1);border:1px solid var(--gita-vien-1)}
.nhac-cham{width:9px;height:9px;border-radius:50%;flex:none}
.nhac-noi{flex:1;min-width:200px;display:flex;flex-direction:column;gap:1px}
.nhac-noi b{font-size:14.5px;line-height:1.4}
.nhac-y{font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* ═══════════ KHUNG TRÒ CHUYỆN ═══════════ */
.ch-hop{padding:0;overflow:hidden}
.ch-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 20px;border-bottom:1px solid var(--line);background:var(--phu-1)}
.ch-dau-t{display:flex;align-items:center;gap:8px;font-size:14.5px}
.ch-dau-t svg{color:var(--gita)}
.ch-trangthai{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;color:var(--ok);text-transform:uppercase}
.ch-trangthai svg{color:var(--ok)}
.ch-khung{min-height:280px;max-height:min(56vh,560px);overflow-y:auto;padding:20px;
  display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
.ch-luot{display:flex;gap:10px;align-items:flex-start}
.ch-toi{justify-content:flex-end}
.ch-anh{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:12.5px;font-weight:800}
.ch-anh-ai{background:var(--gita-mo-2);color:var(--gita-ink);border:1px solid var(--gita-vien-1)}
.ch-anh-toi{background:var(--gita);color:#fff}
.ch-bong{max-width:78%;padding:11px 16px;border-radius:18px 18px 5px 18px;
  background:var(--gita);color:#fff;font-size:14.5px;line-height:1.65}
.ch-bong-ai{max-width:88%;background:var(--phu-1);color:var(--ink);
  border:1px solid var(--line);border-radius:18px 18px 18px 5px;padding:14px 17px}
.ch-bong-ai .ai-loi{margin-bottom:10px}
.ch-bong-ai > :last-child{margin-bottom:0}
/* Xưng vai đang trả lời — dòng nhỏ trên đầu bóng nói. */
.ai-vai{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:8px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.ai-vai b{font-size:12.5px;font-weight:800;color:var(--gita-ink)}
.ai-vai span{font-size:10.5px;color:var(--ink-3)}
/* Bóng "đang soạn" — ba chấm nhịp, như người đang gõ. */
.ch-soan .soan-cham{display:inline-flex;gap:5px;align-items:center;height:14px}
.ch-soan .soan-cham i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);
  opacity:.35;animation:soanNhay 1.1s ease-in-out infinite}
.ch-soan .soan-cham i:nth-child(2){animation-delay:.18s}
.ch-soan .soan-cham i:nth-child(3){animation-delay:.36s}
@keyframes soanNhay{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
/* Phân tích số liệu — nhà khoa học toán trình bước. */
.ai-toan{background:var(--phu-2);border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;margin:2px 0 12px}
.ai-toan-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gita-ink);margin-bottom:5px}
.ai-toan-h svg{display:inline;vertical-align:-2px;margin-right:3px}
.ai-toan-cach{font-size:14.5px;line-height:1.6;color:var(--ink)}
/* Tư liệu tham khảo — gập lại cho khách, dẫn bằng câu trả lời trước. */
.ai-tulieu{margin-top:6px}
.ai-tulieu > summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink-2);
  padding:6px 0;list-style:none}
.ai-tulieu > summary::-webkit-details-marker{display:none}
.ai-tulieu > summary svg{display:inline;vertical-align:-2px;margin-right:4px}
.ai-tulieu[open] > summary{margin-bottom:8px}
.ch-go{display:flex;gap:9px;padding:14px 20px;border-top:1px solid var(--line);background:var(--phu-1)}
.ch-go input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:12px 20px;font-size:14.5px;outline:none;color:var(--ink)}
.ch-go input:focus{border-color:var(--gita)}
.ch-goiy{gap:6px;padding:0 20px 16px}
.ai-nguon-cho{color:var(--gita-do-ink)}
.ai-n-cho{background:var(--phu-1);opacity:.96;cursor:default}
.ai-n-cho b{color:var(--ink-2)}
.ai-n-cho-loi{display:block;font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:5px 0 8px}
.ai-n-cho-loi svg{display:inline;vertical-align:-2px;margin-right:3px;color:var(--gita-do-ink)}
@media(max-width:600px){ .ch-bong{max-width:88%} .ch-bong-ai{max-width:94%} }

/* ═══════════ CỬA SỔ TRÒ CHUYỆN — bản 9.99.50 ═══════════

   Bản trước là một HỘP CHAT đặt giữa một trang đầy thẻ: khung cao
   280px, dưới nó bốn thẻ giải thích, và khung chat trôi lên mất khi
   người ta cuộn xuống đọc. Nghĩa là chỗ để NÓI CHUYỆN chiếm chưa tới
   một phần ba màn hình, còn hai phần ba là chỗ nói VỀ việc nói chuyện.

   Nay cửa sổ chiếm trọn chiều cao, ba tầng đứng yên: đầu · dòng
   chuyện · chỗ gõ. Cuộn chỉ xảy ra bên trong dòng chuyện, nên chỗ gõ
   không bao giờ rời khỏi tầm mắt — đó là khác biệt lớn nhất giữa một
   hộp chat và một cửa sổ chat.

   Bốn thẻ kia không bỏ đi. Chúng sang cột phải trên màn rộng, và
   xuống dưới cửa sổ trên điện thoại. */
body.man-chat main{padding-bottom:18px}
/* ── ĐO CỘT GIỮA, KHÔNG ĐO MÀN HÌNH ──
   Bản đầu tôi chia hai cột bằng @media(min-width:1181px). Chụp thử ở
   1500px thì cửa sổ chat bị ép còn khoảng 520px, vì màn ấy đang mở CẢ
   cột trái 288px LẪN cột phải 326px — bề ngang màn hình nói 1500, chỗ
   thật sự còn cho nội dung chỉ 886.
   Đó là lớp lỗi của mọi @media trong một khung có hai cột thu vào
   được: nó hỏi sai câu. Câu đúng là "cột giữa rộng bao nhiêu", và
   @container hỏi đúng câu ấy. Trình duyệt không hiểu @container thì
   ở lại một cột — đọc vẫn tốt, chỉ là không tận dụng bề ngang. */
main{container-type:inline-size}
.cs-lo{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@container (min-width:1000px){
  .cs-lo{grid-template-columns:minmax(0,1fr) 304px}
  .cs-ben{position:sticky;top:calc(var(--top-tong) + 20px)}
}
.cs-win{display:flex;flex-direction:column;overflow:hidden;padding:0;
  height:calc(100dvh - var(--top-h) - 150px);min-height:440px}
/* ── VÌ SAO CHIỀU CAO ĐO BẰNG JS, KHÔNG TRỪ BẰNG SỐ ──
   Con số trong calc() ở trên chỉ là mức tạm cho lần vẽ đầu. Chiều cao
   thật do G.csCaoCuaSo() đo và đặt lại.
   Bản đầu tôi trừ bằng số: 100dvh - top-h - 46px. Đo thử thì đáy cửa
   sổ nằm 61px DƯỚI tầm mắt — chỗ gõ bị đẩy ra ngoài màn, đúng thứ cửa
   sổ này sinh ra để tránh. Phía trên nó có ba thứ chồng lên nhau: lề
   vùng nội dung, thanh nhắc việc trễ nhịp (lúc có lúc không), và 26px
   nữa mà đọc CSS không truy ra nguồn. Trừ bằng số là đoán ba thứ ấy
   cùng lúc, và đoán sai thì sai im lặng — trang vẫn dựng ra, chỉ là
   chỗ gõ nằm ngoài màn. */
.cs-dau{display:flex;align-items:center;gap:12px;flex:none;
  padding:13px 18px;border-bottom:1px solid var(--line);background:var(--phu-1)}
.cs-anh{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--gita-mo-2);color:var(--gita-ink);border:1px solid var(--gita-vien-1)}
.cs-anh svg{width:20px;height:20px}
.cs-ten{min-width:0;flex:1}
.cs-ten b{display:block;font-size:14.5px;line-height:1.3}
.cs-duoi{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10.5px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-cham{width:7px;height:7px;border-radius:99px;background:var(--ok);flex:none;opacity:.9}
.cs-cuon{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:20px 20px 8px;
  display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;position:relative}
/* Vạch ngày và giờ của từng lượt. Một cuộc trò chuyện không có mốc
   thời gian thì đọc lại không biết câu nào nói trước câu nào. */
.cs-vach{align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);background:var(--phu-2);
  border:1px solid var(--line);border-radius:99px;padding:3px 12px}
.cs-gio{display:block;margin-top:5px;font-size:10.5px;opacity:.72;font-variant-numeric:tabular-nums}
.ch-toi .cs-gio{text-align:right}
/* Chỗ gõ: ô chữ tự cao lên tới năm dòng rồi mới cuộn. Ô một dòng bắt
   người ta gõ một câu dài mà chỉ nhìn thấy khúc cuối của nó. */
.cs-go{flex:none;border-top:1px solid var(--line);background:var(--phu-1);padding:12px 18px 14px}
/* Chạy ngang MỘT hàng ở mọi khổ màn, không xuống dòng. Năm câu gợi ý
   xuống dòng trên màn hẹp chiếm 175px — đo được — và dòng chuyện chỉ
   còn 75px. Một hàng cuộn hết 35px, và câu gợi ý vẫn ở đó suốt cuộc
   trò chuyện như bộ kiểm mục 18 đòi. */
.cs-goiy{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:10px;
  padding-bottom:5px;scrollbar-width:none;-ms-overflow-style:none}
.cs-goiy::-webkit-scrollbar{display:none}
.cs-goiy .chip{flex:none}
.cs-o{display:flex;gap:9px;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line);border-radius:22px;padding:6px 6px 6px 18px;transition:.18s}
.cs-o:focus-within{border-color:var(--gita)}
.cs-o textarea{flex:1;min-width:0;background:none;border:0;outline:none;resize:none;
  color:var(--ink);font:inherit;font-size:14.5px;line-height:1.55;
  padding:10px 0;max-height:120px;overflow-y:auto}
.cs-o textarea::placeholder{color:var(--ink-4)}
.cs-nut{width:38px;height:38px;border-radius:99px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3);cursor:pointer;
  transition:.18s}
.cs-nut:hover{border-color:var(--line-2);color:var(--ink)}
.cs-nut.pri{background:var(--gita);border-color:var(--gita);color:#fff}
.cs-nut.pri:hover{filter:brightness(1.08)}
.cs-nut svg{width:17px;height:17px}
.cs-meo{margin:8px 2px 0;font-size:10.5px;color:var(--ink-4);line-height:1.5}
/* Cột phải. `position:sticky` chỉ bật khi thật sự có hai cột — khai ở
   khối @container ở trên. Một cột mà sticky thì thẻ dính lại giữa màn
   trong lúc người ta đang cuộn đọc chính nó. */
.cs-ben{display:flex;flex-direction:column;gap:12px}
.cs-ben .card{margin:0}
@media(max-width:860px){
  .cs-cuon{padding:16px 14px 6px}
  .cs-go{padding:10px 12px 12px}
  /* Mẹo phím tắt là chuyện của bàn phím. Trên điện thoại nó chiếm 47px
     để nói về hai phím không có ở đó. */
  .cs-meo{display:none}
}

.tlg-doan{max-height:520px;overflow-y:auto;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
.tlg-doan p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin-bottom:12px}
.tlg-doan p:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════
   KHUNG NỘI DUNG CHO MÁY TÌM KIẾM

   Phần này nằm trong <div id="app"> và bị ứng dụng ghi đè ngay khi
   JavaScript chạy. Nó chỉ hiện với trình thu thập, và với người dùng
   trong khoảnh khắc trước lúc ứng dụng dựng xong.

   KHÔNG ẩn nó bằng display:none. Chữ ẩn đi mà vẫn để cho máy tìm kiếm
   đọc là kỹ thuật che giấu — Google phạt, và phạt nặng hơn hẳn cái lợi.
   Nội dung này là nội dung thật, người dùng cũng đọc được y hệt trong
   màn Giới thiệu của ứng dụng. Nên để nó hiện, và làm cho nó tử tế.
   ═══════════════════════════════════════════════════════════════ */
.seo-shell{max-width:820px;margin:0 auto;padding:48px 22px 80px;
  color:var(--ink-2,#C9C5DC);font-size:16px;line-height:1.8}
.seo-shell h1{font-size:clamp(28px,5vw,44px);line-height:1.2;margin:0 0 18px;
  color:var(--ink,#F2F0FA);letter-spacing:-.01em}
.seo-shell h2{font-size:clamp(20px,3.4vw,28px);line-height:1.3;margin:44px 0 10px;
  color:var(--gita,#F0B429);letter-spacing:-.005em}
.seo-shell h3{font-size:18px;margin:26px 0 6px;color:var(--ink,#F2F0FA)}
.seo-shell p{margin:0 0 12px}
.seo-shell ul,.seo-shell ol{margin:0 0 14px;padding-left:22px}
.seo-shell li{margin:0 0 7px}
.seo-shell dt{margin:16px 0 4px;color:var(--ink,#F2F0FA)}
.seo-shell dd{margin:0 0 10px}
.seo-shell strong{color:var(--ink,#F2F0FA)}
.seo-shell a{color:var(--gita,#F0B429)}
.seo-shell small{opacity:.7;font-weight:400}

/* Dải "vừa mở thêm" — chỉ hiện đúng lần đầu sau khi phạm vi rộng ra */
.pv-moi{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;
  border-radius:13px;border:1px solid var(--gita-vien-2);background:var(--gita-mo-1)}
.pv-moi>svg{color:var(--gold-ink);flex:none}
.pv-moi>div{flex:1;min-width:0}
.pv-moi b{display:block;font-size:12.5px;line-height:1.35}
.pv-moi span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   KHUNG ẢNH VÀ HÌNH DỰNG TỪ KHO  ·  v9.25
   Hai lớp khác nhau về bản chất: .hinh-kho là hình máy tự dựng từ kho
   (luôn có, không cần tệp); .ka-* là chỗ chờ chủ hệ đưa ảnh thật vào.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hình dựng từ kho ── */
.hinh-kho{margin:18px 0;padding:18px 16px 14px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);overflow:hidden}
.hinh-nhan{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:12px}
/* Hình rộng phải cuộn TRONG khung của nó — thân trang không bao giờ
   được cuộn ngang, vì trên điện thoại đó là lỗi không ai báo mà ai
   cũng gặp. */
.hinh-ve{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hinh-ve svg{color:var(--ink-3);min-width:300px}
.hinh-y{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:12px}

/* ── Khung ảnh đã điền ── */
.ka-khung{margin:18px 0}
.ka-khung .ka-o{position:relative;width:100%;padding-top:var(--ka-ty,56.25%);
  border-radius:16px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line)}
.ka-khung .ka-o>img,.ka-khung .ka-o>iframe{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;border:0;display:block}
.ka-khung figcaption{font-size:12.5px;line-height:1.6;color:var(--ink-3);
  margin-top:9px}
.ka-the .ka-o{max-width:340px;margin-inline:auto}
.ka-dai .ka-o{border-radius:12px}

/* ── Khung còn trống: CHỈ chủ hệ thấy ──
   Cố ý trông như một chỗ chờ, không trông như một lỗi. Nó là việc còn
   phải làm, và việc còn phải làm thì cần đọc được chứ không cần đỏ. */
.ka-cho{margin:18px 0;padding:14px;border:1px dashed var(--gita-vien-2);
  border-radius:16px;background:var(--gita-mo-1)}
.ka-cho .ka-o{position:relative;width:100%;min-height:132px;
  border-radius:12px;background:transparent;border:1px dashed var(--line-2)}
.ka-giua{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px}
.ka-giua>svg{color:var(--gita);opacity:.75}
.ka-giua b{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.ka-ky{font-size:10.5px;letter-spacing:.04em;color:var(--ink-4)}
.ka-brief,.ka-vi,.ka-khoa,.ka-loi{font-size:12.5px;line-height:1.7;margin-top:9px}
.ka-brief{color:var(--ink-2)}
.ka-vi{color:var(--ink-3)}
.ka-khoa{color:var(--ink-4)}
.ka-khoa code{font-size:12.5px;padding:1px 5px;border-radius:5px;
  background:var(--nen-hop);border:1px solid var(--line)}
.ka-loi{color:var(--gita-do)}

@media (max-width:640px){
  .hinh-kho{padding:14px 12px 12px}
  .ka-the .ka-o{max-width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   BỀ NGANG MỘT DÒNG CHỮ  ·  v9.26
   Đo trên bản 9.25: cột nội dung 826px, chữ đọc 13px → GIỮA 111 ký tự
   mỗi dòng, cao nhất 133. Chín mươi sáu trên một trăm hai hai đoạn vượt
   85 ký tự.

   Chuẩn đọc là 45–75 ký tự. Trên 90 thì mắt mất chỗ xuống dòng: đọc hết
   dòng rồi quét ngược tìm đầu dòng sau, quét trượt một dòng, và người
   đọc không biết mình vừa trượt — họ chỉ thấy đoạn văn khó vào.

   Đây là chỗ hỏng KHÔNG lộ ra khi nhìn ảnh chụp: trang trông đầy đặn,
   thẳng thớm, không có gì lệch. Nó chỉ lộ ra khi ĐO.

   Chặn ở CHỮ chứ không chặn ở thẻ: thẻ vẫn rộng hết cột để còn ôm bảng,
   hình và hàng nút; chỉ dòng chữ là hẹp lại. Bảng và hình cần bề ngang,
   câu văn thì không.
   ═══════════════════════════════════════════════════════════════ */
#main p,
#main li,
#main .ka-brief,
#main .ka-vi,
#main .ka-khoa,
#main .hinh-y{max-width:62ch}
#main .ph .lead{max-width:58ch}
/* Ô bảng, thẻ số và chỗ chữ căn giữa thì không chặn — chúng đã hẹp sẵn
   theo khung của mình, và chặn thêm chỉ làm chữ lệch khỏi tâm ô. */
#main .tbl p,#main .tbl li,#main .stat p,#main .ka-giua p,
#main [style*="text-align:center"] p{max-width:none}

/* ═══════════════════════════════════════════════════════════════
   BẬC THANG HÀNH ĐỘNG  ·  v9.29
   Mỗi bậc một biểu tượng thành công. Ba trạng thái phân biệt được cả
   khi in đen trắng lẫn khi người xem không phân biệt được màu: đá đặc
   có dấu tích · đá viền đậm · đá viền đứt và mờ.
   ═══════════════════════════════════════════════════════════════ */
.bt{list-style:none;margin:18px 0;padding:0;display:flex;flex-direction:column;gap:0}
.bt-b{display:flex;gap:14px;padding:14px 0;position:relative}
/* Vạch nối bậc dưới lên bậc trên — cái thang phải TRÔNG như nối liền,
   nếu không nó chỉ là năm thẻ xếp chồng. */
/* Vạch bắt đầu DƯỚI cả viên đá lẫn số bậc (32 + 5 + 13 + 6 = 56px).
   Đặt 46px thì nó chạy xuyên qua con số — chỉ lộ ra khi nhìn màn. */
.bt-b:not(:last-child) .bt-cot:after{content:'';position:absolute;left:50%;
  top:56px;bottom:-14px;width:2px;transform:translateX(-50%);
  background:var(--bt-c);opacity:.28}
.bt-cot{position:relative;flex:none;width:44px;display:flex;flex-direction:column;
  align-items:center;gap:5px}
.bt-da{width:32px;height:32px;display:block}
.bt-so{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--bt-c);opacity:.85;
  position:relative;z-index:1}
.bt-ruot{flex:1;min-width:0;padding-top:3px}
.bt-dinh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bt-ten{font-size:16px;letter-spacing:.04em;color:var(--bt-c)}
.bt-tt{font-size:10.5px;letter-spacing:.12em;color:var(--ink-4)}
.bt-phu{font-size:12.5px;color:var(--ink-3);margin-top:2px}
/* Việc của bậc đang đứng viết TO hơn mọi chữ khác trên thang — nó là
   thứ duy nhất người đọc cần làm hôm nay. */
.bt-viec{font-size:16px;line-height:1.75;color:var(--ink);margin-top:8px;max-width:56ch}
.bt-kho{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:6px;max-width:56ch}

.bt-xong .bt-tt{color:var(--ok)}
.bt-dangO{background:linear-gradient(90deg,color-mix(in srgb,var(--bt-c) 8%,transparent),transparent 70%);
  border-radius:14px;padding-left:10px;margin-left:-10px}
.bt-dangO .bt-tt{color:var(--bt-c);font-weight:800}
/* Bậc chưa mở lặng hẳn đi: nó là lời hứa, không phải việc phải làm. */
.bt-chuaMo{opacity:.5}
.bt-chuaMo .bt-ten{color:var(--ink-3)}
.bt-chuaMo .bt-cot:after{background:var(--line-2)}
.bt-y{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:10px;max-width:62ch}

@media (max-width:640px){
  .bt-cot{width:36px}
  .bt-da{width:28px;height:28px}
  /* 14,5 chứ không 15: 15 là một bậc thứ mười, và phép kiểm mục 7 bắt
     ngay — nó vừa bắt đúng chính tôi ở bản này. Một thang chín bậc mà
     ai cũng thêm được một bậc nữa thì nó không còn là thang. */
  .bt-viec{font-size:14.5px}
  .bt-b:not(:last-child) .bt-cot:after{top:50px}
}

/* ═══════════════════════════════════════════════════════════════
   TIA HY VỌNG  ·  v9.31
   Thẻ trả lời đúng một câu: còn bao nhiêu nữa, và qua rồi thì nhà mình
   THẤY gì. Đặt trên cùng màn nhà mình, ngay dưới việc hôm nay.
   ═══════════════════════════════════════════════════════════════ */
.tia{margin:16px 0;padding:18px 18px 16px;border-radius:18px;
  border:1px solid var(--gita-vien-2);
  background:linear-gradient(160deg,var(--gita-mo-1),transparent 65%)}
.tia-dinh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.tia-nhan{font-size:10.5px;letter-spacing:.14em;color:var(--ink-4)}
.tia-moc{font-size:18px;letter-spacing:.01em}
/* Việc còn thiếu viết to nhất thẻ — nó là thứ duy nhất phải làm. */
.tia-viec{font-size:18px;line-height:1.6;color:var(--ink);margin:2px 0 12px;max-width:46ch}
.tia-thanh{height:7px;border-radius:99px;background:var(--phu-3);overflow:hidden}
.tia-thanh>i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.tia-da{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:10px}
.tia-mo{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin-top:10px;max-width:56ch}
/* Câu wow in nghiêng và nhạt hơn: nó là thứ nhà mình SẼ thấy, chưa
   phải thứ đã có — nên nó không được to bằng việc phải làm. */
.tia-wow{font-size:14.5px;line-height:1.8;color:var(--ink-3);font-style:italic;
  margin-top:10px;padding-left:12px;border-left:2px solid var(--gita-vien-2);max-width:56ch}
@media (max-width:640px){ .tia{padding:15px 14px} .tia-viec{font-size:16px} }

/* ═══════════════════════════════════════════════════════════════
   BÀN CỜ HÀNH TRÌNH  ·  v9.32
   ═══════════════════════════════════════════════════════════════ */
.bc-dinh{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bc-so{flex:1;min-width:120px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface)}
.bc-so b{display:block;font-size:26px;line-height:1.1;color:var(--gita)}
.bc-so span{display:block;font-size:10.5px;letter-spacing:.08em;color:var(--ink-4);margin-top:3px}

/* Cả cái bàn phải nhìn được trong một mắt — nhìn được cả bàn mới là chỗ
   vui của cờ. Nên ô co lại theo số cột, không cho cuộn ngang. */
/* CHẶN CỠ Ô. Cột 1fr + aspect-ratio:1 nghĩa là ô CAO BẰNG một phần
   bề ngang cột — trong khung rộng 1000px thì bảy cột cho ra ô 140px, và
   một chuỗi hai mươi mốt ngày trải hết ba màn hình. Lúc ấy không ai đọc
   ra "chỗ nào dày, chỗ nào thưa" nữa, vì không nhìn được cả chuỗi cùng
   lúc — mà nhìn được cả chuỗi cùng lúc mới là toàn bộ lý do dùng bàn cờ
   thay cho thanh tiến độ. Chặn ở TỔNG BỀ NGANG chứ không đặt cỡ ô cứng,
   để trên điện thoại ô vẫn co lại vừa màn. */
.bc-ban{display:grid;grid-template-columns:repeat(var(--bc-cot,7),1fr);
  gap:4px;margin:6px 0 12px;max-width:calc(var(--bc-cot,7) * 34px)}
.bc-o{display:block;aspect-ratio:1;border-radius:5px;background:var(--phu-3);
  border:1px solid var(--line);transition:transform .18s}
.bc-o.co{border-color:transparent;box-shadow:0 1px 6px -2px rgba(0,0,0,.35)}
.bc-o.co:hover{transform:scale(1.35)}
.bc-y{font-size:12.5px;line-height:1.7;color:var(--ink-3);max-width:62ch}

/* Mốc chúc mừng — im lặng, không tiếng. Nhà mình mở màn này lúc chín
   giờ tối, cạnh đứa nhỏ đang ngủ. */
.bc-mung{display:flex;gap:14px;align-items:center;margin:14px 0;padding:14px 16px;
  border-radius:16px;border:1px solid var(--gita-vien-2);
  background:linear-gradient(120deg,var(--gita-mo-1),transparent 70%)}
.bc-bt{font-size:33px;line-height:1;color:var(--gita);flex:none}
.bc-mung b{display:block;font-size:16px}
.bc-mung p{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:3px}

.bc-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.bc-viec{position:relative;text-align:left;padding:14px 14px 13px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  display:flex;flex-direction:column;gap:5px;transition:.18s;font:inherit;color:inherit}
.bc-viec:hover:not([disabled]){border-color:var(--bc-c);transform:translateY(-2px);
  box-shadow:0 12px 26px -18px var(--bc-c)}
.bc-viec[disabled]{opacity:.45;cursor:default}
.bc-diem{position:absolute;top:12px;right:12px;font-size:14.5px;font-weight:800;color:var(--bc-c)}
.bc-bd{font-size:10.5px;letter-spacing:.08em;color:var(--bc-c);padding-right:34px}
.bc-viec b{font-size:14.5px;line-height:1.45;padding-right:34px}
.bc-lam{font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.bc-thay{font-size:12.5px;line-height:1.65;color:var(--ink-3);font-style:italic;
  padding-top:6px;border-top:1px dashed var(--line-2)}

/* Điểm nổi lên tại chỗ vừa bấm rồi tan. */
.bc-noi{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,0);
  font-size:26px;font-weight:800;color:var(--gita);
  animation:bcnoi 1.05s cubic-bezier(.22,.9,.3,1) forwards}
@keyframes bcnoi{
  0%{opacity:0;transform:translate(-50%,6px) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-56px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .bc-noi{animation:none;opacity:1}
  .bc-o.co:hover{transform:none}
  .bc-viec:hover:not([disabled]){transform:none}
}
@media (max-width:640px){ .bc-ds{grid-template-columns:1fr} .bc-so b{font-size:21px} }

/* ═══ BA NGƯỜI MỘT QUÂN · v9.34 ═══ */
/* Ô chia sọc theo vai: mỗi người một sọc. Nhìn một ô là biết tối ấy ai
   có mặt ai vắng — thứ một ô đặc một màu không nói được. */
.bc-o.dang{border-color:var(--line-2);opacity:.85}
.bc-o.du{border-color:transparent}
.bc-toinay{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.bc-nguoi{position:relative;padding:13px 14px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface)}
.bc-nguoi.xong{border-color:var(--bc-c);background:linear-gradient(150deg,
  color-mix(in srgb,var(--bc-c) 10%,transparent),transparent 70%)}
.bc-nguoi-d{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.bc-nguoi-d b{font-size:16px;color:var(--bc-c)}
.bc-nguoi-d span{font-size:10.5px;letter-spacing:.08em;color:var(--ink-4)}
.bc-nguoi.xong .bc-nguoi-d span{color:var(--bc-c);font-weight:800}
.bc-nguoi-v{font-size:12.5px;line-height:1.6;margin-top:6px;color:var(--ink-2)}
.bc-nguoi-d2{position:absolute;right:14px;bottom:11px;font-size:14.5px;font-weight:800;color:var(--bc-c)}
/* Nút "việc của Mẹ / của Bố / của Con" nằm trong từng thẻ việc */
.bc-cho{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--line-2)}
.bc-nut{font:inherit;font-size:12.5px;padding:5px 10px;border-radius:99px;cursor:pointer;
  border:1px solid var(--bc-c);color:var(--bc-c);background:transparent;transition:.15s}
.bc-nut:hover{background:var(--bc-c);color:#fff}
.bc-viec{cursor:default}
.bc-viec:hover{transform:none;box-shadow:none;border-color:var(--line)}
.bc-noi.cung{font-size:18px;color:var(--ok)}
@media (max-width:640px){ .bc-toinay{grid-template-columns:1fr} }

/* ═══ BỘ VẼ BIỂU ĐỒ · SƠ ĐỒ — src/bieu-do.js (9.99.201) ═══
   Không @media riêng: lưới auto-fit tự xuống cột trên điện thoại, biểu đồ
   rộng cuộn trong hộp .bd-cuon nên không đẩy trang trượt ngang. */
.bd-so-hang{display:grid;gap:12px;margin:14px 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.bd-so{padding:13px 15px}
.bd-so-k{font-size:12.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.bd-so-v{font-size:26px;font-weight:700;line-height:1.1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bd-so-d{font-size:12.5px;color:var(--ink-4);margin-top:5px;line-height:1.5}
.bd-xu{font-size:10.5px;font-weight:600}
.bd-box{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;
  padding:14px;margin:12px 0}
.bd-cuon{overflow-x:auto}
.bd-cuon svg{display:block}
/* Luật biểu tượng chung svg{width:1.15em} đè thuộc tính width= của biểu đồ —
   biểu đồ trong hộp phải lấy kích thước của chính nó. */
.bd-box svg{width:auto;height:auto;flex:initial;max-width:none}
.bd-chu{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.bd-chu span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.bd-chu i,.bd-cd-h i{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block}
.bd-trong{color:var(--ink-4);font-size:14.5px;text-align:center;padding:18px}
.bd-ghi{font-size:12.5px;color:var(--ink-4);margin-top:8px;line-height:1.55}
.bd-vong{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.bd-cd{display:flex;flex-direction:column;gap:8px;min-width:180px;flex:1}
.bd-cd-h{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.bd-cd-h span{flex:1}
.bd-cd-h b{color:var(--ink);font-variant-numeric:tabular-nums}
.bd-dong{display:flex;gap:0;align-items:stretch;min-width:min-content}
.bd-dong-cot{display:flex;flex-direction:column;min-width:132px;flex:none}
.bd-dong-dau{color:var(--chu-tren-mau);font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:10px 10px 0 0;text-align:center}
.bd-dong-than{border:1px solid var(--line);border-top:none;border-radius:0 0 10px 10px;
  padding:8px;display:flex;flex-direction:column;gap:6px;flex:1;background:var(--bg-1)}
.bd-dong-o{background:var(--gita-mo-1);border:1px solid var(--gita-vien-1);border-radius:8px;
  padding:7px 9px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.bd-dong-o span{display:block;font-size:10.5px;color:var(--ink-4);margin-top:2px}
.bd-dong-trong{background:transparent;border-style:dashed;color:var(--ink-4);text-align:center}
.bd-dong-mui{display:flex;align-items:center;padding:0 4px;color:var(--gita);font-size:21px;flex:none}
.bd-nguon{display:flex;gap:9px;align-items:flex-start;border-radius:12px;padding:11px 14px;
  font-size:12.5px;line-height:1.55;margin:12px 0}
.bd-nguon-mau{background:var(--gita-mo-1);border:1px dashed var(--gita-vien-2);color:var(--ink-2)}
.bd-nguon-that{background:var(--phu-1);border:1px solid var(--line);color:var(--ink-2)}
.bd-nguon b{color:var(--ink)}
.bd-viec{padding:0;overflow:hidden}
.bd-viec-h{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;
  border-bottom:1px solid var(--phu-2);flex-wrap:wrap;gap:8px}
.bd-viec-h b{font-size:14.5px}
.bd-viec-h span{font-size:12.5px;color:var(--ink-4)}
.bd-viec-o{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-left:4px solid var(--vc);border-bottom:1px solid var(--phu-2)}
.bd-viec-o:last-child{border-bottom:none}
.bd-viec-noi{flex:1;min-width:0}
.bd-viec-noi b{font-size:14.5px;color:var(--ink);display:block}
.bd-viec-noi p{font-size:12.5px;color:var(--ink-4);margin:2px 0 0;line-height:1.5}
.bd-viec-nhan{font-size:12.5px;font-weight:600;flex:none;text-transform:uppercase;letter-spacing:.03em}

/* ═══ KHO TÀI LIỆU — src/kho-tai-lieu.js (9.99.203) ═══ */
.ktl-luoi{overflow-x:auto;margin:10px 0}
.ktl-luoi-h,.ktl-luoi-r{display:grid;grid-template-columns:46px repeat(10,minmax(40px,1fr));
  gap:5px;min-width:520px;margin-bottom:5px}
.ktl-cap-h{font-size:10.5px;color:var(--ink-4);text-align:center;align-self:center}
.ktl-tang-h{color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center;
  border-radius:8px;padding:6px 0}
.ktl-o{display:grid;place-items:center;font-size:10.5px;color:var(--ink-2);background:var(--phu-1);
  border:1px solid var(--phu-3);border-bottom:2px solid var(--oc);border-radius:7px;padding:8px 0;
  font-variant-numeric:tabular-nums}
.ktl-nhom{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ktl-nhom-o{flex:1 1 160px;min-width:160px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.ktl-nhom-o.ktl-cho{opacity:.55;border-style:dashed}
.ktl-nhom-ma{font-size:10.5px;color:var(--gita-ink)}
.ktl-nhom-o b{font-size:12.5px}
.ktl-nhom-t{font-size:10.5px;color:var(--ink-4)}
/* 9.99.214 — mỗi cấp mở ra giáo trình bốn cột. Cấp mở được chiếm trọn
   một hàng để đọc bốn cột cho thoáng; cấp gọn vẫn là chip 160px. */
.ktl-nhom-o.ktl-tl{flex-basis:100%;padding:0}
.ktl-tl>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:6px;padding:9px 11px;min-height:34px}
.ktl-tl>summary::-webkit-details-marker{display:none}
.ktl-tl>summary::after{content:'+';margin-left:auto;color:var(--ink-4);font-size:14.5px;line-height:1}
.ktl-tl[open]>summary::after{content:'−'}
.ktl-tl[open]>summary{border-bottom:1px solid var(--line)}
.ktl-tl-than{display:flex;flex-direction:column;gap:10px;padding:11px}
.ktl-tl-cot{display:flex;flex-direction:column;gap:2px}
.ktl-tl-nhan{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ktl-tl-val{font-size:12.5px;line-height:1.7;color:var(--ink-2);margin:0}
.ck-ul{margin:4px 0 0;padding-left:18px}
.ck-ul li{font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.ktl-hn{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.ktl-sau-bai{white-space:pre-wrap;font-size:12.5px;line-height:1.8;color:var(--ink-2);padding:11px;max-height:60vh;overflow-y:auto}
.cw-tang{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0}
.cw-dau{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cw-pha{color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:99px}
.cw-chuyen{font-size:12.5px;color:var(--ink-4)}
.cw-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:8px}
.cw-o{display:flex;flex-direction:column;gap:4px}
.dh-chon{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.dh-tang-hang{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dh-tang-nhan{font-size:10.5px;font-weight:700;min-width:96px}
.dh-caps{display:flex;flex-wrap:wrap;gap:4px}
.dh-cap{min-width:40px;min-height:32px;padding:4px 8px;border:1px solid var(--line);background:var(--bg-1);
  color:var(--ink-2);border-radius:8px;font-size:12.5px;cursor:pointer}
.dh-cap.on{color:#fff;font-weight:700}
.dh-panel{background:var(--bg-1);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px}
.dh-dau{display:flex;align-items:center;gap:10px}
.dh-ma{color:#fff;font-size:12.5px;font-weight:700;padding:4px 9px;border-radius:8px}
.dh-ten{font-size:16px}
.as-buoc{margin:0;padding-left:20px}
.as-buoc li{font-size:12.5px;line-height:1.8;color:var(--ink-2);margin-bottom:6px}

.ktl-lop{margin:10px 0}
.ktl-lop-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.ktl-sinh-chon{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ktl-sinh-chon select{min-width:180px}
.ktl-kh-dau{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ktl-kh-tt{font-size:12.5px;padding:3px 9px;border-radius:99px}
.ktl-kh-tt.ok{background:var(--gita-mo-2);color:var(--ok)}
.ktl-kh-tt.cho{background:var(--phu-2);color:var(--ink-4)}
.ktl-kh-ds{margin:0;padding-left:22px;columns:2;font-size:12.5px;line-height:1.9;color:var(--ink-2)}
.ktl-mo{font-size:14.5px;color:var(--gita-ink)}

/* ═══ NÔI NUÔI DƯỠNG NHÂN TÀI — src/noi-nhan-tai.js (9.99.205) ═══ */
.nnt-ht-chon{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.nnt-ht-nut{font:inherit;font-size:14.5px;padding:8px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-1);color:var(--ink-2)}
.nnt-ht-nut.on{background:var(--hc);border-color:var(--hc);color:#fff}
.nnt-chuong{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.nnt-q{border:1px solid var(--line);border-left:3px solid var(--qc);border-radius:12px;
  padding:10px 12px;background:var(--bg-1)}
.nnt-q-h{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.nnt-c{border-top:1px solid var(--phu-2);padding:4px 0}
.nnt-c summary{cursor:pointer;font-size:14.5px;color:var(--ink-2);list-style:none;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nnt-c-ma{color:var(--qc);font-size:12.5px}
.nnt-c-so{font-size:10.5px;color:var(--ink-4);margin-left:auto}
.nnt-c-ds{margin:6px 0 4px;padding-left:26px;columns:2;font-size:12.5px;line-height:1.85;color:var(--ink-3)}

/* ═══ VÒNG · v9.35 ═══ */
.bc-vong{margin:0 0 14px;padding:12px 13px 11px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface)}
.bc-vong.kho{border-color:#B4720F5e;background:linear-gradient(150deg,
  color-mix(in srgb,#B4720F 7%,transparent),transparent 65%)}
.bc-vong.du{border-style:dashed;opacity:.85}
.bc-vong-d{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.bc-vong-d b{font-size:14.5px}
.bc-vong-d span{font-size:10.5px;letter-spacing:.08em;color:var(--ink-4)}
.bc-vong-kho{color:var(--warn)!important;font-weight:800}
.bc-bien{font-size:12.5px;line-height:1.7;color:var(--ink-2);margin-top:8px;max-width:56ch}
.bc-bien s{color:var(--ink-4)}
.bc-nutbien{font:inherit;font-size:12.5px;margin-top:8px;padding:6px 12px;border-radius:99px;
  cursor:pointer;border:1px dashed var(--line-2);color:var(--ink-3);background:transparent}
.bc-nutbien:hover{border-color:var(--gita);color:var(--gita)}
/* Báo trước chỗ khó của tầng */
.bc-baotruoc{margin:12px 0;padding:13px 15px;border-radius:14px;
  border:1px solid #B4720F45;background:color-mix(in srgb,#B4720F 6%,transparent)}
.bc-baotruoc b{display:block;font-size:14.5px;color:var(--warn)}
.bc-baotruoc p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:4px;max-width:60ch}

/* ═══ TẦNG BA · v9.36 ═══
   Số của từng vòng, và cái khớp giữa hai vòng. Cả hai chỉ dùng lại
   đúng những bậc chữ đã có (10.5 · 12.5 · 14.5) — thêm một bậc thứ
   mười là phá cái thang mà mục 7 của bộ rà soát đang giữ. */
.bc-vong-so{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:8px}
.bc-vong-so b{color:var(--ink);font-weight:700}
.bc-vong-so .hon{color:var(--ok);font-weight:700}
.bc-vong-so .kem{color:var(--ink-4)}
.bc-vong-so .bang{color:var(--ink-4)}
.bc-vong-so .dang{color:var(--gita);font-weight:700}
.bc-vong-so.dim{color:var(--ink-4)}

/* ═══ TẦNG NĂM · v9.37 ═══
   Ô CHƯA TỚI khác ô đã qua mà để trống. Bàn tầng năm có ba trăm sáu
   lăm ô; tối đầu tiên mở ra thấy ba trăm sáu tư ô xám thì trông y như
   ba trăm sáu tư lần bỏ lỡ. Vẽ nó NHẠT và VIỀN ĐỨT — nhìn ra là chỗ
   chưa đi tới, không phải chỗ đã trượt. */
.bc-o.sau{background:transparent;border-style:dashed;border-color:var(--line);opacity:.5}
.bc-vong.thang{background:transparent;border-style:dotted}
.bc-nhip{margin:10px 0 12px;padding:12px 15px;border-radius:14px;border:1px solid var(--line)}
.bc-nhip>b{display:block;font-size:14.5px}
.bc-nhip p b{color:inherit;font-weight:800}
.bc-nhip p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:4px;max-width:62ch}
.bc-nhip p.dim{color:var(--ink-4)}
.bc-nhip.giu{border-color:color-mix(in srgb,var(--ok) 42%,transparent);
  background:color-mix(in srgb,var(--ok) 6%,transparent)}
.bc-nhip.giu b{color:var(--ok)}
.bc-nhip.tut{border-color:#B4720F45;background:color-mix(in srgb,#B4720F 6%,transparent)}
.bc-nhip.tut b{color:var(--warn)}
.bc-nhip.chua{border-style:dashed}
.bc-nhip.chua b{color:var(--ink-3)}

/* ═══ TẦNG MỘT · v9.38 ═══
   Câu 'không sửa gì cả' phải đứng TRÊN bàn và trên mười gợi ý. Đứng
   dưới thì nhà mình đã đọc xong danh sách việc kèm điểm rồi mới gặp
   câu bảo đừng làm — mà điểm số khó cưỡng hơn một lời khuyên nhiều. */
.bc-dung{margin:0 0 14px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--alert);background:color-mix(in srgb,var(--alert) 7%,transparent)}
.bc-dung>b{display:block;font-size:16px;color:var(--alert);letter-spacing:.01em}
.bc-dung p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:5px;max-width:62ch}
.bc-dung p.dim{color:var(--ink-4);font-size:10.5px;letter-spacing:.04em}
.bc-nep{margin:12px 0;padding:13px 15px;border-radius:14px;border:1px solid var(--line)}
.bc-nep>b{display:block;font-size:14.5px}
.bc-nep p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:4px;max-width:62ch}
.bc-nep p.dim{color:var(--ink-4);font-size:10.5px}
.bc-nep p.loi{color:var(--ink);font-weight:600}
.bc-nep.chua{border-style:dashed}
.bc-nep.chua>b{color:var(--ink-3)}
.bc-nep.mo{border-color:var(--gita-vien-2);background:var(--gita-mo-1)}
.bc-nep.mo>b{color:var(--gita)}
.bc-nep.xong{border-color:color-mix(in srgb,var(--ok) 42%,transparent);
  background:color-mix(in srgb,var(--ok) 6%,transparent)}
.bc-nep.xong>b{color:var(--ok)}
.bc-doi{margin:12px 0;padding:13px 15px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--ok) 42%,transparent);
  background:color-mix(in srgb,var(--ok) 6%,transparent)}
.bc-doi b{display:block;font-size:14.5px;color:var(--ok)}
.bc-doi p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:4px;max-width:62ch}

/* ═══ NHÀ MÌNH ĐANG KÈM · v9.39 ═══
   Màn nói LỊCH — thứ tính được — và nói thẳng chỗ KPI là chỗ chưa đo
   được. Câu "hết ngày không phải là xong tầng" đứng ngay dưới con số
   ngày, vì đó là chỗ dễ đọc sai nhất trên cả màn. */
.bc-kem{margin:10px 0 12px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--gita-vien-2);background:var(--gita-mo-1)}
.bc-kem>b{display:block;font-size:14.5px;color:var(--gita)}
.bc-kem p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:4px;max-width:62ch}
.bc-kem p.dim{color:var(--ink-4);font-size:10.5px;line-height:1.7}
.bc-kem p.canh{color:var(--warn)}
.bc-kem.chua{border-style:dashed;border-color:var(--line);background:transparent}
.bc-kem.chua>b{color:var(--ink-3)}
.bc-kem.het{border-color:#B4720F45;background:color-mix(in srgb,#B4720F 6%,transparent)}
.bc-kem.het>b{color:var(--warn)}
/* ═══ HOA HỒNG KÈM · v9.43 ═══
   Phần duy nhất trên màn ra TIỀN thật, nên nó có viền riêng và mọi câu
   "chưa chứng minh được" đứng cùng một màu cảnh báo, không lẫn vào chữ
   thường. */
.bc-hh{margin:10px 0 12px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--line-2);background:var(--surface)}
.bc-hh>b{display:block;font-size:14.5px}
.bc-hh p{font-size:12.5px;line-height:1.75;color:var(--ink-2);margin-top:5px;max-width:62ch}
.bc-hh p.dim{color:var(--ink-4);font-size:10.5px;line-height:1.7}
.bc-hh p.canh{color:var(--warn)}
.bc-hh-bac{display:grid;gap:6px;margin-top:8px}
.bc-hh-hang{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.bc-hh-hang b{font-size:18px;color:var(--gita);min-width:48px}
.bc-hh-hang span{font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.bc-hh-cc{border-top:1px solid var(--gita-vien-2);padding-top:8px}

/* ═══ BẢNG TIN CỦA TỪNG TẦNG · v9.40 ═══
   Ba dòng, mỗi dòng một khối rõ ràng. Dồn liền nhau thì ba mẫu thông
   báo đọc ra một đoạn văn, và người ta không nhận ra đây là ba việc
   khác nhau mình có thể làm để có tên trên bảng. */
.tin-bang{display:grid;gap:10px;margin-bottom:14px}
.tin-dong{position:relative;padding:13px 15px 12px 17px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tin-dong::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--tin-c,var(--gita))}
.tin-nhan{display:block;font-size:10.5px;letter-spacing:.08em;font-weight:700;
  text-transform:uppercase;color:var(--tin-c,var(--gita))}
.tin-cau{font-size:14.5px;line-height:1.65;color:var(--ink);margin-top:5px;max-width:64ch}
.tin-o{font-size:10.5px;letter-spacing:.04em;color:var(--ink-4);margin-top:6px}
.tin-vi{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-top:4px;max-width:62ch}
/* ═══ MỤC 30–45 PHÚT MỖI NGÀY · v9.42 ═══
   Thanh có HAI mốc, không phải một đích: một đích thì dưới mốc là
   trượt, còn hai mốc thì có một KHOẢNG đủ — và trên khoảng ấy không
   phải là hơn. */
.tg-thanh{position:relative;height:10px;border-radius:99px;background:var(--bg-2);
  overflow:hidden;margin:4px 0 8px}
.tg-day{height:100%;border-radius:99px;transition:width .4s}
.tg-moc{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-4);opacity:.55}
.tg-loi{font-size:12.5px;line-height:1.7;color:var(--ink-3);margin-bottom:12px}
.tg-viec{display:grid;gap:7px;margin-bottom:14px}
.tg-hang{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;gap:10px;
  align-items:center}
.tg-ten{font-size:12.5px;font-weight:600}
.tg-vach{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.tg-vach i{display:block;height:100%;border-radius:99px}
.tg-so{font-size:12.5px;color:var(--ink-3);text-align:right;white-space:nowrap}
@media (max-width:640px){ .tg-hang{grid-template-columns:1fr auto;gap:6px}
  .tg-vach{grid-column:1/-1} }

.tin-song{display:grid;gap:8px;margin-bottom:14px}
.tin-dong.song{padding:11px 14px 10px 17px}
.tin-dong.song .tin-cau{font-size:12.5px;margin-top:3px}
@media (max-width:640px){ .tin-cau{font-size:12.5px} }
/* Cái khớp nằm GIỮA hai dải, nên nó phải vẽ ở giữa — nằm dưới chân
   một trong hai thì mắt đọc nó thành của riêng dải ấy. */
.bc-khop{display:flex;align-items:center;gap:8px;margin:-6px 0 10px 6px;
  font-size:10.5px;letter-spacing:.06em;font-weight:700;color:var(--ink-4)}
.bc-khop.noi{color:var(--ok)}
.bc-thuthach{font-size:12.5px;line-height:1.75;color:var(--ink-2);
  margin:0 0 10px;max-width:64ch}
.bc-thuthach b{color:var(--ink)}

/* ── BẢN SOẠN CỦA TRỢ LÝ (9.75) ──
   Đứng trước danh sách tư liệu. Nền nhạt và một vạch bên trái để mắt
   biết đây là CÂU TRẢ LỜI, còn phần dưới là NGUỒN. */
.ai-soan{border-left:3px solid var(--gita);background:var(--bg-1);
  border-radius:0 8px 8px 0;padding:11px 13px;margin-bottom:12px}
.ai-soan-dau{font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:5px}
.ai-soan-cau{font-size:14.5px;line-height:1.6;color:var(--ink);
  font-weight:600;margin-bottom:8px}
.ai-soan-ds{list-style:none;margin:0;padding:0}
.ai-soan-ds li{font-size:12.5px;line-height:1.55;color:var(--ink-2);
  padding:3px 0;border-top:1px solid var(--bc-c)}
.ai-soan-ds li:first-child{border-top:0}
/* 10,5px là bậc nhỏ nhất CỦA THANG, dùng 61 chỗ khác. Bản 9.75 gõ 11px
   ở đây — nửa pixel to hơn, mắt không thấy khác, mà thang cỡ chữ từ chín
   bậc thành mười. Một bậc thừa không hỏng cái gì nhìn thấy được; nó chỉ
   mở đường cho bậc thứ mười một. */
.ai-soan-ds .mono{color:var(--ink-4);font-size:10.5px}
.ai-soan-con{font-size:10.5px;color:var(--ink-4);margin-top:6px;font-style:italic}
/* ── SƠ ĐỒ TỪNG BƯỚC cho khách (9.99.225) — vòng số nối bằng vạch dọc.
   Vạch nối vẽ bằng ::before, không thẻ rỗng; màu lấy token, 0 rgba trắng. */
.ai-sodo{display:flex;flex-direction:column;gap:0;margin:8px 0 2px}
.ai-sodo-b{display:flex;gap:10px;align-items:flex-start;position:relative;padding-bottom:12px}
.ai-sodo-b:last-child{padding-bottom:0}
.ai-sodo-b:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:0;
  width:2px;background:var(--gita-vien-2)}
.ai-sodo-so{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gita-sau);
  color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;position:relative;z-index:1}
.ai-sodo-chu{flex:1;font-size:14.5px;line-height:1.5;color:var(--ink);padding-top:2px}

/* ═══════════ TẤM THU PHÓNG ═══════════
   Thả xuống ngay dưới thanh trên, KHÔNG mở ra giữa màn: người ta bấm
   phóng to rồi muốn nhìn ngay kết quả, mà một cửa sổ giữa màn thì che
   đúng chỗ họ định nhìn. */
.ph-bang{position:fixed;top:calc(var(--top-tong) + 8px);right:calc(12px + var(--sar));z-index:70;
  width:min(320px,calc(100vw - 24px));padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--nen-thanh);
  backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--shadow);
  display:none}
.ph-bang.mo{display:block}
.ph-nhom + .ph-nhom{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ph-nhan{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:8px}
.ph-hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph-n{min-height:36px;padding:7px 14px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:.16s}
.ph-n:hover{border-color:var(--gita-vien-2);color:var(--ink)}
.ph-n.on{background:var(--gita-mo-2);border-color:var(--gita-vien-2);color:var(--gold-ink)}
.ph-tron{width:36px;min-width:36px;padding:0;display:grid;place-items:center;font-size:18px}
.ph-so{min-width:58px;text-align:center;font-size:14.5px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ph-y{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* ═══════════ THANH ĐIỀU HƯỚNG DƯỚI ĐÁY ═══════════
   Mặc định ẨN. Chỉ hiện ở khổ điện thoại — trên máy tính đã có cột
   trái luôn mở, thêm một thanh nữa là hai chỗ làm cùng một việc. */
#duoi{display:none}
.td-o{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:6px 2px;border:0;background:none;
  color:var(--ink-4);cursor:pointer;transition:.16s;border-radius:12px}
.td-o svg{width:21px;height:21px;flex:none}
.td-o span{font-size:10.5px;font-weight:700;letter-spacing:.01em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-o.on{color:var(--gold-ink)}
.td-o.on svg{color:var(--gita)}

@media(max-width:860px){
  #duoi{
    display:flex;align-items:stretch;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    /* Chiều cao thật = 56px cho ngón tay, cộng phần dưới vạch về nhà. */
    padding:0 calc(6px + var(--sal)) var(--sab) calc(6px + var(--sar));
    background:var(--nen-thanh);backdrop-filter:blur(22px) saturate(1.4);
    border-top:1px solid var(--line)}
  .td-o{min-height:56px}
  /* CHỪA CHỖ CHO THANH, nếu không thì dòng cuối của MỌI màn nằm dưới
     nó và không ai đọc được — mà cũng không ai báo, vì người ta tưởng
     màn hết ở đó. 56 là chiều cao thanh, --sab là phần dưới vạch về
     nhà, 24 là khoảng thở. */
  main{padding-bottom:calc(80px + 56px + var(--sab))}
  /* Màn trợ lý có luật lề riêng (body.man-chat main{padding-bottom:18px})
     nặng hơn dòng trên, nên nó ĂN MẤT chỗ chừa cho thanh — chỗ gõ của
     cửa sổ trò chuyện nằm khuất dưới thanh 42px. Bộ đo khung màn bắt
     đúng chỗ này, ba khổ màn liền. Phải khai lại riêng cho nó. */
  body.man-chat main{padding-bottom:calc(18px + 56px + var(--sab))}
  /* Lời báo nổi phải đứng TRÊN thanh. Nó neo ở đáy màn, mà thanh cũng
     neo ở đáy màn — không nâng thì lời báo nằm đè lên đúng bốn ô điều
     hướng, che mất chỗ người ta đang định bấm. */
  #toast{bottom:calc(26px + 56px + var(--sab))}
  /* Ngăn kéo trái và cột phải dừng TRÊN thanh, không chui xuống dưới. */
  #left,#right{bottom:calc(56px + var(--sab));padding-bottom:0}
  /* Tấm thu phóng cũng vậy — nó thả từ trên xuống, chừa đáy cho thanh. */
  .ph-bang{max-height:calc(100dvh - var(--top-tong) - 56px - var(--sab) - 24px);
    overflow-y:auto}
}

/* ═══════════ KHỔ CHẠM: NGÓN TAY KHÔNG NHỎ NHƯ CON TRỎ ═══════════

   Đo ở bản 9.99.51 trên bốn khổ màn thật: chip lọc cao 30px, ô chọn cao
   24px, ô tích 13px trong một nhãn cao 23px. Chuột bấm trúng cả ba;
   ngón tay thì trượt, và người dùng đổ lỗi cho mình chứ không cho ứng
   dụng — nên chuyện này không bao giờ thành một lời báo lỗi.

   Ngưỡng 34–40px là mức các bộ hướng dẫn giao diện chạm đều đặt quanh
   đó. Chỉ nâng CHIỀU CAO và vùng chạm, không đụng cỡ chữ: đổi cỡ chữ là
   đổi thang chữ, và thang ấy có phép đo riêng canh.

   Hỏi bằng `pointer:coarse` chứ không bằng bề ngang màn: một máy bảng
   1024px vẫn là ngón tay, còn một cửa sổ hẹp trên máy để bàn vẫn là
   chuột. Hỏi sai câu thì máy bảng không được nâng, mà máy để bàn thì bị
   nâng vô cớ.

   VÀ KHỐI NÀY PHẢI NẰM CUỐI TỆP. Bản đầu tôi đặt nó giữa tệp, trước
   chỗ khai .sx-b và .pq-o — cùng độ nặng chọn lọc thì dòng ĐỨNG SAU
   thắng, nên khối này không đè được gì cả. Đo lại vẫn ra đúng 26px và
   21px như trước, không một điểm ảnh nào đổi. Một khối CSS không chạy
   thì không báo lỗi: nó chỉ lặng lẽ không làm gì. */
/* ═══ XƯỞNG DỰNG VIDEO — src/studio.js (9.99.94) ═══
   Cỡ chữ lấy nguyên từ thang chín bậc đã có; bản mẫu của chủ hệ đẻ bảy
   bậc mới (22 · 15 · 13,5 · 13 · 12,5 · 11,5 · 11) và bản 9.25 đã dạy
   một lần rằng hai mươi sáu bậc nghĩa là không có thang nào cả.
   Màu lấy từ biến đã có — không gõ mã màu thứ hai. */
.xu-man{width:100%;height:auto;display:block;border-radius:var(--r-sm);background:#000;
  border:1px solid var(--line)}
.xu-mc{border-left:3px solid var(--gita)}
.xu-mc select{min-width:180px}
.xu-tua{width:100%;margin:8px 0}
.xu-thanh{height:6px;background:var(--nen-mo);border-radius:99px;overflow:hidden;margin:8px 0}
.xu-thanh i{display:block;height:100%;width:0;background:var(--gita)}
.xu-canh{border-left:3px solid var(--line)}
.xu-den{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.xu-den li{border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;background:var(--nen-hop)}
.xu-den li b{display:block;font-size:14.5px}
.xu-den li em{font-style:normal;font-size:10.5px;color:var(--phu-3)}
.xu-den li span{display:block;font-size:12.5px;color:var(--phu-1);margin-top:4px}
.xu-den li.xu-ok{border-left-color:var(--ok)}
.xu-den li.xu-warn{border-left-color:var(--gold)}
.xu-den li.xu-bad{border-left-color:var(--gita-do)}
.xu-den li.xu-cho{border-left-color:var(--line-2)}
.xu-den li.xu-nguoi{border-left-color:var(--ember)}

/* ── NGÔI NHÀ THỊNH VƯỢNG (9.99.101) ──
   Hình một ngôi nhà: mái trên, thân giữa, nền dưới. Mỗi phần là một nút
   thật. Lưới auto-fit tự xuống một cột trên màn hẹp, nên không cần thêm
   @media — khỏi đụng luật "khối chạm nằm cuối". Nút vốn cao hơn 32px nên
   không phải nâng vùng chạm. Màu lấy từ token, không gõ mã màu tay. */
/* VÒNG GITA365 bao quanh + MƯỜI BÁNH ĐÀ quay quanh ngôi nhà.
   Vòng là một khung bo tròn mang viền thương hiệu; nhãn GITA 365 nằm vắt
   trên mép trên. Hai dải bánh đà (trên/dưới) ôm lấy nhà, flex-wrap nên
   trên điện thoại tự xuống dòng, không đẩy trang cuộn ngang. */
.nha-vong{
  position:relative;max-width:1080px;margin:18px auto 0;padding:30px 14px 18px;
  border:2px solid var(--gita-vien-2);border-radius:36px;
  background:radial-gradient(140% 120% at 50% 0%, var(--gita-mo-1), transparent 60%);
  /* Là CONTAINER để vòng bánh đà tự bật theo BỀ NGANG THẬT của cột nội
     dung (hai cột ăn bớt bề ngang thay đổi theo viewport — media query
     không thấy). Rộng thì dựng vòng; hẹp thì giữ cụm gọn. */
  container:nhaVong / inline-size;
  /* Lớp quay của vòng bánh đà là một hình vuông cỡ cả vòng; xoay 45° thì
     hộp bao của nó rộng gấp 1,41 lần, và trình duyệt tính hộp đã xoay vào
     bề ngang cuộn của trang — đo được 66px tràn ở khổ 1280, 147px ở 1024,
     chập chờn theo nhịp quay. clip (không phải hidden): không biến trục kia
     thành hộp cuộn, nhãn GITA 365 vắt trên mép vẫn hiện. */
  overflow-x:clip;
}
.nha-vong-nhan{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--gita-sau);color:#fff;padding:5px 18px;border-radius:99px;
  font-weight:800;letter-spacing:1px;font-size:12.5px;box-shadow:0 6px 16px var(--gita-mo-3);
}
.nha-vong-nhan svg{width:16px;height:16px;color:#fff}
.nha-bd-nhan{text-align:center;font-size:12.5px;color:var(--ink-3);margin:2px 0 10px;font-weight:600}
.nha-bd{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto}
.nha-bd-tren{margin-bottom:12px}
.nha-bd-duoi{margin-top:14px}
/* NÚT BÁNH ĐÀ — huy hiệu icon tròn màu đặc + tên, như bản render chủ hệ
   gửi. Icon là b.ic THẬT của kho, không phải một chấm màu. */
.nha-bd-o{
  --ac:var(--gita);
  display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 14px 6px 6px;
  border:1px solid var(--line-2);border-radius:99px;background:var(--surface);
  background:linear-gradient(180deg, color-mix(in srgb,var(--ac) 8%,var(--surface)), var(--surface));
  color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 8px var(--phu-1);
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
.nha-bd-ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff;
  box-shadow:0 3px 8px color-mix(in srgb,var(--ac) 42%,transparent);
}
.nha-bd-ic svg{width:17px;height:17px}
.nha-bd-ten{line-height:1.25}
button.nha-bd-o:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--ac) 26%,transparent);border-color:var(--ac)}
button.nha-bd-o:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.nha-luoi-8{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* Khung cảnh: quầng "trời" hai lớp sau mái — sắc xanh GITA nhạt dần —
   cho ấm và có chiều sâu. Mỗi PHÒNG mang sắc màu riêng qua biến --ac
   (gán ở ngoi-nha.js từ bảng màu thương hiệu), nên cả màn có sắc chứ
   không đơn sắc xanh. Mỗi màu-thô đều đi qua color-mix với một dòng lùi
   đứng trước — trình cũ không hiểu color-mix thì rơi về dòng lùi ấy. */
.nha{
  max-width:620px;margin:6px auto 0;padding:26px 12px 16px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--gita-mo-2), transparent 60%),
    linear-gradient(180deg, var(--gita-mo-1), transparent 62%);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
/* MÁI 3D — mái dốc (clip-path hình thang) với dải sáng đỉnh + bóng đổ sâu
   để nổi khối. Nhà dựng khối bằng SẮC & BÓNG, không bằng transform (giữ
   được khi ngôi nhà đặt ở tâm vòng bằng translate). */
.nha-mai{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  padding:22px 18px 18px;margin:0 2px;
  background:linear-gradient(158deg,var(--gita-sang),var(--gita) 44%,var(--gita-sau));
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  filter:drop-shadow(0 14px 20px var(--phu-5));
  box-shadow:inset 0 3px 0 color-mix(in srgb,#fff 26%,transparent);
}
.nha-than{
  border:2px solid var(--gita-vien-2);border-top:none;
  background:linear-gradient(180deg,var(--surface),var(--bg-1));
  border-radius:0 0 var(--r-lg) var(--r-lg);
  padding:18px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 54px -20px var(--phu-4),
    inset 0 2px 0 color-mix(in srgb,#fff 14%,transparent);
}
.nha-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.nha-cua-hang{display:flex;justify-content:center;margin-top:2px}
/* NỀN MÓNG — bệ đỡ RỘNG hơn thân nhà (chạm & vượt nhẹ hai mép ngoài) để
   đọc ra "vững chãi". Bóng đổ sâu bên dưới cho cảm giác khối bê-tông
   đang đỡ cả ngôi nhà. */
.nha-nen{
  width:calc(100% + 30px);margin:0 -15px;padding:15px 12px 17px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-0));
  border:2px solid var(--line-2);border-top:none;
  border-radius:0 0 28px 28px;
  box-shadow:0 20px 32px -14px var(--phu-4);
}
/* THẺ PHÒNG — vạch sắc trên đỉnh, nền ánh nhẹ sắc phòng, huy hiệu icon
   MÀU ĐẶC. --ac là sắc riêng; thiếu thì rơi về xanh GITA. */
.nha-o{
  --ac:var(--gita);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  min-height:112px;padding:18px 12px 16px;width:100%;
  border:1px solid var(--line-2);border-top:3px solid var(--ac);
  border-radius:var(--r);color:var(--ink);cursor:pointer;
  background:var(--surface);
  background:linear-gradient(180deg, color-mix(in srgb,var(--ac) 7%,var(--surface)), var(--surface) 70%);
  box-shadow:0 2px 6px var(--phu-1);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
button.nha-o:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px var(--phu-4);
  box-shadow:0 14px 30px color-mix(in srgb,var(--ac) 30%,transparent);
}
button.nha-o:active{transform:translateY(-1px)}
button.nha-o:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* Huy hiệu icon: vòng tròn MÀU ĐẶC, icon trắng — nét sắc màu chính của
   cả màn, và mỗi phòng một màu nên nhận ra ngay bằng mắt. */
.nha-o .nha-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--ac);color:#fff;
  box-shadow:0 5px 12px var(--phu-3);
  box-shadow:0 5px 14px color-mix(in srgb,var(--ac) 40%,transparent);
}
.nha-o .nha-ic svg{width:27px;height:27px}
.nha-o b{font-size:16px;line-height:1.2}
.nha-o small{font-size:12.5px;color:var(--ink-3);line-height:1.35}
/* Mũi tên "vào phòng" — chỉ trên tám phòng MỞ ĐƯỢC (button trong lưới),
   không trên mái·cửa·nền và không trên ô khoá. Khớp bản render chủ hệ. */
.nha-luoi-8>button.nha-o::after{
  content:"→";margin-top:2px;font-size:14.5px;font-weight:800;line-height:1;
  color:var(--ac);opacity:.85;transition:transform .15s}
button.nha-o:hover::after{transform:translateX(3px);opacity:1}
/* MÁI: hai nút trắng trên nền mái xanh. Vòng icon là lớp phủ TỐI --phu-3
   (không thêm lớp trắng rgba — mục 12 cấm quá 5 chỗ), chữ trắng #fff đặc. */
.nha-o-mai{background:var(--phu-2);border-color:var(--phu-4);border-top-color:var(--phu-5);color:#fff;min-height:82px;flex:1 1 160px}
.nha-o-mai b{color:#fff}
.nha-o-mai small{color:#fff;opacity:.92}
.nha-o-mai .nha-ic{background:var(--phu-3);box-shadow:none;color:#fff}
/* CỬA CHÍNH: nút hành động chính — nền xanh sâu ĐẶC (tương phản trắng
   ~7:1), to và nổi rõ nhất. Lời mời "vào nhà mỗi ngày". */
.nha-o-cua{
  max-width:340px;background:var(--gita-sau);border-color:var(--gita-sau);border-top-color:var(--gita-sau);
  color:#fff;min-height:124px;box-shadow:0 12px 30px var(--gita-mo-3);
}
.nha-o-cua b{color:#fff;font-size:18px}
.nha-o-cua small{color:#fff;opacity:.94}
.nha-o-cua .nha-ic{background:var(--phu-3);box-shadow:none;color:#fff;width:56px;height:56px}
.nha-o-cua .nha-ic svg{width:30px;height:30px}
button.nha-o-cua:hover{box-shadow:0 16px 38px var(--gita-vien-1)}
/* NỀN MÓNG: dải nằm ngang, đọc ra là "mặt đất" đỡ cả nhà */
.nha-o-nen{flex-direction:row;justify-content:center;gap:12px;min-height:60px;background:transparent;border:none;box-shadow:none}
.nha-o-nen .nha-ic{width:42px;height:42px}
.nha-o-nen .nha-ic svg{width:22px;height:22px}
button.nha-o-nen:hover{transform:none;box-shadow:none;border:none}
button.nha-o-nen:hover .nha-ic{transform:scale(1.06)}
.nha-o.khoa{opacity:.5;cursor:default;background:var(--bg-2)}
.nha-o.khoa .nha-ic{color:var(--ink-4)}
.nha-o .nha-lock{position:absolute;margin:-8px 0 0 auto}
.nha-o.khoa{position:relative}
.nha-o .nha-lock svg{width:16px;height:16px;color:var(--ink-4)}
.nha-nhac{max-width:600px;margin:12px auto 0;text-align:center}
/* ── MƯỜI BÁNH ĐÀ QUAY QUANH NHÀ (9.99.150) ──
   Điện thoại (mặc định): cụm gọn phía trên nhà, TĨNH — không absolute,
   không tràn ngang (giữ nguyên cách đang qua do-khung-man). Máy tính:
   xếp thành VÒNG bằng --i ở khối @media(min-width:861px) bên dưới. */
.nha-ring{position:relative}
.nha-ring-nodes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 14px}

/* ── CON ĐƯỜNG NHIỆM VỤ (9.99.105) ──
   Trợ lý dẫn, con đường SVG uốn, bảng điều khiển bước, bảng nhiệm vụ.
   Màu token; SVG tự co theo bề ngang nên không cuộn ngang. */
/* ── CON ĐƯỜNG NHIỆM VỤ · TRỤC THẲNG MỞ KHOÁ TỪNG BƯỚC (9.99.155) ──
   Trục dọc thẳng: một vạch nối, mỗi bước một dấu tròn + thẻ. Bước KHOÁ
   chỉ hiện TÊN CHÍNH; bước ĐANG LÀM bung chi tiết + trợ lý hướng dẫn.
   Màu token, chiều sâu bằng --noi, không một lớp trắng rgba nào. */
.cd-tiendo{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto 14px}
.cd-tiendo-thanh{flex:1;height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.cd-tiendo-thanh span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gita-sang),var(--gita-sau))}
.cd-tiendo b{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.cd-het{max-width:640px;margin:0 auto 14px;padding:12px 16px;border-radius:var(--r);
  display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--gita-sau);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gita) 10%,var(--surface)),var(--surface));
  border:1px solid var(--gita-vien-2)}
.cd-het svg{width:20px;height:20px;color:var(--gita-sau)}

.cd-truc{position:relative;max-width:640px;margin:0 auto;padding-left:2px}
.cd-nut{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;
  padding-bottom:18px;--ac:var(--gita)}
/* vạch nối dọc — tâm dấu này xuống dấu sau; xanh đặc khi bước đã xong */
.cd-nut::before{content:"";position:absolute;left:21px;top:40px;bottom:-4px;width:2px;background:var(--line-2)}
.cd-nut:last-child::before{display:none}
.cd-s-xong::before{background:var(--gita)}
.cd-cham{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:2px solid var(--ac);background:var(--surface);color:var(--ac);box-shadow:0 2px 8px var(--phu-2)}
.cd-cham-so{font-size:16px;font-weight:800}
.cd-cham svg{width:20px;height:20px}
.cd-s-xong .cd-cham{background:var(--gita);border-color:var(--gita);color:#fff;box-shadow:none}
.cd-s-active .cd-cham{background:var(--ac);border-color:var(--ac);color:#fff;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 20%,transparent)}
.cd-s-khoa .cd-cham{border-color:var(--line-2);color:var(--ink-4);background:var(--bg-2);cursor:default}
.cd-s-khoa .cd-cham svg{color:var(--ink-4)}
.cd-cham:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.cd-than{min-width:0;padding-top:2px}
.cd-ten{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;padding:9px 0}
.cd-ten b{font-size:16px;line-height:1.25}
.cd-s-khoa .cd-ten{cursor:default}
.cd-s-khoa .cd-ten b{color:var(--ink-3)}
.cd-tag{font-size:12.5px;font-weight:700;color:var(--ac);padding:2px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--ac) 12%,transparent)}
.cd-here{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--gita-sau)}
.cd-here svg{width:24px;height:24px;border-radius:50%}
.cd-khoa-nhac{font-size:12.5px;color:var(--ink-4);display:flex;align-items:center;gap:6px;margin:0 0 2px}
.cd-khoa-nhac svg{width:14px;height:14px}

/* chi tiết bước — thẻ có chiều sâu, viền trái sắc bước */
.cd-chitiet{margin:2px 0 6px;padding:16px;border-radius:var(--r);
  border:1px solid var(--line-2);border-left:4px solid var(--ac);background:var(--surface);box-shadow:var(--noi-1)}
.cd-hd{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line-2)}
.cd-hd-av{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;box-shadow:0 3px 8px var(--phu-2)}
.cd-hd-av svg{width:46px;height:46px;display:block}
.cd-hd-noi b{font-size:14.5px}
.cd-hd-noi p{font-size:12.5px;color:var(--ink-2);line-height:1.65;margin-top:3px}
.cd-y{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin:0 0 10px}
.cd-nho{margin:0;padding:0;list-style:none;counter-reset:cdn}
.cd-nho li{position:relative;padding:9px 0 9px 30px;border-top:1px solid var(--line-1);
  counter-increment:cdn;display:flex;flex-direction:column;gap:2px}
.cd-nho li:first-child{border-top:none}
.cd-nho li::before{content:counter(cdn);position:absolute;left:0;top:9px;width:20px;height:20px;
  border-radius:50%;background:color-mix(in srgb,var(--ac) 15%,transparent);color:var(--ac);
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cd-nho li b{font-size:14.5px;line-height:1.3}
.cd-nho-viec{font-size:12.5px;color:var(--ink-2);line-height:1.55}
.cd-nho-thay{font-size:12.5px;color:var(--gita-sau);line-height:1.5;display:inline-flex;align-items:flex-start;gap:5px}
.cd-nho-thay svg{width:13px;height:13px;flex:none;margin-top:3px}
.cd-xong-nut{margin-top:14px}
.cd-bo-nut{margin-top:12px}
.cd-chitiet .btn.blk{margin-top:10px}

/* ── CÂY GIÁ TRỊ khách hàng (9.99.162) — chỉ giá trị năm tầng, không tiền ── */
.cvip-cay{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.cvip-tang{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;
  padding:14px 16px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--noi-1)}
.cvip-tang.o-day{border-color:var(--gita);box-shadow:0 0 0 2px color-mix(in srgb,var(--gita) 22%,transparent),var(--noi-1)}
.cvip-giai{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--gita-sau);font-weight:800}
.cvip-giai svg{width:26px;height:26px}
.cvip-giai b{font-size:12.5px;letter-spacing:.06em}
.cvip-noi{min-width:0}
.cvip-dau{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.cvip-dau>b{font-size:16px;line-height:1.25}
.cvip-day{font-size:12.5px;font-weight:700;color:#fff;background:var(--gita);padding:1px 8px;border-radius:99px}
.cvip-noi small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:3px}
.cvip-ket{display:flex;gap:11px;align-items:flex-start;max-width:640px;margin:18px auto 0;
  padding:14px 16px;border-radius:var(--r);border:1px solid var(--gita-vien-2);
  border-left:4px solid var(--gita-sau);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gita) 9%,var(--surface)),var(--surface));box-shadow:var(--noi-1)}
.cvip-ket>svg{width:22px;height:22px;color:var(--gita-sau);flex:none;margin-top:1px}
.cvip-ket p{font-size:12.5px;color:var(--ink-2);line-height:1.6}
/* CD-03 chọn chặng · CD-02 nút tự dẫn */
.cd-loc{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:640px;margin:0 auto 10px}
.cd-loc-o{
  min-height:34px;padding:6px 14px;border:1px solid var(--line-2);border-radius:99px;
  background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;
}
.cd-loc-o.on{background:var(--gita-sau);border-color:var(--gita-sau);color:#fff}
.cd-phong{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  max-width:640px;margin:0 auto 12px;padding:10px 14px;border:1px solid var(--line-2);
  border-left:4px solid var(--gita);border-radius:var(--r);background:var(--surface)}
.cd-phong span{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:7px}
.cd-phong span svg{width:16px;height:16px;color:var(--gita)}

/* CD-01 bộ tạo nhân vật */
.nv-khung{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;max-width:640px;margin:0 auto}
.nv-xem{
  flex:none;padding:14px 22px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--gita-mo-1),var(--surface));
}
.nv-xem svg{display:block;height:auto}
.nv-bang{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:10px}
.nv-hang{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nv-nhan{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.nv-chon{display:flex;align-items:center;gap:8px}
.nv-mui{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);
  color:var(--gita-sau);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.nv-mui svg{width:18px;height:18px;transform:rotate(180deg)}
.nv-mui-phai svg{transform:none}
.nv-giua{min-width:96px;text-align:center;font-size:14.5px}
.nv-mau{display:inline-block;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);vertical-align:middle}

/* ── ĐIỀU PHỐI 100 TRỢ LÝ (9.99.107) ── */
.dp-nao{
  display:flex;gap:14px;align-items:flex-start;max-width:760px;margin:0 auto 16px;
  padding:16px;border:1px solid var(--line-2);border-left:4px solid var(--gita);
  border-radius:var(--r);
  background:linear-gradient(180deg, color-mix(in srgb,var(--gita) 8%,var(--surface)), var(--surface));
}
.dp-nao-av{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;display:inline-flex}
.dp-nao-av svg{width:64px;height:64px;display:block}
.dp-nao-noi b{font-size:14.5px;display:flex;align-items:center;gap:6px}
.dp-nao-noi b svg{width:18px;height:18px}
.dp-nao-noi p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:5px}
.dp-tro{font-size:12.5px}
.dp-tro code{background:var(--bg-1);border-radius:5px;padding:1px 6px;margin-right:2px;font-size:12.5px}
.dp-h{max-width:760px;margin:20px auto 10px;font-size:16px;display:flex;align-items:center;gap:8px}
.dp-h svg{width:20px;height:20px;color:var(--gita)}
.dp-note{max-width:760px;margin:0 auto 12px}
.dp-luat{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.dp-luat-o{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.dp-luat-o.dp-loikhai{border-left:3px solid var(--gita-do)}
.dp-luat-o b{font-size:14.5px}
.dp-luat-o p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:5px}
.dp-nhan{display:inline-block;font-size:12.5px;font-weight:600;color:#fff;background:var(--gita-do);
  border-radius:99px;padding:1px 8px;margin-left:4px;vertical-align:middle}
.dp-mien{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.dp-mien-o{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);padding:12px 14px}
.dp-mien-dau{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-mien-dau b{font-size:14.5px}
.dp-so{flex:none;min-width:24px;text-align:center;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--gita);border-radius:99px;padding:1px 8px}
.dp-tl{display:flex;flex-direction:column;gap:6px}
.dp-tl-o{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-tl-ma{flex:none;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.dp-tl-cua{background:var(--bg-1);border-radius:5px;padding:1px 7px;font-size:12.5px;color:var(--ink-1)}
.dp-tl-qua{display:inline-flex;flex-wrap:wrap;gap:4px}
.dp-cong{font-size:12.5px;color:var(--gita-sau);background:color-mix(in srgb,var(--gita) 12%,var(--surface));
  border-radius:99px;padding:0 7px}

/* ── KHUNG VẬN HÀNH · V20 (Harness Engineering) ── */
.hvh-h{max-width:760px;margin:20px auto 10px;font-size:16px;display:flex;align-items:center;gap:8px}
.hvh-h svg{width:20px;height:20px;color:var(--gita)}
.hvh-note{max-width:760px;margin:0 auto 10px}
.hvh-tru{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.hvh-tru-o{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);border-left:3px solid var(--gita)}
.hvh-tru-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hvh-tru-dau b{font-size:14.5px}
.hvh-do{font-size:12.5px;color:var(--gita);border:1px solid var(--line-2);border-radius:99px;padding:1px 8px;white-space:nowrap}
.hvh-tru-o p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:6px}
.hvh-meta{font-size:12.5px}
.hvh-tro{font-size:12.5px;color:var(--ink-3)}
.hvh-luat{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.hvh-luat-o{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.hvh-luat-o b{font-size:14.5px}
.hvh-luat-o p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:5px}
.hvh-cham{max-width:760px;margin:0 auto;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.hvh-cham p{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.hvh-lots{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hvh-lot{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:3px 10px}

/* ── SỨC CHỨA & TỐC ĐỘ ── */
.sc-h{max-width:760px;margin:20px auto 10px;font-size:16px;display:flex;align-items:center;gap:8px}
.sc-h svg{width:20px;height:20px;color:var(--gita)}
.sc-note{max-width:760px;margin:0 auto 10px}
.sc-kq{max-width:760px;margin:10px auto 0}
.sc-do{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sc-do-hang{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);text-align:center}
.sc-do-hang b{display:block;font-size:21px;color:var(--gita)}
.sc-do-hang span{font-size:12.5px;color:var(--ink-2)}
.sc-bang-nong{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sc-nong-o{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:3px 10px}
.sc-tru{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.sc-tru-o{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);border-left:3px solid var(--gita)}
.sc-tru-o.sc-tru-lon{border-left-color:var(--line-2)}
.sc-tru-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sc-tru-dau b{font-size:14.5px}
.sc-tt{font-size:12.5px;border-radius:99px;padding:1px 8px;white-space:nowrap}
.sc-chay{color:var(--gita);border:1px solid var(--line-2)}
.sc-lon{color:var(--ink-3);border:1px solid var(--line-2)}
.sc-tru-o p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:6px}
.sc-tro{font-size:12.5px;color:var(--ink-3)}
.sc-tro code{font-size:12.5px}
.sc-tran{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.sc-tran-o{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.sc-tran-o b{font-size:14.5px}
.sc-gh,.sc-duong{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:5px}

/* ═══════════════════════════════════════════════════════════════
   KHÔNG GIAN 5D · CHUYỂN ĐỘNG · CỘT THU GỌN · HỆ CHỮ  (9.99.108)

   Chủ hệ: phá cách sang hiện đại, chiều sâu không gian ("5D"), cao cấp;
   người xem CẢM NHẬN mình đang dịch chuyển; bấm/chọn đều có chuyển động
   và sự KHAI MỞ; hai cột thu gọn được để mở rộng màn chính.

   "5D" ở đây KHÔNG phải năm chiều thật — nó là chiều sâu không gian: lớp
   bóng chồng, phối cảnh (perspective), nghiêng nhẹ theo hướng chạm, và
   chuyển cảnh "đi vào" mỗi màn. Nói thẳng để không ai tưởng có một hệ
   toạ độ năm trục (luật kho: không khai điều máy không làm được).

   Mọi chuyển động NGHỈ ở trạng thái nhìn thấy được, và TẮT HẲN khi máy
   xin giảm chuyển động (prefers-reduced-motion) — cuối khối này. Nghiêng
   3D chỉ bật ở con trỏ TINH (hover:hover), nên khổ chạm không dính, và
   do-khung-man (đo ở con trỏ thô) không thấy — transform không đổi kích
   thước đo được. */

/* Lớp bóng chiều sâu — hai bậc, đọc token, đổi theo nền sáng/tối. */
:root{ --noi-1:0 10px 24px -14px var(--phu-5); --noi-2:0 26px 52px -26px var(--phu-6); }

/* ── DỊCH CHUYỂN KHI BẤM / CHỌN — "thích được chạm" ── */
[data-v],.nav-i,.chip,.tbtn,.btn,.nha-o,.dp-mien-o,.dp-tl-o,.cd-loc-o{
  transition:transform .16s ease, box-shadow .24s cubic-bezier(.22,.61,.36,1),
    background .2s ease, border-color .2s ease}
[data-v]:active,.nav-i:active,.btn:active,.tbtn:active,.chip:active,.cd-loc-o:active{transform:translateY(1px) scale(.99)}

/* ── KHAI MỞ: nhấc + chiều sâu khi rê tới (chỉ con trỏ tinh) ── */
@media(hover:hover){
  .nha-o,.dp-mien-o,.val,.cd-chitiet,.dp-luat-o{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s}
  .nha-o:hover,.dp-mien-o:hover{transform:translateY(-5px);box-shadow:var(--noi-2);z-index:1}
  .val:hover,.dp-luat-o:hover{transform:translateY(-3px);box-shadow:var(--noi-1)}
  /* Nghiêng nhẹ theo phối cảnh — cảm giác không gian, không phải mặt phẳng */
  .nha-luoi,.nha-luoi-8,.dp-mien{perspective:1100px}
  .nha-o:hover{transform:translateY(-5px) rotateX(2.5deg)}
}

/* ── KHAI MỞ dần: các ô của hub hiện lần lượt như mở ra một thế giới ──
   .nha-bd-o KHÔNG nằm đây nữa: nó mang transform giữ-chữ-thẳng + animation
   counter-rotate, mà oMo (fill:both) sẽ ghi đè transform đó. Nút bánh đà
   được định vị bởi .nha-bd-slot trong suốt (không animation). */
.nha-luoi-8>*,.dp-mien>*,.cd-loc-o{animation:oMo .5s cubic-bezier(.22,.61,.36,1) both}
.nha-luoi-8>*:nth-child(2),.dp-mien>*:nth-child(2){animation-delay:.05s}
.nha-luoi-8>*:nth-child(3),.dp-mien>*:nth-child(3){animation-delay:.1s}
.nha-luoi-8>*:nth-child(4),.dp-mien>*:nth-child(4){animation-delay:.15s}
.nha-luoi-8>*:nth-child(n+5),.dp-mien>*:nth-child(n+5){animation-delay:.2s}
@keyframes oMo{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── CỘT THU GỌN — chỉ desktop; điện thoại hai cột vốn là ngăn kéo ──
   Đặt trong @media min-width để không đè lên .open của ngăn kéo điện
   thoại (cùng độ đặc hiệu #left, dòng sau thắng). */
@media(min-width:861px){
  /* Transition CHỈ ở desktop — ngăn kéo điện thoại (@media max-width:860px)
     có easing riêng; đặt dòng này toàn cục thì nó đè easing ngăn kéo do
     cùng độ đặc hiệu #left và đứng sau (tổ soi đối kháng bắt). */
  #left,#right{transition:transform .34s cubic-bezier(.22,.61,.36,1),box-shadow .34s}
  body.thu-cot .shell{grid-template-columns:minmax(0,1fr)}
  body.thu-cot main{grid-column:1;max-width:1180px;margin:0 auto;width:100%}
  body.thu-cot #left{transform:translateX(-100%)}
  body.thu-cot #right{transform:translateX(100%)}
}

/* ── HAI CỘT THÀNH PANEL THẢ TỪ TRÊN — desktop (9.99.151) ──
   Chủ hệ: "thu hai tab hai bên lên trên; kích vào mới thả xuống để chọn,
   tăng diện tích màn chính." Màn chính FULL; #left/#right ẩn sẵn, mở từ
   nút trên thanh và thả xuống dưới thanh (translateY), nền mờ bấm-ra-đóng.
   Chỉ ≥861px — điện thoại giữ ngăn kéo cũ + thanh dưới đáy. */
@media(min-width:861px){
  :root{--hnav-h:46px}
  #shell.shell{grid-template-columns:minmax(0,1fr) !important}
  #shell>main{grid-column:1 !important;width:100%}
  /* Thanh ngang các phần chính — cố định dưới thanh trên, cuộn ngang nếu
     hẹp. Bấm một tab thì thả panel trái xuống mở đúng nhóm ấy. */
  #hnav{display:flex;position:fixed;left:0;right:0;top:var(--top-tong);height:var(--hnav-h);
    z-index:55;align-items:stretch;gap:4px;overflow-x:auto;scrollbar-width:none;
    padding:0 calc(14px + var(--sal)) 0 calc(14px + var(--sar));
    background:var(--nen-ben);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
  #hnav::-webkit-scrollbar{display:none}
  .hnav-i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;
    padding:0 13px;border-radius:10px;margin:6px 0;font-size:12.5px;font-weight:700;
    color:var(--ink-2);border:1px solid transparent;transition:.16s;cursor:pointer}
  .hnav-i svg{width:16px;height:16px;color:var(--sc,var(--gita));flex:none}
  .hnav-i:hover{background:var(--phu-2);color:var(--ink)}
  .hnav-i.on{background:color-mix(in srgb,var(--sc) 12%,transparent);
    border-color:color-mix(in srgb,var(--sc) 40%,transparent);color:var(--ink)}
  #left,#right{top:calc(var(--top-tong) + var(--hnav-h));bottom:auto;width:min(360px,42vw);
    max-height:calc(100dvh - var(--top-tong) - var(--hnav-h) - 14px);
    border:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);
    box-shadow:var(--noi-2);transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s,visibility .24s}
  #left{left:calc(8px + var(--sal));right:auto}
  #right{right:calc(8px + var(--sar));left:auto}
  #left.open,#right.open{transform:translateY(0);opacity:1;visibility:visible}
  #scrim{position:fixed;inset:0;background:var(--nen-mo);backdrop-filter:blur(3px);z-index:45;display:none}
  #scrim.on{display:block}
  /* Màn chính đã full → nút "thu hai cột" không còn việc; ẩn. */
  .tbtn[data-act="thu-cot"]{display:none}
}

/* Bánh đà LUÔN QUAY quanh nhà (9.99.152) — phiên bản CHẠY ĐƯỢC TRÊN MỌI
   TRÌNH DUYỆT. Bản cũ animate một góc --spin bằng @property rồi tính vị trí
   bằng cos()/sin() trong calc(): kỹ thuật ấy chỉ Chromium mới có, trên
   Firefox/Safari/trình duyệt cũ --spin không đổi được nên 10 nút dồn về tâm
   và CHẬP CHỜN (lỗi chủ hệ báo). Nay quay CẢ VÒNG bằng transform (hỗ trợ
   phổ biến), và xoay NGƯỢC chữ trong nút để chữ luôn đứng thẳng. */
@keyframes nhaQuay{to{transform:rotate(360deg)}}

/* ── VÒNG BÁNH ĐÀ quanh nhà (9.99.150) — CONTAINER QUERY, không media ──
   Vòng chỉ dựng khi CỘT NỘI DUNG (.nha-vong) đủ rộng, nên KHÔNG BAO GIỜ
   tràn ngang ở khổ hẹp (hai cột ăn bớt bề ngang thay đổi theo viewport —
   media query không thấy). Nhà cao hơn rộng → vòng là ELLIP (rx<ry) ôm
   sát; đặt nút bằng cos()/sin() (Chromium hỗ trợ trig trong calc): góc
   bắt đầu -90° = đỉnh, mỗi nút +36°. Nhãn thu hẹp (max-width) để không
   chạm thân nhà. */
/* Vòng bánh đà — ĐẶT VỊ TRÍ BẰNG SỐ (Math.cos/sin trong JS lúc render,
   ghi thẳng left/top dạng % vào từng nút), xoay cả vòng bằng MỘT animation
   transform duy nhất. Cách này chạy MỌI trình duyệt kể cả trình duyệt cũ,
   vì CSS chỉ cần: position absolute + % + animation rotate — ba thứ có từ
   rất lâu. Bỏ hẳn container query và cos/sin trong calc (nguyên nhân vòng
   không dựng/không quay trên nhiều máy). */
/* 9.99.253 — Bỏ vòng quay (chữ lộn ngược) và khung vuông nhồi nhà (tám ô
   phình/tràn). Mười bánh đà xếp PHẲNG thành hàng huy hiệu ngay trên ngôi
   nhà; ngôi nhà về luồng thường nên các ô vừa khít, không tràn. */
/* ── 9.99.254 — CON DẤU THỊNH VƯỢNG: nhà 3D ở tâm · 10 bánh đà quay trên
   vòng tròn · vòng khẩu hiệu đứng yên bên ngoài ──
   BASE (khổ hẹp, điện thoại): xếp PHẲNG, chữ thẳng, bấm được — luôn dùng
   được. Khổ rộng (@container ≥ 820px): dựng con dấu tròn đầy đủ. */
.nha{position:relative}
.nha-ring{position:relative;margin:0 auto}
.nha-ring .nha{position:static;inset:auto}
.nha-ring::before{display:none}
.nha-ring-nodes{position:static;animation:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 16px}
.nha-bd-slot{position:static;display:inline-flex}
.nha-ring-nodes .nha-bd-o{pointer-events:auto}
.nha-khauhieu{display:none}
/* Nút quay chỉ có nghĩa khi vòng tròn được dựng (khổ rộng); khổ hẹp bánh
   đà xếp phẳng, không có gì để quay. Đặt TRƯỚC khối @container: cùng độ
   nặng thì dòng sau thắng — đặt sau là khối container không bật được nút. */
.nha-quay-nut{display:none;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}

/* vòng quay (ngoài) + bánh counter-quay (trong) — cùng 60s, ngược chiều,
   nên bánh ĐI THEO VÒNG mà CHỮ ĐỨNG YÊN thẳng đứng. */
@keyframes nhaQuay{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes nhaGiu{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
/* Vòng khẩu hiệu quay NGƯỢC chiều, chậm gấp đôi (10/10/2026). Trước đó nó
   đứng yên "để đọc được" — và chủ hệ báo đúng nó: vòng tròn to nhất, nhìn
   thấy rõ nhất, lại là vòng không quay, nên cả con dấu trông như đứng im.
   Chữ bám vòng vẫn đọc được ở 3°/giây. */
@keyframes nhaQuayNguoc{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

@container nhaVong (min-width:760px){
  /* .nha-ring là CONTAINER riêng → mọi kích thước bên trong tính bằng cqi
     (1cqi = 1% bề ngang vòng). Nhờ vậy CẢ CON DẤU co giãn theo tỉ lệ:
     nhà luôn chiếm đúng một phần nhỏ của vòng ở MỌI khổ (máy tính · iPad
     · điện thoại), không bao giờ chạm chữ vòng ngoài. */
  .nha-ring{width:min(1000px,100%);aspect-ratio:1/1;margin:22px auto 10px;container:nhaRing / inline-size}
  /* VÒNG KHẨU HIỆU (ngoài, ~47%) — chữ bám vòng, đứng yên, đọc được */
  .nha-khauhieu{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0;
    transform-origin:50% 50%;animation:nhaQuayNguoc 120s linear infinite}
  .nha-khauhieu text{font-family:var(--font);font-weight:800;font-size:3cqi;fill:var(--gita-ink)}
  /* VÒNG BÁNH ĐÀ (trong, bán kính 37%) — cách vòng khẩu hiệu ~10% (~2 cm) */
  .nha-ring::before{content:"";display:block;position:absolute;inset:13%;
    border:2px dashed var(--gita-vien-2);border-radius:50%;pointer-events:none;animation:nhaQuay 60s linear infinite}
  /* pointer-events:none — lớp vòng là một HÌNH VUÔNG TRONG SUỐT phủ cả con
     dấu và nằm TRÊN ngôi nhà (z-index 3). Thiếu dòng này thì mọi cú bấm vào
     11 phần của nhà rơi vào lớp vòng: đo ở 9.99.254 ra 0/11 phần bấm trúng
     trên máy tính, trong khi màn ghi "Kích vào từng phần để mở nội dung".
     Chỉ các nút bánh đà nhận bấm (pointer-events:auto ở dưới). */
  .nha-ring-nodes{position:absolute;inset:0;display:block;margin:0;z-index:3;pointer-events:none;animation:nhaQuay 60s linear infinite}
  .nha-ring-nodes .nha-bd-slot{position:absolute;display:block;width:0;height:0}
  .nha-ring-nodes .nha-bd-o{position:absolute;left:0;top:0;margin:0;max-width:13.5cqi;white-space:normal;text-align:left;
    min-height:4cqi;padding:.55cqi 1.3cqi .55cqi .55cqi;gap:.8cqi;font-size:1.2cqi;border-radius:99px;
    transform:translate(-50%,-50%);animation:nhaGiu 60s linear infinite}
  .nha-ring-nodes .nha-bd-ic{width:3cqi;height:3cqi}
  .nha-ring-nodes .nha-bd-ic svg{width:1.7cqi;height:1.7cqi}
  /* NGÔI NHÀ 3D Ở TÂM — thu gọn (chỉ icon + tên), nằm trọn giữa vòng.
     Lớp: khẩu hiệu (0) < nhà (1) < bánh đà (3). */
  .nha-ring .nha{position:absolute;top:50%;left:50%;width:42cqi;margin:0;z-index:1;
    transform:translate(-50%,-50%);filter:drop-shadow(0 2.2cqi 2.8cqi var(--phu-4))}
  .nha-ring .nha small{display:none}
  .nha-ring .nha-mai{padding:1.1cqi 1.4cqi 1cqi}
  .nha-ring .nha-than{padding:1.1cqi;gap:.7cqi}
  .nha-ring .nha-luoi-8{grid-template-columns:repeat(4,1fr);gap:.6cqi}
  .nha-ring .nha-o{min-height:5cqi;padding:.8cqi .5cqi;gap:.4cqi;border-radius:1.2cqi}
  .nha-ring .nha-o .nha-ic{width:3cqi;height:3cqi}
  .nha-ring .nha-o .nha-ic svg{width:1.6cqi;height:1.6cqi}
  .nha-ring .nha-o b{font-size:1.02cqi;line-height:1.14}
  .nha-ring .nha-luoi-8>button.nha-o::after{font-size:1.1cqi;margin-top:0}
  .nha-ring .nha-o-mai{min-height:3.8cqi}
  .nha-ring .nha-o-mai b{font-size:1.2cqi}
  .nha-ring .nha-o-cua{min-height:3.8cqi;padding:.8cqi}
  .nha-ring .nha-o-cua b{font-size:1.2cqi}
  .nha-ring .nha-o-cua .nha-ic{width:3.2cqi;height:3.2cqi}
  .nha-ring .nha-o-cua .nha-ic svg{width:1.8cqi;height:1.8cqi}
  /* NỀN MÓNG bệ rộng — vượt hai mép tường để đỡ cả nhà (bền vững) */
  .nha-ring .nha-nen{width:calc(100% + 4cqi);margin:0 -2cqi;padding:.9cqi 1.2cqi 1cqi;border-radius:0 0 2cqi 2cqi}
  .nha-ring .nha-o-nen{min-height:3.6cqi;gap:.8cqi}
  .nha-ring .nha-o-nen .nha-ic{width:2.8cqi;height:2.8cqi}
  .nha-ring .nha-o-nen .nha-ic svg{width:1.5cqi;height:1.5cqi}
  /* MÁY XIN GIẢM CHUYỂN ĐỘNG → vòng QUAY CHẬM (240 giây/vòng, 1,5°/giây), không
     dừng hẳn (chủ hệ 10/10/2026: "vòng tròn đang dừng không chuyển động").
     Chậm là đã giảm; đường dừng vẫn đủ: rê chuột/Tab vào bánh là đứng lại,
     nút "Dừng vòng bánh đà" luôn có (WCAG 2.2.2 — chuyển động tự chạy phải
     dừng được). !important vì luật chung *{animation-duration:.01ms!important}
     ở đầu tệp ép mọi hoạt ảnh về 0 — thiếu nó vòng GIẬT góc thay vì quay. */
  @media(prefers-reduced-motion:reduce){.nha-ring-nodes,.nha-ring-nodes .nha-bd-o,.nha-ring::before{animation-duration:90s!important}
    .nha-khauhieu{animation-duration:180s!important}}
  /* LỰA CHỌN CỦA NGƯỜI DÙNG thắng mặc định của máy (ngoi-nha.js → nhaDoiQuay).
     Độ nặng 0,3–0,4 thắng các luật "giảm chuyển động" thường (0,1–0,2) ở
     dưới tệp, NHƯNG không thắng được luật `*{animation-duration:.01ms
     !important}` (dòng ~750): độ nặng không bao giờ thắng !important. Thiếu
     dòng animation-duration !important bên dưới thì "Cho quay" làm vòng GIẬT
     góc mỗi khung hình thay vì quay êm 60 giây (tổ soát bắt 10/10/2026). */
  .nha-quay-nut{display:flex}
  .nha-ring.nha-quay .nha-ring-nodes{animation:nhaQuay 60s linear infinite}
  .nha-ring.nha-quay .nha-ring-nodes .nha-bd-o{animation:nhaGiu 60s linear infinite}
  .nha-ring.nha-quay .nha-ring-nodes,.nha-ring.nha-quay .nha-ring-nodes .nha-bd-o,.nha-ring.nha-quay::before{animation-duration:60s!important}
  .nha-ring.nha-quay .nha-khauhieu{animation-duration:120s!important}
  .nha-ring.nha-dung .nha-ring-nodes,.nha-ring.nha-dung .nha-ring-nodes .nha-bd-o,.nha-ring.nha-dung::before,.nha-ring.nha-dung .nha-khauhieu{animation:none}
  /* Rê chuột / Tab vào MỘT bánh thì cả vòng đứng lại để bấm trúng. Dừng
     CẢ vòng lẫn bánh cùng lúc — dừng một bên thì chữ nghiêng theo góc đang dở. */
  .nha-ring-nodes:hover,.nha-ring-nodes:hover .nha-bd-o,
  .nha-ring-nodes:focus-within,.nha-ring-nodes:focus-within .nha-bd-o{animation-play-state:paused}
}
/* (Luật tắt vòng khi giảm chuyển động đã gom về MỘT chỗ — trong khối @container ở trên.) */

/* ── TỔNG QUAN (tong-quan.js) — thẻ ít chữ, số to, lưới co giãn ── */
.tq-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:10px}
.card.tq-the{padding:16px 14px;border:1px solid var(--line);background:var(--nen-the, #fff);transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.card.tq-the:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,24,60,.10);border-color:var(--gita)}
.card.tq-the:focus-visible{outline:2px solid var(--gita);outline-offset:2px}
.tq-so{font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tq-nhan{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-top:6px}
.tq-duoi{font-size:11.5px;margin-top:3px}

/* ── HỆ CHỮ — mô thức hoá, ánh xạ ĐÚNG thang chín bậc đã có ──
   Sáu vai chữ, mọi cỡ đều nằm trong thang 10.5·12.5·14.5·16·18·21·26·33.
   Dùng lớp thay vì gõ cỡ tay ở từng chỗ: một hệ đọc ra ngay bậc nào là
   bậc nào. (Rải ra mọi màn là việc dần — foundation trước, xem sổ chờ.) */
.t-display{font-size:33px;line-height:1.14;font-weight:800;letter-spacing:-.02em}
.t-title{font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.015em}
.t-h{font-size:21px;line-height:1.25;font-weight:700}
.t-sub{font-size:18px;line-height:1.5;font-weight:600}
.t-body{font-size:16px;line-height:1.68;color:var(--ink-2)}
.t-cap{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.t-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-4)}

/* ── Ô CHAT TRỢ LÝ NỔI Ở GÓC (9.99.125) ──
   Nút tròn ở góc phải; bấm mở một ô nhỏ; bấm phóng to thì phủ gần kín màn.
   Kích thước ô nhỏ đặt bằng biến để chỉnh một chỗ. Nút tròn nằm TRÊN thanh
   dưới đáy trên điện thoại (thanh cao ~ 56px + vùng an toàn) — chồng lên nó
   là che mất một ô điều hướng. */
:root{ --tln-rong:300px; --tln-cao:440px; --tln-thu:56px; --tln-mini-rong:152px; --tln-mini-cao:114px; }
#tln{ font-size:14.5px; }
/* Ô thu gọn còn khoảng 4 × 3 cm ở 96dpi; phóng to để chat, hoặc phóng full màn hình. */
/* ẨN HẲN: giấu cả nút tròn lẫn ô, chỉ chừa một vạch nhỏ nép mép phải để
   gọi trợ lý về — "ẩn khi cần để không làm mất nội dung". */
.tln-he{ display:none }
.tln-an .tln-fab{ display:none }
.tln-an .tln-he{ display:flex; position:fixed; z-index:60;
  right:0; top:50%; transform:translateY(-50%);
  flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  padding:10px 5px; border:none; border-radius:12px 0 0 12px;
  background:var(--gita-sau); color:#fff; box-shadow:var(--noi-2) }
.tln-an .tln-he svg{ width:18px; height:18px }
.tln-he span{ font-size:12.5px; writing-mode:vertical-rl; letter-spacing:.04em }
/* Ô THU GỌN — một ô thanh tiêu đề nhỏ ≈ 1,5cm, bo góc vuông mềm (không
   tròn hẳn) để đọc ra là "một tab" chứ không phải một nút nổi. Bấm là mở
   lại panel chat. */
.tln-fab{ position:fixed; z-index:60;
  right:calc(20px + var(--sar)); bottom:calc(20px + var(--sab));
  width:var(--tln-thu); height:var(--tln-thu); border-radius:16px; border:none; cursor:pointer;
  background:var(--gita-sau); color:#fff; display:grid; place-items:center;
  box-shadow:var(--noi-2); transition:transform .15s ease, box-shadow .15s ease }
.tln-fab:hover{ transform:translateY(-2px) }
.tln-fab svg{ width:24px; height:24px }
.tln-fab-cham{ position:absolute; top:11px; right:11px; width:9px; height:9px;
  border-radius:50%; background:var(--ok); box-shadow:0 0 0 2px var(--gita-sau);
  animation:tlnNhay 1.4s ease-in-out infinite }
/* Vòng loang báo "có ô chat" — nhấp nháy nhẹ để khách biết bấm được, mà
   không cố định che màn. Dùng ::after nên không thêm thẻ rỗng. */
.tln-fab::after{ content:""; position:absolute; inset:-3px; border-radius:18px;
  pointer-events:none; border:2px solid var(--gita);            /* dòng lùi trình cũ */
  border-color:color-mix(in srgb, var(--gita) 55%, transparent);
  animation:tlnVong 2.2s ease-out infinite }
@keyframes tlnNhay{ 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes tlnVong{ 0%{transform:scale(1);opacity:.6} 70%,100%{transform:scale(1.6);opacity:0} }
.tln-open .tln-fab{ display:none }

.tln-panel{ position:fixed; z-index:61;
  right:calc(20px + var(--sar)); bottom:calc(20px + var(--sab));
  width:var(--tln-rong); height:var(--tln-cao);
  max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px);
  background:var(--surface); border:1px solid var(--gita-vien-2);
  border-radius:var(--r-lg); box-shadow:var(--noi-2);
  display:flex; flex-direction:column; overflow:hidden }
.tln-panel[hidden]{ display:none }
/* Phóng FULL: kín cả màn hình (inset:0, không bo góc). Vùng an toàn (tai
   thỏ, vạch về nhà) chừa bằng PADDING ở đầu và chân, không bằng lề — để
   nền phủ tới sát mép mà chữ không lọt dưới tai thỏ. */
.tln-to .tln-panel{ inset:0; width:auto; height:auto;
  max-width:none; max-height:none; border-radius:0; border:none }
.tln-to .tln-dau{ padding-top:calc(10px + var(--sat)) }
body.tln-khoa{ overflow:hidden }

/* THU GỌN — giữ một thẻ 4 × 3 cm để không che nội dung; chạm vào thẻ để
   mở lại nguyên cuộc trò chuyện. */
.tln-mini .tln-panel{ width:var(--tln-mini-rong); height:var(--tln-mini-cao);
  min-height:var(--tln-mini-cao); cursor:pointer }
.tln-mini .tln-cuon,
.tln-mini .tln-goiy,
.tln-mini .tln-go{ display:none }
.tln-mini .tln-dau{ cursor:pointer; border-bottom:none }
.tln-mini .tln-duoi{ display:none }
.tln-mini .tln-ten b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tln-mini .tln-nut[data-tln="to"],
.tln-mini .tln-nut[data-tln="an"]{ display:none }
.tln-mini .tln-panel::after{ content:"Chạm để tiếp tục trò chuyện";
  display:grid; flex:1; place-items:center; padding:8px;
  color:var(--ink-3); font-size:12px; text-align:center }

.tln-dau{ display:flex; align-items:center; gap:8px; flex:none;
  padding:10px 12px; border-bottom:1px solid var(--gita-vien-2); background:var(--bg-2) }
.tln-anh{ width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--gita-sau); color:#fff; display:grid; place-items:center }
.tln-anh svg{ width:16px; height:16px }
.tln-ten{ display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0 }
.tln-ten b{ font-size:14.5px }
.tln-duoi{ font-size:12.5px; color:var(--gita-ink); display:flex; align-items:center; gap:5px }
.tln-cham{ width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none }
.tln-nut{ width:32px; height:32px; flex:none; border:none; background:transparent;
  color:var(--gita-ink); cursor:pointer; border-radius:8px; display:grid; place-items:center }
.tln-nut:hover{ background:var(--nen-mo) }
.tln-nut svg{ width:18px; height:18px }
/* Khung cuộn: đè min/max của .ch-khung (cùng độ đặc hiệu, dòng này đứng
   sau nên thắng) để nó lấp đầy ô nổi thay vì giữ chiều cao của màn đầy đủ. */
.tln-cuon{ flex:1; min-height:0; max-height:none; padding:12px; gap:12px; background:var(--bg-0) }
.tln-goiy{ flex:none; display:flex; gap:6px; overflow-x:auto; padding:8px 10px 0;
  scrollbar-width:none }
.tln-goiy::-webkit-scrollbar{ display:none }
.tln-chip{ flex:none; white-space:nowrap; font-size:12.5px; padding:6px 10px;
  border:1px solid var(--gita-vien-2); border-radius:99px; background:var(--surface);
  color:var(--gita-ink); cursor:pointer }
.tln-chip:hover{ border-color:var(--gita) }
.tln-go{ flex:none; display:flex; align-items:flex-end; gap:8px;
  padding:10px 12px calc(10px + var(--sab)); border-top:1px solid var(--gita-vien-2) }
.tln-go textarea{ flex:1; resize:none; font-size:14.5px; line-height:1.5;
  padding:9px 12px; border:1px solid var(--gita-vien-2); border-radius:12px;
  background:var(--bg-0); color:var(--gita-ink); max-height:96px }
.tln-gui{ flex:none; width:40px; height:40px; border:none; border-radius:12px;
  background:var(--gita-sau); color:#fff; cursor:pointer; display:grid; place-items:center }
.tln-gui svg{ width:18px; height:18px }

/* ── CRM · buồng lái khoa học (9.99.178) — thẻ chỉ số, phễu chặng, đèn màu.
   Màu sắc khí truyền qua style nội tuyến từ crm.js; nền/viền lấy token. ── */
.crm-mau{display:flex;gap:8px;align-items:center;padding:10px 14px;margin:0 0 14px;
  border:1px solid var(--line);border-left:4px solid #B45309;border-radius:12px;
  background:var(--bg-1);font-size:12.5px;color:var(--gita-ink)}
.crm-mau svg{width:16px;height:16px;flex:none;color:#B45309}
.crm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:4px 0 10px}
.crm-kpi{padding:14px 16px;border-radius:14px;background:var(--bg-1);border:1px solid var(--line);
  border-top:3px solid #185AB4;display:flex;flex-direction:column;gap:3px}
.crm-kpi-nhan{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.crm-kpi-so{font-size:26px;line-height:1.15;color:var(--gita-ink);font-weight:800;font-variant-numeric:tabular-nums}
.crm-kpi-phu{font-size:12.5px;color:var(--ink-4)}
.crm-pheu{display:flex;flex-direction:column;gap:8px;margin:6px 0}
.crm-pheu-hang{display:flex;align-items:center;gap:10px}
.crm-pheu-ten{flex:none;width:108px;font-size:12.5px;color:var(--gita-ink)}
.crm-pheu-thanh{flex:1;height:16px;border-radius:8px;background:var(--bg-2);overflow:hidden}
.crm-pheu-thanh i{display:block;height:100%;border-radius:8px;min-width:6px}
.crm-pheu-so{flex:none;width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--gita-ink);font-weight:700}
.crm-den{display:inline-block;padding:2px 10px;border-radius:999px;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.crm-dens{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px;margin:6px 0}
.crm-den-o{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
  background:var(--bg-1);border:1px solid var(--line);border-left:4px solid #64708A}
.crm-den-o b{font-size:21px;color:var(--gita-ink);font-variant-numeric:tabular-nums}
.crm-den-o span{font-size:10.5px;color:var(--ink-4)}
/* ── ĐƯỜNG ỐNG KANBAN (9.99.232) — cột theo chặng, thẻ cơ hội ──
   Cả dải cuộn ngang trên màn hẹp; mỗi cột cuộn dọc riêng. Màu đầu cột lấy
   từ SAC_PHEU nội tuyến; nền/viền/chữ lấy token, 0 rgba trắng. */
.crm-kb{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.crm-kb-cot{flex:0 0 252px;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;max-height:72vh;scroll-snap-align:start}
.crm-kb-dau{padding:12px 14px;border-top:3px solid var(--gita);border-bottom:1px solid var(--line);
  border-radius:14px 14px 0 0;background:var(--bg-2)}
.crm-kb-dau-ten{font-size:14.5px;font-weight:800;color:var(--gita-ink)}
.crm-kb-dau-so{font-size:12.5px;color:var(--ink-4);margin-top:3px}
.crm-kb-dau-so b{color:var(--gita-ink);font-variant-numeric:tabular-nums}
.crm-kb-dau-xs{font-size:10.5px;color:var(--ink-4);margin-top:4px;display:flex;align-items:center;gap:4px}
.crm-kb-dau-xs svg{width:12px;height:12px;flex:none}
.crm-kb-cot-than{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px}
.crm-kb-the{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.crm-kb-the:hover{border-color:var(--gita)}
.crm-kb-the-ten{font-size:14.5px;font-weight:700;color:var(--gita-ink);line-height:1.35}
.crm-kb-the-sdt{font-size:12.5px;color:var(--ink-4);display:flex;align-items:center;gap:5px;margin-top:4px}
.crm-kb-the-sdt svg,.crm-kb-the-chot svg{width:12px;height:12px;flex:none}
.crm-kb-the-gia{font-size:16px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.crm-kb-the-chan{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:7px}
.crm-kb-nhan{font-size:10.5px;padding:2px 9px;border-radius:99px;background:var(--nen-mo);color:var(--gita-ink)}
.crm-kb-pt{font-size:10.5px;color:var(--ink-4);white-space:nowrap}
.crm-kb-the-chot{font-size:10.5px;color:var(--ink-4);display:flex;align-items:center;gap:4px;margin-top:6px}
.crm-kb-trong{font-size:12.5px;color:var(--ink-4);text-align:center;padding:18px 0}
/* ── NGĂN "HOẠT ĐỘNG" — sơ đồ giới thiệu, flex-wrap nên tự xuống hàng trên
   điện thoại (không thêm @media, khỏi đụng luật "khối chạm nằm cuối"). ── */
.crm-ht-ht{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px}
.crm-ht-buoc{position:relative;flex:1 1 160px;min-width:150px;background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:14px}
.crm-ht-tron{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.crm-ht-tron svg{width:20px;height:20px}
.crm-ht-so{position:absolute;top:12px;right:14px;font-size:12.5px;font-weight:800;color:var(--ink-4);font-variant-numeric:tabular-nums}
.crm-ht-ten{font-size:14.5px;font-weight:800;color:var(--gita-ink);margin-top:9px}
.crm-ht-vi{font-size:12.5px;color:var(--ink-4);line-height:1.45;margin-top:3px}
.crm-ht-kenh{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.crm-ht-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--bg-1);border:1px solid var(--line);font-size:12.5px;color:var(--gita-ink)}
.crm-ht-chip svg{width:12px;height:12px;flex:none;color:var(--gita)}
.crm-ht-kho{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:var(--nen-mo);border:1px solid var(--line);margin:0 0 16px}
.crm-ht-kho svg{width:22px;height:22px;flex:none;color:var(--gita)}
.crm-ht-kho b{font-size:16px;color:var(--gita-ink)}
.crm-ht-kho span{font-size:12.5px;color:var(--ink-4)}
.crm-ht-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:6px 0 16px}
.crm-ht-the{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--bg-1);border:1px solid var(--line)}
.crm-ht-the-ic svg{width:22px;height:22px;flex:none}
.crm-ht-the-ten{font-size:14.5px;font-weight:700;color:var(--gita-ink)}
.crm-ht-the-vi{font-size:12.5px;color:var(--ink-4);line-height:1.45;margin-top:2px}
.crm-ht-loi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0 4px}
.crm-ht-loi-o{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:12px;background:var(--gita);color:#fff}
.crm-ht-loi-o svg{width:20px;height:20px;flex:none;color:#fff}
.crm-ht-loi-o span{font-size:14.5px;font-weight:600}
/* Nút tròn ngồi TRÊN thanh điều hướng dưới đáy (hiện ở ≤860px) để không
   che mất một ô của nó. Panel mở thì FAB đã ẩn, nên chỉ cần lo lúc thu. */
@media(max-width:860px){ .tln-fab{ bottom:calc(74px + var(--sab)) } }
/* iPad · máy bảng (641–1024): ô chat rộng rãi hơn máy tính để bàn — một
   tay cầm ngang cần ô to hơn con trỏ chuột. Chỉ đổi kích thước ô nhỏ. */
@media(min-width:641px) and (max-width:1024px){
  :root{ --tln-rong:360px; --tln-cao:min(64vh,560px); }
}
/* Điện thoại: ô nhỏ thành tấm gần kín ngang, neo đáy — cân đối tỷ lệ theo
   màn thay vì giữ 300px cứng. Phóng full thì kín cả màn. */
@media(max-width:640px){
  .tln-panel{ right:calc(10px + var(--sar)); left:calc(10px + var(--sal));
    bottom:calc(10px + var(--sab)); width:auto; height:min(72dvh,540px); max-width:none }
  .tln-mini .tln-panel{ right:calc(10px + var(--sar)); left:auto }
  .tln-to .tln-panel{ inset:0 }
}

/* ══ VIDEO HƯỚNG DẪN — trình chiếu chạy trong app ══ */
#hdp{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.hdp-nen{position:absolute;inset:0;background:var(--nen-mo);backdrop-filter:blur(8px)}
.hdp-khung{position:relative;width:min(600px,100%);max-height:calc(100dvh - 32px);overflow:auto;
  background:var(--surface);border:1px solid var(--gita-vien-2);border-radius:var(--r-lg);
  box-shadow:var(--noi-2);padding:16px 18px;animation:hdpVao .28s ease}
@keyframes hdpVao{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Phóng to — gần kín màn. Thu nhỏ — khung cố định góc phải, xem mà vẫn thao tác được. */
#hdp.hdp-to .hdp-khung{width:min(920px,100%);max-height:calc(100dvh - 24px)}
#hdp.hdp-to .hdp-hinh{height:180px}
#hdp.hdp-nho{pointer-events:none;padding:0}
#hdp.hdp-nho .hdp-khung{pointer-events:auto;position:fixed;right:calc(14px + var(--sar));
  bottom:calc(14px + var(--sab));width:min(340px,86vw);max-height:64vh;padding:12px 14px}
#hdp.hdp-nho .hdp-hinh{height:64px}
#hdp.hdp-nho .hdp-chan,#hdp.hdp-nho .hdp-canh-so{display:none}
.hdp-dau{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.hdp-logo{flex:none;display:flex;align-items:center}
.hdp-logo img{height:26px;width:auto;display:block}
.hdp-vai{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.hdp-vai b{font-size:14.5px;color:var(--gita-ink)}
.hdp-vai span{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdp-nho-nut{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg-1);color:var(--ink-3);cursor:pointer;display:grid;place-items:center;font-size:14.5px}
.hdp-nho-nut svg{width:15px;height:15px}
.hdp-x{flex:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg-1);color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.hdp-x svg{width:15px;height:15px}
.hdp-canh{min-height:150px;padding:14px 2px 4px}
.hdp-canh-so{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
/* Khung hình có màu theo --ac của cảnh — hệ hình ảnh màu sắc. */
.hdp-hinh{height:118px;border-radius:14px;margin-bottom:12px;display:grid;place-items:center;
  background:var(--phu-2);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 26%,transparent),color-mix(in srgb,var(--ac) 7%,transparent));
  border:1px solid var(--line);border-color:color-mix(in srgb,var(--ac) 30%,var(--line))}
.hdp-hinh-ic{color:var(--ac)}
.hdp-hinh-ic svg{width:46px;height:46px}
/* Cây bút viết tiêu đề — chữ hiện dần, bút lướt theo. */
.hdp-viet{position:relative;display:block;margin-bottom:4px}
.hdp-viet-chu{display:inline-block;clip-path:inset(0 0 0 0);animation:hdpHien 1s ease both}
@keyframes hdpHien{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.hdp-but{position:absolute;top:-4px;left:0;animation:hdpBut 1.05s ease both}
@keyframes hdpBut{from{left:0}to{left:calc(100% - 16px)}}
.hdp-td{font-size:21px;font-weight:800;color:var(--gita-ink);line-height:1.3}
.hdp-loi{font-size:14.5px;line-height:1.72;color:var(--ink)}
/* Sơ đồ quy trình — nối các nhiệm vụ. */
.hdp-so{display:flex;flex-direction:column;margin:12px 0}
.hdp-so-o{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--line);
  border-left:3px solid var(--ac);border-radius:10px;background:var(--phu-1)}
.hdp-so-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ac);color:#fff;
  display:grid;place-items:center;font-size:12.5px;font-weight:700}
.hdp-so-o p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.hdp-so-noi{width:2px;height:12px;background:var(--line);margin:2px 0 2px 24px;position:relative}
.hdp-so-noi svg{position:absolute;left:-8px;bottom:-5px;width:13px;height:13px;color:var(--ac);transform:rotate(90deg)}
/* Callout: giải thích · ví dụ · KPI · bài mẫu · cách hay. */
.hdp-goi{border-radius:10px;padding:10px 13px;margin:12px 0;border:1px solid var(--line);background:var(--phu-1)}
.hdp-goi-nhan{display:block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.hdp-goi p{font-size:14.5px;line-height:1.65;color:var(--ink)}
.hdp-giai{border-left:3px solid var(--t3)} .hdp-giai .hdp-goi-nhan{color:var(--t3)}
.hdp-vd{border-left:3px solid var(--t2)} .hdp-vd .hdp-goi-nhan{color:var(--t2)}
.hdp-kpi{border-left:3px solid var(--t4)} .hdp-kpi .hdp-goi-nhan{color:var(--t4)}
.hdp-mau{border-left:3px solid var(--gita-sau);background:var(--phu-2)} .hdp-mau .hdp-goi-nhan{color:var(--gita-ink)}
.hdp-cach{border-left:3px solid var(--t5)} .hdp-cach .hdp-goi-nhan{color:var(--t5)}
.hdp-cach ol{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.hdp-cach li{font-size:14.5px;line-height:1.55;color:var(--ink)}
.hdp-cach-mo{font-size:12.5px;color:var(--ink-3);margin-top:8px;font-style:italic}
.hdp-vinh{border-left:3px solid var(--t4);background:var(--phu-2)} .hdp-vinh .hdp-goi-nhan{color:var(--t4)}
/* Hội thoại nhập vai — bong bóng hai bên. */
.hdp-ht{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.hdp-ht-o{max-width:82%;padding:8px 12px;border-radius:14px;border:1px solid var(--line)}
.hdp-ht-o p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.hdp-ht-ai{display:block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-4);margin-bottom:2px}
.hdp-ht-a{align-self:flex-start;background:var(--phu-1);border-bottom-left-radius:5px}
.hdp-ht-b{align-self:flex-end;background:color-mix(in srgb,var(--gita) 12%,var(--surface));
  border-color:var(--gita-vien-1);border-bottom-right-radius:5px}
/* Mục lục (bìa) — chào mừng + danh sách mục. */
.hdp-chao{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:6px 0 14px}
.hdp-chao img{height:44px;width:auto}
.hdp-chao-viet{position:relative;display:inline-block;font-size:16px;font-weight:700;color:var(--gita-ink);line-height:1.5;max-width:100%}
.hdp-muc-tieu{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:4px 0 10px}
.hdp-muc-tieu svg{width:15px;height:15px}
.hdp-muc-ds{display:flex;flex-direction:column;gap:9px}
.hdp-muc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-1);cursor:pointer}
.hdp-muc:hover{border-color:var(--gita-vien-1);background:var(--phu-1)}
.hdp-muc-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gita-sau);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14.5px}
.hdp-muc-t{flex:1;min-width:0;display:flex;flex-direction:column}
.hdp-muc-t b{font-size:14.5px;color:var(--gita-ink)}
.hdp-muc-t span{font-size:12.5px;color:var(--ink-4)}
.hdp-muc>svg{flex:none;width:16px;height:16px;color:var(--ink-4)}
.hdp-cham-hang{display:flex;gap:7px;justify-content:center;padding:12px 0;flex-wrap:wrap}
.hdp-cham{width:8px;height:8px;border-radius:50%;background:var(--line)}
.hdp-cham.on{background:var(--gita);transform:scale(1.25)}
.hdp-cham.qua{background:var(--gita-vien-1)}
.hdp-dieu{display:flex;gap:9px;align-items:center;justify-content:center;padding-top:6px;flex-wrap:wrap}
.hdp-nut{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;
  border-radius:99px;border:1px solid var(--line);background:var(--bg-1);color:var(--ink);
  cursor:pointer;font-size:14.5px;font-weight:600}
.hdp-nut svg{width:16px;height:16px}
.hdp-nut[data-hd="lui"] svg{transform:rotate(180deg)}
.hdp-nut.pri{background:var(--gita-sau);color:#fff;border-color:var(--gita-sau)}
.hdp-nut:disabled{opacity:.4;cursor:default}
.hdp-chan{font-size:10.5px;color:var(--ink-4);text-align:center;margin-top:12px;line-height:1.5}
.hd-nut{margin-top:8px}
/* Dải "Xem video hướng dẫn màn này" ở đầu mỗi màn. */
.hd-thanh{margin:0 0 14px}
.hd-thanh .hd-nut{margin-top:0;display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:99px;border:1px solid var(--gita-vien-1);
  background:var(--gita-mo-1);color:var(--gita-ink);font-weight:700;font-size:14.5px;cursor:pointer}
.hd-thanh .hd-nut:hover{background:var(--gita-mo-2);border-color:var(--gita-vien-2)}
.hd-thanh .hd-nut svg{width:15px;height:15px}
body.hdp-khoa{overflow:hidden}

/* ── TẮT chuyển động khi máy xin giảm ── */
@media(prefers-reduced-motion:reduce){
  .view,.nha-luoi-8>*,.dp-mien>*,.nha-bd-o,.cd-loc-o,.hdp-khung{animation:none}
  /* Vòng bánh đà KHÔNG tắt ở đây: khi máy xin giảm chuyển động nó quay chậm
     (luật duy nhất nằm trong khối @container nhaVong). Ba bản chép của cùng
     một luật từng nằm ở ba chỗ — gom về một để không có ngày lệch nhau. */
  [data-v],.nav-i,.chip,.tbtn,.btn,.nha-o,.dp-mien-o,.dp-tl-o,.cd-loc-o,.val,.cd-chitiet,.dp-luat-o,.tln-fab,#left,#right{transition:none}
  .tln-fab::after,.tln-fab-cham,.ch-soan .soan-cham i{animation:none}
  .nha-o:hover,.dp-mien-o:hover,.val:hover,.dp-luat-o:hover{transform:none}
  .hdp-cham.on{transform:none}
  .hdp-viet-chu{animation:none;clip-path:none}
  .hdp-but{display:none}
}

/* ═══════════ NÂNG CẤP KHUNG · CHIỀU SÂU · PHỐI MÀU (9.99.238-tk) ═══════════
   Theo yêu cầu: "hệ thống bảng có khung rõ ràng, hiển thị hình 3D với phối
   màu cân đối". Nguyên tắc: chỉ dùng thẻ màu sẵn có (tự đổi theo nền sáng/tối)
   và color-mix trên thẻ màu thương hiệu — KHÔNG mã màu đen gõ tay, KHÔNG lớp
   phủ trắng thô. Nâng ở lớp thành phần dùng chung nên MỌI bảng/thẻ/ô số của
   toàn hệ đều được nâng một lượt, không dựng riêng cho đẹp từng chỗ. */

/* ── BẢNG: khung rõ ràng — đầu bảng có dải nền + gạch chân đậm, kẻ dọc từng
      cột, sọc chẵn cho dễ dò hàng (cảm giác bảng vận hành, không phải danh
      sách trơn). ── */
.tbl-wrap{border-color:var(--line-2);box-shadow:var(--noi-2)}
.tbl th{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--gita) 8%, var(--surface)),
    color-mix(in srgb,var(--gita) 2%, var(--surface)));
  border-bottom:2px solid color-mix(in srgb,var(--gita) 34%, var(--line-2));
  border-right:1px solid var(--phu-2);
  color:var(--gita-ink)}
.tbl th:last-child{border-right:0}
.tbl tbody td{border-right:1px solid var(--phu-2)}
.tbl tbody td:last-child{border-right:0}
.tbl tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 3%, transparent)}
.tbl tbody tr:hover{background:var(--gita-mo-1)}

/* ── THẺ: nổi khối 3D bằng bóng nhiều lớp (bóng nền mềm + bóng tiếp xúc
      ánh thương hiệu). Rê chuột thì nâng cao hơn — chiều sâu có phản hồi. ── */
.card{box-shadow:var(--noi-1), 0 2px 7px -3px color-mix(in srgb,var(--gita) 22%, transparent)}
.card.lift:hover{box-shadow:var(--noi-2), 0 12px 26px -12px color-mix(in srgb,var(--gita) 30%, transparent)}

/* ── Ô SỐ (chỉ số buồng lái): mặt hơi loang sáng ở đỉnh, viền trên là dải
      thương hiệu để cả cụm ô số cân màu với nhau, khối nổi 3D rõ. ── */
.stat{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--gita) 5%, var(--surface)), var(--surface));
  border-color:var(--line-2);
  border-top:3px solid color-mix(in srgb,var(--gita) 62%, var(--surface));
  box-shadow:var(--noi-1), 0 2px 6px -2px color-mix(in srgb,var(--gita) 20%, transparent)}
.stat:hover{transform:translateY(-3px);
  box-shadow:var(--noi-2), 0 16px 32px -14px color-mix(in srgb,var(--gita) 34%, transparent)}

/* ── Ô hai bên "từ → đến" (so cặp): giữ ý nghĩa đỏ/xanh nhưng thêm chiều
      sâu để khớp ngôn ngữ khối 3D chung. ── */
.ba .side{box-shadow:var(--noi-1)}

/* ── QUY TRÌNH: khung sơ đồ vận hành kiểu bảng (MISA/CloudGO) — cả dòng
      chảy nằm trong một khung có tiêu đề, các bước nối nhau bằng mũi tên. ── */
.crm-qt{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--noi-2), 0 2px 8px -3px color-mix(in srgb,var(--gita) 22%, transparent);
  overflow:hidden;margin:6px 0 16px}
.crm-qt-dau{display:flex;align-items:center;gap:9px;padding:13px 18px;
  border-bottom:2px solid color-mix(in srgb,var(--gita) 26%, var(--line-2));
  background:linear-gradient(180deg, color-mix(in srgb,var(--gita) 8%, var(--surface)), var(--surface))}
.crm-qt-dau svg{width:18px;height:18px;color:var(--gita);flex:none}
.crm-qt-dau b{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--gita-ink)}
.crm-qt-dau span{font-size:12px;color:var(--ink-4)}
.crm-qt-luong{margin:0;padding:18px;align-items:stretch}
/* mũi tên nối giữa hai bước — nằm trong khe, mất ở bước cuối */
.crm-qt-luong .crm-ht-buoc:not(:last-child)::after{content:'\203A';position:absolute;
  right:-13px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:900;line-height:1;
  color:color-mix(in srgb,var(--gita) 55%, transparent);z-index:3;pointer-events:none}
.crm-qt-luong .crm-ht-buoc{background:linear-gradient(180deg,
  color-mix(in srgb,var(--gita) 4%, var(--bg-1)), var(--bg-1));box-shadow:var(--noi-1)}
/* hàng bước có nội dung dày (M1→M4…): thẻ + mũi tên là phần tử flex riêng
   nên không bị .card cắt mất mũi tên */
.crm-qt-hang{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;padding:18px}
.crm-qt-the{flex:1 1 210px;min-width:200px;border:1px solid var(--line);border-radius:14px;
  padding:15px;box-shadow:var(--noi-1);
  background:linear-gradient(180deg, color-mix(in srgb,var(--gita) 4%, var(--bg-1)), var(--bg-1))}
.crm-qt-muiten{flex:0 0 auto;align-self:center;font-size:24px;font-weight:900;line-height:1;
  color:color-mix(in srgb,var(--gita) 55%, transparent)}

/* ── TRỢ LÝ GITA (ô chat nổi): tinh chỉnh đồng bộ với thiết kế mới —
      nút nổi có gradient thương hiệu, panel có đầu gradient, khối nổi rõ,
      to hơn chút cho dễ đọc tiếng Việt. Không tự mở, không che nội dung:
      chỉ là nút ở góc, bấm mới mở. ── */
:root{ --tln-rong:344px; --tln-cao:498px; }
.tln-fab{ background:linear-gradient(145deg, var(--gita), var(--gita-sau));
  border-radius:18px;
  box-shadow:var(--noi-2), 0 10px 24px -8px color-mix(in srgb,var(--gita) 60%, transparent) }
.tln-fab:hover{ transform:translateY(-3px);
  box-shadow:var(--noi-2), 0 16px 32px -10px color-mix(in srgb,var(--gita) 66%, transparent) }
.tln-panel{ border-color:var(--gita-vien-2); border-radius:var(--r-lg);
  box-shadow:var(--noi-2), 0 20px 48px -18px color-mix(in srgb,var(--gita) 46%, transparent) }
.tln-dau{ background:linear-gradient(135deg, var(--gita-ink), var(--gita-sau));
  border-bottom:none; padding:12px 14px }
.tln-dau .tln-ten b{ color:#fff }
.tln-dau .tln-duoi{ color:color-mix(in srgb,#fff 82%, var(--gita)) }
.tln-dau .tln-anh{ background:color-mix(in srgb,#fff 20%, transparent);
  border:1px solid color-mix(in srgb,#fff 30%, transparent); color:#fff }
.tln-dau .tln-nut{ color:color-mix(in srgb,#fff 88%, transparent) }
.tln-dau .tln-nut:hover{ background:color-mix(in srgb,#fff 16%, transparent) }
.tln-dau .tln-cham{ box-shadow:0 0 0 2px color-mix(in srgb,#fff 30%, transparent) }
/* bong bóng: AI có viền nhẹ cho rõ khung, của mình dùng gradient thương hiệu */
.ch-bong-ai{ border:1px solid var(--line); box-shadow:var(--noi-1) }
.ch-bong{ background:linear-gradient(135deg, var(--gita), var(--gita-sau)) }

/* ── TRỢ LÝ V50 · KHÔNG MÀU NỀN, CHỈ CHỮ ĐEN (chủ hệ 10/10/2026) ──
   Cố ý MỘT sắc ở cả chế độ sáng lẫn tối: nền trắng, chữ đen #111, viền
   xám mảnh để tách lượt. Chữ đen trên nền tối thì không đọc được, nên nền
   trắng đi kèm chữ đen ở MỌI chế độ — không phải quên chế độ tối.
   Đặt độ nặng bằng phạm vi (.ch-khung, .cs-lo, #tln) chứ không bằng
   !important: thắng luật thành phần mà vẫn đè lại được khi cần. */
.cs-lo .cs-win, .cs-lo .cs-dau, .cs-lo .cs-go, .cs-lo .cs-cuon, .cs-lo .cs-o,
#tln .tln-panel, #tln .tln-dau, #tln .tln-cuon, #tln .tln-go{ background:#fff; color:#111 }
#tln .tln-panel{ border-color:#d4d4d4; box-shadow:0 12px 32px -14px rgba(0,0,0,.35) }
#tln .tln-dau{ border-bottom:1px solid #e5e5e5 }
#tln .tln-dau .tln-ten b, #tln .tln-dau .tln-duoi, #tln .tln-dau .tln-nut{ color:#111 }
#tln .tln-dau .tln-nut:hover{ background:transparent; text-decoration:underline }
#tln .tln-dau .tln-anh, .cs-lo .cs-anh, .ch-khung .ch-anh{ background:transparent; color:#111;
  border:1px solid #d4d4d4; box-shadow:none }
.ch-khung .ch-bong, .ch-khung .ch-bong-ai{ background:transparent; color:#111; box-shadow:none }
.ch-khung .ch-bong{ border:1px solid #d4d4d4 }
.ch-khung .ch-bong-ai{ border:0; padding-left:2px; padding-right:2px }
.ch-khung .ch-bong *:not(.btn):not(.btn *):not(i){ background:transparent; color:#111 }
.ch-khung .ch-bong .btn{ background:#fff; color:#111; border:1px solid #9a9a9a }
.ch-khung .ai-khan{ border:1px solid #111; border-left:4px solid #b42318 }
.ch-khung .cs-vach{ background:transparent; color:#444; border-color:#e5e5e5 }
.ch-khung .cs-gio{ color:#555; opacity:1 }
.ch-khung .soan-cham i{ background:#111 }
.cs-lo .cs-o, #tln .tln-go textarea{ border-color:#bdbdbd }
.cs-lo .cs-o textarea, #tln .tln-go textarea{ background:#fff; color:#111 }
.cs-lo .cs-o textarea::placeholder, #tln .tln-go textarea::placeholder{ color:#666 }
.cs-lo .cs-meo, .cs-lo .cs-duoi, .cs-lo .cs-ten b{ color:#111 }
.cs-lo .cs-nut, .cs-lo .cs-nut.pri, #tln .tln-gui{ background:#fff; border:1px solid #9a9a9a; color:#111 }
#tln.tln-mini .tln-panel::after{ color:#444 }

/* ── SƠ ĐỒ KIẾN TRÚC CRM (kiểu CRMOnline): Người dùng · 3 cột · Dữ liệu ── */
.crm-so{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--noi-2), 0 2px 8px -3px color-mix(in srgb,var(--gita) 20%, transparent);
  padding:18px;margin:6px 0 16px;display:flex;flex-direction:column;gap:14px}
.crm-so-nhom{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.crm-so-nhan{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--gita-ink),var(--gita-sau));padding:7px 13px;border-radius:99px}
.crm-so-nguoi,.crm-so-du{display:flex;flex-wrap:wrap;gap:9px;flex:1}
.crm-so-u{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-1);font-size:13px;font-weight:700;color:var(--gita-ink);box-shadow:var(--noi-1)}
.crm-so-u-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--gita-mo-2);color:var(--gita-ink)}
.crm-so-u-ic svg{width:15px;height:15px}
.crm-so-hang{display:grid;grid-template-columns:1fr auto 1.9fr auto 1fr;gap:10px;align-items:stretch}
.crm-so-cot{border:1px solid var(--line);border-radius:14px;background:var(--bg-1);padding:13px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--noi-1)}
.crm-so-cot-dau{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:var(--gita-ink);padding-bottom:7px;border-bottom:2px solid color-mix(in srgb,var(--gita) 22%, var(--line))}
.crm-so-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.crm-so-item svg{width:16px;height:16px;color:var(--gita);flex:none}
.crm-so-muiten{align-self:center;display:grid;place-items:center;color:color-mix(in srgb,var(--gita) 60%, transparent)}
.crm-so-muiten svg{width:22px;height:22px}
.crm-so-giua{border:1px solid var(--gita-vien-2);border-radius:14px;overflow:hidden;
  box-shadow:var(--noi-2), 0 3px 10px -4px color-mix(in srgb,var(--gita) 30%, transparent);display:flex;flex-direction:column}
.crm-so-giua-dau{display:flex;align-items:center;gap:8px;padding:12px 14px;
  background:linear-gradient(135deg,var(--gita-ink),var(--gita-sau));color:#fff;font-weight:800;font-size:14.5px}
.crm-so-giua-dau svg{width:18px;height:18px}
.crm-so-giua-than{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px;flex:1;align-content:start}
.crm-so-b{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border-radius:11px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gita) 4%, var(--bg-1)),var(--bg-1));border:1px solid var(--line)}
.crm-so-b-so{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-weight:800;font-size:12px;background:var(--gita);color:#fff}
.crm-so-b b{font-size:13px;display:block;color:var(--gita-ink);line-height:1.25}
.crm-so-b span{font-size:11.5px;color:var(--ink-4);line-height:1.4}
.crm-so-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:99px;
  background:var(--gita-mo-1);border:1px solid var(--gita-vien-1);font-size:12px;font-weight:600;color:var(--gita-ink)}
.crm-so-chip svg{width:12px;height:12px;color:var(--gita);flex:none}
@media(max-width:860px){
  .crm-so-hang{grid-template-columns:1fr}
  .crm-so-muiten{transform:rotate(90deg)}
  .crm-so-giua-than{grid-template-columns:1fr}
}
/* Nhãn CHẶNG có màu (bảng Deals kiểu FAST/Zoho) + cột tiền căn phải */
.crm-stage{display:inline-block;padding:3px 12px;border-radius:99px;font-size:11.5px;font-weight:800;
  white-space:nowrap;line-height:1.5;color:var(--sc);
  background:color-mix(in srgb, var(--sc) 15%, var(--surface));
  border:1px solid color-mix(in srgb, var(--sc) 42%, transparent)}
.crm-tien{display:block;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}

/* ── MÁY TỰ KIỂM 3 LƯỢT: ba lượt tính độc lập nối bằng dấu =, khớp cả ba
      thì đầu khung báo ĐẠT (xanh), lệch thì ô lệch viền đỏ + dấu ≠. ── */
.k3{border:1px solid var(--gita-vien-2);border-radius:var(--r-lg);overflow:hidden;margin:6px 0 16px;
  box-shadow:var(--noi-2), 0 2px 8px -3px color-mix(in srgb,var(--gita) 22%, transparent)}
.k3-dau{display:flex;align-items:center;gap:9px;padding:12px 16px;
  background:linear-gradient(135deg, var(--gita-ink), var(--gita-sau));color:#fff}
.k3-dau svg{width:18px;height:18px;flex:none}
.k3-dau b{font-size:14px;flex:1}
.k3-kl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:99px;white-space:nowrap}
.k3-kl svg{width:13px;height:13px}
.k3-kl.dat{background:color-mix(in srgb,#fff 22%, transparent);color:#fff}
.k3-kl.lech{background:var(--gita-do);color:#fff}
.k3-hang{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;padding:16px;background:var(--surface)}
.k3-o{flex:1 1 200px;min-width:186px;display:flex;gap:10px;padding:13px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--gita) 4%, var(--bg-1)), var(--bg-1));box-shadow:var(--noi-1)}
.k3-o.lech{border-color:var(--gita-do);background:color-mix(in srgb,var(--gita-do) 8%, var(--surface))}
.k3-so{flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:12px;background:var(--gita);color:#fff}
.k3-noidung b{font-size:12.5px;color:var(--gita-ink);display:block}
.k3-v{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin:2px 0}
.k3-mo{font-size:11px;color:var(--ink-4);line-height:1.4}
.k3-noi{flex:0 0 auto;align-self:center;font-size:20px;font-weight:900;color:var(--ok)}
.k3-noi.x{color:var(--gita-do)}
@media(max-width:760px){ .k3-noi{transform:rotate(90deg)} }

/* Khối Trang công khai (src/do-trang-cong-khai.js) — đầu màn Trung tâm đo lường. */
.dtc-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.dtc-so > div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.dtc-so b{font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.dtc-pheu{display:grid;gap:6px;margin:6px 0 14px}
.dtc-hang{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) 7.5em;gap:10px;align-items:center}
.dtc-hang > b{text-align:right}
.dtc-cot .dtc-hang{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 3.5em}
.dtc-vach{height:8px;border-radius:99px;background:var(--surface);overflow:hidden}
.dtc-vach i{display:block;height:100%;border-radius:99px;background:var(--gita)}
.dtc-cot{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.dtc-cot .dtc-hang{margin-bottom:6px}

/* Khối Việc kẹt (src/viec-ket.js) — đầu màn Trung tâm đo lường. */
.vk-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 8px}
.vk-so > div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.vk-so b{font-size:21px;color:var(--ink);font-variant-numeric:tabular-nums}
.vk-so .vk-do b{color:var(--gita-do)}
.vk-ds{display:grid;gap:6px}
.vk-hang{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.vk-dau{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;width:100%;min-height:40px;padding:6px 10px;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.vk-ten{font-weight:700;font-size:14.5px}
.vk-mo{padding:0 10px 10px}
.vk-mau{margin:4px 0 8px;padding-left:18px}
@media(max-width:600px){ .vk-dau{grid-template-columns:minmax(0,1fr) auto} .vk-dau .mono{grid-column:1 / -1;order:3} }

/* Ngăn Xưởng tài liệu (src/xuong-tai-lieu.js) — Vòng tự hoàn thiện. */
.xtl-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;align-items:end;margin-bottom:12px}
.xtl-o{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.xtl-o input,.xtl-o select{width:100%}
.xtl-rong{grid-column:1 / -1}
.xtl-chk{display:flex;gap:8px;align-items:center;font-size:12.5px;min-height:32px}
.xtl-bao{margin:0 0 10px}
.xtl-bo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.xtl-bo p{margin:2px 0 0}
.xtl-dsda{display:grid;gap:10px}
.xtl-da{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.xtl-xem{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.xtl-ds{margin:4px 0 10px;padding-left:20px}
.xtl-ch{margin:6px 0}
.xtl-ch summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center;gap:6px}
.xtl-van{white-space:pre-wrap;font-size:14.5px;line-height:1.6;max-height:420px;overflow:auto;padding:8px 0}
/* Ngân sách phim AI thật — src/phim-ngan-sach.js. Ba màu của ba loại cảnh
   lấy từ token thương hiệu, để thanh chia tiền đọc được ở cả hai nền. */
.pns-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 8px}
.pns-so > div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pns-so b{font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.pns-vach{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.pns-vach span{display:block;height:100%;background:var(--gita-sau,var(--ok))}
.pns-lap,.pns-giao{border:1px dashed var(--line);border-radius:12px;padding:8px 12px;margin:0 0 12px}
.pns-lap summary,.pns-giao summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
.pns-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0 10px}
.pns-da{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;background:var(--surface)}
.pns-dau{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:10px 12px;min-height:44px;cursor:pointer;color:var(--ink)}
.pns-ten{font-weight:700;flex:1 1 200px}
.pns-mo{padding:0 12px 12px}
.pns-h4{margin:12px 0 6px;font-size:14.5px}
.pns-thanh{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--line)}
.pns-dong{background:var(--gita-do)}
.pns-khau{background:var(--t3,var(--warn))}
.pns-tinh{background:var(--t1,var(--ink-4))}
.pns-chu{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:12.5px}
.pns-chu i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.pns-bang{overflow-x:auto}
.pns-bang td,.pns-bang th{font-variant-numeric:tabular-nums;white-space:nowrap}
.pns-sai td{background:var(--line);background:color-mix(in srgb,var(--gita-do) 8%,transparent)}
.pns-bn{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pns-bn li{border-left:3px solid var(--line);padding:2px 0 2px 10px}
.pns-dung{border:1px solid var(--gita-do);border-radius:10px;padding:8px 10px;margin:0 0 10px}
/* Thanh ngăn dùng chung — tám màn (crm · giam-sat · ke-toan-thue ·
   kho-tai-lieu · luat-giao-dien · quyen-nang-ai · tu-hoan-thien ·
   tu-nang-cap) dựng <div class="tabs"><button class="tab"> mà không có
   luật nào, nên nút rơi về kiểu mặc định của trình duyệt và nhãn dính
   liền nhau. Cùng dáng với .chip để cả app nói một ngôn ngữ ngăn. */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tabs .tab{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.tabs .tab svg{width:15px;height:15px}
.tabs .tab:hover{border-color:var(--gita-vien-2)}
.tabs .tab.on{background:var(--gita-mo-2);border-color:var(--gita-vien-2);color:var(--gold-ink)}
.tabs .tab:focus-visible{outline:2px solid var(--gita-vien-2);outline-offset:2px}
/* Mũi tên lịch sử màn — ← màn trước · → màn đang làm (src/app.js · G.lsLui/G.lsToi). */
.ls-cum{display:inline-flex;gap:6px;align-items:center;flex:none}
.tbtn.ls-nut[disabled]{opacity:.35;cursor:default}
/* THANH TRÊN KHÔNG ĐƯỢC ÉP NÚT (10/10/2026). Đo ra: ở 1024px thanh cần
   1064px, ở 390px cần 423px — trình duyệt co mỗi nút từ 38px xuống 21px
   (dưới ngưỡng chạm 32px) và đẩy ảnh đại diện ra ngoài mép; ô tìm kiếm thì
   gãy chữ gợi ý thành sáu dòng chồng lên thanh dưới. Ba bậc:
   · mọi khổ: nút không co (flex:none), chữ ô tìm kiếm cắt bằng dấu …
   · ≤1180px: ô tìm kiếm thu về một nút kính lúp, tên người ẩn (ảnh còn)
   · ≤600px: bỏ mũi tên "tới" (vuốt "lùi" mới là việc hay làm), thanh
     trượt ngang được thay vì ép nút — không chức năng nào bị bỏ. */
#top .tbtn,#top .who{flex:none}
#search{min-width:0}
#search span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1366px){
  #search{flex:0 0 38px;padding:0;justify-content:center}
  #search span,#search kbd{display:none}
}
@media(max-width:1180px){
  #top .who .tx,#top .brand .deskonly{display:none}
  #top .who{padding:4px}
}
@media(max-width:1000px){ #top > .chip{display:none} }
@media(max-width:600px){
  #top{gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  #top::-webkit-scrollbar{display:none}
  #top .tbtn{width:34px;height:34px}
  #top .brand{gap:6px}
  #top .ls-nut[data-act="ls-toi"]{display:none}
}
@media(max-width:420px){ #top .brand .mark{display:none} }
/* Dòng giải thích của bảng rỗng — U.tbl (src/ui.js). */
/* Tra cứu giải pháp · 13 mục (src/tra-cuu-giai-phap.js): danh sách bên trái, 13 mục bên phải; một cột trên điện thoại. */
.tcgp-lo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start}
.tcgp-ds{max-height:calc(100dvh - var(--top-tong) - 140px);overflow-y:auto;padding-right:4px}
.tcgp-khoa{opacity:.6;cursor:not-allowed}
.tcgp-mot.on{border-color:var(--gita);box-shadow:0 0 0 1px var(--gita)}
.tcgp-ds .inp{width:100%}
@media(max-width:860px){ .tcgp-lo{grid-template-columns:minmax(0,1fr)} .tcgp-ds{max-height:320px} }
.tbl td.tbl-rong{color:var(--ink-3);font-style:italic;text-align:left;white-space:normal}

@media(pointer:coarse){
  .chip{min-height:34px;padding-block:6px}
  select,select.inp{min-height:40px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .dk-dy input{width:20px;height:20px;margin-top:1px}
  /* Nhãn bọc ô tích LÀ vùng chạm thật — ô tích 20px nằm trong một nhãn
     cao 23px thì vẫn khó bấm. */
  label.dk-dy,label.row{min-height:36px;align-items:center}
  /* Hai bảng dày của quản trị: ma trận phân quyền 15 cột (570 ô) và
     danh sách sắp xếp (553 nút lên/xuống/xoá). Ô 21px và nút 26px thì
     chuột bấm trúng, ngón tay thì không — và "màn này chỉ quản trị
     dùng" không phải lý do, vì quản trị cũng cầm điện thoại.
     Cả hai bảng đã nằm trong hộp cuộn ngang, nên nới ô ra chỉ làm bảng
     rộng thêm BÊN TRONG hộp ấy, không đẩy trang lệch. */
  .pq-o{width:34px;height:34px}
  .sx-b{width:34px;height:34px}
  /* ── iOS TỰ PHÓNG CẢ TRANG KHI CHẠM VÀO Ô NHẬP DƯỚI 16px ──
     Luật của Safari trên iPhone, không tắt được bằng cách nào khác:
     chạm vào một ô chữ nhỏ hơn 16px thì nó phóng cả trang lên cho dễ
     gõ — và KHÔNG thu lại khi gõ xong. Ô của kho này là 14,5px, nên
     mỗi lần chạm vào một ô là cả ứng dụng nhảy to lên một nấc và
     người dùng phải tự chụm ngón tay thu về.
     16px đã có sẵn trong thang chín bậc cỡ chữ, nên dòng này không
     thêm bậc mới. */
  /* PHẢI DÙNG !important, và đây là chỗ đáng dùng. Đo lần đầu vẫn còn
     tám ô ở 14,5px và 12,5px: mấy ô ấy ăn theo luật của thành phần —
     `.ch-go input`, `.cs-o textarea` — nặng hơn một luật chỉ có tên thẻ.
     Chạy theo từng luật ấy để nâng độ nặng là một danh sách không có
     điểm dừng, và mỗi thành phần mới sau này lại lọt.
     Con số 16 ở đây không phải một ý thích về thẩm mỹ: nó là ngưỡng
     CỨNG của Safari trên iPhone. Một luật của nền tảng thì thắng mọi
     luật của thành phần — đó đúng là nghĩa của !important. */
  input,textarea,select,.inp{font-size:16px!important}

  /* ── BẢNG CUỘN NGANG PHẢI NÓI RA LÀ NÓ CUỘN ĐƯỢC ──
     Trên máy tính, con lăn nghiêng và thanh cuộn nói hộ. Trên điện
     thoại thì không có gì cả: bảng bị cắt ở mép phải trông y hệt một
     bảng chỉ có bấy nhiêu cột, và người đọc kết luận là thiếu dữ liệu
     chứ không nghĩ tới chuyện vuốt ngang.
     Hai vệt mờ ở hai mép chỉ hiện khi CÒN chỗ để cuộn về phía ấy —
     làm được nhờ background-attachment:local. Hết chỗ thì vệt biến
     mất, nên nó không bao giờ nói dối. */
  .tbl-wrap{
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) 0 0,
      linear-gradient(to left,  var(--surface) 30%, transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%, var(--nen-mo), transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%, var(--nen-mo), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:40px 100%, 40px 100%, 13px 100%, 13px 100%;
    background-attachment:local, local, scroll, scroll;
  }

  /* Cuộn hết ngăn kéo thì DỪNG, đừng kéo luôn trang phía sau. Không có
     dòng này thì vuốt tới đáy danh sách bên trái là trang nền trôi
     theo, và đóng ngăn kéo ra thì đã mất chỗ đang đọc. */
  #left,#right,.ch-khung,.cs-cuon,.tbl-wrap{overscroll-behavior:contain}

  /* ── XƯỞNG DỰNG VIDEO: NHÃN BỌC Ô LÀ VÙNG CHẠM THẬT ──
     do-khung-man (9.99.94) bắt "nút" dưới 32px ở màn studio, nhưng thứ
     nó đo là NHÃN bọc ngoài (`el.closest('label')`), không phải ô nhập.
     Ô nhập tự nó đã cao 34px; cái 20px là cái <label> BARE bọc quanh nó
     — `display:inline` nên hộp nhãn chỉ cao bằng dòng chữ "Chủ đề", còn
     ô inline-block 34px bên trong không kéo hộp nhãn cao lên. Các màn
     khác thoát vì nhãn của chúng mang lớp (`label.row`, `label.dk-dy`)
     đã được khối này nâng sẵn ở trên; nhãn studio không mang lớp nào.
     Chữa ở NHÃN, không chỉ ở ô: nhãn LÀ vùng chạm — chạm vào chữ cũng
     nhảy vào ô — nên nhãn phải cao ≥34px như chính bài học 9.99.51 đã
     ghi ("đo VÙNG CHẠM chứ không đo cái ô vuông"). Chỉ trong .man-xu,
     chỉ trên màn chạm; cỡ chữ để thang chín bậc lo. */
  .man-xu label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:34px}
  /* Thanh kéo range KHÔNG nghe `min-height` — chiều cao của nó do track
     trong shadow DOM quyết, nên phải đặt `height` thẳng. */
  .man-xu input[type=range]{height:34px}
  .man-xu input[type=text],.man-xu input[type=number],.man-xu input[type=file]{min-height:34px}
}

/* ── MÁY YẾU (src/nang-luc-may.js gắn html[data-may="yeu"]) ──
   Tắt chuyển động và lớp làm mờ nền — hai thứ ăn GPU nhiều nhất trên
   điện thoại cũ. Bố cục và nội dung giữ nguyên. */
html[data-may="yeu"] *,html[data-may="yeu"] *::before,html[data-may="yeu"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}


/* ═══════════════════════════════════════════════════════════════
   BÀN CỜ TỔNG — màn ban-co-tong (dạng THANH TAB). Chỉ thêm, không đè.
   Dùng token sẵn có (--surface,--ink,--line,--phu-*,--gita-*) nên tự
   theo nền sáng/tối. Màu khoang/chặng truyền qua biến --kc trên thẻ.
   Tab chạy bằng ô radio ẩn + bộ chọn ~ (CSS thuần, không JS).
   ═══════════════════════════════════════════════════════════════ */
.bct-rolebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--gita-sau),var(--gita));color:#fff;
  border-radius:var(--r);padding:14px 18px;margin:4px 0 12px;box-shadow:0 10px 30px var(--gita-mo-3)}
.bct-rb-who b{font-size:16px;font-weight:800;display:block}
.bct-rb-who span{font-size:12px;opacity:.9}
.bct-rb-nums{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.bct-rb-s{background:rgba(255,255,255,.16);border-radius:12px;padding:7px 13px;text-align:center}
.bct-rb-s b{display:block;font-size:18px;font-weight:800;line-height:1}
.bct-rb-s small{font-size:9.5px;opacity:.9;letter-spacing:.3px}

.bct-note{display:flex;gap:11px;align-items:flex-start;background:var(--gita-mo-1);
  border:1px solid var(--gita-vien-1);border-radius:14px;padding:11px 14px;margin:0 0 14px}
.bct-note-i{color:var(--gita-ink);flex:none;display:flex}
.bct-note p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.bct-note b{color:var(--gita-ink)}

/* ── Thanh Tab ── */
.bct-tabwrap{position:relative}
.bct-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.bct-tabbar{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bct-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--ink-3);transition:border-color .12s,color .12s,background .12s;flex:none}
.bct-tab:hover{border-color:var(--kc);color:var(--ink)}
.bct-tab-no{width:22px;height:22px;border-radius:7px;background:var(--kc);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;flex:none}
.bct-tab-t{max-width:40vw;overflow:hidden;text-overflow:ellipsis}
.bct-tab-c{font-size:11px;font-weight:800;background:var(--phu-3);color:var(--ink-2);
  border-radius:20px;padding:2px 8px}
.bct-radio:focus-visible + .bct-tabbar{outline:2px solid var(--gita);outline-offset:2px;border-radius:12px}

.bct-panel{display:none;animation:bctFade .18s ease}
@keyframes bctFade{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:none}}
.bct-panel-h{display:flex;flex-direction:column;gap:2px;padding:4px 2px 12px;position:relative;padding-left:14px}
.bct-panel-h::before{content:"";position:absolute;left:0;top:5px;bottom:12px;width:5px;border-radius:4px;background:var(--kc)}
.bct-panel-h b{font-size:15px;font-weight:800;color:var(--ink)}
.bct-panel-h small{font-size:12px;color:var(--ink-4);line-height:1.45}
.bct-prem{color:var(--gita);font-size:12px;letter-spacing:1px}

.bct-os{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.bct-o{position:relative;text-align:left;border:1px solid var(--line);border-radius:12px;
  padding:9px 10px 10px;background:var(--surface);cursor:pointer;min-height:64px;
  display:flex;flex-direction:column;gap:3px;transition:transform .12s,box-shadow .12s,border-color .12s}
.bct-o:hover{transform:translateY(-2px);border-color:var(--kc);box-shadow:0 8px 20px var(--phu-3)}
.bct-o:focus-visible{outline:2px solid var(--gita);outline-offset:2px}
.bct-no{font-size:10.5px;font-weight:800;color:var(--kc);letter-spacing:.3px}
.bct-ct{font-size:11.8px;font-weight:600;color:var(--ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bct-star{position:absolute;top:7px;right:8px;font-size:10px;color:var(--gita)}

/* Hiện panel + sáng tab theo ô radio đang chọn (6 khoang g1..g6, 5 chặng c1..c5) */
#bct-g1:checked ~ .bct-panels #p-g1,#bct-g2:checked ~ .bct-panels #p-g2,
#bct-g3:checked ~ .bct-panels #p-g3,#bct-g4:checked ~ .bct-panels #p-g4,
#bct-g5:checked ~ .bct-panels #p-g5,#bct-g6:checked ~ .bct-panels #p-g6,
#bct-c1:checked ~ .bct-panels #p-c1,#bct-c2:checked ~ .bct-panels #p-c2,
#bct-c3:checked ~ .bct-panels #p-c3,#bct-c4:checked ~ .bct-panels #p-c4,
#bct-c5:checked ~ .bct-panels #p-c5{display:block}
#bct-g1:checked ~ .bct-tabbar label[for="bct-g1"],#bct-g2:checked ~ .bct-tabbar label[for="bct-g2"],
#bct-g3:checked ~ .bct-tabbar label[for="bct-g3"],#bct-g4:checked ~ .bct-tabbar label[for="bct-g4"],
#bct-g5:checked ~ .bct-tabbar label[for="bct-g5"],#bct-g6:checked ~ .bct-tabbar label[for="bct-g6"],
#bct-c1:checked ~ .bct-tabbar label[for="bct-c1"],#bct-c2:checked ~ .bct-tabbar label[for="bct-c2"],
#bct-c3:checked ~ .bct-tabbar label[for="bct-c3"],#bct-c4:checked ~ .bct-tabbar label[for="bct-c4"],
#bct-c5:checked ~ .bct-tabbar label[for="bct-c5"]{background:var(--kc);border-color:var(--kc);color:#fff}
#bct-g1:checked ~ .bct-tabbar label[for="bct-g1"] .bct-tab-c,#bct-g2:checked ~ .bct-tabbar label[for="bct-g2"] .bct-tab-c,
#bct-g3:checked ~ .bct-tabbar label[for="bct-g3"] .bct-tab-c,#bct-g4:checked ~ .bct-tabbar label[for="bct-g4"] .bct-tab-c,
#bct-g5:checked ~ .bct-tabbar label[for="bct-g5"] .bct-tab-c,#bct-g6:checked ~ .bct-tabbar label[for="bct-g6"] .bct-tab-c,
#bct-c1:checked ~ .bct-tabbar label[for="bct-c1"] .bct-tab-c,#bct-c2:checked ~ .bct-tabbar label[for="bct-c2"] .bct-tab-c,
#bct-c3:checked ~ .bct-tabbar label[for="bct-c3"] .bct-tab-c,#bct-c4:checked ~ .bct-tabbar label[for="bct-c4"] .bct-tab-c,
#bct-c5:checked ~ .bct-tabbar label[for="bct-c5"] .bct-tab-c{background:rgba(255,255,255,.26);color:#fff}
#bct-g1:checked ~ .bct-tabbar label[for="bct-g1"] .bct-tab-no,#bct-g2:checked ~ .bct-tabbar label[for="bct-g2"] .bct-tab-no,
#bct-g3:checked ~ .bct-tabbar label[for="bct-g3"] .bct-tab-no,#bct-g4:checked ~ .bct-tabbar label[for="bct-g4"] .bct-tab-no,
#bct-g5:checked ~ .bct-tabbar label[for="bct-g5"] .bct-tab-no,#bct-g6:checked ~ .bct-tabbar label[for="bct-g6"] .bct-tab-no,
#bct-c1:checked ~ .bct-tabbar label[for="bct-c1"] .bct-tab-no,#bct-c2:checked ~ .bct-tabbar label[for="bct-c2"] .bct-tab-no,
#bct-c3:checked ~ .bct-tabbar label[for="bct-c3"] .bct-tab-no,#bct-c4:checked ~ .bct-tabbar label[for="bct-c4"] .bct-tab-no,
#bct-c5:checked ~ .bct-tabbar label[for="bct-c5"] .bct-tab-no{background:rgba(255,255,255,.26)}
@media(max-width:640px){.bct-tab-t{max-width:33vw}}
/* Bàn cờ 365 ngày nhúng dưới ngôi nhà */
.nha-banco-hd{margin-top:34px}
.nha-banco{margin-top:4px}

/* ═══════════════════════════════════════════════════════════════
   BẢNG CÔNG VIỆC CHI TIẾT (CRM) — man-cong-viec. Chỉ thêm, không đè.
   Toggle Bảng/Cột bằng ô radio ẩn + bộ chọn ~ (CSS thuần).
   ═══════════════════════════════════════════════════════════════ */
.cvt-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.cvt-seg{display:inline-flex;gap:3px;background:var(--phu-2);border:1px solid var(--line);
  border-radius:12px;padding:3px;margin:2px 0 14px}
.cvt-seg label{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.cvt-seg label:hover{color:var(--ink)}
.cvt-panel{display:none}
#cvDang-bang:checked ~ #cvt-p-bang{display:block}
#cvDang-cot:checked ~ #cvt-p-cot{display:block}
#cvDang-bang:checked ~ .cvt-seg label[for="cvDang-bang"],
#cvDang-cot:checked ~ .cvt-seg label[for="cvDang-cot"]{background:var(--surface);color:var(--gita-ink);box-shadow:0 1px 3px var(--phu-3)}

.cvt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);-webkit-overflow-scrolling:touch}
.cvt-table{border-collapse:separate;border-spacing:0;width:100%;min-width:1040px;font-size:12.5px}
.cvt-table thead th{position:sticky;top:0;z-index:2;text-align:left;font-size:11px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;padding:11px 12px;white-space:nowrap;
  color:#fff;background:var(--cc);border-right:1px solid rgba(255,255,255,.18)}
.cvt-table thead th:last-child{border-right:0}
.cvt-table tbody td{padding:11px 12px;border-top:1px solid var(--line);border-right:1px solid var(--line-2);
  vertical-align:top;color:var(--ink-2);line-height:1.5}
.cvt-table tbody td:last-child{border-right:0}
.cvt-table tbody tr:nth-child(even){background:var(--phu-1)}
.cvt-table tbody tr:hover{background:var(--gita-mo-1)}
.cvt-stt{text-align:center;font-weight:800;color:var(--ink-4);font-variant-numeric:tabular-nums;width:46px}
.cvt-ten{font-size:13px;color:var(--ink);display:block;line-height:1.35}
.cvt-mo{margin-top:3px;line-height:1.5;max-width:260px}
.cvt-table td:nth-child(3){min-width:210px;max-width:300px}
.cvt-table td:nth-child(4){min-width:180px;max-width:250px}
.cvt-table td:nth-child(6){min-width:170px;max-width:260px}
.cvt-trang{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;
  color:#fff;background:var(--tc);border-radius:20px;padding:4px 10px;white-space:nowrap}
.cvt-tre{color:#BE0E16;font-weight:700}
.cvt-acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.cvt-act{padding:5px 9px !important;font-size:11px !important;min-height:0 !important}
.cvt-bc{font-size:11.5px;color:var(--ink-3);background:var(--phu-2);border-radius:9px;
  padding:7px 9px;line-height:1.5;max-height:92px;overflow:auto}
.cvt-kpi{text-align:center;white-space:nowrap}
.cvt-sk{font-size:11.5px;color:var(--ink-2);background:var(--gita-mo-1);border:1px solid var(--gita-vien-1);
  border-radius:9px;padding:7px 9px;line-height:1.5;max-width:220px}
.cvt-tip{font-size:11.5px;color:var(--ink-3);line-height:1.5;max-width:220px}

/* ═══════════ LIÊN THỐNG & TOÀN VẸN DỮ LIỆU — lien-thong ═══════════ */
.lt-sparks{display:flex;align-items:flex-end;gap:6px;height:66px;padding:4px 0}
.lt-spark{display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:flex-end}
.lt-spark i{display:block;width:16px;border-radius:4px 4px 0 0}
.lt-spark span{font-size:9.5px;color:var(--ink-4);font-weight:700}
.lt-nhom{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--cc);
  border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 2px var(--phu-1)}
.lt-nhom-h{display:flex;align-items:center;gap:11px}
.lt-nhom-ic{color:var(--cc);flex:none;display:flex}
.lt-nhom-h b{font-size:14.5px;color:var(--ink)}
.lt-nhom-dem{font-size:11.5px;font-weight:800;color:var(--cc);white-space:nowrap}
.lt-phep{border-top:1px solid var(--line-2);padding:11px 0 3px;margin-top:11px}
.lt-phep:first-of-type{border-top:0}
.lt-phep-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lt-phep-h b{color:var(--ink)}
.lt-tron{width:9px;height:9px;border-radius:50%;flex:none}
.lt-loi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;
  background:var(--phu-1);border:1px solid var(--line);border-radius:10px;padding:8px 11px;margin:6px 0}
.lt-loi-mo{font-size:12px;color:var(--ink-2);line-height:1.5;flex:1;min-width:220px}
.lt-loi-act{display:flex;flex-wrap:wrap;gap:5px}
.lt-act{padding:5px 9px !important;font-size:11px !important;min-height:0 !important}
.lt-loi-done{opacity:.72;background:var(--okbg,rgba(11,115,80,.08))}
.lt-xong{margin-top:6px}
.lt-xong summary{cursor:pointer;color:var(--ink-3);font-weight:700;padding:4px 0}

/* Cột mới của bảng công việc CRM */
.cvt-rong{min-width:1560px}
.cvt-chuoi{display:flex;align-items:center;gap:8px;background:linear-gradient(120deg,#FFF3DC,#FDE8C8);
  border:1px solid #E7CE97;border-radius:12px;padding:10px 14px;margin:0 0 12px;font-size:13px;color:#8A4A08}
.cvt-chuoi b{color:#8A4A08}
.cvt-chuoi-0{background:var(--phu-2);border-color:var(--line);color:var(--ink-3)}
:root[data-nen="toi"] .cvt-chuoi,html[data-nen="toi"] .cvt-chuoi{background:#2A2410;border-color:#5A4A1E;color:#E7CE97}
.cvt-ut{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--uc);
  border-radius:20px;padding:4px 11px;white-space:nowrap;letter-spacing:.3px}
.cvt-nv{margin:0;padding-left:16px}
.cvt-nv li{font-size:11px;color:var(--ink-2);line-height:1.45;margin-bottom:3px}
.cvt-gt{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--gc);
  border-radius:20px;padding:3px 9px;white-space:nowrap;letter-spacing:.2px}
.cvt-gt-mo{margin-top:5px;line-height:1.5;max-width:180px}
.cvt-table td:nth-child(5){min-width:190px;max-width:230px}
.cvt-table td:nth-child(11){min-width:150px;max-width:200px}
.cvt-table td:nth-child(12){min-width:150px;max-width:200px}

/* ═══════════ TRUNG TÂM TƯ VẤN & CSKH — tt-cskh ═══════════ */
.tvc-note{display:flex;align-items:flex-start;gap:9px;background:var(--phu-2);border:1px solid var(--line);
  border-radius:12px;padding:11px 14px;margin:0 0 14px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.tvc-note-do{background:rgba(190,14,22,.06);border-color:#BE0E1644;color:var(--ink-2)}
.tvc-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.tvc-tabbar{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 14px}
.tvc-tabbar label{display:inline-flex;align-items:center;padding:9px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--ink-3);flex:none}
.tvc-tabbar label:hover{color:var(--ink)}
.tvc-panel{display:none}
#tvc-homnay:checked ~ #tvc-p-homnay,#tvc-khach:checked ~ #tvc-p-khach,#tvc-pheu:checked ~ #tvc-p-pheu,
#tvc-hotro:checked ~ #tvc-p-hotro,#tvc-dongchay:checked ~ #tvc-p-dongchay{display:block}
#tvc-homnay:checked ~ .tvc-tabbar label[for="tvc-homnay"],#tvc-khach:checked ~ .tvc-tabbar label[for="tvc-khach"],
#tvc-pheu:checked ~ .tvc-tabbar label[for="tvc-pheu"],#tvc-hotro:checked ~ .tvc-tabbar label[for="tvc-hotro"],
#tvc-dongchay:checked ~ .tvc-tabbar label[for="tvc-dongchay"]{background:var(--gita);color:#fff;border-color:var(--gita)}

.tvc-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.tvc-table{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:12.5px}
.tvc-table thead th{position:sticky;top:0;background:var(--gita-sau);color:#fff;text-align:left;font-size:11px;
  font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:10px 12px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.16)}
.tvc-table tbody td{padding:10px 12px;border-top:1px solid var(--line);border-right:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
.tvc-table tbody tr:nth-child(even){background:var(--phu-1)}
.tvc-table tbody tr:hover{background:var(--gita-mo-1)}
.tvc-stt{text-align:center;font-weight:800;color:var(--ink-4);width:40px}
.tvc-tien{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tvc-seg-chip,.tvc-gd,.tvc-band,.tvc-ut{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;border-radius:20px;padding:3px 9px;white-space:nowrap}
.tvc-seg-chip{background:var(--sc)} .tvc-gd{background:var(--gc)} .tvc-band{background:var(--bc)} .tvc-ut{background:var(--uc)}
.tvc-act{padding:5px 11px !important;font-size:11px !important;min-height:0 !important}

.tvc-segs{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.tvc-segs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.tvc-segs{grid-template-columns:repeat(4,1fr)}}
.tvc-seg{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--sc);border-radius:14px;padding:14px;box-shadow:0 1px 2px var(--phu-1)}
.tvc-seg-top{display:flex;align-items:center;justify-content:space-between}
.tvc-seg-top b{font-size:14px;color:var(--ink)}
.tvc-seg-n{font-size:22px;font-weight:800;color:var(--sc)}
.tvc-seg p{margin:6px 0;color:var(--ink-3)}
.tvc-seg-viec{font-size:11.5px;color:var(--ink-2);background:var(--phu-1);border-radius:9px;padding:7px 9px;line-height:1.5}

.tvc-gauge{margin:4px 0 16px}
.tvc-gauge-bar{position:relative;height:16px;background:var(--phu-3);border-radius:20px;overflow:hidden;margin-bottom:6px}
.tvc-gauge-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gita),#0B7350);border-radius:20px}
.tvc-gauge-tar{position:absolute;top:-3px;bottom:-3px;width:3px;background:#BE0E16}
.tvc-pheu{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.tvc-pheu-row{display:flex;align-items:center;gap:12px}
.tvc-pheu-ten{min-width:160px;flex:none}
.tvc-pheu-ten b{font-size:12.5px;display:block;color:var(--ink)}
.tvc-pheu-bar{height:34px;border-radius:9px;display:flex;align-items:center;padding:0 12px;color:#fff;font-size:12px;font-weight:700;min-width:120px}

.tvc-ht{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.tvc-ht{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tvc-ht{grid-template-columns:repeat(3,1fr)}}
.tvc-ht-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 2px var(--phu-1);display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.tvc-ht-ic{width:40px;height:40px;border-radius:11px;background:var(--gita-mo-2);color:var(--gita-ink);display:grid;place-items:center}
.tvc-ht-card b{font-size:14px;color:var(--ink)}
.tvc-ht-card p{margin:0;color:var(--ink-3);line-height:1.5;flex:1}

/* Gói chiều sâu CRM — điểm sức khoẻ, chuỗi chạm, playbook (tt-cskh) */
#tvc-sk:checked ~ #tvc-p-sk,#tvc-cadence:checked ~ #tvc-p-cadence{display:block}
#tvc-sk:checked ~ .tvc-tabbar label[for="tvc-sk"],#tvc-cadence:checked ~ .tvc-tabbar label[for="tvc-cadence"]{background:var(--gita);color:#fff;border-color:var(--gita)}
.tvc-sk{display:inline-block;min-width:30px;text-align:center;font-size:12px;font-weight:800;color:#fff;background:var(--kc);border-radius:20px;padding:3px 9px}
.tvc-pb{display:inline-block;font-size:10px;font-weight:800;color:#fff;background:var(--pc);border-radius:20px;padding:3px 8px;white-space:nowrap}
.tvc-chieu{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.tvc-chieu-row{display:flex;align-items:center;gap:12px}
.tvc-chieu-ten{min-width:170px;flex:none}
.tvc-chieu-ten b{font-size:12.5px;display:block;color:var(--ink)}
.tvc-chieu-bar{height:16px;border-radius:9px;min-width:40px}
.tvc-cad{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:640px){.tvc-cad{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.tvc-cad{grid-template-columns:repeat(4,1fr)}}
.tvc-cad-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--sc);border-radius:14px;padding:14px;box-shadow:0 1px 2px var(--phu-1)}
.tvc-cad-card>b{font-size:13.5px;color:var(--ink);display:block}
.tvc-step{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--line-2)}
.tvc-step:first-of-type{border-top:0}
.tvc-step-n{width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex:none;margin-top:1px}
.tvc-pb-ol{margin:4px 0 0;padding-left:18px}
.tvc-pb-ol li{font-size:12px;color:var(--ink-2);line-height:1.5;margin-bottom:4px}

/* ═══════════ NGHỀ TƯ VẤN — nghe-tu-van ═══════════ */
.ntv-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.ntv-tabbar{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 14px}
.ntv-tabbar label{display:inline-flex;align-items:center;padding:10px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink-3);flex:none}
.ntv-tabbar label:hover{color:var(--ink)}
.ntv-panel{display:none}
#ntv-khung:checked ~ #ntv-p-khung,#ntv-viec:checked ~ #ntv-p-viec,#ntv-khach:checked ~ #ntv-p-khach,#ntv-daotao:checked ~ #ntv-p-daotao{display:block}
#ntv-khung:checked ~ .ntv-tabbar label[for="ntv-khung"],#ntv-viec:checked ~ .ntv-tabbar label[for="ntv-viec"],
#ntv-khach:checked ~ .ntv-tabbar label[for="ntv-khach"],#ntv-daotao:checked ~ .ntv-tabbar label[for="ntv-daotao"]{background:var(--gita);color:#fff;border-color:var(--gita)}

.ntv-note{display:flex;align-items:flex-start;gap:9px;background:var(--phu-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:0 0 14px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.ntv-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.ntv-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.ntv-grid{grid-template-columns:repeat(3,1fr)}.ntv-grid-5{grid-template-columns:repeat(5,1fr)}}
.ntv-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px;box-shadow:0 1px 2px var(--phu-1);display:flex;flex-direction:column;gap:7px}
.ntv-card-h{display:flex;align-items:center;gap:9px}
.ntv-card-h b{font-size:14px;color:var(--ink)}
.ntv-ic{width:32px;height:32px;border-radius:9px;background:var(--gita-mo-2);color:var(--gita-ink);display:grid;place-items:center;flex:none}
.ntv-ic-lg{width:44px;height:44px}
.ntv-card p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55;flex:1}
.ntv-card p code{font-size:11px;background:var(--phu-2);padding:1px 5px;border-radius:5px}
.ntv-lks{display:flex;flex-wrap:wrap;gap:6px}
.ntv-lk{padding:5px 10px !important;font-size:11.5px !important;min-height:0 !important}
.ntv-tru{align-items:flex-start}
.ntv-caps{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.ntv-caps{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.ntv-caps{grid-template-columns:repeat(5,1fr)}}
.ntv-cap{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--cc);border-radius:13px;padding:13px}
.ntv-cap-n{width:28px;height:28px;border-radius:50%;background:var(--cc);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:6px}
.ntv-cap>b{font-size:13.5px;color:var(--ink);display:block;margin-bottom:6px}
.ntv-cap-row{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-top:5px}
.ntv-cap-l{display:block;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-4)}
.ntv-wow{display:flex;gap:11px;align-items:flex-start;background:var(--gita-mo-1);border:1px solid var(--gita-vien-1);border-radius:14px;padding:14px 16px;margin:14px 0;color:var(--gita-ink)}
.ntv-wow b{color:var(--gita-ink)} .ntv-wow div{font-size:12.5px;color:var(--ink-2);line-height:1.55}

.ntv-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.ntv-table{border-collapse:separate;border-spacing:0;width:100%;min-width:1040px;font-size:12px}
.ntv-table thead th{position:sticky;top:0;background:var(--gita-sau);color:#fff;text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:9px 11px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.16)}
.ntv-table tbody td{padding:9px 11px;border-top:1px solid var(--line);border-right:1px solid var(--line-2);vertical-align:top;color:var(--ink-2);line-height:1.5}
.ntv-table tbody tr:nth-child(even){background:var(--phu-1)}
.ntv-table tbody tr:hover{background:var(--gita-mo-1)}
.ntv-stt{text-align:center;font-weight:800;color:var(--ink-4);width:38px}
.ntv-center{text-align:center}
.ntv-w{text-align:center}
.ntv-wpill{display:inline-block;min-width:26px;text-align:center;font-weight:800;color:#fff;background:var(--gita);border-radius:20px;padding:3px 8px}
.ntv-nhom{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--nc);border-radius:20px;padding:3px 9px;white-space:nowrap}
.ntv-band{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--bc)}
.ntv-dat{color:#0B7350}
.ntv-vid{text-align:center;color:var(--gita);font-size:15px}
.ntv-gdj{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ntv-gdj-pill{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gc);border-radius:11px;padding:8px 12px;flex:1;min-width:150px}
.ntv-gdj-pill b{font-size:12px;color:var(--ink);display:block}
.ntv-gdj-pill span{font-size:11px;color:var(--gc);font-weight:700}
.ntv-prog{min-width:88px}
.ntv-prog-bar{height:8px;background:var(--phu-3);border-radius:20px;overflow:hidden;margin-bottom:3px}
.ntv-prog-bar i{display:block;height:100%;border-radius:20px}
.ntv-prog span{font-size:11px;font-weight:700;color:var(--ink-2)}

/* ═══ KHÔNG GIAN LÀM VIỆC — tách vai (Giai đoạn 1) ═══
   Màu quy ước: Khách hàng = T4 xanh lá · Nghiệp vụ = GITA xanh ·
   Toàn hệ thống = trung tính. */
.kg{margin-bottom:14px}
.kg-lbl{padding-bottom:9px}
.kg-sec{margin-bottom:10px;border-radius:var(--r);padding:8px 8px 6px;
  border:1px solid var(--line);position:relative;overflow:hidden}
.kg-sec::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0}
.kg-khach{background:color-mix(in srgb,var(--t4) 8%,var(--surface));border-color:color-mix(in srgb,var(--t4) 26%,var(--line))}
.kg-khach::before{background:var(--t4)}
.kg-viec{background:var(--gita-mo-1);border-color:var(--gita-vien,var(--line))}
.kg-viec::before{background:var(--gita)}
.kg-h{display:flex;align-items:center;gap:8px;padding:4px 6px 7px}
.kg-h svg{width:16px;height:16px;flex:none}
.kg-khach .kg-h svg{color:var(--t4)}
.kg-viec .kg-h svg{color:var(--gita)}
.kg-h b{font-size:12.5px;font-weight:800;letter-spacing:.02em;flex:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kg-khach .kg-h b{color:var(--t4)}
.kg-viec .kg-h b{color:var(--gold-ink)}
.kg-n{font-size:10px;font-weight:800;min-width:19px;height:18px;padding:0 5px;border-radius:999px;
  display:grid;place-items:center;color:#fff;flex:none;letter-spacing:.02em}
.kg-khach .kg-n{background:var(--t4)}
.kg-viec .kg-n{background:var(--gita)}
.kg-note{font-size:10px;line-height:1.55;color:var(--ink-4);padding:0 6px 7px;margin:0}
.nav-eyebrow-all{border-top:1px solid var(--line);padding-top:13px;margin-top:2px}

/* ═══ HỆ THỐNG PHÒNG BAN (Giai đoạn 2) ═══ */
.pb-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pb-ban{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);text-align:left;transition:.2s;width:100%}
.pb-ban:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,20,60,.08)}
.pb-ban.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 8%,var(--surface))}
.pb-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,var(--line))}
.pb-ic svg{width:19px;height:19px}
.pb-ic.lg{width:46px;height:46px;border-radius:13px}
.pb-bt{flex:1;min-width:0}
.pb-bt b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-bm{display:block;font-size:11px;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-ban .cv{width:14px;height:14px;color:var(--ink-4);flex:none;transition:.24s}
.pb-ban.on .cv{transform:rotate(90deg);color:var(--c)}
/* Hồ sơ ban */
.pb-hs{margin-top:14px;border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));border-radius:var(--r);
  background:var(--surface);overflow:hidden}
.pb-hsh{display:flex;align-items:center;gap:12px;padding:15px 16px;
  background:color-mix(in srgb,var(--c) 7%,var(--surface));border-bottom:1px solid var(--line)}
.pb-hsh b{display:block;font-size:17px;font-weight:800}
.pb-hsh>div{flex:1;min-width:0}
/* Tabs — generic nth-of-type: 6 input + 6 label, rồi 6 panel .pb-pan */
.pb-tabs{padding:12px}
.pb-tabs>input{display:none}
.pb-tab{display:inline-flex;align-items:center;padding:7px 13px;margin:0 6px 8px 0;border-radius:999px;
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:.18s}
.pb-tab:hover{border-color:var(--c);color:var(--ink)}
.pb-pan{display:none;padding-top:6px;animation:slideDown .26s ease-out}
.pb-tabs>input:nth-of-type(1):checked~label:nth-of-type(1),
.pb-tabs>input:nth-of-type(2):checked~label:nth-of-type(2),
.pb-tabs>input:nth-of-type(3):checked~label:nth-of-type(3),
.pb-tabs>input:nth-of-type(4):checked~label:nth-of-type(4),
.pb-tabs>input:nth-of-type(5):checked~label:nth-of-type(5),
.pb-tabs>input:nth-of-type(6):checked~label:nth-of-type(6){
  background:var(--c);border-color:var(--c);color:#fff}
.pb-tabs>input:nth-of-type(1):checked~div:nth-of-type(1),
.pb-tabs>input:nth-of-type(2):checked~div:nth-of-type(2),
.pb-tabs>input:nth-of-type(3):checked~div:nth-of-type(3),
.pb-tabs>input:nth-of-type(4):checked~div:nth-of-type(4),
.pb-tabs>input:nth-of-type(5):checked~div:nth-of-type(5),
.pb-tabs>input:nth-of-type(6):checked~div:nth-of-type(6){display:block}
/* Bảng nhân sự */
.pb-tb{width:100%;border-collapse:collapse;font-size:13px}
.pb-tb th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  padding:6px 10px;border-bottom:1.5px solid var(--line);font-weight:700}
.pb-tb td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.pb-vai{display:inline-block;font-weight:700;padding:2px 9px;border-radius:999px;font-size:12px;
  color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent)}
/* Agent cards */
.pb-ags{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pb-ag{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:12px;border-radius:13px;text-align:left;
  border:1px solid var(--line);background:var(--surface);transition:.2s;width:100%}
.pb-ag:hover{border-color:var(--c);transform:translateY(-2px)}
.pb-ag>svg{width:20px;height:20px;color:var(--c);flex:none;margin-top:2px}
.pb-agt{flex:1;min-width:0}
.pb-agt b{display:block;font-size:13.5px;font-weight:700}
.pb-agt span{display:block;font-size:11px;color:var(--ink-4)}
.pb-agk{flex-basis:100%;font-size:10.5px;color:var(--ink-3);margin-top:2px;line-height:1.45;
  padding-top:7px;border-top:1px dashed var(--line)}
/* Màn & công cụ chips */
.pb-mans{display:flex;flex-wrap:wrap;gap:7px}
.pb-man{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;font-size:12px;
  font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);transition:.18s}
.pb-man:hover{border-color:var(--c);color:var(--ink);background:color-mix(in srgb,var(--c) 7%,transparent)}
.pb-man.off{opacity:.45;color:var(--ink-4)}
.pb-man svg{width:13px;height:13px;flex:none}
/* Báo cáo / kho / nội quy */
.pb-bc,.pb-kho,.pb-nq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pb-bc li,.pb-kho li,.pb-nq li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.55;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.pb-bc li svg,.pb-kho li svg,.pb-nq li svg{flex:none;margin-top:3px;color:var(--c)}
.pb-nq li svg{color:var(--c)}
/* Lý lịch Agent (modal) */
.pb-ald{--c:var(--gita)}
.pb-alh{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.pb-alh svg{width:26px;height:26px;color:var(--c);flex:none}
.pb-alh b{display:block;font-size:18px;font-weight:800}
.pb-alh span{display:block;font-size:12.5px;color:var(--ink-4)}
.pb-alg{display:flex;flex-direction:column;gap:12px}
.pb-alr>span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:3px}
.pb-alr p{margin:0;font-size:14px;line-height:1.6}
.pb-sk{display:inline-block;margin:2px 6px 2px 0;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,var(--line))}
.pb-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}

/* ═══ NĂNG LỰC & THĂNG HẠNG (Giai đoạn 3) ═══ */
.ta-c{text-align:center}
.nl-tru{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.nl-trui{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.nl-trui b{color:var(--gita);font-weight:800}
.nl-trui svg{color:var(--gita)}
.nl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.nl-tb{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.nl-tb th{text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  padding:10px;border-bottom:1.5px solid var(--line);font-weight:700;white-space:nowrap;background:var(--soft,var(--surface-2))}
.nl-tb th.ta-c,.nl-tb td.ta-c{text-align:center}
.nl-tb td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.nl-row{cursor:pointer;transition:.15s}
.nl-row:hover{background:var(--gita-mo-1)}
.nl-vai{display:inline-block;font-weight:700;padding:2px 9px;border-radius:999px;font-size:12px;
  color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent)}
.nl-vai.sm{font-size:11px;padding:1px 8px}
.nl-cap{display:inline-block;font-weight:700;font-size:12px;padding:3px 10px;border-radius:999px;
  color:var(--m);background:color-mix(in srgb,var(--m) 13%,transparent);border:1px solid color-mix(in srgb,var(--m) 30%,var(--line))}
.nl-pin{display:inline-block;font-weight:800;font-size:12.5px;padding:3px 10px;border-radius:8px;
  color:var(--m);background:color-mix(in srgb,var(--m) 13%,transparent)}
.nl-den{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--m);vertical-align:middle;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 20%,transparent)}
.nl-vds{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12px;color:var(--t5);
  padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--t5) 12%,transparent)}
.nl-vds svg{color:var(--t5)}
/* Hồ sơ năng lực (modal) */
.nl-hs{--c:var(--t1)}
.nl-hh{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nl-hh>svg{width:26px;height:26px;color:var(--c);flex:none}
.nl-hh b{display:block;font-size:18px;font-weight:800}
.nl-hh>div{flex:1;min-width:0}
.nl-hh>div span{display:block;font-size:12.5px;color:var(--ink-4);margin-top:2px}
.nl-vd{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px;color:var(--t5);
  padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--t5) 12%,transparent);border:1px solid color-mix(in srgb,var(--t5) 28%,var(--line))}
.nl-vd svg{color:var(--t5)}
.nl-st{margin-bottom:16px}
.nl-hg{display:flex;flex-direction:column;gap:9px}
.nl-hr{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.nl-hr>span{flex:none;width:168px;font-size:12px;font-weight:700;color:var(--ink-3)}
.nl-hr>div{flex:1;font-size:13.5px;line-height:1.5}
.nl-chua td{background:color-mix(in srgb,var(--warn) 5%,transparent)}
.nl-form{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:4px}
.nl-f{display:flex;flex-direction:column;gap:5px}
.nl-f span{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.nl-f input,.nl-f select{padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:14px;font-family:inherit;width:100%}
.nl-f input:focus,.nl-f select:focus{outline:2px solid var(--gita);outline-offset:-1px;border-color:var(--gita)}
@media(max-width:560px){.nl-form{grid-template-columns:1fr}}

/* ═══ BẢNG ĐIỀU KHIỂN VẬN HÀNH · 10 MÀN ═══ */
.vh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-bottom:10px}
.vh-the{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:9px;transition:.2s;position:relative;overflow:hidden}
.vh-the::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.vh-the:hover{border-color:var(--c);transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,20,60,.09)}
.vh-the.off{opacity:.62}
.vh-top{display:flex;align-items:center;justify-content:space-between}
.vh-so{font-size:14px;font-weight:800;color:var(--c);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.vh-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line))}
.vh-ic svg{width:20px;height:20px}
.vh-t{font-size:15.5px;font-weight:700;line-height:1.3}
.vh-mt{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.5;flex:1}
.vh-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  margin-top:3px;padding-top:11px;border-top:1px solid var(--line)}
.vh-stat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--c)}
.vh-stat svg{width:13px;height:13px;flex:none}
.vh-khoa{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-4)}
.vh-khoa svg{width:13px;height:13px}

/* ═══ BẢNG ĐIỀU KHIỂN GIÁM ĐỐC · 8 màn × 10 nghiệp vụ ═══ */
.gdv-luoi{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.gdv-luoi{grid-template-columns:1fr 1fr}}
.gdv-the{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:.2s;position:relative}
.gdv-the::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);z-index:1}
.gdv-the:hover{border-color:var(--c);box-shadow:0 8px 24px rgba(20,20,60,.07)}
.gdv-the.off{opacity:.62}
.gdv-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;
  background:color-mix(in srgb,var(--c) 5%,var(--surface))}
.gdv-h .vh-ic{width:36px;height:36px}
.gdv-t{flex:1;min-width:130px;font-size:15px;font-weight:700;line-height:1.3}
.gdv-nvwrap{padding:12px 16px 14px}
.gdv-lbl{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:8px}
.gdv-nv{margin:0;padding:0;list-style:none;counter-reset:nv;column-count:2;column-gap:20px}
.gdv-nv li{counter-increment:nv;font-size:12.5px;line-height:1.45;padding:4px 0 4px 23px;position:relative;break-inside:avoid}
.gdv-nv li::before{content:counter(nv);position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);font-size:9.5px;font-weight:800;
  display:grid;place-items:center}
@media(max-width:560px){.gdv-nv{column-count:1}}

/* ═══ MÀN CHI TIẾT GIÁM ĐỐC (gd-*) ═══ */
.gd-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:4px}
.gd-tb{width:100%;border-collapse:collapse;font-size:13px;min-width:440px}
.gd-tb th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);
  padding:9px 11px;border-bottom:1.5px solid var(--line);font-weight:700;white-space:nowrap;background:var(--surface-2)}
.gd-tb td{padding:9px 11px;border-bottom:1px solid var(--line)}
.gd-tb td.ta-c{text-align:center}
.gd-den{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--m);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 20%,transparent);vertical-align:middle}
.gd-nvlist{display:flex;flex-direction:column;gap:7px}
.gd-nvr{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);transition:.15s;flex-wrap:wrap}
.gd-nvr.done{background:color-mix(in srgb,var(--ok) 6%,var(--surface))}
.gd-tick{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--m);color:var(--m);background:color-mix(in srgb,var(--m) 10%,transparent);transition:.15s}
.gd-tick-chua{border-color:var(--line);color:var(--ink-4);background:transparent}
.gd-tick:hover{transform:scale(1.08)}
.gd-tick svg{width:14px;height:14px}
.gd-nvi{font-size:11px;font-weight:800;color:var(--ink-4);min-width:18px;text-align:center}
.gd-nvt{flex:1;min-width:150px;font-size:13.5px;font-weight:600}
.gd-nvr.done .gd-nvt{text-decoration:line-through;color:var(--ink-3)}
.gd-nvs{font-size:11px;font-weight:700;color:var(--m);padding:2px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--m) 12%,transparent)}
.gd-open{flex:none}

/* ═══════════════ XƯỞNG PHIM / STUDIO · hệ điều hành chuyên môn ═══════════════ */
.sx-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.sx-tabbar{display:flex;gap:6px;overflow-x:auto;flex-wrap:wrap;padding:2px 2px 14px}
.sx-tabbar label{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;
  border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink-3);background:var(--surface);
  cursor:pointer;white-space:nowrap}
.sx-tabbar label:hover{color:var(--ink)}
.sx-pan{display:none}
#sx-qt:checked ~ #sx-p-qt,#sx-vt:checked ~ #sx-p-vt,#sx-cl:checked ~ #sx-p-cl,
#sx-kh:checked ~ #sx-p-kh,#sx-cs:checked ~ #sx-p-cs,#sx-dl:checked ~ #sx-p-dl{display:block}
#sx-qt:checked ~ .sx-tabbar label[for="sx-qt"],#sx-vt:checked ~ .sx-tabbar label[for="sx-vt"],
#sx-cl:checked ~ .sx-tabbar label[for="sx-cl"],#sx-kh:checked ~ .sx-tabbar label[for="sx-kh"],
#sx-cs:checked ~ .sx-tabbar label[for="sx-cs"],#sx-dl:checked ~ .sx-tabbar label[for="sx-dl"]{
  background:var(--gita);color:#fff;border-color:var(--gita)}
.sx-step{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.sx-step:last-child{border-bottom:0}
.sx-num{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:12.5px;background:var(--gita-mo-1);color:var(--gita-sau)}
.sx-st-b{font-weight:700;color:var(--ink);font-size:13.5px}
.sx-st-d{color:var(--ink-3);font-size:12.5px;line-height:1.55;margin-top:2px}
.sx-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sx-chip{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);white-space:nowrap}
.sx-grp{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gita-sau)}

/* ═══════════════ CHƯƠNG TRÌNH LÀM PHIM · 10 bước ra phim ═══════════════ */
.lp-prog{display:flex;align-items:center;gap:11px;margin:4px 0 18px}
.lp-prog-bar{flex:1;height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.lp-prog-fill{height:100%;background:var(--ok);border-radius:999px;transition:width .2s}
.lp-prog-txt{font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.lp-step{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:15px 18px;margin-bottom:12px}
.lp-step.done{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 4%,var(--surface))}
.lp-head{display:flex;align-items:flex-start;gap:12px}
.lp-num{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--gita);color:#fff}
.lp-step.done .lp-num{background:var(--ok)}
.lp-tt{font-weight:800;font-size:15px;color:var(--ink);line-height:1.3}
.lp-goal{color:var(--ink-3);font-size:12.5px;line-height:1.55;margin-top:3px}
.lp-sub{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gita-sau);margin:13px 0 5px}
.lp-check{display:flex;align-items:center;gap:10px;padding:4px 0}
.lp-check .lp-ct{font-size:13px;color:var(--ink-2);line-height:1.45}
.lp-check.x .lp-ct{text-decoration:line-through;color:var(--ink-4)}
.lp-ai{display:flex;gap:9px;padding:10px 12px;border-radius:10px;background:var(--gita-mo-1);font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:4px}
.lp-ai b{color:var(--gita-sau)}
.lp-mau{padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--line);font-size:12px;color:var(--ink-2);line-height:1.65;margin-top:7px}
.lp-mau b{color:var(--ink)}
.lp-out{margin-top:11px;font-size:12.5px;color:var(--ok);font-weight:600;display:flex;align-items:center;gap:6px}

/* ═══════════════ BÀN DỰNG GITA STUDIO · biên tập ảnh·màu·chữ·âm·phim ═══════════════ */
.bd-wrap{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:18px;align-items:start}
@media(max-width:760px){.bd-wrap{grid-template-columns:1fr}}
.bd-stage{position:sticky;top:12px;min-width:0;background:#0c1118;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.bd-cv{width:100%;max-width:100%;min-width:0;aspect-ratio:9/16;border-radius:10px;background:#11161f;display:block;max-height:72vh;margin:0 auto;object-fit:contain}
.bd-stage .btn{width:100%;justify-content:center}
.bd-ctrl{min-width:0}
.bd-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.bd-tabbar{display:flex;gap:6px;overflow-x:auto;flex-wrap:wrap;padding:2px 2px 12px}
.bd-tabbar label{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:11px;border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink-3);background:var(--surface);cursor:pointer;white-space:nowrap}
.bd-tabbar label:hover{color:var(--ink)}
.bd-pan{display:none}
#bd-anh:checked~#bd-p-anh,#bd-mau:checked~#bd-p-mau,#bd-ht:checked~#bd-p-ht,
#bd-chu:checked~#bd-p-chu,#bd-am:checked~#bd-p-am,#bd-phim:checked~#bd-p-phim{display:block}
#bd-anh:checked~.bd-tabbar label[for="bd-anh"],#bd-mau:checked~.bd-tabbar label[for="bd-mau"],
#bd-ht:checked~.bd-tabbar label[for="bd-ht"],#bd-chu:checked~.bd-tabbar label[for="bd-chu"],
#bd-am:checked~.bd-tabbar label[for="bd-am"],#bd-phim:checked~.bd-tabbar label[for="bd-phim"]{
  background:var(--gita);color:#fff;border-color:var(--gita)}
.bd-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.bd-row:last-child{border-bottom:0}
.bd-lbl{flex:none;width:92px;font-size:12px;font-weight:600;color:var(--ink-2)}
.bd-row input[type=range]{flex:1;accent-color:var(--gita)}
.bd-val{flex:none;width:40px;text-align:right;font-size:11.5px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bd-presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.bd-ps{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer}
.bd-ps:hover{border-color:var(--gita);color:var(--gita)}
.bd-ps.on{background:var(--gita);color:#fff;border-color:var(--gita)}
.bd-field{display:flex;flex-direction:column;gap:5px;padding:9px 0;border-bottom:1px solid var(--line)}
.bd-field>span{font-size:11px;font-weight:700;color:var(--ink-3)}
.bd-field input[type=text],.bd-field textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;box-sizing:border-box}
.bd-seg{display:flex;gap:5px;flex-wrap:wrap}
.bd-seg button{padding:6px 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  font-size:11.5px;font-weight:600;color:var(--ink-3);cursor:pointer}
.bd-seg button.on{background:var(--gita);color:#fff;border-color:var(--gita)}
.bd-file{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;border:1px dashed var(--line);
  background:var(--surface);font-size:12.5px;font-weight:700;color:var(--gita);cursor:pointer}
.bd-file input{display:none}
.bd-tip{font-size:11.5px;color:var(--ink-4);line-height:1.55;margin-top:7px}
.bd-strip{display:flex;gap:8px;overflow-x:auto;padding:8px 2px}
.bd-frame{flex:none;width:58px;height:103px;border-radius:7px;border:2px solid var(--line);object-fit:cover;background:#11161f;position:relative}
.bd-frame.on{border-color:var(--gita)}
.bd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bd-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}

/* ═══ BẢNG ĐIỀU KHIỂN THEO VAI (dk-*) — dùng chung khung gd-/gdv- ═══ */
.dk-pt{font-size:11.5px;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums;
  padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,transparent)}
.dk-w{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-left:4px;border-radius:6px;
  font-size:10.5px;font-weight:800;color:var(--gita-do,#BE0E16);background:color-mix(in srgb,var(--gita-do,#BE0E16) 10%,transparent);vertical-align:1px}
.gdv-nv li.dk-xong{color:var(--ink-4);text-decoration:line-through}

/* ═══ HỆ ĐIỀU HÀNH COACH (co-*) — dùng chung cho coach-*.js ═══ */
.co-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 16px}
.co-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;cursor:pointer}
.co-tab svg{width:14px;height:14px}
.co-tab:hover{border-color:var(--gita-vien-2,var(--gita))}
.co-tab.on{background:var(--gita);border-color:var(--gita);color:#fff}
.co-tab:focus-visible,.co-btn:focus-visible{outline:2px solid var(--gita);outline-offset:2px}
.co-den{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--m)}
.co-den i{width:10px;height:10px;border-radius:50%;background:var(--m);box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 18%,transparent)}
.co-mau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border-radius:12px;font-size:13px;
  border:1px dashed var(--warn,#B4720F);background:color-mix(in srgb,var(--warn,#B4720F) 7%,var(--surface))}
.co-mau span{flex:1;min-width:200px}
.co-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:999px;vertical-align:1px;
  color:var(--warn,#B4720F);background:color-mix(in srgb,var(--warn,#B4720F) 12%,transparent)}
.co-f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--ink-3)}
.co-f > span{letter-spacing:.02em}
.co-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.co-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.co-the{border:1px solid var(--line);border-radius:var(--r,16px);background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:8px;position:relative}
.co-the.nhan{border-color:var(--c,var(--gita))}
.co-the h2,.co-the h3{margin:0;font-size:15px;line-height:1.35}
.co-the .co-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px;color:var(--ink-4)}
.co-so{font-variant-numeric:tabular-nums}
.co-hang{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.co-grow{flex:1;min-width:0}
.co-ds{display:flex;flex-direction:column;gap:8px}
.co-dong{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.co-tb{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r,16px);background:var(--surface)}
.co-tb table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.co-tb th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
.co-tb td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:top}
.co-tb tr:last-child td{border-bottom:0}
.co-tb td.so{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.co-cb{display:flex;flex-direction:column;gap:6px}
.co-cb > div{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:7px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--m) 8%,var(--surface));border-left:3px solid var(--m)}
.co-thanhbar{height:8px;border-radius:99px;background:var(--phu-4,var(--line));overflow:hidden}
.co-thanhbar i{display:block;height:100%;border-radius:99px;background:var(--m,var(--gita))}
.co-muc{display:inline-grid;grid-auto-flow:column;gap:4px}
.co-muc button{min-width:30px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:700;color:var(--ink-3);cursor:pointer}
.co-muc button.on{background:var(--m,var(--gita));border-color:var(--m,var(--gita));color:#fff}
@media(max-width:560px){.co-the{padding:12px}.co-tab{padding:7px 11px;font-size:12.5px}}
@media print{.co-tabs,.co-mau,.co-noprint{display:none!important}}

/* coach-pt: in bản tóm tắt một trang — chỉ in hộp thoại, không in cả màn */
@media print{
  body.co-pt-in > *:not(#modal):not(#wm){display:none!important}
  body.co-pt-in #modal{position:static!important;display:block!important;padding:0!important}
  body.co-pt-in #modal .bd,body.co-pt-in #modal .mx,body.co-pt-in .co-noprint{display:none!important}
  body.co-pt-in #modal .bx{max-height:none!important;overflow:visible!important;width:100%!important;box-shadow:none!important;border:0!important}
}
/* so-do-van-hanh: ngăn Sơ đồ vận hành ở bo-may-tap-doan — ảnh qua <img data:>, in bằng body.co-pt-in */
.sd-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:12px}
.sd-hinh{margin:0;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--surface)}
.sd-hinh figcaption{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.sd-anh{display:block;width:100%;max-width:100%;height:auto}
.sd-nap summary{cursor:pointer}
.sd-nap-ruot{display:grid;gap:8px}
.sd-loi{color:var(--gita-do-ink)}
.sd-hop-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* ── coach-ct · coach-tk: trục giai đoạn, khung soạn bài + máy soát, bản in ── */
.co-ct-truc{display:flex;gap:3px;height:12px;border-radius:99px;overflow:hidden;background:var(--line)}
.co-ct-truc i{display:block;height:100%;min-width:4px}
.co-tk-khung{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.co-tk-ben{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto}
.co-tk-luat{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;padding:7px 0;border-bottom:1px dashed var(--line)}
.co-tk-luat:last-child{border-bottom:0}
.co-tk-luat > b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--m)}
@media(max-width:1020px){.co-tk-khung{grid-template-columns:minmax(0,1fr)}.co-tk-ben{position:static;max-height:none;overflow:visible}}
@media print{
  body.co-tk-dangin > *:not(#modal):not(#wm){display:none!important}
  body.co-tk-dangin #modal{position:static;display:block;padding:0}
  body.co-tk-dangin #modal .bd,body.co-tk-dangin #modal .mx,body.co-tk-dangin .co-noprint{display:none!important}
  body.co-tk-dangin #modal .bx{max-height:none;overflow:visible;box-shadow:none;border:0;background:#fff;color:#111;width:100%;padding:0;animation:none}
  body.co-tk-dangin .co-tk-in .co-tb{overflow:visible;border-color:#bbb;background:#fff}
  body.co-tk-dangin .co-tk-in .co-tb table{min-width:0}
  body.co-tk-dangin .co-tk-in td,body.co-tk-dangin .co-tk-in th{color:#111;border-color:#ccc}
}
/* ── coach-nlp: dải bước kỹ thuật, thanh năm pha, sơ đồ quy trình ngang/dọc ── */
.co-nlp-buoc{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;counter-reset:none}
.co-nlp-buoc li{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.co-nlp-buoc li b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--gita)}
.co-nlp-pha{display:flex;gap:4px}
.co-nlp-pha > div{min-width:0;display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:10px;border-top:4px solid var(--m);background:color-mix(in srgb,var(--m) 12%,transparent)}
.co-nlp-pha b{font-size:12px;color:var(--m)}
.co-nlp-pha span{font-size:12px;line-height:1.35;color:var(--ink-2)}
.co-nlp-doc{display:none}
@media(max-width:700px){.co-nlp-ngang{display:none}.co-nlp-doc{display:block}.co-nlp-pha{flex-direction:column}.co-nlp-pha > div{flex:none!important}}

/* ═══ V50 · Thư viện vận hành + thanh Áp dụng (src/v50-ap-dung.js) ═══ */
.v50-gop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--gita-mo-1);color:var(--ink-2);font-size:13px;line-height:1.5}
.v50-gop > span{flex:1 1 240px;min-width:0}
.v50-thanh{border:1px solid var(--line-2);border-left:4px solid var(--gita);border-radius:14px;background:var(--surface);padding:12px 14px;margin:0 0 14px}
.v50-thanh-dau{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.v50-nhan{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--gita-ink,var(--gita));background:var(--gita-mo-2);padding:2px 8px;border-radius:99px}
.v50-thanh-than{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.v50-o{display:flex;flex-direction:column;gap:2px;min-width:0}
.v50-o-rong{flex:1 1 220px}
.v50-nut{display:flex;gap:6px;flex-wrap:wrap}
.v50-diem{display:inline-flex;align-items:baseline;gap:1px;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;padding:2px 9px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.v50-diem small{font-size:10px;font-weight:600;opacity:.75}
.v50-tot{color:var(--ok)} .v50-vua{color:var(--warn)} .v50-yeu{color:var(--bad)}
.v50-chua{color:var(--ink-4);font-weight:600;font-size:12px;border-style:dashed}
.v50-so{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;margin:4px 0 2px}
.v50-tim{display:flex;align-items:center;gap:8px;margin:4px 0 12px;color:var(--ink-3)}
.v50-tim .inp{flex:1}
.v50-cums{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.v50-cum[hidden],.v50-mo[hidden]{display:none}
.v50-cum-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.v50-man{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.v50-mo{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 9px;border-radius:9px;border:1px solid var(--line);background:var(--phu-2,transparent);color:var(--ink-2);font-size:12.5px;cursor:pointer;text-align:left}
.v50-mo span{overflow-wrap:anywhere}
.v50-mo:hover,.v50-mo:focus-visible{border-color:var(--gita);color:var(--ink)}
.v50-bang{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.v50-hang{display:grid;grid-template-columns:minmax(150px,2fr) minmax(60px,.6fr) minmax(90px,1fr) minmax(70px,.8fr);gap:8px;align-items:center;padding:7px 10px;border-top:1px solid var(--line);font-size:13px;min-width:430px}
.v50-hang:first-child{border-top:0}
.v50-hang-dau{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;background:var(--gita-mo-1)}
.v50-bang-gop .v50-hang{grid-template-columns:minmax(140px,1.2fr) minmax(140px,1.2fr) minmax(180px,2fr) auto}
.v50-hop .v50-viec{display:flex;flex-direction:column;gap:6px;padding:9px 0;border-top:1px solid var(--line)}
.v50-chon{display:flex;flex-wrap:wrap;gap:5px}
.v50-tt{padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--ink-3);font-size:12px;cursor:pointer}
.v50-tt.on{color:var(--surface);font-weight:700;border-color:transparent}
.v50-tt-da{background:var(--ok)} .v50-tt-dang{background:var(--warn)} .v50-tt-chua{background:var(--bad)} .v50-tt-kl{background:var(--ink-4)}
.v50-kq{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
@media(max-width:700px){.v50-cums{grid-template-columns:1fr}.v50-thanh-than{flex-direction:column;align-items:flex-start}}

/* ═══ V50·168 · thanh phần của màn chính + kho nghề (src/v50-cot.js · v50-kho.js) ═══ */
.v50-phan{margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.v50-phan-dau{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13.5px;margin-bottom:6px;color:var(--ink)}
.v50-phan-ds{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.v50-pc{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font-size:12.5px;white-space:nowrap;cursor:pointer}
.v50-pc:hover,.v50-pc:focus-visible{border-color:var(--gita);color:var(--ink)}
.v50-pc.on{background:var(--gita);border-color:var(--gita);color:var(--surface);font-weight:700}
.v50-pc-khoa{color:var(--ink-4);border-style:dashed}
.v50-pc-kho{border-color:var(--line-2);background:var(--gita-mo-1)}
.v50-khoa{cursor:default;border-style:dashed;color:var(--ink-4)}
.v50-hnav-ngan{flex:none;width:1px;align-self:stretch;margin:6px 6px;background:var(--line-2)}
.v50-phan-kh{border-color:color-mix(in srgb,var(--t4,#0B7350) 35%,var(--line))}
/* ═══ Khung dữ liệu & ma trận quyền (src/khung-du-lieu.js) ═══ */
.kdl-dau{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;width:100%;background:none;border:0;padding:0;text-align:left;color:var(--ink);cursor:pointer}
.kdl-dau .sm{flex:1 1 220px;min-width:0}
.kdl-quyen{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:6px;color:var(--ink-2)}
.kdl-hang{grid-template-columns:minmax(120px,1fr) minmax(70px,.5fr) minmax(140px,1.2fr) minmax(160px,1.6fr)}
.kdl-luong{grid-template-columns:minmax(170px,1.4fr) minmax(120px,1fr) minmax(140px,1fr) minmax(180px,1.6fr)}
.kdl-cuon{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.kdl-mt{border-collapse:collapse;font-size:12.5px;min-width:900px;width:100%}
.kdl-mt th,.kdl-mt td{border-top:1px solid var(--line);padding:6px 8px;text-align:center;white-space:nowrap}
.kdl-mt thead th{background:var(--gita-mo-1);font-size:11px;color:var(--ink-3)}
.kdl-mt tbody th{text-align:left;font-weight:600}
.kdl-o{font-size:14px}
/* ═══ Toàn cảnh CRM · Tài chính (src/toan-canh.js) ═══ */
.tc-khoi-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tc-nhan{font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;border:1px solid currentColor}
.tc-that{color:var(--ok)} .tc-mau{color:var(--ink-4);border-style:dashed}
.tc-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.tc-luoi .tc-khoi{margin-bottom:0}
.tc-luoi + .tc-khoi,.tc-luoi{margin-bottom:12px}
.tc-cuon{overflow-x:auto}
.tc-sao{display:block;min-width:620px;width:100%;height:auto;color:var(--ink)}
.tc-mt td.tc-o{font-size:12px}
.tc-co{color:var(--ok);font-weight:700}
.tc-dm{grid-template-columns:minmax(130px,1fr) minmax(200px,2.2fr) minmax(50px,.4fr) minmax(200px,2fr)}
.tc-rr-ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.tc-rr{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--rr);border-radius:10px}
.tc-rr > div{min-width:0}
.tc-rr-so{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:none;max-width:45%}
@media(max-width:700px){.tc-luoi{grid-template-columns:1fr}}

/* V50·168 — lượt gọn của trợ lý: nút hành động một hàng */
.ht-nut{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* V50 — Bộ não vận hành */
.bn-phanhe{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.bn-ph{padding:12px 14px;margin:0}
.bn-ph.bn-tat{opacity:.75}
.bn-ph-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.bn-pill{flex:none;font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;color:var(--bp);border:1px solid var(--bp);white-space:nowrap}
.bn-buoc{display:grid;gap:8px;margin-top:10px}
.bn-b{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-left:4px solid var(--bt);border-radius:10px}
.bn-b > div{min-width:0}
.bn-nut{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ═══════════ XƯỞNG PHIM AI — khung ba cột (src/xuong-ai.js) ═══════════
   Trái: danh mục theo nhóm · giữa: bảng làm việc · phải: dự án và bước
   tiếp. Dưới 1180px cột phải xuống dưới; dưới 860px danh mục thành một
   dải cuộn ngang ở đầu — ngón cái với tới, không chiếm nửa màn. */
.xa{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:18px;align-items:start}
.xa-trai{position:sticky;top:calc(var(--top-tong,66px) + 12px);display:flex;flex-direction:column;gap:14px;
  padding:12px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--surface)}
.xa-nhom{display:flex;flex-direction:column;gap:2px}
.xa-nhom-t{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:0 8px 4px}
.xa-muc{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border:0;border-radius:10px;
  background:transparent;color:var(--ink-2);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.xa-muc:hover{background:var(--phu-2)}
.xa-muc.on{background:var(--gita-mo-2);color:var(--gold-ink);font-weight:700}
.xa-muc:focus-visible,.xa-tao:focus-visible,.xa-gan-o:focus-visible,.xa-kho-o:focus-visible,.xa-tiep:focus-visible{outline:2px solid var(--gita);outline-offset:2px}
/* Bảng giữa KHÔNG có viền và nền: công cụ bên trong đã có thẻ của chúng,
   bọc thêm một thẻ là thẻ lồng thẻ (luật TK14 bắt ở lần soát đầu). */
.xa-giua{min-width:0;padding:2px 0 0}
.xa-giua-t{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;margin:0 0 14px;color:var(--ink)}
.xa-phai{position:sticky;top:calc(var(--top-tong,66px) + 12px);display:flex;flex-direction:column;gap:10px}
.xa-the{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.xa-the b{font-size:16px;color:var(--ink)}
.xa-the .btn{align-self:flex-start;margin-top:6px}
.xa-tiep{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--gita-vien-1);border-radius:12px;
  background:var(--gita-mo-1);color:var(--gold-ink);font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}
.xa-h{font-size:16px;font-weight:800;margin:20px 0 10px;color:var(--ink)}
.xa-tao-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.xa-tao{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-1);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:132px}
.xa-tao:hover{border-color:var(--gita-vien-2)}
.xa-tao svg{color:var(--gita)}
.xa-tao b{font-size:16px}
.xa-tao span{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.xa-gan{display:flex;flex-direction:column;gap:8px}
.xa-gan-o{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-1);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.xa-gan-o span{font-size:12.5px;color:var(--ink-3)}
.xa-kho{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.xa-kho-o{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-1);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.xa-kho-o.on{border-color:var(--gita);background:var(--gita-mo-1)}
.xa-kho-o span:last-child{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.xa-kho-hinh{display:block;border:2px solid var(--gita);border-radius:6px;background:var(--gita-mo-2)}
.xa-giong{display:flex;flex-direction:column;gap:10px;padding-left:20px;margin:0 0 12px}
.xa-giong li b{display:block;font-size:16px;color:var(--ink)}
.xa-giong li span{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.xa-logo{display:flex;gap:16px;margin-bottom:14px}
.xa-logo img{border:1px solid var(--line);border-radius:12px;background:#fff;padding:6px}
.xa-mau{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.xa-mau-o{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--ink-3)}
.xa-mau-o b{font-size:14.5px;color:var(--ink)}
.xa-mau-cham{display:block;height:44px;border-radius:10px;border:1px solid var(--line)}
/* Cắt theo nhịp nhạc (src/cat-nhip.js) */
.cn{display:flex;flex-direction:column;gap:14px}
.cn-buoc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cn-nap{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--bg-1);cursor:pointer}
.cn-nap{position:relative}
.cn-nap b{font-size:14.5px;color:var(--ink)}
.cn-nap .btn{align-self:flex-start;pointer-events:none}
/* Ô chọn tệp gốc của trình duyệt in chữ tiếng Anh ("Choose File") — giấu
   đi nhưng vẫn bấm được qua cả nhãn, và vẫn nhận phím Tab. */
.cn-nap input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.cn-nap:focus-within{outline:2px solid var(--gita);outline-offset:2px}
.cn-so{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cn-so>div{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-1)}
.cn-so b{font-size:21px;color:var(--ink)}
.cn-bao{margin:0;padding:10px 12px;border-radius:10px;background:var(--phu-2);color:var(--warn);font-size:14.5px;line-height:1.5}
.cn-truc-boc{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg-1);overflow:hidden}
#cn-truc{display:block;width:100%;height:64px}
.cn-vitri{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--gita-do-ink);pointer-events:none}
.cn-chinh{display:flex;flex-wrap:wrap;gap:12px}
.cn-chinh label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-3)}
.cn-vat{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}
.cn-vat-o{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;border-radius:8px;background:var(--phu-1)}
.cn-xem{display:flex;justify-content:center;background:#000;border-radius:12px;padding:10px}
#cn-cv{max-width:100%;max-height:60vh;max-height:60dvh;height:auto;width:auto;border-radius:6px}
@media(max-width:1180px){
  .xa{grid-template-columns:200px minmax(0,1fr)}
  .xa-phai{position:static;grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .xa-phai>*{flex:1 1 200px}
}
@media(max-width:860px){
  .xa{grid-template-columns:minmax(0,1fr)}
  .xa-trai{position:static;flex-direction:row;overflow-x:auto;gap:4px;padding:8px;-webkit-overflow-scrolling:touch}
  .xa-nhom{flex-direction:row;gap:4px}
  .xa-nhom-t{display:none}
  .xa-muc{white-space:nowrap;flex:none}
  .cn-so{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.xa-muc,.xa-tao,.xa-gan-o{transition:none}}
/* Dải cảnh của bàn dựng cắt nhịp — mỗi ô rộng theo độ dài cảnh */
.cn-dai{display:flex;gap:2px;height:56px;border-radius:10px;overflow:hidden;background:var(--phu-2)}
.cn-dai-o{position:relative;flex:0 0 auto;min-width:8px;border:0;padding:0;cursor:pointer;
  background:var(--gita-mo-2) center/cover no-repeat;color:var(--chu-tren-anh);font:inherit}
.cn-dai-o.clip{background-color:var(--t2)}
.cn-dai-o span{position:absolute;left:4px;bottom:3px;font-size:10.5px;font-weight:700;color:var(--chu-tren-anh);
  text-shadow:0 1px 2px rgba(0,0,0,.8)}
.cn-dai-o:focus-visible{outline:2px solid var(--gita);outline-offset:-2px}
.cn-dai-o:hover{filter:brightness(1.08)}
#cn-truc{cursor:pointer}
.cn-ds summary{cursor:pointer;color:var(--ink-2)}

/* ═══════════ CHƯƠNG TRÌNH ĐÀO TẠO (src/dao-tao-ct.js) ═══════════
   Dùng lại khung co-* của Hệ điều hành Coach; ở đây chỉ thêm nhãn loại
   bước (màu đọc từ --m, không gõ tay) và ô biểu mẫu mở ngay dưới dòng. */
.dtc-ma{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-4);font-variant-numeric:tabular-nums;min-width:38px}
.dtc-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:1px 8px;border-radius:999px;vertical-align:1px;
  color:var(--m);background:color-mix(in srgb,var(--m) 12%,transparent)}
.dtc-form{flex-basis:100%;display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px dashed var(--line)}
.dtc-form .inp{width:100%}
.dtc-luat > div{flex-direction:column;gap:2px}
/* Thi chứng chỉ (src/thi-chung-chi.js) */
.tcc-ca{display:flex;flex-direction:column;gap:4px}
.tcc-ca textarea{width:100%}
.tcc-thang{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:8px}
.tcc-thang > div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.tcc-bai{white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 12px;border-left:3px solid var(--gita);background:var(--surface);border-radius:8px}
.tcc-bang{overflow-x:auto;margin-bottom:12px}
.tcc-chi ul{margin:4px 0 8px 18px}
.tcc-chi p{margin:6px 0 2px}
.tcc-chi summary{cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px}
/* Kho Ngôi nhà thịnh vượng (src/kho-nha.js) — 21 ô, cẩm nang ba cấp */
.kn-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:14px}
.kn-the{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:left;cursor:pointer}
.kn-the.on{border-color:var(--gita);box-shadow:inset 0 0 0 1px var(--gita)}
.kn-the.chua{opacity:.72}
.kn-sach{display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.kn-o{display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.55}
.kn-o > b{font-size:12.5px;color:var(--ink-3)}
.kn-mo{border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.kn-mo > summary{cursor:pointer;min-height:32px;display:flex;align-items:center;font-weight:700}
.kn-khoi{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-left:3px solid var(--gita);background:var(--surface);border-radius:8px;margin:4px 0}
.kn-so{font-size:12.5px;color:var(--gita)}
.kn-ds{margin:2px 0 4px 20px;line-height:1.55}
/* Khoá khuôn mặt — ô tên thiết bị thay cho window.prompt (Electron không hỗ trợ prompt) */
.st-nhan{display:block;font-size:12.5px;font-weight:700;margin:4px 0 6px}
.st-ten{max-width:420px;margin-bottom:10px}
.st-nut{gap:8px;flex-wrap:wrap;align-items:center}
/* ── NGÔI NHÀ V50 · MƯỜI MỘT KHÔNG GIAN (10/10/2026) ──
   Thẻ không gian: ảnh gia đình thật ở trên · chỗ đứng trong nhà · tên ·
   câu triết lý (chữ có chân, nghiêng — giọng của một người thầy, không
   phải giọng của một nút bấm) · câu hỏi tối nay · lối vào. Sắc riêng của
   phòng (--ac) chỉ ở viền trên và nhãn, không tô cả thẻ: nhiều màu cùng
   lúc trên cả lưới thì không màu nào còn nói được gì. Lưới auto-fill tự
   xuống một cột trên điện thoại, không thêm @media. */
.nha-kg{margin:28px 0 8px}
.nha-kg-dau{max-width:68ch;margin:0 0 16px}
.nha-kg-eb{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gita-ink)}
.nha-kg-dau h3{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.2;margin:6px 0 8px;text-wrap:balance}
.nha-kg-dau p{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:0}
.nha-kg-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.nha-kg-o{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--ac,var(--gita));border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--noi-1)}
.nha-kg-anh{aspect-ratio:3/2;overflow:hidden;background:var(--phu-2)}
.nha-kg-anh img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.nha-kg-than{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.nha-kg-cho{font-size:12.5px;font-weight:700;color:var(--ac,var(--gita));letter-spacing:.02em}
.nha-kg-o h4{font-size:18px;line-height:1.3;font-weight:800;margin:0}
.nha-kg-triet{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;line-height:1.55;margin:0;color:var(--ink)}
.nha-kg-hoi{font-size:14.5px;line-height:1.6;margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--phu-2);color:var(--ink-2)}
.nha-kg-hoi b{display:block;font-size:12.5px;color:var(--ink);margin-bottom:2px}
.nha-kg-nut{margin-top:auto;align-self:flex-start;min-height:40px}
.nha-kg-khoa{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
@media(hover:hover){.nha-kg-o:hover .nha-kg-anh img{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.nha-kg-anh img{transition:none}}
/* ── BẢN TIN GITA · truyền thông nội bộ (src/truyen-thong.js) ──
   Giọng một tờ báo nội bộ có biên tập: tiêu đề chữ có chân, ảnh 3D trên
   cùng thẻ, chuyên mục là nhãn nhỏ. Bài bắt buộc chưa xác nhận dùng màu
   cảnh báo — đó là việc phải làm, không phải trang trí. */
.tt-dau{max-width:72ch;margin:0 0 14px}
.tt-dau h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:4px 0 8px}
.tt-dau p,.tt-phu{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.tt-eb{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gita-ink)}
.tt-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:8px}
.tt-tab{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.tt-tab.on{background:var(--gita);border-color:var(--gita);color:var(--chu-tren-mau,#fff)}
.tt-tab svg{width:16px;height:16px}
.tt-loc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.tt-loc label{font-weight:700;font-size:14.5px}.tt-loc select{max-width:360px}
.tt-canlam{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--warn);background:var(--phu-2);margin:0 0 14px;font-size:14.5px}
.tt-canlam b{color:var(--warn)}
.tt-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.tt-the{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--noi-1)}
.tt-anh{aspect-ratio:3/2;overflow:hidden;background:var(--phu-2)}
.tt-anh img{display:block;width:100%;height:100%;object-fit:cover}
.tt-anh-lon{border-radius:var(--r-lg);margin:12px 0}
.tt-than{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1}
.tt-cm{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gita-ink)}
.tt-cm svg{width:14px;height:14px}
.tt-the h3{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.35;margin:0}
.tt-tom{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.tt-chan{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-2)}
.tt-nhan{font-weight:700}.tt-nhan.ok{color:var(--ok,var(--gita))}.tt-nhan.gap{color:var(--warn)}
.tt-mo{margin-top:auto;align-self:flex-start}
.tt-bai{max-width:72ch;margin:12px 0}
.tt-bai h2{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.25;margin:6px 0 8px;text-wrap:balance}
.tt-sapo{font-size:16px;line-height:1.65;font-weight:600;margin:0 0 6px}
.tt-meta,.tt-nguon{font-size:12.5px;color:var(--ink-2)}
.tt-van{font-size:16px;line-height:1.75}.tt-van p{margin:0 0 12px}
.tt-buoc{font-size:16px;line-height:1.7;padding-left:22px}
.tt-ghinhan,.tt-hanhdong,.tt-moc{padding:12px 14px;border-radius:var(--r-sm);background:var(--phu-2);margin:12px 0;font-size:14.5px;line-height:1.65}
.tt-hanhdong{border-left:3px solid var(--gita)}
.tt-kiemtra{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);margin:16px 0}
.tt-kiemtra fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.tt-kiemtra legend{font-weight:700;font-size:14.5px;margin-bottom:4px}
.tt-chon{display:flex;gap:8px;align-items:center;min-height:32px;font-size:14.5px}
.tt-kiemtra.ok{color:var(--gita-ink);font-weight:700}
.tt-nen{display:flex;flex-direction:column;gap:22px;max-width:980px}
.tt-khoi h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.35;margin:4px 0 8px;text-wrap:balance}
.tt-gt{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.tt-gt-o{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-size:14.5px;line-height:1.6}
.tt-gt-o b{font-size:18px;color:var(--gita-ink);margin-right:6px}.tt-gt-o span{font-weight:700}
.tt-gt-o p{margin:6px 0 0}
.tt-nen-ok{color:var(--gita-ink)}.tt-nen-khong{color:var(--warn)}
.tt-ds{font-size:14.5px;line-height:1.7;padding-left:22px;margin:0}.tt-ds li{margin-bottom:6px}
.tt-bang{overflow-x:auto}
.tt-soan{max-width:760px;display:flex;flex-direction:column;gap:12px}
.tt-o{display:flex;flex-direction:column;gap:4px}
.tt-o b{font-size:14.5px}.tt-o span{font-size:12.5px;color:var(--ink-2);white-space:pre-line}
.tt-chk{display:flex;gap:8px;align-items:center;min-height:32px;font-size:14.5px}
.tt-nut{gap:8px;flex-wrap:wrap}
.tt-loi{padding:10px 12px;border:1px solid var(--warn);border-radius:var(--r-sm);font-size:14.5px;color:var(--warn)}
.tt-lich{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px;margin-bottom:12px}
.tt-lich-o{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px}
.tt-lich-o b{font-size:14.5px}.tt-lich-o em{font-style:normal;color:var(--gita-ink);font-weight:700}
.tt-lich-o.trong{border-style:dashed}.tt-lich-o.trong em{color:var(--warn)}
.tt-duyet h4{font-family:var(--serif);font-size:18px;margin:4px 0}
.tt-cs-so{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.tt-cs-so b{font-size:33px;font-weight:800;color:var(--gita-ink);font-variant-numeric:tabular-nums}
.tt-cs-so span{font-size:14.5px;color:var(--ink-2)}

/* ═══ Phòng VVIP (src/phong-vvip.js) — dùng lại thanh ngăn .tt-tabs của Bản tin ═══
   Lưới tự xuống một cột (auto-fit), không thêm @media — khỏi đụng luật
   "khối khổ chạm nằm cuối tệp". Màu chỉ lấy token. */
.man-vv .vv-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 12px}
.man-vv .vv-o{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:6px}
.man-vv .vv-k{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.man-vv .vv-so{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.man-vv .vv-chua{font-size:18px;color:var(--ink-3);font-family:inherit}
.man-vv .vv-cot{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;align-items:end;height:170px;padding:8px 0;border-bottom:1px solid var(--line)}
.man-vv .vv-c{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.man-vv .vv-c b{font-size:10.5px;color:var(--ink-2)}
.man-vv .vv-cb{width:100%;max-width:38px;background:var(--gita);border-radius:6px 6px 2px 2px;opacity:.85}
.man-vv .vv-nhan{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--phu-1);border:1px solid var(--line);color:var(--ink-2)}
.man-vv .vv-nhan.xanh{border-color:var(--ok,var(--gita));color:var(--ok,var(--gita))}
.man-vv .vv-nhan.vang{border-color:var(--warn,var(--gold));color:var(--warn,var(--gold))}
.man-vv .vv-nhan.do{border-color:var(--err,var(--gita-sau));color:var(--err,var(--gita-sau))}
.man-vv .vv-dau{display:inline-grid;place-items:center;width:22px;height:22px;margin:1px;border-radius:6px;font-size:10.5px;font-weight:700;border:1px solid var(--line)}
.man-vv .vv-dau.co{background:var(--gita);border-color:var(--gita);color:var(--chu-tren-mau,#fff)}
.man-vv .vv-dau.chua{border-style:dashed;color:var(--ink-3)}
.man-vv .vv-dau.khong{color:var(--ink-4,var(--ink-3));opacity:.6}
.man-vv .vv-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end;margin:0 0 14px}
.man-vv .vv-form label{display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:600}
.man-vv .vv-form .vv-rong{grid-column:1/-1}
.man-vv .vv-form textarea,.man-vv .vv-form input,.man-vv .vv-form select{width:100%}
.man-vv .vv-cho{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.man-vv .vv-tl,.man-vv .vv-dc{margin:0 0 10px}
.man-vv .vv-tl summary,.man-vv .vv-dc summary{cursor:pointer;min-height:32px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.man-vv .vv-may pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;background:var(--phu-1);border-radius:var(--r);padding:10px;max-height:320px;overflow:auto}
.man-vv .vv-chuan{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:var(--r);padding:10px;margin:8px 0}
.man-vv .vv-chuan label{display:flex;gap:8px;align-items:center;min-height:32px}
.man-vv .vv-hai{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.man-vv .vv-ds{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.man-vv .vv-bia{border-left:4px solid var(--gita)}
.man-vv .vv-bia h2{font-family:var(--serif);font-size:26px;margin:4px 0}
.man-vv .vv-loi,.man-vv .vv-canh{border-color:var(--warn,var(--gold))}
/* Nút trong Phòng VVIP được xuống dòng: .btn chung khai nowrap, và một nhãn
   dài đẩy cả trang cuộn ngang ở khổ 390px (đo được 440px). Nới ĐÚNG trong màn
   này, không nới .btn toàn cục. */
.man-vv .btn{white-space:normal;height:auto;min-height:36px;text-align:center}
.man-vv .vv-cho label{display:flex;flex-direction:column;gap:4px}
.man-vv .vv-cho textarea{width:100%}
/* Xưởng phim (N11, soát 10/2026): ô chọn "Phạm vi" của khối Kaggle rộng 243px
   đẩy trang 1440px cuộn ngang (scrollWidth 1453) — hàng trong xưởng xuống dòng,
   ô chọn không vượt khung. */
.man-xu .row{flex-wrap:wrap}
.man-xu select{max-width:100%}
.man-xu .xp-giong{align-items:center;gap:8px;margin:6px 0}
.man-xu .xp-canh-bao{color:var(--warn,var(--gold));font-weight:600}
/* ═══ Học video đào tạo (src/hoc-video.js) — màu chỉ lấy token, lưới tự
   xuống một cột (auto-fit), nút xuống dòng trong màn này (không nới .btn
   toàn cục). Chữ hiện dần theo giọng đọc; máy "giảm chuyển động" thì hiện ngay. ═══ */
.man-hv .btn{white-space:normal;height:auto;min-height:36px;text-align:center}
.man-hv .hv-luat{border-left:4px solid var(--gita)}
.man-hv .hv-luat ol{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.man-hv .hv-ba{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0}
.man-hv .hv-so-o{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:4px}
.man-hv .hv-so-o.do{border-color:var(--bad)}
.man-hv .hv-k{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.man-hv .hv-so{font-family:var(--serif);font-size:33px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.man-hv .hv-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:0 0 16px}
.man-hv .hv-the{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;min-height:96px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink)}
.man-hv .hv-the.xong{border-color:var(--ok)}
.man-hv .hv-ba-nut{display:flex;flex-wrap:wrap;gap:6px}
.man-hv .hv-nho{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--bg-1);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.man-hv .hv-nho:hover{border-color:var(--gita)}
.man-hv .hv-nho.xong{border-color:var(--ok);color:var(--ok)}
.man-hv .hv-nho svg{width:14px;height:14px}
.man-hv .hv-the-ma{font-size:12.5px;font-weight:700;color:var(--gita-ink);font-variant-numeric:tabular-nums}
.man-hv .hv-the-ten{font-weight:600;font-size:14.5px;line-height:1.35}
.man-hv .hv-the-chan{font-size:12.5px;color:var(--ink-3);margin-top:auto}
.man-hv .hv-nhan{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2)}
.man-hv .hv-nhan.xanh{border-color:var(--ok);color:var(--ok)}
.man-hv .hv-nhan.vang{border-color:var(--warn);color:var(--warn)}
.man-hv .hv-nhan.do{border-color:var(--bad);color:var(--bad)}
.man-hv .hv-canh,.man-hv .hv-loi{color:var(--warn);font-weight:600}
.man-hv .hv-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end;margin:0 0 10px}
.man-hv .hv-form label{display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:600}
.man-hv .hv-form input,.man-hv .hv-form select,.man-hv .hv-form textarea{width:100%}
.man-hv .hv-dau{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.man-hv .hv-ma{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.man-hv .hv-ten{font-family:var(--serif);font-size:26px;margin:10px 0 4px}
.man-hv .hv-muc{color:var(--ink-2);margin:0 0 10px}
.man-hv .hv-tiendo{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 12px}
.man-hv .hv-tiendo li{min-width:32px;min-height:28px;display:inline-grid;place-items:center;padding:0 8px;border-radius:99px;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink-3)}
.man-hv .hv-tiendo li.xong{background:var(--phu-1);color:var(--ink-2)}
.man-hv .hv-tiendo li.dang{background:var(--gita);border-color:var(--gita);color:var(--chu-tren-mau)}
.man-hv .hv-man{position:relative;background:linear-gradient(160deg,var(--bg-1),var(--bg-2));border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;min-height:280px;display:flex;flex-direction:column;gap:12px}
.man-hv .hv-doan{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gita-ink);margin:0}
.man-hv .hv-slide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.man-hv .hv-slide h3{font-size:21px;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.man-hv .hv-slide ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.45}
.man-hv .hv-y{opacity:.18;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.man-hv .hv-y.hien{opacity:1;transform:none}
.man-hv .hv-quydinh{border-left:4px solid var(--bad)}
.man-hv .hv-phude{min-height:3em;margin:0;font-size:16px;line-height:1.5;color:var(--ink);background:var(--phu-1);border-radius:var(--r);padding:8px 12px}
.man-hv .hv-tonghop{margin:0;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.man-hv .hv-nut{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin:12px 0}
.man-hv .hv-treo{min-height:1.4em;font-weight:600;margin:0}
.man-hv .hv-treo.vang{color:var(--warn)}
.man-hv .hv-treo.do{color:var(--bad)}
.man-hv .hv-hoi,.man-hv .hv-thi fieldset{margin:12px 0}
.man-hv .hv-thi fieldset{border:1px solid var(--line)}
.man-hv .hv-thi legend{font-weight:600;padding:0 4px}
.man-hv .hv-chon{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:8px 0}
.man-hv .hv-o{min-height:44px;padding:8px 12px;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.man-hv .hv-o[aria-pressed="true"]{border-color:var(--gita);background:var(--phu-1);font-weight:700}
.man-hv .hv-o.dung{border-color:var(--ok);font-weight:700}
.man-hv .hv-o.sai{border-color:var(--bad)}
.man-hv .hv-giai.dung{color:var(--ok)}
.man-hv .hv-giai.sai{color:var(--bad)}
.man-hv .hv-kq{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:16px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);margin:0 0 12px}
.man-hv .hv-kq.dat{border-color:var(--ok)}
.man-hv .hv-kq.chua{border-color:var(--warn)}
.man-hv .hv-kq p{flex-basis:100%;margin:0}
.man-hv .hv-diem{font-family:var(--serif);font-size:33px;font-weight:600;font-variant-numeric:tabular-nums}
.man-hv .hv-loicuoi.chuc{border-left:4px solid var(--ok)}
.man-hv .hv-loicuoi.nhac{border-left:4px solid var(--warn)}
.man-hv .hv-xem.dung{border-left:4px solid var(--ok)}
.man-hv .hv-xem.sai{border-left:4px solid var(--bad)}
.man-hv .hv-sos{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:var(--nen-mo);backdrop-filter:blur(3px);padding:16px}
.man-hv .hv-sos-hop{max-width:420px;width:100%;background:var(--bg-1);border:2px solid var(--bad);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:10px;text-align:center}
.man-hv .hv-sos-hop b{font-size:21px;color:var(--bad)}
.man-hv .hv-sos-ma{font-family:var(--serif);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.man-hv .hv-sos-chon{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.man-hv .hv-sos-chon .btn{min-width:88px;font-size:21px}
@media (prefers-reduced-motion:reduce){.man-hv .hv-y{transition:none;transform:none}}
/* Học tập — bảng đo tháng, màu vinh danh, tài liệu, bài thi ba phần */
.man-hv .hv-mau{display:inline-block;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--ink-3);background:var(--phu-1)}
.man-hv .hv-mau.xanh{border-color:var(--ok);color:var(--ok)}
.man-hv .hv-mau.vang{border-color:var(--warn);color:var(--warn)}
.man-hv .hv-mau.do{border-color:var(--bad);color:var(--bad)}
.man-hv .hv-mau.xam{border-color:var(--ink-3);color:var(--ink-3)}
.man-hv .hv-chu-mau{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.man-hv .hv-bang-dau{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.man-hv .hv-bang-dau label{display:flex;flex-direction:column;gap:4px;font-size:14.5px;font-weight:600}
.man-hv .hv-tong{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 12px}
.man-hv .hv-tong>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:2px}
.man-hv .hv-tong b{font-family:var(--serif);font-size:26px;font-variant-numeric:tabular-nums}
.man-hv .hv-bang-cuon{overflow-x:auto;max-width:100%}
.man-hv .hv-doc{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.man-hv .hv-doc section{max-width:72ch}
.man-hv .hv-doc h3{font-size:18px;margin:0 0 6px}
.man-hv .hv-doc p{line-height:1.6;margin:6px 0 0}
.man-hv .hv-vd{display:flex;flex-direction:column;gap:10px}
.man-hv .hv-boicanh{margin:0;font-weight:600}
.man-hv .hv-may{align-self:flex-start;max-width:85%;background:var(--phu-1);border:1px solid var(--line);border-radius:var(--r) var(--r) var(--r) 4px;padding:10px 12px;display:flex;gap:6px;align-items:flex-start}
.man-hv .hv-may svg{width:16px;height:16px;flex:none;margin-top:3px}
.man-hv .hv-dap{border-color:var(--gita)}
.man-hv .hv-nguoi{align-self:flex-end;max-width:85%;background:var(--gita);color:var(--chu-tren-mau);border-radius:var(--r) var(--r) 4px var(--r);padding:10px 12px}
.man-hv .hv-form1{display:flex;flex-direction:column;gap:8px}
.man-hv .hv-form1 label{font-weight:600}
.man-hv .hv-form1 textarea{width:100%}
.man-hv .hv-y-ds{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.man-hv .hv-y-ds .dung{color:var(--ok)}
.man-hv .hv-y-ds .sai{color:var(--bad)}
.man-hv .hv-tl summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.man-hv .hv-bai{white-space:pre-wrap;background:var(--phu-1);border-radius:var(--r);padding:10px}
/* Khung xem lớn của bài học (src/hoc-video.js → khungLon). Phủ kín màn hình,
   nằm DƯỚI hộp báo (#toast z-index 300) để lời báo lỗi vẫn đọc được.
   .view chạy hiệu ứng trượt bằng transform — mà một tổ tiên có transform thì
   position:fixed neo vào tổ tiên ấy chứ không neo vào màn hình, nên tắt hiệu
   ứng đúng ở trang đang mở khung lớn. Trình duyệt cũ không có :has() thì khung
   vẫn lớn hết vùng nội dung, chỉ là chưa phủ cột trái. */
.man-hv.hv-lon{position:fixed;inset:0;z-index:260;overflow-y:auto;overscroll-behavior:contain;background:var(--bg-0);
  padding:calc(var(--sat) + 14px) 16px calc(var(--sab) + 24px)}
.man-hv.hv-lon:focus{outline:none}
.man-hv .hv-lon-trong{max-width:1120px;margin:0 auto}
.view:has(.hv-lon),main:has(.hv-lon){animation:none;transform:none}
body:has(.hv-lon){overflow:hidden}
/* Nút trợ lý nổi (.tln-fab) và thanh dưới nằm lớp riêng nên vẫn đè lên khung — ẩn trong lúc học. */
body:has(.hv-lon) .tln-fab,body:has(.hv-lon) #hnav,body:has(.hv-lon) #top{visibility:hidden}
.man-hv.hv-lon .hv-dau{position:sticky;top:calc(-14px - var(--sat));z-index:2;background:var(--bg-0);padding:8px 0;margin-top:-8px}
.man-hv.hv-lon .hv-man{min-height:58vh;min-height:58dvh;padding:28px}
.man-hv.hv-lon .hv-slide{padding:22px 26px}
.man-hv.hv-lon .hv-slide h3{font-size:26px}
.man-hv.hv-lon .hv-slide ul{font-size:21px;gap:12px}
.man-hv.hv-lon .hv-phude{font-size:18px}
.man-hv.hv-lon .hv-doc{padding:28px}
.man-hv.hv-lon .hv-doc section{max-width:78ch}
.man-hv.hv-lon .hv-doc h3{font-size:21px}
.man-hv.hv-lon .hv-doc p,.man-hv.hv-lon .hv-doc li{font-size:18px}
@media(max-width:600px){
  .man-hv.hv-lon{padding:calc(var(--sat) + 8px) 12px calc(var(--sab) + 20px)}
  .man-hv.hv-lon .hv-dau{top:calc(-8px - var(--sat))}
  .man-hv.hv-lon .hv-man{padding:16px;min-height:50vh;min-height:50dvh}
  .man-hv.hv-lon .hv-slide{padding:14px 16px}
  .man-hv.hv-lon .hv-slide h3{font-size:21px}
  .man-hv.hv-lon .hv-slide ul{font-size:18px}
  .man-hv.hv-lon .hv-phude{font-size:16px}
  .man-hv.hv-lon .hv-doc{padding:16px}
  .man-hv.hv-lon .hv-doc h3{font-size:18px}
  .man-hv.hv-lon .hv-doc p,.man-hv.hv-lon .hv-doc li{font-size:16px}
}

/* Ảnh đầu màn (G.anhPhan) — cùng khuôn figure.m-anh của trang tĩnh; marketing.css không nạp trong app */
.m-anh{margin:0 0 16px;max-width:720px}
.m-anh picture,.m-anh img{display:block;width:100%}
.m-anh img{aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:var(--r)}
.m-anh figcaption{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
/* Thẻ tóm tắt (G.anhPhan(ma,'tom-tat',tep)) — QUY TẮC CHUNG chép y hệt marketing.css (thu-anh-thuc so) */
.m-anh--tom-tat{max-width:560px;margin:18px 0 8px}
.m-anh__lon{display:block;cursor:zoom-in}
.m-anh__lon:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* riêng app: viền token; nền tối thì viền giữ thẻ sáng khỏi loá */
figure.m-anh--tom-tat img{border:1px solid var(--line)}