/* ========================================================================== NOHU — giao dien nhan vien CSKH (Live Helper Chat back office /site_admin/) Lop ghi de thuan trinh bay. Khong doi id/class/JS hook nao cua LHC. Nap boi: design/customtheme/tpl/pagelayouts/parts/page_head_css_extension_multiinclude.tpl.php THESIS: ban lam viec ca 8 tieng cua nhan vien CSKH — danh sach chat va khung tra loi la trung tam, trang thai chat doc bang mau ngay; tu choi kieu "bang Bootstrap xam" mac dinh cua LHC. OWN-WORLD: ngon ngu web noi bo daily.steven88.info — Be Vietnam Pro, nen sang co vet mau radial tim/xanh/hong, kinh trang mo, tim #5b47f5→#8b5cf6, bo 18px, bong sh1/sh2, thanh ben xanh than dam, muc dang chon co quang sang tim. Che do toi: nen dem xanh than, kinh toi. STORY: nhan vien mo ca → thay ngay chat cho (vang) / dang chat (xanh la) / chua doc (do) / da dong (xam) → bam vao, doc tin, go #tag, gui; khong phai tim nut. FIRST VIEWPORT: trai = thanh ben xanh than (dieu huong); giua-trai = cot "Cac cuoc chat" kinh (moi dong 1 chat, cham mau trang thai); phai = bang dieu khien the kinh hoac khung chat (tin khach trang ben trai, tin nhan vien tim ben phai, o soan rong co nut ro). FORM: brief ghim the gioi (khong quay xuc xac); van hanh (Operate). FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md ========================================================================== */ /* ---------- 1. Token ---------- */ :root{ --nh-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --nh-bg:#eef0fb; --nh-ink:#111536; --nh-ink2:#454a6e; --nh-mut:#62688c; --nh-line:rgba(17,21,54,.08); --nh-line2:rgba(17,21,54,.13); --nh-glass:rgba(255,255,255,.74); --nh-glass2:rgba(255,255,255,.93); --nh-edge:rgba(255,255,255,.9); --nh-hi:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 42%); --nh-pri:#5b47f5; --nh-pri2:#8b5cf6; --nh-pri-ink:#4334d6; --nh-pri-soft:rgba(91,71,245,.08); --nh-pri-soft2:rgba(91,71,245,.14); --nh-ring:rgba(91,71,245,.16); --nh-grad:linear-gradient(120deg,var(--nh-pri),var(--nh-pri2)); --nh-red:#e11d48; --nh-grn:#059669; --nh-amb:#b45309; --nh-blu:#2563eb; --nh-redbg:#ffe4ea; --nh-ambbg:#fff3d6; --nh-blubg:#e3e9ff; --nh-grnbg:#dcfce7; --nh-slatebg:#eef0f7; /* trang thai chat: cho / dang chat / chua doc / da dong / bot / cua toi */ --st-wait:#d97706; --st-live:#059669; --st-unread:#e11d48; --st-closed:#64748b; --st-bot:#2563eb; --st-mine:#5b47f5; --nh-sh1:0 1px 2px rgba(17,21,54,.05),0 6px 18px -6px rgba(17,21,54,.12); --nh-sh2:0 2px 4px rgba(17,21,54,.06),0 22px 44px -14px rgba(17,21,54,.22); --nh-glow:0 8px 20px -8px rgba(91,71,245,.75),inset 0 1px 0 rgba(255,255,255,.3); --nh-r:18px; --nh-r2:14px; --nh-rc:11px; --nh-gap:18px; --nh-pad:16px 18px; --nh-px:24px; /* khoang cach giua the / dem trong the / le ngang vung noi dung */ --nh-aside:linear-gradient(185deg,#151a43 0%,#1b1550 55%,#120f35 100%); --nh-aurora:radial-gradient(600px 420px at 18% 8%,rgba(139,92,246,.20),transparent 70%), radial-gradient(700px 500px at 92% 0%,rgba(56,189,248,.18),transparent 70%), radial-gradient(640px 520px at 70% 100%,rgba(244,114,182,.14),transparent 70%), linear-gradient(180deg,#f3f2ff 0%,#eef1fb 100%); --nh-msg-in:#fff; --nh-msg-in-ink:var(--nh-ink); /* Bootstrap */ --bs-body-font-family:var(--nh-font); --bs-body-font-size:.875rem; --bs-body-color:var(--nh-ink); --bs-body-bg:var(--nh-bg); --bs-secondary-color:var(--nh-mut); --bs-border-color:var(--nh-line2); --bs-border-radius:var(--nh-rc); --bs-border-radius-sm:9px; --bs-border-radius-lg:var(--nh-r2); --bs-primary:#5b47f5; --bs-primary-rgb:91,71,245; --bs-success:#059669; --bs-success-rgb:5,150,105; --bs-danger:#e11d48; --bs-danger-rgb:225,29,72; --bs-warning:#d97706; --bs-warning-rgb:217,119,6; --bs-info:#0284c7; --bs-info-rgb:2,132,199; --bs-link-color:#4f3ee8; --bs-link-color-rgb:79,62,232; --bs-link-hover-color:#3a2bc4; --bs-link-hover-color-rgb:58,43,196; --bs-light-rgb:246,246,253; --bs-tertiary-bg:rgba(91,71,245,.05); /* LHC */ --lhc-page-content-wrapper-bg:transparent; --lhc-dashboard-card-header-bg:transparent; --lhc-main-menu-link:var(--nh-ink2); --lhc-main-menu-link-hover:var(--nh-pri); --lhc-nav-underline-nav-link:var(--nh-ink2); --lhc-nav-underline-nav-link-active-border:var(--nh-pri); --lhc-msg-body-response:#fff; --lhc-msg-body-response-text:var(--nh-ink); --lhc-sidebar-li-active-link-bg:rgba(255,255,255,.12); --lhc-sidebar-li-border-bottom:transparent; --lhc-sidebar-wrapper-br:var(--nh-line); --lhc-msg-body-vis-tit-text:var(--nh-ink2); --lhc-msg-body-op-tit-text:var(--nh-pri-ink); --lhc-msg-body-op-tit-other-text:#0e7490; --lhc-msg-body-op-bg-other:#0e7490; --lhc-msg-body-op-text-other:#fff; --lhc-msg-body-op-text:#fff; --lhc-msg-body-op-bg:#5b47f5; --lhc-msg-body-sys-tit-bg:transparent; --lhc-msg-body-sys-tit-text:var(--nh-mut); --lhc-msg-body-sys-date-text:var(--nh-mut); --lhc-msg-date-text:var(--nh-mut); --lhc-msg-body-sys-text:var(--nh-mut); --lhc-msg-body-bg:transparent; --lhc-new-msg-border:var(--nh-red); --lhc-tab-link-bg:transparent; } html[data-bs-theme=dark]{ --nh-bg:#0c0f2b; --nh-ink:#eceeff; --nh-ink2:#c6caf0; --nh-mut:#a2a7d4; --nh-line:rgba(255,255,255,.08); --nh-line2:rgba(255,255,255,.15); --nh-glass:rgba(27,31,74,.66); --nh-glass2:rgba(31,35,82,.96); --nh-edge:rgba(255,255,255,.08); --nh-hi:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%); --nh-pri:#7c6cff; --nh-pri2:#a78bfa; --nh-pri-ink:#b3a9ff; --nh-pri-soft:rgba(124,108,255,.14); --nh-pri-soft2:rgba(124,108,255,.24); --nh-ring:rgba(124,108,255,.3); --nh-red:#fb7185; --nh-grn:#34d399; --nh-amb:#fbbf24; --nh-blu:#60a5fa; --nh-redbg:rgba(251,113,133,.16); --nh-ambbg:rgba(251,191,36,.14); --nh-blubg:rgba(96,165,250,.15); --nh-grnbg:rgba(52,211,153,.14); --nh-slatebg:rgba(148,163,184,.14); --st-wait:#fbbf24; --st-live:#34d399; --st-unread:#fb7185; --st-closed:#94a3b8; --st-bot:#60a5fa; --st-mine:#a99dff; --nh-sh1:0 1px 2px rgba(0,0,0,.3),0 8px 22px -8px rgba(0,0,0,.55); --nh-sh2:0 2px 4px rgba(0,0,0,.35),0 24px 48px -14px rgba(0,0,0,.7); --nh-glow:0 8px 22px -8px rgba(124,108,255,.9),inset 0 1px 0 rgba(255,255,255,.22); --nh-aside:linear-gradient(185deg,#0f1236 0%,#151041 55%,#0b0927 100%); --nh-aurora:radial-gradient(640px 460px at 18% 6%,rgba(139,92,246,.26),transparent 70%), radial-gradient(720px 520px at 94% 0%,rgba(56,189,248,.12),transparent 70%), radial-gradient(660px 540px at 70% 100%,rgba(244,114,182,.10),transparent 70%), linear-gradient(180deg,#10133a 0%,#0a0c26 100%); --nh-msg-in:rgba(255,255,255,.08); --nh-msg-in-ink:#eceeff; --bs-body-color:var(--nh-ink); --bs-body-bg:#141840; --bs-secondary-color:var(--nh-mut); --bs-border-color:var(--nh-line2); --bs-primary:#7c6cff; --bs-primary-rgb:124,108,255; --bs-link-color:#b3a9ff; --bs-link-color-rgb:179,169,255; --bs-link-hover-color:#d4ceff; --bs-link-hover-color-rgb:212,206,255; --bs-light-rgb:34,39,88; --bs-tertiary-bg:rgba(255,255,255,.05); --bs-emphasis-color:#fff; --lhc-main-menu-link:var(--nh-ink2); --lhc-main-menu-link-hover:#fff; --lhc-nav-underline-nav-link:var(--nh-ink2); --lhc-nav-underline-nav-link-active-border:var(--nh-pri); --lhc-msg-body-response:rgba(255,255,255,.08); --lhc-msg-body-response-text:var(--nh-ink); --lhc-sidebar-wrapper-br:var(--nh-line); --lhc-msg-body-vis-tit-text:var(--nh-ink2); --lhc-msg-body-op-tit-text:var(--nh-pri-ink); --lhc-msg-body-op-bg:#6a58ff; --lhc-msg-body-op-bg-other:#0e7490; --lhc-msg-body-sys-tit-bg:transparent; --lhc-msg-body-sys-tit-text:var(--nh-mut); --lhc-msg-body-sys-date-text:var(--nh-mut); --lhc-msg-date-text:var(--nh-mut); --lhc-msg-body-sys-text:var(--nh-mut); --lhc-tab-link-bg:transparent; } /* ---------- 2. Nen, chu, be mat trinh duyet ---------- */ body{font-family:var(--nh-font);font-size:14px;color:var(--nh-ink);-webkit-font-smoothing:antialiased; font-feature-settings:'tnum' 0;letter-spacing:0} #admin-body{background:var(--nh-aurora);background-attachment:fixed;background-color:var(--nh-bg)} html[data-bs-theme]{background:var(--nh-bg)} h1,.h1{font-size:24px;font-weight:800;letter-spacing:-.4px} h2,.h2{font-size:20px;font-weight:700;letter-spacing:-.2px} h3,.h3{font-size:17px;font-weight:700} h4,.h4{font-size:15.5px;font-weight:700} h5,.h5,h6,.h6{font-weight:700} b,strong,.fw-bold{font-weight:700} ::selection{background:rgba(91,71,245,.22);color:inherit} html,*{scrollbar-width:thin;scrollbar-color:rgba(91,71,245,.3) transparent} #sidebar-wrapper,#sidebar-wrapper *{scrollbar-color:rgba(255,255,255,.2) transparent} ::-webkit-scrollbar{width:9px;height:9px;background:transparent} ::-webkit-scrollbar:hover{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(91,71,245,.26);border-radius:9px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background-color:rgba(91,71,245,.45)} ::-webkit-scrollbar-thumb:active{background-color:rgba(91,71,245,.6)} html[data-bs-theme=dark] ::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.16)} a{text-underline-offset:3px} .text-muted{color:var(--nh-mut)!important} .text-secondary{color:var(--nh-ink2)!important} .text-primary{color:var(--nh-pri)!important} .text-success{color:var(--nh-grn)!important} .text-danger{color:var(--nh-red)!important} .text-warning{color:var(--st-wait)!important} .bg-light{background-color:var(--nh-pri-soft)!important} .border,.border-top,.border-bottom,.border-start,.border-end{border-color:var(--nh-line2)!important} .material-icons{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20} /* co chu nho cua LHC: nang len de doc ca 8 tieng */ .fs11{font-size:12px} .fs12{font-size:13px} .fs13{font-size:13.5px} .table-small{font-size:13.5px} :focus-visible{outline:2px solid var(--nh-pri);outline-offset:2px} .btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible{outline:0} /* ---------- 3. Thanh tren ---------- */ .top-menu-bar-lhc{min-height:52px;background:rgba(255,255,255,.72)!important; -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--nh-line)!important;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 6px 18px -14px rgba(17,21,54,.35); position:relative;z-index:20;padding-left:10px!important} html[data-bs-theme=dark] .top-menu-bar-lhc{background:rgba(16,19,52,.78)!important;box-shadow:0 6px 18px -12px rgba(0,0,0,.6)} .top-menu-bar-lhc .navbar-brand{padding:0;margin-right:8px} .top-menu-bar-lhc .navbar-brand img{height:34px;width:34px;object-fit:contain;border-radius:11px;padding:3px; background:#fff;box-shadow:0 4px 12px -6px rgba(17,21,54,.45),inset 0 0 0 1px var(--nh-line)} .top-menu-bar-lhc>.btn:not(.navbar-toggler){width:38px;height:38px;border-radius:var(--nh-rc);display:inline-grid;place-items:center;color:var(--nh-ink2)} .top-menu-bar-lhc>.btn:not(.navbar-toggler):hover{background:var(--nh-pri-soft);color:var(--nh-pri)} .top-menu-bar-lhc .nav-link{color:var(--nh-ink2);font-weight:600;border-radius:var(--nh-rc);padding:7px 10px!important; display:inline-flex;align-items:center;gap:6px;min-height:38px} .top-menu-bar-lhc .nav-link:hover{background:var(--nh-pri-soft);color:var(--nh-pri)} .top-menu-bar-lhc .navbar-nav>.nav-item>.nav-link.dropdown-toggle{background:var(--nh-glass2);box-shadow:var(--nh-sh1); border:1px solid var(--nh-line);color:var(--nh-ink)} .top-menu-bar-lhc .navbar-nav{gap:4px;align-items:center;padding-right:8px} .top-menu-bar-lhc lhc-status{font-size:13px;color:var(--nh-ink2)} /* ---------- 4. Thanh ben trai (xanh than, muc chon co quang tim) ---------- */ #sidebar-wrapper{background:var(--nh-aside);border-right:0!important;color:#dfe2ff;position:relative;z-index:3; box-shadow:6px 0 28px -14px rgba(10,8,40,.55); --lhc-main-menu-link:#cfd3ff;--lhc-main-menu-link-hover:#fff} #sidebar-wrapper .sidebar,#sidebar-wrapper .navbar-light{background:transparent} #side-menu{padding:46px 10px 6px;gap:3px} #sidebar-wrapper .sidebar ul li{border-bottom:0} #side-menu>li>a.nav-link,#side-menu .nav-second-level a.nav-link{display:flex;align-items:center;gap:10px;border-radius:12px; font-weight:500;font-size:14.5px;color:#cfd3ff;transition:background .2s,color .2s,box-shadow .2s} #side-menu>li>a.nav-link{padding:9px 10px} /* o icon 32px; cat chu thua cua ligature hong (vd "info_outline" -> "info" + "_") o mep noi dung */ #side-menu>li>a.nav-link>.material-icons:first-child{width:19px;height:19px;padding:6.5px;box-sizing:content-box;flex:none;border-radius:10px; font-size:19px;line-height:19px;margin:0;overflow:clip;overflow-clip-margin:content-box;background:rgba(255,255,255,.08);color:#dfe2ff;transition:background .2s} #side-menu a.nav-link:hover{background:rgba(255,255,255,.07);color:#fff} #side-menu>li>a.nav-link:hover>.material-icons:first-child{background:rgba(255,255,255,.14)} #side-menu .arrow{margin-left:auto;font-size:20px;color:#8f95cf;transition:transform .2s} #side-menu>li>a.nav-link[aria-expanded=true] .arrow{transform:rotate(90deg)} #side-menu>li>a.nav-link[aria-expanded=true]{background:rgba(255,255,255,.07);color:#fff} #side-menu .nav-second-level{padding:4px 0 6px 18px;margin-left:20px;border-left:1px solid rgba(255,255,255,.1)} #side-menu .nav-second-level li{flex:100%} #side-menu .nav-second-level a.nav-link{padding:7px 10px;font-size:13.5px;color:#b9bdea} #side-menu .nav-second-level a.nav-link .material-icons{font-size:17px;color:#8f95cf;margin-right:0} #side-menu .nav-third-level a.nav-link,#side-menu .nav-fourth-level a.nav-link{padding-left:14px} /* muc dang mo: quang sang tim (chuan web noi bo) */ #side-menu a.nav-link.nh-on{background:var(--nh-grad);color:#fff;box-shadow:var(--nh-glow)} #side-menu>li>a.nav-link.nh-on>.material-icons:first-child{background:rgba(255,255,255,.2);color:#fff;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20} #side-menu .nav-second-level a.nav-link.nh-on .material-icons{color:#fff} #side-menu>li>a.nav-link.nh-on-cha{color:#fff} #side-menu>li.position-absolute{right:12px!important;top:8px;z-index:2;padding:0!important} #side-menu>li.position-absolute a{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#8f95cf} #side-menu>li.position-absolute a:hover{background:rgba(255,255,255,.08);color:#fff} #sidebar-wrapper lhc-connection-status{display:block;margin:10px 12px;padding:8px 10px;border-radius:12px;font-size:12.5px;color:#aeb3e6; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)} #sidebar-wrapper lhc-connection-status .material-icons{font-size:16px} /* ---------- 5. Cot "Cac cuoc chat" ---------- */ #menu-rmtoggle.chats-column{background:var(--nh-glass);box-shadow:inset -1px 0 0 var(--nh-line);position:relative;z-index:3} /* 25/10: z-index 3 (truoc 2 = bang #page-content-wrapper dung sau trong DOM -> menu tuy chon "dropend" mo sang phai bi vung noi dung de len) */ #menu-rmtoggle .bg-light{background:transparent!important} #menu-rmtoggle>div>.clearfix{padding:6px 6px 4px 8px;min-height:48px} #menu-rmtoggle>div>.clearfix>.text-muted{color:var(--nh-ink)!important;padding:8px 6px!important} #menu-rmtoggle>div>.clearfix>.text-muted .fs13{font-size:15px;font-weight:800;letter-spacing:-.2px} #menu-rmtoggle>div>.clearfix>.text-muted .material-icons{color:var(--nh-pri);margin-right:6px!important} #menu-rmtoggle>div>.clearfix>a,#menu-chat-options{display:grid!important;place-items:center;width:34px;height:34px;padding:0!important; margin:3px 2px 0;border-radius:10px;color:var(--nh-ink2)!important} #menu-rmtoggle>div>.clearfix>a:hover,#menu-chat-options:hover{background:var(--nh-pri-soft);color:var(--nh-pri)!important} #menu-chat-options::after{display:none} /* hang tab con: mo / cua toi / cho / dang chat / bot */ #sub-tabs{gap:4px;padding:5px;margin:2px 8px 6px!important;border:1px solid var(--nh-line)!important;border-radius:var(--nh-r2); background:rgba(255,255,255,.55);box-shadow:var(--nh-sh1)} html[data-bs-theme=dark] #sub-tabs{background:rgba(255,255,255,.04)} #sub-tabs .nav-link{border:0!important;border-radius:10px;padding:7px 4px!important;color:var(--nh-ink2);display:flex;align-items:center; justify-content:center;gap:3px;min-height:36px;transition:background .2s,color .2s,box-shadow .2s} #sub-tabs .nav-link:hover{background:var(--nh-pri-soft)} #sub-tabs .nav-link .material-icons{margin-right:0;font-size:19px} #sub-tabs .nav-link .text-muted{color:inherit!important;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums} #sub-tabs a[href="#sub-tabs-open"] .material-icons,#sub-tabs a[href="#sub-tabs-my-assigned"] .material-icons{color:var(--st-mine)} #sub-tabs a[href="#sub-tabs-pending"] .material-icons{color:var(--st-wait)} #sub-tabs a[href="#sub-tabs-active"] .material-icons{color:var(--st-live)} #sub-tabs a[href="#sub-tabs-bot"] .material-icons{color:var(--st-bot)} #sub-tabs .nav-link.active{background:var(--nh-grad);color:#fff;box-shadow:var(--nh-glow)} #sub-tabs .nav-link.active .material-icons{color:#fff!important;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20} #sub-tabs~.tab-content,.chats-column .tab-content{font-size:14px} /* dong chat trong cot */ #tabs-dashboard{padding:2px 8px 6px} .chat-tabs-row{position:relative;border-radius:var(--nh-r2);padding:9px 10px 9px 14px!important;margin-bottom:5px;cursor:pointer; background:var(--nh-glass2);border:1px solid var(--nh-line);box-shadow:0 1px 2px rgba(17,21,54,.04);transition:background .15s,box-shadow .15s,transform .15s} .chat-tabs-row::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--st-live)} .chat-tabs-row:has(.chat-pending)::before{background:var(--st-wait)} .chat-tabs-row:has(.chat-unread)::before{background:var(--st-unread)} .chat-tabs-row:has(.chat-closed)::before{background:var(--st-closed)} .chat-tabs-row:not(.chat-tab-active):hover{background:var(--nh-glass2)!important;box-shadow:var(--nh-sh1);border-color:var(--nh-pri-soft2)} .chat-tabs-row.chat-tab-active,html[data-bs-theme=dark] .chat-tab-active{background:linear-gradient(120deg,rgba(91,71,245,.12),rgba(139,92,246,.08))!important; border-color:rgba(91,71,245,.35);box-shadow:inset 0 0 0 1px rgba(91,71,245,.25),0 6px 16px -10px rgba(91,71,245,.6)} .chat-tabs-row>.fs12{font-size:14px;line-height:1.45} .chat-tabs-row .small-truncate-nick{font-weight:700;color:var(--nh-ink)} .chat-tabs-row>.fs13{font-size:13.5px;color:var(--nh-ink2)!important;padding-top:3px!important} .chat-tabs-row .material-icons{font-size:17px;margin-right:2px} .chat-tabs-row .btn-link{color:var(--nh-mut);border-radius:8px;width:24px;height:24px;display:inline-grid;place-items:center} .chat-tabs-row .btn-link:hover{background:var(--nh-redbg);color:var(--nh-red)} .chat-tabs-row .text-muted{font-variant-numeric:tabular-nums} /* ---------- 6. Vung noi dung ---------- */ #page-content-wrapper{background:transparent} #path-container,.breadcrumb{font-size:13.5px} .breadcrumb{--bs-breadcrumb-divider-color:var(--nh-mut);--bs-breadcrumb-item-active-color:var(--nh-ink2);margin-bottom:6px} .breadcrumb a{font-weight:600;text-decoration:none} #middle-column-page h1,#middle-column-page .h1{font-size:24px;font-weight:800;letter-spacing:-.4px;margin:10px 0 16px} /* ca h1 trang NOHU (.nbd h1 20px) */ /* ---------- 7. The (tien ich bang dieu khien + card chung) ---------- */ .card{--bs-card-bg:var(--nh-glass);--bs-card-border-color:var(--nh-edge);--bs-card-border-radius:var(--nh-r); --bs-card-inner-border-radius:calc(var(--nh-r) - 1px);--bs-card-cap-bg:transparent; box-shadow:var(--nh-sh1);overflow:visible} html[data-bs-theme=dark] .card{--bs-card-border-color:var(--nh-edge)} .card-dashboard{margin-bottom:var(--nh-gap);position:relative} .card-dashboard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--nh-hi)} .card-dashboard>*{position:relative;z-index:1} /* 25/10 chu bao de chu: con z-index 1 cua the SAU ve de len menu tha (Nguoi dung, bo phan...) cua the TRUOC -> khoi dang mo menu nang len */ .card-dashboard:has(.dropdown-menu.show,.show>.dropdown-menu,:focus-within)>*:has(.dropdown-menu.show,.show>.dropdown-menu,:focus-within){z-index:40} .card-dashboard:has(.dropdown-menu.show,.show>.dropdown-menu){z-index:40} .card-dashboard>.card-header,.dashboard-panels .card-header,.card>.card-header{background:transparent;border-bottom:1px solid var(--nh-line)!important; padding:11px 14px;font-weight:700;font-size:15px;color:var(--nh-ink)} .card-dashboard>.card-header>a:first-of-type,.card-dashboard>.card-header>a:first-of-type span{color:var(--nh-ink);text-decoration:none} .card-dashboard>.card-header>a:first-of-type:hover span{color:var(--nh-pri)} .card-dashboard>.card-header .material-icons:not(.exp-cntr):not(.fs24){font-size:18px} /* icon dau the (sua 25/10): o 30px; the thuong = icon tim tren nen tim nhat. Truoc: mau theo lop icon -> lop chat-active LHC gan cho MOI the nen "Nhan vien truc tuyen", "So lieu thong ke"... deu xanh la, lan voi the trang thai. Nay mau trang thai CHI cho the trang thai (cho/dang chat/chua doc/da dong/bot). Icon hanh dong (cai dat, gui) LHC dat dau tieu de -> sang phai thanh nut nho canh nut tam dung/thu gon. */ .card-dashboard>.card-header>i.material-icons:first-of-type:not(.action-image),.card-dashboard>.card-header>a:first-of-type>i.material-icons:first-child, .card-dashboard>.card-header i.material-icons:is(.chat-active,.chat-pending,.chat-unread,.chat-closed):not(.action-image){ width:30px;height:30px;line-height:30px;text-align:center;border-radius:10px;background:var(--nh-pri-soft);color:var(--nh-pri);margin-right:8px; font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20} .card-dashboard.card-pending>.card-header i.material-icons:not(.action-image):not(.exp-cntr){color:var(--st-wait);background:var(--nh-ambbg)} .card-dashboard:is(.card-active-chats,.card-my-chats,.card-subject)>.card-header i.material-icons:not(.action-image):not(.exp-cntr){color:var(--st-live);background:var(--nh-grnbg)} .card-dashboard.card-unread-chats>.card-header i.material-icons:not(.action-image):not(.exp-cntr){color:var(--st-unread);background:var(--nh-redbg)} .card-dashboard.card-closed-chats>.card-header i.material-icons:not(.action-image):not(.exp-cntr){color:var(--st-closed);background:var(--nh-slatebg)} .card-dashboard.card-bot-chats>.card-header i.material-icons:not(.action-image):not(.exp-cntr){color:var(--st-bot);background:var(--nh-blubg)} .card-dashboard>.card-header>i.material-icons.action-image{order:9;width:30px;height:30px;line-height:30px;text-align:center;border-radius:9px;margin:0!important; padding:0;color:var(--nh-ink2);font-size:18px!important;cursor:pointer} .card-dashboard>.card-header>i.material-icons.action-image:hover{background:var(--nh-pri-soft);color:var(--nh-pri)} /* vach mau tren dau the theo trang thai (kieu .h-vach cua web noi bo) */ .card-dashboard::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:transparent;z-index:2} .card-dashboard.card-pending::before{background:var(--st-wait)} .card-dashboard.card-active-chats::before,.card-dashboard.card-my-chats::before,.card-dashboard.card-subject::before{background:var(--st-live)} .card-dashboard.card-unread-chats::before{background:var(--st-unread)} .card-dashboard.card-closed-chats::before{background:var(--st-closed)} .card-dashboard.card-bot-chats::before{background:var(--st-bot)} .card-dashboard.card-transfer_chats::before{background:var(--nh-pri2)} /* tieu de the: chu dai (tieng Viet) tu xuong dong o ben trai, nut thu gon/tam dung luon nam ben phai dong dau */ .card-dashboard>.card-header{display:flex;align-items:flex-start;gap:4px 6px;flex-wrap:nowrap;line-height:1.35} .card-dashboard>.card-header>*{flex:none} .card-dashboard>.card-header>a:first-of-type:not(.material-icons),.card-dashboard>.card-header>span.d-lg-inline, .card-dashboard>.card-header>.title-card-header{flex:0 1 auto;min-width:0;padding-top:5px} /* tieu de co link: thut treo de dong 2 thang hang chu, so dem "(10+)" van dinh lien tieu de */ .card-dashboard>.card-header>a:first-of-type:not(.material-icons){display:block;padding:0 0 0 38px;text-indent:-38px;line-height:22px} .card-dashboard>.card-header>a:first-of-type:not(.material-icons)>i.material-icons:first-child{text-indent:0;vertical-align:middle} .card-dashboard>.card-header>span:not(.badge){padding-top:5px} .card-dashboard>.card-header::after{content:"";flex:1 1 0;order:8} .card-dashboard>.card-header>a.text-muted.material-icons{order:9;float:none!important;margin:0!important} .card-dashboard>.card-header>.exp-cntr{order:10;float:none!important;flex:none} .card-dashboard>.card-header>.float-end:not(.exp-cntr):not(.material-icons):not(.badge){order:7;float:none!important} /* so dem trong tieu de the */ .card-dashboard>.card-header>a:first-of-type>span+span,.card-dashboard>.card-header>span.fs14+span{font-variant-numeric:tabular-nums} /* nut thu gon / tam dung / thoi gian tai */ .exp-cntr{width:30px;height:30px;line-height:30px!important;text-align:center;border-radius:9px;border:1px solid var(--nh-line)!important; background:var(--nh-glass2)!important;color:var(--nh-ink2)!important;font-size:20px!important;text-decoration:none} .exp-cntr:hover{background:var(--nh-pri-soft)!important;color:var(--nh-pri)!important} .card-header .badge.fw-light{display:none!important} /* "0.012 s." = thoi gian tai tien ich: nhieu cho nhan vien */ .card-header a.text-muted.material-icons{width:30px;height:30px;line-height:30px;text-align:center;border-radius:9px;padding:0!important;font-size:18px} .card-header a.text-muted.material-icons:hover{background:var(--nh-pri-soft);color:var(--nh-pri)!important} .card-dashboard .p-2{padding:10px 12px!important} /* rong cot bang dieu khien: ~290px moi cot qua chat -> tu xuong dong khi hep (van keo-tha duoc) */ #dashboard-body>.sortable-column-dashboard{flex:1 1 330px;width:auto;max-width:100%} #dashboard-body{row-gap:0} /* ---------- 8. Bang ---------- */ .table{--bs-table-bg:transparent;--bs-table-color:var(--nh-ink);--bs-table-border-color:var(--nh-line); --bs-table-striped-bg:rgba(91,71,245,.03);--bs-table-hover-bg:var(--nh-pri-soft);--bs-table-hover-color:var(--nh-ink)} .table>thead>tr>th,.table>thead>tr>td{font-size:12px;font-weight:700;color:var(--nh-mut);text-transform:uppercase;letter-spacing:.3px; border-bottom:1px solid var(--nh-line2);white-space:normal} /* 25/10: cho xuong dong, khong ep bang rong qua khung */ .table>thead .material-icons{font-size:17px;color:var(--nh-mut)} .table td{vertical-align:middle} .list-chat-table>tbody>tr>td{padding:8px 6px;font-size:14px;border-bottom:1px solid var(--nh-line)} .list-chat-table>tbody>tr:last-child>td{border-bottom:0} .list-chat-table>tbody>tr:hover>td,html[data-bs-theme=dark] .list-chat-table>tbody>tr:hover>td{background:var(--nh-pri-soft)!important} .list-chat-table .abbr-list>span{font-weight:600} .list-chat-table .material-icons{font-size:17px} .list-chat-table a.material-icons{color:var(--nh-mut);border-radius:7px} .list-chat-table a.material-icons:hover{color:var(--nh-pri)} .list-chat-table a.material-icons[title*="Xo"],.list-chat-table a.material-icons[title*="Delete"]{color:var(--nh-mut)} .list-chat-table a.material-icons[title*="Xo"]:hover,.list-chat-table a.material-icons[title*="Delete"]:hover{color:var(--nh-red)} .panel-list{border-radius:0 0 var(--nh-r) var(--nh-r)} .user-online-row td,.online_user{background:var(--nh-grnbg)!important} .long-response-chat{background:var(--nh-redbg)!important} .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:rgba(91,71,245,.025)} .table:not(.list-chat-table):not(.table-borderless)>tbody>tr>td{border-bottom-color:var(--nh-line)} /* ---------- 8b. Cham trang thai tung dong chat (dong la cho nhan vien quet mat) ---------- mac dinh theo the; dong "dang cho" trong the cua toi = vang; khach vua nhan, chua tra loi (mui ten do) = do */ .list-chat-table>tbody>tr{--row-st:transparent} .card-pending .list-chat-table>tbody>tr{--row-st:var(--st-wait)} .card-active-chats .list-chat-table>tbody>tr,.card-my-chats .list-chat-table>tbody>tr,.card-subject .list-chat-table>tbody>tr{--row-st:var(--st-live)} .card-unread-chats .list-chat-table>tbody>tr{--row-st:var(--st-unread)} .card-bot-chats .list-chat-table>tbody>tr{--row-st:var(--st-bot)} .card-transfer_chats .list-chat-table>tbody>tr{--row-st:var(--nh-pri2)} .list-chat-table>tbody>tr:has(i.chat-unread){--row-st:var(--st-wait)} .list-chat-table>tbody>tr:has(.material-icons.text-danger){--row-st:var(--st-unread)} :is(.card-pending,.card-active-chats,.card-my-chats,.card-subject,.card-unread-chats,.card-bot-chats,.card-transfer_chats) .list-chat-table>tbody>tr>td:first-child>.abbr-list::before{ content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 7px 1px 2px;vertical-align:middle;background:var(--row-st); box-shadow:0 0 0 3px color-mix(in srgb,var(--row-st) 20%,transparent)} .list-chat-table>tbody>tr:has(.material-icons.text-danger)>td:first-child .abbr-list>span{color:var(--st-unread)} .list-chat-table i.chat-unread{color:var(--st-wait)} /* dong ho cat "dang cho" trong the cua toi */ /* ---------- 8c. Chong tran/cat chu tieng Viet ---------- */ .card-group-chat table>tbody>tr:has(>td>select){display:flex;gap:6px;align-items:center;padding:6px 8px;width:100%} .card-group-chat table>tbody>tr:has(>td>select)>td{display:block;padding:0;border:0;width:auto!important} .card-group-chat table>tbody>tr:has(>td>select)>td:first-child{flex:1 1 150px;min-width:110px} .card-group-chat table>tbody>tr:has(>td>select)>td:not(:first-child){flex:none} .card-group-chat table>tbody>tr:has(>td>select) select{width:auto;white-space:nowrap;padding-right:28px} .card-onlineusers .p-2>.row>[class*=col-]{flex:0 0 50%;max-width:50%;margin-bottom:6px} .card-onlineusers .p-2>.row>[class*=col-]:nth-child(even){padding-right:calc(var(--bs-gutter-x)*.5)!important} .card-departments_stats .panel-list,.card-operators .panel-list{overflow-x:auto} .card-departments_stats .table,.card-operators .table{table-layout:auto} .card-departments_stats .table td,.card-departments_stats .table th,.card-operators .table td{white-space:nowrap;font-variant-numeric:tabular-nums} .chat-tabs-row .text-muted,.chat-tabs-row .d-xl-inline,.chat-tabs-row .small-truncate-nick{white-space:nowrap} .chat-main-right-column .tab-pane a{white-space:normal;overflow-wrap:anywhere} /* ly do vang "Viet / Anh / Trung" o Gio truc tuyen (tpl nohuvi tach moi thu tieng 1 dong): cot hep khong ngat giua tu tieng Trung */ .nohu-ly-do{word-break:keep-all} /* ---------- 9. Nut ---------- */ .btn{--bs-btn-font-weight:600;--bs-btn-border-radius:var(--nh-rc);--bs-btn-padding-y:.45rem;--bs-btn-padding-x:.95rem; transition:transform .15s,box-shadow .15s,background-color .15s,color .15s,border-color .15s} .btn-sm,.btn-group-sm>.btn{--bs-btn-border-radius:9px;--bs-btn-padding-y:.3rem;--bs-btn-padding-x:.6rem;--bs-btn-font-size:13.5px} .btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#5b47f5;--bs-btn-border-color:transparent;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#4e3ae8; --bs-btn-hover-border-color:transparent;--bs-btn-active-bg:#4334d6;--bs-btn-active-border-color:transparent;--bs-btn-disabled-bg:#8f84f7; --bs-btn-disabled-border-color:transparent;--bs-btn-focus-shadow-rgb:91,71,245; background-image:var(--nh-grad);box-shadow:0 6px 14px -8px rgba(55,40,190,.7),inset 0 1px 0 rgba(255,255,255,.28)} .btn-primary:hover{box-shadow:0 10px 18px -8px rgba(55,40,190,.7),inset 0 1px 0 rgba(255,255,255,.28);transform:translateY(-1px)} .btn-success{--bs-btn-bg:#059669;--bs-btn-border-color:#059669;--bs-btn-hover-bg:#047857;--bs-btn-hover-border-color:#047857;--bs-btn-active-bg:#065f46; box-shadow:0 6px 14px -8px rgba(4,120,87,.7),inset 0 1px 0 rgba(255,255,255,.25)} .btn-danger{--bs-btn-bg:#e11d48;--bs-btn-border-color:#e11d48;--bs-btn-hover-bg:#be123c;--bs-btn-hover-border-color:#be123c;--bs-btn-active-bg:#9f1239; box-shadow:0 6px 14px -8px rgba(190,18,60,.7),inset 0 1px 0 rgba(255,255,255,.25)} .btn-warning{--bs-btn-bg:#f59e0b;--bs-btn-border-color:#f59e0b;--bs-btn-hover-bg:#d97706;--bs-btn-hover-border-color:#d97706;--bs-btn-color:#1f1300} .btn-secondary{--bs-btn-color:var(--nh-ink);--bs-btn-bg:var(--nh-glass2);--bs-btn-border-color:var(--nh-line2);--bs-btn-hover-color:var(--nh-pri); --bs-btn-hover-bg:var(--nh-glass2);--bs-btn-hover-border-color:rgba(91,71,245,.45);--bs-btn-active-color:var(--nh-pri);--bs-btn-active-bg:var(--nh-pri-soft); --bs-btn-active-border-color:rgba(91,71,245,.45);--bs-btn-disabled-color:var(--nh-mut);--bs-btn-disabled-bg:var(--nh-glass2);box-shadow:var(--nh-sh1)} .btn-light{--bs-btn-color:var(--nh-ink);--bs-btn-bg:var(--nh-glass2);--bs-btn-border-color:var(--nh-line2);--bs-btn-hover-color:var(--nh-pri); --bs-btn-hover-bg:var(--nh-glass2);--bs-btn-hover-border-color:rgba(91,71,245,.45);--bs-btn-active-color:var(--nh-pri);--bs-btn-active-bg:var(--nh-pri-soft); --bs-btn-active-border-color:rgba(91,71,245,.45)} .btn-outline-primary{--bs-btn-color:var(--nh-pri);--bs-btn-border-color:rgba(91,71,245,.45);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--nh-pri); --bs-btn-hover-border-color:var(--nh-pri);--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--nh-pri);--bs-btn-active-border-color:var(--nh-pri);background:var(--nh-glass2)} .btn-outline-secondary{--bs-btn-color:var(--nh-ink2);--bs-btn-border-color:var(--nh-line2);--bs-btn-hover-color:var(--nh-pri);--bs-btn-hover-bg:var(--nh-pri-soft); --bs-btn-hover-border-color:rgba(91,71,245,.35);--bs-btn-active-color:var(--nh-pri);--bs-btn-active-bg:var(--nh-pri-soft2);--bs-btn-active-border-color:rgba(91,71,245,.45); background-color:var(--nh-glass2)} .btn-outline-secondary:hover{background-color:var(--nh-pri-soft)} .btn-outline-danger{--bs-btn-color:var(--nh-red);--bs-btn-border-color:rgba(225,29,72,.4);--bs-btn-hover-bg:var(--nh-red);--bs-btn-hover-border-color:var(--nh-red)} .btn-outline-success{--bs-btn-color:var(--nh-grn);--bs-btn-border-color:rgba(5,150,105,.4);--bs-btn-hover-bg:var(--nh-grn);--bs-btn-hover-border-color:var(--nh-grn)} .btn-link{--bs-btn-color:var(--bs-link-color);--bs-btn-hover-color:var(--bs-link-hover-color);text-decoration:none} .btn:disabled,.btn.disabled{transform:none!important} .btn-xs,.btn-group-xs>.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:28px;padding:3px 9px;font-size:13px;line-height:1.2;border-radius:8px} .btn-xs .material-icons{font-size:16px;margin:0!important;line-height:1} .badge{font-weight:700;border-radius:999px;padding:.38em .7em} .badge.bg-light{background:var(--nh-pri-soft)!important;color:var(--nh-pri-ink)!important} .badge.bg-success{background:var(--nh-grnbg)!important;color:var(--nh-grn)!important} .badge.bg-danger{background:var(--nh-redbg)!important;color:var(--nh-red)!important} .badge.bg-warning{background:var(--nh-ambbg)!important;color:var(--nh-amb)!important} .badge.bg-info,.badge.bg-primary{background:var(--nh-blubg)!important;color:var(--nh-pri-ink)!important} .badge.bg-secondary{background:var(--nh-slatebg)!important;color:var(--nh-ink2)!important} /* ---------- 10. O nhap, menu tha xuong ---------- */ .form-control,.form-select{border-color:var(--nh-line2);border-radius:var(--nh-rc);background-color:var(--nh-glass2);color:var(--nh-ink); min-height:38px;transition:border-color .15s,box-shadow .15s} .form-control-sm,.form-select-sm{min-height:34px;border-radius:9px;font-size:13.5px} .form-control::placeholder{color:var(--nh-mut);opacity:.85} .form-control:focus,.form-select:focus{border-color:#8b7bff;box-shadow:0 0 0 4px var(--nh-ring);background-color:var(--nh-glass2);color:var(--nh-ink)} html[data-bs-theme=dark] .form-control,html[data-bs-theme=dark] .form-select{background-color:rgba(255,255,255,.06);color:var(--nh-ink)} html[data-bs-theme=dark] .form-control:focus,html[data-bs-theme=dark] .form-select:focus{background-color:rgba(255,255,255,.09)} .form-check-input,input[type=checkbox],input[type=radio]{accent-color:var(--nh-pri)} .form-check-input:checked{background-color:var(--nh-pri);border-color:var(--nh-pri)} .form-check-input:focus{box-shadow:0 0 0 4px var(--nh-ring);border-color:#8b7bff} label,.form-label{font-weight:600;color:var(--nh-ink2);font-size:13.5px} .form-group{margin-bottom:12px} .input-group-text{background:var(--nh-pri-soft);border-color:var(--nh-line2);color:var(--nh-ink2);border-radius:var(--nh-rc)} .btn-block-department .btn-light,.btn-department-dropdown,.card-dashboard select.btn-light,.card-dashboard .form-control.btn-light, html[data-bs-theme=dark] .card-dashboard .btn-block-department .btn-light,html[data-bs-theme=dark] .card-dashboard .form-control, html[data-bs-theme=dark] .dashboard-panels .btn-block-department .btn-light{ background:var(--nh-glass2)!important;border:1px solid var(--nh-line2)!important;color:var(--nh-ink)!important;border-radius:9px;min-height:34px;font-weight:600} html[data-bs-theme=dark] .card-dashboard .btn-block-department .btn-light,html[data-bs-theme=dark] .card-dashboard .form-control{background:rgba(255,255,255,.06)!important} .btn-department-dropdown:hover{border-color:rgba(91,71,245,.45)!important;color:var(--nh-pri)!important} .dropdown-menu{--bs-dropdown-bg:var(--nh-glass2);--bs-dropdown-border-color:var(--nh-line);--bs-dropdown-border-radius:var(--nh-r2); --bs-dropdown-link-color:var(--nh-ink);--bs-dropdown-link-hover-bg:var(--nh-pri-soft);--bs-dropdown-link-hover-color:var(--nh-pri); --bs-dropdown-link-active-bg:var(--nh-pri);--bs-dropdown-font-size:14px;--bs-dropdown-padding-y:6px; box-shadow:var(--nh-sh2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .dropdown-item{border-radius:9px;margin:0 6px;width:calc(100% - 12px);padding:7px 10px;display:flex;align-items:center;gap:6px} .dropdown-lhc label,.dropdown-result label{font-weight:500;color:var(--nh-ink);font-size:13.5px;border-radius:8px} .btn-block-department label:hover,html[data-bs-theme=dark] .btn-block-department label:hover{background:var(--nh-pri-soft)} /* ---------- 11. Tab, pill, gach chan ---------- */ .nav-tabs{--bs-nav-tabs-border-color:var(--nh-line2);--bs-nav-tabs-link-active-bg:var(--nh-glass2);--bs-nav-tabs-link-active-color:var(--nh-pri-ink); --bs-nav-tabs-link-active-border-color:var(--nh-line2) var(--nh-line2) transparent;--bs-nav-tabs-border-radius:12px;gap:2px} .nav-tabs .nav-link{font-weight:600;color:var(--nh-ink2);padding:9px 14px} .nav-tabs .nav-link:hover{color:var(--nh-pri);border-color:transparent;background:var(--nh-pri-soft)} .nav-tabs .nav-link.active{font-weight:700;box-shadow:0 -3px 0 var(--nh-pri) inset} .nav-pills .nav-link{border-radius:var(--nh-rc);font-weight:600;color:var(--nh-ink2);background:transparent} .nav-pills>li>a,html[data-bs-theme=dark] .nav-pills>li>a{border:1px solid var(--nh-line)!important} .nav-pills>li>a:hover,html[data-bs-theme=dark] .nav-pills>li>a:hover{background:var(--nh-pri-soft)} .nav-pills .nav-link.active,.nav-pills .show>.nav-link{background:var(--nh-grad);color:#fff;box-shadow:var(--nh-glow);border-color:transparent!important} .nav-underline .nav-link,.nav-underline a.nav-link{color:var(--nh-ink2);font-weight:600;border-bottom:3px solid transparent} .nav-underline a.nav-link.active,html[data-bs-theme=dark] .nav-underline a.nav-link.active{color:var(--nh-pri-ink);border-bottom:3px solid var(--nh-pri)} .nav-underline .nav-link:hover{color:var(--nh-pri)} .chat-tab-sub-items .nav-link .material-icons{font-size:19px} /* tab cac cuoc chat dang mo phia tren (khi bat tab) */ #tabs>.nav-pills .nav-link{padding:7px 12px;display:flex;align-items:center;gap:4px;background:var(--nh-glass2)} #tabs>.nav-pills .nav-link.active,#tabs>.nav-pills .show>.nav-link{background:var(--nh-grad);color:#fff} /* 25/10: luat tren (id) de mat nen tim -> chu trang tren nen trang */ #tabs>.nav-pills .icon-close-chat{border-radius:7px} /* ---------- 12. Khung chat ---------- */ .chat-main-left-column{padding-right:12px;padding-top:30px} /* gio tin cuoi cua khach + nut an/hien cot phai: LHC dat chung de len thanh tren (margin -18px) -> keo vao dai 30px tren khung tin */ .last-user-msg{font-size:12.5px;color:var(--nh-ink2);font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:999px;background:var(--nh-glass2);border:1px solid var(--nh-line);margin-top:-27px!important;z-index:2} .last-user-msg .material-icons{font-size:14px;margin:0;color:var(--nh-pri)} .collapse-right,.collapse-right:focus,.collapse-right:visited{margin-top:-29px!important;width:28px;height:28px;line-height:28px;text-align:center;border-radius:9px; color:var(--nh-ink2);font-size:22px;z-index:2} .collapse-right:hover{margin-top:-29px!important;background:var(--nh-pri-soft);color:var(--nh-pri)} .chat-main-left-column .message-block{border-radius:var(--nh-r);background:var(--nh-glass);border:1px solid var(--nh-edge);box-shadow:var(--nh-sh1); overflow:hidden;margin-bottom:8px} .msgBlock-admin{padding:14px 16px 10px!important;font-size:15px} div.message-row{margin-bottom:6px} div.message-row>div,div.message-row>span{line-height:1.5} .usr-tit{font-style:normal;font-weight:700;font-size:13px;display:inline-block;margin:0 6px 3px 0;padding:0} .usr-tit .material-icons{font-size:15px} .msg-date{font-size:12px;line-height:1;padding:0;color:var(--nh-mut);font-variant-numeric:tabular-nums;background:none!important;border:0!important} html[data-bs-theme=dark] .msg-date-op,html[data-bs-theme=dark] .msg-date-vi{background:none;border:0} /* tin cua khach: bong trang ben trai */ div.response div.msg-body,div.message-row.response .msg-body{display:inline-block;max-width:85%;padding:9px 13px;border-radius:4px 16px 16px 16px; background:var(--nh-msg-in);color:var(--nh-msg-in-ink);border:1px solid var(--nh-line);box-shadow:0 1px 2px rgba(17,21,54,.05),0 4px 12px -8px rgba(17,21,54,.25); font-size:15px;line-height:1.5;position:relative} /* tin cua nhan vien: bong tim ben phai */ div.message-admin div.msg-body{background:var(--nh-grad);background-color:var(--lhc-msg-body-op-bg);border-radius:16px 4px 16px 16px;padding:9px 13px; font-size:15px;line-height:1.5;box-shadow:0 6px 16px -10px rgba(55,40,190,.8),inset 0 1px 0 rgba(255,255,255,.22)} div.other-operator div.msg-body,div.auto-responder-msg div.msg-body{background:linear-gradient(120deg,#0e7490,#0891b2)} div.whisper-msg div.msg-body,html[data-bs-theme=dark] div.whisper-msg div.msg-body{background:repeating-linear-gradient(135deg,#6b7194 0 8px,#62688c 8px 16px)!important;color:#fff} div.message-admin .msg-body .material-icons{font-size:15px} /* tin he thong: dong nho can giua */ div.system-response{text-align:center;margin:8px 0} div.system-response .usr-tit.sys-tit{display:inline;font-size:12px;font-weight:600;color:var(--nh-mut);background:none} div.system-response .usr-tit.sys-tit i{font-style:normal} div.system-response>.text-muted,div.system-response .msg-body{display:inline;font-size:13px;color:var(--nh-mut)!important} div.system-response .msg-body .material-icons{font-size:15px} .message-row.system-response.operator-changes{margin-top:8px} .user-is-typing{font-size:13px;color:var(--nh-pri)!important;font-weight:600;padding:2px 4px} .btn-bottom-scroll>button{border-radius:999px;padding:6px 14px;opacity:1;box-shadow:var(--nh-sh2)} .new-msg-holder>span.new-msg{border-radius:999px;color:#fff;padding:2px 10px} .reactions-holder-admin{background:var(--nh-glass2);border:1px solid var(--nh-line);color:var(--nh-ink2);box-shadow:var(--nh-sh1)} /* thanh cong cu soan */ .toolbar-chat{gap:6px;align-items:center} .toolbar-chat .btn-group-sm>.btn,.toolbar-chat .btn-sm,.toolbar-chat .btn-toolbar .btn{min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center} .toolbar-chat .material-icons{font-size:18px} .toolbar-chat .btn-toolbar{padding-bottom:4px!important} /* nut Gui (lhinst.addmsgadmin): hanh dong chinh, tach khoi nhom icon */ .toolbar-chat a.btn[onclick*="addmsgadmin"]{flex:none;width:auto!important;min-width:58px;margin-left:8px!important;border-radius:var(--nh-rc)!important;border:0; background:var(--nh-grad);color:#fff;box-shadow:var(--nh-glow)} .toolbar-chat a.btn[onclick*="addmsgadmin"] .material-icons{color:#fff;font-size:20px;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20} .toolbar-chat a.btn[onclick*="addmsgadmin"]:hover{transform:translateY(-1px);filter:brightness(1.06);color:#fff} /* o soan tin */ .message-container-admin .form-send-textarea,.message-container-admin textarea.form-control,.lhc-editor.form-send-textarea{ font-size:15px!important;line-height:1.5;padding:11px 14px;border-radius:var(--nh-r2);border:1.5px solid var(--nh-line2); background:var(--nh-glass2);box-shadow:var(--nh-sh1);min-height:66px} .message-container-admin .form-send-textarea:focus,.lhc-editor.form-send-textarea:focus{border-color:#8b7bff;box-shadow:0 0 0 4px var(--nh-ring),var(--nh-sh1)} html[data-bs-theme=dark] .lhc-editor.form-send-textarea,html[data-bs-theme=dark] .message-container-admin .form-send-textarea{background:rgba(255,255,255,.06)} .form-send-textarea[placeholder]:empty:before{color:var(--nh-mut)} .edit-mode,.edit-mode>.form-send-textarea{background:var(--nh-ambbg)!important} /* cau tra loi mau (#tag) */ .canned-message-holder p.border{border-radius:var(--nh-rc);background:var(--nh-glass2);border-color:var(--nh-line2)!important;padding:7px 10px!important} .canned-message-holder p.border a{font-weight:600;color:var(--nh-ink2);font-size:13.5px} .canned-suggester{background:var(--nh-glass2);border:1px solid var(--nh-line2);border-radius:var(--nh-r2);box-shadow:var(--nh-sh2);overflow:hidden; -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)} .canned-list li a,.current-hash-content li{border-radius:9px} .canned-list li.current-item a,.current-hash-content li.current-item,.canned-list a:hover, html[data-bs-theme=dark] .canned-list li.current-item a,html[data-bs-theme=dark] .current-hash-content li.current-item,html[data-bs-theme=dark] .canned-list a:hover{ background:var(--nh-pri-soft2)!important;color:var(--nh-pri-ink)} lhc-editor{display:block;position:relative} lhc-editor>.canned-suggester{bottom:calc(100% + 8px)!important} .canned-msg-preview{max-height:30vh;overflow-y:auto} /* ban xem truoc dai khong che mat tin moi nhat cua khach */ .canned-msg-preview .msg-body,.canned-suggester .msg-body{background:var(--nh-pri-soft)!important;color:var(--nh-ink)!important; border:1px dashed rgba(91,71,245,.4);box-shadow:none!important} /* cot thong tin ben phai */ .chat-main-right-column>div[role=tabpanel]{background:var(--nh-glass);border:1px solid var(--nh-edge);border-radius:var(--nh-r);box-shadow:var(--nh-sh1); padding:4px 12px 12px!important} .chat-main-right-column .chat-tab-sub-items{margin:0 -4px 8px!important} .chat-main-right-column h6{font-size:14.5px;font-weight:800;margin-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:4px} .chat-main-right-column h6 .material-icons{color:var(--nh-pri)} .chat-main-right-column .row.text-muted,.chat-main-right-column .text-muted{font-size:13.5px} .chat-main-right-column .col-6{min-width:0;overflow-wrap:anywhere} .chat-main-right-column a.text-muted:hover{color:var(--nh-pri)!important} .chat-main-right-column .table{table-layout:fixed;width:100%} .chat-main-right-column .table td{border:0;padding:3px 4px;overflow-wrap:anywhere} .chat-main-right-column>div{container-type:inline-size} .chat-main-right-column .tab-pane{overflow-wrap:anywhere} @container (max-width:330px){.chat-main-right-column .row>.col-6{flex:0 0 100%;max-width:100%}} /* nut ket thuc chat: ro rang, mau do */ [id^=chat-close-action-]{color:var(--nh-red)!important;border:1px solid rgba(225,29,72,.3)!important;border-radius:9px!important; padding:3px 9px!important;margin-left:auto;background:var(--nh-redbg);font-weight:600;font-size:13px!important;display:inline-flex;align-items:center;gap:3px} [id^=chat-close-action-]:hover{background:var(--nh-red);color:#fff!important} [id^=chat-close-action-] .material-icons{font-size:15px!important;color:inherit} /* o trong ("Tat ca muc se hien o day"): khung net dut nhe, khong phai mang xam */ .alert-light,html[data-bs-theme=dark] .alert-light{background:transparent;border:1.5px dashed var(--nh-line2);color:var(--nh-mut); border-radius:var(--nh-r2);font-size:13.5px;display:flex;align-items:center;gap:6px} .alert-light .material-icons{color:var(--nh-mut)} /* bo loc thong ke + tim chat: luoi col-md-2 cua LHC tinh theo cua so, nhung vung noi dung chi con ~720-870px (vi 2 cot ben) -> 6 o/hang qua chat; doi thanh 3 o/hang (2 o khi hep) */ @media (max-width:1799.98px){ #form-statistic-action .row>.col-md-2,form[name=SearchFormRight] .row>.col-md-2{flex:0 0 33.333%;max-width:33.333%} #form-statistic-action .row>.col-md-1,form[name=SearchFormRight] .row>.col-md-1{flex:0 0 16.666%;max-width:16.666%} } @media (max-width:1199.98px){ #form-statistic-action .row>.col-md-2,form[name=SearchFormRight] .row>.col-md-2{flex:0 0 50%;max-width:50%} #form-statistic-action .row>.col-md-1,form[name=SearchFormRight] .row>.col-md-1{flex:0 0 25%;max-width:25%} } /* cap "Ngay" + "Gio va phut" (3 o chon gio/phut/giay) cua bo loc Thong ke / Danh sach chat / Gio truc tuyen: cot gio col-md-2/3 -> o 1366 moi o chon ~40px, can 70-118px (vi "Chọn g" / "13 g", en "Sel") -> moi cap 1 hang: ngay 35%, gio 65%. :is(#form-statistic-action,form) = do uu tien cua id, thang luat "3 o/hang" o tren */ @media (min-width:768px){ :is(#form-statistic-action,form) .row>[class*=col-md-]:has(>.form-group>.row>div>select:is([name=timefrom_hours],[name=timeto_hours])){flex:0 0 65%;max-width:65%} :is(#form-statistic-action,form) .row>[class*=col-md-]:has(+[class*=col-md-]>.form-group>.row>div>select:is([name=timefrom_hours],[name=timeto_hours])){flex:0 0 35%;max-width:35%} /* cot 2 o chon gio (tab Hieu suat "Bao gom khung gio", tab Bo phan khung gio) + o Loi moi (tab Hieu suat, form khong co id) -> nua hang */ :is(#form-statistic-action,form) .row>[class*=col-md-]:has(>.form-group>.row>div>select:is([name=timefrom_include_hours],[name=timeintervalfrom_hours],[name=timeintervalto_hours])), :is(#form-statistic-action,form) .row>[class*=col-md-]:has(>.form-group>select[name=invitation_id]){flex:0 0 50%;max-width:50%} /* tab 24 gio qua: ngay col-md-4 + gio col-md-1 + phut col-md-1 (o chon ~40px) -> moi cap 1 hang: ngay 50%, gio/phut 25% */ form .row>.col-md-4:has(>input:is([name=timefrom],[name=timeto])){flex:0 0 50%;max-width:50%} form .row>.col-md-1:has(>select:is([name=timefrom_hours],[name=timefrom_minutes],[name=timeto_hours],[name=timeto_minutes])){flex:0 0 25%;max-width:25%} } /* nut tha nhieu lua chon (renderMultiDropdown) trong o col-md-1/2/3 hep -> chu bi cat "Chọn ng…" (tab Hieu suat: form khong co id nen luat "3 o/hang" khong ap -> 96px; o Quoc gia col-md-1 96px): o chua nut tha >= 1/3 hang (1/2 khi hep); chu van dai hon thi xuong dong */ /* soat lan 3: Danh sach chat (form SearchFormRight) KHONG nam trong #view-content -> them vao; >=1800 o col-md-1 = 1/12 (~115px) -> 1/6 */ @media (min-width:1800px){ :is(#view-content form,form[name=SearchFormRight]) .row>.col-md-1:has(>.form-group>.btn-block-department){flex:0 0 16.666%;max-width:16.666%} } @media (min-width:768px) and (max-width:1799.98px){ :is(#view-content form,form[name=SearchFormRight]) .row>:is(.col-md-1,.col-md-2,.col-md-3):has(>.form-group>.btn-block-department){flex:0 0 33.333%;max-width:33.333%} } @media (min-width:768px) and (max-width:1199.98px){ :is(#view-content form,form[name=SearchFormRight]) .row>:is(.col-md-1,.col-md-2,.col-md-3):has(>.form-group>.btn-block-department){flex:0 0 50%;max-width:50%} } :is(#view-content form,form[name=SearchFormRight]) .btn-department-dropdown{white-space:normal;text-align:left} /* soat lan 3: 5 o so tin nhan Danh sach chat (col-2 trong col-md-4) chi 29px -> mat placeholder ("Khách >=" can 85px): ca hang; o "Truong nhom" Thong ke (col-6 trong col-md-2) 96px -> nua hang (ca hang khi < 1800), o chon 3/4 (en "Page from which the customer…" can 378px) */ @media (min-width:768px){ form[name=SearchFormRight] .row>.col-md-4:has(input[name=op_msg_count]){flex:0 0 100%;max-width:100%} :is(#form-statistic-action,form) .row>.col-md-2:has(>.row select[name=group_field]){flex:0 0 50%;max-width:50%} :is(#form-statistic-action,form) .row>.col-md-2:has(>.row select[name=group_field])>.row>.col-6:has(select[name=group_field]){flex:0 0 75%;max-width:75%} :is(#form-statistic-action,form) .row>.col-md-2:has(>.row select[name=group_field])>.row>.col-6:has(select[name=group_limit]){flex:0 0 25%;max-width:25%} } @media (min-width:768px) and (max-width:1799.98px){ :is(#form-statistic-action,form) .row>.col-md-2:has(>.row select[name=group_field]){flex:0 0 100%;max-width:100%} } /* modal Bao cao Gio truc tuyen: thanh ps-1 + vien = rong toi thieu 5px -> hang nhieu phien tran o (81 thanh: +283px); thut chu thay padding */ .nh-gio-bc td>div.d-inline-block{padding-left:0!important;border:0!important;text-indent:4px;box-shadow:inset -1px 0 rgba(255,255,255,.55)} /* Gio truc tuyen: bang co o ly do (.nohu-ly-do) -> moi o khong ngat giua tu tieng Trung ("下 / 线", "活动开始时 / 间") */ table:has(.nohu-ly-do){word-break:keep-all} /* Nguoi dung (user/userlist): ten dang nhap = EMAIL (26/10, nhu Comm100) -> cot Ten + E-mail dai day nut Sao chep / Dang nhap voi tu cach / Xoa ra ngoai khung noi dung (784px o 1366, 698px o 1280; Xoa x=1549 -> phai cuon bang). 2 cot do xuong dong o bat ky dau (toi thieu 7.5em), nut thao tac (td nowrap) xuong dong, "Dang nhap voi tu cach" toi thieu 6.2em -> vua khung vi / en / zh (tai-khoan/kiem-danh-sach-nguoi.py) */ form[action*="/user/userlist"]~table.list-links td:is(:nth-child(2),:nth-child(3)){overflow-wrap:anywhere;min-width:7.5em} form[action*="/user/userlist"]~table.list-links td:has(>a.btn){white-space:normal} form[action*="/user/userlist"]~table.list-links td:has(>a[href*="/user/loginas/"]){min-width:6.2em} /* bang Thong ke nhan vien (~25 cot): tran qua mep phai the (r=2756 o 1366, phan thua bi cat, khong cuon toi) va cot bi ep -> tieu de tieng Trung 1 chu/dong. Cuon ngang trong khung + cot toi thieu 5.5em */ table.statistic-table{display:block;overflow-x:auto} table.statistic-table th{min-width:5.5em} /* ---------- 13. Modal ---------- */ .modal-content{border:1px solid var(--nh-edge);border-radius:var(--nh-r);background:#fbfbff;box-shadow:var(--nh-sh2)} .modal-body .nav-tabs{margin-bottom:14px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden} .modal-body .nav-tabs .nav-link{white-space:nowrap;padding:8px 11px} .modal-header{border-bottom:1px solid var(--nh-line)} .modal-footer{border-top:1px solid var(--nh-line)} .modal-backdrop{--bs-backdrop-bg:#111536;--bs-backdrop-opacity:.45} .modal-title{font-weight:800} .alert{border-radius:var(--nh-r2);border:1px solid transparent} .alert-dismissible.p-2{padding-right:2.5rem!important} /* lhkernel/validation_error.tpl.php: p-2 de mat cho cua nut X (alert-dismissible) -> X de len chu */ .alert-success{background:var(--nh-grnbg);color:#065f46;border-color:rgba(5,150,105,.25)} .alert-danger{background:var(--nh-redbg);color:#9f1239;border-color:rgba(225,29,72,.25)} .alert-warning{background:var(--nh-ambbg);color:#7c4a03;border-color:rgba(217,119,6,.25)} .alert-info{background:var(--nh-blubg);color:#1e3a8a;border-color:rgba(37,99,235,.2)} html[data-bs-theme=dark] .alert-success{color:#a7f3d0}html[data-bs-theme=dark] .alert-danger{color:#fecdd3} html[data-bs-theme=dark] .alert-warning{color:#fde68a}html[data-bs-theme=dark] .alert-info{color:#bfdbfe} /* ---------- 14. Mau trang thai (dung chung toan he thong) ---------- */ .chat-pending{color:var(--st-wait)} .chat-active{color:var(--st-live)} .chat-unread{color:var(--st-unread)} .chat-closed{color:var(--st-closed)} .icon-user-online,.icon-user-online a,html[data-bs-theme=dark] .icon-user-online,html[data-bs-theme=dark] .icon-user-online a{color:var(--st-live)} .icon-user-away,.icon-user-away a{color:var(--st-wait)} .icon-user-offline,html[data-bs-theme=dark] .icon-user-offline{color:var(--st-unread)} /* ---------- 15. Trang cai dat / danh sach (noi dung dang trang) ---------- */ #middle-column-page ul:not(.nav):not(.dropdown-menu):not(.list-unstyled):not(.pagination):not(.dropdown-lhc) li{margin:3px 0} #middle-column-page ul:not(.nav):not(.dropdown-menu):not(.list-unstyled):not(.pagination):not(.dropdown-lhc) li::marker{color:rgba(91,71,245,.45)} #middle-column-page ul:not(.nav):not(.dropdown-menu):not(.list-unstyled) li>a{font-weight:500;text-decoration:none} #middle-column-page ul:not(.nav):not(.dropdown-menu):not(.list-unstyled) li>a:hover{text-decoration:underline} .pagination{--bs-pagination-border-radius:10px;--bs-pagination-active-bg:var(--nh-pri);--bs-pagination-active-border-color:var(--nh-pri); --bs-pagination-color:var(--nh-ink2);--bs-pagination-bg:var(--nh-glass2);--bs-pagination-border-color:var(--nh-line2);gap:4px} .page-link{border-radius:10px!important;font-weight:600} .list-group{--bs-list-group-bg:var(--nh-glass2);--bs-list-group-border-color:var(--nh-line);--bs-list-group-border-radius:var(--nh-r2); --bs-list-group-active-bg:var(--nh-pri);--bs-list-group-active-border-color:var(--nh-pri)} /* ---------- 16. Trang dang nhap (layout login.php: html khong co data-bs-theme) ---------- */ html:not([data-bs-theme]):has(body>.modal.d-block){background:#07061a} html:not([data-bs-theme]) body:has(>.modal.d-block){min-height:100vh;color:#eef0ff; background:radial-gradient(1.4px 1.4px at 12% 22%,rgba(255,255,255,.7),transparent 60%), radial-gradient(1.2px 1.2px at 78% 14%,rgba(255,255,255,.6),transparent 60%), radial-gradient(1.6px 1.6px at 64% 72%,rgba(255,255,255,.55),transparent 60%), radial-gradient(1.1px 1.1px at 30% 84%,rgba(255,255,255,.5),transparent 60%), radial-gradient(1.3px 1.3px at 90% 58%,rgba(255,255,255,.55),transparent 60%), radial-gradient(1px 1px at 44% 40%,rgba(255,255,255,.45),transparent 60%), radial-gradient(700px 520px at 20% 15%,rgba(139,92,246,.38),transparent 70%), radial-gradient(640px 520px at 88% 85%,rgba(225,29,72,.26),transparent 70%), radial-gradient(560px 460px at 85% 10%,rgba(56,189,248,.16),transparent 70%), linear-gradient(180deg,#0b0a24,#05040f);background-attachment:fixed} html:not([data-bs-theme]) body>.modal.d-block{position:relative;display:grid!important;place-items:center;min-height:100vh;padding:24px 16px} html:not([data-bs-theme]) body>.modal.d-block .modal-dialog{width:min(420px,100%);margin:0} html:not([data-bs-theme]) body>.modal.d-block .modal-content{position:relative;border-radius:26px;color:#eef0ff;padding:10px 8px 6px; background:linear-gradient(160deg,rgba(28,22,64,.66),rgba(10,8,28,.78));border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); box-shadow:0 30px 70px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);animation:nhVao .6s cubic-bezier(.2,.8,.2,1)} @keyframes nhVao{from{opacity:0;transform:translateY(14px) scale(.98)}} html:not([data-bs-theme]) body>.modal.d-block .modal-header{border:0;justify-content:center;padding:18px 16px 4px} html:not([data-bs-theme]) body>.modal.d-block .modal-header img{width:84px;height:84px;object-fit:contain;border-radius:50%;padding:12px; background:radial-gradient(circle at 30% 25%,#fff,#e9e6ff);box-shadow:0 0 0 6px rgba(139,92,246,.18),0 14px 30px -10px rgba(0,0,0,.8)} html:not([data-bs-theme]) body>.modal.d-block .modal-body{padding:8px 26px 24px} html:not([data-bs-theme]) body>.modal.d-block h1{font-size:22px;font-weight:800;text-align:center;color:#fff;margin:4px 0 20px;letter-spacing:.2px} html:not([data-bs-theme]) body>.modal.d-block label{color:#b4b8e6;font-size:12.5px;font-weight:600;letter-spacing:.3px} html:not([data-bs-theme]) body>.modal.d-block .form-control{height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07);color:#fff;font-size:15px;padding:0 16px} html:not([data-bs-theme]) body>.modal.d-block .form-control:focus{border-color:rgba(167,139,250,.9);background:rgba(255,255,255,.11);box-shadow:0 0 0 4px rgba(139,92,246,.25)} html:not([data-bs-theme]) body>.modal.d-block .form-control::placeholder{color:rgba(255,255,255,.35)} html:not([data-bs-theme]) body>.modal.d-block .form-control:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 40px #1d1846 inset;caret-color:#fff} html:not([data-bs-theme]) body>.modal.d-block .form-group{margin-bottom:16px} html:not([data-bs-theme]) body>.modal.d-block .input-checkbox{accent-color:#8b5cf6;width:16px;height:16px;vertical-align:-3px} html:not([data-bs-theme]) body>.modal.d-block .btn-group{display:flex;flex-direction:column;width:100%;gap:10px} html:not([data-bs-theme]) body>.modal.d-block .d-flex.justify-content-between{flex-direction:column;align-items:stretch!important;gap:14px} html:not([data-bs-theme]) body>.modal.d-block .btn-primary{height:50px;border-radius:14px!important;font-size:15.5px;font-weight:800;letter-spacing:.3px; background:linear-gradient(120deg,#ef4444,#a21caf 55%,#6d28d9);border:0;box-shadow:0 12px 26px -12px rgba(0,0,0,.9)} html:not([data-bs-theme]) body>.modal.d-block .btn-primary:hover{filter:brightness(1.1)} html:not([data-bs-theme]) body>.modal.d-block .btn-outline-secondary{border-radius:12px!important;border:0;background:transparent;color:#b4b8e6;font-weight:600} html:not([data-bs-theme]) body>.modal.d-block .btn-outline-secondary:hover{background:rgba(255,255,255,.08);color:#fff} html:not([data-bs-theme]) body>.modal.d-block .text-muted{color:rgba(199,203,240,.55)!important;text-align:center} html:not([data-bs-theme]) body>.modal.d-block .alert{background:rgba(225,29,72,.16);color:#fecdd3;border-color:rgba(251,113,133,.35)} html:not([data-bs-theme]) body>.container-fluid{color:rgba(199,203,240,.5)} html:not([data-bs-theme]) body>.container-fluid a{color:rgba(199,203,240,.7)} /* ---------- 17. Che do toi: chinh rieng ---------- */ html[data-bs-theme=dark] .chat-tabs-row{background:rgba(255,255,255,.04);border-color:var(--nh-line)} html[data-bs-theme=dark] .chat-tabs-row:not(.chat-tab-active):hover{background:rgba(255,255,255,.07)!important} html[data-bs-theme=dark] .chat-tabs-row.chat-tab-active{background:linear-gradient(120deg,rgba(124,108,255,.26),rgba(167,139,250,.14))!important;border-color:rgba(124,108,255,.45)} html[data-bs-theme=dark] .top-menu-bar-lhc .navbar-brand img{background:#fff} html[data-bs-theme=dark] .exp-cntr{background:rgba(255,255,255,.05)!important} html[data-bs-theme=dark] .btn-outline-secondary,html[data-bs-theme=dark] .btn-outline-primary{background-color:rgba(255,255,255,.04)} html[data-bs-theme=dark] .btn-light,html[data-bs-theme=dark] .btn-secondary{--bs-btn-bg:rgba(255,255,255,.07);--bs-btn-hover-bg:rgba(255,255,255,.1);--bs-btn-color:var(--nh-ink)} html[data-bs-theme=dark] div.response div.msg-body{box-shadow:none} html[data-bs-theme=dark] .nav-pills{--bs-nav-pills-link-active-bg:transparent} html[data-bs-theme=dark] .nav{--bs-nav-link-hover-color:#fff} html[data-bs-theme=dark] a:not([href]):not([class]),html[data-bs-theme=dark] a:not([href]){color:var(--nh-ink2)} html[data-bs-theme=dark] .card-dashboard::after{opacity:.6} html[data-bs-theme=dark] .dropdown-menu{--bs-dropdown-bg:rgba(31,35,82,.97)} html[data-bs-theme=dark] .modal-content{background:rgba(26,30,72,.98)} html[data-bs-theme=dark] .recent_visit{background-color:rgba(96,165,250,.16)!important;color:var(--nh-ink)} .recent_visit{background-color:var(--nh-blubg)!important} /* ========================================================================== 19. RA SOAT 25/10 — bo cuc + dong nhat. Chu du an: "chua can xung, mau/khoi chua dong nhat, khung bi bo vao, cot menu cut, Cai dat dai le the, khung chat chi cao 200px, nut Khach truc tuyen lech". Chi CSS, khong doi id/class/JS. 19a khung ung dung · 19b nhip khoang cach + chong tran ngang · 19c MOT cong thuc "the" · 19d tieu de · 19e nut/pill · 19f Cai dat = luoi the · 19g Khach truc tuyen · 19h khung chat · 19i cot "Cac cuoc chat" Dat TRUOC muc 18 (dien thoai) de luat <768px van thang. Bao cao: lhc-nohu/giao-dien-admin/RA-SOAT-2026-10-25.md ========================================================================== */ /* ---------- 19a. Khung ung dung (>=768px). Truoc: #wrapper cao dung khung nhin nhung noi dung dai tran ra ngoai -> ca TRANG cuon, nen toi thanh ben + cot "Cac cuoc chat" dung o mep duoi khung nhin dau (cut khi cuon). Nay: thanh tren + 2 cot ben dung yen, CHI vung noi dung (#page-content-wrapper) cuon -> 2 cot luon cao het. ---------- */ @media (min-width:768px){ #wrapper{min-height:0} #admin-body #page-content-wrapper{overflow-y:auto;overflow-x:auto;min-height:0} #sidebar-wrapper{overflow-y:auto;overflow-x:hidden} } /* flex item mac dinh min-width:auto = rong theo bang/the dai nhat -> ca vung noi dung phinh qua mep phai (Nguoi dung +416px, Bo phan +192px, Khoa API +50px o 1366) -> chu/nut bi cat. Cho phep co lai. */ #page-content-wrapper{min-width:0} /* ---------- 19b. Nhip khoang cach: noi dung cach 2 cot ben + mep phai 24px (truoc 10-15px, sat mep) ---------- */ @media (min-width:768px){ #admin-body #page-content-wrapper{padding:8px var(--nh-px) 20px} } #path-container .breadcrumb{padding:8px 0!important;margin-bottom:4px;border-bottom-color:var(--nh-line)!important} /* ---------- 19c. MOT cong thuc "the" cho moi khoi: kinh trang 74%, vien sang, bo 18px, bong sh1, dem 16/18px. Truoc: the LHC (kinh + vien trang) / the NOHU .nbd-the .nbc-the (kinh dac + vien muc dam) / .nap-the (bo 12px, khong bong) / o so .nbd-o (vien muc) -> 4 kieu. Nay chung 1 kieu; o so lieu (KPI) cung bo 18px, nen kinh dac de so noi ro. ---------- */ #middle-column-page :is(.nbd-the,.nbc-the,.nap-the,.nbk-the){background:var(--nh-glass);border:1px solid var(--nh-edge);border-radius:var(--nh-r); box-shadow:var(--nh-sh1);padding:var(--nh-pad);margin-bottom:var(--nh-gap)} #middle-column-page .nbk-the{padding:0} #middle-column-page .nbd-o{gap:12px;margin-bottom:var(--nh-gap)} #middle-column-page .nbd-o>div{background:var(--nh-glass2);border:1px solid var(--nh-edge);border-radius:var(--nh-r);box-shadow:var(--nh-sh1);padding:12px 16px} #middle-column-page .nbd-o>div.vang{box-shadow:inset 0 0 0 1.5px var(--st-wait),var(--nh-sh1)} #middle-column-page .nbd-o>div.do{box-shadow:inset 0 0 0 1.5px var(--st-unread),var(--nh-sh1)} .card-body{padding:var(--nh-pad)} #dashboard-body{--bs-gutter-x:var(--nh-gap)} /* trang LHC thuan (form + bang, khong co the rieng): ca noi dung nam tren 1 "to giay" kinh cung cong thuc the (Nguoi dung, Bo phan, Cau tra loi mau, Khach truc tuyen, Tai khoan...). Trang da co the rieng (NOHU, bang dieu khien, Cai dat, khung chat) giu nguyen. LHC ep div nay cao 100% khung -> doi thanh auto de nen keo theo noi dung. */ #middle-column-page>div:has(>h1,>div>#path-container):not(:has(#dashboard-body,.chat-main-left-column,.nbd,.nbc,.nap,.nbk,#system-tabs,.card)){ height:auto;background:var(--nh-glass);border:1px solid var(--nh-edge);border-radius:var(--nh-r);box-shadow:var(--nh-sh1);padding:4px 20px 20px;margin:8px 0 var(--nh-gap)} #middle-column-page>div:has(>h1,>div>#path-container):not(:has(#dashboard-body,.chat-main-left-column,.nbd,.nbc,.nap,.nbk,#system-tabs,.card)) #path-container{margin:0 -20px 2px;padding:0 20px} /* ---------- 19d. Tieu de the: MOT kieu 15px/700 + vach doc 4px dai tim (kieu ".the h3" web noi bo). Truoc: .nbd-the h2 15.7px, .nbc-the h2 16px, .nap-the h2 16.8px, the LHC 14.5px. ---------- */ #middle-column-page :is(.nbd-the,.nbc-the,.nap-the) h2{font-size:15px;font-weight:700;letter-spacing:-.1px;color:var(--nh-ink)} #middle-column-page :is(.nbd-the,.nbc-the,.nap-the) h2{display:flex;align-items:center;gap:10px;margin:0 0 12px} #middle-column-page :is(.nbd-the-dau,.nbc-the-dau) h2{margin:0} #middle-column-page :is(.nbd-the,.nbc-the,.nap-the) h2::before{content:"";flex:none;width:4px;height:17px;border-radius:3px;background:linear-gradient(var(--nh-pri),var(--nh-pri2))} #middle-column-page :is(.nbd-the-dau,.nbc-the-dau){margin-bottom:12px} /* nhan nhom muc (THOI GIAN THUC, HOM NAY...) */ #middle-column-page .nbd-muc{font-size:12px;letter-spacing:.5px;margin:6px 0 10px} /* ---------- 19e. Nut nhom / pill: MOT kieu. Truoc: "Hom nay" dang chon = nen xanh than dac (.nbd-ky), Bao cao = tim, nut nho .nbd-btn bo 9px chu 12.5px. Nay: pill kinh dac + vien vach, dang chon = dai tim + quang. ---------- */ #middle-column-page :is(.nbd-ky,.nbc-nhom){display:flex;flex-wrap:wrap;gap:6px} #middle-column-page :is(.nbd-ky,.nbc-nhom) a,#middle-column-page .nbd-btn{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px; border-radius:9px;border:1px solid var(--nh-line2);background:var(--nh-glass2);color:var(--nh-ink2);font-size:13px;font-weight:600;text-decoration:none;line-height:1} #middle-column-page :is(.nbd-ky,.nbc-nhom) a:hover,#middle-column-page .nbd-btn:hover{border-color:rgba(91,71,245,.45);color:var(--nh-pri)} #middle-column-page :is(.nbd-ky,.nbc-nhom) a.dang{background:var(--nh-grad);border-color:transparent;color:#fff;box-shadow:var(--nh-glow)} /* moi nhom nut LHC (.btn-group): tach roi tung nut, cach 6px, cung chieu cao -> khong con khoi nut dinh nhau lech mau */ #middle-column-page .btn-group.float-end:has(>.btn-xs){display:flex;flex-wrap:wrap;gap:6px} #middle-column-page .btn-group.float-end:has(>.btn-xs)>.btn{border-radius:9px!important;margin:0!important} /* nut btn-info cua LHC (xanh ngoc dac, "Nhan ban"...) = mau nhan thu hai -> nen xanh duong nhat + chu dam nhu badge */ .btn-info{--bs-btn-color:var(--nh-blu);--bs-btn-bg:var(--nh-blubg);--bs-btn-border-color:transparent;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--nh-blu); --bs-btn-hover-border-color:transparent;--bs-btn-active-color:#fff;--bs-btn-active-bg:var(--nh-blu);--bs-btn-active-border-color:transparent} .btn-outline-info{--bs-btn-color:var(--nh-blu);--bs-btn-border-color:rgba(37,99,235,.35);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--nh-blu);--bs-btn-hover-border-color:var(--nh-blu)} /* nhom nut tim cua trang danh sach (Tim | CSV | Thao tac nhanh | Dat lai): tach roi, "Tim" la nut chinh tim */ #middle-column-page .btn-group:has(>[name=doSearch]){display:inline-flex;flex-wrap:wrap;gap:6px} #middle-column-page .btn-group:has(>[name=doSearch])>.btn{border-radius:9px!important;margin:0!important;white-space:nowrap;display:inline-flex;align-items:center;gap:4px} #middle-column-page .btn-group>[name=doSearch]{--bs-btn-color:#fff;--bs-btn-bg:var(--nh-pri);--bs-btn-border-color:transparent;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#4e3ae8; --bs-btn-hover-border-color:transparent;background-image:var(--nh-grad);box-shadow:0 6px 14px -8px rgba(55,40,190,.7),inset 0 1px 0 rgba(255,255,255,.28)} #middle-column-page .btn-group:has(>[name=doSearch]) .material-icons{font-size:17px;margin:0} /* nut Xoa nho trong tung dong bang: nen do nhat + chu do (truoc do dac lap lai moi dong = nhieu), re chuot moi do dac */ #middle-column-page .table .btn-danger:is(.btn-xs,.btn-sm){--bs-btn-color:var(--nh-red);--bs-btn-bg:var(--nh-redbg);--bs-btn-border-color:transparent;--bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--nh-red);--bs-btn-hover-border-color:transparent;box-shadow:none} /* (content X/"" = chu thay the rong cho trinh doc man hinh; khai bao content X truoc = du phong cho trinh duyet cu khong hieu "/") */ /* ---------- 19f. Cai dat (system/configuration): danh sach gach dau dong 2 cot dai -> LUOI THE theo nhom. Moi nhom LHC =
+