/* ===== WKG MEDIA — giao diện chung (Black Myth Wukong) ===== */
:root{
  --bg-deep:#0a0606; --bg-1:#16100c; --bg-2:#1f1612; --bg-3:#2a1d16;
  --border-1:#3a261c; --border-2:#58392a;
  --gold-1:#ffd66e; --gold-2:#b8893e; --gold-3:#6b4a1f;
  --red-1:#c0392b; --red-2:#8b0000; --red-3:#5a0a0a;
  --text-1:#f0e5d2; --text-2:#c9b89a; --text-3:#a89271;
  --ok:#8ce69c; --err:#ff6b6b; --warn:#fbbf24;
  --shadow:0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,214,110,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--text-1);min-height:100vh;position:relative;
  overflow-x:hidden;line-height:1.55;font-size:16px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
a{color:var(--gold-1);text-decoration:none}

/* ===== Thanh cuộn phong cách Wukong (Kim Cô Bổng) ===== */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,#0a0606,#160f0b);box-shadow:inset 0 0 4px rgba(0,0,0,.6);border-radius:10px}
::-webkit-scrollbar-thumb{border-radius:10px;border:2px solid transparent;background-clip:padding-box;
  background-image:linear-gradient(90deg,#2a1d16 0%,#6b4a1f 20%,#ffd66e 50%,#6b4a1f 80%,#2a1d16 100%);
  box-shadow:0 0 8px rgba(255,214,110,.28),inset 0 0 0 1px rgba(255,214,110,.18)}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(90deg,#6b4a1f 0%,#b8893e 18%,#fff0c2 50%,#b8893e 82%,#6b4a1f 100%);
  box-shadow:0 0 15px rgba(255,214,110,.55),inset 0 0 0 1px rgba(255,214,110,.35)}
::-webkit-scrollbar-thumb:active{background-image:linear-gradient(90deg,#8b0000 0%,#c0392b 22%,#ffe9b0 50%,#c0392b 78%,#8b0000 100%)}
::-webkit-scrollbar-corner{background:#0a0606}

/* ===== Combobox tự dựng (phủ lên <select data-cbx>) — để danh sách xổ là phần tử TRONG trang,
   nhờ đó thanh cuộn vàng-gradient ::-webkit-scrollbar ở trên TỰ áp vào (native <select> không nhuộm được). ===== */
.cbx{position:relative;display:block;width:100%}
.cbx-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden}
.cbx-ctl{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border:1px solid var(--border-2);border-radius:8px;background:var(--bg-2);
  color:var(--text-1);cursor:pointer;font-size:15px;line-height:1.35;text-align:left;font-family:inherit}
.cbx-ctl:hover{border-color:var(--gold-3)}
.cbx.open .cbx-ctl{border-color:var(--gold-2);box-shadow:0 0 0 2px rgba(255,214,110,.18)}
.cbx-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-ph{color:var(--text-3)}
.cbx-car{flex:0 0 auto;opacity:.7;font-size:12px}
.cbx-panel{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  background:var(--bg-1);border:1px solid var(--border-2);border-radius:8px;box-shadow:var(--shadow);
  padding:6px;display:none}
.cbx.open .cbx-panel{display:block}
.cbx-search{width:100%;padding:6px 10px;margin-bottom:6px;border:1px solid var(--border-1);
  border-radius:6px;background:var(--bg-2);color:var(--text-1);font-size:14px;font-family:inherit}
.cbx-list{max-height:260px;overflow-y:auto;overflow-x:hidden}
.cbx-grp{font-size:11.5px;color:var(--gold-2);padding:6px 10px 2px;font-weight:700;letter-spacing:.3px}
.cbx-opt{padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.cbx-opt:hover,.cbx-opt.active{background:rgba(212,175,55,.16)}
.cbx-opt.sel{color:var(--gold-1);font-weight:600}
.cbx-empty{padding:8px 10px;color:var(--text-3);font-size:13px}

/* ===== Nền cảnh Wukong: núi SVG + mây trôi 3 lớp + sương (lấy từ Toolbinh) ===== */
.bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-mountains{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Aura "thở" góc trên-phải như vầng trăng/mặt trời mờ */
.bg-aura{animation:auraPulse 8s ease-in-out infinite}
@keyframes auraPulse{0%,100%{opacity:.6}50%{opacity:1}}
/* Núi xa hơi "thở" nhẹ */
.bg-mountain-far{transform-origin:50% 100%;animation:mountainBreathe 12s ease-in-out infinite}
@keyframes mountainBreathe{0%,100%{opacity:.4}50%{opacity:.55}}

/* 3 lớp mây trôi sang trái với tốc độ khác nhau (parallax) */
.cloud-layer{position:absolute;top:0;left:0;width:200vw;height:70vh;pointer-events:none;will-change:transform;
  animation-name:cloudDrift;animation-timing-function:linear;animation-iteration-count:infinite}
.cloud{position:absolute;border-radius:50%;filter:blur(8px);
  background:radial-gradient(ellipse at center,rgba(255,214,110,.55) 0%,rgba(184,137,62,.35) 40%,rgba(184,137,62,0) 70%)}
.cloud-layer-slow{opacity:.55;animation-duration:75s}
.cloud-layer-slow .cloud{filter:blur(12px);background:radial-gradient(ellipse at center,rgba(184,137,62,.7) 0%,rgba(184,137,62,.35) 45%,rgba(184,137,62,0) 75%)}
.cloud-layer-med{opacity:.40;animation-duration:50s;animation-delay:-18s}
.cloud-layer-med .cloud{filter:blur(6px);background:radial-gradient(ellipse at center,rgba(255,214,110,.55) 0%,rgba(255,214,110,.25) 50%,rgba(255,214,110,0) 80%)}
.cloud-layer-fast{opacity:.50;animation-duration:32s;animation-delay:-8s}
.cloud-layer-fast .cloud{filter:blur(4px);background:radial-gradient(ellipse at center,rgba(255,214,110,.6) 0%,rgba(255,214,110,.25) 50%,rgba(255,214,110,0) 80%)}
@keyframes cloudDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100vw,0,0)}}

/* Sương mờ — 2 quầng radial trôi chậm */
.mist{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform}
.mist-1{width:600px;height:600px;top:-10%;left:-10%;background:radial-gradient(circle,rgba(255,214,110,.08) 0%,transparent 70%);animation:mistFloat1 24s ease-in-out infinite}
.mist-2{width:700px;height:700px;bottom:-15%;right:-10%;background:radial-gradient(circle,rgba(192,57,43,.06) 0%,transparent 70%);animation:mistFloat2 30s ease-in-out infinite}
@keyframes mistFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(120px,80px)}}
@keyframes mistFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-100px,-60px)}}

/* ===== Mascot Wukong cầm gậy — BAY dọc theo thanh cuộn (top do JS đặt theo % cuộn) ===== */
.corner-mascot{position:fixed;right:16px;top:84px;width:78px;height:78px;z-index:40;pointer-events:none;opacity:.9;
  transition:top .45s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,214,110,.28))}
.corner-mascot svg{width:100%;height:100%}
.mascot-ring{animation:ringPulse 3s ease-in-out infinite}
.mascot-staff{transform-origin:59.5px 41px;animation:staffWobble 4s ease-in-out infinite}
@keyframes ringPulse{0%,100%{filter:drop-shadow(0 0 4px rgba(255,214,110,.6))}50%{filter:drop-shadow(0 0 14px rgba(255,214,110,1))}}
@keyframes staffWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

@media (prefers-reduced-motion: reduce){
  .cloud-layer,.bg-aura,.bg-mountain-far,.mist,.mascot-ring,.mascot-staff,.fcloud,.foot-glow,.foot-ridge,.foot-co{animation:none !important}
}

