/* ---------- Font Plus Jakarta Sans (đóng gói offline, bản variable 200–800) ---------- */ @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800; src:url(../vendor/fonts/plus-jakarta-sans-vietnamese-wght-normal.woff2) format("woff2"); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800; src:url(../vendor/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:200 800; src:url(../vendor/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ---------- Design tokens ---------- Màu chủ đạo indigo (nút, header). Nền + thẻ theo phong cách icon "Filled Outline / Tech Cartoon": nền slate có lưới chấm kỹ thuật, thẻ viền mực 2px + bóng cứng lệch 3px (soft neo-brutalist). Sáng/Tối: theo máy, hoặc ép bằng (chọn trong "Cài đặt tài khoản" — js/staff/profile.js). */ :root{ --bg-primary:#F1F5F9; /* nền app */ --bg-surface:#F8FAFC; /* ô phụ trong thẻ: ghi chú, khối nhóm */ --bg-card:#FFFFFF; /* thẻ, thanh điều hướng, modal */ --border-card:#1E1E24; /* viền thẻ — cùng màu nét viền icon */ --shadow-hard:3px 3px 0 #1E1E24; --shadow-hard-sm:2px 2px 0 #1E1E24; --pattern-grid-color:rgba(15,23,42,.07); --pattern:radial-gradient(var(--pattern-grid-color) 1px,transparent 1.3px) 0 0/24px 24px; --bg:var(--bg-primary); --paper:var(--bg-card); --ink:#0F172A; --ink-soft:#64748B; --ink-faint:#94A3B8; --line:#E2E8F0; --primary:#5B4CF0; --primary-strong:#4338CA; --primary-soft:#ECEAFF; --accent:#22D3EE; --accent-soft:#DDF8FD; --success:#15803D; --success-soft:#E1F6E8; --warning:#B45309; --warning-soft:#FEF1D6; --danger:#D12A4A; --danger-soft:#FDE7EC; --track:#E2E8F0; --track-ink:#64748B; --plan:#CBD5E1; /* nền thanh "kế hoạch đáng đạt" trên dashboard */ --grad:linear-gradient(135deg,#5B4CF0 0%,#4338CA 100%); --on-grad:#FFFFFF; --on-grad-soft:rgba(255,255,255,.78); --toast-bg:#0F172A; --backdrop:rgba(15,23,42,.55); --shadow:var(--shadow-hard); --shadow-sm:var(--shadow-hard-sm); --shadow-btn:0 10px 22px -6px rgba(79,63,230,.55); --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --radius:18px; --radius-md:16px; --radius-input:12px; --pill:999px; --safe-bottom:env(safe-area-inset-bottom,0px); --safe-top:env(safe-area-inset-top,0px); color-scheme:light; } /* Khối biến tối lặp 2 lần: theo máy (trừ khi ép Sáng) và khi ép Tối */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg-primary:#0B0F19; --bg-surface:#151C2C; --bg-card:#1E293B; --border-card:#334155; --shadow-hard:3px 3px 0 #020617; --shadow-hard-sm:2px 2px 0 #020617; --pattern-grid-color:rgba(56,189,248,.05); --pattern:linear-gradient(var(--pattern-grid-color) 1px,transparent 1px) 0 0/24px 24px, linear-gradient(90deg,var(--pattern-grid-color) 1px,transparent 1px) 0 0/24px 24px; --ink:#E2E8F0; --ink-soft:#94A3B8; --ink-faint:#64748B; --line:#334155; --primary:#8B7FFF; --primary-strong:#A99FFF; --primary-soft:#2A2760; --accent-soft:#12394A; --success:#4ADE80; --success-soft:#143A27; --warning:#FBBF24; --warning-soft:#3B2E10; --danger:#FB7185; --danger-soft:#44182B; --track:#334155; --track-ink:#94A3B8; --plan:#475569; --grad:linear-gradient(135deg,#6D5FF5 0%,#4338CA 100%); --toast-bg:#334155; --backdrop:rgba(2,6,23,.7); --shadow-btn:0 10px 22px -6px rgba(91,76,240,.6); color-scheme:dark; } } :root[data-theme="dark"]{ --bg-primary:#0B0F19; --bg-surface:#151C2C; --bg-card:#1E293B; --border-card:#334155; --shadow-hard:3px 3px 0 #020617; --shadow-hard-sm:2px 2px 0 #020617; --pattern-grid-color:rgba(56,189,248,.05); --pattern:linear-gradient(var(--pattern-grid-color) 1px,transparent 1px) 0 0/24px 24px, linear-gradient(90deg,var(--pattern-grid-color) 1px,transparent 1px) 0 0/24px 24px; --ink:#E2E8F0; --ink-soft:#94A3B8; --ink-faint:#64748B; --line:#334155; --primary:#8B7FFF; --primary-strong:#A99FFF; --primary-soft:#2A2760; --accent-soft:#12394A; --success:#4ADE80; --success-soft:#143A27; --warning:#FBBF24; --warning-soft:#3B2E10; --danger:#FB7185; --danger-soft:#44182B; --track:#334155; --track-ink:#94A3B8; --plan:#475569; --grad:linear-gradient(135deg,#6D5FF5 0%,#4338CA 100%); --toast-bg:#334155; --backdrop:rgba(2,6,23,.7); --shadow-btn:0 10px 22px -6px rgba(91,76,240,.6); color-scheme:dark; } :root[data-theme="light"]{color-scheme:light;} /* Chỉ bật chuyển màu lúc người dùng đổi Sáng/Tối — không tốn khi cuộn */ .theme-anim,.theme-anim *{transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s!important;} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{height:100%;} body{ margin:0;background:var(--pattern),var(--bg-primary);color:var(--ink);font-family:var(--font-sans); -webkit-font-smoothing:antialiased;overscroll-behavior-y:none; word-spacing:.1em; /* Plus Jakarta Sans có khoảng trắng hẹp — nới ra cho tiếng Việt dễ đọc */ } button,input,select,textarea{font-family:var(--font-sans);word-spacing:inherit;} #app{display:flex;flex-direction:column;height:100dvh;max-width:520px;margin:0 auto;background:var(--pattern),var(--bg-primary);} /* ---------- Screens ---------- */ .screen{display:none;flex:1;flex-direction:column;overflow:hidden;} .screen.active{display:flex;} .staff-workspace,.crew-workspace{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden;} .staff-content{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden;} .staff-panel{flex:1;min-width:0;min-height:0;overflow-y:auto;} .staff-panel.active{display:block;} .staff-items-panel.active{display:flex;flex-direction:column;overflow:hidden;} .staff-panel[hidden],.crew-tab-panel[hidden]{display:none!important;} /* ---------- Login ---------- */ #loginScreen{align-items:center;justify-content:center;padding:32px;text-align:center;position:relative;isolation:isolate;overflow:hidden;} /* Khối gradient + vòng tròn đồng tâm phía sau form đăng nhập */ #loginScreen::before{content:"";position:absolute;inset:0 0 auto;height:46%;z-index:-1; background:radial-gradient(circle at 88% 8%,transparent 0 70px,rgba(255,255,255,.1) 71px 98px,transparent 99px 150px,rgba(255,255,255,.07) 151px 178px,transparent 179px),var(--grad); border-radius:0 0 40px 40px;} #loginScreen .login-sub{color:var(--on-grad-soft);} .login-logo{display:block;width:min(290px,86vw);height:auto;margin:0 auto 26px;object-fit:contain;} .login-logo.compact{width:min(220px,72vw);margin-bottom:24px;} .logo-on-dark{display:none;} .login-title{font-size:24px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em;} .login-sub{font-size:13px;color:var(--ink-soft);margin-bottom:28px;} .login-form{width:100%;display:flex;flex-direction:column;gap:12px;background:var(--paper); border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);} input[type=email],input[type=password],input[type=text],input[type=tel],input[type=number],input[type=date],select,textarea{ border:1.5px solid var(--line);border-radius:var(--radius-input);padding:13px 14px;font-size:15px; background:var(--paper);color:var(--ink);width:100%;outline:none;transition:border-color .15s,box-shadow .15s; } input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft);} /* ---------- Nút: pill, đậm, gradient nổi bật ---------- */ .btn{ border:none;border-radius:var(--pill);padding:14px 22px;font-size:15px;font-weight:700;cursor:pointer; transition:transform .12s,box-shadow .15s,background-color .15s,filter .15s; } .btn:active{transform:scale(.97);} .btn:focus-visible,.icon-btn:focus-visible,.chip:focus-visible,.fab:focus-visible, .bottom-nav button:focus-visible,.crew-tabs button:focus-visible,.seg-switch button:focus-visible{ outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:2px;} .btn-primary{background:var(--grad);color:var(--on-grad);box-shadow:var(--shadow-btn);} .btn-primary:hover{filter:brightness(1.07);} .btn-primary:active{box-shadow:0 4px 10px -4px rgba(79,63,230,.6);} .btn-primary:disabled{background:var(--track);color:var(--ink-faint);box-shadow:none;filter:none;transform:none;cursor:not-allowed;} .btn-ghost{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);} .btn-ghost:hover{border-color:var(--primary);color:var(--primary-strong);} .btn-danger{background:linear-gradient(135deg,#F43F5E,#C81E43);color:#fff;box-shadow:0 10px 22px -8px rgba(209,42,74,.6);} .btn-block{width:100%;} .login-error{color:var(--danger);font-size:12.5px;min-height:16px;} .login-share-link{margin-top:22px;font-size:12.5px;color:var(--ink-faint);} .login-share-link a{color:var(--primary-strong);font-weight:600;} /* ---------- Header ---------- */ .app-header{ padding-top:calc(16px + var(--safe-top));padding-bottom:18px;padding-left:18px;padding-right:18px; display:flex;align-items:center;justify-content:space-between;gap:10px; position:relative;z-index:1;overflow:hidden;color:var(--on-grad); background:radial-gradient(circle at 92% -10%,transparent 0 46px,rgba(255,255,255,.12) 47px 64px,transparent 65px 98px,rgba(255,255,255,.08) 99px 116px,transparent 117px),var(--grad); border-radius:0 0 28px 28px;box-shadow:0 10px 26px -12px rgba(67,56,202,.55); } .header-left{display:flex;align-items:center;gap:10px;min-width:0;} .header-logo{display:block;height:34px;width:auto;object-fit:contain;flex:none;} .header-logo.logo-mark{display:none;height:40px;} .header-left > div{min-width:0;} .header-title{font-weight:800;font-size:17px;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .header-sub{font-size:11px;color:var(--on-grad-soft);} .header-user{max-width:128px;color:var(--on-grad-soft);font-weight:600;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Tên ở đầu trang = nút mở "Cài đặt tài khoản" */ button.header-user{display:block;background:none;border:0;padding:4px 0;margin:0;font-family:inherit;text-align:right;min-width:0;cursor:pointer; text-decoration:underline dotted rgba(255,255,255,.45);text-underline-offset:3px;} button.header-user:hover{color:var(--on-grad);} /* Nhóm phải (chấm online · 🔔 · tên · Đăng xuất): tên co lại "…" khi màn hẹp, không đè logo */ .header-left{flex:none;} .app-header > div:last-child{min-width:0;} .app-header > div:last-child > *{flex:none;} .app-header > div:last-child > .header-user{flex:0 1 auto;} .online-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(255,255,255,.28);} .online-dot.off{background:#FB7185;box-shadow:0 0 0 3px rgba(255,255,255,.28);} .logout-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);color:var(--on-grad);font-size:12px;font-weight:700; cursor:pointer;white-space:nowrap;border-radius:var(--pill);padding:7px 12px;font-family:inherit;} .logout-btn:hover{background:rgba(255,255,255,.24);} .push-btn{font-size:16px;line-height:1;padding:6px 8px;} /* ---------- Project bar ---------- */ .project-bar{ padding:14px 18px 6px;display:flex;gap:8px;align-items:center; } .project-bar select{flex:1;font-weight:700;font-size:14px;border-radius:var(--pill);padding:11px 16px;box-shadow:var(--shadow-sm);} .project-bar .icon-btn:not(.new-project-btn){background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm);} .project-closed-note{margin:4px 0 10px;padding:10px 14px;border-radius:var(--radius);background:var(--success-soft);color:var(--success);font-size:13px;font-weight:600;} .icon-btn.new-project-btn{ flex:none;white-space:nowrap;background:var(--grad);color:#fff;border:0;border-radius:var(--pill); padding:11px 15px;font-size:13px;font-weight:800;box-shadow:var(--shadow-btn); } .icon-btn.new-project-btn:hover{filter:brightness(1.07);} .new-project-btn:active{box-shadow:none;transform:scale(.96);} .new-project-btn:focus-visible{outline:3px solid var(--primary-soft);outline-offset:2px;} .items-view-switch{display:flex;gap:4px;margin:8px 18px 4px;padding:4px;background:var(--paper);border-radius:var(--pill);box-shadow:var(--shadow-sm);} .items-view-switch button{flex:1;border:0;background:transparent;color:var(--ink-soft);padding:10px 12px;border-radius:var(--pill);font-size:13px;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s;} .items-view-switch button.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn);} .items-view-switch button:focus-visible,.timeline-row:focus-visible,.timeline-unscheduled:focus-visible{outline:3px solid var(--primary-soft);outline-offset:2px;border-color:var(--primary);} /* ---------- Stats strip ---------- */ .stats-strip{display:flex;gap:10px;padding:14px 18px;overflow-x:auto;} .stat-chip{ flex:1;min-width:108px;background:var(--paper);border-radius:var(--radius-md); padding:14px 16px;box-shadow:var(--shadow-sm); } .stat-chip:first-child{background:var(--grad);color:var(--on-grad);box-shadow:var(--shadow-btn); background-image:radial-gradient(circle at 100% 0,transparent 0 26px,rgba(255,255,255,.14) 27px 36px,transparent 37px 52px,rgba(255,255,255,.09) 53px 62px,transparent 63px),var(--grad);} .stat-chip:first-child .k{color:var(--on-grad-soft);} .stat-chip .k{font-size:11px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;} .stat-chip .v{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;} .stat-chip .v.negative{color:var(--danger);} .badge{display:inline-block;padding:5px 11px;border-radius:var(--pill);font-size:12px;font-weight:700;} .badge.onTrack{background:var(--primary-soft);color:var(--primary-strong);} .badge.delayed{background:var(--danger-soft);color:var(--danger);} .badge.ahead{background:var(--success-soft);color:var(--success);} .badge.notStarted{background:var(--track);color:var(--track-ink);} /* ---------- Task / item list ---------- */ .list-wrap{flex:1;overflow-y:auto;padding:6px 18px 100px;} .crew-hint{font-size:13px;color:var(--ink-soft);margin:-2px 0 8px;} .section-label{font-size:13px;font-weight:800;color:var(--ink);margin:18px 0 10px;display:flex;justify-content:space-between;align-items:center;} .task-card{ background:var(--paper);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow); } .task-top{display:flex;align-items:center;justify-content:space-between;gap:8px;} .task-name{font-weight:700;font-size:15px;flex:1;} .task-meta{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums;margin-top:3px;} .progress-track{height:10px;background:var(--track);border-radius:var(--pill);margin-top:12px;overflow:hidden;} .progress-fill{height:100%;border-radius:var(--pill);transition:width .25s;} .progress-fill.onTrack{background:var(--grad);} .progress-fill.delayed{background:var(--danger);} .progress-fill.ahead{background:var(--success);} .progress-fill.notStarted{background:var(--track-ink);opacity:.5;} .task-edit{display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);gap:10px;flex-direction:column;} .task-card.open .task-edit{display:flex;} .row-inline{display:flex;gap:8px;} .row-inline > *{flex:1;min-width:0;} .row-inline input{min-width:0;} .slider-row{display:flex;align-items:center;gap:10px;} .slider-row input[type=range]{flex:1;accent-color:var(--primary);} .slider-val{font-weight:700;font-size:13px;width:38px;text-align:right;font-variant-numeric:tabular-nums;} .task-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px;} .icon-btn{border:none;background:transparent;color:var(--ink-soft);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:var(--pill);cursor:pointer;font-family:inherit;transition:background-color .15s;} .icon-btn.danger:active{background:var(--danger-soft);color:var(--danger);} .empty-hint{text-align:center;color:var(--ink-faint);font-size:13px;padding:40px 20px;} /* ---------- Cảnh báo ---------- */ .alert-item{display:flex;gap:10px;align-items:flex-start;background:var(--paper); border-left:5px solid var(--primary);border-radius:var(--radius-md);padding:13px 15px;margin-bottom:10px;font-size:13px;box-shadow:var(--shadow-sm);} .alert-item.warning{border-left-color:var(--warning);} .alert-item.critical{border-left-color:var(--danger);background:var(--danger-soft);} .alert-item.info{border-left-color:var(--success);} .alert-item .msg{flex:1;line-height:1.4;} .alert-item .ack{border:none;background:none;color:var(--ink-faint);font-size:16px;cursor:pointer;padding:2px 4px;} /* ---------- Dashboard đa công trình ---------- */ .project-summary-card{background:var(--paper);border-radius:var(--radius);padding:18px 18px;margin-bottom:14px;box-shadow:var(--shadow);} .project-summary-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;} .project-summary-name{font-weight:800;font-size:16px;letter-spacing:-.01em;} .project-summary-client{font-size:11.5px;color:var(--ink-soft);} .wp-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line);} .wp-row:first-child{border-top:none;} .wp-trade{font-size:12.5px;font-weight:600;width:64px;flex-shrink:0;} .wp-mini-track{flex:1;height:7px;background:var(--track);border-radius:var(--pill);overflow:hidden;} .wp-mini-fill{height:100%;border-radius:var(--pill);} .wp-pct{font-size:11.5px;width:34px;text-align:right;font-variant-numeric:tabular-nums;} .wp-warn{font-size:11px;color:var(--danger);margin-left:6px;white-space:nowrap;} /* ---------- Dashboard quản lý ---------- */ .seg-switch{display:inline-flex;gap:4px;margin:4px 0 12px;background:var(--paper);border-radius:var(--pill);padding:4px;box-shadow:var(--shadow-sm);} .seg-switch button{border:0;background:transparent;padding:8px 16px;border-radius:var(--pill);font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;font-family:inherit;} .seg-switch button.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn);} .kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px;} .kpi{position:relative;overflow:hidden;background:var(--paper);border:0;border-radius:var(--radius);padding:16px 16px 14px; text-align:left;font:inherit;color:var(--ink);box-shadow:var(--shadow);} button.kpi{cursor:pointer;transition:transform .12s,box-shadow .15s;} button.kpi:hover{box-shadow:0 16px 36px rgba(67,56,202,.18);} button.kpi:active{transform:scale(.97);} .kpi-label{font-size:12px;font-weight:700;color:var(--ink-soft);} .kpi-value{font-size:34px;font-weight:800;line-height:1.1;margin-top:6px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;} .kpi-unit{font-size:11.5px;font-weight:600;color:var(--ink-faint);} .kpi.warning::after,.kpi.critical::after{content:"";position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--warning);box-shadow:0 0 0 4px var(--warning-soft);} .kpi.critical::after{background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft);} .kpi.critical .kpi-value{color:var(--danger);} /* Ô KPI đầu tiên = khối gradient nổi bật với vòng tròn đồng tâm (như mẫu) */ .kpi-row > .kpi:first-child{color:var(--on-grad);box-shadow:var(--shadow-btn); background:radial-gradient(circle at 100% 0,transparent 0 30px,rgba(255,255,255,.15) 31px 42px,transparent 43px 62px,rgba(255,255,255,.1) 63px 74px,transparent 75px 96px,rgba(255,255,255,.06) 97px 108px,transparent 109px),var(--grad);} .kpi-row > .kpi:first-child .kpi-label,.kpi-row > .kpi:first-child .kpi-unit{color:var(--on-grad-soft);} @media (max-width:420px){.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));}} .dash-grid{display:flex;flex-direction:column;} .dash-panel{background:var(--paper);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow);} .project-summary-card[data-open-project]{cursor:pointer;border-left:5px solid var(--success);transition:transform .12s,box-shadow .15s;} .project-summary-card[data-open-project]:hover{box-shadow:0 16px 36px rgba(67,56,202,.18);} .project-summary-card[data-open-project]:active{transform:scale(.99);} .project-summary-card:focus-visible{outline:3px solid var(--primary-soft);outline-offset:2px;} .project-summary-card.risk-warning{border-left-color:var(--warning);} .project-summary-card.risk-critical{border-left-color:var(--danger);} .risk-badge{flex:none;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--pill);white-space:nowrap;} .risk-badge.good,.risk-badge.done{background:var(--success-soft);color:var(--success);} .risk-badge.warning{background:var(--warning-soft);color:var(--warning);} .risk-badge.critical{background:var(--danger-soft);color:var(--danger);} .project-summary-client .neg{color:var(--danger);} .proj-progress{display:flex;align-items:center;gap:12px;margin:4px 0 8px;} .proj-pct{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;width:74px;} .proj-pct small{font-size:13px;font-weight:600;color:var(--ink-soft);} .proj-progress-meta{font-size:11.5px;color:var(--ink-soft);margin-top:5px;} .gap{font-weight:700;color:var(--ink-soft);} .gap.behind{color:var(--danger);} .gap.ahead{color:var(--success);} /* Thanh kép: nền nhạt = kế hoạch đáng đạt hôm nay, lõi = thực tế */ .dual-bar{position:relative;height:12px;background:var(--track);border-radius:var(--pill);overflow:hidden;} .wp-row .dual-bar{height:7px;margin-top:4px;} .dual-plan{position:absolute;inset:0 auto 0 0;background:var(--plan);border-radius:var(--pill);} .dual-actual{position:absolute;inset:0 auto 0 0;border-radius:var(--pill);background:var(--success);box-shadow:2px 0 0 var(--paper);} .dual-actual.warning{background:var(--warning);} .dual-actual.critical{background:var(--danger);} .dash-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;} .dash-chip{font:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--pill);background:var(--primary-soft);color:var(--primary-strong);border:0;} button.dash-chip{cursor:pointer;} .dash-chip.warning{background:var(--warning-soft);color:var(--warning);} .dash-chip.critical{background:var(--danger-soft);color:var(--danger);} .proj-quiet{font-size:12px;color:var(--warning);font-weight:600;margin-bottom:6px;} .proj-packages{margin-top:4px;} .wp-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .dash-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--ink-soft);margin:6px 0 10px;} .dash-legend i{display:inline-block;width:14px;height:8px;border-radius:3px;margin-right:5px;vertical-align:middle;} .dash-legend .lg-plan{background:var(--plan);} .dash-legend .lg-actual{background:var(--success);} .dash-table{width:100%;border-collapse:collapse;font-size:12.5px;} .dash-table th{text-align:left;font-size:10.5px;font-weight:600;color:var(--ink-soft);padding:4px 4px 6px;} .dash-table td{padding:7px 4px;border-top:1px dashed var(--line);font-variant-numeric:tabular-nums;vertical-align:top;} .dash-table td.bad{color:var(--danger);font-weight:700;} .act-wrap{position:relative;} .act-head{font-size:12px;color:var(--ink-soft);margin-bottom:8px;} .act-head b{color:var(--ink);font-size:15px;} .act-chart{width:100%;height:84px;display:block;} .act-hit{fill:transparent;cursor:pointer;} .act-bar{fill:var(--primary);} .act-zero{fill:var(--line);} .act-col.on .act-bar{fill:var(--primary-strong);} .act-col.on .act-hit{fill:var(--primary-soft);} .act-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-faint);margin-top:4px;} .act-tip{font-size:12px;color:var(--ink);background:var(--bg);border-radius:var(--radius-input);padding:6px 9px;margin-top:6px;} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* ---------- Hộp duyệt ---------- */ .approval-card{background:var(--paper);border:2px solid transparent;border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);} .approval-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;} .approval-item-name{font-weight:800;font-size:15px;} .approval-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;} .approval-stale-flag{background:var(--danger-soft);color:var(--danger);font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:var(--pill);} /* Khung ảnh báo cáo (js/gallery.js): 1 ảnh lớn · 4 ảnh lưới 2×2 · còn lại slide */ .pg{position:relative;margin:12px 0;} .pg img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;-webkit-user-select:none;user-select:none; background:linear-gradient(100deg,var(--track) 30%,color-mix(in srgb,var(--track) 55%,var(--paper)) 50%,var(--track) 70%) 0 0/300% 100%; animation:pg-shimmer 1.3s linear infinite;} .pg img.loaded{animation:none;background:var(--track);} @keyframes pg-shimmer{from{background-position:100% 0;}to{background-position:0 0;}} @media (prefers-reduced-motion:reduce){.pg img{animation:none;}} .pg-single{aspect-ratio:4/3;border-radius:18px;overflow:hidden;} .pg-grid4{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:18px;overflow:hidden;background:var(--paper);} .pg-grid4 img{aspect-ratio:1;} .pg-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:18px;} .pg-track::-webkit-scrollbar{display:none;} .pg-slide{flex:0 0 86%;aspect-ratio:4/3;scroll-snap-align:start;border-radius:18px;overflow:hidden;} .pg-slide:last-child{scroll-snap-align:end;} .pg-count{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:var(--pill);font-size:11.5px;font-weight:700; color:#fff;background:rgba(15,14,36,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); font-variant-numeric:tabular-nums;pointer-events:none;} .pg-dots{display:flex;justify-content:center;gap:5px;margin-top:9px;} .pg-dots i{width:6px;height:6px;border-radius:var(--pill);background:var(--line);transition:width .2s,background-color .2s;} .pg-dots i.on{width:18px;background:var(--primary);} .pg-nav{display:none;position:absolute;top:calc(50% - 12px);transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%; background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(15,14,36,.22);font-family:inherit;} .pg-nav.prev{left:8px;} .pg-nav.next{right:8px;} .pg-nav[hidden]{display:none!important;} .approval-note{font-size:13px;color:var(--ink);background:var(--bg);border-radius:var(--radius-input);padding:10px 12px;margin:8px 0;} .approval-qty-row{display:flex;align-items:center;gap:8px;margin:10px 0;} .approval-qty-row input{width:100px;} .approval-actions{display:flex;gap:8px;margin-top:12px;} .approval-actions .btn{flex:1;} .reported-by{font-size:11px;color:var(--ink-faint);margin-top:4px;} /* Duyệt hàng loạt + lọc công trình */ .approvals-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;} .approvals-toolbar:empty{display:none;} .approvals-toolbar select{flex:1 1 200px;width:auto;padding:11px 16px;font-size:14px;border-radius:var(--pill);} .approvals-toolbar .btn{flex:1 1 180px;padding:11px 14px;font-size:14px;} .bulk-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);white-space:nowrap;} .bulk-toggle input,.approval-check input{width:20px;height:20px;accent-color:var(--primary-strong);} .approval-check{display:flex;padding:2px 10px 0 0;cursor:pointer;} .approval-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);} .task-meta.qty-over{color:var(--warning);font-weight:600;} /* Chip chọn nhanh (lý do trả lại, ghi chú mẫu, số lượng nhanh) */ .chip-row{display:flex;flex-wrap:wrap;gap:6px;} .chip{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:var(--pill);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .1s;} .chip:active{transform:scale(.95);} .chip:active,.chip.active{background:var(--grad);border-color:transparent;color:#fff;} /* Vướng mắc */ .issue-card{background:var(--paper);border-left:5px solid var(--warning);border-radius:var(--radius);padding:15px 18px;margin-bottom:12px;box-shadow:var(--shadow);} .issue-card.blocking{border-left-color:var(--danger);} .issue-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .issue-kind{font-weight:700;font-size:13.5px;} .issue-flag{background:var(--danger-soft);color:var(--danger);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--pill);} .issue-age{margin-left:auto;font-size:11px;color:var(--ink-faint);} .issue-project{font-size:12px;color:var(--ink-soft);margin-top:3px;} .issue-resolve{display:flex;gap:8px;margin-top:10px;} .issue-resolve input{flex:1;padding:10px 12px;font-size:14px;} .issue-resolve .btn{flex:none;padding:10px 14px;font-size:13.5px;} .notice-warning{background:var(--warning-soft);color:var(--warning);border-radius:var(--radius-md);padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:10px;} .empty-hint.compact{padding:14px 10px;} /* Tab Công việc — thao tác hạng mục, sửa nhanh */ .task-actions.wrap{flex-wrap:wrap;justify-content:flex-start;gap:2px;margin-top:8px;} .icon-btn.strong{color:var(--primary-strong);font-weight:700;} .icon-btn:hover{background:var(--bg);} [data-action=toggle-edit].task-top{cursor:pointer;} .task-edit .btn.quick-save{flex:none;padding:9px 18px;font-size:13.5px;} .package-card{border-color:var(--primary);} /* Wizard tạo công trình */ .wizard-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:wz;} .wizard-steps li{flex:1;counter-increment:wz;font-size:11.5px;font-weight:700;color:var(--ink-faint); border-top:4px solid var(--line);border-radius:2px;padding-top:7px;} .wizard-steps li::before{content:counter(wz) ". ";} .wizard-steps li.active{color:var(--primary-strong);border-color:var(--primary);} .wizard-steps li.done{color:var(--success);border-color:var(--success);} .wizard-body{display:flex;flex-direction:column;gap:12px;} .wz-team{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--bg);} .wz-team-head{display:flex;gap:8px;align-items:center;} .wz-team-head select{flex:1;font-weight:700;} .wz-summary,.wz-preview-team{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px;} .wz-rows{margin:8px 0 0;padding-left:20px;font-size:12.5px;line-height:1.7;} .wz-rows span{color:var(--ink-faint);font-variant-numeric:tabular-nums;margin-left:4px;} .wz-link{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line);} .wz-link-label{flex:1;font-size:13.5px;font-weight:600;} .wz-link .btn{flex:none;padding:9px 14px;font-size:13px;} .notice-success{background:var(--success-soft);color:var(--success);border-radius:var(--radius-md);padding:10px 12px;font-size:14px;font-weight:700;} /* Dán từ Excel */ .paste-table{width:100%;border-collapse:collapse;font-size:12.5px;} .paste-table th{text-align:left;font-size:11px;color:var(--ink-soft);padding:4px 6px;border-bottom:1px solid var(--line);} .paste-table td{padding:6px;border-bottom:1px dashed var(--line);vertical-align:top;font-variant-numeric:tabular-nums;} .paste-table tr.bad td{background:var(--danger-soft);} .paste-err{color:var(--danger);font-size:11px;margin-top:2px;} /* Link đội + thành viên */ .link-row,.member-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px dashed var(--line);} .link-row-info{flex:1;min-width:0;} .link-row-name{font-size:13.5px;font-weight:600;} .member-check{flex:1;display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;} .member-check input{width:20px;height:20px;accent-color:var(--primary-strong);} .member-row select{width:auto;padding:7px 10px;font-size:13px;} .member-role{font-size:12px;color:var(--ink-soft);} .zalo-btn{flex:none;display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--pill);background:var(--primary-soft); color:var(--primary-strong);font-size:12px;font-weight:800;text-decoration:none;} .zalo-btn:hover{background:var(--primary);color:#fff;} .profile-zalo{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:none;} .profile-zalo[hidden]{display:none;} /* Lightbox dùng chung (js/lightbox.js) */ .lightbox .lb-btn{position:absolute;border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:50%; width:46px;height:46px;font-size:26px;line-height:1;cursor:pointer;} .lightbox .lb-close{top:calc(14px + var(--safe-top));right:14px;font-size:20px;} .lightbox .lb-prev{left:10px;top:50%;transform:translateY(-50%);} .lightbox .lb-next{right:10px;top:50%;transform:translateY(-50%);} .lightbox .lb-counter{position:absolute;bottom:calc(18px + var(--safe-bottom));left:0;right:0;text-align:center;color:#fff;font-size:13px;} /* ---------- FAB + bottom nav ---------- */ .fab{ position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(84px + var(--safe-bottom)); width:60px;height:60px;border-radius:50%;background:var(--grad);color:#fff;border:none; font-size:26px;box-shadow:var(--shadow-btn),0 0 0 4px color-mix(in srgb,var(--paper) 70%,transparent);cursor:pointer;z-index:20; transition:transform .12s; } .fab:active{transform:scale(.92);} /* Nút báo vướng mắc (màn thợ, không có thanh điều hướng dưới) → nổi sát góc dưới-phải */ .fab.secondary{bottom:calc(20px + var(--safe-bottom));width:54px;height:54px;font-size:22px; background:linear-gradient(135deg,#F43F5E,#D12A4A);box-shadow:0 10px 22px -6px rgba(209,42,74,.6),0 0 0 4px color-mix(in srgb,var(--paper) 70%,transparent);} .bottom-nav{ display:flex;gap:4px;background:var(--paper);padding:8px 10px calc(8px + var(--safe-bottom)); border-radius:26px 26px 0 0;box-shadow:0 -8px 28px rgba(67,56,202,.10);position:relative;z-index:2; } .bottom-nav button{ flex:1;border:none;background:none;padding:8px 0 7px;font-size:11px;font-weight:600;color:var(--ink-faint); display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font-family:inherit; position:relative;border-radius:18px;transition:background-color .15s,color .15s; } .bottom-nav button.active{color:var(--primary-strong);font-weight:800;background:var(--primary-soft);} .bottom-nav .ic{display:block;width:26px;height:26px;filter:saturate(.2) opacity(.6);transition:filter .2s,transform .2s;} .bottom-nav button.active .ic{filter:none;transform:translateY(-1px) scale(1.1);} .bottom-nav .dot{position:absolute;top:6px;right:calc(50% - 20px);width:8px;height:8px;border-radius:50%;background:var(--danger);} /* ---------- Modal ---------- */ .modal-backdrop{ position:fixed;inset:0;background:var(--backdrop);display:none;align-items:flex-end;z-index:50; } .modal-backdrop.show{display:flex;} .modal-sheet{ background:var(--paper);width:100%;max-width:520px;margin:0 auto;border-radius:28px 28px 0 0; padding:24px 20px calc(24px + var(--safe-bottom));box-shadow:0 -12px 40px rgba(15,14,36,.18);display:flex;flex-direction:column;gap:12px; max-height:85vh;overflow-y:auto; } .modal-title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:2px;} .modal-actions{display:flex;gap:10px;margin-top:6px;} .modal-actions .btn{flex:1;} .field-label{font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;display:block;} .field-hint{font-size:11.5px;color:var(--ink-soft);margin-top:5px;line-height:1.45;} /* Toast */ .toast{ position:fixed;left:50%;bottom:calc(90px + var(--safe-bottom));transform:translateX(-50%) translateY(20px); background:var(--toast-bg);color:#fff;padding:12px 20px;border-radius:var(--pill);font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(15,14,36,.3); opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:85%;text-align:center; } .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .toast.error{background:var(--danger);} /* ============================================================ MÀN HÌNH THẦU PHỤ / CÔNG NHÂN (crew.html) — chữ to, ít thao tác, thiết kế cho thợ đứng ngoài công trường, không phải bàn làm việc. ============================================================ */ .crew-page{padding:18px 18px calc(100px + var(--safe-bottom));} .crew-content{min-width:0;min-height:0;} .crew-content .crew-page{padding-left:0;padding-right:0;} .crew-item-picker{margin-bottom:18px;} .crew-item-card{ background:var(--paper);border:2px solid transparent;border-radius:var(--radius);padding:18px;margin-bottom:12px; cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .15s; } .crew-item-card:active{transform:scale(.98);} .crew-item-card.selected{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft),var(--shadow);} .crew-form{background:var(--paper);border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow);} .crew-field label{font-size:14px;font-weight:700;margin-bottom:8px;display:block;} .crew-field input,.crew-field textarea{font-size:17px;padding:16px;} .crew-photo-btn{ border:2px dashed var(--primary);border-radius:20px;background:var(--primary-soft);color:var(--primary-strong); padding:22px;text-align:center;font-weight:800;font-size:15px;cursor:pointer;transition:transform .12s; } .crew-photo-btn:active{transform:scale(.98);} .crew-photo-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;} .crew-photo-preview .thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--track);} .crew-photo-preview img{width:100%;height:100%;object-fit:cover;} .crew-photo-preview .thumb-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%; text-align:center;font-size:11.5px;font-weight:600;color:var(--ink-soft);padding:6px;} .crew-photo-preview .rm{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:none; border-radius:50%;width:22px;height:22px;font-size:13px;line-height:1;cursor:pointer;} .crew-submit-btn{font-size:17px;font-weight:800;letter-spacing:.02em;padding:19px;} .crew-history-item{background:var(--paper);border-radius:var(--radius-md);padding:16px;margin-bottom:10px;box-shadow:var(--shadow-sm);} .crew-status-pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--pill);} .crew-status-pill.pending{background:var(--warning-soft);color:var(--warning);} .crew-status-pill.approved{background:var(--success-soft);color:var(--success);} .crew-status-pill.rejected{background:var(--danger-soft);color:var(--danger);} .crew-tabs{display:flex;gap:4px;margin:14px 18px 0;padding:4px;background:var(--paper);border-radius:var(--pill);box-shadow:var(--shadow-sm);} .crew-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 11px;border-radius:var(--pill);border:0;background:transparent;color:var(--ink-soft);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:background-color .15s,color .15s;} .crew-tabs button.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn);} .tab-ic{flex:none;width:26px;height:26px;filter:saturate(.2) opacity(.6);transition:filter .2s;} /* Tab đang chọn nền gradient tím: đặt icon trên đĩa trắng để viền đen không chìm */ .crew-tabs button.active .tab-ic{filter:none;background:#fff;border-radius:50%;padding:2px;width:30px;height:30px;margin:-2px 0;} .crew-group-label{font-size:12px;font-weight:700;color:var(--ink-soft);margin:14px 0 8px;} .crew-group-label:first-child{margin-top:0;} .crew-group-label.late{color:var(--danger);} .crew-done-group summary{font-size:13px;font-weight:600;color:var(--ink-soft);padding:10px 0;cursor:pointer;} .crew-form-item{font-size:13px;color:var(--primary-strong);font-weight:600;margin-top:3px;} .crew-outbox-banner{background:var(--warning-soft);color:var(--ink);border:1px solid var(--warning);border-radius:var(--radius-md); padding:12px 14px;margin:14px 0 0;font-size:14px;line-height:1.45;} .crew-outbox-banner .outbox-actions{display:flex;gap:8px;margin-top:10px;} .crew-outbox-banner .btn{flex:1;padding:11px;font-size:14px;} .crew-sent-banner{border-radius:var(--radius-md);padding:13px 15px;margin:14px 0 0;font-size:15px;font-weight:600;line-height:1.45; background:var(--success-soft);color:var(--success);border:1px solid var(--success);} .crew-sent-banner.queued{background:var(--warning-soft);color:var(--ink);border-color:var(--warning);} .crew-status-pill.queued{background:var(--warning-soft);color:var(--warning);} .crew-photo-btn.compact{padding:12px;font-size:14px;display:block;} .resend-btn{width:100%;margin-top:10px;padding:11px;font-size:14px;} .field-hint.warn{color:var(--warning);font-weight:600;} .crew-app .chip{padding:10px 14px;font-size:14px;} /* iOS tự phóng to khi ô nhập < 16px — khó chịu khi đứng ngoài công trường */ .crew-app .modal-sheet input,.crew-app .modal-sheet select,.crew-app .modal-sheet textarea{font-size:16px;} /* ============================================================ MÀN HÌNH CHỦ NHÀ (client.html) ============================================================ */ .client-stage-card{background:var(--paper);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);} .client-scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:calc(20px + var(--safe-bottom));} .client-workspace{padding:0 18px;} .client-photo-album{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 0 80px;} .client-photo-album img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:var(--track);cursor:pointer;} .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:80;} .lightbox.show{display:flex;} .lightbox img{max-width:94vw;max-height:88vh;border-radius:16px;} /* ============================================================ TIMELINE DỰ ÁN — Gantt rút gọn, không cuộn ngang ============================================================ */ .timeline{--timeline-label-height:32px;} .timeline-axis{position:relative;height:var(--timeline-label-height);margin:2px 0 8px;border-bottom:1px solid var(--line);} .timeline-axis-label{position:absolute;bottom:3px;transform:translateX(-50%);font-size:10px;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums;} .timeline-axis-label:first-child{transform:none;} .timeline-today-label{position:absolute;top:2px;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--danger);white-space:nowrap;} .timeline-group{background:var(--paper);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow);} .timeline-group-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;} .timeline-group-title{font-size:15px;font-weight:800;} .timeline-group-subtitle{font-size:11px;color:var(--ink-soft);margin-top:2px;} .timeline-row{display:block;width:100%;min-height:72px;margin:0;padding:10px 0;border:0;border-top:1px dashed var(--line);background:transparent;color:var(--ink);text-align:left;cursor:pointer;} .timeline-row:first-of-type{border-top:0;} .timeline-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;} .timeline-row-name{min-width:0;font-size:13.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .timeline-row-pct{flex:none;font-size:12px;font-weight:750;color:var(--primary-strong);font-variant-numeric:tabular-nums;} .timeline-track{position:relative;display:block;height:18px;margin-top:8px;background:var(--track);border-radius:var(--pill);overflow:hidden;} .timeline-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line);} .timeline-today{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:4;} .timeline-bar{position:absolute;top:3px;height:12px;left:var(--tl-left);width:var(--tl-width);min-width:5px;border:1px solid color-mix(in srgb,var(--primary) 70%,white);border-radius:var(--pill);background:var(--primary-soft);overflow:visible;z-index:2;} .timeline-fill{display:block;height:100%;width:var(--tl-fill);max-width:100%;border-radius:var(--pill);background:var(--primary);} .timeline-expected{position:absolute;top:-3px;bottom:-3px;left:var(--tl-expected);width:2px;background:var(--ink);opacity:.7;z-index:3;} .timeline-row.is-warning .timeline-bar{border-color:var(--warning);background:var(--warning-soft);} .timeline-row.is-warning .timeline-fill{background:var(--warning);} .timeline-row.is-delayed .timeline-bar{border-color:var(--danger);background:var(--danger-soft);} .timeline-row.is-delayed .timeline-fill{background:var(--danger);} .timeline-row.is-ahead .timeline-bar,.timeline-row.is-done .timeline-bar{border-color:var(--success);background:var(--success-soft);} .timeline-row.is-ahead .timeline-fill,.timeline-row.is-done .timeline-fill{background:var(--success);} .timeline-row.is-not-started .timeline-fill{background:var(--track-ink);} .timeline-row-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;font-size:10.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;} .timeline-row-meta > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .timeline-signal{flex:none;font-weight:700;} .timeline-signal.warning{color:var(--warning);} .timeline-signal.delayed{color:var(--danger);} .timeline-signal.ahead,.timeline-signal.done{color:var(--success);} .timeline-unscheduled-wrap{margin-top:14px;} .timeline-unscheduled-title{font-size:12px;font-weight:750;color:var(--danger);margin-bottom:6px;} .timeline-unscheduled{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 14px;margin-bottom:6px;border:1.5px dashed var(--line);border-radius:var(--radius-input);font-family:inherit;background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;} .timeline-unscheduled small{color:var(--primary-strong);font-weight:700;} .timeline-error{padding:14px;border:1px solid var(--danger);border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);font-size:13px;} @supports not (color:color-mix(in srgb,black,white)){ .timeline-bar{border-color:var(--primary);} } /* ============================================================ TABLET LỚN / DESKTOP — iPad Pro 12.9" bắt đầu từ 900px. Mobile giữ nguyên thiết kế một cột phía trên. ============================================================ */ @media (min-width:900px){ .staff-app #app,.crew-app #app,.client-app #app{ width:100%;max-width:1600px;margin:0 auto; } .staff-app #loginScreen .login-form{max-width:460px;} .staff-app #loginScreen .login-share-link{max-width:540px;} .app-header{padding:calc(18px + var(--safe-top)) 28px 20px;} .header-logo.logo-wide{height:40px;} .header-user{max-width:280px;font-size:12px;} /* Staff: rail gọn trên iPad dọc. */ .staff-workspace{flex-direction:row;} .staff-content{order:1;} .staff-app .bottom-nav{ order:0;flex:none;width:88px;flex-direction:column;gap:8px;padding:16px 8px; margin:16px 0 16px 16px;border-radius:var(--radius);box-shadow:var(--shadow);align-self:flex-start; } .staff-app .bottom-nav button{ flex:none;width:100%;min-height:70px;padding:10px 4px;border-radius:18px; } .staff-app .bottom-nav button.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn);} .staff-app .bottom-nav button.active .ic{background:#fff;border-radius:50%;padding:2px;transform:none;} .staff-app .bottom-nav .dot{top:10px;right:13px;} .staff-panel .list-wrap{padding:10px 28px 32px;} .project-bar{padding:16px 28px 6px;} .project-bar select{min-width:0;} .project-bar .icon-btn{min-height:44px;} .items-view-switch{margin:8px 28px 4px;max-width:420px;} .items-view-switch button{min-height:42px;} /* Crew: rail + hai vùng chọn đầu việc / nhập báo cáo. */ .crew-workspace{flex-direction:row;} .crew-tabs{ flex:none;width:88px;flex-direction:column;gap:8px;padding:12px 8px; margin:16px 0 16px 16px;border-radius:var(--radius);box-shadow:var(--shadow);align-self:flex-start; } .crew-tabs button{ flex:none;width:100%;min-height:70px;padding:10px 5px;line-height:1.3;border-radius:18px; flex-direction:column;gap:4px;font-size:12px; } .crew-content{padding:10px 28px 32px;} .crew-page{ display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr); gap:24px;align-items:start;padding-top:10px;padding-bottom:32px; } .crew-picker-pane,.crew-form{min-width:0;} .crew-form{position:sticky;top:0;} .crew-app .fab{right:max(28px,calc((100vw - 1600px)/2 + 28px));} .crew-app .fab.secondary{bottom:32px;} /* Client: một vùng cuộn, tiến độ và album đặt song song. */ .client-scroll{padding:0 28px 32px;} .client-scroll .stats-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 0;overflow:visible;} .client-workspace{display:grid;grid-template-columns:minmax(0,3fr) minmax(300px,2fr);gap:24px;padding:0;align-items:start;} .client-panel{min-width:0;} .client-panel .section-label{margin-top:4px;} .client-photo-album{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:24px;} /* Modal desktop/iPad là dialog giữa màn hình, mobile vẫn bottom sheet. */ .modal-backdrop{align-items:center;padding:24px;} .modal-sheet{ max-width:640px;margin:auto;border-radius:28px;padding:28px; max-height:calc(100dvh - 48px); } .toast{bottom:32px;} /* Ảnh báo cáo: 2–3 ảnh xếp 1 hàng, ≥5 ảnh slide 3 ảnh/khung + nút ‹ › */ .pg-single{max-width:380px;} .pg-grid4{max-width:320px;} .pg-slider[data-n="2"] .pg-track,.pg-slider[data-n="3"] .pg-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;overflow:visible;} .pg-slider[data-n="2"] .pg-track{max-width:560px;} .pg-slider[data-n="2"] :is(.pg-count,.pg-dots),.pg-slider[data-n="3"] :is(.pg-count,.pg-dots){display:none;} .pg-slide{flex-basis:calc((100% - 16px)/3);border-radius:14px;} } @media (min-width:900px) and (hover:hover){ .pg-nav{display:block;} } @media (min-width:1500px){ #dashboardProjects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;} #dashboardProjects > .project-summary-card{margin-bottom:0;} } @media (min-width:1100px){ .dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;} .dash-side{position:sticky;top:0;} } @media (min-width:1280px){ /* Bung rail thành sidebar đầy đủ. */ .staff-app .bottom-nav{width:224px;padding:20px 12px;} .staff-app .bottom-nav button{ min-height:48px;flex-direction:row;justify-content:flex-start;gap:12px; padding:12px 14px;font-size:13px;text-align:left; } .staff-app .bottom-nav .ic{width:28px;height:28px;} .staff-app .bottom-nav .dot{top:12px;right:16px;} .crew-tabs{width:224px;padding:20px 12px;} .crew-tabs button{ min-height:48px;text-align:left;padding:12px 14px;font-size:13px; flex-direction:row;justify-content:flex-start;gap:12px; } /* Card dashboard, duyệt, cảnh báo và hạng mục tận dụng hai cột. */ #approvalsList,#alertsList,#issuesList, #packagesList:not(.timeline-view),#crewHistoryList{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start; } #issuesList > .issue-card, #approvalsList > .approval-card, #alertsList > .alert-item, #packagesList:not(.timeline-view) > .task-card, #crewHistoryList > .crew-history-item{margin-bottom:0;} #approvalsList > .empty-hint,#alertsList > .empty-hint,#issuesList > .empty-hint, #packagesList > .empty-hint,#crewHistoryList > .empty-hint{grid-column:1/-1;} .client-photo-album{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:480px){ .project-bar .btn-label{display:none;} /* Đóng / Mở lại chỉ còn biểu tượng, nhường chỗ ô chọn công trình */ } @media (max-width:390px){ .project-bar{padding-left:12px;padding-right:12px;gap:5px;} .items-view-switch,.crew-tabs{margin-left:12px;margin-right:12px;} .project-bar .icon-btn{padding-left:6px;padding-right:6px;font-size:11.5px;} .project-bar .new-project-btn{padding-left:9px;padding-right:9px;font-size:12px;} .list-wrap{padding-left:12px;padding-right:12px;} .timeline-group{padding:12px;} .timeline-row-meta{font-size:10px;} } /* ============================================================ HỆ BỀ MẶT — thẻ viền mực + bóng cứng (đồng bộ icon Filled Outline) Đặt cuối file để đè bóng mờ / nền cũ của từng thành phần. ============================================================ */ .bg-pattern{background:var(--pattern),var(--bg-primary);} .surface-card{background:var(--bg-card);border:2px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-hard);} /* Thẻ */ .login-form,.task-card,.alert-item,.project-summary-card,.kpi,.dash-panel,.approval-card,.issue-card, .crew-item-card,.crew-form,.crew-history-item,.client-stage-card,.timeline-group,.stat-chip{ border:2px solid var(--border-card);box-shadow:var(--shadow-hard);} .kpi-row > .kpi:first-child,.stat-chip:first-child{box-shadow:var(--shadow-hard);} /* Giữ vạch màu trạng thái bên trái */ .alert-item{border-left:6px solid var(--primary);} .alert-item.critical{border-left-color:var(--danger);} .alert-item.warning{border-left-color:var(--warning);} .alert-item.info{border-left-color:var(--success);} .issue-card{border-left:6px solid var(--warning);} .issue-card.blocking{border-left-color:var(--danger);} .approval-card.selected,.crew-item-card.selected{border-color:var(--primary);box-shadow:3px 3px 0 var(--primary);} .crew-item-card:active{transform:translate(1px,1px);box-shadow:var(--shadow-hard-sm);} /* Điều khiển dạng pill */ .items-view-switch,.seg-switch,.crew-tabs,.project-bar select,.project-bar .icon-btn:not(.new-project-btn){ border:1.5px solid var(--border-card);box-shadow:var(--shadow-hard-sm);} /* Ô phụ trong thẻ: nền phẳng, không lộ lưới */ .approval-note,.act-tip,.wz-team,.icon-btn:hover{background:var(--bg-surface);} /* Thanh điều hướng + modal */ .bottom-nav{background:var(--bg-card);border-top:2px solid var(--border-card);box-shadow:none;} .modal-sheet{border:2px solid var(--border-card);border-bottom:0;box-shadow:0 -3px 0 var(--border-card);} @media (min-width:900px){ .staff-app .bottom-nav,.crew-tabs{border:2px solid var(--border-card);box-shadow:var(--shadow-hard);} .modal-sheet{border-bottom:2px solid var(--border-card);box-shadow:var(--shadow-hard);} } /* ---------- Tối: logo navy → bản trắng (logo-full-white.png); icon viền đen có vầng sáng mảnh ôm viền + ánh cyan mờ phía sau để không chìm vào nền ---------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .logo-on-light{display:none;} :root:not([data-theme="light"]) .logo-on-dark{display:block;} :root:not([data-theme="light"]) .bottom-nav .ic,:root:not([data-theme="light"]) .tab-ic{ filter:drop-shadow(0 0 .6px rgba(226,232,240,.85)) drop-shadow(0 0 7px rgba(56,189,248,.28));} :root:not([data-theme="light"]) .bottom-nav button:not(.active) .ic,:root:not([data-theme="light"]) .crew-tabs button:not(.active) .tab-ic{ filter:saturate(.55) opacity(.85) drop-shadow(0 0 .6px rgba(226,232,240,.85)) drop-shadow(0 0 7px rgba(56,189,248,.28));} } :root[data-theme="dark"] .logo-on-light{display:none;} :root[data-theme="dark"] .logo-on-dark{display:block;} :root[data-theme="dark"] .bottom-nav .ic,:root[data-theme="dark"] .tab-ic{ filter:drop-shadow(0 0 .6px rgba(226,232,240,.85)) drop-shadow(0 0 7px rgba(56,189,248,.28));} :root[data-theme="dark"] .bottom-nav button:not(.active) .ic,:root[data-theme="dark"] .crew-tabs button:not(.active) .tab-ic{ filter:saturate(.55) opacity(.85) drop-shadow(0 0 .6px rgba(226,232,240,.85)) drop-shadow(0 0 7px rgba(56,189,248,.28));} /* Nút chọn Sáng/Tối trong "Cài đặt tài khoản" */ /* ---------- Tab Công việc: đầu việc = dòng gọn trong thẻ hạng mục ---------- (đặt sau hệ bề mặt để bỏ viền/bóng thẻ lồng thẻ) */ .package-card .wi-list{margin-top:6px;} .package-card .wi-row{ display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;column-gap:6px; border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent; padding:10px 2px 12px;margin:0;} .package-card .wi-row > .task-top{display:block;min-width:0;} .package-card .wi-row .task-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .package-card .wi-row .task-meta{margin-top:2px;} .package-card .wi-row > .progress-track,.package-card .wi-row > .wi-menu,.package-card .wi-row > .task-edit{grid-column:1/-1;} .progress-track.thin{height:6px;margin-top:8px;} .package-card .wi-row.open{background:var(--bg-surface);border-radius:12px;padding-left:10px;padding-right:10px;border-top-color:transparent;} .wi-more{font-size:18px;line-height:1;padding:4px 10px;color:var(--ink-soft);letter-spacing:.05em;} .wi-more[aria-expanded=true]{background:var(--primary-soft);color:var(--primary-strong);} .wi-menu{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-top:8px;padding:4px; background:var(--bg-surface);border:1.5px solid var(--border-card);border-radius:14px;box-shadow:var(--shadow-hard-sm);} .wi-menu[hidden]{display:none;} .wi-menu .icon-btn{color:var(--ink);} .wi-menu .icon-btn.danger{color:var(--danger);} /* Menu ⋯ của hạng mục nằm cuối hàng nút → xuống dòng riêng, full width */ .task-actions.wrap > .wi-menu{flex-basis:100%;} /* ---------- Trò chuyện theo đầu việc (index.html + crew.html) ---------- */ .chat-btn{position:relative;padding:4px 8px;font-size:16px;line-height:1;} .chat-count{display:inline-block;min-width:18px;padding:2px 5px;margin-left:2px;border-radius:var(--pill); background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;line-height:14px;text-align:center;vertical-align:top;} .chat-count[hidden]{display:none;} .chat-count.dot{min-width:10px;width:10px;height:10px;padding:0;font-size:0;vertical-align:super;} .bottom-nav .nav-count{position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;padding:1px 5px;border-radius:var(--pill); background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;line-height:15px;text-align:center;} .bottom-nav .nav-count[hidden]{display:none;} @media (min-width:900px){ .staff-app .bottom-nav .nav-count{top:6px;left:auto;right:8px;} } @media (min-width:1280px){ .staff-app .bottom-nav .nav-count{top:50%;right:12px;transform:translateY(-50%);} } .chat-inbox-card{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;font-family:inherit;color:var(--ink);cursor:pointer; background:var(--bg-card);border:2px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-hard-sm); padding:12px 14px;margin-bottom:10px;} .chat-inbox-card:active{transform:translate(1px,1px);box-shadow:none;} .chat-inbox-card.unread{border-left:6px solid var(--primary);} .chat-inbox-top{display:flex;align-items:center;justify-content:space-between;gap:8px;} .chat-inbox-item{font-size:14.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .chat-inbox-card.unread .chat-inbox-item{font-weight:800;} .chat-inbox-meta{font-size:12px;color:var(--ink-soft);font-weight:600;} .chat-inbox-last{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-soft);} .chat-inbox-card.unread .chat-inbox-last{color:var(--ink);} .chat-inbox-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .chat-inbox-age{flex:none;font-size:11.5px;color:var(--ink-faint);} .chat-sheet{height:85vh;overflow:hidden;gap:8px;padding-bottom:calc(14px + var(--safe-bottom));} .chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;} .chat-head .modal-title{font-size:18px;} .chat-head-meta{font-size:12.5px;color:var(--ink-soft);font-weight:600;} .chat-sheet .crew-outbox-banner{margin:0;padding:10px 12px;font-size:13.5px;} .chat-thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px; padding:10px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .chat-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:86%;} .chat-msg.mine{align-self:flex-end;align-items:flex-end;} .chat-author{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin:0 6px 2px;} .chat-msg.staff .chat-author{color:var(--primary-strong);} .chat-bubble{background:var(--bg-surface);border:1.5px solid var(--line);border-radius:16px 16px 16px 4px;padding:8px 11px;} .chat-msg.mine .chat-bubble{background:var(--primary-soft);border-color:transparent;border-radius:16px 16px 4px 16px;} .chat-msg.queued .chat-bubble{background:var(--warning-soft);border:1.5px dashed var(--warning);} .chat-text{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;} .chat-photos{display:flex;flex-wrap:wrap;gap:4px;max-width:224px;margin-top:6px;} .chat-photos img{width:110px;max-width:calc(50% - 2px);aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--track);cursor:pointer;} .chat-photos img:only-child{max-width:100%;} .chat-text + .chat-photos{margin-top:6px;} .chat-bubble > .chat-photos:first-child{margin-top:0;} .chat-time{font-size:10.5px;color:var(--ink-faint);margin:2px 6px 0;} .chat-pill{display:inline-block;padding:2px 8px;border-radius:var(--pill);font-size:11px;font-weight:700;} .chat-pill.queued{background:var(--warning-soft);color:var(--warning);} .chat-pill.error{background:var(--danger-soft);color:var(--danger);} .chat-sheet .crew-photo-preview{margin-top:0;} .chat-sheet .crew-photo-preview:empty{display:none;} .chat-compose{display:flex;align-items:flex-end;gap:8px;} .chat-compose textarea{flex:1;min-height:44px;max-height:120px;resize:none;} .chat-compose .btn{flex:none;padding:12px 18px;} .chat-photo-btn{font-size:20px;padding:9px 10px;cursor:pointer;} /* Timeline: nút 💬 nằm cạnh dòng (không lồng nút trong nút) */ .timeline-row-wrap{position:relative;border-top:1px dashed var(--line);} .timeline-group-head + .timeline-row-wrap{border-top:0;} .timeline-row-wrap > .timeline-row{border-top:0;} .timeline-row-wrap .timeline-row-head{padding-right:60px;} /* chừa chỗ nút, thanh ngày vẫn đủ rộng — khớp trục */ .timeline-row-wrap > .chat-btn{position:absolute;top:5px;right:0;} /* Thẻ đầu việc màn thợ: nút 💬 cạnh nhãn tiến độ */ .crew-item-card .chat-btn{flex:none;font-size:18px;padding:6px 8px;} .chat-note{font-size:12px;line-height:1.45;color:var(--ink-soft);background:var(--bg-surface);border-radius:var(--radius-input);padding:7px 10px;} /* ---------- Cài đặt nhanh (js/settings.js): ☀/☾ + ⚙ trên thanh đầu trang ---------- */ .header-right{display:flex;align-items:center;gap:10px;flex:none;} .qs-slot{display:inline-flex;gap:6px;flex:none;} .qs-btn{font-size:15px;line-height:1;padding:6px 9px;min-width:32px;} .qs-menu{position:fixed;left:12px;right:12px;z-index:1000;background:var(--paper);color:var(--ink); border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm),0 18px 40px -16px rgba(0,0,0,.35);padding:14px 16px 6px;} @media (min-width:521px){.qs-menu{width:340px;}} .qs-title{font-weight:800;font-size:15px;margin-bottom:8px;} .qs-label{font-size:12px;font-weight:700;color:var(--ink-soft);} .qs-menu .seg-switch{display:flex;margin:6px 0 12px;} .qs-menu .seg-switch button{flex:1;padding:8px 6px;} /* Cỡ chữ: CSS viết bằng px nên phóng phần nội dung bằng zoom — giữ tỉ lệ bố cục. Thanh đầu trang giữ nguyên để các nút không bị đẩy tràn trên điện thoại. */ :root[data-font="sm"] :is(.staff-content,.bottom-nav,.crew-workspace,.client-scroll,.modal-sheet,.login-form){zoom:.92;} :root[data-font="lg"] :is(.staff-content,.bottom-nav,.crew-workspace,.client-scroll,.modal-sheet,.login-form){zoom:1.12;} @media (max-width:520px){ .app-header > div:last-child{gap:8px !important;} .app-header .header-logo.logo-wide{display:none;} .app-header .header-logo.logo-mark{display:block;} .app-header > div:last-child > .header-user{min-width:52px;} .qs-btn{padding:6px 7px;min-width:30px;} } /* Trang thợ / chủ nhà: tên công trình dài co lại "…", không đẩy nút ⚙ ra ngoài */ .app-header:has(> .header-right) .header-left{flex:1 1 auto;min-width:0;} /* Icon vai trò (KTS / Quản lý / Quản trị) trước tên nhân viên */ .role-ic{width:20px;height:20px;vertical-align:-5px;margin-right:5px;} .member-role .role-ic{width:18px;height:18px;vertical-align:-4px;margin-right:4px;} /* Điện thoại: đầu trang chật, tên chỉ còn "Qu…" — hiện riêng icon vai trò (bấm vẫn mở Cài đặt tài khoản) */ @media (max-width:520px){ .app-header > div:last-child > .header-user{min-width:0;text-decoration:none;} .header-user-name{display:none;} .header-user .role-ic{width:26px;height:26px;margin:0;vertical-align:middle;} } /* Icon trên thanh công trình (Khách · Phụ thuộc · KTS phụ trách · Đóng/Mở lại) */ .project-bar .icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;} .btn-ic{width:22px;height:22px;flex:none;display:block;} .chip-ic{width:18px;height:18px;vertical-align:-4px;margin-right:5px;} /* Tối: viền mực của icon chìm vào nền — thêm quầng sáng mảnh như icon menu dưới */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(.btn-ic,.chip-ic){filter:drop-shadow(0 0 .6px rgba(226,232,240,.85));} } :root[data-theme="dark"] :is(.btn-ic,.chip-ic){filter:drop-shadow(0 0 .6px rgba(226,232,240,.85));} @media (max-width:520px){ .project-bar .btn-ic{width:20px;height:20px;} .project-bar .icon-btn{gap:3px;} } /* Biểu tượng navy trên nền tím: viền trắng mảnh cho nổi */ .header-logo.logo-mark{background:#fff;border-radius:50%;padding:2px;box-shadow:0 2px 8px -2px rgba(0,0,0,.3);}