@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Hai vùng chức năng theo bố cục nhập liệu / dữ liệu. */
.dashboard-grid{gap:38px!important}
/* Item của grid mặc định là min-width:auto nên không co nhỏ hơn nội dung bên trong.
   Bảng kênh rộng ~920px vì các ô không xuống dòng, thế là nó kéo giãn cả cột grid và
   khung nhập liệu tràn khỏi màn hình điện thoại. Cho phép co lại, phần thừa của bảng
   để .table-wrap tự cuộn ngang bên trong nó. */
.dashboard-grid>*{min-width:0}
.table-wrap{min-width:0}
.entry-panel{border:none!important;outline:0!important;background:#ffffffed;padding:28px;border-radius:16px;box-shadow:0 18px 45px #8b5b4712}
.entry-panel .form-card,.entry-panel .bulk-card{padding:0}
.entry-panel .bulk-card{border-top:0;margin-top:0;padding-top:0}
.table-card{border:none!important;outline:0!important;border-radius:16px;background:#ffffffed!important;padding:28px!important;box-shadow:0 18px 45px #8b5b4712!important}
.site-footer{margin-top:46px;padding:20px 0 4px;border-top:1px solid #ead8cf;color:var(--muted);font-size:.82rem;text-align:center}.site-footer a{color:var(--blue);font-weight:600;text-decoration:none}.site-footer a:hover{text-decoration:underline}
.panel-kicker{color:#181818;font-size:.69rem;font-weight:800;letter-spacing:.13em;margin:0}
.section-heading h2{margin:3px 0 0!important}
.table-card .panel-kicker{color:#d62f2b}
.form-fields{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:0 18px}
.field{min-width:0}
.field-wide{grid-column:2}
.url-row{flex-direction:row!important}
.url-row .secondary{height:43px!important;align-self:auto!important;padding:0 12px!important}
@media(max-width:820px){.entry-panel,.table-card{padding:18px!important;border-width:0!important}.form-fields{grid-template-columns:1fr}.field-wide{grid-column:auto}.url-row{flex-direction:column!important}.url-row .secondary{height:40px!important;align-self:flex-start!important}}
/* Khu vực quản trị — hai tab, chỉ hiện với vai trò admin. */
/* Không dùng offset âm cho tab: phần thừa lọt ra ngoài khung, mà overflow-x:auto
   khiến trình duyệt tự bật overflow-y nên sinh ra thanh cuộn dọc thừa. Vạch nhấn
   của tab đang mở vẽ bằng inset box-shadow để mọi thứ nằm gọn bên trong. */
.tabs{display:flex;gap:6px;margin:22px 0 0;border-bottom:1px solid #ead8cf;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:11px 17px;border-radius:10px 10px 0 0;color:var(--muted);font-size:.88rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s,box-shadow .2s}
.tab:hover{color:var(--ink);background:#fff8f4}
.tab.is-active{background:#ffffffed;color:var(--accent-dark);box-shadow:inset 0 2px 0 var(--accent)}
.self-tag{display:inline-block;margin-left:4px;border-radius:999px;background:#fff0eb;color:#a84324;padding:2px 7px;font-size:.68rem;font-weight:700}
.role-badge{display:inline-block;border-radius:999px;background:#e8effa;color:var(--blue);padding:4px 9px;font-size:.72rem;font-weight:700}
/* Badge vai trò bấm được để đổi qua lại; viền đứt gợi ý đây là thứ thao tác được. */
.role-toggle{border:1px dashed transparent;background:#f1f3f6;color:var(--muted);cursor:pointer;font:inherit;font-size:.72rem;font-weight:700;transition:background .2s,border-color .2s,color .2s}
.role-toggle.is-admin{background:#e8effa;color:var(--blue)}
.role-toggle:hover{border-color:currentColor;background:#e4e8ee}
.role-toggle.is-admin:hover{background:#dbe6f8}
.role-toggle:focus-visible{outline:3px solid #fadbcf}
td form{margin:0}
td.dim{color:var(--muted)}
.table-card .actions .secondary,.table-card .actions .danger{height:32px;padding:0 12px;font-size:.8rem}
/* Nút xoá trong bảng nhân viên đứng cạnh nút "Cấp mã mới" nên phải cùng dáng viền,
   chỉ khác màu; kiểu chữ trơn của .delete chỉ hợp khi đứng một mình như ở bảng kênh. */
.danger{border:1px solid #eec4c0;border-radius:8px;background:#fdecea;color:var(--danger);font:inherit;font-weight:700;padding:0 10px;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
/* Cột URL in nguyên địa chỉ. Cắt đuôi khi quá dài để một liên kết bất thường không
   kéo giãn cả bảng; địa chỉ đầy đủ vẫn xem được ở tooltip và khi bấm vào. */
.url-link{display:inline-block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.url-link:hover{text-decoration:underline}
/* Id kênh là chuỗi máy đọc: dùng font đều nét để dễ dò từng ký tự và bôi copy. */
.channel-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:var(--muted);user-select:all}
/* Xoá mềm: tài khoản đã xoá vẫn nằm trong bảng để khôi phục, nên phải nhìn ra ngay là khác. */
.name-cell{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.name-cell form{margin:0}
.deleted-tag{display:inline-block;border-radius:999px;background:#fdecea;color:var(--danger);padding:2px 7px;font-size:.68rem;font-weight:700}
.restore{border:0;background:transparent;padding:0;color:var(--blue);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.restore:hover{text-decoration:underline}
/* Xoá hẳn là thao tác không lùi lại được: để màu cảnh báo và tách khỏi nút Khôi phục
   bằng một vạch ngăn, tránh bấm nhầm sang khi hai nút đứng sát nhau. */
.purge{margin-left:2px;padding-left:10px;border:0;border-left:1px solid #f0d9d5;background:transparent;color:var(--danger);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.purge:hover{text-decoration:underline}
.row-deleted td{color:var(--muted)}
.row-deleted .role-badge{background:#f1f3f6;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#12213a5c;animation:modal-fade .16s ease-out}
.modal-card{width:min(100%,470px);padding:30px;text-align:center;animation:modal-pop .18s ease-out}
.modal-card h2{margin:6px 0 10px;font-size:1.6rem}
.modal-card .access-code{margin:18px 0 0}
.modal-actions,.stacked-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .primary,.stacked-actions .primary{width:auto;flex:1;margin-top:0}
.modal-actions .secondary,.stacked-actions .secondary{flex:1}
.secondary.wide{height:46px;padding:0 16px}
/* Popup sửa hồ sơ nhân viên: rộng rãi, hai cột, các ô để nguyên cỡ như biểu mẫu thường
   chứ không nén lại — form này nhập tay nên cần chỗ thở. */
.modal-backdrop[hidden]{display:none}
.modal-wide{width:min(100%,660px);padding:34px 34px 30px;text-align:left}
.modal-wide h2{margin:6px 0 8px}
.modal-wide>.muted{margin:0}
.modal-fields{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px;margin-top:20px}
.modal-fields .field-hint{min-height:0;margin-bottom:2px}
.modal-wide .modal-actions{margin-top:26px}
@media(max-width:640px){.modal-wide{padding:22px 20px 20px}.modal-fields{grid-template-columns:1fr}}
.link-button{display:grid;place-items:center;text-align:center}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:520px){.modal-actions,.stacked-actions{flex-direction:column}}

/* Bước 1 — ô dán URL là nhân vật chính; nút tải file thu về một nút nhỏ cạnh nhãn. */
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.label-row label{margin-bottom:7px}
.file-button{display:inline-flex;align-items:center;gap:6px;margin:0;border:1px solid #d6dfea;border-radius:8px;padding:5px 11px;background:#f3f6fb;color:var(--blue);font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.file-button:hover{background:#e8eefa;border-color:#b9c9de}
.file-button code{font-size:.74rem}
.file-button input{position:absolute;width:1px;height:1px;padding:0;opacity:0;pointer-events:none}
.file-button:focus-within{outline:3px solid #fadbcf;border-color:var(--accent)}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:0 18px}
.bulk-card .bulk-textarea{min-height:168px}
@media(max-width:820px){.field-row{grid-template-columns:1fr}}

/* Bước 2 — bảng nháp: sửa tại chỗ trước khi ghi vào CSDL và Google Sheet. */
.step-dot{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:50%;background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;vertical-align:-3px}
.draft-card{margin-top:26px;padding-top:24px;border-top:1px solid #f0e2da;animation:draft-in .22s ease-out}
.draft-card[hidden]{display:none}
@keyframes draft-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.draft-summary{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.draft-summary:empty{display:none}
.chip{border-radius:999px;padding:4px 11px;font-size:.73rem;font-weight:700}
.chip-ok{background:#e9f7ee;color:#1c6b3a}.chip-manual{background:#fdf3e2;color:#8a5a12}.chip-duplicate{background:#eef2f7;color:#4c5a6d}.chip-invalid{background:#fdecea;color:#93302a}
.draft-table{min-width:820px}
.draft-table td{padding:7px 8px}
.draft-table th:first-child,.draft-table td:first-child{width:44px;color:var(--muted)}
.draft-table td:last-child{width:40px;text-align:right}
.draft-table input,.draft-table select{height:37px;padding:7px 10px;font-size:.85rem}
.draft-table input:disabled,.draft-table select:disabled{background:#f7f8fa;color:#8b95a3;cursor:not-allowed}
.follower-cell{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.draft-table{min-width:920px}
.draft-table td:nth-child(2){min-width:152px}.draft-table td:nth-child(3){min-width:210px}.draft-table td:nth-child(4){min-width:160px}
.draft-url{display:inline-block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:.82rem}
.draft-table tr.is-blocked{background:#fcfcfd}
.draft-table tr.is-blocked .draft-url{color:var(--muted)}
.status-pill{display:inline-block;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:700;white-space:nowrap}
.status-ok{background:#e9f7ee;color:#1c6b3a}.status-manual{background:#fdf3e2;color:#8a5a12}.status-duplicate{background:#eef2f7;color:#4c5a6d}.status-invalid{background:#fdecea;color:#93302a}
.row-remove{border:0;background:transparent;padding:4px 6px;color:#98a3b2;font-size:.95rem;line-height:1;cursor:pointer;border-radius:6px}
.row-remove:hover{background:#fdecea;color:var(--danger)}
.draft-actions{display:flex;align-items:center;gap:16px;margin-top:16px}
.draft-actions .primary{width:auto;margin-top:0;min-width:170px}
.draft-actions .primary:disabled{background:#e6e9ee;border-color:#dcdfe5;color:#98a3b2;cursor:not-allowed}
.field-hint.is-error{color:var(--danger);font-weight:600}
.sync-alert{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 0;border-radius:10px}
.sync-alert form{margin:0}
.sync-alert .secondary{height:36px}
.alert-ok{background:#e9f7ee;border-left-color:#2e8b57;color:#1c6b3a}
.table-card .section-heading form{margin:0}
.table-card .section-heading .secondary{height:36px;padding:0 13px}
@media(max-width:820px){.draft-actions{flex-direction:column;align-items:stretch;gap:12px}.draft-actions .primary{width:100%}}
:root{--ink:#12213a;--muted:#536275;--paper:#fffdf9;--card:#ffffffeb;--line:#f4dfd5;--accent:#ee693f;--accent-dark:#ca4d28;--blue:#175394;--danger:#bc3f36}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Inter,system-ui,sans-serif;background-color:var(--paper);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;min-height:100vh}.shell{max-width:1720px;margin:auto;padding:28px 28px 56px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid #ead8cf}.logo{color:var(--blue);font-weight:800;letter-spacing:.08em;text-decoration:none}.logo span{color:var(--accent);letter-spacing:0}.user-nav{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:.86rem}.user-nav form{margin:0}.hero{max-width:none;margin:64px 0 34px}.hero h1,.auth-card h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.05;margin:8px 0 14px}.hero h1{white-space:nowrap}.hero>p:last-child{line-height:1.65;color:var(--muted)}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em;color:var(--accent);margin:0}.card{background:var(--card);border:1px solid #ebdfd8;border-radius:16px;box-shadow:0 18px 45px #8b5b4712}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:20px}.form-card,.bulk-card,.table-card{padding:25px}.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:21px}.section-heading h2{font-size:1.1rem;margin:0}.section-heading a{color:var(--blue);font-size:.85rem}label{display:block;margin:16px 0 7px;font-weight:600;font-size:.85rem}.optional{color:var(--muted);font-weight:400}input,select,textarea{width:100%;border:1px solid #d7e0eb;border-radius:8px;background:#fff;padding:10px 12px;color:var(--ink);font:inherit}input,select{height:43px}textarea{min-height:88px;resize:vertical;line-height:1.5}input:focus,select:focus,textarea:focus{outline:3px solid #fadbcf;border-color:var(--accent)}.url-row{display:flex;flex-direction:column;gap:8px}.url-row input{min-width:0}.url-row .secondary{height:40px;align-self:flex-start}.bulk-import{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:18px;align-items:stretch}.bulk-textarea{min-height:190px}.file-panel{border:1px dashed #c7d5e6;border-radius:10px;padding:14px;background:#f8fbff}.file-panel input{padding:8px;height:auto;background:#fff}.primary,.secondary,.delete,.edit,.text-button{font:inherit;font-weight:700;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.primary{width:100%;border:1px solid var(--accent-dark);border-radius:8px;color:#fff;background:var(--accent);padding:12px 14px;margin-top:22px}.primary:hover{background:var(--accent-dark)}.secondary{border:1px solid #d6dfea;border-radius:8px;background:#f3f6fb;color:var(--blue);padding:0 10px;white-space:nowrap}.field-hint{min-height:17px;margin:6px 0 0;color:var(--muted);font-size:.75rem;line-height:1.4}.alert{background:#fff0ed;border-left:3px solid var(--accent);padding:10px 12px;color:#923820;font-size:.85rem}.muted{color:var(--muted);font-size:.86rem;line-height:1.5}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.86rem}th{text-align:left;font-size:.72rem;color:#6a7180;letter-spacing:.06em;text-transform:uppercase;padding:0 10px 11px;border-bottom:1px solid #dce3eb}td{padding:13px 10px;border-bottom:1px solid #edf0f4;vertical-align:middle;white-space:nowrap}.platform-badge{display:inline-block;background:#fff0eb;color:#a84324;border-radius:999px;padding:4px 7px;font-size:.72rem;font-weight:700}.url-link,.edit{color:var(--blue);font-weight:600;text-decoration:none}.actions{display:flex;gap:10px}.actions form{margin:0}.delete,.text-button{border:0;background:transparent;padding:0;color:var(--danger)}.empty{text-align:center;color:var(--muted);padding:32px}.auth-layout{min-height:calc(100vh - 84px);display:grid;place-content:center;gap:34px;text-align:center}.brand h1{margin:5px 0 8px;font-size:2.5rem;color:var(--accent)}.brand span{font-size:.73rem;font-weight:800;letter-spacing:.18em;color:var(--blue)}.brand p{color:var(--muted);margin:0}.auth-card{width:min(100%,450px);padding:28px;text-align:left}.auth-card h2{margin:0 0 5px}.success-card{text-align:center}.access-code{display:block;margin:22px 0;padding:14px;border:1px dashed var(--accent);border-radius:8px;background:#fff7f3;color:var(--accent-dark);font-size:1.25rem;font-weight:800;letter-spacing:.08em}.link-button{display:block;text-decoration:none}@media(max-width:820px){.shell{padding:18px 14px 38px}.topbar{align-items:flex-start;gap:12px}.user-nav{align-items:flex-end;flex-direction:column;gap:5px}.hero{margin:42px 0 24px}.hero h1{white-space:normal}.form-card,.bulk-card,.table-card{padding:19px}.auth-layout{min-height:calc(100vh - 56px)}.bulk-import{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}