/* ===== Trang đăng nhập / đổi mật khẩu (card giữa màn) ===== */
.auth-wrap{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:380px;max-width:94vw;border-radius:20px;padding:36px 30px 30px;text-align:center;
  background:linear-gradient(160deg,#1c1109,#2a1206 55%,#3a0d0d);
  border:1px solid var(--gold-3);box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 46px rgba(255,214,110,.12)}
.auth-card img.logo{width:92px;height:92px;border-radius:50%;border:2px solid var(--gold-3);
  object-fit:cover;box-shadow:0 0 26px rgba(255,214,110,.35)}
.auth-card .co{font-size:12px;letter-spacing:4px;color:var(--gold-2);margin-top:12px}
.auth-card .nm{font-size:30px;font-weight:900;letter-spacing:2px;margin:2px 0;color:var(--gold-1);
  text-shadow:0 0 14px rgba(255,214,110,.4)}
.auth-card .ln{width:64px;height:3px;border-radius:3px;margin:8px auto 12px;
  background:linear-gradient(90deg,var(--red-1),var(--gold-1))}
.auth-card .sl{font-size:14.5px;font-style:italic;color:var(--text-1);margin-bottom:22px}
.auth-card h2{font-size:17px;color:var(--gold-1);margin:0 0 16px;font-weight:700}

.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--text-3);margin-bottom:5px;letter-spacing:.3px}
.field input{width:100%;background:rgba(255,214,110,.06);border:1px solid var(--gold-3);border-radius:10px;
  padding:11px 13px;font-size:14.5px;color:var(--text-1);outline:none;transition:border .15s,box-shadow .15s}
.field input:focus{border-color:var(--gold-1);box-shadow:0 0 0 3px rgba(255,214,110,.12)}
/* con mắt hiện/ẩn mật khẩu */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:44px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;color:var(--gold-2);padding:7px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;transition:color .15s,background .15s}
.pw-toggle:hover{color:var(--gold-1);background:rgba(255,214,110,.12)}
.pw-toggle:focus-visible{outline:2px solid var(--gold-3);outline-offset:1px}
.pw-toggle svg{width:21px;height:21px;display:block}
.btn{display:block;width:100%;cursor:pointer;background:linear-gradient(180deg,var(--red-1),var(--red-2));
  border:1px solid var(--gold-3);border-radius:10px;padding:12px;font-weight:800;letter-spacing:1px;
  color:var(--gold-1);font-size:15px;box-shadow:0 0 16px rgba(255,214,110,.18);transition:transform .1s,box-shadow .15s}
.btn:hover{box-shadow:0 0 24px rgba(255,214,110,.32)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border-2);box-shadow:none}

.alert{border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px;text-align:left}
.alert-err{background:rgba(192,57,43,.16);border:1px solid var(--red-1);color:#ffd0c8}
.alert-ok{background:rgba(140,230,156,.12);border:1px solid var(--ok);color:#cdeed3}
.alert-warn{background:rgba(251,191,36,.12);border:1px solid var(--warn);color:#ffe9b0}

/* ===== Khung app (sau khi đăng nhập) ===== */
.app{position:relative;z-index:1;display:flex;min-height:100vh}
.side{width:230px;flex-shrink:0;background:linear-gradient(180deg,rgba(22,16,12,.96),rgba(10,6,6,.96));
  border-right:1px solid var(--border-2);padding:20px 14px;display:flex;flex-direction:column;gap:6px}
.side .brand{display:flex;align-items:center;gap:10px;padding:4px 6px 16px;border-bottom:1px solid var(--border-1);margin-bottom:10px}
.side .brand img{width:42px;height:42px;border-radius:50%;border:1px solid var(--gold-3);object-fit:cover}
.side .brand .t{font-weight:900;color:var(--gold-1);letter-spacing:1px;font-size:16px}
.side .brand .s{font-size:10px;color:var(--text-3)}
.side a.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--text-2);
  font-size:14px;font-weight:600;transition:all .12s}
.side a.nav:hover{background:rgba(255,214,110,.08);color:var(--gold-1)}
.side a.nav.active{background:rgba(192,57,43,.18);color:var(--gold-1);border:1px solid var(--gold-3)}
.side a.nav .ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.side a.nav .ic svg{width:21px;height:21px}
.page-ic{width:27px;height:27px;vertical-align:-5px;margin-right:8px}
.side .soon{opacity:.5;cursor:default}
.side .spacer{flex:1}
.side .logout{color:#ffb4a8}

/* ===== Menu phân tầng (vùng) + nhóm bấm-sổ-ra (accordion) ===== */
.side{align-self:flex-start;position:sticky;top:0;max-height:100vh;overflow-y:auto}
.side::-webkit-scrollbar{width:9px}
.nav-zone{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);
  opacity:.75;padding:15px 12px 5px;margin-top:4px;border-top:1px solid var(--border-1)}
.nav-zone:first-of-type{border-top:0}
.navgrp{display:flex;flex-direction:column}
.navgrp-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:none;border:0;color:var(--text-2);font-size:13.5px;font-weight:700;padding:9px 12px;border-radius:9px;transition:all .12s}
.navgrp-h:hover{background:rgba(255,214,110,.08);color:var(--gold-1)}
.navgrp-h .ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.navgrp-h .ic svg{width:21px;height:21px}
.navgrp-t{flex:1}
.navgrp-cv{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .16s;opacity:.55;flex-shrink:0;margin-right:3px}
.navgrp.open>.navgrp-h{color:var(--gold-1)}
.navgrp.open>.navgrp-h .navgrp-cv{transform:rotate(45deg);opacity:.8}
.navgrp-body{display:none;flex-direction:column;gap:3px;margin:2px 0 4px 17px;padding-left:9px;border-left:1px solid var(--border-1)}
.navgrp.open>.navgrp-body{display:flex}
.navgrp-body a.nav{font-size:13px;padding:7px 10px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;
  border-bottom:1px solid var(--border-2);background:rgba(10,6,6,.72);backdrop-filter:blur(8px)}
.topbar .pg{font-size:18px;font-weight:800;color:var(--gold-1)}
.topbar .me{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-2)}
.topbar .me .rk{background:rgba(192,57,43,.25);border:1px solid var(--gold-3);color:var(--gold-1);
  padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
/* Chuông thông báo (buổi 10) */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;text-decoration:none;line-height:1;border:1px solid transparent;flex:0 0 auto;color:var(--gold-1)}
.bell svg{width:20px;height:20px}
.bell:hover{background:rgba(212,175,55,.12);border-color:var(--gold-3)}
.bell-badge{position:absolute;top:-2px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:#c0392b;color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;border:1.5px solid var(--bg-1, #1a1110)}
/* Trang danh sách thông báo */
.tb-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line, #3a2a22);
  border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.02);text-decoration:none;color:inherit}
