/* ============================================= Nail Growth Dashboard — giao diện Cùng bảng màu với trang kiểm tra (nail-health-score) ============================================= */ :root{ --teal:#2EB8A0; --teal-dk:#1E8F7C; --teal-bg:#E4F6F2; --blue:#3A9BD5; --amber:#F39C12; --coral:#E07B5A; --ink:#14313A; --ink-2:#3F5C66; --ink-3:#7D949C; --line:#E4ECEE; --paper:#F4F8F8; --white:#fff; --side:#14313A; --r-sm:10px; --r-md:14px; --r-lg:20px; --sh-sm:0 2px 10px rgba(20,49,58,.06); --sh-md:0 10px 30px rgba(20,49,58,.1); --sh-lg:0 24px 60px rgba(20,49,58,.2); --ff-head:'Playfair Display',Georgia,serif; --ff-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0} body{font-family:var(--ff-body);color:var(--ink);background:var(--paper);font-size:14px;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0} p{margin:0} a{color:var(--teal-dk)} button{font-family:inherit} .muted{color:var(--ink-3)} .small{font-size:12px} .overdue{color:var(--coral);font-weight:600} /* Sắp tới hạn (còn ≤ 3 ngày) — vàng, nhẹ hơn đã trễ */ .soon{color:#9A6412;font-weight:600} /* ══ 🔔 NHẤP NHÁY NHẮC VIỆC CẦN CHÚ Ý ══ Chỉ chạy khi — Admin hệ thống bật/tắt trong 🎛️ Bật/tắt tính năng. Nháy nhẹ bằng quầng sáng + đậm nhạt, KHÔNG chớp tắt gắt để nhìn lâu không mỏi mắt. */ @keyframes nhayVien{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 45%,transparent)} 50% {box-shadow:0 0 0 6px color-mix(in srgb,var(--coral) 0%,transparent)} } @keyframes nhayChu{ 0%,100%{opacity:1} 50%{opacity:.45} } @keyframes nhayCham{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.5} } /* ── HAI MỨC ───────────────────────────────────────── 🔴 GẤP (đỏ, nháy NHANH 1,1s): đã quá hạn · kênh đang mất khách · băng cảnh báo 🟡 SẮP TỚI (vàng, nháy CHẬM 2,8s): còn ≤ 3 ngày · việc chưa giao · bài chờ duyệt Nháy nhanh để mắt bắt ngay cái gấp; nháy chậm để cái chưa gấp không giành sự chú ý. */ @keyframes nhayVienVang{ 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 50%,transparent)} 50% {box-shadow:0 0 0 5px color-mix(in srgb,var(--amber) 0%,transparent)} } /* — mức GẤP — */ body.nhay .alert-warn{animation:nhayVien 1.1s ease-in-out infinite} body.nhay .ch-row.bad{animation:nhayVien 1.1s ease-in-out infinite} body.nhay .ch-pill.bad, body.nhay .overdue, body.nhay .si-meta .overdue{animation:nhayChu 1.1s ease-in-out infinite} /* — mức SẮP TỚI — */ body.nhay .soon, body.nhay .si-meta .soon{animation:nhayChu 2.8s ease-in-out infinite} body.nhay .free-n{animation:nhayChu 2.8s ease-in-out infinite} body.nhay .kcard.han-soon{animation:nhayVienVang 2.8s ease-in-out infinite} /* Bài marketing đang CHỜ DUYỆT — chưa gấp, để mức chậm */ body.nhay .mk-badge.mk-st-review{animation:nhayChu 2.8s ease-in-out infinite} /* Dấu chấm cảnh báo dùng chung (thêm class nhay-cham vào chỗ nào cần) */ body.nhay .nhay-cham{animation:nhayCham 1.6s ease-in-out infinite} /* Người bật "giảm chuyển động" trong hệ điều hành: KHÔNG nháy, chỉ tô đậm cho dễ thấy */ @media (prefers-reduced-motion: reduce){ body.nhay .alert-warn,body.nhay .ch-row.bad,body.nhay .ch-pill.bad,body.nhay .mk-badge.mk-st-review, body.nhay .free-n,body.nhay .overdue,body.nhay .soon,body.nhay .si-meta .overdue, body.nhay .kcard.han-soon,body.nhay .nhay-cham{animation:none} body.nhay .alert-warn{box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 35%,transparent)} body.nhay .kcard.han-soon{box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 35%,transparent)} } /* In giấy thì không nháy */ @media print{ body.nhay *{animation:none !important} } .up{color:var(--teal-dk);font-size:12px;font-weight:700} .down{color:var(--coral);font-size:12px;font-weight:700} body.no-scroll{overflow:hidden} /* ══ KHUNG ══ */ .topbar{display:none} :root{--side-w:268px} .layout{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh} /* Thanh kéo đổi độ rộng thanh bên */ .side-resize{position:fixed;top:0;left:calc(var(--side-w) - 3px);width:7px;height:100vh;cursor:col-resize;z-index:26; background:transparent;border:0;padding:0} body.side-collapsed .side-resize{display:none} .side-resize::after{content:'';position:absolute;inset:0 3px;border-radius:3px;background:transparent;transition:.15s} .side-resize:hover::after,body.side-resizing .side-resize::after{background:var(--teal)} body.side-resizing{cursor:col-resize;user-select:none} @media (max-width:900px){.side-resize{display:none}} .sidebar{ position:sticky;top:0;height:100vh;overflow-y:auto; background:var(--side);color:#fff;padding:20px 14px;display:flex;flex-direction:column; } .brand{display:flex;align-items:center;gap:11px;padding:4px 6px 20px} .brand-logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:linear-gradient(135deg,var(--teal),var(--blue))} .brand-name{font-family:var(--ff-head);font-size:16px;font-weight:700;line-height:1.2} .brand-sub{font-size:11.5px;opacity:.6;margin-top:2px} .side-label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;opacity:.5;padding:0 8px 8px} .tiem-list{display:flex;flex-direction:column;gap:4px;flex:1} .side-empty{font-size:12.5px;opacity:.55;padding:6px 8px} .tiem-item{ display:flex;align-items:center;gap:10px;width:100%;padding:10px 9px;border:0;border-radius:11px; background:transparent;color:#fff;text-align:left;cursor:pointer;transition:background .15s; } .tiem-item:hover{background:rgba(255,255,255,.06)} .tiem-item.on{background:rgba(255,255,255,.12)} .si-score{flex:0 0 36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:#fff} .si-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .si-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .si-meta{font-size:11.5px;opacity:.6} .si-meta .overdue{color:#FFB39A} .si-meta .soon{color:#F5CE7A} .si-bar{height:3px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden} .si-bar i{display:block;height:100%;background:var(--teal)} .side-actions{display:flex;flex-direction:column;gap:4px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)} .side-acts-list{display:flex;flex-direction:column;gap:4px} body.acts-closed .side-acts-list{display:none} .side-acts-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; padding:7px 10px;margin-bottom:2px;border:0;border-radius:9px;background:rgba(255,255,255,.06); color:rgba(255,255,255,.72);font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;cursor:pointer;transition:.15s} .side-acts-toggle:hover{background:rgba(255,255,255,.12);color:#fff} .side-acts-toggle i{font-style:normal;font-size:12px} .side-btn{padding:9px 10px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.8);text-align:left;font-size:13px;cursor:pointer} .side-btn:hover{background:rgba(255,255,255,.07);color:#fff} .side-note{font-size:11px;line-height:1.5;opacity:.45;padding:10px 8px 0} .side-backdrop{display:none} .main{min-width:0;padding:26px 32px 60px} .page{max-width:1180px;margin:0 auto} /* ══ ĐẦU TRANG TIỆM ══ */ .tiem-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:18px} .tiem-head h1{font-family:var(--ff-head);font-size:28px;line-height:1.2} .tiem-head p{margin-top:5px} /* Địa chỉ & số điện thoại: màn rộng nằm chung một dòng, màn hẹp tách hẳn hai dòng (số điện thoại bị ngắt giữa chừng kiểu "(281) 888-" / "9646" rất khó đọc trên điện thoại) */ .tiem-addr,.tiem-phone{display:inline} .tiem-phone{white-space:nowrap} .tiem-phone::before{content:' · ';color:var(--ink-3)} .tiem-phone a{color:inherit;text-decoration:none} .tiem-phone a:hover{color:var(--teal-dk);text-decoration:underline} .links{display:flex;gap:14px;font-size:13px} .links a{text-decoration:none;font-weight:600} .tiem-actions{display:flex;gap:8px} .tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:20px;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tabs-fold{margin-left:auto;align-self:center;flex:0 0 auto;border:1.5px solid var(--line);border-radius:9px; background:#fff;color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer; margin-bottom:6px;transition:.15s;white-space:nowrap} .tabs-fold:hover{border-color:var(--teal);color:var(--teal-dk)} .tab{ flex:0 0 auto;padding:10px 14px;border:0;border-bottom:2.5px solid transparent;background:transparent; font-size:13.5px;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap; } .tab:hover{color:var(--ink)} .tab.on{color:var(--teal-dk);border-bottom-color:var(--teal)} .dot-alert{display:inline-block;min-width:18px;padding:0 5px;margin-left:3px;border-radius:9px;background:var(--coral);color:#fff;font-size:11px;font-style:normal;line-height:18px;text-align:center} /* ══ NÚT & Ô NHẬP ══ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px; border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;color:var(--ink); font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;transition:border-color .15s,transform .15s,background .15s; } .btn:hover{border-color:var(--teal);color:var(--teal-dk)} .btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--teal-dk),var(--teal));color:#fff} .btn.primary:hover{transform:translateY(-1px);color:#fff} .btn.danger{border-color:transparent;background:var(--coral);color:#fff} .btn.ghost{background:#fff} .btn.sm{padding:6px 11px;font-size:12px} .btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .btn-row.center{justify-content:center} [hidden]{display:none !important} .field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)} .field input,.field select,.dr-body textarea,.field-inline input{ width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm); font:inherit;font-size:13.5px;font-weight:400;color:var(--ink);background:#fff;outline:none; } .field input:focus,.field select:focus,.dr-body textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,184,160,.14)} .field-inline{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600} .field-inline input{width:auto} .switch{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer} .switch input{accent-color:var(--teal);width:16px;height:16px} .toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px} .hint{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin-bottom:14px} .note{margin-top:12px;padding:10px 12px;border-radius:10px;background:#FDF2E0;color:#8A5A12;font-size:12.5px;line-height:1.55} .link{font-size:12.5px;font-weight:600;text-decoration:none} .pill{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--paper);font-size:11.5px;font-weight:600;color:var(--ink-2)} .pill-ok{background:var(--teal-bg);color:var(--teal-dk)} /* ══ THẺ ══ */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:18px 20px;margin-bottom:16px} .seg-assign{display:inline-flex;gap:2px;background:var(--paper);border-radius:10px;padding:3px} .seg-assign button{border:0;background:transparent;border-radius:8px;padding:5px 11px;font:inherit;font-size:12.5px; font-weight:600;color:var(--ink-3);cursor:pointer;transition:.15s;white-space:nowrap} .seg-assign button b{font-weight:800} .seg-assign button:hover{color:var(--ink)} .seg-assign button.on{background:#fff;color:var(--teal-dk);box-shadow:0 1px 3px rgba(20,49,58,.12)} .free-n{color:#B25B1B;font-weight:700} .td-detail{font-size:13.5px} .td-head h4{margin:0 0 6px;font-size:17px} .td-cost{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px} .td-sec{margin-bottom:16px} .td-sec h5{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12.5px;letter-spacing:.03em; text-transform:uppercase;color:var(--teal-dk)} .td-sec ol{margin:0;padding-left:22px;line-height:1.7} .td-sec li{margin-bottom:5px} .td-note{margin-right:auto} .gd-detail{font-size:13.5px} .gd-head h4{margin:0 0 6px;font-size:17px} .gd-intro{margin:0 0 10px;color:var(--ink-2);line-height:1.6} .gd-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;padding:10px 12px; background:var(--teal-bg);border-radius:12px;font-size:12.5px} .gd-steps{margin:0;padding-left:22px;line-height:1.75} .gd-steps li{margin-bottom:8px} .gd-steps b{color:var(--ink)} .gd-tips{margin-top:12px;border-left:3px solid #E4A11B;background:#FFF9EC;border-radius:0 10px 10px 0;padding:8px 12px} .gd-tips p{margin:0 0 4px;font-size:12.5px;line-height:1.6;color:#7A5308} .gd-tips p:last-child{margin:0} .gd-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px; border-top:1px solid var(--line);padding-top:12px} .gd-skip{margin-right:auto;font-size:12.5px;color:var(--ink-2)} .bk-tbl td{vertical-align:middle} .bk-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .bk-acts select{padding:6px 9px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:12.5px;background:#fff} .cf-list{margin:8px 0 0;padding-left:20px;font-size:13px;line-height:1.7;color:var(--ink-2)} .cf-list li{margin-bottom:3px} .ft-group{margin-bottom:14px} .ft-group h4{margin:0 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .ft-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:8px} .ft-item{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:600} .ft-item:has(input:checked){border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dk)} .hours-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;align-items:end;margin-bottom:12px} .hours-form .btn{height:38px} .hours-form select,.hours-form input{padding:8px 10px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:13px;background:#fff} .hours-sum{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .hours-tbl td,.hours-tbl th{font-size:12.5px} .dft-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:10px} .dft-item{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--line);border-radius:12px;padding:9px 12px} .dft-who{font-size:12px;font-weight:700;color:var(--ink-2)} .dft-item select{padding:7px 10px;border:1.5px solid var(--line);border-radius:9px;font:inherit;font-size:13px;background:#fff} .dft-item b{font-size:13.5px} .assign-all{padding:5px 9px;border:1.5px solid var(--teal);border-radius:9px;background:var(--teal-bg); font:inherit;font-size:12px;font-weight:600;color:var(--teal-dk);cursor:pointer} /* Mỗi gói dịch vụ = một nhóm có nền riêng, dễ phân biệt khi cuộn */ .svc-block{--g:#7D949C;--gbg:#F3F6F7;margin-bottom:20px;padding:14px 14px 4px;border-radius:18px; background:var(--gbg);border:1.5px solid color-mix(in srgb,var(--g) 30%,transparent)} .svc-block[data-svc="reviews"]{--g:#E4A11B;--gbg:#FFF8EA} .svc-block[data-svc="gbp"] {--g:#2A6F9C;--gbg:#EDF5FB} .svc-block[data-svc="social"] {--g:#C2557E;--gbg:#FDF0F5} .svc-block[data-svc="web"] {--g:#2EB8A0;--gbg:#EAF8F5} .svc-block[data-svc="seo"] {--g:#4C9A4C;--gbg:#EFF8EF} .svc-block[data-svc="ads"] {--g:#D06A35;--gbg:#FFF2EA} .svc-block-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:16px; color:var(--g);padding-bottom:9px;border-bottom:2px solid color-mix(in srgb,var(--g) 35%,transparent)} .svc-block .card{background:#fff;border:1px solid color-mix(in srgb,var(--g) 18%,transparent);margin-bottom:12px} .svc-block .tool-svc.on{background:color-mix(in srgb,var(--g) 16%,#fff);color:var(--g)} .mytask-group{border-top:1px solid var(--line);padding-top:12px;margin-top:12px} .mytask-group:first-of-type{border-top:0;padding-top:0;margin-top:0} .mytask-group h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px} .mytask-guide{border:1.5px solid var(--line);border-radius:12px;background:var(--paper);margin-bottom:10px} .mytask-guide>summary{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:700;list-style:none} .mytask-guide>summary::-webkit-details-marker{display:none} .mytask-guide>summary::before{content:'▸ ';color:var(--ink-3)} .mytask-guide[open]>summary::before{content:'▾ '} .mytask-guide ol{margin:0;padding:0 14px 6px 32px;font-size:13px;line-height:1.65} .mytask-guide li{margin-bottom:4px} .mytask-links{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 8px} .mytask-links a{font-size:12px;font-weight:600;color:var(--teal-dk);background:#fff;border:1.5px solid var(--line); border-radius:999px;padding:3px 10px;text-decoration:none} .mytask-links a:hover{border-color:var(--teal)} .mytask-guide .note{margin:0;padding:0 12px 10px;font-size:12px;color:var(--ink-2)} .mytask-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px} .mytask-list li{border:1.5px solid var(--line);border-radius:10px;padding:8px 11px} .mytask-list li.is-late{border-color:#E6B7A8;background:#FFF7F4} .mytask-list label{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;cursor:pointer} .mytask-list input{margin-top:3px;accent-color:var(--teal);width:16px;height:16px} .mytask-meta{display:block;margin-top:3px;padding-left:25px;font-size:11.5px;color:var(--ink-3)} .mytask-note{max-width:640px} .mytask-done{margin:2px 0 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper)} .mytask-done>summary{cursor:pointer;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);list-style:none} .mytask-done>summary::-webkit-details-marker{display:none} .mytask-done>summary::before{content:'\25B8 ';color:var(--ink-3)} .mytask-done[open]>summary::before{content:'\25BE '} .mytask-done .mytask-list{padding:0 10px 10px;margin:0} .mytask-done .mytask-list li{background:#fff} .mytask-list li.is-done>label>span{text-decoration:line-through;color:var(--ink-3)} .tool-svc{font-size:11.5px;font-weight:600;color:var(--ink-3);background:var(--paper);border-radius:999px;padding:3px 10px} .tool-svc.on{background:var(--teal-bg);color:var(--teal-dk)} .card-ctrls{display:inline-flex;align-items:center;gap:3px;margin-left:auto;flex:0 0 auto;flex-wrap:nowrap} .card-move{display:inline-flex;align-items:center;gap:2px} .card-head>h3{min-width:0} .card-head .assign-all{flex:0 1 auto;max-width:170px;min-width:96px} .card-move button{width:24px;height:26px;border:1.5px solid var(--line);border-radius:7px;background:#fff; color:var(--ink-3);font-size:12px;line-height:1;cursor:pointer;padding:0;transition:.15s} .card-move button:hover{border-color:var(--teal);color:var(--teal-dk)} .card-grip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;margin-left:2px; color:var(--ink-3);font-size:14px;cursor:grab;user-select:none} .card-grip:active{cursor:grabbing} .card-dragging{opacity:.45} .card-moved{animation:cardMoved .5s ease} @keyframes cardMoved{from{box-shadow:0 0 0 3px var(--teal-bg)}to{box-shadow:none}} .card-fold{margin-left:2px;flex:none;width:28px;height:28px;border:1.5px solid var(--line);border-radius:8px; background:#fff;color:var(--ink-2);font-size:13px;line-height:1;cursor:pointer;transition:.15s} .card-fold:hover{border-color:var(--teal);color:var(--teal-dk)} .card.folded>:not(.card-head){display:none !important} .card.folded{padding-top:12px;padding-bottom:12px} .card.folded .card-head{margin-bottom:0;min-height:28px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;row-gap:8px;margin-bottom:14px} .card-head>*{min-width:0} /* Tiêu đề + ô "Giao tất cả cho…" + pill đếm việc + cụm nút: khi thẻ hẹp (lưới 2 cột, thẻ đang gập) mà nhét hết vào một dòng thì cụm nút tràn ra ngoài thẻ. Cho phép xuống dòng — chỉ xuống khi thật sự không đủ chỗ, còn lại vẫn một dòng như cũ. */ .card-head>h3{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;user-select:none} .card-head .pill{flex:0 1 auto;min-width:0;white-space:nowrap} .card-head h3{font-size:15px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-2 .card{margin-bottom:0} .grid-2 + .card{margin-top:16px} .empty-sm{padding:18px;border-radius:10px;background:var(--paper);text-align:center;font-size:13px;color:var(--ink-2);line-height:1.6} .alert{padding:12px 14px;border-radius:12px;margin-bottom:16px;font-size:13px;line-height:1.6} .alert a{font-weight:600} .alert-warn{background:#FDEDE8;color:#9C4A33} .alert-ok{background:var(--teal-bg);color:var(--teal-dk)} /* ── KPI ── */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px} .kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:16px 18px} .kpi-lbl{font-size:11.5px;font-weight:600;color:var(--ink-3)} .kpi-val{font-family:var(--ff-head);font-size:32px;font-weight:700;line-height:1.15;margin:4px 0 2px} .kpi-val small{font-family:var(--ff-body);font-size:13px;font-weight:500;color:var(--ink-3)} .kpi-sub{font-size:11.5px;color:var(--ink-3);line-height:1.45} .kpi-ring{display:flex;align-items:center;gap:14px} .ring{flex:0 0 auto} /* ── Điểm theo nền tảng ── */ .parts{display:flex;flex-direction:column;gap:12px} .part-top{display:flex;align-items:baseline;gap:8px;font-size:13px;margin-bottom:5px} .part-top span:first-child{font-weight:600} .part-top b{margin-left:auto;font-size:15px} .bar{height:7px;border-radius:9px;background:var(--line);overflow:hidden} .bar div{height:100%;border-radius:9px} .metrics{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px} .metrics dt{color:var(--ink-3)} .metrics dd{margin:0;font-weight:600} /* ── Danh sách việc ── */ .todo{list-style:none;margin:0;padding:0} .todo li{padding:10px 0;border-bottom:1px dashed var(--line)} .todo li:last-child{border-bottom:0} .todo label{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .todo input{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;accent-color:var(--teal);cursor:pointer} .todo-t{font-size:13.5px;line-height:1.55} .todo li.is-done .todo-t{color:var(--ink-3);text-decoration:line-through} .todo-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:5px 0 0 28px;font-size:11.5px} .todo-meta a{text-decoration:none;color:var(--ink-2);font-weight:600} .who{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600} .who-owner{background:#E6F2FB;color:#2A6F9C} .who-staff{background:#F2ECFB;color:#6A4A9C} .who-tech{background:#FDF2E0;color:#8A5A12} /* ── Tình trạng ── */ .status-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px} .status-box{padding:12px;border-radius:12px;background:var(--paper);display:flex;flex-direction:column;gap:2px} .status-box b{font-family:var(--ff-head);font-size:24px} .status-box span{font-size:12px;color:var(--ink-2)} .st-doing b{color:var(--blue)} .st-done b{color:var(--teal-dk)} .st-resolved b{color:var(--teal)} .issue-chips{display:flex;flex-wrap:wrap;gap:7px} .issue-chip{ padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff; font-size:12.5px;cursor:pointer;color:var(--ink);transition:border-color .15s; } .issue-chip:hover{border-color:var(--teal)} .issue-chip em{font-style:normal;font-weight:700;color:var(--teal-dk);margin-left:3px} .issue-chip.st-doing{border-color:#B9DCF2;background:#F3F9FD} .issue-chip.st-done{background:var(--teal-bg);border-color:transparent} .issue-chip.st-resolved{background:var(--teal-bg);border-color:transparent;color:var(--ink-3);text-decoration:line-through} /* ══ BẢNG VIỆC ══ */ .board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px} /* cố ý: 4 cột, hẹp thì cuộn ngang */ .col{background:#EAF1F2;border-radius:var(--r-md);padding:10px;min-height:220px;transition:background .15s,box-shadow .15s} .col.over{background:#D9EFEA;box-shadow:inset 0 0 0 2px var(--teal)} .col header{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;font-size:13px;font-weight:700;color:var(--ink-2)} .col header b{padding:1px 8px;border-radius:999px;background:#fff;font-size:12px} .col-body{display:flex;flex-direction:column;gap:9px} .col-empty{padding:18px;text-align:center;font-size:12px;color:var(--ink-3);border:1.5px dashed #CFDDE0;border-radius:10px} .kcard{ background:#fff;border-radius:12px;padding:12px;box-shadow:var(--sh-sm);cursor:pointer; border-left:4px solid var(--line);transition:transform .12s,box-shadow .12s; } .kcard:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .kcard.dragging{opacity:.45} .kcard.prio-high{border-left-color:var(--coral)} .kcard.prio-med{border-left-color:var(--amber)} .kcard.prio-low{border-left-color:var(--teal)} .col-resolved .kcard{opacity:.75} .kcard-top{display:flex;gap:8px;align-items:flex-start} .kcard-icon{font-size:16px;line-height:1.3} .kcard-title{font-size:13.5px;font-weight:600;line-height:1.35} .kcard-tags{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0} .tag{padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:600;background:var(--paper);color:var(--ink-2)} .tag-high{background:#FDEDE8;color:#C0553A} .tag-med{background:#FDF2E0;color:#8A5A12} .tag-low{background:var(--teal-bg);color:var(--teal-dk)} .tag-gain{background:var(--teal);color:#fff} .kwarn{margin:-2px 0 8px;padding:5px 8px;border-radius:7px;background:#FDEDE8;color:#9C4A33;font-size:11px;font-weight:600} .kbar{height:4px;border-radius:9px;background:var(--line);overflow:hidden} .kbar div{height:100%;background:var(--teal)} .kcard-foot{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--ink-3)} .kcard-move{display:none;width:100%;margin-top:9px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12px;background:#fff} /* ══ PHÂN CÔNG ══ */ .people{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .people .card{margin-bottom:0} /* ══ LỘ TRÌNH ══ */ .timeline{padding:4px 0} .tl-scale{display:grid;grid-template-columns:repeat(12,1fr);font-size:11px;color:var(--ink-3);text-align:center;margin-bottom:6px} .tl-scale .now{color:var(--teal-dk);font-weight:700} .tl-track{position:relative;height:40px;border-radius:10px;background:var(--paper)} .tl-phase{position:absolute;top:6px;bottom:6px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:12px;font-weight:600;color:#fff;overflow:hidden;white-space:nowrap} .tl-phase:nth-child(1){background:var(--coral)} .tl-phase:nth-child(2){background:var(--amber)} .tl-phase:nth-child(3){background:var(--teal)} .tl-phase + .tl-phase{border-left:3px solid var(--paper)} .tl-now{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink)} .tl-now span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:700;white-space:nowrap} .phase-current{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),var(--sh-sm)} .phase-past{opacity:.85} .tbl-wrap{overflow-x:auto} .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{text-align:left;font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px;padding:8px 10px;border-bottom:1px solid var(--line)} .tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top} .tbl tr:last-child td{border-bottom:0} .tbl a{text-decoration:none;font-weight:600;color:var(--ink)} .st-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;background:var(--paper)} .st-pill.st-doing{background:#E6F2FB;color:#2A6F9C} .st-pill.st-done,.st-pill.st-resolved{background:var(--teal-bg);color:var(--teal-dk)} /* ══ LỊCH SỬ ══ */ .chart-wrap{margin-bottom:14px} .chart{width:100%;height:auto;display:block} .chart .grid{stroke:var(--line);stroke-width:1} .chart .axis{fill:var(--ink-3);font-size:11px} .chart .ln-score{fill:none;stroke:var(--teal);stroke-width:3;stroke-linejoin:round} .chart .ln-target{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:5 5} .chart .pt{fill:#fff;stroke:var(--teal);stroke-width:2.5} .chart .pt-lbl{fill:var(--ink);font-size:12px;font-weight:700} .legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-top:6px} .legend i{display:inline-block;width:18px;height:3px;margin-right:6px;vertical-align:middle;border-radius:3px} .lg-score{background:var(--teal)} .lg-target{background:repeating-linear-gradient(90deg,var(--blue) 0 5px,transparent 5px 9px)} .log{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto} .log li{display:flex;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px} .log time{flex:0 0 auto;color:var(--ink-3);font-size:12px;min-width:118px} .danger-zone{border-color:#F6D9D0} .danger-zone p{margin-bottom:12px;font-size:13px} /* ══ CÔNG CỤ ══ */ .tool-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding:9px 13px; background:var(--paper);border-radius:12px} .tool-filter .switch{font-size:13px;font-weight:600;white-space:nowrap} .mytask-free{color:#9C4A33;font-weight:700} .tool-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .tool-nav a{padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);text-decoration:none} .tool-nav a:hover{border-color:var(--teal);color:var(--teal-dk)} .tool{scroll-margin-top:16px} .tool-grid{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start} .tool-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin-bottom:14px} .qr-card{ padding:18px 16px;border-radius:var(--r-md);text-align:center;color:#fff; background:linear-gradient(150deg,#17766B,#2EB8A0 60%,#3A9BD5); } .qr-title{font-family:var(--ff-head);font-size:19px;font-weight:700} .qr-box{display:flex;align-items:center;justify-content:center;width:220px;height:220px;margin:12px auto;padding:10px;border-radius:14px;background:#fff} .qr-box img,.qr-box canvas{max-width:100%} .qr-sub{font-size:13px;opacity:.95} .qr-name{margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;opacity:.85} .tpl-list{display:flex;flex-direction:column;gap:10px} .tpl{border:1px solid var(--line);border-radius:12px;overflow:hidden} .tpl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:var(--paper);font-size:13px} .tpl pre{margin:0;padding:12px 14px;font:inherit;font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word} .tpl.is-used{border-color:#9ED9CD} .tpl.is-used .tpl-head{background:#E4F6F2} .tpl-used{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0} .tpl-used input{width:17px;height:17px;accent-color:var(--teal);flex:none;cursor:pointer} .tpl-tag{font-size:11px;font-weight:600;color:var(--teal);background:#fff;border:1px solid #9ED9CD;border-radius:999px;padding:1px 7px} .tpl-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end} .tpl-date{font-size:12px;font-weight:600;color:var(--teal);white-space:nowrap} .tpl-add-row{display:flex;gap:8px;flex-wrap:wrap} .tpl-editor{border:1.5px dashed var(--teal);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;background:#F7FCFB} .tpl-editor-title{font-weight:700;font-size:13.5px} .field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:13.5px;font-weight:400;resize:vertical;outline:none} .field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,184,160,.14)} @media (max-width:640px){.tpl-head{flex-wrap:wrap}} .tbl.cal td{font-size:12.5px;line-height:1.5} /* ══ CHÀO MỪNG ══ */ .welcome{max-width:620px;margin:60px auto;text-align:center} .welcome-ic{font-size:44px} .welcome h1{font-family:var(--ff-head);font-size:30px;margin:12px 0} .welcome > p{font-size:14.5px;line-height:1.7;color:var(--ink-2)} .how{text-align:left;margin:22px auto;padding:18px 18px 18px 40px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);line-height:1.9;font-size:14px} .welcome .small{margin-top:18px} /* ══ NGĂN CHI TIẾT ══ */ .drawer-overlay{position:fixed;inset:0;z-index:50;background:rgba(20,49,58,.45);display:flex;justify-content:flex-end;animation:fade .15s} .drawer{width:min(560px,100%);height:100%;background:#fff;overflow-y:auto;box-shadow:var(--sh-lg);animation:slide .22s cubic-bezier(.2,.8,.3,1)} @keyframes fade{from{opacity:0}} @keyframes slide{from{transform:translateX(40px);opacity:.3}} .dr-head{position:sticky;top:0;z-index:1;display:flex;gap:12px;align-items:flex-start;padding:18px 20px 12px;background:#fff;border-bottom:1px solid var(--line)} .dr-icon{font-size:24px;line-height:1.2} .dr-title{flex:1;min-width:0} .dr-title h2{font-size:18px;line-height:1.35} .dr-title .kcard-tags{margin-bottom:0} .dr-close{width:34px;height:34px;border:0;border-radius:10px;background:var(--paper);font-size:22px;line-height:1;cursor:pointer;color:var(--ink-2)} .dr-body{padding:16px 20px 30px} .dr-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .dr-issue{padding:11px 13px;border-radius:10px;background:#FDF2E0;color:#8A5A12;font-size:13px;line-height:1.55} .dr-body h4{display:flex;align-items:center;gap:8px;margin:18px 0 6px;font-size:13px} .dr-body > p{font-size:13.5px;line-height:1.65;color:var(--ink-2)} .dr-body textarea{resize:vertical;min-height:90px} .svc{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px;border-radius:12px;background:linear-gradient(135deg,#E9F7F4,#EAF4FB);font-size:13px} .svc > div{flex:1} /* ══ GOOGLE SHEET ══ */ .sheet-btn{display:flex;flex-direction:column;gap:2px} .sheet-status{font-size:11px;opacity:.65} .sheet-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:#7D949C;vertical-align:1px} .sheet-status[data-state="ok"]::before{background:var(--teal)} .sheet-status[data-state="syncing"]::before,.sheet-status[data-state="waiting"]::before{background:var(--amber);animation:blink 1s infinite} .sheet-status[data-state="error"]{color:#FFB39A;opacity:1} .sheet-status[data-state="error"]::before{background:var(--coral)} @keyframes blink{50%{opacity:.3}} .modal-wide{width:min(620px,100%);max-height:calc(100vh - 40px);overflow-y:auto} .word-result:empty{display:none} .wk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--line)} .wk-row .rp-opt{flex:1 1 260px;margin:0} .wk-fmt{font-style:normal;font-size:11px;font-weight:700;color:var(--teal);background:#E4F6F2;border-radius:999px;padding:1px 8px;margin-left:4px} .wk-btns{display:flex;gap:6px} .ok-box,.warn-box{margin:0;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.6} .ok-box{background:#E4F6F2;color:#14313A}.ok-box a{color:#1E8F7C;font-weight:700} .warn-box{background:#FDEDE8;color:#9C4A33} .modal-actions .btn[disabled]{opacity:.5;cursor:not-allowed} .howto{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--paper)} .howto summary{cursor:pointer;font-weight:700} .howto ol{margin:10px 0 6px;padding-left:20px;line-height:1.75} .howto code{background:#fff;padding:1px 5px;border-radius:5px;font-size:12px} .input-row{display:flex;gap:8px} .input-row input{flex:1;font-family:ui-monospace,Consolas,monospace!important} .gs-result{font-size:13px;line-height:1.55;min-height:1px} .gs-result.ok{color:var(--teal-dk)} .gs-result.err{color:#9C4A33;background:#FDEDE8;padding:9px 11px;border-radius:9px} .modal-actions.spread{justify-content:space-between;align-items:center;flex-wrap:wrap} .confirm-type{margin-top:12px} .confirm-type input{border:1.5px solid #E2A08C;border-radius:9px} .confirm-type input:focus{border-color:#C0553A;outline:none} .confirm-type input.is-ok{border-color:var(--teal);background:var(--teal-bg)} .del-list{margin:8px 0 0;padding-left:20px;line-height:1.7;color:var(--ink-2)} .danger-text{color:#C0553A} .step-note{font-size:11.5px;color:var(--ink-2);background:#FFF8E6;padding:2px 8px;border-radius:6px} /* ══ HỘP THOẠI & THÔNG BÁO ══ */ .modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(20,49,58,.5);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .15s} .modal{width:min(440px,100%);max-width:100%;min-width:0;background:#fff;border-radius:var(--r-lg);padding:22px; box-shadow:var(--sh-lg);overflow-wrap:anywhere} .modal h3{font-family:var(--ff-head);font-size:20px;margin-bottom:12px} .modal-body{display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.6} .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px} #toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .toast{padding:10px 16px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;box-shadow:var(--sh-md);transition:opacity .3s,transform .3s;max-width:90vw} .toast-warn{background:#9C4A33} .toast.out{opacity:0;transform:translateY(6px)} /* ══ ĐIỆN THOẠI & MÁY TÍNH BẢNG ══ */ @media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .people{grid-template-columns:1fr} } @media (max-width:900px){ .layout{grid-template-columns:1fr} .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;padding:10px 14px;background:var(--side);color:#fff} .hamburger{width:36px;height:36px;border:0;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;cursor:pointer} .topbar-name{font-family:var(--ff-head);font-weight:700} .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;width:280px;transform:translateX(-100%);transition:transform .22s} body.side-open .sidebar{transform:none} body.side-open .side-backdrop{display:block;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.4)} .main{padding:18px 14px 50px} .grid-2{grid-template-columns:1fr} .tool-grid{grid-template-columns:1fr} .board{grid-template-columns:1fr;overflow:visible} .col{min-height:0} .kcard-move{display:block} .tiem-head h1{font-size:22px} .tiem-addr,.tiem-phone{display:block;margin-top:2px} .tiem-phone::before{content:none} .tiem-phone a{color:var(--teal-dk);font-weight:600} /* Khung 💼 Gói dịch vụ: màn hẹp thì cho cụm nút xuống hẳn một dòng, kẻo tên gói bị bóp còn mỗi chữ một dòng và chữ "đang chạy" đè lên tên gói */ .pkg-item{flex-wrap:wrap;align-items:flex-start} .pkg-main{flex:1 1 100%} .pkg-acts{width:100%;justify-content:flex-end;flex-wrap:wrap} } @media (max-width:520px){ .kpis{grid-template-columns:1fr 1fr;gap:10px} .kpi{padding:12px} .kpi-val{font-size:26px} .kpi-ring{flex-direction:column;align-items:flex-start;gap:6px} .kpi-ring .ring{width:44px;height:44px} .status-row{grid-template-columns:1fr 1fr} .dr-fields{grid-template-columns:1fr} .tiem-actions{width:100%} .tiem-actions .btn{flex:1} .log li{flex-direction:column;gap:2px} } /* ══ BÁO CÁO PDF ══ (chỉ hiện khi in) */ #print-report{display:none} .rp-opt{align-items:flex-start;line-height:1.4} .rp-opt small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400} .rp-opt input{margin-top:2px} .modal hr{border:0;border-top:1px solid var(--line);margin:4px 0} .modal code{font-size:11.5px;background:#fff;padding:1px 5px;border-radius:5px;word-break:break-all} .rp{font-family:var(--ff-body);color:#14313A;font-size:9.5pt;line-height:1.45;-webkit-print-color-adjust:exact;print-color-adjust:exact} .rp-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;margin-bottom:12px;border-bottom:2.5px solid #1E8F7C} .rp-brand{font-size:8pt;letter-spacing:1px;text-transform:uppercase;color:#1E8F7C;font-weight:700} .rp-head h1{font-family:var(--ff-head);font-size:19pt;margin:2px 0 0} .rp-head h2{font-size:13pt;margin:4px 0 2px} .rp-head p{font-size:8.5pt;color:#3F5C66} .rp-meta{text-align:right;font-size:8.5pt;color:#3F5C66;line-height:1.7;white-space:nowrap} .rp-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px} .rp-kpi{border:1px solid #D5E2E5;border-radius:6px;padding:6px 8px;background:#F4F8F8} .rp-kpi span{display:block;font-size:7.5pt;color:#7D949C;font-weight:600} .rp-kpi b{font-family:var(--ff-head);font-size:16pt;line-height:1.2} .rp-kpi b small{font-family:var(--ff-body);font-size:8pt;color:#7D949C} .rp-kpi em{display:block;font-style:normal;font-size:7.5pt;color:#3F5C66} .rp-row{display:flex;gap:10px;margin-bottom:8px} .rp-half{flex:1} .rp-tbl{width:100%;border-collapse:collapse;font-size:8.8pt} .rp-tbl th{text-align:left;background:#14313A;color:#fff;font-weight:600;padding:4px 6px;font-size:8pt} .rp-tbl td{padding:4px 6px;border-bottom:1px solid #E4ECEE;vertical-align:top} .rp-tbl .c{text-align:center;width:34px} .rp-tbl .nw{white-space:nowrap} .rp-tbl tr{break-inside:avoid} .rp-box{font-size:11pt;line-height:1} .rp-steps tr.is-done td{color:#9AAEB3} .rp-steps tr.is-done td:nth-child(3){text-decoration:line-through} .rp-status{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px} .rp-st{padding:2px 8px;border-radius:99px;background:#F4F8F8;font-size:8.5pt} .rp-section{font-family:var(--ff-head);font-size:13pt;margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid #D5E2E5} .rp-phase{background:#1E8F7C;color:#fff;font-weight:700;padding:5px 9px;border-radius:5px;margin:10px 0 8px;font-size:9.5pt;break-after:avoid} .rp-phase span{float:right;font-weight:400;opacity:.9} .rp-issue{border:1px solid #D5E2E5;border-left:4px solid #7D949C;border-radius:6px;padding:8px 10px;margin-bottom:8px;break-inside:avoid} .rp-prio-high{border-left-color:#E07B5A} .rp-prio-med{border-left-color:#F39C12} .rp-prio-low{border-left-color:#2EB8A0} .rp-issue-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:4px} .rp-issue-title{font-weight:700;font-size:10.5pt} .rp-issue-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end} .rp-tag{padding:1px 6px;border-radius:99px;background:#F4F8F8;font-size:7.5pt;font-weight:600;white-space:nowrap} .rp-tag-high{background:#FDEDE8;color:#C0553A} .rp-tag-med{background:#FDF2E0;color:#8A5A12} .rp-tag-low{background:#E4F6F2;color:#1E8F7C} .rp-tag-gain{background:#2EB8A0;color:#fff} .rp-st-doing{background:#E6F2FB;color:#2A6F9C} .rp-st-done,.rp-st-resolved{background:#E4F6F2;color:#1E8F7C} .rp-goal{margin:2px 0;font-size:8.8pt;color:#3F5C66} .rp-steps{margin:6px 0} .rp-kpi-line{font-size:8.3pt;color:#3F5C66;margin-top:4px} .rp-note{font-size:8.3pt;color:#8A5A12;margin-top:2px} .rp-note-issue{background:#FFF8E6;padding:4px 6px;border-radius:4px} .rp-muted{color:#7D949C} .rp-late{color:#C0553A;font-weight:700} .rp-up{color:#1E8F7C;font-weight:700} .rp-person{margin-bottom:12px} .rp-person-head{font-weight:700;font-size:10.5pt;margin-bottom:4px;break-after:avoid} .rp-person-head span{font-weight:400;color:#7D949C;font-size:8.5pt;margin-left:6px} .rp-log td{font-size:8.3pt} .rp-people .rp-tbl{table-layout:fixed} .rp-people .rp-tbl th:nth-child(1){width:34px} .rp-people .rp-tbl th:nth-child(3){width:28%} .rp-people .rp-tbl th:nth-child(4){width:48px} .rp-foot{margin-top:18px;padding-top:6px;border-top:1px solid #D5E2E5;font-size:7.5pt;color:#7D949C} .rp-opt-row{display:flex;gap:8px;flex-wrap:wrap} .rp-section{display:flex;align-items:center;gap:8px} .rp-section > span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#1E8F7C;color:#fff;font-family:var(--ff-body);font-size:9pt;font-weight:700} .rp-sub{font-weight:700;font-size:10.5pt;margin:12px 0 6px;break-after:avoid} .rp-sub span{font-weight:400;font-size:8.3pt;color:#7D949C;margin-left:6px} .rp-alert{background:#FDEDE8;color:#9C4A33;padding:5px 9px;border-radius:5px;font-size:8.8pt;margin-bottom:8px} .rp-ok{background:#E4F6F2;color:#1E8F7C;padding:4px 7px;border-radius:4px;font-size:8.5pt;margin:4px 0} .rp-warn{background:#FDEDE8;color:#9C4A33;padding:3px 7px;border-radius:4px;font-size:8pt;margin:4px 0;font-weight:600} .rp-kv{margin-top:6px} .rp-kv td:first-child{color:#7D949C;width:42%} .rp-issue-sub{font-size:8pt;color:#7D949C;margin-bottom:3px} .rp-svc{margin-top:5px;padding:5px 8px;border-radius:5px;background:#EAF4F2;font-size:8.3pt;color:#14313A} /* bảng việc */ .rp-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:start} .rp-col{background:#F0F5F6;border-radius:6px;padding:5px} .rp-col-head{font-weight:700;font-size:8.5pt;padding:2px 3px 5px;display:flex;justify-content:space-between} .rp-card{background:#fff;border:1px solid #D5E2E5;border-left:3px solid #7D949C;border-radius:4px;padding:4px 5px;margin-bottom:4px;break-inside:avoid} .rp-card-title{font-weight:600;font-size:8.2pt;line-height:1.3} .rp-card-meta{display:flex;gap:3px;flex-wrap:wrap;margin:3px 0} .rp-card-foot{font-size:7.3pt;color:#7D949C} .rp-empty{font-size:7.5pt;text-align:center;padding:6px} /* lộ trình */ .rp-tl{margin:4px 0 10px} .rp-tl-scale{display:grid;grid-template-columns:repeat(12,1fr);font-size:7.5pt;color:#7D949C;text-align:center;margin-bottom:3px} .rp-tl-scale .now{color:#1E8F7C;font-weight:700} .rp-tl-track{position:relative;height:26px;background:#F0F5F6;border-radius:5px} .rp-tl-phase{position:absolute;top:4px;bottom:4px;display:flex;align-items:center;justify-content:center;border-radius:4px;color:#fff;font-size:8pt;font-weight:700;white-space:nowrap;overflow:hidden} .rp-tl-1{background:#E07B5A}.rp-tl-2{background:#F39C12}.rp-tl-3{background:#2EB8A0} .rp-tl-phase + .rp-tl-phase{border-left:2px solid #F0F5F6} .rp-tl-now{position:absolute;top:-4px;bottom:-4px;width:2px;background:#14313A} .rp-tl-now span{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);font-size:7pt;font-weight:700;white-space:nowrap} .rp-phase-light{background:#E4F6F2;color:#1E8F7C} /* công cụ */ .rp-tool{margin-bottom:12px} .rp-tool .rp-sub{border-bottom:1px solid #E4ECEE;padding-bottom:3px} .rp-qr-row{display:flex;gap:14px;align-items:flex-start} .rp-qr-card{flex:0 0 170px;text-align:center;color:#fff;background:linear-gradient(150deg,#17766B,#2EB8A0 60%,#3A9BD5);border-radius:8px;padding:10px 8px;break-inside:avoid} .rp-qr-card img{display:block;width:130px;height:130px;margin:6px auto;background:#fff;padding:6px;border-radius:6px} .rp-qr-title{font-family:var(--ff-head);font-size:12pt;font-weight:700} .rp-qr-sub{font-size:8pt} .rp-qr-name{font-size:7.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:3px} .rp-qr-empty{margin:8px auto;width:130px;height:110px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:6px;font-size:8pt} .rp-qr-info{flex:1;font-size:8.8pt} .rp-qr-info p{margin:0 0 6px} .rp-link{font-family:ui-monospace,Consolas,monospace;font-size:8pt;word-break:break-all} .rp-caution{margin-top:5px;padding:4px 7px;border-radius:4px;background:#FDF2E0;color:#8A5A12;font-size:8pt} .rp-tpl{border:1px solid #D5E2E5;border-radius:5px;margin-bottom:5px;break-inside:avoid} .rp-tpl-head{background:#F4F8F8;padding:3px 7px;font-size:8.3pt;font-weight:700} .rp-tpl pre{margin:0;padding:5px 8px;font-family:var(--ff-body);font-size:8.5pt;line-height:1.45;white-space:pre-wrap;word-break:break-word} .rp-cal td{font-size:8.3pt} .rp-tpl-head{display:flex;justify-content:space-between;gap:8px} .rp-tpl-head em{font-weight:400;color:#7D949C} .rp-tpl-st{font-weight:400;color:#7D949C;white-space:nowrap} .rp-tpl-used .rp-tpl-head{background:#E4F6F2} .rp-tpl-used .rp-tpl-st{color:#1E8F7C;font-weight:700} /* lịch sử */ .rp-chart{margin-bottom:8px;break-inside:avoid} .rp-chart .chart{max-height:190px} /* ══ IN ẤN ══ */ @media print{ body.print-report > *:not(#print-report){display:none!important} body.print-report #print-report{display:block} body.print-report{background:#fff} .rp-break{break-before:page} @page{ size:A4;margin:12mm 11mm 14mm; @bottom-right{content:"Trang " counter(page) " / " counter(pages);font-size:8pt;color:#7D949C} } .sidebar,.topbar,.tabs,.tiem-actions,.toolbar .btn,.side-backdrop,.kcard-move,.danger-zone,#toasts{display:none!important} .layout{display:block} .main{padding:0} body{background:#fff} .card,.kpi{box-shadow:none;break-inside:avoid} /* Khi in: MỞ HẾT các khung đang gập, bỏ luôn cụm nút điều khiển & ô chọn — giấy in phải thấy đủ nội dung, không ai bấm được nút trên giấy. */ .card.folded>*{display:block!important} .card.folded{padding-top:16px;padding-bottom:16px} .card.folded .card-head{margin-bottom:14px} .card-ctrls,.card-fold,.card-grip,.card-move,.card-help,.ft-ord{display:none!important} .todo,.mytask-list,.dft-list,.pkg-list{display:block!important} .card.folded .todo,.card.folded ul,.card.folded ol{display:block!important} .drawer-overlay{position:static;background:none} body.print-qr *{visibility:hidden} body.print-qr .qr-card,body.print-qr .qr-card *{visibility:visible} body.print-qr .qr-card{position:fixed;left:50%;top:40px;transform:translateX(-50%);width:340px;-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* ══ THANH BÊN ẨN/HIỆN + NÚT CUỘN ══ */ .side-toggle{position:fixed;top:16px;left:250px;z-index:45;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25); background:#1E4A55;color:#fff;font-size:15px;line-height:1;cursor:pointer;box-shadow:var(--sh-sm);transition:left .22s,background .15s} .side-toggle:hover{background:var(--teal)} .sidebar{transition:transform .22s} body.side-collapsed .layout{grid-template-columns:0 1fr} body.side-collapsed .sidebar{transform:translateX(-100%);visibility:hidden} body.side-collapsed .side-toggle{left:12px;background:var(--side)} .scroll-btns{position:fixed;right:18px;bottom:22px;z-index:44;display:flex;flex-direction:column;gap:8px} .scroll-btns button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;font-weight:700; cursor:pointer;box-shadow:var(--sh-md, 0 4px 14px rgba(20,49,58,.15));opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .2s,transform .2s,background .15s} .scroll-btns button:hover{background:var(--teal);color:#fff;border-color:var(--teal)} body.can-up .scroll-btns [data-act="scroll-top"], body.can-down .scroll-btns [data-act="scroll-bottom"]{opacity:1;pointer-events:auto;transform:none} @media (max-width:900px){ .side-toggle{display:none} body.side-collapsed .layout{grid-template-columns:1fr} body.side-collapsed .sidebar{visibility:visible} .scroll-btns{right:12px;bottom:16px} .scroll-btns button{width:38px;height:38px} } /* ══ CÔNG CỤ: NGÔN NGỮ & LOẠI MẪU ══ */ .tool-lang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 16px;font-size:13px;font-weight:600} .seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff} .seg button{border:0;background:transparent;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer} .seg button + button{border-left:1px solid var(--line)} .seg button.on{background:var(--ink);color:#fff} .tpl-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:4px} .tpl-btn-custom{background:#EAF2FB;border-color:#9CC3E6;color:#1F5F8B} .tpl-btn-custom:hover{background:#DCEBF7} .tpl-btn-auto{background:#F3EDFB;border-color:#C7B2EA;color:#5B3A91} .tpl-btn-auto:hover{background:#EADFF8} .tpl-filter{display:flex;gap:4px;flex-wrap:wrap} .tpl-filter button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:11.5px;color:var(--ink-2);cursor:pointer} .tpl-filter button b{margin-left:2px} .tpl-filter button.on{background:var(--ink);border-color:var(--ink);color:#fff} .tpl-filter button[disabled]{opacity:.4;cursor:default} .tpl{border-left-width:4px} .tpl.kind-base{border-left-color:#B9C8CC} .tpl.kind-custom{border-left-color:#3A8DD0} .tpl.kind-auto{border-left-color:#8A5CD0} .tpl.kind-custom .tpl-head{background:#F2F7FC} .tpl.kind-auto .tpl-head{background:#F7F3FC} .tpl.is-used .tpl-head{background:#E4F6F2} .tpl-kind{flex:none;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap} .tpl-kind.kind-base{background:#EEF3F4;color:#5D737A} .tpl-kind.kind-custom{background:#DCEBF7;color:#1F5F8B} .tpl-kind.kind-auto{background:#EADFF8;color:#5B3A91} .tpl.is-new{animation:tplNew 2.4s ease-out} @keyframes tplNew{0%,35%{box-shadow:0 0 0 3px rgba(138,92,208,.45);transform:scale(1.01)}100%{box-shadow:none;transform:none}} .tpl-body.two{display:grid;grid-template-columns:1fr 1fr} .tpl-body.two .tpl-lang + .tpl-lang{border-left:1px dashed var(--line)} .tpl-lang{position:relative;min-width:0} .tpl-lang-vi pre{color:var(--ink-2)} .lang-tag{display:inline-block;margin:10px 0 0 14px;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.3px} .lang-tag i{font-style:normal;display:inline-block;margin-right:5px;padding:1px 5px;border-radius:4px;background:var(--ink);color:#fff;font-size:10px} .tpl-lang-vi .lang-tag i{background:#C0553A} .tpl-copy{position:absolute;top:6px;right:8px} .tpl-body:not(.two) .tpl-copy{top:8px} .tpl-body:not(.two) pre{padding-right:78px} .tpl-body.two .tpl-lang pre{padding-top:6px} .tpl-novi{padding:8px 14px 12px;margin:0} @media (max-width:900px){ .tpl-body.two{grid-template-columns:1fr} .tpl-body.two .tpl-lang + .tpl-lang{border-left:0;border-top:1px dashed var(--line)} } .rp-vi{color:#3F5C66;border-top:1px dashed #D5E2E5;font-style:italic} .rp-kind-custom{border-left:3px solid #3A8DD0} .rp-kind-auto{border-left:3px solid #8A5CD0} @media print{.side-toggle,.scroll-btns{display:none!important}} /* ══ ĐĂNG NHẬP ══ */ body.auth-mode .layout,body.auth-mode .topbar,body.auth-mode .side-toggle,body.auth-mode .scroll-btns{display:none!important} .auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px; background:radial-gradient(1200px 600px at 10% -10%,#DDF3EE 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#DCEBF7 0,transparent 60%),var(--paper)} .auth-card{width:min(400px,100%);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:28px 26px;display:flex;flex-direction:column;gap:14px} .auth-card h1{font-family:var(--ff-head);font-size:26px;margin:4px 0 0} .auth-card p{margin:0} .auth-brand{display:flex;align-items:center;gap:11px} .auth-name{font-family:var(--ff-head);font-weight:700;font-size:16px} .auth-err{color:var(--coral);font-size:13px;font-weight:600;min-height:1em;margin:0} .auth-err:empty{display:none} .auth-btn{width:100%;justify-content:center;padding:12px} .pw-wrap{position:relative;display:block} .pw-wrap input{padding-right:44px} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:16px;cursor:pointer;opacity:.6} /* ══ NGƯỜI DÙNG Ở THANH BÊN ══ */ .user-box{display:flex;align-items:center;gap:10px;margin:0 4px 16px;padding:10px;border-radius:12px;background:rgba(255,255,255,.07)} .user-av{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;font-weight:700} .user-meta{display:flex;flex-direction:column;min-width:0} .user-meta b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-meta small{font-size:11.5px;opacity:.65} a.side-btn{display:block;text-decoration:none} /* ══ PHÂN CÔNG 2 BÊN ══ */ .side-block{margin-bottom:8px} .side-title{font-size:16px;margin:18px 0 10px;display:flex;align-items:baseline;gap:10px} .side-vhg .person{border-top:3px solid #9C3A6A} .side-tiem .person{border-top:3px solid var(--teal)} .who-content{background:#FBE7F0;color:#9C3A6A} .side-block .people{grid-template-columns:repeat(2,1fr)} .todo label.locked{cursor:default} .todo label.locked .todo-t{color:var(--ink-2)} .todo input[disabled]{cursor:not-allowed;opacity:.45} select.assign{border:1px solid var(--line);border-radius:999px;padding:3px 8px;font:inherit;font-size:12px;background:#fff;color:var(--ink-2);max-width:190px} .assignee{font-size:12px;font-weight:600;color:#1F5F8B;background:#EAF2FB;border-radius:999px;padding:2px 9px} .tag-mini{font-size:11px;font-weight:600;color:#8A5A12;background:#FDF2E0;border-radius:999px;padding:1px 8px} .pkg .card-head{flex-wrap:wrap} .pkg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(345px,100%),1fr));gap:10px} .pkg-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--line); border-radius:14px;padding:11px 13px;background:#fff;transition:.15s} .pkg-item:hover{border-color:var(--teal)} .pkg-item.on{border-color:var(--teal);background:linear-gradient(180deg,var(--teal-bg),#fff)} .pkg-main{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:9px;min-width:0;flex:1;cursor:pointer} .pkg-item input[disabled]{opacity:.55;cursor:default} .pkg-item input[disabled]~*{cursor:default} .pkg-main input{accent-color:var(--teal);width:17px;height:17px;flex:none} .pkg-ico{font-size:17px;line-height:1} .pkg-text{display:flex;flex-direction:column;gap:1px;min-width:0} .pkg-text b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;white-space:normal} .pkg-text small{font-size:11.5px;font-weight:400;color:var(--ink-3);line-height:1.35;white-space:normal} .pkg-acts{display:flex;align-items:center;gap:5px;flex:none} .pkg-on{font-size:10.5px;font-weight:700;color:#fff;background:var(--teal);border-radius:999px;padding:2px 8px} .pkg-item{justify-content:space-between;align-items:center} .pkg-item>label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;flex:1} .pkg-item .btn.sm{flex:none} /* Nút "Chi tiết" và "⟳" trong khung 💼 Gói dịch vụ — làm nổi lên để dễ thấy là bấm được */ .pkg-btn{border-color:var(--teal);background:var(--teal-bg);color:var(--teal-dk);font-weight:700; box-shadow:0 1px 0 color-mix(in srgb,var(--teal) 22%,transparent)} .pkg-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-1px)} .pkg-btn:active{transform:none} .pkg-btn-ico{padding-left:9px;padding-right:9px;font-size:14px;line-height:1} .pkg-btn-ico:hover{transform:rotate(90deg)} /* 💼 Hộp thoại gói dịch vụ — danh sách gói bên trái, chi tiết bên phải */ .modal-xwide{width:min(1020px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column} .modal-xwide .modal-body{flex:1;min-height:0} .modal-tall{max-height:calc(100vh - 32px)} .svc-modal{display:grid;grid-template-columns:266px 1fr;gap:14px;min-height:0;overflow:hidden} .svc-nav{display:flex;flex-direction:column;gap:6px;overflow-y:auto;padding-right:2px} .svc-pick{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 10px;border:1.5px solid var(--line); border-radius:12px;background:#fff;cursor:pointer;font:inherit;transition:.15s;position:relative} .svc-pick:hover{border-color:var(--teal)} .svc-pick.on{border-color:var(--teal);background:var(--teal-bg);box-shadow:inset 3px 0 0 var(--teal)} .svc-pick-ico{font-size:18px;line-height:1} .svc-pick-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .svc-pick-body b{font-size:13px;font-weight:700;color:var(--ink)} .svc-pick-body small{font-size:11px;color:var(--ink-3)} .svc-pick-body b,.svc-pick-body small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Tên gói + nhãn "đã mua" trên cùng một dòng; tên dài thì cắt bằng "…", nhãn luôn còn nguyên */ /* 🩺 Tình trạng kênh */ .ch-sum{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto} .ch-pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px} .ch-pill.ok{background:#E7F6EE;color:#1B7A4B} .ch-pill.warn{background:#FFF3D6;color:#8A6100} .ch-pill.bad{background:#FDEDE8;color:#9C4A33} .ch-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:10px} .ch-row{border:1.5px solid var(--line);border-left-width:4px;border-radius:12px;padding:11px 13px;background:#fff} .ch-row.ok{border-left-color:#1B7A4B} .ch-row.warn{border-left-color:#E0A100} .ch-row.bad{border-left-color:#C0553A} .ch-row.unknown{border-left-color:var(--line)} /* Dòng tiêu đề mỗi thẻ kênh: tên + nhãn tình trạng + 2 nút. Màn hẹp (320px) nhét một dòng không đủ → cho xuống dòng, khỏi tràn ra ngoài màn hình. */ .ch-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;row-gap:6px;margin-bottom:6px} .ch-head b{font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ch-acts{display:flex;gap:4px;flex:none;margin-left:auto} .ch-acts .btn.sm{padding:3px 9px;font-size:11.5px} .ch-reload{font-size:14px;line-height:1} .ch-reload.busy{animation:spin .8s linear infinite;pointer-events:none;opacity:.6} @keyframes spin{to{transform:rotate(360deg)}} .chd-h{margin:0 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .chd-facts{margin:0;padding-left:20px;line-height:1.75} .chd-fix{background:var(--paper);border-radius:10px;padding:10px 12px;margin:12px 0} .chd-rule{font-size:12.5px;color:var(--ink-2)} .chd-rule b{color:var(--ink)} .chd-intro{margin:0 0 10px;color:var(--ink-2)} .chd-locked{background:var(--paper);border-radius:9px;padding:9px 12px;margin:0} .chd-pb .chd-sec{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:6px;background:#fff} .chd-pb .chd-sec[open]{background:var(--paper)} .chd-pb summary{cursor:pointer;font-weight:700;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px} .chd-pb summary::-webkit-details-marker{display:none} .chd-pb summary::before{content:'▸';color:var(--ink-3);font-size:12px} .chd-pb .chd-sec[open] summary::before{content:'▾'} .chd-pb ul{margin:8px 0 2px;padding-left:20px;line-height:1.75;font-size:13px} .chd-pb li{margin-bottom:4px} .ch-ic{font-size:16px;line-height:1} .ch-badge{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;white-space:nowrap} .ch-badge.ok{background:#E7F6EE;color:#1B7A4B} .ch-badge.warn{background:#FFF3D6;color:#8A6100} .ch-badge.bad{background:#FDEDE8;color:#9C4A33} .ch-badge.unknown{background:var(--paper);color:var(--ink-3)} .ch-facts{margin:0 0 8px;padding-left:18px;font-size:12.5px;color:var(--ink-2);line-height:1.6} .ch-fix{font-size:13px;line-height:1.6;background:var(--paper);border-radius:9px;padding:8px 10px} .ch-issue{border-left:3px solid var(--line);padding:6px 0 6px 9px;margin-bottom:8px} .ch-issue.lv-bad{border-left-color:#C0553A} .ch-issue.lv-warn{border-left-color:#E0A100} .ch-issue.lv-info{border-left-color:#1B7A4B} .ch-issue-t{font-size:13px;font-weight:700;line-height:1.5} .ch-issue-d{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:2px} .ch-issue-f{font-size:12.5px;line-height:1.6;margin-top:4px;background:var(--paper);border-radius:8px;padding:6px 9px} .chd-issue{border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:10px 12px;margin-bottom:10px} .chd-issue.lv-bad{border-left-color:#C0553A} .chd-issue.lv-warn{border-left-color:#E0A100} .chd-issue.lv-info{border-left-color:#1B7A4B} .chd-issue-t{font-weight:700;font-size:13.5px} .chd-issue-d{margin:4px 0 0;color:var(--ink-2);font-size:13px;line-height:1.6} .chd-issue-f{margin:8px 0 0;padding-left:20px;line-height:1.75;font-size:13px} .chd-issue-f li{margin-bottom:5px} .ch-items{margin-top:8px;font-size:12.5px} .ch-items a{color:var(--teal-dk);font-weight:600} .ch-items a.untracked{color:var(--ink-3);font-weight:500;text-decoration:underline dotted} .ch-when{margin-top:12px} .links-card .card-head .btn.sm{margin-left:auto} .links-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:6px} .links-list li{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff} .links-ic{font-size:16px;line-height:1;flex:none} .links-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .links-body b{font-size:13px;font-weight:700} .links-body small{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .links-list .btn.sm{flex:none} .links-phone{margin-top:10px;font-size:13.5px;font-weight:600} .links-phone a{color:var(--teal-dk)} .links-missing{margin-top:10px} .links-note{margin-top:10px;background:#E7F6EE;color:#1B7A4B} .links-when{margin-top:8px} .svc-pick-name{display:flex;align-items:center;gap:6px;min-width:0} .svc-pick-name b{min-width:0} .svc-pick-cost{font-size:12px;font-weight:800;color:var(--teal-dk);white-space:nowrap} /* Nhãn "đã mua": nằm TRONG hàng, không treo ra ngoài viền — trước đây top:-7px nên mục đầu tiên bị khung cuộn (.svc-nav overflow-y:auto) cắt mất nửa chữ. */ .svc-flag{flex:none;align-self:center;font-size:10px;font-weight:700;color:#fff;background:var(--teal); border-radius:999px;padding:2px 8px;line-height:1.5;white-space:nowrap} .svc-detail{overflow-y:auto;padding-right:4px;font-size:13px;line-height:1.65} .svc-d-head h4{margin:0 0 4px;font-size:16px} .svc-detail .svc-desc{margin:0 0 8px;color:var(--ink-2)} .svc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .chip{font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--paper);border-radius:999px;padding:3px 10px} .chip-role{background:var(--teal-bg);color:var(--teal-dk)} .chip-ok{background:#E7F6EE;color:#1B7A4B} .svc-goal-box,.svc-kpi-box{background:var(--paper);border-radius:10px;padding:9px 12px;margin:0 0 12px;color:var(--ink-2)} .svc-kpi-box{margin:14px 0 0} .svc-price-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px; border:2px solid var(--teal);border-radius:14px;background:linear-gradient(180deg,var(--teal-bg),#fff); box-shadow:0 2px 10px rgba(46,184,160,.14)} .svc-price-box.empty{border-color:#E4A11B;background:linear-gradient(180deg,#FFF6E5,#fff);box-shadow:0 2px 10px rgba(228,161,27,.14)} .svc-price-ico{font-size:20px;line-height:1} .svc-price-field{display:flex;flex-direction:column;gap:3px;flex:1;min-width:190px} .svc-price-lb{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dk)} .svc-price-box.empty .svc-price-lb{color:#9A6708} .svc-price-field input{width:100%;padding:9px 12px;border:1.5px solid var(--teal);border-radius:10px;background:#fff; font:inherit;font-size:16px;font-weight:800;color:var(--ink);outline:none} .svc-price-box.empty .svc-price-field input{border-color:#E4A11B} .svc-price-field input::placeholder{font-weight:500;color:var(--ink-3)} .svc-price-field input:focus{box-shadow:0 0 0 4px rgba(46,184,160,.18)} .svc-price-val{font-size:17px;font-weight:800;color:var(--teal-dk)} .svc-price-val small{font-size:12px;font-weight:500;color:var(--ink-3)} .svc-price-note{font-size:11.5px;line-height:1.5;color:var(--ink-3);max-width:230px} .svc-g{margin-bottom:14px} .svc-g h5{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12.5px;color:var(--ink)} .svc-g-n{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--paper);border-radius:999px;padding:1px 8px} .svc-steps{margin:0;padding-left:22px} .svc-steps li{margin-bottom:5px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .svc-steps li>span{flex:1;min-width:180px} .svc-who{font-size:11px;font-style:normal;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap; background:var(--paper);color:var(--ink-2)} .svc-who.who-owner,.svc-who.who-staff{background:#FFF3E0;color:#9A5B17} .svc-g-note .svc-steps li{color:var(--ink-3)} @media (max-width:760px){ .svc-modal{grid-template-columns:1fr;overflow:auto} .svc-nav{flex-direction:row;overflow-x:auto;padding-bottom:4px} .svc-pick{min-width:200px} } /* ══ TÀI KHOẢN ══ */ .modal-users{width:min(820px,100%)} .modal-users h4{margin:16px 0 6px} .users-tbl td{vertical-align:middle} .users-tbl tr.is-off td{opacity:.5} .user-form{display:flex;flex-direction:column;gap:12px} .user-form select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:14px} .tiem-checks{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-weight:400} .role-help{font-size:12.5px;line-height:1.6;color:var(--ink-2);background:var(--paper);border-radius:10px;padding:8px 12px} .role-help:empty{display:none} @media print{.pkg,select.assign{display:none!important}} @media (max-width:900px){.side-block .people{grid-template-columns:1fr}} /* ══ MARKETING ══ */ .mk-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .mk-subs{display:flex;gap:6px;flex-wrap:wrap} .mk-subs button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer} .mk-subs button b{margin-left:4px;font-size:11px;color:var(--ink-3)} .mk-subs button.on{background:var(--ink);border-color:var(--ink);color:#fff} .mk-subs button.on b{color:#fff;opacity:.7} .mk-status{display:flex;gap:6px;flex-wrap:wrap} .chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink-2)} .chip.ok{background:var(--teal-bg);border-color:#9ED9CD;color:var(--teal-dk)} .chip.off{background:#FDF2E0;border-color:#F3D9A8;color:#8A5A12} .mk-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .mk-week{margin:18px 0 8px;font-size:13px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.5px} .mk-posts{display:flex;flex-direction:column;gap:12px} .mk-post,.mk-reply{display:grid;grid-template-columns:200px 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-left:4px solid #B9C8CC;border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--sh-sm)} .mk-reply{display:block;margin-bottom:12px} .mk-post.mk-st-review,.mk-reply.mk-st-review{border-left-color:var(--amber)} .mk-post.mk-st-approved,.mk-reply.mk-st-approved{border-left-color:var(--blue)} .mk-post.mk-st-posted,.mk-reply.mk-st-posted{border-left-color:var(--teal)} .mk-post-media{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;align-content:start} .mk-post-media img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--paper);display:block} .mk-post-media:has(a:only-child){grid-template-columns:1fr} .mk-post-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px} .mk-badge{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;background:#EEF3F4;color:#5D737A} .mk-badge.mk-st-review{background:#FDF2E0;color:#8A5A12} .mk-badge.mk-st-approved{background:#DCEBF7;color:#1F5F8B} .mk-badge.mk-st-posted{background:var(--teal-bg);color:var(--teal-dk)} .mk-plats{display:inline-flex;gap:3px} .pl{font-style:normal;font-size:10px;font-weight:800;color:#fff;border-radius:5px;padding:2px 5px} .pl-instagram{background:#C13584}.pl-facebook{background:#1877F2}.pl-tiktok{background:#111}.pl-google{background:#34A853} .mk-cap{margin:4px 0;font-size:13.5px;line-height:1.55;white-space:pre-wrap} .mk-cap-vi{margin:4px 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap} .mk-cap-vi i{font-style:normal;font-size:10px;font-weight:700;background:#C0553A;color:#fff;border-radius:4px;padding:1px 4px;margin-right:4px} .mk-tags{margin:4px 0;font-size:12.5px;color:#1F5F8B} .mk-meta{margin:6px 0} .mk-comments{margin:6px 0;padding:8px 12px;list-style:none;background:var(--paper);border-radius:10px;font-size:12.5px;line-height:1.6} .mk-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .danger-text{color:var(--coral)!important} .mk-review{margin:6px 0;padding:8px 12px;border-left:3px solid var(--line);background:var(--paper);border-radius:0 10px 10px 0;font-size:13px;line-height:1.55;white-space:pre-wrap} .stars{color:#F5A623;letter-spacing:1px} .mk-form{display:flex;flex-direction:column;gap:12px} .mk-form textarea,.mk-editor textarea,.mk-form select,.mk-editor select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:14px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .mk-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .mk-upload{cursor:pointer} .mk-progress{padding:8px 12px;border-radius:10px;background:var(--teal-bg);color:var(--teal-dk);font-size:13px;font-weight:600;margin-bottom:10px} .mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:12px} .mk-photo{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden} .mk-photo img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--paper)} .mk-photo figcaption{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;color:var(--ink-2)} .mk-editor{width:min(760px,100%)} .mk-plat-pick{display:flex;gap:14px;flex-wrap:wrap;font-weight:400} .mk-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(84px,100%),1fr));gap:6px;max-height:230px;overflow:auto;padding:4px} .mk-pick-item{border:3px solid transparent;border-radius:10px;padding:0;background:var(--paper);cursor:pointer;overflow:hidden} .mk-pick-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover} .mk-pick-item.on{border-color:var(--teal);box-shadow:0 0 0 2px rgba(46,184,160,.3)} .mk-ai-row{display:flex;gap:8px;flex-wrap:wrap} .mk-ai-row input{flex:1 1 260px;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:14px} @media (max-width:760px){ .mk-post{grid-template-columns:1fr} .grid-3,.mk-metric-grid{grid-template-columns:1fr 1fr} } /* 🎛️ Hộp thoại bật/tắt tính năng & phân quyền theo vai trò */ .modal-wide2{width:min(880px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column} .modal-wide2 .modal-body{flex:1;min-height:0} .ft-body{overflow-y:auto;padding-right:6px;gap:16px} .ft-hint{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);background:var(--paper);border-radius:10px;padding:9px 12px} /* Thanh mục của hộp 🎛️ Bật/tắt tính năng — mỗi lần chỉ hiện một mục, khỏi cuộn dài */ .ft-tabs{position:sticky;top:0;z-index:3;flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;margin:0 -2px;padding:8px 2px; background:var(--bg);border-bottom:1.5px solid var(--line)} .ft-tabs .ft-tab{flex-shrink:0} .ft-tab{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px; background:#fff;color:var(--ink-2);font:600 12.5px/1 inherit;padding:8px 12px;cursor:pointer;transition:.15s; max-width:100%;min-width:0} .ft-tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ft-tab>i{font-style:normal;font-size:13px;flex:none} .ft-tab>b{font-size:11px;font-weight:700;color:var(--teal-dk);background:var(--teal-bg);border-radius:999px;padding:1px 6px;flex:none} .ft-tab:hover{border-color:var(--teal);color:var(--teal-dk)} .ft-tab.on{border-color:var(--teal);background:var(--teal);color:#fff} .ft-tab.on>b{background:rgba(255,255,255,.22);color:#fff} .ft-sec{padding-top:12px} /* ══ 🖥️ PHIÊN ĐĂNG NHẬP ══ */ /* Gộp phiên theo tài khoản */ .se-sum{margin:8px 0 10px} .se-group{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:10px;background:#fff} .se-group.on{border-color:var(--teal)} .se-group-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 13px;background:var(--paper); border-bottom:1.5px solid var(--line)} .se-group.on .se-group-h{background:var(--teal-bg)} .se-who{display:flex;flex-direction:column;gap:1px;min-width:0;margin-right:auto} .se-who b{font-size:13.5px;color:var(--ink)} .se-who small{font-size:11.5px;color:var(--ink-3)} .se-count{font-size:11.5px;font-weight:700;color:var(--ink-2);background:#fff;border:1.5px solid var(--line); border-radius:999px;padding:2px 9px;flex:none} .se-count.multi{color:#9A6412;border-color:#E7C98B;background:#FDF2E0} .se-live-n{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;color:var(--teal-dk);flex:none} .se-kill-all{flex:none} .se-group .se-tbl{margin:0} /* Màn hẹp: bảng thiết bị rộng hơn màn thì cho VUỐT NGANG riêng phần bảng, phần tiêu đề nhóm vẫn đứng yên. */ .se-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} @media (max-width:900px){ .se-scroll .se-tbl{min-width:640px} /* Nhắc người dùng là bảng còn cột bên phải */ .se-group::after{content:'→ vuốt ngang bảng để xem giờ đăng nhập · thời lượng · nút đăng xuất'; display:block;padding:6px 13px 8px;font-size:11.5px;color:var(--ink-3);background:#fff} } .se-group .se-tbl th{font-size:10.5px} .se-dev{font-weight:600} /* Cảnh báo tài khoản chưa tự đổi mật khẩu */ .u-pw-warn{display:inline-block;font-size:10.5px;font-weight:700;color:#9C4A33;background:#FDEDE8; border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:middle} .u-pw-box{margin:10px 0} .u-pw-box .chip{margin:4px 4px 0 0} .se-long{font-weight:600;color:var(--ink)} .se-long small{display:block;font-size:10.5px;font-weight:400;color:var(--teal-dk)} .se-total{font-size:11.5px;color:var(--ink-2);background:#fff;border:1.5px solid var(--line); border-radius:999px;padding:2px 9px;flex:none} .se-total b{color:var(--teal-dk)} .se-stat li em{font-style:normal;font-size:11px} .se-tbl td small{display:block;font-size:11px;color:var(--ink-3);font-weight:400;margin-top:1px} .se-tbl td{vertical-align:top} .se-loc{font-size:12px;color:var(--ink-2)} .se-live td{background:color-mix(in srgb,var(--teal-bg) 60%,#fff)} .se-killed td{opacity:.55} .se-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:6px; box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent);animation:sePulse 1.8s ease-in-out infinite} @keyframes sePulse{0%,100%{opacity:1}50%{opacity:.35}} .se-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px;margin:12px 0} .se-kpi{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:2px} .se-kpi b{font-size:26px;line-height:1.1;color:var(--teal-dk)} .se-kpi span{font-size:12.5px;font-weight:600;color:var(--ink)} .se-kpi small{font-size:11px;color:var(--ink-3)} .se-multi{margin:10px 0} .se-multi .chip{margin:4px 4px 0 0} .se-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:10px} .se-stat{border:1.5px solid var(--line);border-radius:14px;padding:11px 13px;background:#fff} .se-stat h5{margin:0 0 7px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .se-stat ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .se-stat li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px} .se-stat li span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .se-stat li b{color:var(--teal-dk);flex:none} @media (max-width:640px){ /* Màn hẹp: thanh mục thành một hàng vuốt ngang, khỏi chiếm hết màn hình */ .ft-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .ft-tabs::-webkit-scrollbar{display:none} .ft-tab{flex:0 0 auto;padding:7px 10px;font-size:12px} .ft-tab>span{max-width:9.5em} } .ft-group h4{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:11.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3)} .ft-g-n{font-size:11px;font-weight:700;color:var(--teal-dk);background:var(--teal-bg);border-radius:999px;padding:0 7px} .ft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:10px;align-items:start} .ft-item2{border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff;transition:.15s;min-width:0} .ft-item2.on{border-color:var(--teal);background:var(--teal-bg)} .ft-sw{display:flex;align-items:center;gap:9px;font-size:13.5px} .ft-sw b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ft-state{font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap} .ft-item2.on .ft-state{color:var(--teal-dk)} .ft-roles{margin-top:9px;padding-top:9px;border-top:1px dashed color-mix(in srgb,var(--teal) 35%,transparent)} .ft-roles-top{display:flex;align-items:center;gap:7px;margin-bottom:7px} .ft-roles-lb{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .ft-count{font-size:10.5px;font-weight:700;color:#9C4A33;background:#FDEDE8;border-radius:999px;padding:1px 8px} .ft-count.all{color:var(--teal-dk);background:#fff} .ft-chips{display:flex;flex-direction:column;gap:5px} .ft-chip-grp{display:flex;flex-wrap:wrap;gap:5px} .ft-role{display:inline-flex;align-items:center;gap:4px;max-width:100%;border:1.5px solid var(--line);background:#fff; border-radius:999px;padding:3px 9px 3px 6px;font:inherit;font-size:11px;font-weight:600;color:var(--ink-3); cursor:pointer;transition:.12s;line-height:1.5} .ft-role i{font-style:normal;font-size:12px;line-height:1;filter:grayscale(1);opacity:.55} .ft-role span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ft-role:hover{border-color:var(--teal);color:var(--ink-2)} .ft-role.on{border-color:var(--teal);background:var(--teal);color:#fff} .ft-role.on i{filter:none;opacity:1} .ft-all{margin-left:auto;border:0;background:transparent;color:var(--teal-dk);font:inherit;font-size:11px; font-weight:700;cursor:pointer;text-decoration:underline;white-space:nowrap} @media (max-width:640px){ .ft-grid{grid-template-columns:1fr} } /* ── Trợ giúp tại chỗ: nút ? trên tiêu đề khung + hộp giải thích theo vai trò ── */ .card-help{width:20px;height:20px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%; background:#fff;color:var(--teal-dk);font:700 12px/1 inherit;cursor:pointer;padding:0} .card-help:hover{background:var(--teal);border-color:var(--teal);color:#fff} .help-modal{width:min(520px,100%)} .help-what{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--teal);background:var(--paper); border-radius:0 8px 8px 0;font-size:13px} .help-h{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)} .help-list{margin:0;padding-left:18px;display:grid;gap:7px;font-size:13.5px;line-height:1.55} /* ── 📥 Nhập nhiều tiệm từ Google Sheet ── */ .imp-map{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px;margin:8px 0 14px} .imp-list{margin:6px 0 10px;padding-left:18px;display:grid;gap:4px;font-size:13px} .imp-list small{display:block;color:var(--ink-3)} .imp-pick{display:grid;gap:4px;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px} .imp-pick-row{display:flex;gap:9px;align-items:flex-start;padding:6px 8px;border-radius:8px;cursor:pointer} .imp-pick-row:hover{background:var(--paper)} .imp-pick-row small{display:block;color:var(--ink-3);font-size:12px} .side-btn.warn{color:var(--amber);font-weight:700} .ok-t{color:var(--teal-dk)} @media (max-width:640px){ .imp-map{grid-template-columns:1fr} } .alert.nocheck{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .btn.sm{padding:6px 12px;font-size:13px} /* ── 🧰 Cần chuẩn bị trước khi chạy gói ── */ .svc-needs{margin:14px 0;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;background:#fff} .svc-needs h5{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px} .needs-sum{font-weight:400;font-size:12px;color:var(--ink-3)} .needs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px} .needs-box h6{margin:0 0 5px;font-size:12.5px;color:var(--ink-2);letter-spacing:.01em} .needs-box ul{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:5px} .needs-box li{display:flex;gap:7px;align-items:flex-start;font-size:13px;line-height:1.45} .needs-box li.opt{color:var(--ink-2)} .needs-who{flex:0 0 auto;font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;background:var(--paper);white-space:nowrap} .needs-opt{font-style:normal;font-size:11px;color:var(--ink-3);background:var(--paper);padding:1px 5px;border-radius:5px} @media (max-width:760px){ .needs-grid{grid-template-columns:1fr} } .rp-folder{margin-right:auto} /* nút mở thư mục tiệm nằm tách về bên trái */ /* Kênh tiệm chưa dùng: để nhạt, xếp cuối danh sách */ .ch-row.off{opacity:.72} .ch-badge.off,.ch-pill.off{background:var(--paper);color:var(--ink-3)} .ft-note{margin:-4px 0 8px;font-size:12px;color:var(--ink-3);line-height:1.5} .rp-help{margin:10px 0} .rp-help .help-list{margin-top:6px} /* 👁️ Xem thử vai trò trong hộp Bật/tắt tính năng */ .ft-prev-roles{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px} .ft-prev-box{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--paper);display:grid;gap:7px} .ft-prev-row{display:grid;grid-template-columns:150px 1fr;gap:10px;font-size:13px;line-height:1.5} .ft-prev-row b{color:var(--ink-2);font-size:12.5px} @media (max-width:640px){ .ft-prev-row{grid-template-columns:1fr;gap:2px} } .gd-export{margin-right:auto} .ft-ord{display:inline-flex;gap:3px;margin:2px 0 0 26px} .ft-ord button{width:24px;height:22px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;color:var(--ink-2)} .ft-ord button:hover:not(:disabled){border-color:var(--teal);color:var(--teal-dk)} .ft-ord button:disabled{opacity:.35;cursor:default} .login-help{line-height:1.6} .login-help b{color:var(--ink-2);font-weight:600} /* ══════════════════════════════════════════════ ĐIỆN THOẠI — gọn lại cụm nút, bỏ thứ không bấm nổi bằng ngón tay ══════════════════════════════════════════════ */ @media (max-width:640px){ /* Nút đầu trang tiệm: chữ nhỏ, một hàng cuộn ngang thay vì xuống 3 dòng */ .tiem-actions{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:4px;-webkit-overflow-scrolling:touch} .tiem-actions::-webkit-scrollbar{height:0} .tiem-actions .btn{flex:0 0 auto;padding:8px 12px;font-size:12.5px;white-space:nowrap} .tiem-actions .card-help{order:9} /* nút ? xuống cuối, khỏi chen trước nút chính */ /* Khung: trên điện thoại chỉ giữ ? và thu gọn — kéo thả & đổi thứ tự để dành cho máy tính */ .card-ctrls .card-move{display:none} .card-head{flex-wrap:wrap} .card-head h3{font-size:15px} /* Bảng rộng (lịch sử điểm, giờ công…): cho cuộn ngang trong khung, không đội cả trang */ .card > .tbl, .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} .tbl th,.tbl td{white-space:nowrap} /* iPhone TỰ PHÓNG TO trang khi chạm vào ô nhập có cỡ chữ dưới 16px. Phóng xong thì màn hình nhìn thấy hẹp hơn trang thật → mọi thứ (kể cả hộp thoại mở ngay sau khi đăng nhập) trông như bị cắt mất bên phải. Ép 16px là hết hẳn hiện tượng đó. */ input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px } /* Vùng bấm tối thiểu 34px để ngón tay bấm trúng */ .card-help{width:32px;height:32px;font-size:14px} .card-fold{width:34px;height:34px;font-size:15px} .btn.sm,.btn.ghost.sm{min-height:34px;padding:7px 12px;font-size:12.5px} .ch-reload{min-width:38px} .tabs-fold{min-height:34px;padding:6px 10px} .side-acts-toggle{min-height:36px} /* Hộp thoại: sát mép hơn, nút hành động xuống hàng gọn */ .modal{width:min(100%,520px)} .modal-actions{flex-wrap:wrap;gap:8px} .modal-actions .btn{flex:1 1 auto;min-width:120px} .rp-folder,.gd-export{margin-right:0} } /* 🔍 Ô tìm tiệm ở thanh bên — chỉ hiện khi danh sách dài */ .tiem-search{position:relative;padding:0 14px 8px} .tiem-search:empty{display:none} #tiem-q{width:100%;padding:8px 34px 8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:13px} #tiem-q::placeholder{color:rgba(255,255,255,.5)} #tiem-q:focus{outline:none;border-color:var(--teal);background:rgba(255,255,255,.1)} .sq-count{position:absolute;right:22px;top:9px;font-size:11px;color:rgba(255,255,255,.55)} /* ══ 🏢 Bảng tổng hợp tiệm ══ */ .as-body{overflow:auto} /* .modal-body là flex theo cột → con của nó mặc định BỊ CO khi nội dung dài hơn hộp, làm bảng trong nhóm phiên đăng nhập bị cắt cụt. Cấm co, để hộp tự cuộn. */ .as-body>*{flex:0 0 auto;max-width:100%} .se-group{flex:0 0 auto;max-width:100%} .as-kpis{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px} .as-kpis span{background:var(--paper);border-radius:10px;padding:7px 12px;font-size:12.5px;color:var(--ink-2)} .as-kpis b{font-size:15px;color:var(--ink);margin-right:3px} .as-kpis .warn-t b{color:var(--coral)} .as-bar-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px} .as-bar-tools [data-as-q]{flex:1 1 220px;min-width:160px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px} .as-sel{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)} .as-sel select{padding:7px 8px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;background:#fff} .as-chips{display:flex;flex-wrap:wrap;gap:5px} .as-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font:inherit;font-size:12px;cursor:pointer;color:var(--ink-2)} .as-chip:hover{border-color:var(--teal)} .as-chip.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600} .as-tbl td{vertical-align:middle} .as-tbl small{display:block;color:var(--ink-3);font-size:11.5px} .as-city{margin-top:1px} .as-score{display:inline-block;min-width:34px;text-align:center;padding:3px 7px;border-radius:8px;color:#fff;font-weight:700;font-size:12.5px} .as-bar{display:block;width:96px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:3px} .as-bar i{display:block;height:100%;background:var(--teal)} .as-pkg{display:inline-block;background:var(--teal-bg);color:var(--teal-dk);border-radius:7px;padding:2px 7px;font-size:11.5px;margin:1px 2px 1px 0} .as-none{color:var(--ink-3);font-size:12px} @media (max-width:640px){ .as-tbl{font-size:12px} .as-bar{width:64px} } .sq-tools{display:flex;gap:6px;margin-top:6px} .sq-tools select{flex:1;min-width:0;padding:6px 6px;border-radius:9px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:12px} .sq-tools select:focus{outline:none;border-color:var(--teal)} .sq-tools option{color:var(--ink);background:#fff} .as-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--teal-bg);border-radius:10px;padding:8px 12px;margin-bottom:8px} .as-bulk-all{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer} .as-bulk-n{font-size:12.5px;color:var(--ink-2);margin-right:auto} .as-pick-col{width:34px;text-align:center} .as-tbl tr.as-on{background:var(--teal-bg)} .side-clear{margin-top:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff; border-radius:9px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer} .side-clear:hover{border-color:var(--teal);background:rgba(46,184,160,.18)} /* ⏰ Hẹn lịch kiểm tra lại + 🧾 Nhật ký hệ thống */ .plan-quick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px} .as-due{display:inline-block;background:var(--paper);border-radius:7px;padding:2px 7px;font-size:12px;color:var(--ink-2);white-space:nowrap} .as-due.now{background:#FDECE6;color:#A33F22;font-weight:700} .sl-tbl td{vertical-align:top;font-size:12.5px} .sl-tbl small{display:block;color:var(--ink-3);font-size:11.5px} .sl-at{white-space:nowrap;color:var(--ink-3)} .sl-act{display:inline-block;background:var(--teal-bg);color:var(--teal-dk);border-radius:7px;padding:2px 8px;font-size:12px;font-weight:600;white-space:nowrap} .sl-act.danger{background:#FDECE6;color:#A33F22} .sl-detail{color:var(--ink-2);line-height:1.5} .login-sub{line-height:1.6} /* Hình minh hoạ trong hộp Cài lên màn hình chính */ .ins-art{margin:8px 0 12px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff} .ins-art svg{display:block;width:100%;height:auto} .ins-art-done{background:var(--paper);border-style:dashed} /* ══ 📚 Sách tài liệu kỹ thuật ══ */ .td-toc{margin:0;padding-left:18px;display:grid;gap:6px} .td-toc a{color:var(--ink);text-decoration:none} .td-toc a:hover b{color:var(--teal-dk);text-decoration:underline} .td-toc em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3)} .td-art{margin:8px 0 10px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff} .td-art svg{display:block;width:100%;height:auto} .td-price-tbl{display:grid;gap:5px} .td-price-row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:7px 10px;border:1px solid var(--line);border-radius:10px;font-size:12.5px} .td-price-row b{flex:1 1 190px} .td-price-row span{color:var(--ink-3)} .td-price-sell{color:var(--teal-dk);font-weight:700} .td-src ul{margin:0;padding-left:18px;display:grid;gap:5px} .td-src a{color:var(--teal-dk)} /* ══ 📥 Hộp chờ tiệm tự kiểm ══ */ .side-count{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:9px; background:#C0553A;color:#fff;font-size:11px;font-weight:800;text-align:center;line-height:18px} .ik-list{display:flex;flex-direction:column;gap:10px} .ik-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--soft,#F3F8F7);border:1px solid var(--line);border-radius:14px;padding:12px 14px} .ik-score{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:flex;align-items:center; justify-content:center;font-weight:900;font-size:17px;background:#EAF4F1;color:#14313A} .ik-score.lo{background:#FDECEA;color:#C0553A} .ik-score.mid{background:#FDF3E3;color:#9A6412} .ik-score.hi{background:#E4F6F2;color:#157A5B} .ik-main{flex:1 1 220px;min-width:0} .ik-name{font-weight:800} .ik-web{overflow-wrap:anywhere} .ik-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px; background:#FDF3E3;color:#9A6412;font-size:11px;font-weight:700} .ik-acts{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap} /* ══ 🔬 Kiểm chuyên sâu ══ */ .dau-kiem{font-size:.7em;vertical-align:middle;margin-left:4px} .dp-list{display:flex;flex-direction:column;gap:14px;margin-top:12px} .dp-item{display:flex;flex-direction:column;gap:6px} .dp-label{font-weight:800;font-size:14px} .dp-in{width:100%;max-width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line); border-radius:12px;font:inherit;font-size:14px;line-height:1.5;resize:vertical} .dp-in:focus{outline:none;border-color:var(--brand,#1F8A70);box-shadow:0 0 0 3px rgba(31,138,112,.14)} .dp-ro{padding:10px 12px;border:1px solid var(--line);border-radius:12px; background:var(--soft,#F3F8F7);font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere} @media (max-width:560px){ .ik-acts{width:100%} .ik-acts .btn{flex:1 1 auto} } /* ══ Bảng giá theo tình trạng tiệm ══ */ .svc-price-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .svc-price-now{margin-bottom:10px;padding:8px 12px;border-radius:12px;font-size:13.5px; background:#EAF4F1;border:1px solid var(--line)} .svc-price-now.muc-lo{background:#FDECEA} .svc-price-now.muc-mid{background:#FDF3E3} .svc-price-now.muc-hi{background:#E4F6F2} .svc-price-grid{width:100%;border-collapse:collapse;font-size:13.5px} .svc-price-grid th,.svc-price-grid td{border:1px solid var(--line);padding:7px 9px;text-align:left} .svc-price-grid thead th{background:#EFF5F4;font-size:12px;text-transform:uppercase;letter-spacing:.03em} .svc-price-grid tbody th{white-space:nowrap;font-weight:800;background:#F7FAFA} .svc-price-grid tr.muc-dang th,.svc-price-grid tr.muc-dang td{background:#E9F5F1} .svc-price-grid input{width:100%;max-width:100%;box-sizing:border-box;padding:6px 8px; border:1px solid var(--line);border-radius:9px;font:inherit;font-size:13.5px} .svc-price-grid input:focus{outline:none;border-color:var(--brand,#1F8A70);box-shadow:0 0 0 3px rgba(31,138,112,.14)} .svc-price-no{text-align:center;color:var(--ink-3);background:#F7F7F7} @media (max-width:560px){ .svc-price-grid{font-size:12.5px} .svc-price-grid th,.svc-price-grid td{padding:5px 6px} .svc-price-grid input{font-size:12.5px;padding:5px 6px} }