.tb-item:hover{border-color:var(--gold-3);background:rgba(212,175,55,.06)}
.tb-item.chua-doc{background:rgba(212,175,55,.10);border-color:var(--gold-3)}
.tb-ic{flex:0 0 auto;line-height:1.3;color:var(--gold-1);display:inline-flex}
.tb-ic svg{width:22px;height:22px}
.tb-body{flex:1;min-width:0}
.tb-tieu-de{font-weight:700;color:var(--text-1, #f0e6d2)}
.tb-noi-dung{font-size:13px;color:var(--text-2);margin-top:2px}
.tb-gio{font-size:11.5px;color:var(--text-3, #8a7a6a);margin-top:3px}
.tb-cham{width:9px;height:9px;border-radius:50%;background:#c0392b;flex:0 0 auto;margin-top:6px}
/* Lớp phủ "GẤP" — thông báo quan trọng cần làm ngay (muc_do='khan') */
.tb-item.khan{position:relative;border-color:#c0392b;background:rgba(192,57,43,.10)}
.tb-item.khan:hover{border-color:#e74c3c;background:rgba(192,57,43,.16)}
.tb-item.khan::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(231,76,60,.45);animation:tbKhan 1.8s ease-in-out infinite}
@keyframes tbKhan{0%,100%{box-shadow:inset 0 0 0 1px rgba(231,76,60,.30)}
  50%{box-shadow:inset 0 0 11px 1px rgba(231,76,60,.50)}}
.tb-khan-tag{display:inline-block;margin-left:8px;background:#c0392b;color:#fff;font-size:10.5px;font-weight:800;
  padding:1px 8px;border-radius:999px;vertical-align:middle;letter-spacing:.4px}
/* Mức VÀNG — sắp tới hạn (muc_do='canh_bao'): viền vàng tĩnh, không nhấp nháy */
.tb-item.canh-bao{border-color:var(--gold-2, #b8902f);background:rgba(212,175,55,.07);box-shadow:inset 0 0 0 1px rgba(212,175,55,.35)}
.tb-item.canh-bao:hover{border-color:var(--gold-1, #d4af37);background:rgba(212,175,55,.13)}
.tb-sap-tag{display:inline-block;margin-left:8px;background:var(--gold-1, #d4af37);color:#1a1110;font-size:10.5px;
  font-weight:800;padding:1px 8px;border-radius:999px;vertical-align:middle;letter-spacing:.3px}
/* LỚP PHỦ MÀU theo sắc thái (CEO 20/6): XANH=hoàn thành/QC đạt · ĐỎ=trả về · VÀNG=nhắc/chờ · XANH DƯƠNG=tin chung.
   Đồng bộ bảng màu với dropdown chuông; .khan/.canh-bao vẫn giữ (nhấn mạnh thêm cho khẩn/sắp hết). */
.tb-item.tone-ok{border-left:5px solid #5fdc92;background:rgba(95,220,146,.17)}
.tb-item.tone-ok:hover{background:rgba(95,220,146,.25)}
.tb-item.tone-err{border-left:5px solid #ff5c5c}
.tb-item.tone-warn{border-left:5px solid #e7b94e}
.tb-item.tone-info{border-left:5px solid #6aa9e0}
/* Làm sáng dòng việc khi bấm thông báo nhảy tới (?focus=...) */
.tb-focus{animation:tbFocus 1.1s ease-out 3; border-radius:10px}
@keyframes tbFocus{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.0); background:rgba(212,175,55,.0)}
  25%{box-shadow:0 0 0 3px var(--gold-1,#d4af37); background:rgba(212,175,55,.18)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,.0); background:rgba(212,175,55,.0)}
}
/* Lớp phủ ĐỎ "Mail đã có" — cảnh báo khi thêm gmail đã tồn tại trong kho */
.mail-trung-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(120,20,15,.55);padding:20px;animation:mtFade .15s ease-out}
.mail-trung-overlay.hien{display:flex}
@keyframes mtFade{from{opacity:0}to{opacity:1}}
.mail-trung-card{max-width:440px;width:100%;background:#2a1411;border:2px solid #e74c3c;border-radius:14px;
  padding:24px 26px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(231,76,60,.35);
  animation:mtPop .18s ease-out}
@keyframes mtPop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.mail-trung-card .mt-ic{width:44px;height:44px;color:#ff6b5e}
.mail-trung-card h3{margin:10px 0 4px;color:#ff6b5e;font-size:20px;font-weight:800;letter-spacing:.3px}
.mail-trung-card .mt-dc{display:inline-block;margin:6px 0 14px;font-weight:700;color:#ffd9d4;word-break:break-all;
  background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.4);border-radius:8px;padding:5px 12px}
.mail-trung-card .mt-sub{color:#e7b7b1;font-size:13px;margin-bottom:16px;line-height:1.5}
.mail-trung-card button{background:#e74c3c;color:#fff;border:none;border-radius:8px;padding:9px 26px;
  font-weight:800;cursor:pointer;font-size:14px}
.mail-trung-card button:hover{background:#ff5949}
/* Ô Thông báo & nhắc việc ở đầu trang chủ */
.tb-home{margin-bottom:16px}
.tb-home-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tb-home-ti{font-weight:700;color:var(--gold-1);display:inline-flex;align-items:center;gap:8px;font-size:16px}
.tb-home-ti svg{width:20px;height:20px}
.tb-home .tb-item{margin-bottom:6px}
.tb-home .tb-item:last-child{margin-bottom:0}
/* Thanh việc chưa hoàn thành (ghim đầu trang chủ) */
.tien-do{padding:12px 14px;margin-bottom:16px}
.td-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:5px 0}
.td-title{font-weight:700;color:var(--gold-1);display:inline-flex;align-items:center;gap:6px;margin-right:4px}
.td-ic{width:18px;height:18px;color:var(--gold-1)}
.td-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid var(--gold-3);
  background:rgba(212,175,55,.08);color:var(--text-1,#f0e6d2);text-decoration:none;font-size:13px}
.td-chip:hover{background:rgba(212,175,55,.18)}
.td-chip b{color:var(--gold-1)}
/* Avatar tròn (buổi 7) */
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--gold-3);
  display:inline-flex;align-items:center;justify-content:center;background:#1a1110;flex:0 0 auto}
.avatar-ph{color:var(--gold-1);font-weight:800;font-size:15px;text-transform:uppercase}
.avatar-lg{width:64px;height:64px;font-size:26px}
.content{padding:26px;max-width:1100px;width:100%}
/* Bảng kho nhiều cột (proxy/gmail có thêm cột liên kết) -> nới khung cho cột Mail/Proxy thở.
   max-width chỉ chặn TRẦN: ở 1366 vẫn co theo viewport (không tràn ngang), ở màn rộng mới dùng tới 1480. */
.content:has(.kho-wide){max-width:1480px}
/* Quản lý kênh (.qlk): nới RỘNG HƠN để bảng theo dõi kênh dài ra, dễ liếc (CEO 15/06).
   Vẫn chỉ là TRẦN — màn 1366/1600 tự co theo viewport, không tràn ngang; chỉ màn rộng mới dùng tới. */
.content:has(.qlk){max-width:1860px}
/* Lời bình (SX Video): nới RỘNG để bảng 8 cột không bị cắt chữ ở cột phải (Nhạc).
   Vẫn chỉ là TRẦN — màn hẹp tự co + panel bảng có overflow-x cuộn ngang; chừa làn phải cho mascot. */
.content:has(.lb-wide){max-width:1900px}
@media (min-width:1700px){ .content:has(.lb-wide){padding-right:92px} }
/* chừa "làn" bên phải cho Wukong bay (bảng KHÔNG chạy quá mascot, mascot nằm giữa mép bảng và thanh cuộn)
   — chỉ áp trên màn ĐỦ RỘNG để không ép bảng ở 1366 */
@media (min-width:1400px){ .content:has(.qlk){padding-right:108px} }
/* bảng kho nhiều cột (proxy/gmail): thu gọn ĐỆM NGANG để vừa khít màn 1366 (giữ chiều cao dòng),
   tránh tràn/cắt cột mà KHÔNG phải cuộn ngang (giữ khung Sửa nổi) hay cắt địa chỉ */
.kho-wide table.tbl th, .kho-wide table.tbl td{padding-left:6px;padding-right:6px}
/* Cột liên kết: mỗi mục 1 dòng gọn, KHÔNG cắt giữa địa chỉ (nowrap), quá dài thì cắt đuôi bằng … */
td.lk-cell{font-size:12.5px;line-height:1.5;vertical-align:top}
td.lk-cell .lk-i{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:155px}
/* Ô địa chỉ dài (gmail/proxy ở bảng Kênh): giới hạn bề rộng, cắt đuôi … — di chuột (title) xem đủ */
.cell-ell{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Bấm ô gmail/proxy -> popup "bảng liên kết" (kênh nào dùng chung, gmail/proxy nào) */
.lk-sum{cursor:pointer;align-items:center;gap:5px}
.lk-sum:hover .cell-ell{color:var(--gold-1);text-decoration:underline}
table.tbl details.tc-details>.tc-pop.lk-pop{width:600px}
.lk-head{font-size:13px;color:var(--text-2);margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
table.tbl .lk-tbl{font-size:12px;margin:0}
table.tbl .lk-tbl th,table.tbl .lk-tbl td{padding:5px 7px;vertical-align:top}
table.tbl .lk-tbl tr.me td{background:rgba(255,214,110,.08)}
/* Bấm thẻ LOẠI MAIL (pill xanh) -> popup bảng gmail của loại đó. Pill KHÔNG nằm trong table nên cần định vị riêng. */
.l-pill{position:relative}
.l-pill details.tc-details>.tc-pop{position:absolute;left:0;right:auto;top:calc(100% + 8px);z-index:60;
  width:560px;max-width:92vw;background:linear-gradient(180deg,#241a12,#1d140d);border:1px solid var(--border-2);
  border-radius:12px;padding:14px;box-shadow:0 16px 44px rgba(0,0,0,.55);max-height:72vh;overflow:auto;
  text-align:left;white-space:normal}
.l-pill .lk-tbl{font-size:12px;margin:0;width:100%}
.l-pill .lk-tbl th,.l-pill .lk-tbl td{padding:5px 7px;vertical-align:top}
/* Mỗi mục liên kết (kênh / mail ở Kho · Proxy) = 1 dòng cao cố định, cắt đuôi … nếu dài; badge tình trạng
   nằm NGOÀI .cell-ell nên không bị cắt. Cao đều giúp 2 cột "Kênh dùng" và "Mail" nhìn ngay hàng. */
.lk-line{height:22px;line-height:22px;overflow:hidden;white-space:nowrap}
.lk-line .cell-ell{vertical-align:middle}
.lk-line .bac{vertical-align:middle}
/* Badge bậc sạch tài sản (Kho sạch) */
.bac{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;font-weight:700;white-space:nowrap}
.bac-ok{background:rgba(110,231,160,.16);color:#6ee7a0}
.bac-dung{background:rgba(96,165,250,.16);color:#93c5fd}
.bac-ha{background:rgba(251,191,36,.16);color:#fbbf24}
.bac-phot{background:rgba(255,107,107,.18);color:#ff8a8a}
.bac-chet{background:rgba(160,160,160,.14);color:#9aa}
.bac-nuoi{background:rgba(196,181,253,.16);color:#c4b5fd}   /* Đang nuôi — tím, tách khỏi 'đang dùng' xanh dương */
/* ===== Icon Wukong inline (đồng bộ phong cách): trong nút .btn-sm / tiêu đề khối ===== */
.bic{width:16px;height:16px;flex-shrink:0;display:inline-block;vertical-align:-0.15em}
.bic.warn{color:var(--warn)}.bic.danger{color:var(--err)}.bic.ok{color:var(--ok)}
.hic{width:18px;height:18px;flex-shrink:0;vertical-align:-0.2em;margin-right:6px}
.hic.warn{color:var(--warn)}.hic.danger{color:var(--err)}.hic.ok{color:var(--ok)}
/* icon cỡ lớn cho trang trạng thái (403 / không tìm thấy) */
.bic-xl{width:46px;height:46px;color:var(--gold-1);opacity:.9}
/* Chấm trạng thái giữ màu (thay 🟢🔴🟡 emoji) */
.dot{font-size:10px;line-height:1;vertical-align:1px;margin-right:2px}
.dot-ok{color:var(--ok)}.dot-err{color:var(--err)}.dot-warn{color:var(--warn)}.dot-die{color:#9aa}.dot-info{color:#93c5fd}

h1.page{font-size:24px;color:var(--gold-1);margin:0 0 4px;text-shadow:0 0 10px rgba(255,214,110,.25)}
.muted{color:var(--text-3);font-size:14px;margin:0 0 20px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.stat{background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--border-1);
  border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.stat .n{font-size:30px;font-weight:800;color:var(--gold-1);text-shadow:0 0 12px rgba(255,214,110,.3)}
.stat .l{font-size:13px;color:var(--text-3);margin-top:2px}

.panel{background:linear-gradient(180deg,rgba(22,16,12,.92),rgba(31,22,18,.92));
  border:1px solid var(--border-1);border-radius:12px;padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.panel h3{margin:0 0 12px;color:var(--gold-1);font-size:16px;border-left:3px solid var(--gold-2);padding-left:10px}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th,table.tbl td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border-1)}
table.tbl th{color:var(--gold-1);font-size:12.5px;background:rgba(255,214,110,.04)}
table.tbl tr:hover td{background:rgba(255,214,110,.03)}
table.tbl tr.row-han-vang td{background:rgba(251,191,36,.14)}
table.tbl tr.row-han-vang:hover td{background:rgba(251,191,36,.22)}
table.tbl tr.row-han-vang td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.tbl tr.row-han-do td{background:rgba(255,107,107,.16)}
table.tbl tr.row-han-do:hover td{background:rgba(255,107,107,.24)}
table.tbl tr.row-han-do td:first-child{box-shadow:inset 3px 0 0 var(--err)}
/* Kênh đã CHUYỂN ĐI SEEDING — đẩy xuống cuối + phủ vàng RẤT NHẠT (CEO chọn Mẫu 4) để liếc là biết */
table.tbl tr.row-seeding td{background:rgba(251,191,36,.03)}
table.tbl tr.row-seeding:hover td{background:rgba(251,191,36,.07)}
table.tbl tr.row-seeding td:first-child{box-shadow:inset 2px 0 0 rgba(251,191,36,.5)}
.seed-tag{margin-left:6px;font-size:11px;vertical-align:middle}
.tag-ok{color:var(--ok);font-weight:700}
.tag-pill{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid rgba(140,230,156,.45);
  background:rgba(140,230,156,.08);white-space:nowrap}
.tag-err{color:var(--err);font-weight:700}
/* Bảng MÀU phân biệt từng LOẠI mail — gán cố định theo loại (cả pill quản lý lẫn cột "Loại" trong bảng),
   để liếc qua là biết mail thuộc loại nào. Dùng selector ghép .tag-pill.lm-N để chắc chắn đè màu xanh mặc định. */
.tag-pill.lm-0{color:#8ce69c;border-color:rgba(140,230,156,.55);background:rgba(140,230,156,.13);font-weight:700}
.tag-pill.lm-1{color:#8fbcff;border-color:rgba(125,184,255,.55);background:rgba(125,184,255,.13);font-weight:700}
.tag-pill.lm-2{color:#f6c453;border-color:rgba(246,196,83,.55);background:rgba(246,196,83,.13);font-weight:700}
.tag-pill.lm-3{color:#cfa3f0;border-color:rgba(199,155,240,.55);background:rgba(199,155,240,.14);font-weight:700}
.tag-pill.lm-4{color:#6fd6c8;border-color:rgba(111,214,200,.55);background:rgba(111,214,200,.13);font-weight:700}
.tag-pill.lm-5{color:#f79ab6;border-color:rgba(244,143,177,.55);background:rgba(244,143,177,.13);font-weight:700}
.tag-pill.lm-6{color:#f0a868;border-color:rgba(240,168,104,.55);background:rgba(240,168,104,.13);font-weight:700}
.tag-pill.lm-7{color:#b3bdc9;border-color:rgba(170,180,192,.55);background:rgba(170,180,192,.13);font-weight:700}

/* ===== Từ khóa kênh (Quản lý kênh) ===== */
.kenh-vid-link{color:var(--gold-1);text-decoration:none;border-bottom:1px dotted var(--gold-3)}
.kenh-vid-link:hover{border-bottom-style:solid}
.kw-cell{max-width:260px}
.kw-line{margin:2px 0;line-height:1.7}
.kw-lbl{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.4px}
.kw-tag{display:inline-block;font-size:11px;line-height:1.5;padding:0 8px;margin:1px 3px 1px 0;
  border-radius:999px;background:rgba(255,214,110,.08);border:1px solid var(--border-2);color:var(--text-2)}
.kw-edit-lbl{display:block;font-size:11.5px;font-weight:700;color:var(--text-3);margin:6px 0 2px}

/* Chủ đề chính của nguồn (Năng suất tìm nguồn) — từ khoá nổi bật + ví dụ */
.chu-de{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.cd-tag{font-size:11px;line-height:1.6;padding:0 8px;border-radius:999px;
  background:rgba(255,214,110,.10);border:1px solid var(--border-2);color:var(--gold-1);white-space:nowrap}
.cd-vd{margin-top:5px}
.cd-vd>summary{font-size:11px;color:var(--text-3);cursor:pointer;list-style:none;user-select:none}
.cd-vd>summary::before{content:"▸ ";color:var(--gold-1)}
.cd-vd[open]>summary::before{content:"▾ "}
.cd-vd ul{margin:4px 0 2px;padding-left:16px}
.cd-vd li{font-size:11px;color:var(--text-2);margin:2px 0;line-height:1.4}
.cd-cho{margin-top:4px;font-size:11px;color:var(--text-3)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border-1);font-size:14px}
.kv .k{color:var(--text-3)}
.kv .v{color:var(--text-1);font-weight:600;text-align:right}
/* ===== Footer "Mẫu B" (CEO 15/06): núi nền + mây vàng trôi kiểu background tool + quầng đèn rọi + chữ vàng glow ===== */
.foot{position:relative;overflow:hidden;margin-top:auto;min-height:54px;padding:8px 30px;
  display:flex;align-items:center;justify-content:center;text-align:center;background:transparent}
/* khung cảnh núi+mây, fade dần 2 mép cho tinh tế */
.foot-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* NÚI: 2 lớp xa/gần đung đưa ngược chiều tạo chiều sâu */
.foot-ridge{position:absolute;left:0;bottom:0;width:100%;display:block;will-change:transform}
.foot-ridge path{stroke:none}
.foot-ridge-back{height:80%;animation:footRidge 26s ease-in-out infinite}
.foot-ridge-front{height:54%;animation:footRidge 19s ease-in-out infinite reverse}
.foot-ridge-back path{fill:rgba(224,166,75,.15)}
.foot-ridge-front path{fill:rgba(90,64,22,.42)}
@keyframes footRidge{0%,100%{transform:translateX(-1.6%)}50%{transform:translateX(1.6%)}}
/* MÂY: blob vàng mờ trôi ngang, cấu hình qua biến --x/--y/--w/--h/--o/--d/--delay */
.fcloud{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,228,154,.7) 0%,rgba(224,166,75,.4) 45%,rgba(224,166,75,0) 72%);
  filter:blur(6px);opacity:var(--o);animation:footDrift var(--d) linear infinite;animation-delay:var(--delay,0s);will-change:transform}
@keyframes footDrift{from{transform:translateX(calc(-1 * var(--x) - var(--w)))}to{transform:translateX(calc(100vw - var(--x)))}}
.foot-glow{position:absolute;z-index:1;left:50%;top:50%;width:480px;height:74px;transform:translate(-50%,-50%);
  pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,214,110,.16),rgba(255,214,110,0) 70%);
  animation:footGlow 3.6s ease-in-out infinite}
@keyframes footGlow{0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.82;transform:translate(-50%,-50%) scale(1.06)}}
.foot-inner{position:relative;z-index:3;display:inline-flex;align-items:center;gap:11px;font-size:13px;letter-spacing:.3px}
/* THƯƠNG HIỆU: ánh kim quét chậm + glow nhịp nhẹ (học Toolbinh .wkg-brand) */
.foot-co{font-size:17px;font-weight:800;letter-spacing:2px;
  background:linear-gradient(90deg,var(--gold-2),#fff3c4,var(--gold-1),#fff3c4,var(--gold-2));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:footShimmer 4.5s linear infinite,footCoGlow 2.8s ease-in-out infinite}
@keyframes footShimmer{to{background-position:200% center}}
@keyframes footCoGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,214,110,.25))}50%{filter:drop-shadow(0 0 7px rgba(255,214,110,.65))}}
.foot-slg{font-weight:500;letter-spacing:.3px;color:var(--text-2)}
.foot-dot{opacity:.6;color:var(--text-2)}
.foot .ver{font-size:12px;padding:2px 11px;border-radius:999px;border:1px solid var(--gold-3);
  background:rgba(255,214,110,.1);color:var(--gold-1);font-weight:700;letter-spacing:0;box-shadow:0 0 10px rgba(255,214,110,.15)}
@media(max-width:560px){.foot-inner{flex-wrap:wrap;justify-content:center;font-size:13px}}

/* ===== Thanh công cụ + nút ===== */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1}
.btn-sm{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:9px;border:1px solid var(--gold-3);color:var(--gold-1);
  background:rgba(255,214,110,.06);text-decoration:none;transition:all .13s;white-space:nowrap}
.btn-sm:hover:not(:disabled){background:rgba(255,214,110,.16);box-shadow:0 0 12px rgba(255,214,110,.25)}
.btn-sm:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.toolbar-flt .btn-sm{min-height:38px}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:#1a0f06;border-color:var(--gold-2)}
.btn-gold:hover{background:linear-gradient(180deg,var(--gold-1),var(--gold-2))}
.btn-danger{border-color:var(--red-1);color:#ffc4bc;background:rgba(192,57,43,.14)}
.btn-danger:hover{background:rgba(192,57,43,.28)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
form.inline{display:inline}

/* ===== Form ứng dụng ===== */
.appform{max-width:880px}
.form-sec{color:var(--gold-1);font-weight:800;font-size:14px;margin:22px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border-1);letter-spacing:.3px}
.form-sec:first-child{margin-top:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fgrid+.fgrid{margin-top:16px}
.frow{display:flex;flex-direction:column;gap:5px}
.frow.full{grid-column:1/-1}
.frow label{font-size:12.5px;color:var(--text-3)}
.frow label .req{color:var(--red-1)}
.frow input,.frow select,.frow textarea{background:rgba(255,214,110,.05);border:1px solid var(--border-2);
  border-radius:9px;padding:10px 12px;font-size:14px;color:var(--text-1);outline:none;width:100%;
  transition:border .15s,box-shadow .15s;font-family:inherit}
.frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--gold-1);box-shadow:0 0 0 3px rgba(255,214,110,.1)}
.frow select option{background:var(--bg-2)}
/* Danh sách xổ xuống của MỌI select đồng bộ theme tối (tránh nền trắng mặc định) — gồm optgroup + ô sửa-tại-chỗ .vse-e (không nằm trong .frow) */
select{color-scheme:dark}
select option{background:var(--bg-2);color:var(--text-1)}
select optgroup{background:var(--bg-1);color:var(--gold-1);font-weight:700}
/* Checkbox/radio: vàng gold toàn tool + KHÔNG bị kéo giãn 100% trong .frow (vá QC 2026-06-11) */
input[type=checkbox],input[type=radio]{accent-color:var(--gold-2);color-scheme:dark}
.frow input[type=checkbox],.frow input[type=radio]{width:auto;display:inline-block;padding:0;
  vertical-align:middle;margin-right:6px;background:none;cursor:pointer}
/* Ô chọn ngày: lịch bản tối + icon nhìn thấy được trên nền nâu đen */
.frow input[type=date],.frow input[type=month]{color-scheme:dark}
/* Ô lịch chọn ngày ở thanh chọn kỳ (Năng suất tìm nguồn) — đồng bộ tông vàng */
.ky-lich{display:inline-flex;align-items:center;gap:6px;color:var(--gold-1)}
.ky-lich .bic{width:17px;height:17px}
.ky-date,.ky-sel{background:rgba(255,214,110,.05);border:1px solid var(--border-2);border-radius:9px;
  padding:6px 10px;color:var(--text-1);color-scheme:dark;font-size:13px;cursor:pointer}
.ky-date:hover,.ky-sel:hover{border-color:var(--gold-3)}
.ky-date:focus,.ky-sel:focus{border-color:var(--gold-1);box-shadow:0 0 0 3px rgba(255,214,110,.1);outline:none}
.ky-sel option{background:var(--bg-2)}
/* Ô chọn file theo theme thay nút trắng mặc định */
.frow input[type=file]{padding:7px 10px;color:var(--text-2)}
.frow input[type=file]::file-selector-button{cursor:pointer;font-size:13px;font-weight:700;padding:6px 14px;
  margin-right:12px;border-radius:8px;border:1px solid var(--gold-3);color:var(--gold-1);
  background:rgba(255,214,110,.08);font-family:inherit}
/* Ô nhập "trần" (ngoài .frow) trong panel/bảng: cùng theme tối thay nền trắng mặc định.
   Bao cả TEXTAREA + input KHÔNG nằm trong <form> (vd ô lời bình, ô tên project) — trước đây bị nền trắng. */
.panel input[type=text],.panel input[type=password],.panel input[type=number],
.panel input:not([type]),.panel textarea,
table.tbl td input[type=text],table.tbl td input[type=number],
table.tbl td input:not([type]),table.tbl td textarea{background:rgba(255,214,110,.05);
  border:1px solid var(--border-2);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--text-1);
  outline:none;transition:border .15s,box-shadow .15s;font-family:inherit}
.panel textarea,table.tbl td textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.45;padding:8px 10px}
/* <select> trần trong panel/bảng (ngôn ngữ, mô hình, engine, đường cong, phong cách): theme tối, hết nền trắng */
.panel select,table.tbl td select{background:var(--bg-2);border:1px solid var(--border-2);border-radius:8px;
  color:var(--text-1);padding:7px 9px;font-family:inherit;font-size:13px;color-scheme:dark}
.panel select:focus,table.tbl td select:focus{border-color:var(--gold-1);outline:none;box-shadow:0 0 0 3px rgba(255,214,110,.1)}
.panel select option,table.tbl td select option{background:var(--bg-2);color:var(--text-1)}
.panel input::placeholder,.panel textarea::placeholder,table.tbl td textarea::placeholder{color:var(--text-3);opacity:.8}
.panel input[type=text]:focus,.panel input[type=password]:focus,.panel input[type=number]:focus,
.panel input:not([type]):focus,.panel textarea:focus,
table.tbl td input[type=text]:focus,table.tbl td input[type=number]:focus,
table.tbl td input:not([type]):focus,table.tbl td textarea:focus{border-color:var(--gold-1);
  box-shadow:0 0 0 3px rgba(255,214,110,.1)}

/* ===== Thẻ trạng thái ===== */
.badge-st{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid;white-space:nowrap}
/* Trạng thái SEEDING (tách khỏi st-dang_lam của nhân sự): vàng=chờ, xanh dương=đang, lá=xong, đỏ=lỗi */
.st-sd-chua_lam{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.st-sd-dang_lam{color:#7cc4ff;border-color:rgba(124,196,255,.5);background:rgba(124,196,255,.1)}
.st-sd-xong{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.1)}
.st-sd-loi{color:#ff8f80;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.12)}
.st-san_sang,.st-xong{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.1)}
.st-dang_chay{color:#7cc4ff;border-color:rgba(124,196,255,.5);background:rgba(124,196,255,.1)}
.st-chua_lam{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.st-loi{color:#ff8f80;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.12)}
.st-khoa{color:var(--text-2);border-color:var(--border-2);background:rgba(255,255,255,.04)}
/* Khung "Sửa/Cập nhật" mở trong Ô BẢNG: nổi lên trên thay vì kéo giãn dòng */
table.tbl details.tc-details{position:relative}
table.tbl details.tc-details>.tc-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:50;
  background:linear-gradient(180deg,#241a12,#1d140d);border:1px solid var(--border-2);border-radius:12px;
  padding:14px;box-shadow:0 16px 44px rgba(0,0,0,.55);width:380px;max-width:92vw;max-height:72vh;
  overflow:auto;text-align:left;white-space:normal}
.st-dang_lam{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.1)}
.st-thu_viec{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.st-tam_nghi{color:var(--text-2);border-color:var(--border-2);background:rgba(255,255,255,.04)}
.st-nghi_viec{color:#ff8f80;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.12)}
.st-active{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.1)}
.st-locked{color:#ff8f80;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.12)}

/* ===== Banner mật khẩu tạm (hiện 1 lần) ===== */
.banner{border:1px solid var(--gold-2);border-radius:12px;padding:16px 18px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(255,214,110,.14),rgba(42,20,16,.6))}
.banner b{color:var(--gold-1)}
.banner .pw{display:inline-block;font-family:Consolas,monospace;font-size:18px;font-weight:800;color:#fff3c4;
  background:rgba(0,0,0,.35);border:1px dashed var(--gold-2);padding:4px 12px;border-radius:8px;letter-spacing:1px}
.empty{text-align:center;color:var(--text-3);padding:40px 10px;font-style:italic}
.hint{font-size:12.5px;color:var(--text-3);margin-top:4px}

/* ===== Ma trận phân quyền (Cài đặt) ===== */
table.tbl.matrix td,table.tbl.matrix th{vertical-align:middle}
table.tbl.matrix th:not(:first-child){text-align:center;min-width:80px}
table.tbl.matrix td:not(:first-child){text-align:center}
table.tbl.matrix tr.grp td{background:rgba(255,214,110,.08);color:var(--gold-1);font-weight:800;
  font-size:12.5px;letter-spacing:.4px;border-bottom:1px solid var(--border-2)}
table.tbl.matrix tr.row-warn td:first-child{color:var(--warn)}
table.tbl.matrix tr.row-warn td{background:rgba(251,191,36,.06)}
table.tbl.matrix input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--gold-2)}
table.tbl.matrix input[type=checkbox]:disabled{accent-color:var(--gold-3);opacity:.7;cursor:not-allowed}
/* tiêu đề cột bám đỉnh khi cuộn bảng dài */
table.tbl.matrix thead th{position:sticky;top:0;z-index:2;background:#1d140d}
/* nhãn cố định cho ô khóa (rõ hơn checkbox xám, đỡ hiểu nhầm là lỗi) */
table.tbl.matrix .pq-full{color:var(--gold-1);font-weight:800;font-size:15px}
table.tbl.matrix .pq-lock{color:var(--text-3);font-size:14px}

/* ===== Chấm công ===== */
.cc-act{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 14px}
.cc-act form{flex:1;min-width:200px;margin:0}
.cc-big{width:100%;font-size:18px;padding:18px 12px}
.btn-grey{background:linear-gradient(180deg,#3a2a20,#241a14);color:var(--text-3);
  border:1px solid var(--border-2);box-shadow:none;cursor:not-allowed}
.btn:disabled{opacity:.7;cursor:not-allowed}
/* badge trạng thái đơn từ */
.dt{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid}
.dt-cho_duyet{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.dt-duyet{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.1)}
.dt-tu_choi{color:#ff8f80;border-color:rgba(192,57,43,.5);background:rgba(192,57,43,.12)}
.dt-huy{color:var(--text-3);border-color:var(--border-2);background:rgba(255,255,255,.04)}
/* badge tool trình duyệt: NST = TÍM, MKT = XANH (CEO chốt) */
.dt-nst{color:#cbb2ff;border-color:rgba(155,110,255,.55);background:rgba(140,90,255,.14)}
.dt-mkt{color:#86e6b0;border-color:rgba(52,199,123,.55);background:rgba(40,190,110,.14)}
/* nhãn v4/v6 nhỏ đứng TRƯỚC mỗi proxy — v4 xanh · v6 vàng (CEO chốt) */
.pv{display:inline-block;font-size:9px;font-weight:800;line-height:1.5;padding:0 4px;border-radius:4px;border:1px solid;letter-spacing:.4px;vertical-align:middle;margin-right:4px;text-transform:uppercase}
.pv-v4{color:var(--ok);border-color:rgba(140,230,156,.55);background:rgba(140,230,156,.12)}
.pv-v6{color:var(--warn);border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.12)}
/* bảng công tháng — ô màu */
table.tbl.cctab{font-size:12px}
table.tbl.cctab th,table.tbl.cctab td{text-align:center;padding:4px 5px;border:1px solid var(--border-1);min-width:26px}
table.tbl.cctab thead th{position:sticky;top:0;z-index:2;background:#1d140d}
table.tbl.cctab td.nv,table.tbl.cctab th.nv{text-align:left;white-space:nowrap;position:sticky;left:0;
  background:#16100c;z-index:1;min-width:150px}
table.tbl.cctab thead th.nv{z-index:3}
.cc-ok{background:rgba(140,230,156,.18);color:var(--ok);font-weight:800}
.cc-warn{background:rgba(251,191,36,.16);color:var(--warn);font-weight:800}
.cc-bad{background:rgba(192,57,43,.20);color:#ff8f80;font-weight:800}
.cc-leave{background:rgba(110,168,255,.16);color:#9cc2ff;font-weight:700}
.cc-off{background:rgba(255,255,255,.03);color:var(--text-3)}
.cc-doing{background:rgba(255,214,110,.14);color:var(--gold-1);font-weight:800}
.cc-future,.cc-today{color:var(--text-3)}

/* ===== Công việc (Task) ===== */
/* badge trạng thái việc */
.dt-chua_lam{color:var(--text-2);border-color:var(--border-2);background:rgba(255,255,255,.04)}
.dt-dang_lam{color:#9cc2ff;border-color:rgba(110,168,255,.4);background:rgba(110,168,255,.1)}
.dt-cho_nghiem_thu{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.dt-xong{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.1)}
/* badge ưu tiên */
.prio{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:6px;
  letter-spacing:.3px;border:1px solid;white-space:nowrap;flex-shrink:0}
/* Mức độ ưu tiên: TÔ NỀN SÁNG theo cấp (thấp→khẩn càng nóng càng nổi) cho dễ liếc */
.prio-thap{color:#0d1b12;border-color:#7fcf9c;background:#7fcf9c}
.prio-thuong{color:#07142e;border-color:#5aa9ff;background:#5aa9ff}
.prio-cao{color:#241a05;border-color:var(--gold-1);background:var(--gold-1)}
.prio-khan{color:#fff;border-color:#ff3d3d;background:#ff3d3d;box-shadow:0 0 8px rgba(255,61,61,.5)}
.qua-han{color:#ff8f80;font-weight:800}
/* Nút bị KHOÁ (vd Gửi QC khi chưa đủ điều kiện): mờ, con trỏ cấm, bấm vẫn hiện thông báo nhắc */
.btn-locked{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
.btn-locked:hover{opacity:.6}
/* Nhãn trạng thái trên thẻ board: lời bình / edit / CapCut. xanh sáng = xong; mờ vàng = chưa */
.pc-flags{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0 2px}
.pflag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;
  padding:1px 8px;border-radius:999px;border:1px solid;line-height:1.7}
.pflag-ok{color:#0c2417;background:#5fdc92;border-color:#5fdc92}
.pflag-wait{color:#caa86a;background:rgba(255,214,110,.07);border-color:var(--gold-3)}
/* Ô tích "Đã edit xong" cho Editor */
.pc-tick{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--text-2);cursor:pointer;user-select:none}
.pc-tick input{width:15px;height:15px;accent-color:#5fdc92;cursor:pointer;margin:0}
.muted-in{color:var(--text-3)}
/* Ghi chú tài sản (kênh/mail/proxy) — hiện dưới tên người phụ trách trong bảng Kho */
.kho-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  max-width:180px;font-size:11px;line-height:1.4;color:var(--text-3);white-space:normal}
.kho-note .bic{width:12px;height:12px;vertical-align:-1px;opacity:.85}
/* Ô ghi chú inline-edit: bấm bút để thêm/sửa, lưu AJAX */
.kho-gc{display:block;margin-top:3px}
.kho-gc [hidden]{display:none}            /* thắng display:flex bên dưới (nếu không, ô nhập hiện sẵn) */
.kho-gc-view{display:flex;flex-direction:column;align-items:flex-start;gap:1px}  /* bút sửa XUỐNG DÒNG DƯỚI ghi chú, đỡ tốn bề ngang */
.kho-gc-txt{flex:1 1 auto}
.kho-gc-pen{flex:0 0 auto;background:none;border:none;padding:0 2px;cursor:pointer;color:var(--text-3);opacity:.7;line-height:1}
.kho-gc-pen:hover{color:var(--gold-1);opacity:1}
.kho-gc-pen .bic{width:13px;height:13px;vertical-align:-2px}
.kho-gc-edit{display:flex;gap:4px;align-items:center;margin-top:3px}
.kho-gc-inp{flex:1 1 auto;min-width:110px;max-width:200px;padding:3px 7px;font-size:11.5px;
  border:1px solid var(--border-2);border-radius:6px;background:var(--bg-2);color:var(--text-1);outline:none}
.kho-gc-inp:focus{border-color:var(--gold-2)}
.kho-gc-ok,.kho-gc-del{flex:0 0 auto;background:none;border:1px solid var(--border-2);border-radius:6px;
  padding:2px 6px;cursor:pointer;line-height:1}
.kho-gc-ok{color:var(--ok)}
.kho-gc-del{color:#ff8f80}
.kho-gc-ok:hover{border-color:var(--ok)}
.kho-gc-del:hover{border-color:#ff8f80}
.kho-gc-ok .bic,.kho-gc-del .bic{width:13px;height:13px;vertical-align:-2px}
/* Nhãn "trùng mail" trong bảng kênh — thông báo (vàng), không phải lỗi đỏ */
.kho-trung{margin-top:3px;font-size:11px;line-height:1.4;color:var(--warn);max-width:185px;white-space:normal}
.kho-trung .bic{width:12px;height:12px;vertical-align:-1px}
/* thẻ việc (việc của tôi — dạng danh sách dọc) */
.task-list{display:flex;flex-direction:column;gap:12px}
.task-card{border:1px solid var(--border-1);border-radius:11px;padding:13px 15px;
  background:linear-gradient(180deg,rgba(31,22,18,.6),rgba(22,16,12,.6));transition:border .12s}
.task-card:hover{border-color:var(--border-2)}
/* việc ĐÃ XONG: KHÔNG làm mờ — chữ sáng + lớp phủ xanh lá sáng để nổi bật */
.task-card.is-done{border-color:rgba(140,230,156,.6);
  background:linear-gradient(180deg,rgba(140,230,156,.18),rgba(140,230,156,.07));
  box-shadow:inset 0 0 0 1px rgba(140,230,156,.22),0 0 16px rgba(140,230,156,.13)}
.task-card.is-done:hover{border-color:rgba(140,230,156,.8)}
.task-card.is-done .tc-title{color:#e6ffec}
.task-card.is-done .hint{color:#a6efb8}
.task-card .tc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.task-card .tc-title{font-weight:700;color:var(--text-1);font-size:14.5px;flex:1;min-width:120px}
.task-card .tc-desc{font-size:13px;color:var(--text-2);margin-top:7px;white-space:pre-wrap}
.task-card .tc-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);margin-top:8px}
.task-card .tc-return{margin-top:9px;font-size:12.5px;color:#ffd0c8;background:rgba(192,57,43,.14);
  border:1px solid var(--red-1);border-radius:8px;padding:7px 10px}
.task-card .tc-note{margin-top:9px;font-size:12.5px;color:var(--text-2);background:rgba(255,214,110,.06);
  border:1px solid var(--border-1);border-radius:8px;padding:7px 10px}
.task-card .tc-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:11px}
/* board quản lý — 4 cột */
.task-board{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px;align-items:start}
.task-col{background:rgba(10,6,6,.4);border:1px solid var(--border-1);border-radius:12px;padding:10px;min-width:0}
.tcol-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:2px 4px}
.tcol-n{font-size:12px;font-weight:800;color:var(--text-3)}
.tcol-body{display:flex;flex-direction:column;gap:10px}
.tcol-empty{text-align:center;color:var(--text-3);font-size:12px;font-style:italic;padding:14px 0}
.task-col.col-cho_nghiem_thu{border-color:rgba(251,191,36,.35)}
.task-col.col-xong{border-color:rgba(140,230,156,.3)}
.task-card.sm{padding:11px 12px}
.task-card.sm .tc-title{font-size:13.5px}
.task-card.sm .tc-desc{font-size:12px;max-height:60px;overflow:hidden}
.tc-details{display:inline-block;vertical-align:middle}
details.panel>summary{list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
.tc-details>summary{list-style:none;display:inline-flex}
.tc-details>summary::-webkit-details-marker{display:none}
.tc-return-form{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.tc-return-form textarea{background:rgba(255,214,110,.05);border:1px solid var(--border-2);border-radius:8px;
  padding:8px 10px;font-size:12.5px;color:var(--text-1);outline:none;font-family:inherit;resize:vertical}
.tc-return-form textarea:focus{border-color:var(--gold-1)}
select.flt{background:rgba(255,214,110,.05);border:1px solid var(--border-2);border-radius:9px;
  padding:8px 11px;font-size:13px;color:var(--text-1);outline:none;font-family:inherit}
select.flt option{background:var(--bg-2)}
@media(max-width:900px){.task-board{grid-template-columns:1fr}}

/* ===== Pipeline sản xuất video — Kanban 6 cột, kéo-thả ===== */
/* trang bảng dùng full chiều rộng để 6 cột hiện thoáng (các trang khác giữ 1100px) */
.content:has(.pipe-board){max-width:none}
/* Board: cột TỰ XUỐNG HÀNG (6 bước -> 2 hàng) + to/rộng ra (~3 cột/hàng), không cuộn ngang */
.pipe-board{display:flex;flex-wrap:wrap;gap:14px;padding-bottom:12px;align-items:flex-start}
.pipe-col{flex:1 1 30%;min-width:300px;background:rgba(10,6,6,.4);border:1px solid var(--border-1);border-radius:12px;
  padding:12px;transition:border .12s,background .12s}
.pipe-col.col-qc{border-color:rgba(251,191,36,.35)}
.pipe-col.col-theo_doi{border-color:rgba(140,230,156,.3)}
.pipe-col.drop-hover{border-color:var(--gold-1);background:rgba(255,214,110,.07)}
.pipe-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:2px 4px}
.pipe-head .nm{font-size:12.5px;font-weight:800;color:var(--gold-1)}
.pipe-n{font-size:12px;font-weight:800;color:var(--text-3);background:rgba(255,214,110,.08);
  border-radius:999px;padding:0 8px;min-width:22px;text-align:center}
.pipe-body{display:flex;flex-direction:column;gap:10px;min-height:46px}
.pipe-card{border:1px solid var(--border-1);border-radius:11px;padding:11px 12px;
  background:linear-gradient(180deg,rgba(31,22,18,.72),rgba(22,16,12,.72));transition:border .12s,opacity .12s}
.pipe-card{cursor:pointer}                              /* bấm thân thẻ -> mở Pipeline board (focus video) */
.pipe-card:hover{border-color:var(--gold-2)}
.pipe-card[draggable=true]{cursor:grab}
.pipe-card[draggable=true]:active{cursor:grabbing}
.pipe-card.dragging{opacity:.45;border-color:var(--gold-1)}
.pipe-card .pc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pipe-card .pc-title{font-weight:700;color:var(--text-1);font-size:13.5px;flex:1;min-width:100px}
.pipe-meta{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--text-3);margin-top:8px}
.pipe-meta .ln{display:flex;gap:4px;align-items:center}
.pipe-card .pc-desc{font-size:11.5px;color:var(--text-2);margin-top:7px;white-space:pre-wrap;
  max-height:54px;overflow:hidden}
.pc-link{display:inline-block;font-size:11.5px;margin-top:7px;margin-right:10px}
.pc-act{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.pc-act .tc-return-form input[type=url]{width:100%}

/* ===== KPI / Hiệu suất ===== */
/* badge hạng màu */
.kh{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:999px;border:1px solid;white-space:nowrap}
.kh-xanh{color:var(--ok);border-color:rgba(140,230,156,.5);background:rgba(140,230,156,.12)}
.kh-vang{color:var(--warn);border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12)}
.kh-do{color:#ff8f80;border-color:rgba(192,57,43,.6);background:rgba(192,57,43,.16)}
.kh-chua_du{color:var(--text-3);border-color:var(--border-2);background:rgba(255,255,255,.04)}
/* chi tiết các mặt điểm trong phiếu */
.kpi-mat{padding:11px 0;border-bottom:1px solid var(--border-1)}
.kpi-mat:last-child{border-bottom:none}
.kpi-mat-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kpi-mat-ten{font-weight:700;color:var(--text-1);font-size:13.5px}
.kpi-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);margin-top:6px;overflow:hidden}
.kpi-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-2),var(--gold-1))}

/* ===== Dashboard / Báo cáo ===== */
a.stat{text-decoration:none;cursor:pointer;transition:border .12s,transform .1s}
a.stat:hover{border-color:var(--gold-2);transform:translateY(-1px)}
.dash-warn{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.dash-warn a.alert{display:flex;justify-content:space-between;align-items:center;text-decoration:none}
.heart{display:flex;gap:26px;flex-wrap:wrap;margin:2px 0 16px;padding:11px 16px;background:rgba(0,0,0,.25);
  border:1px solid var(--border-1);border-radius:11px}
.heart .h-it{display:flex;flex-direction:column}
.heart .h-it .hn{font-size:21px;font-weight:800;color:var(--gold-1);line-height:1.1}
.heart .h-it .hl{font-size:11.5px;color:var(--text-3);margin-top:2px}
.delta-up{color:var(--ok);font-weight:700}
.delta-down{color:#ff8f80;font-weight:700}
.delta-flat{color:var(--text-3)}
.bar-row{margin:7px 0 11px}
.toolbar-flt{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:16px}

/* ============================================================
   ĐIỆN THOẠI / MÀN HÌNH HẸP — menu trượt (drawer) + bảng cuộn ngang
   ============================================================ */
.nav-burger{display:none}
.side-ov{display:none}
@media(max-width:820px){
  /* Bỏ bố cục 2 cột; sidebar thành ngăn kéo trượt từ trái */
  .app{display:block}
  .main{width:100%;min-width:0}
  .side{position:fixed;top:0;left:0;z-index:1300;width:264px;max-width:84vw;height:100vh;max-height:100vh;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 44px rgba(0,0,0,.65);
    border-right:1px solid var(--gold-3)}
  body.nav-open .side{transform:none}
  .side-ov{display:block;position:fixed;inset:0;z-index:1290;background:rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transition:opacity .25s}
  body.nav-open{overflow:hidden}
  body.nav-open .side-ov{opacity:1;visibility:visible}

  /* Nút ☰ trong thanh trên cùng */
  .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;
    border:1px solid var(--border-2);border-radius:9px;background:rgba(255,214,110,.06);color:var(--gold-1);cursor:pointer}
  .nav-burger svg{width:22px;height:22px}

  /* Thanh trên cùng dính theo cuộn để luôn bấm được menu */
  .topbar{padding:10px 13px;position:sticky;top:0;z-index:60;
    background:linear-gradient(180deg,rgba(16,11,8,.98),rgba(16,11,8,.92))}
  .topbar .pg{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .me{gap:7px;font-size:12.5px}
  .topbar .me .me-ten{display:none}

  /* Nội dung dùng hết bề ngang, lề nhỏ lại */
  .content{padding:14px;max-width:none}
  .content:has(.kho-wide),.content:has(.qlk),.content:has(.lb-wide){max-width:none;padding-right:14px}
  .panel{padding:14px}
  .foot{padding:8px 14px}
  h1.page{font-size:20px}

  /* Bảng rộng: cho cuộn ngang trong khung, không phá vỡ layout */
  table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}

  /* Trang trí: ẩn mascot góc để gọn màn hình nhỏ */
  .corner-mascot{display:none!important}
  .bell-pop{width:320px}
}
@media(max-width:480px){
  .topbar .me .rk{display:none}
  .content{padding:11px}
  .panel{padding:12px}
}